🐛 coumputed signal

README.md

@@ -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("click", ()=> clicks.set(clicks.get() + 1)),
-			on("keyup", ()=> clicks(clicks() - 2)),
+			on("keyup", ()=> clicks.set(clicks.get() - 2)),
 		),
 		el("select", null, onChange).append(
 			el(OptionComponent, "🎉", isSelected),//OR { textContent: "🎉" }
@@ -86,10 +86,7 @@ To balance these requirements, numerous compromises have been made. To summarize
 	- [dist/](dist/) (`https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/`…)
 
 ## Signals
-- [Signals — whats going on behind the scenes | by Ryan Hoffnan | ITNEXT](https://itnext.io/
+- [Signals — whats going on behind the scenes \| by Ryan Hoffnan \| ITNEXT](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63)
-signals-whats-going-on-behind-the-scenes-ec858589ea63)
+- [The Evolution of Signals in JavaScript - DEV Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob)
-- [The Evolution of Signals in JavaScript - DEV Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-
+- there is also [tc39/proposal-signals: A proposal to add signals to JavaScript.](https://github.com/tc39/proposal-signals)
-javascript-8ob)
-- there is also [tc39/proposal-signals: A proposal to add signals to JavaScript.](https://github.com/tc39/proposal-
-signals)
 - [Observer pattern - Wikipedia](https://en.wikipedia.org/wiki/Observer_pattern)

dist/dde-with-signals.js

@@ -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) {
+		const todo = pendingSignals;
-			pendingSignals.delete(signal2);
+		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();
@@ -744,12 +775,8 @@ signal.clear = function(...signals2) {
 	}
 };
 var key_reactive = "__dde_reactive";
-var storeMemo = /* @__PURE__ */ new WeakMap();
+function cache(store = oCreate()) {
-function memo(key, fun, host = fun) {
+	return (key, fun) => hasOwn(store, key) ? store[key] : store[key] = 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();
 }
 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() {

dist/dde.js

@@ -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;
+	return isProtoFrom(_this, signals_global) && _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());
 }
 
 // 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) {

dist/esm-with-signals.d.ts

@@ -52,9 +52,12 @@ type IsReadonly<T, K extends keyof T> =
  * @private
  */
 type ElementAttributes<T extends SupportedElement>= Partial<{
-	[K in keyof _fromElsInterfaces<T>]: IsReadonly<_fromElsInterfaces<T>, K> extends false
+	[K in keyof _fromElsInterfaces<T>]:
+		_fromElsInterfaces<T>[K] extends ((...p: any[])=> any)
+			? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>)=> ddeSignal<ReturnType<_fromElsInterfaces<T>[K]>>)
+			: (IsReadonly<_fromElsInterfaces<T>, K> extends false
 				? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
-		: ddeStringable
+				: ddeStringable)
 } & AttrsModified> & Record<string, any>;
 export function classListDeclarative<El extends SupportedElement>(
 	element: El,
@@ -515,7 +518,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 +554,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.

dist/esm-with-signals.js

@@ -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) {
+		const todo = pendingSignals;
-			pendingSignals.delete(signal2);
+		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();
@@ -742,12 +773,8 @@ signal.clear = function(...signals2) {
 	}
 };
 var key_reactive = "__dde_reactive";
-var storeMemo = /* @__PURE__ */ new WeakMap();
+function cache(store = oCreate()) {
-function memo(key, fun, host = fun) {
+	return (key, fun) => hasOwn(store, key) ? store[key] : store[key] = 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();
 }
 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() {

dist/esm.d.ts

@@ -52,9 +52,12 @@ type IsReadonly<T, K extends keyof T> =
  * @private
  */
 type ElementAttributes<T extends SupportedElement>= Partial<{
-	[K in keyof _fromElsInterfaces<T>]: IsReadonly<_fromElsInterfaces<T>, K> extends false
+	[K in keyof _fromElsInterfaces<T>]:
+		_fromElsInterfaces<T>[K] extends ((...p: any[])=> any)
+			? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>)=> ddeSignal<ReturnType<_fromElsInterfaces<T>[K]>>)
+			: (IsReadonly<_fromElsInterfaces<T>, K> extends false
 				? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
-		: ddeStringable
+				: ddeStringable)
 } & AttrsModified> & Record<string, any>;
 export function classListDeclarative<El extends SupportedElement>(
 	element: El,

dist/esm.js

@@ -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;
+	return isProtoFrom(_this, signals_global) && _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());
 }
 
 // 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) {

docs/components/examples/customElement/observedAttributes.js

@@ -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);

