add style property and use tagstring

This commit is contained in:
CoolElectronics 2024-03-12 23:14:35 -04:00
parent 00995d4819
commit dc41da5914
No known key found for this signature in database
GPG key ID: F63593D168636C50

View file

@ -32,7 +32,8 @@ let __use_trap = false;
Object.defineProperty(window, "use", { Object.defineProperty(window, "use", {
get: () => { get: () => {
__use_trap = true; __use_trap = true;
return (ptr, mapping) => { return (ptr, mapping, ...rest) => {
if (ptr instanceof Array) return usestr(ptr, mapping, ...rest);
assert(isDLPtr(ptr), "a value was passed into use() that was not part of a stateful context"); assert(isDLPtr(ptr), "a value was passed into use() that was not part of a stateful context");
__use_trap = false; __use_trap = false;
if (mapping) ptr[USE_MAPFN] = mapping; if (mapping) ptr[USE_MAPFN] = mapping;
@ -40,6 +41,36 @@ Object.defineProperty(window, "use", {
}; };
} }
}); });
const usestr = (strings, ...values) => {
__use_trap = false;
let state = stateful({});
const flattened_template = [];
for (const i in strings) {
flattened_template.push(strings[i]);
if (values[i]) {
const prop = values[i];
if (isDLPtr(prop)) {
const current_i = flattened_template.length;
let oldparsed;
handle(prop, (val) => {
flattened_template[current_i] = String(val);
let parsed = flattened_template.join("");
if (parsed != oldparsed)
state.string = parsed
oldparsed = parsed;
});
} else {
flattened_template.push(String(prop));
}
}
}
state.string = flattened_template.join("");
return use(state.string);
};
Object.assign(window, { isDLPtr, h, stateful, handle, $if, Fragment }); Object.assign(window, { isDLPtr, h, stateful, handle, $if, Fragment });
let TRAPS = new Map; let TRAPS = new Map;
@ -48,7 +79,7 @@ let TRAPS = new Map;
// - whenever a property is set, notify the subscribed listeners // - whenever a property is set, notify the subscribed listeners
// This is what makes our "pass-by-reference" magic work // This is what makes our "pass-by-reference" magic work
function stateful(target, hook) { function stateful(target, hook) {
assert(target instanceof Object, "stateful() requires an object"); assert(isobj(target), "stateful() requires an object");
target[LISTENERS] = []; target[LISTENERS] = [];
target[TARGET] = target; target[TARGET] = target;
let TOPRIMITIVE = Symbol.toPrimitive; let TOPRIMITIVE = Symbol.toPrimitive;
@ -125,7 +156,7 @@ function handle(ptr, callback) {
if (prop === resolvedSteps[i] && target === tgt) { if (prop === resolvedSteps[i] && target === tgt) {
update(); update();
if (val instanceof Object) { if (isobj(val)) {
let v = val[LISTENERS]; let v = val[LISTENERS];
if (v && !v.includes(subscription)) { if (v && !v.includes(subscription)) {
v.push(curry(val[TARGET], i + 1)); v.push(curry(val[TARGET], i + 1));
@ -296,6 +327,17 @@ function h(type, props, ...children) {
} }
delete props[name]; delete props[name];
} }
if (name == "style" && isobj(ptr)) {
for (let key in ptr) {
let prop = ptr[key];
if (isDLPtr(prop)) {
handle(prop, value => elm.style[key] = value);
} else {
elm.style[key] = prop;
}
}
delete props[name];
}
} }
useProp("class", classlist => { useProp("class", classlist => {