mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-01 19:55:53 +02:00
⚡ Refatc signals to .get/.set syntax #26
This commit is contained in:
parent
3168f452ae
commit
ed7e6c7963
@ -18,19 +18,19 @@ function HelloWorldComponent({ initial }){
|
||||
/** @param {HTMLOptionElement} el */
|
||||
const isSelected= el=> (el.selected= el.value===initial);
|
||||
// @ts-expect-error 2339: The <select> has only two options with {@link Emoji}
|
||||
const onChange= on("change", event=> emoji(event.target.value));
|
||||
const onChange= on("change", event=> emoji.set(event.target.value));
|
||||
|
||||
return el().append(
|
||||
el("p", {
|
||||
textContent: S(() => `Hello World ${emoji().repeat(clicks())}`),
|
||||
textContent: S(() => `Hello World ${emoji.get().repeat(clicks.get())}`),
|
||||
className: "example",
|
||||
ariaLive: "polite", //OR ariaset: { live: "polite" },
|
||||
dataset: { example: "Example" }, //OR dataExample: "Example",
|
||||
}),
|
||||
el("button",
|
||||
{ textContent: "Fire", type: "button" },
|
||||
on("click", ()=> clicks(clicks() + 1)),
|
||||
on("keyup", ()=> clicks(clicks() - 2)),
|
||||
on("click", ()=> clicks.set(clicks.get() + 1)),
|
||||
on("keyup", ()=> clicks.set(clicks.get() - 2)),
|
||||
),
|
||||
el("select", null, onChange).append(
|
||||
el(OptionComponent, "🎉", isSelected),//OR { textContent: "🎉" }
|
||||
|
||||
169
dist/dde-with-signals.js
vendored
169
dist/dde-with-signals.js
vendored
@ -1,36 +1,5 @@
|
||||
//deka-dom-el library is available via global namespace `dde`
|
||||
(()=> {
|
||||
// src/signals-lib/common.js
|
||||
var signals_global = {
|
||||
/**
|
||||
* Checks if a value is a signal
|
||||
* @param {any} attributes - Value to check
|
||||
* @returns {boolean} Whether the value is a signal
|
||||
*/
|
||||
isSignal(attributes) {
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* Processes an attribute that might be reactive
|
||||
* @param {Element} obj - Element that owns the attribute
|
||||
* @param {string} key - Attribute name
|
||||
* @param {any} attr - Attribute value
|
||||
* @param {Function} set - Function to set the attribute
|
||||
* @returns {any} Processed attribute value
|
||||
*/
|
||||
processReactiveAttribute(obj, key, attr, set) {
|
||||
return attr;
|
||||
}
|
||||
};
|
||||
function registerReactivity(def, global = true) {
|
||||
if (global) return Object.assign(signals_global, def);
|
||||
Object.setPrototypeOf(def, signals_global);
|
||||
return def;
|
||||
}
|
||||
function signals(_this) {
|
||||
return signals_global.isPrototypeOf(_this) && _this !== signals_global ? _this : signals_global;
|
||||
}
|
||||
|
||||
// src/helpers.js
|
||||
var hasOwn = (...a) => Object.prototype.hasOwnProperty.call(...a);
|
||||
function isUndef(value) {
|
||||
@ -42,8 +11,20 @@ function typeOf(v) {
|
||||
if (v === null) return "null";
|
||||
return Object.prototype.toString.call(v);
|
||||
}
|
||||
function isInstance(obj, cls) {
|
||||
return obj instanceof cls;
|
||||
}
|
||||
function isProtoFrom(obj, cls) {
|
||||
return Object.prototype.isPrototypeOf.call(cls, obj);
|
||||
}
|
||||
function oCreate(proto = null, p = {}) {
|
||||
return Object.create(proto, p);
|
||||
}
|
||||
function oAssign(...o) {
|
||||
return Object.assign(...o);
|
||||
}
|
||||
function onAbort(signal2, listener) {
|
||||
if (!signal2 || !(signal2 instanceof AbortSignal))
|
||||
if (!signal2 || !isInstance(signal2, AbortSignal))
|
||||
return true;
|
||||
if (signal2.aborted)
|
||||
return;
|
||||
@ -67,7 +48,7 @@ var Defined = class extends Error {
|
||||
super();
|
||||
const [curr, ...rest] = this.stack.split("\n");
|
||||
const curr_file = curr.slice(curr.indexOf("@"), curr.indexOf(".js:") + 4);
|
||||
const curr_lib = curr_file.includes("src/dom-common.js") ? "src/" : curr_file;
|
||||
const curr_lib = curr_file.includes("src/helpers.js") ? "src/" : curr_file;
|
||||
this.stack = rest.find((l) => !l.includes(curr_lib)) || curr;
|
||||
}
|
||||
get compact() {
|
||||
@ -76,6 +57,37 @@ var Defined = class extends Error {
|
||||
}
|
||||
};
|
||||
|
||||
// src/signals-lib/common.js
|
||||
var signals_global = {
|
||||
/**
|
||||
* Checks if a value is a signal
|
||||
* @param {any} attributes - Value to check
|
||||
* @returns {boolean} Whether the value is a signal
|
||||
*/
|
||||
isSignal(attributes) {
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* Processes an attribute that might be reactive
|
||||
* @param {Element} obj - Element that owns the attribute
|
||||
* @param {string} key - Attribute name
|
||||
* @param {any} attr - Attribute value
|
||||
* @param {Function} set - Function to set the attribute
|
||||
* @returns {any} Processed attribute value
|
||||
*/
|
||||
processReactiveAttribute(obj, key, attr, set) {
|
||||
return attr;
|
||||
}
|
||||
};
|
||||
function registerReactivity(def, global = true) {
|
||||
if (global) return oAssign(signals_global, def);
|
||||
Object.setPrototypeOf(def, signals_global);
|
||||
return def;
|
||||
}
|
||||
function signals(_this) {
|
||||
return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
|
||||
}
|
||||
|
||||
// src/dom-common.js
|
||||
var enviroment = {
|
||||
setDeleteAttr,
|
||||
@ -91,7 +103,7 @@ function setDeleteAttr(obj, prop, val) {
|
||||
Reflect.set(obj, prop, val);
|
||||
if (!isUndef(val)) return;
|
||||
Reflect.deleteProperty(obj, prop);
|
||||
if (obj instanceof enviroment.H && obj.getAttribute(prop) === "undefined")
|
||||
if (isInstance(obj, enviroment.H) && obj.getAttribute(prop) === "undefined")
|
||||
return obj.removeAttribute(prop);
|
||||
if (Reflect.get(obj, prop) === "undefined")
|
||||
return Reflect.set(obj, prop, "");
|
||||
@ -149,7 +161,7 @@ var scope = {
|
||||
* @returns {number} New length of the scope stack
|
||||
*/
|
||||
push(s = {}) {
|
||||
return scopes.push(Object.assign({}, this.current, { prevent: false }, s));
|
||||
return scopes.push(oAssign({}, this.current, { prevent: false }, s));
|
||||
},
|
||||
/**
|
||||
* Pushes the root scope to the stack
|
||||
@ -190,7 +202,7 @@ function createElement(tag, attributes, ...addons) {
|
||||
const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0);
|
||||
scope.push({ scope: tag, host });
|
||||
el = tag(attributes || void 0);
|
||||
const is_fragment = el instanceof enviroment.F;
|
||||
const is_fragment = isInstance(el, enviroment.F);
|
||||
if (el.nodeName === "#comment") break;
|
||||
const el_mark = createElement.mark({
|
||||
type: "component",
|
||||
@ -273,7 +285,7 @@ var { setDeleteAttr: setDeleteAttr2 } = enviroment;
|
||||
function assign(element, ...attributes) {
|
||||
if (!attributes.length) return element;
|
||||
assign_context.set(element, assignContext(element, this));
|
||||
for (const [key, value] of Object.entries(Object.assign({}, ...attributes)))
|
||||
for (const [key, value] of Object.entries(oAssign({}, ...attributes)))
|
||||
assignAttribute.call(this, element, key, value);
|
||||
assign_context.delete(element);
|
||||
return element;
|
||||
@ -314,7 +326,7 @@ function assignAttribute(element, key, value) {
|
||||
}
|
||||
function assignContext(element, _this) {
|
||||
if (assign_context.has(element)) return assign_context.get(element);
|
||||
const is_svg = element instanceof enviroment.S;
|
||||
const is_svg = isInstance(element, enviroment.S);
|
||||
const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
|
||||
const s = signals(_this);
|
||||
return { setRemoveAttr, s };
|
||||
@ -331,7 +343,7 @@ function classListDeclarative(element, toggle) {
|
||||
return element;
|
||||
}
|
||||
function elementAttribute(element, op, key, value) {
|
||||
if (element instanceof enviroment.H)
|
||||
if (isInstance(element, enviroment.H))
|
||||
return element[op + "Attribute"](key, value);
|
||||
return element[op + "AttributeNS"](null, key, value);
|
||||
}
|
||||
@ -491,9 +503,9 @@ function connectionsChangesObserverConstructor() {
|
||||
if (store.size > 30)
|
||||
await requestIdle();
|
||||
const out = [];
|
||||
if (!(element instanceof Node)) return out;
|
||||
if (!isInstance(element, Node)) return out;
|
||||
for (const el of store.keys()) {
|
||||
if (el === element || !(el instanceof Node)) continue;
|
||||
if (el === element || !isInstance(el, Node)) continue;
|
||||
if (element.contains(el))
|
||||
out.push(el);
|
||||
}
|
||||
@ -589,7 +601,7 @@ function dispatchEvent(name, options, host) {
|
||||
d.unshift(element);
|
||||
element = typeof host === "function" ? host() : host;
|
||||
}
|
||||
const event = d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options);
|
||||
const event = d.length ? new CustomEvent(name, oAssign({ detail: d[0] }, options)) : new Event(name, options);
|
||||
return element.dispatchEvent(event);
|
||||
};
|
||||
}
|
||||
@ -599,7 +611,7 @@ function on(event, listener, options) {
|
||||
return element;
|
||||
};
|
||||
}
|
||||
var lifeOptions = (obj) => Object.assign({}, typeof obj === "object" ? obj : null, { once: true });
|
||||
var lifeOptions = (obj) => oAssign({}, typeof obj === "object" ? obj : null, { once: true });
|
||||
on.connected = function(listener, options) {
|
||||
options = lifeOptions(options);
|
||||
return function registerElement(element) {
|
||||
@ -657,12 +669,12 @@ var queueSignalWrite = /* @__PURE__ */ (() => {
|
||||
let scheduled = false;
|
||||
function flushSignals() {
|
||||
scheduled = false;
|
||||
for (const signal2 of pendingSignals) {
|
||||
pendingSignals.delete(signal2);
|
||||
const todo = pendingSignals;
|
||||
pendingSignals = /* @__PURE__ */ new Set();
|
||||
for (const signal2 of todo) {
|
||||
const M = signal2[mark];
|
||||
if (M) M.listeners.forEach((l) => l(M.value));
|
||||
}
|
||||
pendingSignals.clear();
|
||||
}
|
||||
return function(s) {
|
||||
pendingSignals.add(s);
|
||||
@ -673,8 +685,27 @@ var queueSignalWrite = /* @__PURE__ */ (() => {
|
||||
})();
|
||||
|
||||
// src/signals-lib/signals-lib.js
|
||||
var Signal = oCreate(null, {
|
||||
get: { value() {
|
||||
return read(this);
|
||||
} },
|
||||
set: { value(...v) {
|
||||
return write(this, ...v);
|
||||
} },
|
||||
toJSON: { value() {
|
||||
return read(this);
|
||||
} },
|
||||
valueOf: { value() {
|
||||
return this[mark] && this[mark].value;
|
||||
} }
|
||||
});
|
||||
var SignalReadOnly = oCreate(Signal, {
|
||||
set: { value() {
|
||||
return;
|
||||
} }
|
||||
});
|
||||
function isSignal(candidate) {
|
||||
return typeof candidate === "function" && hasOwn(candidate, mark);
|
||||
return isProtoFrom(candidate, Signal);
|
||||
}
|
||||
var stack_watch = [];
|
||||
var deps = /* @__PURE__ */ new WeakMap();
|
||||
@ -687,7 +718,7 @@ function signal(value, actions) {
|
||||
const [origin, ...deps_old] = deps.get(contextReWatch);
|
||||
deps.set(contextReWatch, /* @__PURE__ */ new Set([origin]));
|
||||
stack_watch.push(contextReWatch);
|
||||
write(out, value());
|
||||
write(out, value.get());
|
||||
stack_watch.pop();
|
||||
if (!deps_old.length) return;
|
||||
const deps_curr = deps.get(contextReWatch);
|
||||
@ -744,12 +775,8 @@ signal.clear = function(...signals2) {
|
||||
}
|
||||
};
|
||||
var key_reactive = "__dde_reactive";
|
||||
var storeMemo = /* @__PURE__ */ new WeakMap();
|
||||
function memo(key, fun, host = fun) {
|
||||
if (typeof key !== "string") key = JSON.stringify(key);
|
||||
if (!storeMemo.has(host)) storeMemo.set(host, {});
|
||||
const cache = storeMemo.get(host);
|
||||
return hasOwn(cache, key) ? cache[key] : cache[key] = fun();
|
||||
function cache(store = oCreate()) {
|
||||
return (key, fun) => hasOwn(store, key) ? store[key] : store[key] = fun();
|
||||
}
|
||||
signal.el = function(s, map) {
|
||||
const mark_start = createElement.mark({ type: "reactive", source: new Defined().compact }, true);
|
||||
@ -757,15 +784,16 @@ signal.el = function(s, map) {
|
||||
const out = enviroment.D.createDocumentFragment();
|
||||
out.append(mark_start, mark_end);
|
||||
const { current } = scope;
|
||||
let cache_shared = oCreate();
|
||||
const reRenderReactiveElement = (v) => {
|
||||
if (!mark_start.parentNode || !mark_end.parentNode)
|
||||
return removeSignalListener(s, reRenderReactiveElement);
|
||||
const cache = {};
|
||||
const memo = cache(cache_shared);
|
||||
cache_shared = oCreate();
|
||||
scope.push(current);
|
||||
let els = map(v, function useCache(key, fun) {
|
||||
return cache[key] = memo(key, fun, reRenderReactiveElement);
|
||||
return cache_shared[key] = memo(key, fun);
|
||||
});
|
||||
storeMemo.set(reRenderReactiveElement, cache);
|
||||
scope.pop();
|
||||
if (!Array.isArray(els))
|
||||
els = [els];
|
||||
@ -781,7 +809,13 @@ signal.el = function(s, map) {
|
||||
};
|
||||
addSignalListener(s, reRenderReactiveElement);
|
||||
removeSignalsFromElements(s, reRenderReactiveElement, mark_start, map);
|
||||
reRenderReactiveElement(s());
|
||||
reRenderReactiveElement(s.get());
|
||||
current.host(on.disconnected(
|
||||
() => (
|
||||
/*! Clears cached elements for reactive element `S.el` */
|
||||
cache_shared = {}
|
||||
)
|
||||
));
|
||||
return out;
|
||||
};
|
||||
function requestCleanUpReactives(host) {
|
||||
@ -797,7 +831,11 @@ var observedAttributeActions = {
|
||||
};
|
||||
function observedAttribute(store) {
|
||||
return function(instance, name) {
|
||||
const varS = (...args) => !args.length ? read(varS) : instance.setAttribute(name, ...args);
|
||||
const varS = oCreate(Signal, {
|
||||
set: { value(...v) {
|
||||
return instance.setAttribute(name, ...v);
|
||||
} }
|
||||
});
|
||||
const out = toSignal(varS, instance.getAttribute(name), observedAttributeActions);
|
||||
store[name] = out;
|
||||
return out;
|
||||
@ -841,7 +879,7 @@ var signals_config = {
|
||||
};
|
||||
addSignalListener(attrs, l);
|
||||
removeSignalsFromElements(attrs, l, element, key);
|
||||
return attrs();
|
||||
return attrs.get();
|
||||
}
|
||||
};
|
||||
function removeSignalsFromElements(s, listener, ...notes) {
|
||||
@ -864,12 +902,12 @@ var cleanUpRegistry = new FinalizationRegistry(function(s) {
|
||||
signal.clear({ [mark]: s });
|
||||
});
|
||||
function create(is_readonly, value, actions) {
|
||||
const varS = is_readonly ? () => read(varS) : (...value2) => value2.length ? write(varS, ...value2) : read(varS);
|
||||
const varS = oCreate(is_readonly ? SignalReadOnly : Signal);
|
||||
const SI = toSignal(varS, value, actions, is_readonly);
|
||||
cleanUpRegistry.register(SI, SI[mark]);
|
||||
return SI;
|
||||
}
|
||||
var protoSigal = Object.assign(/* @__PURE__ */ Object.create(null), {
|
||||
var protoSigal = oAssign(oCreate(), {
|
||||
/**
|
||||
* Prevents signal propagation
|
||||
*/
|
||||
@ -888,7 +926,7 @@ function toSignal(s, value, actions, readonly = false) {
|
||||
}
|
||||
const { host } = scope;
|
||||
Reflect.defineProperty(s, mark, {
|
||||
value: {
|
||||
value: oAssign(oCreate(protoSigal), {
|
||||
value,
|
||||
actions,
|
||||
onclear,
|
||||
@ -896,14 +934,11 @@ function toSignal(s, value, actions, readonly = false) {
|
||||
listeners: /* @__PURE__ */ new Set(),
|
||||
defined: new Defined().stack,
|
||||
readonly
|
||||
},
|
||||
}),
|
||||
enumerable: false,
|
||||
writable: false,
|
||||
configurable: true
|
||||
});
|
||||
s.toJSON = () => s();
|
||||
s.valueOf = () => s[mark] && s[mark].value;
|
||||
Object.setPrototypeOf(s[mark], protoSigal);
|
||||
return s;
|
||||
}
|
||||
function currentContext() {
|
||||
|
||||
83
dist/dde.js
vendored
83
dist/dde.js
vendored
@ -1,5 +1,39 @@
|
||||
//deka-dom-el library is available via global namespace `dde`
|
||||
(()=> {
|
||||
// src/helpers.js
|
||||
function isUndef(value) {
|
||||
return typeof value === "undefined";
|
||||
}
|
||||
function isInstance(obj, cls) {
|
||||
return obj instanceof cls;
|
||||
}
|
||||
function isProtoFrom(obj, cls) {
|
||||
return Object.prototype.isPrototypeOf.call(cls, obj);
|
||||
}
|
||||
function oAssign(...o) {
|
||||
return Object.assign(...o);
|
||||
}
|
||||
function onAbort(signal, listener) {
|
||||
if (!signal || !isInstance(signal, AbortSignal))
|
||||
return true;
|
||||
if (signal.aborted)
|
||||
return;
|
||||
signal.addEventListener("abort", listener);
|
||||
return function cleanUp() {
|
||||
signal.removeEventListener("abort", listener);
|
||||
};
|
||||
}
|
||||
function observedAttributes(instance, observedAttribute) {
|
||||
const { observedAttributes: observedAttributes3 = [] } = instance.constructor;
|
||||
return observedAttributes3.reduce(function(out, name) {
|
||||
out[kebabToCamel(name)] = observedAttribute(instance, name);
|
||||
return out;
|
||||
}, {});
|
||||
}
|
||||
function kebabToCamel(name) {
|
||||
return name.replace(/-./g, (x) => x[1].toUpperCase());
|
||||
}
|
||||
|
||||
// src/signals-lib/common.js
|
||||
var signals_global = {
|
||||
/**
|
||||
@ -23,37 +57,12 @@ var signals_global = {
|
||||
}
|
||||
};
|
||||
function registerReactivity(def, global = true) {
|
||||
if (global) return Object.assign(signals_global, def);
|
||||
if (global) return oAssign(signals_global, def);
|
||||
Object.setPrototypeOf(def, signals_global);
|
||||
return def;
|
||||
}
|
||||
function signals(_this) {
|
||||
return signals_global.isPrototypeOf(_this) && _this !== signals_global ? _this : signals_global;
|
||||
}
|
||||
|
||||
// src/helpers.js
|
||||
function isUndef(value) {
|
||||
return typeof value === "undefined";
|
||||
}
|
||||
function onAbort(signal, listener) {
|
||||
if (!signal || !(signal instanceof AbortSignal))
|
||||
return true;
|
||||
if (signal.aborted)
|
||||
return;
|
||||
signal.addEventListener("abort", listener);
|
||||
return function cleanUp() {
|
||||
signal.removeEventListener("abort", listener);
|
||||
};
|
||||
}
|
||||
function observedAttributes(instance, observedAttribute) {
|
||||
const { observedAttributes: observedAttributes3 = [] } = instance.constructor;
|
||||
return observedAttributes3.reduce(function(out, name) {
|
||||
out[kebabToCamel(name)] = observedAttribute(instance, name);
|
||||
return out;
|
||||
}, {});
|
||||
}
|
||||
function kebabToCamel(name) {
|
||||
return name.replace(/-./g, (x) => x[1].toUpperCase());
|
||||
return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
|
||||
}
|
||||
|
||||
// src/dom-common.js
|
||||
@ -71,7 +80,7 @@ function setDeleteAttr(obj, prop, val) {
|
||||
Reflect.set(obj, prop, val);
|
||||
if (!isUndef(val)) return;
|
||||
Reflect.deleteProperty(obj, prop);
|
||||
if (obj instanceof enviroment.H && obj.getAttribute(prop) === "undefined")
|
||||
if (isInstance(obj, enviroment.H) && obj.getAttribute(prop) === "undefined")
|
||||
return obj.removeAttribute(prop);
|
||||
if (Reflect.get(obj, prop) === "undefined")
|
||||
return Reflect.set(obj, prop, "");
|
||||
@ -129,7 +138,7 @@ var scope = {
|
||||
* @returns {number} New length of the scope stack
|
||||
*/
|
||||
push(s = {}) {
|
||||
return scopes.push(Object.assign({}, this.current, { prevent: false }, s));
|
||||
return scopes.push(oAssign({}, this.current, { prevent: false }, s));
|
||||
},
|
||||
/**
|
||||
* Pushes the root scope to the stack
|
||||
@ -170,7 +179,7 @@ function createElement(tag, attributes, ...addons) {
|
||||
const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0);
|
||||
scope.push({ scope: tag, host });
|
||||
el = tag(attributes || void 0);
|
||||
const is_fragment = el instanceof enviroment.F;
|
||||
const is_fragment = isInstance(el, enviroment.F);
|
||||
if (el.nodeName === "#comment") break;
|
||||
const el_mark = createElement.mark({
|
||||
type: "component",
|
||||
@ -253,7 +262,7 @@ var { setDeleteAttr: setDeleteAttr2 } = enviroment;
|
||||
function assign(element, ...attributes) {
|
||||
if (!attributes.length) return element;
|
||||
assign_context.set(element, assignContext(element, this));
|
||||
for (const [key, value] of Object.entries(Object.assign({}, ...attributes)))
|
||||
for (const [key, value] of Object.entries(oAssign({}, ...attributes)))
|
||||
assignAttribute.call(this, element, key, value);
|
||||
assign_context.delete(element);
|
||||
return element;
|
||||
@ -294,7 +303,7 @@ function assignAttribute(element, key, value) {
|
||||
}
|
||||
function assignContext(element, _this) {
|
||||
if (assign_context.has(element)) return assign_context.get(element);
|
||||
const is_svg = element instanceof enviroment.S;
|
||||
const is_svg = isInstance(element, enviroment.S);
|
||||
const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
|
||||
const s = signals(_this);
|
||||
return { setRemoveAttr, s };
|
||||
@ -311,7 +320,7 @@ function classListDeclarative(element, toggle) {
|
||||
return element;
|
||||
}
|
||||
function elementAttribute(element, op, key, value) {
|
||||
if (element instanceof enviroment.H)
|
||||
if (isInstance(element, enviroment.H))
|
||||
return element[op + "Attribute"](key, value);
|
||||
return element[op + "AttributeNS"](null, key, value);
|
||||
}
|
||||
@ -471,9 +480,9 @@ function connectionsChangesObserverConstructor() {
|
||||
if (store.size > 30)
|
||||
await requestIdle();
|
||||
const out = [];
|
||||
if (!(element instanceof Node)) return out;
|
||||
if (!isInstance(element, Node)) return out;
|
||||
for (const el of store.keys()) {
|
||||
if (el === element || !(el instanceof Node)) continue;
|
||||
if (el === element || !isInstance(el, Node)) continue;
|
||||
if (element.contains(el))
|
||||
out.push(el);
|
||||
}
|
||||
@ -569,7 +578,7 @@ function dispatchEvent(name, options, host) {
|
||||
d.unshift(element);
|
||||
element = typeof host === "function" ? host() : host;
|
||||
}
|
||||
const event = d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options);
|
||||
const event = d.length ? new CustomEvent(name, oAssign({ detail: d[0] }, options)) : new Event(name, options);
|
||||
return element.dispatchEvent(event);
|
||||
};
|
||||
}
|
||||
@ -579,7 +588,7 @@ function on(event, listener, options) {
|
||||
return element;
|
||||
};
|
||||
}
|
||||
var lifeOptions = (obj) => Object.assign({}, typeof obj === "object" ? obj : null, { once: true });
|
||||
var lifeOptions = (obj) => oAssign({}, typeof obj === "object" ? obj : null, { once: true });
|
||||
on.connected = function(listener, options) {
|
||||
options = lifeOptions(options);
|
||||
return function registerElement(element) {
|
||||
|
||||
11
dist/esm-with-signals.d.ts
vendored
11
dist/esm-with-signals.d.ts
vendored
@ -515,7 +515,14 @@ interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTS
|
||||
interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
|
||||
interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
|
||||
// editorconfig-checker-enable
|
||||
export type Signal<V, A>= (set?: V)=> V & A;
|
||||
export interface Signal<V, A> {
|
||||
/** The current value of the signal */
|
||||
get(): V;
|
||||
/** Set new value of the signal */
|
||||
set(value: V): V;
|
||||
toJSON(): V;
|
||||
valueOf(): V;
|
||||
}
|
||||
type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
|
||||
//type SymbolSignal= Symbol;
|
||||
type SymbolOnclear= symbol;
|
||||
@ -544,7 +551,7 @@ interface signal{
|
||||
* ```js
|
||||
* const name= S("Jan");
|
||||
* const surname= S("Andrle");
|
||||
* const fullname= S(()=> name()+" "+surname());
|
||||
* const fullname= S(()=> name.get()+" "+surname.get());
|
||||
* ```
|
||||
* @param value Initial signal value. Or function computing value from other signals.
|
||||
* @param actions Use to define actions on the signal. Such as add item to the array.
|
||||
|
||||
169
dist/esm-with-signals.js
vendored
169
dist/esm-with-signals.js
vendored
@ -1,34 +1,3 @@
|
||||
// src/signals-lib/common.js
|
||||
var signals_global = {
|
||||
/**
|
||||
* Checks if a value is a signal
|
||||
* @param {any} attributes - Value to check
|
||||
* @returns {boolean} Whether the value is a signal
|
||||
*/
|
||||
isSignal(attributes) {
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* Processes an attribute that might be reactive
|
||||
* @param {Element} obj - Element that owns the attribute
|
||||
* @param {string} key - Attribute name
|
||||
* @param {any} attr - Attribute value
|
||||
* @param {Function} set - Function to set the attribute
|
||||
* @returns {any} Processed attribute value
|
||||
*/
|
||||
processReactiveAttribute(obj, key, attr, set) {
|
||||
return attr;
|
||||
}
|
||||
};
|
||||
function registerReactivity(def, global = true) {
|
||||
if (global) return Object.assign(signals_global, def);
|
||||
Object.setPrototypeOf(def, signals_global);
|
||||
return def;
|
||||
}
|
||||
function signals(_this) {
|
||||
return signals_global.isPrototypeOf(_this) && _this !== signals_global ? _this : signals_global;
|
||||
}
|
||||
|
||||
// src/helpers.js
|
||||
var hasOwn = (...a) => Object.prototype.hasOwnProperty.call(...a);
|
||||
function isUndef(value) {
|
||||
@ -40,8 +9,20 @@ function typeOf(v) {
|
||||
if (v === null) return "null";
|
||||
return Object.prototype.toString.call(v);
|
||||
}
|
||||
function isInstance(obj, cls) {
|
||||
return obj instanceof cls;
|
||||
}
|
||||
function isProtoFrom(obj, cls) {
|
||||
return Object.prototype.isPrototypeOf.call(cls, obj);
|
||||
}
|
||||
function oCreate(proto = null, p = {}) {
|
||||
return Object.create(proto, p);
|
||||
}
|
||||
function oAssign(...o) {
|
||||
return Object.assign(...o);
|
||||
}
|
||||
function onAbort(signal2, listener) {
|
||||
if (!signal2 || !(signal2 instanceof AbortSignal))
|
||||
if (!signal2 || !isInstance(signal2, AbortSignal))
|
||||
return true;
|
||||
if (signal2.aborted)
|
||||
return;
|
||||
@ -65,7 +46,7 @@ var Defined = class extends Error {
|
||||
super();
|
||||
const [curr, ...rest] = this.stack.split("\n");
|
||||
const curr_file = curr.slice(curr.indexOf("@"), curr.indexOf(".js:") + 4);
|
||||
const curr_lib = curr_file.includes("src/dom-common.js") ? "src/" : curr_file;
|
||||
const curr_lib = curr_file.includes("src/helpers.js") ? "src/" : curr_file;
|
||||
this.stack = rest.find((l) => !l.includes(curr_lib)) || curr;
|
||||
}
|
||||
get compact() {
|
||||
@ -74,6 +55,37 @@ var Defined = class extends Error {
|
||||
}
|
||||
};
|
||||
|
||||
// src/signals-lib/common.js
|
||||
var signals_global = {
|
||||
/**
|
||||
* Checks if a value is a signal
|
||||
* @param {any} attributes - Value to check
|
||||
* @returns {boolean} Whether the value is a signal
|
||||
*/
|
||||
isSignal(attributes) {
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* Processes an attribute that might be reactive
|
||||
* @param {Element} obj - Element that owns the attribute
|
||||
* @param {string} key - Attribute name
|
||||
* @param {any} attr - Attribute value
|
||||
* @param {Function} set - Function to set the attribute
|
||||
* @returns {any} Processed attribute value
|
||||
*/
|
||||
processReactiveAttribute(obj, key, attr, set) {
|
||||
return attr;
|
||||
}
|
||||
};
|
||||
function registerReactivity(def, global = true) {
|
||||
if (global) return oAssign(signals_global, def);
|
||||
Object.setPrototypeOf(def, signals_global);
|
||||
return def;
|
||||
}
|
||||
function signals(_this) {
|
||||
return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
|
||||
}
|
||||
|
||||
// src/dom-common.js
|
||||
var enviroment = {
|
||||
setDeleteAttr,
|
||||
@ -89,7 +101,7 @@ function setDeleteAttr(obj, prop, val) {
|
||||
Reflect.set(obj, prop, val);
|
||||
if (!isUndef(val)) return;
|
||||
Reflect.deleteProperty(obj, prop);
|
||||
if (obj instanceof enviroment.H && obj.getAttribute(prop) === "undefined")
|
||||
if (isInstance(obj, enviroment.H) && obj.getAttribute(prop) === "undefined")
|
||||
return obj.removeAttribute(prop);
|
||||
if (Reflect.get(obj, prop) === "undefined")
|
||||
return Reflect.set(obj, prop, "");
|
||||
@ -147,7 +159,7 @@ var scope = {
|
||||
* @returns {number} New length of the scope stack
|
||||
*/
|
||||
push(s = {}) {
|
||||
return scopes.push(Object.assign({}, this.current, { prevent: false }, s));
|
||||
return scopes.push(oAssign({}, this.current, { prevent: false }, s));
|
||||
},
|
||||
/**
|
||||
* Pushes the root scope to the stack
|
||||
@ -188,7 +200,7 @@ function createElement(tag, attributes, ...addons) {
|
||||
const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0);
|
||||
scope.push({ scope: tag, host });
|
||||
el = tag(attributes || void 0);
|
||||
const is_fragment = el instanceof enviroment.F;
|
||||
const is_fragment = isInstance(el, enviroment.F);
|
||||
if (el.nodeName === "#comment") break;
|
||||
const el_mark = createElement.mark({
|
||||
type: "component",
|
||||
@ -271,7 +283,7 @@ var { setDeleteAttr: setDeleteAttr2 } = enviroment;
|
||||
function assign(element, ...attributes) {
|
||||
if (!attributes.length) return element;
|
||||
assign_context.set(element, assignContext(element, this));
|
||||
for (const [key, value] of Object.entries(Object.assign({}, ...attributes)))
|
||||
for (const [key, value] of Object.entries(oAssign({}, ...attributes)))
|
||||
assignAttribute.call(this, element, key, value);
|
||||
assign_context.delete(element);
|
||||
return element;
|
||||
@ -312,7 +324,7 @@ function assignAttribute(element, key, value) {
|
||||
}
|
||||
function assignContext(element, _this) {
|
||||
if (assign_context.has(element)) return assign_context.get(element);
|
||||
const is_svg = element instanceof enviroment.S;
|
||||
const is_svg = isInstance(element, enviroment.S);
|
||||
const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
|
||||
const s = signals(_this);
|
||||
return { setRemoveAttr, s };
|
||||
@ -329,7 +341,7 @@ function classListDeclarative(element, toggle) {
|
||||
return element;
|
||||
}
|
||||
function elementAttribute(element, op, key, value) {
|
||||
if (element instanceof enviroment.H)
|
||||
if (isInstance(element, enviroment.H))
|
||||
return element[op + "Attribute"](key, value);
|
||||
return element[op + "AttributeNS"](null, key, value);
|
||||
}
|
||||
@ -489,9 +501,9 @@ function connectionsChangesObserverConstructor() {
|
||||
if (store.size > 30)
|
||||
await requestIdle();
|
||||
const out = [];
|
||||
if (!(element instanceof Node)) return out;
|
||||
if (!isInstance(element, Node)) return out;
|
||||
for (const el of store.keys()) {
|
||||
if (el === element || !(el instanceof Node)) continue;
|
||||
if (el === element || !isInstance(el, Node)) continue;
|
||||
if (element.contains(el))
|
||||
out.push(el);
|
||||
}
|
||||
@ -587,7 +599,7 @@ function dispatchEvent(name, options, host) {
|
||||
d.unshift(element);
|
||||
element = typeof host === "function" ? host() : host;
|
||||
}
|
||||
const event = d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options);
|
||||
const event = d.length ? new CustomEvent(name, oAssign({ detail: d[0] }, options)) : new Event(name, options);
|
||||
return element.dispatchEvent(event);
|
||||
};
|
||||
}
|
||||
@ -597,7 +609,7 @@ function on(event, listener, options) {
|
||||
return element;
|
||||
};
|
||||
}
|
||||
var lifeOptions = (obj) => Object.assign({}, typeof obj === "object" ? obj : null, { once: true });
|
||||
var lifeOptions = (obj) => oAssign({}, typeof obj === "object" ? obj : null, { once: true });
|
||||
on.connected = function(listener, options) {
|
||||
options = lifeOptions(options);
|
||||
return function registerElement(element) {
|
||||
@ -655,12 +667,12 @@ var queueSignalWrite = /* @__PURE__ */ (() => {
|
||||
let scheduled = false;
|
||||
function flushSignals() {
|
||||
scheduled = false;
|
||||
for (const signal2 of pendingSignals) {
|
||||
pendingSignals.delete(signal2);
|
||||
const todo = pendingSignals;
|
||||
pendingSignals = /* @__PURE__ */ new Set();
|
||||
for (const signal2 of todo) {
|
||||
const M = signal2[mark];
|
||||
if (M) M.listeners.forEach((l) => l(M.value));
|
||||
}
|
||||
pendingSignals.clear();
|
||||
}
|
||||
return function(s) {
|
||||
pendingSignals.add(s);
|
||||
@ -671,8 +683,27 @@ var queueSignalWrite = /* @__PURE__ */ (() => {
|
||||
})();
|
||||
|
||||
// src/signals-lib/signals-lib.js
|
||||
var Signal = oCreate(null, {
|
||||
get: { value() {
|
||||
return read(this);
|
||||
} },
|
||||
set: { value(...v) {
|
||||
return write(this, ...v);
|
||||
} },
|
||||
toJSON: { value() {
|
||||
return read(this);
|
||||
} },
|
||||
valueOf: { value() {
|
||||
return this[mark] && this[mark].value;
|
||||
} }
|
||||
});
|
||||
var SignalReadOnly = oCreate(Signal, {
|
||||
set: { value() {
|
||||
return;
|
||||
} }
|
||||
});
|
||||
function isSignal(candidate) {
|
||||
return typeof candidate === "function" && hasOwn(candidate, mark);
|
||||
return isProtoFrom(candidate, Signal);
|
||||
}
|
||||
var stack_watch = [];
|
||||
var deps = /* @__PURE__ */ new WeakMap();
|
||||
@ -685,7 +716,7 @@ function signal(value, actions) {
|
||||
const [origin, ...deps_old] = deps.get(contextReWatch);
|
||||
deps.set(contextReWatch, /* @__PURE__ */ new Set([origin]));
|
||||
stack_watch.push(contextReWatch);
|
||||
write(out, value());
|
||||
write(out, value.get());
|
||||
stack_watch.pop();
|
||||
if (!deps_old.length) return;
|
||||
const deps_curr = deps.get(contextReWatch);
|
||||
@ -742,12 +773,8 @@ signal.clear = function(...signals2) {
|
||||
}
|
||||
};
|
||||
var key_reactive = "__dde_reactive";
|
||||
var storeMemo = /* @__PURE__ */ new WeakMap();
|
||||
function memo(key, fun, host = fun) {
|
||||
if (typeof key !== "string") key = JSON.stringify(key);
|
||||
if (!storeMemo.has(host)) storeMemo.set(host, {});
|
||||
const cache = storeMemo.get(host);
|
||||
return hasOwn(cache, key) ? cache[key] : cache[key] = fun();
|
||||
function cache(store = oCreate()) {
|
||||
return (key, fun) => hasOwn(store, key) ? store[key] : store[key] = fun();
|
||||
}
|
||||
signal.el = function(s, map) {
|
||||
const mark_start = createElement.mark({ type: "reactive", source: new Defined().compact }, true);
|
||||
@ -755,15 +782,16 @@ signal.el = function(s, map) {
|
||||
const out = enviroment.D.createDocumentFragment();
|
||||
out.append(mark_start, mark_end);
|
||||
const { current } = scope;
|
||||
let cache_shared = oCreate();
|
||||
const reRenderReactiveElement = (v) => {
|
||||
if (!mark_start.parentNode || !mark_end.parentNode)
|
||||
return removeSignalListener(s, reRenderReactiveElement);
|
||||
const cache = {};
|
||||
const memo = cache(cache_shared);
|
||||
cache_shared = oCreate();
|
||||
scope.push(current);
|
||||
let els = map(v, function useCache(key, fun) {
|
||||
return cache[key] = memo(key, fun, reRenderReactiveElement);
|
||||
return cache_shared[key] = memo(key, fun);
|
||||
});
|
||||
storeMemo.set(reRenderReactiveElement, cache);
|
||||
scope.pop();
|
||||
if (!Array.isArray(els))
|
||||
els = [els];
|
||||
@ -779,7 +807,13 @@ signal.el = function(s, map) {
|
||||
};
|
||||
addSignalListener(s, reRenderReactiveElement);
|
||||
removeSignalsFromElements(s, reRenderReactiveElement, mark_start, map);
|
||||
reRenderReactiveElement(s());
|
||||
reRenderReactiveElement(s.get());
|
||||
current.host(on.disconnected(
|
||||
() => (
|
||||
/*! Clears cached elements for reactive element `S.el` */
|
||||
cache_shared = {}
|
||||
)
|
||||
));
|
||||
return out;
|
||||
};
|
||||
function requestCleanUpReactives(host) {
|
||||
@ -795,7 +829,11 @@ var observedAttributeActions = {
|
||||
};
|
||||
function observedAttribute(store) {
|
||||
return function(instance, name) {
|
||||
const varS = (...args) => !args.length ? read(varS) : instance.setAttribute(name, ...args);
|
||||
const varS = oCreate(Signal, {
|
||||
set: { value(...v) {
|
||||
return instance.setAttribute(name, ...v);
|
||||
} }
|
||||
});
|
||||
const out = toSignal(varS, instance.getAttribute(name), observedAttributeActions);
|
||||
store[name] = out;
|
||||
return out;
|
||||
@ -839,7 +877,7 @@ var signals_config = {
|
||||
};
|
||||
addSignalListener(attrs, l);
|
||||
removeSignalsFromElements(attrs, l, element, key);
|
||||
return attrs();
|
||||
return attrs.get();
|
||||
}
|
||||
};
|
||||
function removeSignalsFromElements(s, listener, ...notes) {
|
||||
@ -862,12 +900,12 @@ var cleanUpRegistry = new FinalizationRegistry(function(s) {
|
||||
signal.clear({ [mark]: s });
|
||||
});
|
||||
function create(is_readonly, value, actions) {
|
||||
const varS = is_readonly ? () => read(varS) : (...value2) => value2.length ? write(varS, ...value2) : read(varS);
|
||||
const varS = oCreate(is_readonly ? SignalReadOnly : Signal);
|
||||
const SI = toSignal(varS, value, actions, is_readonly);
|
||||
cleanUpRegistry.register(SI, SI[mark]);
|
||||
return SI;
|
||||
}
|
||||
var protoSigal = Object.assign(/* @__PURE__ */ Object.create(null), {
|
||||
var protoSigal = oAssign(oCreate(), {
|
||||
/**
|
||||
* Prevents signal propagation
|
||||
*/
|
||||
@ -886,7 +924,7 @@ function toSignal(s, value, actions, readonly = false) {
|
||||
}
|
||||
const { host } = scope;
|
||||
Reflect.defineProperty(s, mark, {
|
||||
value: {
|
||||
value: oAssign(oCreate(protoSigal), {
|
||||
value,
|
||||
actions,
|
||||
onclear,
|
||||
@ -894,14 +932,11 @@ function toSignal(s, value, actions, readonly = false) {
|
||||
listeners: /* @__PURE__ */ new Set(),
|
||||
defined: new Defined().stack,
|
||||
readonly
|
||||
},
|
||||
}),
|
||||
enumerable: false,
|
||||
writable: false,
|
||||
configurable: true
|
||||
});
|
||||
s.toJSON = () => s();
|
||||
s.valueOf = () => s[mark] && s[mark].value;
|
||||
Object.setPrototypeOf(s[mark], protoSigal);
|
||||
return s;
|
||||
}
|
||||
function currentContext() {
|
||||
|
||||
83
dist/esm.js
vendored
83
dist/esm.js
vendored
@ -1,3 +1,37 @@
|
||||
// src/helpers.js
|
||||
function isUndef(value) {
|
||||
return typeof value === "undefined";
|
||||
}
|
||||
function isInstance(obj, cls) {
|
||||
return obj instanceof cls;
|
||||
}
|
||||
function isProtoFrom(obj, cls) {
|
||||
return Object.prototype.isPrototypeOf.call(cls, obj);
|
||||
}
|
||||
function oAssign(...o) {
|
||||
return Object.assign(...o);
|
||||
}
|
||||
function onAbort(signal, listener) {
|
||||
if (!signal || !isInstance(signal, AbortSignal))
|
||||
return true;
|
||||
if (signal.aborted)
|
||||
return;
|
||||
signal.addEventListener("abort", listener);
|
||||
return function cleanUp() {
|
||||
signal.removeEventListener("abort", listener);
|
||||
};
|
||||
}
|
||||
function observedAttributes(instance, observedAttribute) {
|
||||
const { observedAttributes: observedAttributes3 = [] } = instance.constructor;
|
||||
return observedAttributes3.reduce(function(out, name) {
|
||||
out[kebabToCamel(name)] = observedAttribute(instance, name);
|
||||
return out;
|
||||
}, {});
|
||||
}
|
||||
function kebabToCamel(name) {
|
||||
return name.replace(/-./g, (x) => x[1].toUpperCase());
|
||||
}
|
||||
|
||||
// src/signals-lib/common.js
|
||||
var signals_global = {
|
||||
/**
|
||||
@ -21,37 +55,12 @@ var signals_global = {
|
||||
}
|
||||
};
|
||||
function registerReactivity(def, global = true) {
|
||||
if (global) return Object.assign(signals_global, def);
|
||||
if (global) return oAssign(signals_global, def);
|
||||
Object.setPrototypeOf(def, signals_global);
|
||||
return def;
|
||||
}
|
||||
function signals(_this) {
|
||||
return signals_global.isPrototypeOf(_this) && _this !== signals_global ? _this : signals_global;
|
||||
}
|
||||
|
||||
// src/helpers.js
|
||||
function isUndef(value) {
|
||||
return typeof value === "undefined";
|
||||
}
|
||||
function onAbort(signal, listener) {
|
||||
if (!signal || !(signal instanceof AbortSignal))
|
||||
return true;
|
||||
if (signal.aborted)
|
||||
return;
|
||||
signal.addEventListener("abort", listener);
|
||||
return function cleanUp() {
|
||||
signal.removeEventListener("abort", listener);
|
||||
};
|
||||
}
|
||||
function observedAttributes(instance, observedAttribute) {
|
||||
const { observedAttributes: observedAttributes3 = [] } = instance.constructor;
|
||||
return observedAttributes3.reduce(function(out, name) {
|
||||
out[kebabToCamel(name)] = observedAttribute(instance, name);
|
||||
return out;
|
||||
}, {});
|
||||
}
|
||||
function kebabToCamel(name) {
|
||||
return name.replace(/-./g, (x) => x[1].toUpperCase());
|
||||
return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
|
||||
}
|
||||
|
||||
// src/dom-common.js
|
||||
@ -69,7 +78,7 @@ function setDeleteAttr(obj, prop, val) {
|
||||
Reflect.set(obj, prop, val);
|
||||
if (!isUndef(val)) return;
|
||||
Reflect.deleteProperty(obj, prop);
|
||||
if (obj instanceof enviroment.H && obj.getAttribute(prop) === "undefined")
|
||||
if (isInstance(obj, enviroment.H) && obj.getAttribute(prop) === "undefined")
|
||||
return obj.removeAttribute(prop);
|
||||
if (Reflect.get(obj, prop) === "undefined")
|
||||
return Reflect.set(obj, prop, "");
|
||||
@ -127,7 +136,7 @@ var scope = {
|
||||
* @returns {number} New length of the scope stack
|
||||
*/
|
||||
push(s = {}) {
|
||||
return scopes.push(Object.assign({}, this.current, { prevent: false }, s));
|
||||
return scopes.push(oAssign({}, this.current, { prevent: false }, s));
|
||||
},
|
||||
/**
|
||||
* Pushes the root scope to the stack
|
||||
@ -168,7 +177,7 @@ function createElement(tag, attributes, ...addons) {
|
||||
const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0);
|
||||
scope.push({ scope: tag, host });
|
||||
el = tag(attributes || void 0);
|
||||
const is_fragment = el instanceof enviroment.F;
|
||||
const is_fragment = isInstance(el, enviroment.F);
|
||||
if (el.nodeName === "#comment") break;
|
||||
const el_mark = createElement.mark({
|
||||
type: "component",
|
||||
@ -251,7 +260,7 @@ var { setDeleteAttr: setDeleteAttr2 } = enviroment;
|
||||
function assign(element, ...attributes) {
|
||||
if (!attributes.length) return element;
|
||||
assign_context.set(element, assignContext(element, this));
|
||||
for (const [key, value] of Object.entries(Object.assign({}, ...attributes)))
|
||||
for (const [key, value] of Object.entries(oAssign({}, ...attributes)))
|
||||
assignAttribute.call(this, element, key, value);
|
||||
assign_context.delete(element);
|
||||
return element;
|
||||
@ -292,7 +301,7 @@ function assignAttribute(element, key, value) {
|
||||
}
|
||||
function assignContext(element, _this) {
|
||||
if (assign_context.has(element)) return assign_context.get(element);
|
||||
const is_svg = element instanceof enviroment.S;
|
||||
const is_svg = isInstance(element, enviroment.S);
|
||||
const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
|
||||
const s = signals(_this);
|
||||
return { setRemoveAttr, s };
|
||||
@ -309,7 +318,7 @@ function classListDeclarative(element, toggle) {
|
||||
return element;
|
||||
}
|
||||
function elementAttribute(element, op, key, value) {
|
||||
if (element instanceof enviroment.H)
|
||||
if (isInstance(element, enviroment.H))
|
||||
return element[op + "Attribute"](key, value);
|
||||
return element[op + "AttributeNS"](null, key, value);
|
||||
}
|
||||
@ -469,9 +478,9 @@ function connectionsChangesObserverConstructor() {
|
||||
if (store.size > 30)
|
||||
await requestIdle();
|
||||
const out = [];
|
||||
if (!(element instanceof Node)) return out;
|
||||
if (!isInstance(element, Node)) return out;
|
||||
for (const el of store.keys()) {
|
||||
if (el === element || !(el instanceof Node)) continue;
|
||||
if (el === element || !isInstance(el, Node)) continue;
|
||||
if (element.contains(el))
|
||||
out.push(el);
|
||||
}
|
||||
@ -567,7 +576,7 @@ function dispatchEvent(name, options, host) {
|
||||
d.unshift(element);
|
||||
element = typeof host === "function" ? host() : host;
|
||||
}
|
||||
const event = d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options);
|
||||
const event = d.length ? new CustomEvent(name, oAssign({ detail: d[0] }, options)) : new Event(name, options);
|
||||
return element.dispatchEvent(event);
|
||||
};
|
||||
}
|
||||
@ -577,7 +586,7 @@ function on(event, listener, options) {
|
||||
return element;
|
||||
};
|
||||
}
|
||||
var lifeOptions = (obj) => Object.assign({}, typeof obj === "object" ? obj : null, { once: true });
|
||||
var lifeOptions = (obj) => oAssign({}, typeof obj === "object" ? obj : null, { once: true });
|
||||
on.connected = function(listener, options) {
|
||||
options = lifeOptions(options);
|
||||
return function registerElement(element) {
|
||||
|
||||
@ -26,7 +26,7 @@ function ddeComponent({ attr }){
|
||||
on.connected(e=> console.log(( /** @type {HTMLParagraphElement} */ (e.target)).outerHTML)),
|
||||
);
|
||||
return el().append(
|
||||
el("p", S(()=> `Hello from Custom Element with attribute '${attr()}'`))
|
||||
el("p", S(()=> `Hello from Custom Element with attribute '${attr.get()}'`))
|
||||
);
|
||||
}
|
||||
customElementWithDDE(HTMLCustomElement);
|
||||
|
||||
@ -4,11 +4,11 @@ const threePS= ({ emoji= "🚀" })=> {
|
||||
const clicks= S(0); // A
|
||||
return el().append(
|
||||
el("p", S(()=>
|
||||
"Hello World "+emoji.repeat(clicks()) // B
|
||||
"Hello World "+emoji.repeat(clicks.get()) // B
|
||||
)),
|
||||
el("button", {
|
||||
type: "button",
|
||||
onclick: ()=> clicks(clicks()+1), // C
|
||||
onclick: ()=> clicks.set(clicks.get()+1), // C
|
||||
textContent: "Fire",
|
||||
})
|
||||
);
|
||||
|
||||
@ -15,4 +15,4 @@ setTimeout(
|
||||
clearInterval,
|
||||
10*interval,
|
||||
setInterval(oninterval, interval)
|
||||
);
|
||||
);
|
||||
@ -22,9 +22,9 @@ const onsubmit= on("submit", function(event){
|
||||
S.action(todos, "push", data.get("todo"));
|
||||
break;
|
||||
case "E"/*dit*/: {
|
||||
const last= todos().at(-1);
|
||||
const last= todos.get().at(-1);
|
||||
if(!last) break;
|
||||
last(data.get("todo"));
|
||||
last.set(data.get("todo"));
|
||||
break;
|
||||
}
|
||||
case "R"/*emove*/:
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import { S } from "deka-dom-el/signals";
|
||||
const signal= S(0);
|
||||
// computation pattern
|
||||
const double= S(()=> 2*signal());
|
||||
const double= S(()=> 2*signal.get());
|
||||
|
||||
const ac= new AbortController();
|
||||
S.on(signal, v=> console.log("signal", v), { signal: ac.signal });
|
||||
S.on(double, v=> console.log("double", v), { signal: ac.signal });
|
||||
|
||||
signal(signal()+1);
|
||||
signal.set(signal.get()+1);
|
||||
const interval= 5 * 1000;
|
||||
const id= setInterval(()=> signal(signal()+1), interval);
|
||||
const id= setInterval(()=> signal.set(signal.get()+1), interval);
|
||||
ac.signal.addEventListener("abort",
|
||||
()=> setTimeout(()=> clearInterval(id), 2*interval));
|
||||
|
||||
setTimeout(()=> ac.abort(), 3*interval)
|
||||
setTimeout(()=> ac.abort(), 3*interval)
|
||||
@ -3,8 +3,8 @@ const count= S(0);
|
||||
|
||||
import { el } from "deka-dom-el";
|
||||
document.body.append(
|
||||
el("p", S(()=> "Currently: "+count())),
|
||||
el("p", { classList: { red: S(()=> count()%2 === 0) }, dataset: { count }, textContent: "Attributes example" }),
|
||||
el("p", S(()=> "Currently: "+count.get())),
|
||||
el("p", { classList: { red: S(()=> count.get()%2 === 0) }, dataset: { count }, textContent: "Attributes example" }),
|
||||
);
|
||||
document.head.append(
|
||||
el("style", ".red { color: red; }")
|
||||
@ -12,4 +12,4 @@ document.head.append(
|
||||
|
||||
const interval= 5 * 1000;
|
||||
setTimeout(clearInterval, 10*interval,
|
||||
setInterval(()=> count(count()+1), interval));
|
||||
setInterval(()=> count.set(count.get()+1), interval));
|
||||
@ -2,7 +2,7 @@ import { S } from "deka-dom-el/signals";
|
||||
const count= S(0, {
|
||||
add(){ this.value= this.value + Math.round(Math.random()*10); }
|
||||
});
|
||||
const numbers= S([ count() ], {
|
||||
const numbers= S([ count.get() ], {
|
||||
push(next){ this.value.push(next); }
|
||||
});
|
||||
|
||||
@ -22,5 +22,5 @@ document.body.append(
|
||||
const interval= 5*1000;
|
||||
setTimeout(clearInterval, 10*interval, setInterval(function(){
|
||||
S.action(count, "add");
|
||||
S.action(numbers, "push", count());
|
||||
}, interval));
|
||||
S.action(numbers, "push", count.get());
|
||||
}, interval));
|
||||
@ -4,9 +4,9 @@ const signal= S(0);
|
||||
// β — just reacts on signal changes
|
||||
S.on(signal, console.log);
|
||||
// γ — just updates the value
|
||||
const update= ()=> signal(signal()+1);
|
||||
const update= ()=> signal.set(signal.get()+1);
|
||||
|
||||
update();
|
||||
const interval= 5*1000;
|
||||
setTimeout(clearInterval, 10*interval,
|
||||
setInterval(update, interval));
|
||||
setInterval(update, interval));
|
||||
@ -69,9 +69,9 @@ export function page({ pkg, info }){
|
||||
some manner independent and still connected to the same reactive entity.
|
||||
`),
|
||||
el("p").append(...T`
|
||||
Signals are implemented in the library as functions. To see current value of signal, just call it without
|
||||
any arguments ${el("code", "console.log(signal())")}. To update the signal value, pass any argument
|
||||
${el("code", `signal('${t`a new value`}')`)}. For listenning the signal value changes, use
|
||||
Signals are implemented in the library as objects with methods. To see current value of signal,
|
||||
call the get method ${el("code", "console.log(signal.get())")}. To update the signal value, use the set method
|
||||
${el("code", `signal.set('${t`a new value`}')`)}. For listenning the signal value changes, use
|
||||
${el("code", "S.on(signal, console.log)")}.
|
||||
`),
|
||||
el("p").append(...T`
|
||||
@ -114,7 +114,7 @@ export function page({ pkg, info }){
|
||||
`),
|
||||
el("p").append(...T`
|
||||
For computation, you can use the “derived signal” (see above) like
|
||||
${el("code", "assign(element, { textContent: S(()=> 'Hello '+WorldSignal()) })")}. This is read-only signal
|
||||
${el("code", "assign(element, { textContent: S(()=> 'Hello '+WorldSignal.get()) })")}. This is read-only signal
|
||||
its value is computed based on given function and updated when any signal used in the function changes.
|
||||
`),
|
||||
el("p").append(...T`
|
||||
|
||||
@ -15,7 +15,7 @@ export function thirdParty(){
|
||||
}, {
|
||||
set(key, value){
|
||||
const p= this.value[key] || S();
|
||||
p(value);
|
||||
p.set(value);
|
||||
this.value[key]= p;
|
||||
}
|
||||
});
|
||||
@ -32,7 +32,7 @@ export function thirdParty(){
|
||||
})();
|
||||
return el("input", {
|
||||
className,
|
||||
value: store().value(),
|
||||
value: store.get().value.get(),
|
||||
type: "text",
|
||||
onchange: ev=> S.action(store, "set", "value", ev.target.value)
|
||||
});
|
||||
|
||||
@ -9,24 +9,24 @@ export function fullNameComponent(){
|
||||
const labels= [ "Name", "Surname" ];
|
||||
const name= labels.map(_=> S(""));
|
||||
const full_name= S(()=>
|
||||
name.map(l=> l()).filter(Boolean).join(" ") || "-");
|
||||
name.map(l=> l.get()).filter(Boolean).join(" ") || "-");
|
||||
scope.host(
|
||||
on.connected(()=> console.log(fullNameComponent)),
|
||||
on.disconnected(()=> console.log(fullNameComponent))
|
||||
);
|
||||
|
||||
const count= S(0);
|
||||
setInterval(()=> count(count()+1), 5000);
|
||||
setInterval(()=> count.set(count.get()+1), 5000);
|
||||
const style= { height: "80px", display: "block", fill: "currentColor" };
|
||||
const elSVG= elNS("http://www.w3.org/2000/svg");
|
||||
return el("div", { className }).append(
|
||||
el("h2", "Simple form:"),
|
||||
el("p", { textContent: S(()=> "Count: "+count()),
|
||||
dataset: { count }, classList: { count: S(() => count()%2 === 0) } }),
|
||||
el("p", { textContent: S(()=> "Count: "+count.get()),
|
||||
dataset: { count }, classList: { count: S(() => count.get()%2 === 0) } }),
|
||||
el("form", { onsubmit: ev=> ev.preventDefault() }).append(
|
||||
...name.map((v, i)=>
|
||||
el("label", labels[i]).append(
|
||||
el("input", { type: "text", name: labels[i], value: v() }, on("change", ev=> v(ev.target.value)))
|
||||
el("input", { type: "text", name: labels[i], value: v.get() }, on("change", ev=> v.set(ev.target.value)))
|
||||
))
|
||||
),
|
||||
el("p").append(
|
||||
|
||||
@ -58,7 +58,7 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
|
||||
),
|
||||
el("div").append(
|
||||
el("h3", "Output (JSON):"),
|
||||
el("output", S(()=> JSON.stringify(Array.from(todosO()), null, "\t")))
|
||||
el("output", S(()=> JSON.stringify(Array.from(todosO.get()), null, "\t")))
|
||||
)
|
||||
)
|
||||
}
|
||||
@ -80,13 +80,13 @@ function todoComponent({ textContent, value }){
|
||||
const is_editable= S(false);
|
||||
const onedited= on("change", ev=> {
|
||||
const el= /** @type {HTMLInputElement} */ (ev.target);
|
||||
textContent(el.value);
|
||||
is_editable(false);
|
||||
textContent.set(el.value);
|
||||
is_editable.set(false);
|
||||
});
|
||||
return el("li").append(
|
||||
S.el(is_editable, is=> is
|
||||
? el("input", { value: textContent(), type: "text" }, onedited)
|
||||
: el("span", { textContent, onclick: is_editable.bind(null, true) })
|
||||
? el("input", { value: textContent.get(), type: "text" }, onedited)
|
||||
: el("span", { textContent, onclick: ()=> is_editable.set(true) })
|
||||
),
|
||||
el("button", { type: "button", value, textContent: "-" }, onclick)
|
||||
);
|
||||
|
||||
@ -34,7 +34,7 @@ export class CustomHTMLTestElement extends HTMLElement{
|
||||
text(test),
|
||||
text(name),
|
||||
text(preName),
|
||||
el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName("Ahoj") }),
|
||||
el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName.set("Ahoj") }),
|
||||
" | ",
|
||||
el("slot", { className: "test", name: "test" }),
|
||||
);
|
||||
|
||||
@ -20,7 +20,7 @@ document.body.append(
|
||||
el("span", { textContent: "test", slot: "test" }),
|
||||
),
|
||||
el(thirdParty),
|
||||
el(CustomSlottingHTMLElement.tagName, { onclick: ()=> toggle(!toggle()) }).append(
|
||||
el(CustomSlottingHTMLElement.tagName, { onclick: ()=> toggle.set(!toggle.get()) }).append(
|
||||
el("strong", { slot: "name", textContent: "Honzo" }),
|
||||
S.el(toggle, is=> is
|
||||
? el("span", "…default slot")
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
},
|
||||
{
|
||||
"path": "./index-with-signals.js",
|
||||
"limit": "5.25 kB"
|
||||
"limit": "5.5 kB"
|
||||
}
|
||||
],
|
||||
"modifyEsbuildConfig": {
|
||||
|
||||
12
signals.d.ts
vendored
12
signals.d.ts
vendored
@ -1,4 +1,12 @@
|
||||
export type Signal<V, A>= (set?: V)=> V & A;
|
||||
export interface Signal<V, A> {
|
||||
/** The current value of the signal */
|
||||
get(): V;
|
||||
/** Set new value of the signal */
|
||||
set(value: V): V;
|
||||
toJSON(): V;
|
||||
valueOf(): V;
|
||||
}
|
||||
|
||||
type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
|
||||
//type SymbolSignal= Symbol;
|
||||
type SymbolOnclear= symbol;
|
||||
@ -27,7 +35,7 @@ interface signal{
|
||||
* ```js
|
||||
* const name= S("Jan");
|
||||
* const surname= S("Andrle");
|
||||
* const fullname= S(()=> name()+" "+surname());
|
||||
* const fullname= S(()=> name.get()+" "+surname.get());
|
||||
* ```
|
||||
* @param value Initial signal value. Or function computing value from other signals.
|
||||
* @param actions Use to define actions on the signal. Such as add item to the array.
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { signals } from "./signals-lib/common.js";
|
||||
import { enviroment as env } from './dom-common.js';
|
||||
import { isInstance, isUndef, oAssign } from "./helpers.js";
|
||||
|
||||
/**
|
||||
* Queues a promise, this is helpful for crossplatform components (on server side we can wait for all registered
|
||||
@ -55,7 +56,7 @@ export const scope= {
|
||||
* @param {Object} [s={}] - Scope object to push
|
||||
* @returns {number} New length of the scope stack
|
||||
*/
|
||||
push(s= {}){ return scopes.push(Object.assign({}, this.current, { prevent: false }, s)); },
|
||||
push(s= {}){ return scopes.push(oAssign({}, this.current, { prevent: false }, s)); },
|
||||
|
||||
/**
|
||||
* Pushes the root scope to the stack
|
||||
@ -90,7 +91,6 @@ export function chainableAppend(el){
|
||||
/** Current namespace for element creation */
|
||||
let namespace;
|
||||
|
||||
import { isInstance, isUndef } from "./helpers.js";
|
||||
/**
|
||||
* Creates a DOM element with specified tag, attributes and addons
|
||||
*
|
||||
@ -230,7 +230,7 @@ export function assign(element, ...attributes){
|
||||
if(!attributes.length) return element;
|
||||
assign_context.set(element, assignContext(element, this));
|
||||
|
||||
for(const [ key, value ] of Object.entries(Object.assign({}, ...attributes)))
|
||||
for(const [ key, value ] of Object.entries(oAssign({}, ...attributes)))
|
||||
assignAttribute.call(this, element, key, value);
|
||||
assign_context.delete(element);
|
||||
return element;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export { registerReactivity } from './signals-lib/common.js';
|
||||
import { enviroment as env, keyLTE, evc, evd, eva } from './dom-common.js';
|
||||
import { oAssign, onAbort } from './helpers.js';
|
||||
|
||||
/**
|
||||
* Creates a function to dispatch events on elements
|
||||
@ -17,7 +18,7 @@ export function dispatchEvent(name, options, host){
|
||||
element= typeof host==="function"? host() : host;
|
||||
}
|
||||
//TODO: what about re-emmitting?
|
||||
const event= d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options);
|
||||
const event= d.length ? new CustomEvent(name, oAssign({ detail: d[0] }, options)) : new Event(name, options);
|
||||
return element.dispatchEvent(event);
|
||||
};
|
||||
}
|
||||
@ -38,13 +39,12 @@ export function on(event, listener, options){
|
||||
}
|
||||
|
||||
import { c_ch_o } from "./events-observer.js";
|
||||
import { onAbort } from './helpers.js';
|
||||
|
||||
/**
|
||||
* Prepares lifecycle event options with once:true default
|
||||
* @private
|
||||
*/
|
||||
const lifeOptions= obj=> Object.assign({}, typeof obj==="object" ? obj : null, { once: true });
|
||||
const lifeOptions= obj=> oAssign({}, typeof obj==="object" ? obj : null, { once: true });
|
||||
|
||||
//TODO: cleanUp when event before abort?
|
||||
//TODO: docs (e.g.) https://nolanlawson.com/2024/01/13/web-component-gotcha-constructor-vs-connectedcallback/
|
||||
|
||||
@ -27,7 +27,8 @@ export function typeOf(v){
|
||||
export function isInstance(obj, cls){ return obj instanceof cls; }
|
||||
/** @type {typeof Object.prototype.isPrototypeOf.call} */
|
||||
export function isProtoFrom(obj, cls){ return Object.prototype.isPrototypeOf.call(cls, obj); }
|
||||
export function oCreate(proto= null){ return Object.create(proto); }
|
||||
export function oCreate(proto= null, p= {}){ return Object.create(proto, p); }
|
||||
export function oAssign(...o){ return Object.assign(...o); }
|
||||
|
||||
/**
|
||||
* Handles AbortSignal registration and cleanup
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { isProtoFrom } from "../helpers.js";
|
||||
import { isProtoFrom, oAssign } from "../helpers.js";
|
||||
/**
|
||||
* Global signals object with default implementation
|
||||
* @type {Object}
|
||||
@ -29,7 +29,7 @@ export const signals_global= {
|
||||
* @returns {Object} The registered reactivity implementation
|
||||
*/
|
||||
export function registerReactivity(def, global= true){
|
||||
if(global) return Object.assign(signals_global, def);
|
||||
if(global) return oAssign(signals_global, def);
|
||||
Object.setPrototypeOf(def, signals_global);
|
||||
return def;
|
||||
}
|
||||
|
||||
@ -18,12 +18,12 @@ export const queueSignalWrite= (()=> {
|
||||
*/
|
||||
function flushSignals() {
|
||||
scheduled = false;
|
||||
for(const signal of pendingSignals){
|
||||
pendingSignals.delete(signal);
|
||||
const todo= pendingSignals;
|
||||
pendingSignals= new Set();
|
||||
for(const signal of todo){
|
||||
const M = signal[mark];
|
||||
if(M) M.listeners.forEach(l => l(M.value));
|
||||
}
|
||||
pendingSignals.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,7 +1,16 @@
|
||||
import { queueSignalWrite, mark } from "./helpers.js";
|
||||
export { mark };
|
||||
import { hasOwn, Defined, oCreate, isProtoFrom } from "../helpers.js";
|
||||
import { hasOwn, Defined, oCreate, isProtoFrom, oAssign } from "../helpers.js";
|
||||
|
||||
const Signal = oCreate(null, {
|
||||
get: { value(){ return read(this); } },
|
||||
set: { value(...v){ return write(this, ...v); } },
|
||||
toJSON: { value(){ return read(this); } },
|
||||
valueOf: { value(){ return this[mark] && this[mark].value; } }
|
||||
});
|
||||
const SignalReadOnly= oCreate(Signal, {
|
||||
set: { value(){ return; } },
|
||||
});
|
||||
/**
|
||||
* Checks if a value is a signal
|
||||
*
|
||||
@ -9,7 +18,7 @@ import { hasOwn, Defined, oCreate, isProtoFrom } from "../helpers.js";
|
||||
* @returns {boolean} True if the value is a signal
|
||||
*/
|
||||
export function isSignal(candidate){
|
||||
return typeof candidate === "function" && hasOwn(candidate, mark);
|
||||
return isProtoFrom(candidate, Signal);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -35,7 +44,7 @@ const deps= new WeakMap();
|
||||
*
|
||||
* @param {any|function} value - Initial value or function that computes the value
|
||||
* @param {Object} [actions] - Custom actions for the signal
|
||||
* @returns {function} Signal function
|
||||
* @returns {Object} Signal object with get() and set() methods
|
||||
*/
|
||||
export function signal(value, actions){
|
||||
if(typeof value!=="function")
|
||||
@ -53,7 +62,7 @@ export function signal(value, actions){
|
||||
deps.set(contextReWatch, new Set([ origin ]));
|
||||
|
||||
stack_watch.push(contextReWatch);
|
||||
write(out, value());
|
||||
write(out, value.get());
|
||||
stack_watch.pop();
|
||||
|
||||
if(!deps_old.length) return;
|
||||
@ -74,7 +83,7 @@ export { signal as S };
|
||||
/**
|
||||
* Calls a custom action on a signal
|
||||
*
|
||||
* @param {function} s - Signal to call action on
|
||||
* @param {Object} s - Signal object to call action on
|
||||
* @param {string} name - Action name
|
||||
* @param {...any} a - Arguments to pass to the action
|
||||
*/
|
||||
@ -92,7 +101,7 @@ signal.action= function(s, name, ...a){
|
||||
/**
|
||||
* Subscribes a listener to signal changes
|
||||
*
|
||||
* @param {function|function[]} s - Signal or array of signals to subscribe to
|
||||
* @param {Object|Object[]} s - Signal object or array of signal objects to subscribe to
|
||||
* @param {function} listener - Callback function receiving signal value
|
||||
* @param {Object} [options={}] - Subscription options
|
||||
* @param {AbortSignal} [options.signal] - Signal to abort subscription
|
||||
@ -116,7 +125,7 @@ signal.symbols= {
|
||||
/**
|
||||
* Cleans up signals and their dependencies
|
||||
*
|
||||
* @param {...function} signals - Signals to clean up
|
||||
* @param {...Object} signals - Signal objects to clean up
|
||||
*/
|
||||
signal.clear= function(...signals){
|
||||
for(const s of signals){
|
||||
@ -162,7 +171,7 @@ export function cache(store= oCreate()){
|
||||
* Creates a reactive DOM element that re-renders when signal changes
|
||||
*
|
||||
* @TODO Third argument for handle `cache_tmp` in re-render
|
||||
* @param {function} s - Signal to watch
|
||||
* @param {Object} s - Signal object to watch
|
||||
* @param {Function} map - Function mapping signal value to DOM elements
|
||||
* @returns {DocumentFragment} Fragment containing reactive elements
|
||||
*/
|
||||
@ -197,7 +206,7 @@ signal.el= function(s, map){
|
||||
};
|
||||
addSignalListener(s, reRenderReactiveElement);
|
||||
removeSignalsFromElements(s, reRenderReactiveElement, mark_start, map);
|
||||
reRenderReactiveElement(s());
|
||||
reRenderReactiveElement(s.get());
|
||||
current.host(on.disconnected(()=>
|
||||
/*! Clears cached elements for reactive element `S.el` */
|
||||
cache_shared= {}
|
||||
@ -236,9 +245,9 @@ const observedAttributeActions= {
|
||||
*/
|
||||
function observedAttribute(store){
|
||||
return function(instance, name){
|
||||
const varS= (...args)=> !args.length
|
||||
? read(varS)
|
||||
: instance.setAttribute(name, ...args);
|
||||
const varS= oCreate(Signal, {
|
||||
set: { value(...v){ return instance.setAttribute(name, ...v); } }
|
||||
});
|
||||
const out= toSignal(varS, instance.getAttribute(name), observedAttributeActions);
|
||||
store[name]= out;
|
||||
return out;
|
||||
@ -298,13 +307,13 @@ export const signals_config= {
|
||||
};
|
||||
addSignalListener(attrs, l);
|
||||
removeSignalsFromElements(attrs, l, element, key);
|
||||
return attrs();
|
||||
return attrs.get();
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Registers signal listener for cleanup when element is removed
|
||||
*
|
||||
* @param {function} s - Signal to track
|
||||
* @param {Object} s - Signal object to track
|
||||
* @param {Function} listener - Signal listener
|
||||
* @param {...any} notes - Additional context information
|
||||
* @private
|
||||
@ -333,18 +342,16 @@ const cleanUpRegistry = new FinalizationRegistry(function(s){
|
||||
signal.clear({ [mark]: s });
|
||||
});
|
||||
/**
|
||||
* Creates a new signal function
|
||||
* Creates a new signal object
|
||||
*
|
||||
* @param {boolean} is_readonly - Whether the signal is readonly
|
||||
* @param {any} value - Initial signal value
|
||||
* @param {Object} actions - Custom actions for the signal
|
||||
* @returns {function} Signal function
|
||||
* @returns {Object} Signal object with get() and set() methods
|
||||
* @private
|
||||
*/
|
||||
function create(is_readonly, value, actions){
|
||||
const varS= is_readonly
|
||||
? ()=> read(varS)
|
||||
: (...value)=> value.length ? write(varS, ...value) : read(varS);
|
||||
const varS = oCreate(is_readonly ? SignalReadOnly : Signal);
|
||||
const SI= toSignal(varS, value, actions, is_readonly);
|
||||
cleanUpRegistry.register(SI, SI[mark]);
|
||||
return SI;
|
||||
@ -354,7 +361,7 @@ function create(is_readonly, value, actions){
|
||||
* Prototype for signal internal objects
|
||||
* @private
|
||||
*/
|
||||
const protoSigal= Object.assign(oCreate(), {
|
||||
const protoSigal= oAssign(oCreate(), {
|
||||
/**
|
||||
* Prevents signal propagation
|
||||
*/
|
||||
@ -363,13 +370,13 @@ const protoSigal= Object.assign(oCreate(), {
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Transforms a function into a signal
|
||||
* Transforms an object into a signal
|
||||
*
|
||||
* @param {function} s - Function to transform
|
||||
* @param {Object} s - Object to transform
|
||||
* @param {any} value - Initial value
|
||||
* @param {Object} actions - Custom actions
|
||||
* @param {boolean} [readonly=false] - Whether the signal is readonly
|
||||
* @returns {function} Signal function
|
||||
* @returns {Object} Signal object with get() and set() methods
|
||||
* @private
|
||||
*/
|
||||
function toSignal(s, value, actions, readonly= false){
|
||||
@ -383,19 +390,16 @@ function toSignal(s, value, actions, readonly= false){
|
||||
}
|
||||
const { host }= scope;
|
||||
Reflect.defineProperty(s, mark, {
|
||||
value: {
|
||||
value: oAssign(oCreate(protoSigal), {
|
||||
value, actions, onclear, host,
|
||||
listeners: new Set(),
|
||||
defined: new Defined().stack,
|
||||
readonly
|
||||
},
|
||||
}),
|
||||
enumerable: false,
|
||||
writable: false,
|
||||
configurable: true
|
||||
});
|
||||
s.toJSON= ()=> s();
|
||||
s.valueOf= ()=> s[mark] && s[mark].value;
|
||||
Object.setPrototypeOf(s[mark], protoSigal);
|
||||
return s;
|
||||
}
|
||||
/**
|
||||
@ -410,7 +414,7 @@ function currentContext(){
|
||||
/**
|
||||
* Reads a signal's value and tracks dependencies
|
||||
*
|
||||
* @param {function} s - Signal to read
|
||||
* @param {Object} s - Signal object to read
|
||||
* @returns {any} Signal value
|
||||
* @private
|
||||
*/
|
||||
@ -426,7 +430,7 @@ function read(s){
|
||||
/**
|
||||
* Writes a new value to a signal
|
||||
*
|
||||
* @param {function} s - Signal to update
|
||||
* @param {Object} s - Signal object to update
|
||||
* @param {any} value - New value
|
||||
* @param {boolean} [force=false] - Force update even if value is unchanged
|
||||
* @returns {any} The new value
|
||||
@ -444,7 +448,7 @@ function write(s, value, force){
|
||||
/**
|
||||
* Adds a listener to a signal
|
||||
*
|
||||
* @param {function} s - Signal to listen to
|
||||
* @param {Object} s - Signal object to listen to
|
||||
* @param {Function} listener - Callback function
|
||||
* @returns {Set} Listener set
|
||||
* @private
|
||||
@ -457,7 +461,7 @@ function addSignalListener(s, listener){
|
||||
/**
|
||||
* Removes a listener from a signal
|
||||
*
|
||||
* @param {function} s - Signal to modify
|
||||
* @param {Object} s - Signal object to modify
|
||||
* @param {Function} listener - Listener to remove
|
||||
* @param {boolean} [clear_when_empty] - Whether to clear the signal when no listeners remain
|
||||
* @returns {boolean} Whether the listener was found and removed
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user