✨ add removeSignalsFromElements

for better auto-removing signals↔elements listeners (e.g.
provide a way to debug/investigate deps from browser inspector)

dist/dde-with-signals.js

@@ -1,23 +1,23 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
 	// src/signals-common.js
-	var y = {
+	var x = {
 		isSignal(e) {
 			return !1;
 		},
-		processReactiveAttribute(e, t, n, r) {
+		processReactiveAttribute(e, t, n, o) {
 			return n;
 		}
 	};
-	function D(e, t = !0) {
+	function N(e, t = !0) {
-		return t ? Object.assign(y, e) : (Object.setPrototypeOf(e, y), e);
+		return t ? Object.assign(x, e) : (Object.setPrototypeOf(e, x), e);
 	}
-	function x(e) {
+	function y(e) {
-		return y.isPrototypeOf(e) && e !== y ? e : y;
+		return x.isPrototypeOf(e) && e !== x ? e : x;
 	}
 	
 	// src/helpers.js
-	function E(e) {
+	function v(e) {
 		return typeof e > "u";
 	}
 	function T(e) {
@@ -34,9 +34,9 @@
 	}
 	
 	// src/dom-common.js
-	var M = { setDeleteAttr: G };
+	var M = { setDeleteAttr: I };
-	function G(e, t, n) {
+	function I(e, t, n) {
-		if (Reflect.set(e, t, n), !!E(n)) {
+		if (Reflect.set(e, t, n), !!v(n)) {
 			if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined")
 				return e.removeAttribute(t);
 			if (Reflect.get(e, t) === "undefined")
@@ -50,13 +50,10 @@
 		namespace: "html",
 		host: (e) => e ? e(document.body) : document.body,
 		prevent: !0
-	}], W = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, b = {
+	}], W = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, m = {
 		get current() {
 			return S[S.length - 1];
 		},
-		get state() {
-			return [...S];
-		},
 		get host() {
 			return this.current.host;
 		},
@@ -74,10 +71,13 @@
 			let t = this.namespace;
 			return this.namespace = e, {
 				append(...n) {
-					return b.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n);
+					return m.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n);
 				}
 			};
 		},
+		get state() {
+			return [...S];
+		},
 		push(e = {}) {
 			return e.namespace && (e.namespace = W(e.namespace)), S.push(Object.assign({}, this.current, { prevent: !1 }, e));
 		},
@@ -86,75 +86,75 @@
 		}
 	};
 	function ie(e, t, ...n) {
-		let r = this, o = x(this), { namespace: c } = b, d = !1, s;
+		let o = y(this), { namespace: r } = m, c = 0, u;
 		switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) {
 			case typeof e == "function": {
-				d = !0, b.push({ scope: e, host: (u) => u ? (n.unshift(u), void 0) : s }), s = e(t || void 0), (s instanceof HTMLElement ? $ : q)(s, "Attribute", "dde-fun", e.name);
+				c = 1, m.push({ scope: e, host: (s) => s ? (c === 1 ? n.unshift(s) : s(u), void 0) : u }), u = e(t || void 0), (u instanceof HTMLElement ? $ : q)(u, "Attribute", "dde-fun", e.name);
 				break;
 			}
 			case e === "#text":
-				s = O.call(r, document.createTextNode(""), t);
+				u = O.call(this, document.createTextNode(""), t);
 				break;
 			case e === "<>":
-				s = O.call(r, document.createDocumentFragment(), t);
+				u = O.call(this, document.createDocumentFragment(), t);
 				break;
-			case c !== "html":
+			case r !== "html":
-				s = O.call(r, document.createElementNS(c, e), t);
+				u = O.call(this, document.createElementNS(r, e), t);
 				break;
-			case !s:
+			case !u:
-				s = O.call(r, document.createElement(e), t);
+				u = O.call(this, document.createElement(e), t);
 		}
-		return n.forEach((u) => u(s)), d && b.pop(), s;
+		return n.forEach((s) => s(u)), c && m.pop(), c = 2, u;
 	}
 	var { setDeleteAttr: F } = M;
 	function O(e, ...t) {
-		let n = this, r = x(this);
+		let n = this, o = y(this);
 		if (!t.length)
 			return e;
 		let c = (e instanceof SVGElement ? q : $).bind(null, e, "Attribute");
-		return Object.entries(Object.assign({}, ...t)).forEach(function d([s, u]) {
+		return Object.entries(Object.assign({}, ...t)).forEach(function u([s, d]) {
-			u = r.processReactiveAttribute(e, s, u, d);
+			d = o.processReactiveAttribute(e, s, d, u);
 			let [p] = s;
 			if (p === "=")
-				return c(s.slice(1), u);
+				return c(s.slice(1), d);
 			if (p === ".")
-				return z(e, s.slice(1), u);
+				return z(e, s.slice(1), d);
 			if (/(aria|data)([A-Z])/.test(s))
-				return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, u);
+				return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, d);
 			switch (s === "className" && (s = "class"), s) {
 				case "xlink:href":
-					return c(s, u, "http://www.w3.org/1999/xlink");
+					return c(s, d, "http://www.w3.org/1999/xlink");
 				case "textContent":
-					return F(e, s, u);
+					return F(e, s, d);
 				case "style":
-					if (typeof u != "object")
+					if (typeof d != "object")
 						break;
 				case "dataset":
-					return P(r, u, z.bind(null, e[s]));
+					return D(o, d, z.bind(null, e[s]));
 				case "ariaset":
-					return P(r, u, (v, i) => c("aria-" + v, i));
+					return D(o, d, (b, i) => c("aria-" + b, i));
 				case "classList":
-					return I.call(n, e, u);
+					return J.call(n, e, d);
 			}
-			return J(e, s) ? F(e, s, u) : c(s, u);
+			return V(e, s) ? F(e, s, d) : c(s, d);
 		}), e;
 	}
-	function I(e, t) {
+	function J(e, t) {
-		let n = x(this);
+		let n = y(this);
-		return P(
+		return D(
 			n,
 			t,
-			(r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o)
+			(o, r) => e.classList.toggle(o, r === -1 ? void 0 : !!r)
 		), e;
 	}
 	function fe(e) {
 		return Array.from(e.children).forEach((t) => t.remove()), e;
 	}
-	function J(e, t) {
+	function V(e, t) {
 		if (!Reflect.has(e, t))
 			return !1;
 		let n = H(e, t);
-		return !E(n.set);
+		return !v(n.set);
 	}
 	function H(e, t) {
 		if (e = Object.getPrototypeOf(e), !e)
@@ -162,105 +162,105 @@
 		let n = Object.getOwnPropertyDescriptor(e, t);
 		return n || H(e, t);
 	}
-	function P(e, t, n) {
+	function D(e, t, n) {
 		if (!(typeof t != "object" || t === null))
-			return Object.entries(t).forEach(function([o, c]) {
+			return Object.entries(t).forEach(function([r, c]) {
-				o && (c = e.processReactiveAttribute(t, o, c, (d) => n(...d)), n(o, c));
+				r && (c = e.processReactiveAttribute(t, r, c, (u) => n(...u)), n(r, c));
 			});
 	}
 	function U(e) {
 		return Array.isArray(e) ? e.filter(Boolean).join(" ") : e;
 	}
-	function $(e, t, n, r) {
+	function $(e, t, n, o) {
-		return e[(E(r) ? "remove" : "set") + t](n, U(r));
+		return e[(v(o) ? "remove" : "set") + t](n, U(o));
 	}
-	function q(e, t, n, r, o = null) {
+	function q(e, t, n, o, r = null) {
-		return e[(E(r) ? "remove" : "set") + t + "NS"](o, n, U(r));
+		return e[(v(o) ? "remove" : "set") + t + "NS"](r, n, U(o));
 	}
 	function z(e, t, n) {
-		if (Reflect.set(e, t, n), !!E(n))
+		if (Reflect.set(e, t, n), !!v(n))
 			return Reflect.deleteProperty(e, t);
 	}
 	
 	// src/events.js
 	function le(e, t, ...n) {
-		let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
+		let o = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
-		return e.dispatchEvent(r);
+		return e.dispatchEvent(o);
 	}
-	function _(e, t, n) {
+	function E(e, t, n) {
-		return function(o) {
+		return function(r) {
-			return o.addEventListener(e, t, n), o;
+			return r.addEventListener(e, t, n), r;
 		};
 	}
-	var R = Z(), V = /* @__PURE__ */ new WeakSet();
+	var R = K(), Z = /* @__PURE__ */ new WeakSet();
-	_.connected = function(e, t) {
+	E.connected = function(e, t) {
 		let n = "connected";
-		return typeof t != "object" && (t = {}), t.once = !0, function(o) {
+		return typeof t != "object" && (t = {}), t.once = !0, function(r) {
 			let c = "dde:" + n;
-			return o.addEventListener(c, e, t), o.__dde_lifecycleToEvents ? o : o.isConnected ? (o.dispatchEvent(new Event(c)), o) : (A(t.signal, () => R.offConnected(o, e)) && R.onConnected(o, e), o);
+			return r.addEventListener(c, e, t), r.__dde_lifecycleToEvents ? r : r.isConnected ? (r.dispatchEvent(new Event(c)), r) : (A(t.signal, () => R.offConnected(r, e)) && R.onConnected(r, e), r);
 		};
 	};
-	_.disconnected = function(e, t) {
+	E.disconnected = function(e, t) {
 		let n = "disconnected";
-		return typeof t != "object" && (t = {}), t.once = !0, function(o) {
+		return typeof t != "object" && (t = {}), t.once = !0, function(r) {
 			let c = "dde:" + n;
-			return o.addEventListener(c, e, t), o.__dde_lifecycleToEvents || A(t.signal, () => R.offDisconnected(o, e)) && R.onDisconnected(o, e), o;
+			return r.addEventListener(c, e, t), r.__dde_lifecycleToEvents || A(t.signal, () => R.offDisconnected(r, e)) && R.onDisconnected(r, e), r;
 		};
 	};
-	_.attributeChanged = function(e, t) {
+	E.attributeChanged = function(e, t) {
 		let n = "attributeChanged";
-		return typeof t != "object" && (t = {}), function(o) {
+		return typeof t != "object" && (t = {}), function(r) {
 			let c = "dde:" + n;
-			if (o.addEventListener(c, e, t), o.__dde_lifecycleToEvents || V.has(o))
+			if (r.addEventListener(c, e, t), r.__dde_lifecycleToEvents || Z.has(r))
-				return o;
+				return r;
-			let d = new MutationObserver(function(u) {
+			let u = new MutationObserver(function(d) {
-				for (let { attributeName: p, target: v } of u)
+				for (let { attributeName: p, target: b } of d)
-					v.dispatchEvent(
+					b.dispatchEvent(
-						new CustomEvent(c, { detail: [p, v.getAttribute(p)] })
+						new CustomEvent(c, { detail: [p, b.getAttribute(p)] })
 					);
 			});
-			return A(t.signal, () => d.disconnect()) && d.observe(o, { attributes: !0 }), o;
+			return A(t.signal, () => u.disconnect()) && u.observe(r, { attributes: !0 }), r;
 		};
 	};
-	function Z() {
+	function K() {
 		let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(i) {
 			for (let f of i)
 				if (f.type === "childList") {
 					if (p(f.addedNodes, !0)) {
-						d();
+						u();
 						continue;
 					}
-					v(f.removedNodes, !0) && d();
+					b(f.removedNodes, !0) && u();
 				}
 		});
 		return {
 			onConnected(i, f) {
 				c();
-				let a = o(i);
+				let a = r(i);
 				a.connected.has(f) || (a.connected.add(f), a.length_c += 1);
 			},
 			offConnected(i, f) {
 				if (!e.has(i))
 					return;
 				let a = e.get(i);
-				a.connected.has(f) && (a.connected.delete(f), a.length_c -= 1, r(i, a));
+				a.connected.has(f) && (a.connected.delete(f), a.length_c -= 1, o(i, a));
 			},
 			onDisconnected(i, f) {
 				c();
-				let a = o(i);
+				let a = r(i);
 				a.disconnected.has(f) || (a.disconnected.add(f), a.length_d += 1);
 			},
 			offDisconnected(i, f) {
 				if (!e.has(i))
 					return;
 				let a = e.get(i);
-				a.disconnected.has(f) && (a.disconnected.delete(f), a.length_d -= 1, r(i, a));
+				a.disconnected.has(f) && (a.disconnected.delete(f), a.length_d -= 1, o(i, a));
 			}
 		};
-		function r(i, f) {
+		function o(i, f) {
-			f.length_c || f.length_d || (e.delete(i), d());
+			f.length_c || f.length_d || (e.delete(i), u());
 		}
-		function o(i) {
+		function r(i) {
 			if (e.has(i))
 				return e.get(i);
 			let f = {
@@ -274,7 +274,7 @@
 		function c() {
 			t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
 		}
-		function d() {
+		function u() {
 			!t || e.size || (t = !1, n.disconnect());
 		}
 		function s() {
@@ -282,7 +282,7 @@
 				(requestIdleCallback || requestAnimationFrame)(i);
 			});
 		}
-		async function u(i) {
+		async function d(i) {
 			e.size > 30 && await s();
 			let f = [];
 			if (!(i instanceof Node))
@@ -293,18 +293,18 @@
 		}
 		function p(i, f) {
 			let a = !1;
-			for (let h of i) {
+			for (let g of i) {
-				if (f && u(h).then(p), !e.has(h))
+				if (f && d(g).then(p), !e.has(g))
 					continue;
-				let w = e.get(h);
+				let w = e.get(g);
-				w.length_c && (h.dispatchEvent(new Event("dde:connected")), w.connected = /* @__PURE__ */ new WeakSet(), w.length_c = 0, w.length_d || e.delete(h), a = !0);
+				w.length_c && (g.dispatchEvent(new Event("dde:connected")), w.connected = /* @__PURE__ */ new WeakSet(), w.length_c = 0, w.length_d || e.delete(g), a = !0);
 			}
 			return a;
 		}
-		function v(i, f) {
+		function b(i, f) {
 			let a = !1;
-			for (let h of i)
+			for (let g of i)
-				f && u(h).then(v), !(!e.has(h) || !e.get(h).length_d) && (h.dispatchEvent(new Event("dde:disconnected")), e.delete(h), a = !0);
+				f && d(g).then(b), !(!e.has(g) || !e.get(g).length_d) && (g.dispatchEvent(new Event("dde:disconnected")), e.delete(g), a = !0);
 			return a;
 		}
 	}
@@ -326,117 +326,126 @@
 			return !1;
 		}
 	}
-	var m = /* @__PURE__ */ new WeakMap();
+	var L = [], _ = /* @__PURE__ */ new WeakMap();
-	function g(e, t) {
+	function h(e, t) {
 		if (typeof e != "function")
 			return k(e, t);
 		if (C(e))
 			return e;
-		let n = k(""), r = () => n(e());
+		let n = k(), o = function() {
-		return m.set(r, /* @__PURE__ */ new Set([n])), X(r), n;
+			L.push(o), n(e()), L.pop();
+		};
+		return _.set(o, /* @__PURE__ */ new Set([n])), o(), n;
 	}
-	g.action = function(e, t, ...n) {
+	h.action = function(e, t, ...n) {
-		let r = e[l], { actions: o } = r;
+		let o = e[l], { actions: r } = o;
-		if (!o || !Reflect.has(o, t))
+		if (!r || !Reflect.has(r, t))
 			throw new Error(`'${e}' has no action with name '${t}'!`);
-		if (o[t].apply(r, n), r.skip)
+		if (r[t].apply(o, n), o.skip)
-			return Reflect.deleteProperty(r, "skip");
+			return Reflect.deleteProperty(o, "skip");
-		r.listeners.forEach((c) => c(r.value));
+		o.listeners.forEach((c) => c(o.value));
 	};
-	g.on = function e(t, n, r = {}) {
+	h.on = function e(t, n, o = {}) {
-		let { signal: o } = r;
+		let { signal: r } = o;
-		if (!(o && o.aborted)) {
+		if (!(r && r.aborted)) {
 			if (Array.isArray(t))
-				return t.forEach((c) => e(c, n, r));
+				return t.forEach((c) => e(c, n, o));
-			j(t, n), o && o.addEventListener("abort", () => N(t, n));
+			P(t, n), r && r.addEventListener("abort", () => j(t, n));
 		}
 	};
-	g.symbols = {
+	h.symbols = {
 		signal: l,
 		onclear: Symbol.for("Signal.onclear")
 	};
-	g.attribute = function(e, t = void 0) {
+	h.attribute = function(e, t = void 0) {
-		let { host: n } = b, r = n() && n().hasAttribute(e) ? n().getAttribute(e) : t, o = new AbortController(), c = g(r, {
+		let { host: n } = m, o = n() && n().hasAttribute(e) ? n().getAttribute(e) : t, r = new AbortController(), c = h(o, {
-			[g.symbols.onclear]() {
+			[h.symbols.onclear]() {
-				o.abort();
+				r.abort();
 			}
 		});
-		return b.host(_.attributeChanged(function({ detail: s }) {
+		return m.host(E.attributeChanged(function({ detail: s }) {
-			let [u, p] = s;
+			let [d, p] = s;
-			u === e && c(p);
+			d === e && c(p);
-		}, { signal: o.signal })), c;
+		}, { signal: r.signal })), c;
 	};
-	g.clear = function(...e) {
+	h.clear = function(...e) {
 		for (let n of e) {
 			Reflect.deleteProperty(n, "toJSON");
-			let r = n[l], { onclear: o } = g.symbols;
+			let o = n[l];
-			r.actions && r.actions[o] && r.actions[o].call(r), t(n, r), Reflect.deleteProperty(n, l);
+			o.onclear.forEach((r) => r.call(o)), t(n, o), Reflect.deleteProperty(n, l);
 		}
-		function t(n, r) {
+		function t(n, o) {
-			r.listeners.forEach((o) => {
+			o.listeners.forEach((r) => {
-				if (r.listeners.delete(o), !m.has(o))
+				if (o.listeners.delete(r), !_.has(r))
 					return;
-				let c = m.get(o);
+				let c = _.get(r);
-				c.delete(n), !(c.size > 1) && (g.clear(...c), m.delete(o));
+				c.delete(n), !(c.size > 1) && (h.clear(...c), _.delete(r));
 			});
 		}
 	};
-	g.el = function(e, t) {
+	h.el = function(e, t) {
-		let n = document.createComment("<#reactive>"), r = document.createComment("</#reactive>"), o = document.createDocumentFragment();
+		let n = document.createComment("<#reactive>"), o = document.createComment("</#reactive>"), r = document.createDocumentFragment();
-		o.append(n, r);
+		r.append(n, o);
-		let c = (s) => {
+		let c = (u) => {
-			if (!n.parentNode || !r.parentNode)
+			if (!n.parentNode || !o.parentNode)
-				return N(e, c);
+				return j(e, c);
-			let u = t(s);
+			let s = t(u);
-			Array.isArray(u) || (u = [u]);
+			Array.isArray(s) || (s = [s]);
-			let p = n;
+			let d = n;
-			for (; (p = n.nextSibling) !== r; )
+			for (; (d = n.nextSibling) !== o; )
-				p.remove();
+				d.remove();
-			n.after(...u);
+			n.after(...s);
 		};
-		j(e, c);
+		return P(e, c), G(e, c, n, t), c(e()), r;
-		let { current: d } = b;
-		return d.prevent || d.host(_.disconnected(() => (
-			/*! Clears `S.el` signal listener in current scope when not needed. */
-			N(e, c)
-		))), c(e()), o;
 	};
 	var B = {
 		isSignal: C,
-		processReactiveAttribute(e, t, n, r) {
+		processReactiveAttribute(e, t, n, o) {
 			if (!C(n))
 				return n;
-			let o = (d) => r([t, d]);
+			let r = (c) => o([t, c]);
-			j(n, o);
+			return P(n, r), G(n, r, e, t), n();
-			let { current: c } = b;
-			return c.prevent || c.host(_.disconnected(() => (
-				/*! Clears signal listener for attribute in `assign` in current scope when not needed. */
-				N(n, o)
-			))), n();
 		}
 	};
-	function k(e, t) {
+	function G(e, t, ...n) {
-		let n = (...r) => r.length ? te(n, ...r) : ee(n);
+		let { current: o } = m;
-		return Q(n, e, t);
+		if (o.prevent)
+			return;
+		let r = "__dde_reactive";
+		o.host(function(c) {
+			c[r] || (c[r] = [], E.disconnected(
+				() => (
+					/*!
+					* Clears all signals listeners the current element is depending on (`S.el`, `assign`, …?).
+					* You can investigate the `__dde_reactive` key of the element.
+					* */
+					c[r].forEach(([u, s, d, p]) => j(d, p, d[l].host() === c))
+				)
+			)(c)), c[r].push([...n, e, t]);
+		});
 	}
-	var K = Object.assign(/* @__PURE__ */ Object.create(null), {
+	function k(e, t) {
+		let n = (...o) => o.length ? te(n, ...o) : ee(n);
+		return X(n, e, t);
+	}
+	var Q = Object.assign(/* @__PURE__ */ Object.create(null), {
 		stopPropagation() {
 			this.skip = !0;
 		}
 	});
-	function Q(e, t, n) {
+	function X(e, t, n) {
-		return T(n) !== "[object Object]" && (n = {}), e[l] = {
+		let o = [];
+		T(n) !== "[object Object]" && (n = {});
+		let { onclear: r } = h.symbols;
+		n[r] && (o.push(n[r]), Reflect.deleteProperty(n, r));
+		let { host: c } = m;
+		return e[l] = {
 			value: t,
 			actions: n,
+			onclear: o,
+			host: c,
 			listeners: /* @__PURE__ */ new Set()
-		}, e.toJSON = () => e(), Object.setPrototypeOf(e[l], K), e;
+		}, e.toJSON = () => e(), Object.setPrototypeOf(e[l], Q), e;
-	}
-	var L = [];
-	function X(e) {
-		let t = function() {
-			L.push(t), e(), L.pop();
-		};
-		m.has(e) && (m.set(t, m.get(e)), m.delete(e)), t();
 	}
 	function Y() {
 		return L[L.length - 1];
@@ -444,40 +453,42 @@
 	function ee(e) {
 		if (!e[l])
 			return;
-		let { value: t, listeners: n } = e[l], r = Y();
+		let { value: t, listeners: n } = e[l], o = Y();
-		return r && n.add(r), m.has(r) && m.get(r).add(e), t;
+		return o && n.add(o), _.has(o) && _.get(o).add(e), t;
 	}
 	function te(e, t, n) {
 		if (!e[l])
 			return;
-		let r = e[l];
+		let o = e[l];
-		if (!(!n && r.value === t))
+		if (!(!n && o.value === t))
-			return r.value = t, r.listeners.forEach((o) => o(t)), t;
+			return o.value = t, o.listeners.forEach((r) => r(t)), t;
 	}
-	function j(e, t) {
+	function P(e, t) {
 		if (e[l])
 			return e[l].listeners.add(t);
 	}
-	function N(e, t) {
+	function j(e, t, n) {
-		if (e[l])
+		if (!e[l])
-			return e[l].listeners.delete(t);
+			return;
+		let o = e[l].listeners.delete(t);
+		return n && e[l].listeners.size === 0 && h.clear(e), o;
 	}
 	
 	// signals.js
-	D(B);
+	N(B);
 	
 	globalThis.dde= {
-		S: g,
+		S: h,
 		assign: O,
-		classListDeclarative: I,
+		classListDeclarative: J,
 		createElement: ie,
 		dispatchEvent: le,
 		el: ie,
 		empty: fe,
 		isSignal: C,
-		on: _,
+		on: E,
-		registerReactivity: D,
+		registerReactivity: N,
-		scope: b
+		scope: m
 	};
 	
 })();

dist/dde.js

@@ -5,7 +5,7 @@
 		isSignal(e) {
 			return !1;
 		},
-		processReactiveAttribute(e, t, n, i) {
+		processReactiveAttribute(e, t, n, u) {
 			return n;
 		}
 	};
@@ -50,9 +50,6 @@
 		get current() {
 			return E[E.length - 1];
 		},
-		get state() {
-			return [...E];
-		},
 		get host() {
 			return this.current.host;
 		},
@@ -74,6 +71,9 @@
 				}
 			};
 		},
+		get state() {
+			return [...E];
+		},
 		push(e = {}) {
 			return e.namespace && (e.namespace = R(e.namespace)), E.push(Object.assign({}, this.current, { prevent: !1 }, e));
 		},
@@ -82,57 +82,57 @@
 		}
 	};
 	function V(e, t, ...n) {
-		let i = this, r = b(this), { namespace: f } = x, d = !1, c;
+		let u = b(this), { namespace: r } = x, f = 0, a;
-		switch ((Object(t) !== t || r.isSignal(t)) && (t = { textContent: t }), !0) {
+		switch ((Object(t) !== t || u.isSignal(t)) && (t = { textContent: t }), !0) {
 			case typeof e == "function": {
-				d = !0, x.push({ scope: e, host: (a) => a ? (n.unshift(a), void 0) : c }), c = e(t || void 0), (c instanceof HTMLElement ? P : j)(c, "Attribute", "dde-fun", e.name);
+				f = 1, x.push({ scope: e, host: (i) => i ? (f === 1 ? n.unshift(i) : i(a), void 0) : a }), a = e(t || void 0), (a instanceof HTMLElement ? P : j)(a, "Attribute", "dde-fun", e.name);
 				break;
 			}
 			case e === "#text":
-				c = w.call(i, document.createTextNode(""), t);
+				a = w.call(this, document.createTextNode(""), t);
 				break;
 			case e === "<>":
-				c = w.call(i, document.createDocumentFragment(), t);
+				a = w.call(this, document.createDocumentFragment(), t);
 				break;
-			case f !== "html":
+			case r !== "html":
-				c = w.call(i, document.createElementNS(f, e), t);
+				a = w.call(this, document.createElementNS(r, e), t);
 				break;
-			case !c:
+			case !a:
-				c = w.call(i, document.createElement(e), t);
+				a = w.call(this, document.createElement(e), t);
 		}
-		return n.forEach((a) => a(c)), d && x.pop(), c;
+		return n.forEach((i) => i(a)), f && x.pop(), f = 2, a;
 	}
 	var { setDeleteAttr: S } = C;
 	function w(e, ...t) {
-		let n = this, i = b(this);
+		let n = this, u = b(this);
 		if (!t.length)
 			return e;
 		let f = (e instanceof SVGElement ? j : P).bind(null, e, "Attribute");
-		return Object.entries(Object.assign({}, ...t)).forEach(function d([c, a]) {
+		return Object.entries(Object.assign({}, ...t)).forEach(function a([i, d]) {
-			a = i.processReactiveAttribute(e, c, a, d);
+			d = u.processReactiveAttribute(e, i, d, a);
-			let [l] = c;
+			let [l] = i;
 			if (l === "=")
-				return f(c.slice(1), a);
+				return f(i.slice(1), d);
 			if (l === ".")
-				return L(e, c.slice(1), a);
+				return L(e, i.slice(1), d);
-			if (/(aria|data)([A-Z])/.test(c))
+			if (/(aria|data)([A-Z])/.test(i))
-				return c = c.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), f(c, a);
+				return i = i.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), f(i, d);
-			switch (c === "className" && (c = "class"), c) {
+			switch (i === "className" && (i = "class"), i) {
 				case "xlink:href":
-					return f(c, a, "http://www.w3.org/1999/xlink");
+					return f(i, d, "http://www.w3.org/1999/xlink");
 				case "textContent":
-					return S(e, c, a);
+					return S(e, i, d);
 				case "style":
-					if (typeof a != "object")
+					if (typeof d != "object")
 						break;
 				case "dataset":
-					return O(i, a, L.bind(null, e[c]));
+					return O(u, d, L.bind(null, e[i]));
 				case "ariaset":
-					return O(i, a, (h, o) => f("aria-" + h, o));
+					return O(u, d, (h, c) => f("aria-" + h, c));
 				case "classList":
-					return W.call(n, e, a);
+					return W.call(n, e, d);
 			}
-			return F(e, c) ? S(e, c, a) : f(c, a);
+			return F(e, i) ? S(e, i, d) : f(i, d);
 		}), e;
 	}
 	function W(e, t) {
@@ -140,7 +140,7 @@
 		return O(
 			n,
 			t,
-			(i, r) => e.classList.toggle(i, r === -1 ? void 0 : !!r)
+			(u, r) => e.classList.toggle(u, r === -1 ? void 0 : !!r)
 		), e;
 	}
 	function $(e) {
@@ -161,17 +161,17 @@
 	function O(e, t, n) {
 		if (!(typeof t != "object" || t === null))
 			return Object.entries(t).forEach(function([r, f]) {
-				r && (f = e.processReactiveAttribute(t, r, f, (d) => n(...d)), n(r, f));
+				r && (f = e.processReactiveAttribute(t, r, f, (a) => n(...a)), n(r, f));
 			});
 	}
 	function N(e) {
 		return Array.isArray(e) ? e.filter(Boolean).join(" ") : e;
 	}
-	function P(e, t, n, i) {
+	function P(e, t, n, u) {
-		return e[(g(i) ? "remove" : "set") + t](n, N(i));
+		return e[(g(u) ? "remove" : "set") + t](n, N(u));
 	}
-	function j(e, t, n, i, r = null) {
+	function j(e, t, n, u, r = null) {
-		return e[(g(i) ? "remove" : "set") + t + "NS"](r, n, N(i));
+		return e[(g(u) ? "remove" : "set") + t + "NS"](r, n, N(u));
 	}
 	function L(e, t, n) {
 		if (Reflect.set(e, t, n), !!g(n))
@@ -180,8 +180,8 @@
 	
 	// src/events.js
 	function Q(e, t, ...n) {
-		let i = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
+		let u = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
-		return e.dispatchEvent(i);
+		return e.dispatchEvent(u);
 	}
 	function y(e, t, n) {
 		return function(r) {
@@ -209,99 +209,99 @@
 			let f = "dde:" + n;
 			if (r.addEventListener(f, e, t), r.__dde_lifecycleToEvents || H.has(r))
 				return r;
-			let d = new MutationObserver(function(a) {
+			let a = new MutationObserver(function(d) {
-				for (let { attributeName: l, target: h } of a)
+				for (let { attributeName: l, target: h } of d)
 					h.dispatchEvent(
 						new CustomEvent(f, { detail: [l, h.getAttribute(l)] })
 					);
 			});
-			return _(t.signal, () => d.disconnect()) && d.observe(r, { attributes: !0 }), r;
+			return _(t.signal, () => a.disconnect()) && a.observe(r, { attributes: !0 }), r;
 		};
 	};
 	function U() {
-		let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(o) {
+		let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) {
-			for (let s of o)
+			for (let o of c)
-				if (s.type === "childList") {
+				if (o.type === "childList") {
-					if (l(s.addedNodes, !0)) {
+					if (l(o.addedNodes, !0)) {
-						d();
+						a();
 						continue;
 					}
-					h(s.removedNodes, !0) && d();
+					h(o.removedNodes, !0) && a();
 				}
 		});
 		return {
-			onConnected(o, s) {
+			onConnected(c, o) {
 				f();
-				let u = r(o);
+				let s = r(c);
-				u.connected.has(s) || (u.connected.add(s), u.length_c += 1);
+				s.connected.has(o) || (s.connected.add(o), s.length_c += 1);
 			},
-			offConnected(o, s) {
+			offConnected(c, o) {
-				if (!e.has(o))
+				if (!e.has(c))
 					return;
-				let u = e.get(o);
+				let s = e.get(c);
-				u.connected.has(s) && (u.connected.delete(s), u.length_c -= 1, i(o, u));
+				s.connected.has(o) && (s.connected.delete(o), s.length_c -= 1, u(c, s));
 			},
-			onDisconnected(o, s) {
+			onDisconnected(c, o) {
 				f();
-				let u = r(o);
+				let s = r(c);
-				u.disconnected.has(s) || (u.disconnected.add(s), u.length_d += 1);
+				s.disconnected.has(o) || (s.disconnected.add(o), s.length_d += 1);
 			},
-			offDisconnected(o, s) {
+			offDisconnected(c, o) {
-				if (!e.has(o))
+				if (!e.has(c))
 					return;
-				let u = e.get(o);
+				let s = e.get(c);
-				u.disconnected.has(s) && (u.disconnected.delete(s), u.length_d -= 1, i(o, u));
+				s.disconnected.has(o) && (s.disconnected.delete(o), s.length_d -= 1, u(c, s));
 			}
 		};
-		function i(o, s) {
+		function u(c, o) {
-			s.length_c || s.length_d || (e.delete(o), d());
+			o.length_c || o.length_d || (e.delete(c), a());
 		}
-		function r(o) {
+		function r(c) {
-			if (e.has(o))
+			if (e.has(c))
-				return e.get(o);
+				return e.get(c);
-			let s = {
+			let o = {
 				connected: /* @__PURE__ */ new WeakSet(),
 				length_c: 0,
 				disconnected: /* @__PURE__ */ new WeakSet(),
 				length_d: 0
 			};
-			return e.set(o, s), s;
+			return e.set(c, o), o;
 		}
 		function f() {
 			t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
 		}
-		function d() {
+		function a() {
 			!t || e.size || (t = !1, n.disconnect());
 		}
-		function c() {
+		function i() {
-			return new Promise(function(o) {
+			return new Promise(function(c) {
-				(requestIdleCallback || requestAnimationFrame)(o);
+				(requestIdleCallback || requestAnimationFrame)(c);
 			});
 		}
-		async function a(o) {
+		async function d(c) {
-			e.size > 30 && await c();
+			e.size > 30 && await i();
-			let s = [];
+			let o = [];
-			if (!(o instanceof Node))
+			if (!(c instanceof Node))
-				return s;
+				return o;
-			for (let u of e.keys())
+			for (let s of e.keys())
-				u === o || !(u instanceof Node) || o.contains(u) && s.push(u);
+				s === c || !(s instanceof Node) || c.contains(s) && o.push(s);
-			return s;
+			return o;
 		}
-		function l(o, s) {
+		function l(c, o) {
-			let u = !1;
+			let s = !1;
-			for (let p of o) {
+			for (let p of c) {
-				if (s && a(p).then(l), !e.has(p))
+				if (o && d(p).then(l), !e.has(p))
 					continue;
 				let v = e.get(p);
-				v.length_c && (p.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(p), u = !0);
+				v.length_c && (p.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(p), s = !0);
 			}
-			return u;
+			return s;
 		}
-		function h(o, s) {
+		function h(c, o) {
-			let u = !1;
+			let s = !1;
-			for (let p of o)
+			for (let p of c)
-				s && a(p).then(h), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), u = !0);
+				o && d(p).then(h), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), s = !0);
-			return u;
+			return s;
 		}
 	}
 	

dist/esm-with-signals.js

@@ -1,21 +1,21 @@
 // src/signals-common.js
-var y = {
+var x = {
 	isSignal(e) {
 		return !1;
 	},
-	processReactiveAttribute(e, t, n, r) {
+	processReactiveAttribute(e, t, n, o) {
 		return n;
 	}
 };
-function D(e, t = !0) {
+function N(e, t = !0) {
-	return t ? Object.assign(y, e) : (Object.setPrototypeOf(e, y), e);
+	return t ? Object.assign(x, e) : (Object.setPrototypeOf(e, x), e);
 }
-function x(e) {
+function y(e) {
-	return y.isPrototypeOf(e) && e !== y ? e : y;
+	return x.isPrototypeOf(e) && e !== x ? e : x;
 }
 
 // src/helpers.js
-function E(e) {
+function v(e) {
 	return typeof e > "u";
 }
 function T(e) {
@@ -32,9 +32,9 @@ function A(e, t) {
 }
 
 // src/dom-common.js
-var M = { setDeleteAttr: G };
+var M = { setDeleteAttr: I };
-function G(e, t, n) {
+function I(e, t, n) {
-	if (Reflect.set(e, t, n), !!E(n)) {
+	if (Reflect.set(e, t, n), !!v(n)) {
 		if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined")
 			return e.removeAttribute(t);
 		if (Reflect.get(e, t) === "undefined")
@@ -48,13 +48,10 @@ var S = [{
 	namespace: "html",
 	host: (e) => e ? e(document.body) : document.body,
 	prevent: !0
-}], W = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, b = {
+}], W = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, m = {
 	get current() {
 		return S[S.length - 1];
 	},
-	get state() {
-		return [...S];
-	},
 	get host() {
 		return this.current.host;
 	},
@@ -72,10 +69,13 @@ var S = [{
 		let t = this.namespace;
 		return this.namespace = e, {
 			append(...n) {
-				return b.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n);
+				return m.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n);
 			}
 		};
 	},
+	get state() {
+		return [...S];
+	},
 	push(e = {}) {
 		return e.namespace && (e.namespace = W(e.namespace)), S.push(Object.assign({}, this.current, { prevent: !1 }, e));
 	},
@@ -84,75 +84,75 @@ var S = [{
 	}
 };
 function ie(e, t, ...n) {
-	let r = this, o = x(this), { namespace: c } = b, d = !1, s;
+	let o = y(this), { namespace: r } = m, c = 0, u;
 	switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) {
 		case typeof e == "function": {
-			d = !0, b.push({ scope: e, host: (u) => u ? (n.unshift(u), void 0) : s }), s = e(t || void 0), (s instanceof HTMLElement ? $ : q)(s, "Attribute", "dde-fun", e.name);
+			c = 1, m.push({ scope: e, host: (s) => s ? (c === 1 ? n.unshift(s) : s(u), void 0) : u }), u = e(t || void 0), (u instanceof HTMLElement ? $ : q)(u, "Attribute", "dde-fun", e.name);
 			break;
 		}
 		case e === "#text":
-			s = O.call(r, document.createTextNode(""), t);
+			u = O.call(this, document.createTextNode(""), t);
 			break;
 		case e === "<>":
-			s = O.call(r, document.createDocumentFragment(), t);
+			u = O.call(this, document.createDocumentFragment(), t);
 			break;
-		case c !== "html":
+		case r !== "html":
-			s = O.call(r, document.createElementNS(c, e), t);
+			u = O.call(this, document.createElementNS(r, e), t);
 			break;
-		case !s:
+		case !u:
-			s = O.call(r, document.createElement(e), t);
+			u = O.call(this, document.createElement(e), t);
 	}
-	return n.forEach((u) => u(s)), d && b.pop(), s;
+	return n.forEach((s) => s(u)), c && m.pop(), c = 2, u;
 }
 var { setDeleteAttr: F } = M;
 function O(e, ...t) {
-	let n = this, r = x(this);
+	let n = this, o = y(this);
 	if (!t.length)
 		return e;
 	let c = (e instanceof SVGElement ? q : $).bind(null, e, "Attribute");
-	return Object.entries(Object.assign({}, ...t)).forEach(function d([s, u]) {
+	return Object.entries(Object.assign({}, ...t)).forEach(function u([s, d]) {
-		u = r.processReactiveAttribute(e, s, u, d);
+		d = o.processReactiveAttribute(e, s, d, u);
 		let [p] = s;
 		if (p === "=")
-			return c(s.slice(1), u);
+			return c(s.slice(1), d);
 		if (p === ".")
-			return z(e, s.slice(1), u);
+			return z(e, s.slice(1), d);
 		if (/(aria|data)([A-Z])/.test(s))
-			return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, u);
+			return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, d);
 		switch (s === "className" && (s = "class"), s) {
 			case "xlink:href":
-				return c(s, u, "http://www.w3.org/1999/xlink");
+				return c(s, d, "http://www.w3.org/1999/xlink");
 			case "textContent":
-				return F(e, s, u);
+				return F(e, s, d);
 			case "style":
-				if (typeof u != "object")
+				if (typeof d != "object")
 					break;
 			case "dataset":
-				return P(r, u, z.bind(null, e[s]));
+				return D(o, d, z.bind(null, e[s]));
 			case "ariaset":
-				return P(r, u, (v, i) => c("aria-" + v, i));
+				return D(o, d, (b, i) => c("aria-" + b, i));
 			case "classList":
-				return I.call(n, e, u);
+				return J.call(n, e, d);
 		}
-		return J(e, s) ? F(e, s, u) : c(s, u);
+		return V(e, s) ? F(e, s, d) : c(s, d);
 	}), e;
 }
-function I(e, t) {
+function J(e, t) {
-	let n = x(this);
+	let n = y(this);
-	return P(
+	return D(
 		n,
 		t,
-		(r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o)
+		(o, r) => e.classList.toggle(o, r === -1 ? void 0 : !!r)
 	), e;
 }
 function fe(e) {
 	return Array.from(e.children).forEach((t) => t.remove()), e;
 }
-function J(e, t) {
+function V(e, t) {
 	if (!Reflect.has(e, t))
 		return !1;
 	let n = H(e, t);
-	return !E(n.set);
+	return !v(n.set);
 }
 function H(e, t) {
 	if (e = Object.getPrototypeOf(e), !e)
@@ -160,105 +160,105 @@ function H(e, t) {
 	let n = Object.getOwnPropertyDescriptor(e, t);
 	return n || H(e, t);
 }
-function P(e, t, n) {
+function D(e, t, n) {
 	if (!(typeof t != "object" || t === null))
-		return Object.entries(t).forEach(function([o, c]) {
+		return Object.entries(t).forEach(function([r, c]) {
-			o && (c = e.processReactiveAttribute(t, o, c, (d) => n(...d)), n(o, c));
+			r && (c = e.processReactiveAttribute(t, r, c, (u) => n(...u)), n(r, c));
 		});
 }
 function U(e) {
 	return Array.isArray(e) ? e.filter(Boolean).join(" ") : e;
 }
-function $(e, t, n, r) {
+function $(e, t, n, o) {
-	return e[(E(r) ? "remove" : "set") + t](n, U(r));
+	return e[(v(o) ? "remove" : "set") + t](n, U(o));
 }
-function q(e, t, n, r, o = null) {
+function q(e, t, n, o, r = null) {
-	return e[(E(r) ? "remove" : "set") + t + "NS"](o, n, U(r));
+	return e[(v(o) ? "remove" : "set") + t + "NS"](r, n, U(o));
 }
 function z(e, t, n) {
-	if (Reflect.set(e, t, n), !!E(n))
+	if (Reflect.set(e, t, n), !!v(n))
 		return Reflect.deleteProperty(e, t);
 }
 
 // src/events.js
 function le(e, t, ...n) {
-	let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
+	let o = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
-	return e.dispatchEvent(r);
+	return e.dispatchEvent(o);
 }
-function _(e, t, n) {
+function E(e, t, n) {
-	return function(o) {
+	return function(r) {
-		return o.addEventListener(e, t, n), o;
+		return r.addEventListener(e, t, n), r;
 	};
 }
-var R = Z(), V = /* @__PURE__ */ new WeakSet();
+var R = K(), Z = /* @__PURE__ */ new WeakSet();
-_.connected = function(e, t) {
+E.connected = function(e, t) {
 	let n = "connected";
-	return typeof t != "object" && (t = {}), t.once = !0, function(o) {
+	return typeof t != "object" && (t = {}), t.once = !0, function(r) {
 		let c = "dde:" + n;
-		return o.addEventListener(c, e, t), o.__dde_lifecycleToEvents ? o : o.isConnected ? (o.dispatchEvent(new Event(c)), o) : (A(t.signal, () => R.offConnected(o, e)) && R.onConnected(o, e), o);
+		return r.addEventListener(c, e, t), r.__dde_lifecycleToEvents ? r : r.isConnected ? (r.dispatchEvent(new Event(c)), r) : (A(t.signal, () => R.offConnected(r, e)) && R.onConnected(r, e), r);
 	};
 };
-_.disconnected = function(e, t) {
+E.disconnected = function(e, t) {
 	let n = "disconnected";
-	return typeof t != "object" && (t = {}), t.once = !0, function(o) {
+	return typeof t != "object" && (t = {}), t.once = !0, function(r) {
 		let c = "dde:" + n;
-		return o.addEventListener(c, e, t), o.__dde_lifecycleToEvents || A(t.signal, () => R.offDisconnected(o, e)) && R.onDisconnected(o, e), o;
+		return r.addEventListener(c, e, t), r.__dde_lifecycleToEvents || A(t.signal, () => R.offDisconnected(r, e)) && R.onDisconnected(r, e), r;
 	};
 };
-_.attributeChanged = function(e, t) {
+E.attributeChanged = function(e, t) {
 	let n = "attributeChanged";
-	return typeof t != "object" && (t = {}), function(o) {
+	return typeof t != "object" && (t = {}), function(r) {
 		let c = "dde:" + n;
-		if (o.addEventListener(c, e, t), o.__dde_lifecycleToEvents || V.has(o))
+		if (r.addEventListener(c, e, t), r.__dde_lifecycleToEvents || Z.has(r))
-			return o;
+			return r;
-		let d = new MutationObserver(function(u) {
+		let u = new MutationObserver(function(d) {
-			for (let { attributeName: p, target: v } of u)
+			for (let { attributeName: p, target: b } of d)
-				v.dispatchEvent(
+				b.dispatchEvent(
-					new CustomEvent(c, { detail: [p, v.getAttribute(p)] })
+					new CustomEvent(c, { detail: [p, b.getAttribute(p)] })
 				);
 		});
-		return A(t.signal, () => d.disconnect()) && d.observe(o, { attributes: !0 }), o;
+		return A(t.signal, () => u.disconnect()) && u.observe(r, { attributes: !0 }), r;
 	};
 };
-function Z() {
+function K() {
 	let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(i) {
 		for (let f of i)
 			if (f.type === "childList") {
 				if (p(f.addedNodes, !0)) {
-					d();
+					u();
 					continue;
 				}
-				v(f.removedNodes, !0) && d();
+				b(f.removedNodes, !0) && u();
 			}
 	});
 	return {
 		onConnected(i, f) {
 			c();
-			let a = o(i);
+			let a = r(i);
 			a.connected.has(f) || (a.connected.add(f), a.length_c += 1);
 		},
 		offConnected(i, f) {
 			if (!e.has(i))
 				return;
 			let a = e.get(i);
-			a.connected.has(f) && (a.connected.delete(f), a.length_c -= 1, r(i, a));
+			a.connected.has(f) && (a.connected.delete(f), a.length_c -= 1, o(i, a));
 		},
 		onDisconnected(i, f) {
 			c();
-			let a = o(i);
+			let a = r(i);
 			a.disconnected.has(f) || (a.disconnected.add(f), a.length_d += 1);
 		},
 		offDisconnected(i, f) {
 			if (!e.has(i))
 				return;
 			let a = e.get(i);
-			a.disconnected.has(f) && (a.disconnected.delete(f), a.length_d -= 1, r(i, a));
+			a.disconnected.has(f) && (a.disconnected.delete(f), a.length_d -= 1, o(i, a));
 		}
 	};
-	function r(i, f) {
+	function o(i, f) {
-		f.length_c || f.length_d || (e.delete(i), d());
+		f.length_c || f.length_d || (e.delete(i), u());
 	}
-	function o(i) {
+	function r(i) {
 		if (e.has(i))
 			return e.get(i);
 		let f = {
@@ -272,7 +272,7 @@ function Z() {
 	function c() {
 		t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
 	}
-	function d() {
+	function u() {
 		!t || e.size || (t = !1, n.disconnect());
 	}
 	function s() {
@@ -280,7 +280,7 @@ function Z() {
 			(requestIdleCallback || requestAnimationFrame)(i);
 		});
 	}
-	async function u(i) {
+	async function d(i) {
 		e.size > 30 && await s();
 		let f = [];
 		if (!(i instanceof Node))
@@ -291,18 +291,18 @@ function Z() {
 	}
 	function p(i, f) {
 		let a = !1;
-		for (let h of i) {
+		for (let g of i) {
-			if (f && u(h).then(p), !e.has(h))
+			if (f && d(g).then(p), !e.has(g))
 				continue;
-			let w = e.get(h);
+			let w = e.get(g);
-			w.length_c && (h.dispatchEvent(new Event("dde:connected")), w.connected = /* @__PURE__ */ new WeakSet(), w.length_c = 0, w.length_d || e.delete(h), a = !0);
+			w.length_c && (g.dispatchEvent(new Event("dde:connected")), w.connected = /* @__PURE__ */ new WeakSet(), w.length_c = 0, w.length_d || e.delete(g), a = !0);
 		}
 		return a;
 	}
-	function v(i, f) {
+	function b(i, f) {
 		let a = !1;
-		for (let h of i)
+		for (let g of i)
-			f && u(h).then(v), !(!e.has(h) || !e.get(h).length_d) && (h.dispatchEvent(new Event("dde:disconnected")), e.delete(h), a = !0);
+			f && d(g).then(b), !(!e.has(g) || !e.get(g).length_d) && (g.dispatchEvent(new Event("dde:disconnected")), e.delete(g), a = !0);
 		return a;
 	}
 }
@@ -324,117 +324,126 @@ function C(e) {
 		return !1;
 	}
 }
-var m = /* @__PURE__ */ new WeakMap();
+var L = [], _ = /* @__PURE__ */ new WeakMap();
-function g(e, t) {
+function h(e, t) {
 	if (typeof e != "function")
 		return k(e, t);
 	if (C(e))
 		return e;
-	let n = k(""), r = () => n(e());
+	let n = k(), o = function() {
-	return m.set(r, /* @__PURE__ */ new Set([n])), X(r), n;
+		L.push(o), n(e()), L.pop();
+	};
+	return _.set(o, /* @__PURE__ */ new Set([n])), o(), n;
 }
-g.action = function(e, t, ...n) {
+h.action = function(e, t, ...n) {
-	let r = e[l], { actions: o } = r;
+	let o = e[l], { actions: r } = o;
-	if (!o || !Reflect.has(o, t))
+	if (!r || !Reflect.has(r, t))
 		throw new Error(`'${e}' has no action with name '${t}'!`);
-	if (o[t].apply(r, n), r.skip)
+	if (r[t].apply(o, n), o.skip)
-		return Reflect.deleteProperty(r, "skip");
+		return Reflect.deleteProperty(o, "skip");
-	r.listeners.forEach((c) => c(r.value));
+	o.listeners.forEach((c) => c(o.value));
 };
-g.on = function e(t, n, r = {}) {
+h.on = function e(t, n, o = {}) {
-	let { signal: o } = r;
+	let { signal: r } = o;
-	if (!(o && o.aborted)) {
+	if (!(r && r.aborted)) {
 		if (Array.isArray(t))
-			return t.forEach((c) => e(c, n, r));
+			return t.forEach((c) => e(c, n, o));
-		j(t, n), o && o.addEventListener("abort", () => N(t, n));
+		P(t, n), r && r.addEventListener("abort", () => j(t, n));
 	}
 };
-g.symbols = {
+h.symbols = {
 	signal: l,
 	onclear: Symbol.for("Signal.onclear")
 };
-g.attribute = function(e, t = void 0) {
+h.attribute = function(e, t = void 0) {
-	let { host: n } = b, r = n() && n().hasAttribute(e) ? n().getAttribute(e) : t, o = new AbortController(), c = g(r, {
+	let { host: n } = m, o = n() && n().hasAttribute(e) ? n().getAttribute(e) : t, r = new AbortController(), c = h(o, {
-		[g.symbols.onclear]() {
+		[h.symbols.onclear]() {
-			o.abort();
+			r.abort();
 		}
 	});
-	return b.host(_.attributeChanged(function({ detail: s }) {
+	return m.host(E.attributeChanged(function({ detail: s }) {
-		let [u, p] = s;
+		let [d, p] = s;
-		u === e && c(p);
+		d === e && c(p);
-	}, { signal: o.signal })), c;
+	}, { signal: r.signal })), c;
 };
-g.clear = function(...e) {
+h.clear = function(...e) {
 	for (let n of e) {
 		Reflect.deleteProperty(n, "toJSON");
-		let r = n[l], { onclear: o } = g.symbols;
+		let o = n[l];
-		r.actions && r.actions[o] && r.actions[o].call(r), t(n, r), Reflect.deleteProperty(n, l);
+		o.onclear.forEach((r) => r.call(o)), t(n, o), Reflect.deleteProperty(n, l);
 	}
-	function t(n, r) {
+	function t(n, o) {
-		r.listeners.forEach((o) => {
+		o.listeners.forEach((r) => {
-			if (r.listeners.delete(o), !m.has(o))
+			if (o.listeners.delete(r), !_.has(r))
 				return;
-			let c = m.get(o);
+			let c = _.get(r);
-			c.delete(n), !(c.size > 1) && (g.clear(...c), m.delete(o));
+			c.delete(n), !(c.size > 1) && (h.clear(...c), _.delete(r));
 		});
 	}
 };
-g.el = function(e, t) {
+h.el = function(e, t) {
-	let n = document.createComment("<#reactive>"), r = document.createComment("</#reactive>"), o = document.createDocumentFragment();
+	let n = document.createComment("<#reactive>"), o = document.createComment("</#reactive>"), r = document.createDocumentFragment();
-	o.append(n, r);
+	r.append(n, o);
-	let c = (s) => {
+	let c = (u) => {
-		if (!n.parentNode || !r.parentNode)
+		if (!n.parentNode || !o.parentNode)
-			return N(e, c);
+			return j(e, c);
-		let u = t(s);
+		let s = t(u);
-		Array.isArray(u) || (u = [u]);
+		Array.isArray(s) || (s = [s]);
-		let p = n;
+		let d = n;
-		for (; (p = n.nextSibling) !== r; )
+		for (; (d = n.nextSibling) !== o; )
-			p.remove();
+			d.remove();
-		n.after(...u);
+		n.after(...s);
 	};
-	j(e, c);
+	return P(e, c), G(e, c, n, t), c(e()), r;
-	let { current: d } = b;
-	return d.prevent || d.host(_.disconnected(() => (
-		/*! Clears `S.el` signal listener in current scope when not needed. */
-		N(e, c)
-	))), c(e()), o;
 };
 var B = {
 	isSignal: C,
-	processReactiveAttribute(e, t, n, r) {
+	processReactiveAttribute(e, t, n, o) {
 		if (!C(n))
 			return n;
-		let o = (d) => r([t, d]);
+		let r = (c) => o([t, c]);
-		j(n, o);
+		return P(n, r), G(n, r, e, t), n();
-		let { current: c } = b;
-		return c.prevent || c.host(_.disconnected(() => (
-			/*! Clears signal listener for attribute in `assign` in current scope when not needed. */
-			N(n, o)
-		))), n();
 	}
 };
-function k(e, t) {
+function G(e, t, ...n) {
-	let n = (...r) => r.length ? te(n, ...r) : ee(n);
+	let { current: o } = m;
-	return Q(n, e, t);
+	if (o.prevent)
+		return;
+	let r = "__dde_reactive";
+	o.host(function(c) {
+		c[r] || (c[r] = [], E.disconnected(
+			() => (
+				/*!
+				* Clears all signals listeners the current element is depending on (`S.el`, `assign`, …?).
+				* You can investigate the `__dde_reactive` key of the element.
+				* */
+				c[r].forEach(([u, s, d, p]) => j(d, p, d[l].host() === c))
+			)
+		)(c)), c[r].push([...n, e, t]);
+	});
 }
-var K = Object.assign(/* @__PURE__ */ Object.create(null), {
+function k(e, t) {
+	let n = (...o) => o.length ? te(n, ...o) : ee(n);
+	return X(n, e, t);
+}
+var Q = Object.assign(/* @__PURE__ */ Object.create(null), {
 	stopPropagation() {
 		this.skip = !0;
 	}
 });
-function Q(e, t, n) {
+function X(e, t, n) {
-	return T(n) !== "[object Object]" && (n = {}), e[l] = {
+	let o = [];
+	T(n) !== "[object Object]" && (n = {});
+	let { onclear: r } = h.symbols;
+	n[r] && (o.push(n[r]), Reflect.deleteProperty(n, r));
+	let { host: c } = m;
+	return e[l] = {
 		value: t,
 		actions: n,
+		onclear: o,
+		host: c,
 		listeners: /* @__PURE__ */ new Set()
-	}, e.toJSON = () => e(), Object.setPrototypeOf(e[l], K), e;
+	}, e.toJSON = () => e(), Object.setPrototypeOf(e[l], Q), e;
-}
-var L = [];
-function X(e) {
-	let t = function() {
-		L.push(t), e(), L.pop();
-	};
-	m.has(e) && (m.set(t, m.get(e)), m.delete(e)), t();
 }
 function Y() {
 	return L[L.length - 1];
@@ -442,37 +451,39 @@ function Y() {
 function ee(e) {
 	if (!e[l])
 		return;
-	let { value: t, listeners: n } = e[l], r = Y();
+	let { value: t, listeners: n } = e[l], o = Y();
-	return r && n.add(r), m.has(r) && m.get(r).add(e), t;
+	return o && n.add(o), _.has(o) && _.get(o).add(e), t;
 }
 function te(e, t, n) {
 	if (!e[l])
 		return;
-	let r = e[l];
+	let o = e[l];
-	if (!(!n && r.value === t))
+	if (!(!n && o.value === t))
-		return r.value = t, r.listeners.forEach((o) => o(t)), t;
+		return o.value = t, o.listeners.forEach((r) => r(t)), t;
 }
-function j(e, t) {
+function P(e, t) {
 	if (e[l])
 		return e[l].listeners.add(t);
 }
-function N(e, t) {
+function j(e, t, n) {
-	if (e[l])
+	if (!e[l])
-		return e[l].listeners.delete(t);
+		return;
+	let o = e[l].listeners.delete(t);
+	return n && e[l].listeners.size === 0 && h.clear(e), o;
 }
 
 // signals.js
-D(B);
+N(B);
 export {
-	g as S,
+	h as S,
 	O as assign,
-	I as classListDeclarative,
+	J as classListDeclarative,
 	ie as createElement,
 	le as dispatchEvent,
 	ie as el,
 	fe as empty,
 	C as isSignal,
-	_ as on,
+	E as on,
-	D as registerReactivity,
+	N as registerReactivity,
-	b as scope
+	m as scope
 };

dist/esm.js

@@ -3,7 +3,7 @@ var m = {
 	isSignal(e) {
 		return !1;
 	},
-	processReactiveAttribute(e, t, n, i) {
+	processReactiveAttribute(e, t, n, u) {
 		return n;
 	}
 };
@@ -48,9 +48,6 @@ var E = [{
 	get current() {
 		return E[E.length - 1];
 	},
-	get state() {
-		return [...E];
-	},
 	get host() {
 		return this.current.host;
 	},
@@ -72,6 +69,9 @@ var E = [{
 			}
 		};
 	},
+	get state() {
+		return [...E];
+	},
 	push(e = {}) {
 		return e.namespace && (e.namespace = R(e.namespace)), E.push(Object.assign({}, this.current, { prevent: !1 }, e));
 	},
@@ -80,57 +80,57 @@ var E = [{
 	}
 };
 function V(e, t, ...n) {
-	let i = this, r = b(this), { namespace: f } = x, d = !1, c;
+	let u = b(this), { namespace: r } = x, f = 0, a;
-	switch ((Object(t) !== t || r.isSignal(t)) && (t = { textContent: t }), !0) {
+	switch ((Object(t) !== t || u.isSignal(t)) && (t = { textContent: t }), !0) {
 		case typeof e == "function": {
-			d = !0, x.push({ scope: e, host: (a) => a ? (n.unshift(a), void 0) : c }), c = e(t || void 0), (c instanceof HTMLElement ? P : j)(c, "Attribute", "dde-fun", e.name);
+			f = 1, x.push({ scope: e, host: (i) => i ? (f === 1 ? n.unshift(i) : i(a), void 0) : a }), a = e(t || void 0), (a instanceof HTMLElement ? P : j)(a, "Attribute", "dde-fun", e.name);
 			break;
 		}
 		case e === "#text":
-			c = w.call(i, document.createTextNode(""), t);
+			a = w.call(this, document.createTextNode(""), t);
 			break;
 		case e === "<>":
-			c = w.call(i, document.createDocumentFragment(), t);
+			a = w.call(this, document.createDocumentFragment(), t);
 			break;
-		case f !== "html":
+		case r !== "html":
-			c = w.call(i, document.createElementNS(f, e), t);
+			a = w.call(this, document.createElementNS(r, e), t);
 			break;
-		case !c:
+		case !a:
-			c = w.call(i, document.createElement(e), t);
+			a = w.call(this, document.createElement(e), t);
 	}
-	return n.forEach((a) => a(c)), d && x.pop(), c;
+	return n.forEach((i) => i(a)), f && x.pop(), f = 2, a;
 }
 var { setDeleteAttr: S } = C;
 function w(e, ...t) {
-	let n = this, i = b(this);
+	let n = this, u = b(this);
 	if (!t.length)
 		return e;
 	let f = (e instanceof SVGElement ? j : P).bind(null, e, "Attribute");
-	return Object.entries(Object.assign({}, ...t)).forEach(function d([c, a]) {
+	return Object.entries(Object.assign({}, ...t)).forEach(function a([i, d]) {
-		a = i.processReactiveAttribute(e, c, a, d);
+		d = u.processReactiveAttribute(e, i, d, a);
-		let [l] = c;
+		let [l] = i;
 		if (l === "=")
-			return f(c.slice(1), a);
+			return f(i.slice(1), d);
 		if (l === ".")
-			return L(e, c.slice(1), a);
+			return L(e, i.slice(1), d);
-		if (/(aria|data)([A-Z])/.test(c))
+		if (/(aria|data)([A-Z])/.test(i))
-			return c = c.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), f(c, a);
+			return i = i.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), f(i, d);
-		switch (c === "className" && (c = "class"), c) {
+		switch (i === "className" && (i = "class"), i) {
 			case "xlink:href":
-				return f(c, a, "http://www.w3.org/1999/xlink");
+				return f(i, d, "http://www.w3.org/1999/xlink");
 			case "textContent":
-				return S(e, c, a);
+				return S(e, i, d);
 			case "style":
-				if (typeof a != "object")
+				if (typeof d != "object")
 					break;
 			case "dataset":
-				return O(i, a, L.bind(null, e[c]));
+				return O(u, d, L.bind(null, e[i]));
 			case "ariaset":
-				return O(i, a, (h, o) => f("aria-" + h, o));
+				return O(u, d, (h, c) => f("aria-" + h, c));
 			case "classList":
-				return W.call(n, e, a);
+				return W.call(n, e, d);
 		}
-		return F(e, c) ? S(e, c, a) : f(c, a);
+		return F(e, i) ? S(e, i, d) : f(i, d);
 	}), e;
 }
 function W(e, t) {
@@ -138,7 +138,7 @@ function W(e, t) {
 	return O(
 		n,
 		t,
-		(i, r) => e.classList.toggle(i, r === -1 ? void 0 : !!r)
+		(u, r) => e.classList.toggle(u, r === -1 ? void 0 : !!r)
 	), e;
 }
 function $(e) {
@@ -159,17 +159,17 @@ function D(e, t) {
 function O(e, t, n) {
 	if (!(typeof t != "object" || t === null))
 		return Object.entries(t).forEach(function([r, f]) {
-			r && (f = e.processReactiveAttribute(t, r, f, (d) => n(...d)), n(r, f));
+			r && (f = e.processReactiveAttribute(t, r, f, (a) => n(...a)), n(r, f));
 		});
 }
 function N(e) {
 	return Array.isArray(e) ? e.filter(Boolean).join(" ") : e;
 }
-function P(e, t, n, i) {
+function P(e, t, n, u) {
-	return e[(g(i) ? "remove" : "set") + t](n, N(i));
+	return e[(g(u) ? "remove" : "set") + t](n, N(u));
 }
-function j(e, t, n, i, r = null) {
+function j(e, t, n, u, r = null) {
-	return e[(g(i) ? "remove" : "set") + t + "NS"](r, n, N(i));
+	return e[(g(u) ? "remove" : "set") + t + "NS"](r, n, N(u));
 }
 function L(e, t, n) {
 	if (Reflect.set(e, t, n), !!g(n))
@@ -178,8 +178,8 @@ function L(e, t, n) {
 
 // src/events.js
 function Q(e, t, ...n) {
-	let i = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
+	let u = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
-	return e.dispatchEvent(i);
+	return e.dispatchEvent(u);
 }
 function y(e, t, n) {
 	return function(r) {
@@ -207,99 +207,99 @@ y.attributeChanged = function(e, t) {
 		let f = "dde:" + n;
 		if (r.addEventListener(f, e, t), r.__dde_lifecycleToEvents || H.has(r))
 			return r;
-		let d = new MutationObserver(function(a) {
+		let a = new MutationObserver(function(d) {
-			for (let { attributeName: l, target: h } of a)
+			for (let { attributeName: l, target: h } of d)
 				h.dispatchEvent(
 					new CustomEvent(f, { detail: [l, h.getAttribute(l)] })
 				);
 		});
-		return _(t.signal, () => d.disconnect()) && d.observe(r, { attributes: !0 }), r;
+		return _(t.signal, () => a.disconnect()) && a.observe(r, { attributes: !0 }), r;
 	};
 };
 function U() {
-	let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(o) {
+	let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) {
-		for (let s of o)
+		for (let o of c)
-			if (s.type === "childList") {
+			if (o.type === "childList") {
-				if (l(s.addedNodes, !0)) {
+				if (l(o.addedNodes, !0)) {
-					d();
+					a();
 					continue;
 				}
-				h(s.removedNodes, !0) && d();
+				h(o.removedNodes, !0) && a();
 			}
 	});
 	return {
-		onConnected(o, s) {
+		onConnected(c, o) {
 			f();
-			let u = r(o);
+			let s = r(c);
-			u.connected.has(s) || (u.connected.add(s), u.length_c += 1);
+			s.connected.has(o) || (s.connected.add(o), s.length_c += 1);
 		},
-		offConnected(o, s) {
+		offConnected(c, o) {
-			if (!e.has(o))
+			if (!e.has(c))
 				return;
-			let u = e.get(o);
+			let s = e.get(c);
-			u.connected.has(s) && (u.connected.delete(s), u.length_c -= 1, i(o, u));
+			s.connected.has(o) && (s.connected.delete(o), s.length_c -= 1, u(c, s));
 		},
-		onDisconnected(o, s) {
+		onDisconnected(c, o) {
 			f();
-			let u = r(o);
+			let s = r(c);
-			u.disconnected.has(s) || (u.disconnected.add(s), u.length_d += 1);
+			s.disconnected.has(o) || (s.disconnected.add(o), s.length_d += 1);
 		},
-		offDisconnected(o, s) {
+		offDisconnected(c, o) {
-			if (!e.has(o))
+			if (!e.has(c))
 				return;
-			let u = e.get(o);
+			let s = e.get(c);
-			u.disconnected.has(s) && (u.disconnected.delete(s), u.length_d -= 1, i(o, u));
+			s.disconnected.has(o) && (s.disconnected.delete(o), s.length_d -= 1, u(c, s));
 		}
 	};
-	function i(o, s) {
+	function u(c, o) {
-		s.length_c || s.length_d || (e.delete(o), d());
+		o.length_c || o.length_d || (e.delete(c), a());
 	}
-	function r(o) {
+	function r(c) {
-		if (e.has(o))
+		if (e.has(c))
-			return e.get(o);
+			return e.get(c);
-		let s = {
+		let o = {
 			connected: /* @__PURE__ */ new WeakSet(),
 			length_c: 0,
 			disconnected: /* @__PURE__ */ new WeakSet(),
 			length_d: 0
 		};
-		return e.set(o, s), s;
+		return e.set(c, o), o;
 	}
 	function f() {
 		t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
 	}
-	function d() {
+	function a() {
 		!t || e.size || (t = !1, n.disconnect());
 	}
-	function c() {
+	function i() {
-		return new Promise(function(o) {
+		return new Promise(function(c) {
-			(requestIdleCallback || requestAnimationFrame)(o);
+			(requestIdleCallback || requestAnimationFrame)(c);
 		});
 	}
-	async function a(o) {
+	async function d(c) {
-		e.size > 30 && await c();
+		e.size > 30 && await i();
-		let s = [];
+		let o = [];
-		if (!(o instanceof Node))
+		if (!(c instanceof Node))
-			return s;
+			return o;
-		for (let u of e.keys())
+		for (let s of e.keys())
-			u === o || !(u instanceof Node) || o.contains(u) && s.push(u);
+			s === c || !(s instanceof Node) || c.contains(s) && o.push(s);
-		return s;
+		return o;
 	}
-	function l(o, s) {
+	function l(c, o) {
-		let u = !1;
+		let s = !1;
-		for (let p of o) {
+		for (let p of c) {
-			if (s && a(p).then(l), !e.has(p))
+			if (o && d(p).then(l), !e.has(p))
 				continue;
 			let v = e.get(p);
-			v.length_c && (p.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(p), u = !0);
+			v.length_c && (p.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(p), s = !0);
 		}
-		return u;
+		return s;
 	}
-	function h(o, s) {
+	function h(c, o) {
-		let u = !1;
+		let s = !1;
-		for (let p of o)
+		for (let p of c)
-			s && a(p).then(h), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), u = !0);
+			o && d(p).then(h), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), s = !0);
-		return u;
+		return s;
 	}
 }
 

examples/components/todosComponent.js

@@ -19,8 +19,12 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
 	const todosS= S(todos.map(t=> S(t)), {
 		add(v){ this.value.push(S(v)); },
 		remove(i){ this.value.splice(i, 1)[0]; },
-		[S.symbols.onclear](){ S.clear(...this.value); },
+		[S.symbols.onclear](){
+			console.log("zde");
+			S.clear(...this.value);
+		},
 	});
+	console.log(todosS);
 	const name= "todoName";
 	const onsubmitAdd= on("submit", event=> {
 		const el= event.target.elements[name];

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.5.0",
+	"version": "0.5.3",
 	"description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.",
 	"author": "Jan Andrle <andrle.jan@centrum.cz>",
 	"license": "MIT",
@@ -73,7 +73,7 @@
 		},
 		{
 			"path": "./examples/components/webComponent.js",
-			"limit": "11kb",
+			"limit": "12kb",
 			"gzip": false
 		}
 	],

src/dom.js

@@ -10,10 +10,10 @@ const scopes= [ {
 const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns;
 export const scope= {
 	get current(){ return scopes[scopes.length-1]; },
-	get state(){ return [ ...scopes ]; },
 	get host(){ return this.current.host; },
 	get namespace(){ return this.current.namespace; },
 	set namespace(namespace){ return ( this.current.namespace= namespaceHelper(namespace)); },
+	
 	preventDefault(){
 		const { current }= this;
 		current.prevent= true;
@@ -31,6 +31,8 @@ export const scope= {
 			}
 		};
 	},
+	
+	get state(){ return [ ...scopes ]; },
 	push(s= {}){
 		if(s.namespace) s.namespace= namespaceHelper(s.namespace);
 		return scopes.push(Object.assign({}, this.current, { prevent: false }, s));
@@ -38,29 +40,29 @@ export const scope= {
 	pop(){ return scopes.pop(); },
 };
 export function createElement(tag, attributes, ...connect){
-	const _this= this;
 	const s= signals(this);
 	const { namespace }= scope;
-	let scoped= false;
+	let scoped= 0;
 	let el;
 	//TODO Array.isArray(tag) ⇒ set key (cache els)
 	if(Object(attributes)!==attributes || s.isSignal(attributes))
 		attributes= { textContent: attributes };
 	switch(true){
 		case typeof tag==="function": {
-			scoped= true;
+			scoped= 1;
-			scope.push({ scope: tag, host: c=> c ? (connect.unshift(c), undefined) : el });
+			scope.push({ scope: tag, host: c=> c ? (scoped===1 ? connect.unshift(c) : c(el), undefined) : el });
 			el= tag(attributes || undefined);
 			(el instanceof HTMLElement ? setRemove : setRemoveNS)(el, "Attribute", "dde-fun", tag.name);
 			break;
 		}
-		case tag==="#text":      el= assign.call(_this, document.createTextNode(""), attributes); break;
+		case tag==="#text":      el= assign.call(this, document.createTextNode(""), attributes); break;
-		case tag==="<>":         el= assign.call(_this, document.createDocumentFragment(), attributes); break;
+		case tag==="<>":         el= assign.call(this, document.createDocumentFragment(), attributes); break;
-		case namespace!=="html": el= assign.call(_this, document.createElementNS(namespace, tag), attributes); break;
+		case namespace!=="html": el= assign.call(this, document.createElementNS(namespace, tag), attributes); break;
-		case !el:                el= assign.call(_this, document.createElement(tag), attributes);
+		case !el:                el= assign.call(this, document.createElement(tag), attributes);
 	}
 	connect.forEach(c=> c(el));
 	if(scoped) scope.pop();
+	scoped= 2;
 	return el;
 }
 export { createElement as el };

src/signals-lib.js

@@ -4,6 +4,8 @@ export function isSignal(candidate){
 	try{ return Reflect.has(candidate, mark); }
 	catch(e){ return false; }
 }
+/** @type {function[]} */
+const stack_watch= [];
 /** @type {WeakMap<function,Set<ddeSignal<any, any>>>} */
 const deps= new WeakMap();
 export function S(value, actions){
@@ -11,10 +13,15 @@ export function S(value, actions){
 		return create(value, actions);
 	if(isSignal(value)) return value;
 	
-	const out= create("");
+	const out= create();
-	const context= ()=> out(value());
+	const contextReWatch= function(){
-	deps.set(context, new Set([ out ]));
+		stack_watch.push(contextReWatch);
-	watch(context);
+		out(value());
+		stack_watch.pop();
+	};
+	deps.set(contextReWatch, new Set([ out ]));
+	contextReWatch();
+	//TODO when `out` is auto-removed (removeSignalsFromElements) there should be also a way to remove contextReWatch from all deps (complicated part is pass `is_full`/`removeSignalListener`)
 	return out;
 }
 S.action= function(signal, name, ...a){
@@ -57,9 +64,7 @@ S.clear= function(...signals){
 	for(const signal of signals){
 		Reflect.deleteProperty(signal, "toJSON");
 		const s= signal[mark];
-		const { onclear }= S.symbols;
+		s.onclear.forEach(f=> f.call(s));
-		if(s.actions && s.actions[onclear])
-			s.actions[onclear].call(s);
 		clearListDeps(signal, s);
 		Reflect.deleteProperty(signal, mark);
 	}
@@ -94,11 +99,7 @@ S.el= function(signal, map){
 		mark_start.after(...els);
 	};
 	addSignalListener(signal, reRenderReactiveElement);
-	const { current }= scope;
+	removeSignalsFromElements(signal, reRenderReactiveElement, mark_start, map);
-	if(!current.prevent)
-		current.host(on.disconnected(()=>
-			/*! Clears `S.el` signal listener in current scope when not needed. */
-			removeSignalListener(signal, reRenderReactiveElement)));
 	reRenderReactiveElement(signal());
 	return out;
 };
@@ -110,14 +111,28 @@ export const signals_config= {
 		if(!isSignal(attrs)) return attrs;
 		const l= attr=> assignNth([ key, attr ]);
 		addSignalListener(attrs, l);
-		const { current }= scope;
+		removeSignalsFromElements(attrs, l, _, key);
-		if(!current.prevent)
-			current.host(on.disconnected(()=>
-				/*! Clears signal listener for attribute in `assign` in current scope when not needed. */
-				removeSignalListener(attrs, l)));
 		return attrs();
 	}
 };
+function removeSignalsFromElements(signal, listener, ...notes){
+	const { current }= scope;
+	if(current.prevent) return;
+	const k= "__dde_reactive";
+	current.host(function(element){
+		if(!element[k]){
+			element[k]= [];
+			on.disconnected(()=>
+				/*!
+				* Clears all signals listeners the current element is depending on (`S.el`, `assign`, …?).
+				* You can investigate the `__dde_reactive` key of the element.
+				* */
+				element[k].forEach(([ _1, _2, s, l ])=> removeSignalListener(s, l, s[mark].host() === element))
+			)(element);
+		}
+		element[k].push([ ...notes, signal, listener ]);
+	});
+}
 
 function create(value, actions){
 	const signal=  (...value)=>
@@ -130,29 +145,23 @@ const protoSigal= Object.assign(Object.create(null), {
 	}
 });
 function toSignal(signal, value, actions){
+	const onclear= [];
 	if(typeOf(actions)!=="[object Object]")
 		actions= {};
+	const { onclear: ocs }= S.symbols;
+	if(actions[ocs]){
+		onclear.push(actions[ocs]);
+		Reflect.deleteProperty(actions, ocs);
+	}
+	const { host }= scope;
 	signal[mark]= {
-		value, actions,
+		value, actions, onclear, host,
 		listeners: new Set()
 	};
 	signal.toJSON= ()=> signal();
 	Object.setPrototypeOf(signal[mark], protoSigal);
 	return signal;
 }
-
-/** @type {function[]} */
-const stack_watch= [];
-function watch(context){
-	const contextReWatch= function(){
-		stack_watch.push(contextReWatch);
-		context();
-		stack_watch.pop();
-	};
-	//reassign deps as final context is contextReWatch
-	if(deps.has(context)){ deps.set(contextReWatch, deps.get(context)); deps.delete(context); }
-	contextReWatch();
-}
 function currentContext(){
 	return stack_watch[stack_watch.length - 1];
 }
@@ -177,7 +186,10 @@ function addSignalListener(signal, listener){
 	if(!signal[mark]) return;
 	return signal[mark].listeners.add(listener);
 }
-function removeSignalListener(signal, listener){
+function removeSignalListener(signal, listener, is_full){
 	if(!signal[mark]) return;
-	return signal[mark].listeners.delete(listener);
+	const out= signal[mark].listeners.delete(listener);
+	if(is_full && signal[mark].listeners.size===0)
+		S.clear(signal);
+	return out;
 }