docs/components/examples/introducing/helloWorld.js

@@ -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",
 		})
 	);

docs/components/examples/signals/actions-todos.js

@@ -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*/:

docs/components/examples/signals/computations-abort.js

@@ -1,15 +1,15 @@
 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));
 

docs/components/examples/signals/dom-attrs.js

@@ -3,8 +3,8 @@ const count= S(0);
 
 import { el } from "deka-dom-el";
 document.body.append(
-	el("p", S(()=> "Currently: "+count())),
+	el("p", S(()=> "Currently: "+count.get())),
-	el("p", { classList: { red: S(()=> count()%2 === 0) }, dataset: { count }, textContent: "Attributes example" }),
+	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));

docs/components/examples/signals/dom-el.js

@@ -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());
+	S.action(numbers, "push", count.get());
 }, interval));

docs/components/examples/signals/signals.js

@@ -4,7 +4,7 @@ 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;

docs/p04-signals.html.js

@@ -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
+			Signals are implemented in the library as objects with methods. To see current value of signal,
-			any arguments ${el("code", "console.log(signal())")}. To update the signal value, pass any argument
+			call the get method ${el("code", "console.log(signal.get())")}. To update the signal value, use the set method
-			${el("code", `signal('${t`a new value`}')`)}. For listenning the signal value changes, use
+			${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`

examples/components/3rd-party.js

@@ -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)
 	});

examples/components/fullNameComponent.js

@@ -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()),
+		el("p", { textContent: S(()=> "Count: "+count.get()),
-			dataset: { count }, classList: { count: S(() => count()%2 === 0) } }),
+			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(

examples/components/todosComponent.js

@@ -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);
+		textContent.set(el.value);
-		is_editable(false);
+		is_editable.set(false);
 	});
 	return el("li").append(
 		S.el(is_editable, is=> is
-			? el("input", { value: textContent(), type: "text" }, onedited)
+			? el("input", { value: textContent.get(), type: "text" }, onedited)
-			: el("span", { textContent, onclick: is_editable.bind(null, true) })
+			: el("span", { textContent, onclick: ()=> is_editable.set(true) })
 		),
 		el("button", { type: "button", value, textContent: "-" }, onclick)
 	);

examples/components/webComponent.js

@@ -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" }),
 		);

examples/index.js

@@ -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")

index.d.ts

@@ -52,9 +52,12 @@ type IsReadonly<T, K extends keyof T> =
  * @private
  */
 type ElementAttributes<T extends SupportedElement>= Partial<{
-	[K in keyof _fromElsInterfaces<T>]: IsReadonly<_fromElsInterfaces<T>, K> extends false
+	[K in keyof _fromElsInterfaces<T>]:
+		_fromElsInterfaces<T>[K] extends ((...p: any[])=> any)
+			? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>)=> ddeSignal<ReturnType<_fromElsInterfaces<T>[K]>>)
+			: (IsReadonly<_fromElsInterfaces<T>, K> extends false
 				? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
-		: ddeStringable
+				: ddeStringable)
 } & AttrsModified> & Record<string, any>;
 export function classListDeclarative<El extends SupportedElement>(
 	element: El,

package.json

@@ -78,7 +78,7 @@
 		},
 		{
 			"path": "./index-with-signals.js",
-			"limit": "5.25 kB"
+			"limit": "5.5 kB"
 		}
 	],
 	"modifyEsbuildConfig": {

signals.d.ts

@@ -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.

src/dom.js

@@ -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;

src/events.js

@@ -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/

src/helpers.js

@@ -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

src/signals-lib/common.js

@@ -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;
 }

src/signals-lib/helpers.js

@@ -18,12 +18,12 @@ export const queueSignalWrite= (()=> {
 	 */
 	function flushSignals() {
 		scheduled = false;
-		for(const signal of pendingSignals){
+		const todo= pendingSignals;
-			pendingSignals.delete(signal);
+		pendingSignals= new Set();
+		for(const signal of todo){
 			const M = signal[mark];
 			if(M) M.listeners.forEach(l => l(M.value));
 		}
-		pendingSignals.clear();
 	}
 
 	/**

src/signals-lib/signals-lib.js

@@ -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")
@@ -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
+		const varS= oCreate(Signal, {
-			? read(varS)
+			set: { value(...v){ return instance.setAttribute(name, ...v); } }
-			: instance.setAttribute(name, ...args);
+		});
 		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
+	const varS = oCreate(is_readonly ? SignalReadOnly : Signal);
-		? ()=> read(varS)
-		: (...value)=> value.length ? write(varS, ...value) : read(varS);
 	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