diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js
index 04e68d5..ca62291 100644
--- a/dist/dde-with-signals.js
+++ b/dist/dde-with-signals.js
@@ -8,199 +8,191 @@
 	
 	// src/signals-common.js
 	var b = {
-		isReactiveAtrribute(e, t) {
-			return !1;
-		},
 		isTextContent(e) {
 			return m(e) !== "[object Object]";
 		},
-		processReactiveAttribute(e, t, r, n) {
-			return !1;
-		},
-		reactiveElement(e, ...t) {
-			return null;
+		processReactiveAttribute(e, t, n, r) {
+			return n;
 		}
 	};
-	function L(e, t = !0) {
+	function j(e, t = !0) {
 		return t ? Object.assign(b, e) : (Object.setPrototypeOf(e, b), e);
 	}
-	function j(e) {
+	function N(e) {
 		return b.isPrototypeOf(e) && e !== b ? e : b;
 	}
 	
 	// src/dom.js
-	var w = "html";
+	var v = "html";
 	function ee(e) {
-		return w = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
+		return v = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
 			append(t) {
-				return w = "html", t;
+				return v = "html", t;
 			}
 		};
 	}
-	function te(e, t, ...r) {
-		let n = j(this), o;
-		if (e === "<>") {
-			if (n.isReactiveAtrribute(t))
-				return n.reactiveElement(t, ...r);
-			o = document.createDocumentFragment();
-		}
-		switch (n.isTextContent(t) && (t = { textContent: t }), !0) {
+	function te(e, t, ...n) {
+		let r = N(this), o;
+		switch (r.isTextContent(t) && (t = { textContent: t }), !0) {
 			case typeof e == "function":
 				o = e(t || void 0);
 				break;
 			case e === "#text":
-				o = A(document.createTextNode(""), t);
+				o = y(document.createTextNode(""), t);
 				break;
-			case w !== "html":
-				o = A(document.createElementNS(w, e), t);
+			case e === "<>":
+				o = y(document.createDocumentFragment(), t);
+				break;
+			case v !== "html":
+				o = y(document.createElementNS(v, e), t);
 				break;
 			case !o:
-				o = A(document.createElement(e), t);
+				o = y(document.createElement(e), t);
 		}
-		return r.forEach((a) => a(o)), o;
+		return n.forEach((a) => a(o)), o;
 	}
 	var x = new Map(JSON.parse('[["#text,textContent",true],["HTMLElement,textContent",true],["HTMLElement,className",true]]'));
-	function A(e, ...t) {
-		let r = j(this);
+	function y(e, ...t) {
+		let n = N(this);
 		if (!t.length)
 			return e;
-		let n = e instanceof SVGElement, o = (n ? q : P).bind(null, e, "Attribute");
-		return Object.entries(Object.assign({}, ...t)).forEach(function a([i, s]) {
-			r.isReactiveAtrribute(s, i) && (s = r.processReactiveAttribute(e, i, s, a));
-			let [h] = i;
+		let r = e instanceof SVGElement, o = (r ? q : D).bind(null, e, "Attribute");
+		return Object.entries(Object.assign({}, ...t)).forEach(function a([f, s]) {
+			s = n.processReactiveAttribute(e, f, s, a);
+			let [h] = f;
 			if (h === "=")
-				return o(i.slice(1), s);
+				return o(f.slice(1), s);
 			if (h === ".")
-				return N(e, i.slice(1), s);
+				return _(e, f.slice(1), s);
 			if (typeof s == "object")
-				switch (i) {
+				switch (f) {
 					case "style":
-						return y(s, P.bind(null, e.style, "Property"));
+						return w(s, D.bind(null, e.style, "Property"));
 					case "dataset":
-						return y(s, N.bind(null, e.dataset));
+						return w(s, _.bind(null, e.dataset));
 					case "ariaset":
-						return y(s, (E, v) => o("aria-" + E, v));
+						return w(s, (E, O) => o("aria-" + E, O));
 					case "classList":
 						return $(e, s);
 					default:
-						return Reflect.set(e, i, s);
+						return Reflect.set(e, f, s);
 				}
-			if (/(aria|data)([A-Z])/.test(i))
-				return i = i.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), o(i, s);
-			switch (i) {
+			if (/(aria|data)([A-Z])/.test(f))
+				return f = f.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), o(f, s);
+			switch (f) {
 				case "href":
-					return o(i, s);
+					return o(f, s);
 				case "xlink:href":
-					return o(i, s, "http://www.w3.org/1999/xlink");
+					return o(f, s, "http://www.w3.org/1999/xlink");
 				case "textContent":
-					if (!n)
+					if (!r)
 						break;
 					return e.appendChild(document.createTextNode(s));
 			}
-			return k(e, i) ? N(e, i, s) : o(i, s);
+			return k(e, f) ? _(e, f, s) : o(f, s);
 		}), e;
 	}
 	function $(e, t) {
-		return typeof t != "object" || y(
+		return typeof t != "object" || w(
 			t,
-			(r, n) => e.classList.toggle(r, n === -1 ? void 0 : !!n)
+			(n, r) => e.classList.toggle(n, r === -1 ? void 0 : !!r)
 		), e;
 	}
 	function ne(e) {
 		return Array.from(e.children).forEach((t) => t.remove()), e;
 	}
 	function k(e, t) {
-		let r = "HTMLElement," + t;
-		if (e instanceof HTMLElement && x.has(r))
-			return x.get(r);
-		let n = e.nodeName + "," + t;
-		if (x.has(n))
+		let n = "HTMLElement," + t;
+		if (e instanceof HTMLElement && x.has(n))
 			return x.get(n);
-		let [o, a, i] = T(e, t), s = !_(o.set);
-		return (!s || a) && x.set(i === HTMLElement.prototype ? r : n, s), s;
+		let r = e.nodeName + "," + t;
+		if (x.has(r))
+			return x.get(r);
+		let [o, a, f] = T(e, t), s = !A(o.set);
+		return (!s || a) && x.set(f === HTMLElement.prototype ? n : r, s), s;
 	}
-	function T(e, t, r = 0) {
+	function T(e, t, n = 0) {
 		if (e = Object.getPrototypeOf(e), !e)
-			return [{}, r, e];
-		let n = Object.getOwnPropertyDescriptor(e, t);
-		return n ? [n, r, e] : T(e, t, r + 1);
+			return [{}, n, e];
+		let r = Object.getOwnPropertyDescriptor(e, t);
+		return r ? [r, n, e] : T(e, t, n + 1);
 	}
-	function y(e, t) {
-		return Object.entries(e).forEach(([r, n]) => t(r, n));
+	function w(e, t) {
+		return Object.entries(e).forEach(([n, r]) => t(n, r));
 	}
-	function _(e) {
+	function A(e) {
 		return typeof e > "u";
 	}
-	function P(e, t, r, n) {
-		return e[(_(n) ? "remove" : "set") + t](r, n);
+	function D(e, t, n, r) {
+		return e[(A(r) ? "remove" : "set") + t](n, r);
 	}
-	function q(e, t, r, n, o = null) {
-		return e[(_(n) ? "remove" : "set") + t + "NS"](o, r, n);
+	function q(e, t, n, r, o = null) {
+		return e[(A(r) ? "remove" : "set") + t + "NS"](o, n, r);
 	}
-	function N(e, t, r) {
-		return Reflect.set(e, t, r);
+	function _(e, t, n) {
+		return Reflect.set(e, t, n);
 	}
 	
 	// src/events.js
-	function M(e, t, r) {
-		return (n) => (n.addEventListener(e, t, r), n);
+	function M(e, t, n) {
+		return (r) => (r.addEventListener(e, t, n), r);
 	}
-	var O = W();
+	var S = J();
 	M.connected = function(e, t) {
-		return function(n) {
-			O.onConnected(n, e), t && t.signal && t.signal.addEventListener("abort", () => O.offConnected(n, e));
+		return function(r) {
+			S.onConnected(r, e), t && t.signal && t.signal.addEventListener("abort", () => S.offConnected(r, e));
 		};
 	};
 	M.disconnected = function(e, t) {
-		return function(n) {
-			O.onDisconnected(n, e), t && t.signal && t.signal.addEventListener("abort", () => O.offDisconnected(n, e));
+		return function(r) {
+			S.onDisconnected(r, e), t && t.signal && t.signal.addEventListener("abort", () => S.offDisconnected(r, e));
 		};
 	};
-	function W() {
-		let e = /* @__PURE__ */ new Map(), t = !1, r = new MutationObserver(function(c) {
-			for (let f of c)
-				if (f.type === "childList") {
-					if (E(f.addedNodes, !0)) {
-						i();
+	function J() {
+		let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) {
+			for (let i of c)
+				if (i.type === "childList") {
+					if (E(i.addedNodes, !0)) {
+						f();
 						continue;
 					}
-					v(f.removedNodes, !0) && i();
+					O(i.removedNodes, !0) && f();
 				}
 		});
 		return {
-			onConnected(c, f) {
-				a(), o(c).connected.push(f);
+			onConnected(c, i) {
+				a(), o(c).connected.push(i);
 			},
-			offConnected(c, f) {
+			offConnected(c, i) {
 				if (!e.has(c))
 					return;
 				let u = e.get(c), l = u.connected;
-				l.splice(l.indexOf(f), 1), n(c, u);
+				l.splice(l.indexOf(i), 1), r(c, u);
 			},
-			onDisconnected(c, f) {
-				a(), o(c).disconnected.push(f);
+			onDisconnected(c, i) {
+				a(), o(c).disconnected.push(i);
 			},
-			offDisconnected(c, f) {
+			offDisconnected(c, i) {
 				if (!e.has(c))
 					return;
 				let u = e.get(c), l = u.disconnected;
-				l.splice(l.indexOf(f), 1), n(c, u);
+				l.splice(l.indexOf(i), 1), r(c, u);
 			}
 		};
-		function n(c, f) {
-			f.connected.length || f.disconnect.length || (e.delete(c), i());
+		function r(c, i) {
+			i.connected.length || i.disconnect.length || (e.delete(c), f());
 		}
 		function o(c) {
 			if (e.has(c))
 				return e.get(c);
-			let f = { connected: [], disconnected: [] };
-			return e.set(c, f), f;
+			let i = { connected: [], disconnected: [] };
+			return e.set(c, i), i;
 		}
 		function a() {
-			t || (t = !0, r.observe(document.body, { childList: !0, subtree: !0 }));
+			t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
 		}
-		function i() {
-			!t || e.size || (t = !1, r.disconnect());
+		function f() {
+			!t || e.size || (t = !1, n.disconnect());
 		}
 		function s() {
 			return new Promise(function(c) {
@@ -209,27 +201,27 @@
 		}
 		async function h(c) {
 			e.size > 30 && await s();
-			let f = [];
+			let i = [];
 			if (!(c instanceof Node))
-				return f;
+				return i;
 			for (let u of e.keys())
-				u === c || !(u instanceof Node) || c.contains(u) && f.push(u);
-			return f;
+				u === c || !(u instanceof Node) || c.contains(u) && i.push(u);
+			return i;
 		}
-		function E(c, f) {
+		function E(c, i) {
 			for (let u of c) {
-				if (f && h(u).then(E), !e.has(u))
+				if (i && h(u).then(E), !e.has(u))
 					return !1;
 				let l = e.get(u);
-				return l.connected.forEach((C) => C(u)), l.connected.length = 0, l.disconnected.length || e.delete(u), !0;
+				return l.connected.forEach((L) => L(u)), l.connected.length = 0, l.disconnected.length || e.delete(u), !0;
 			}
 		}
-		function v(c, f) {
+		function O(c, i) {
 			for (let u of c) {
-				if (f && h(u).then(v), !e.has(u))
+				if (i && h(u).then(O), !e.has(u))
 					return !1;
 				let l = e.get(u);
-				return l.disconnected.forEach((C) => C(u)), l.connected.length = 0, l.disconnected.length = 0, e.delete(u), !0;
+				return l.disconnected.forEach((L) => L(u)), l.connected.length = 0, l.disconnected.length = 0, e.delete(u), !0;
 			}
 		}
 	}
@@ -237,14 +229,14 @@
 	// index.js
 	[HTMLElement, DocumentFragment].forEach((e) => {
 		let { append: t } = e.prototype;
-		e.prototype.append = function(...r) {
-			return t.apply(this, r), this;
+		e.prototype.append = function(...n) {
+			return t.apply(this, n), this;
 		};
 	});
 	
 	// src/signals-lib.js
 	var d = Symbol.for("Signal");
-	function R(e) {
+	function C(e) {
 		try {
 			return Reflect.has(e, d);
 		} catch {
@@ -255,25 +247,25 @@
 	function g(e, t) {
 		if (typeof e != "function")
 			return H(e, t);
-		if (R(e))
+		if (C(e))
 			return e;
-		let r = H(""), n = () => r(e());
-		return p.set(n, /* @__PURE__ */ new Set([r])), B(n), r;
+		let n = H(""), r = () => n(e());
+		return p.set(r, /* @__PURE__ */ new Set([n])), Z(r), n;
 	}
-	g.action = function(e, t, ...r) {
-		let n = e[d], { actions: o } = n;
+	g.action = function(e, t, ...n) {
+		let r = e[d], { actions: o } = r;
 		if (!o || !Reflect.has(o, t))
 			throw new Error(`'${e}' has no action with name '${t}'!`);
-		if (o[t].apply(n, r), n.skip)
-			return Reflect.deleteProperty(n, "skip");
-		n.listeners.forEach((a) => a(n.value));
+		if (o[t].apply(r, n), r.skip)
+			return Reflect.deleteProperty(r, "skip");
+		r.listeners.forEach((a) => a(r.value));
 	};
-	g.on = function e(t, r, n = {}) {
-		let { signal: o } = n;
+	g.on = function e(t, n, r = {}) {
+		let { signal: o } = r;
 		if (!(o && o.aborted)) {
 			if (Array.isArray(t))
-				return t.forEach((a) => e(a, r, n));
-			D(t, r), o && o.addEventListener("abort", () => F(t, r));
+				return t.forEach((a) => e(a, n, r));
+			P(t, n), o && o.addEventListener("abort", () => F(t, n));
 		}
 	};
 	g.symbols = {
@@ -281,88 +273,86 @@
 		onclear: Symbol.for("Signal.onclear")
 	};
 	g.clear = function(...e) {
-		for (let r of e) {
-			let n = r[d], { onclear: o } = g.symbols;
-			n.actions && n.actions[o] && n.actions[o].call(n), t(r, n), Reflect.deleteProperty(r, d);
+		for (let n of e) {
+			Reflect.deleteProperty(n, "toJSON");
+			let r = n[d], { onclear: o } = g.symbols;
+			r.actions && r.actions[o] && r.actions[o].call(r), t(n, r), Reflect.deleteProperty(n, d);
 		}
-		function t(r, n) {
-			n.listeners.forEach((o) => {
-				if (n.listeners.delete(o), !p.has(o))
+		function t(n, r) {
+			r.listeners.forEach((o) => {
+				if (r.listeners.delete(o), !p.has(o))
 					return;
 				let a = p.get(o);
-				a.delete(r), !(a.size > 1) && (g.clear(...a), p.delete(o));
+				a.delete(n), !(a.size > 1) && (g.clear(...a), p.delete(o));
 			});
 		}
 	};
+	g.el = function(e, t) {
+		let n = document.createComment("<#reactive>"), r = document.createComment("</#reactive>"), o = document.createDocumentFragment();
+		o.append(n, r);
+		let a = (f) => {
+			if (!n.parentNode || !r.parentNode)
+				return F(e, a);
+			let s = t(f);
+			Array.isArray(s) || (s = [s]);
+			let h = n;
+			for (; (h = n.nextSibling) !== r; )
+				h.remove();
+			n.after(...s);
+		};
+		return P(e, a), a(e()), o;
+	};
 	var z = {
-		isReactiveAtrribute(e, t) {
-			return R(e);
-		},
 		isTextContent(e) {
-			return m(e) === "string" || R(e) && m(V(e)) === "string";
+			return m(e) === "string" || C(e) && m(V(e)) === "string";
 		},
-		processReactiveAttribute(e, t, r, n) {
-			return D(r, (o) => n([t, o])), r();
-		},
-		reactiveElement(e, t) {
-			let r = document.createComment("<#reactive>"), n = document.createComment("</#reactive>"), o = document.createDocumentFragment();
-			o.append(r, n);
-			let a = (i) => {
-				if (!r.parentNode || !n.parentNode)
-					return F(e, a);
-				let s = t(i);
-				Array.isArray(s) || (s = [s]);
-				let h = r;
-				for (; (h = r.nextSibling) !== n; )
-					h.remove();
-				r.after(...s);
-			};
-			return D(e, a), a(e()), o;
+		processReactiveAttribute(e, t, n, r) {
+			return C(n) ? (P(n, (o) => r([t, o])), n()) : n;
 		}
 	};
 	function H(e, t) {
-		let r = (...n) => n.length ? U(r, n[0]) : J(r);
-		return Z(r, e, t);
+		let n = (...r) => r.length ? U(n, r[0]) : G(n);
+		return I(n, e, t);
 	}
-	var I = Object.assign(/* @__PURE__ */ Object.create(null), {
+	var W = Object.assign(/* @__PURE__ */ Object.create(null), {
 		stopPropagation() {
 			this.skip = !0;
 		}
 	});
-	function Z(e, t, r) {
-		return m(r) !== "[object Object]" && (r = {}), e[d] = {
+	function I(e, t, n) {
+		return m(n) !== "[object Object]" && (n = {}), e[d] = {
 			value: t,
-			actions: r,
+			actions: n,
 			listeners: /* @__PURE__ */ new Set()
-		}, Object.setPrototypeOf(e[d], I), e;
+		}, e.toJSON = () => e(), Object.setPrototypeOf(e[d], W), e;
 	}
-	var S = [];
-	function B(e) {
+	var R = [];
+	function Z(e) {
 		let t = function() {
-			S.push(t), e(), S.pop();
+			R.push(t), e(), R.pop();
 		};
 		p.has(e) && (p.set(t, p.get(e)), p.delete(e)), t();
 	}
-	function G() {
-		return S[S.length - 1];
+	function B() {
+		return R[R.length - 1];
 	}
-	function J(e) {
+	function G(e) {
 		if (!e[d])
 			return;
-		let { value: t, listeners: r } = e[d], n = G();
-		return n && r.add(n), p.has(n) && p.get(n).add(e), t;
+		let { value: t, listeners: n } = e[d], r = B();
+		return r && n.add(r), p.has(r) && p.get(r).add(e), t;
 	}
 	function U(e, t) {
 		if (!e[d])
 			return;
-		let r = e[d];
-		if (r.value !== t)
-			return r.value = t, r.listeners.forEach((n) => n(t)), t;
+		let n = e[d];
+		if (n.value !== t)
+			return n.value = t, n.listeners.forEach((r) => r(t)), t;
 	}
 	function V(e) {
 		return e[d].value;
 	}
-	function D(e, t) {
+	function P(e, t) {
 		return e[d].listeners.add(t);
 	}
 	function F(e, t) {
@@ -370,19 +360,19 @@
 	}
 	
 	// src/signals.js
-	L(z);
+	j(z);
 	
 	globalThis.dde= {
 		S: g,
-		assign: A,
+		assign: y,
 		classListDeclarative: $,
 		createElement: te,
 		el: te,
 		empty: ne,
-		isSignal: R,
+		isSignal: C,
 		namespace: ee,
 		on: M,
-		registerReactivity: L
+		registerReactivity: j
 	};
 	
 })();
\ No newline at end of file
diff --git a/dist/dde.js b/dist/dde.js
index 21782f2..f748edc 100644
--- a/dist/dde.js
+++ b/dist/dde.js
@@ -8,99 +8,91 @@
 	
 	// src/signals-common.js
 	var p = {
-		isReactiveAtrribute(e, t) {
-			return !1;
-		},
 		isTextContent(e) {
 			return N(e) !== "[object Object]";
 		},
 		processReactiveAttribute(e, t, r, n) {
-			return !1;
-		},
-		reactiveElement(e, ...t) {
-			return null;
+			return r;
 		}
 	};
-	function A(e, t = !0) {
+	function D(e, t = !0) {
 		return t ? Object.assign(p, e) : (Object.setPrototypeOf(e, p), e);
 	}
-	function O(e) {
+	function w(e) {
 		return p.isPrototypeOf(e) && e !== p ? e : p;
 	}
 	
 	// src/dom.js
-	var x = "html";
+	var E = "html";
 	function z(e) {
-		return x = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
+		return E = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
 			append(t) {
-				return x = "html", t;
+				return E = "html", t;
 			}
 		};
 	}
 	function F(e, t, ...r) {
-		let n = O(this), f;
-		if (e === "<>") {
-			if (n.isReactiveAtrribute(t))
-				return n.reactiveElement(t, ...r);
-			f = document.createDocumentFragment();
-		}
+		let n = w(this), i;
 		switch (n.isTextContent(t) && (t = { textContent: t }), !0) {
 			case typeof e == "function":
-				f = e(t || void 0);
+				i = e(t || void 0);
 				break;
 			case e === "#text":
-				f = w(document.createTextNode(""), t);
+				i = x(document.createTextNode(""), t);
 				break;
-			case x !== "html":
-				f = w(document.createElementNS(x, e), t);
+			case e === "<>":
+				i = x(document.createDocumentFragment(), t);
 				break;
-			case !f:
-				f = w(document.createElement(e), t);
+			case E !== "html":
+				i = x(document.createElementNS(E, e), t);
+				break;
+			case !i:
+				i = x(document.createElement(e), t);
 		}
-		return r.forEach((d) => d(f)), f;
+		return r.forEach((d) => d(i)), i;
 	}
 	var h = new Map(JSON.parse('[["#text,textContent",true],["HTMLElement,textContent",true],["HTMLElement,className",true]]'));
-	function w(e, ...t) {
-		let r = O(this);
+	function x(e, ...t) {
+		let r = w(this);
 		if (!t.length)
 			return e;
-		let n = e instanceof SVGElement, f = (n ? M : j).bind(null, e, "Attribute");
-		return Object.entries(Object.assign({}, ...t)).forEach(function d([i, u]) {
-			r.isReactiveAtrribute(u, i) && (u = r.processReactiveAttribute(e, i, u, d));
-			let [l] = i;
+		let n = e instanceof SVGElement, i = (n ? M : j).bind(null, e, "Attribute");
+		return Object.entries(Object.assign({}, ...t)).forEach(function d([u, f]) {
+			f = r.processReactiveAttribute(e, u, f, d);
+			let [l] = u;
 			if (l === "=")
-				return f(i.slice(1), u);
+				return i(u.slice(1), f);
 			if (l === ".")
-				return C(e, i.slice(1), u);
-			if (typeof u == "object")
-				switch (i) {
+				return C(e, u.slice(1), f);
+			if (typeof f == "object")
+				switch (u) {
 					case "style":
-						return m(u, j.bind(null, e.style, "Property"));
+						return m(f, j.bind(null, e.style, "Property"));
 					case "dataset":
-						return m(u, C.bind(null, e.dataset));
+						return m(f, C.bind(null, e.dataset));
 					case "ariaset":
-						return m(u, (g, b) => f("aria-" + g, b));
+						return m(f, (g, b) => i("aria-" + g, b));
 					case "classList":
-						return T(e, u);
+						return R(e, f);
 					default:
-						return Reflect.set(e, i, u);
+						return Reflect.set(e, u, f);
 				}
-			if (/(aria|data)([A-Z])/.test(i))
-				return i = i.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), f(i, u);
-			switch (i) {
+			if (/(aria|data)([A-Z])/.test(u))
+				return u = u.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), i(u, f);
+			switch (u) {
 				case "href":
-					return f(i, u);
+					return i(u, f);
 				case "xlink:href":
-					return f(i, u, "http://www.w3.org/1999/xlink");
+					return i(u, f, "http://www.w3.org/1999/xlink");
 				case "textContent":
 					if (!n)
 						break;
-					return e.appendChild(document.createTextNode(u));
+					return e.appendChild(document.createTextNode(f));
 			}
-			return D(e, i) ? C(e, i, u) : f(i, u);
+			return A(e, u) ? C(e, u, f) : i(u, f);
 		}), e;
 	}
-	function T(e, t) {
+	function R(e, t) {
 		return typeof t != "object" || m(
 			t,
 			(r, n) => e.classList.toggle(r, n === -1 ? void 0 : !!n)
@@ -109,21 +101,21 @@
 	function I(e) {
 		return Array.from(e.children).forEach((t) => t.remove()), e;
 	}
-	function D(e, t) {
+	function A(e, t) {
 		let r = "HTMLElement," + t;
 		if (e instanceof HTMLElement && h.has(r))
 			return h.get(r);
 		let n = e.nodeName + "," + t;
 		if (h.has(n))
 			return h.get(n);
-		let [f, d, i] = R(e, t), u = !L(f.set);
-		return (!u || d) && h.set(i === HTMLElement.prototype ? r : n, u), u;
+		let [i, d, u] = y(e, t), f = !L(i.set);
+		return (!f || d) && h.set(u === HTMLElement.prototype ? r : n, f), f;
 	}
-	function R(e, t, r = 0) {
+	function y(e, t, r = 0) {
 		if (e = Object.getPrototypeOf(e), !e)
 			return [{}, r, e];
 		let n = Object.getOwnPropertyDescriptor(e, t);
-		return n ? [n, r, e] : R(e, t, r + 1);
+		return n ? [n, r, e] : y(e, t, r + 1);
 	}
 	function m(e, t) {
 		return Object.entries(e).forEach(([r, n]) => t(r, n));
@@ -134,26 +126,26 @@
 	function j(e, t, r, n) {
 		return e[(L(n) ? "remove" : "set") + t](r, n);
 	}
-	function M(e, t, r, n, f = null) {
-		return e[(L(n) ? "remove" : "set") + t + "NS"](f, r, n);
+	function M(e, t, r, n, i = null) {
+		return e[(L(n) ? "remove" : "set") + t + "NS"](i, r, n);
 	}
 	function C(e, t, r) {
 		return Reflect.set(e, t, r);
 	}
 	
 	// src/events.js
-	function y(e, t, r) {
+	function T(e, t, r) {
 		return (n) => (n.addEventListener(e, t, r), n);
 	}
-	var E = _();
-	y.connected = function(e, t) {
+	var O = _();
+	T.connected = function(e, t) {
 		return function(n) {
-			E.onConnected(n, e), t && t.signal && t.signal.addEventListener("abort", () => E.offConnected(n, e));
+			O.onConnected(n, e), t && t.signal && t.signal.addEventListener("abort", () => O.offConnected(n, e));
 		};
 	};
-	y.disconnected = function(e, t) {
+	T.disconnected = function(e, t) {
 		return function(n) {
-			E.onDisconnected(n, e), t && t.signal && t.signal.addEventListener("abort", () => E.offDisconnected(n, e));
+			O.onDisconnected(n, e), t && t.signal && t.signal.addEventListener("abort", () => O.offDisconnected(n, e));
 		};
 	};
 	function _() {
@@ -161,15 +153,15 @@
 			for (let c of o)
 				if (c.type === "childList") {
 					if (g(c.addedNodes, !0)) {
-						i();
+						u();
 						continue;
 					}
-					b(c.removedNodes, !0) && i();
+					b(c.removedNodes, !0) && u();
 				}
 		});
 		return {
 			onConnected(o, c) {
-				d(), f(o).connected.push(c);
+				d(), i(o).connected.push(c);
 			},
 			offConnected(o, c) {
 				if (!e.has(o))
@@ -178,7 +170,7 @@
 				a.splice(a.indexOf(c), 1), n(o, s);
 			},
 			onDisconnected(o, c) {
-				d(), f(o).disconnected.push(c);
+				d(), i(o).disconnected.push(c);
 			},
 			offDisconnected(o, c) {
 				if (!e.has(o))
@@ -188,9 +180,9 @@
 			}
 		};
 		function n(o, c) {
-			c.connected.length || c.disconnect.length || (e.delete(o), i());
+			c.connected.length || c.disconnect.length || (e.delete(o), u());
 		}
-		function f(o) {
+		function i(o) {
 			if (e.has(o))
 				return e.get(o);
 			let c = { connected: [], disconnected: [] };
@@ -199,16 +191,16 @@
 		function d() {
 			t || (t = !0, r.observe(document.body, { childList: !0, subtree: !0 }));
 		}
-		function i() {
+		function u() {
 			!t || e.size || (t = !1, r.disconnect());
 		}
-		function u() {
+		function f() {
 			return new Promise(function(o) {
 				(requestIdleCallback || requestAnimationFrame)(o);
 			});
 		}
 		async function l(o) {
-			e.size > 30 && await u();
+			e.size > 30 && await f();
 			let c = [];
 			if (!(o instanceof Node))
 				return c;
@@ -243,14 +235,14 @@
 	});
 	
 	globalThis.dde= {
-		assign: w,
-		classListDeclarative: T,
+		assign: x,
+		classListDeclarative: R,
 		createElement: F,
 		el: F,
 		empty: I,
 		namespace: z,
-		on: y,
-		registerReactivity: A
+		on: T,
+		registerReactivity: D
 	};
 	
 })();
\ No newline at end of file
diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js
index 485656d..5af4c59 100644
--- a/dist/esm-with-signals.js
+++ b/dist/esm-with-signals.js
@@ -6,199 +6,191 @@ function m(e) {
 
 // src/signals-common.js
 var b = {
-	isReactiveAtrribute(e, t) {
-		return !1;
-	},
 	isTextContent(e) {
 		return m(e) !== "[object Object]";
 	},
-	processReactiveAttribute(e, t, r, n) {
-		return !1;
-	},
-	reactiveElement(e, ...t) {
-		return null;
+	processReactiveAttribute(e, t, n, r) {
+		return n;
 	}
 };
-function L(e, t = !0) {
+function j(e, t = !0) {
 	return t ? Object.assign(b, e) : (Object.setPrototypeOf(e, b), e);
 }
-function j(e) {
+function N(e) {
 	return b.isPrototypeOf(e) && e !== b ? e : b;
 }
 
 // src/dom.js
-var w = "html";
+var v = "html";
 function ee(e) {
-	return w = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
+	return v = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
 		append(t) {
-			return w = "html", t;
+			return v = "html", t;
 		}
 	};
 }
-function te(e, t, ...r) {
-	let n = j(this), o;
-	if (e === "<>") {
-		if (n.isReactiveAtrribute(t))
-			return n.reactiveElement(t, ...r);
-		o = document.createDocumentFragment();
-	}
-	switch (n.isTextContent(t) && (t = { textContent: t }), !0) {
+function te(e, t, ...n) {
+	let r = N(this), o;
+	switch (r.isTextContent(t) && (t = { textContent: t }), !0) {
 		case typeof e == "function":
 			o = e(t || void 0);
 			break;
 		case e === "#text":
-			o = A(document.createTextNode(""), t);
+			o = y(document.createTextNode(""), t);
 			break;
-		case w !== "html":
-			o = A(document.createElementNS(w, e), t);
+		case e === "<>":
+			o = y(document.createDocumentFragment(), t);
+			break;
+		case v !== "html":
+			o = y(document.createElementNS(v, e), t);
 			break;
 		case !o:
-			o = A(document.createElement(e), t);
+			o = y(document.createElement(e), t);
 	}
-	return r.forEach((a) => a(o)), o;
+	return n.forEach((a) => a(o)), o;
 }
 var x = new Map(JSON.parse('[["#text,textContent",true],["HTMLElement,textContent",true],["HTMLElement,className",true]]'));
-function A(e, ...t) {
-	let r = j(this);
+function y(e, ...t) {
+	let n = N(this);
 	if (!t.length)
 		return e;
-	let n = e instanceof SVGElement, o = (n ? q : P).bind(null, e, "Attribute");
-	return Object.entries(Object.assign({}, ...t)).forEach(function a([i, s]) {
-		r.isReactiveAtrribute(s, i) && (s = r.processReactiveAttribute(e, i, s, a));
-		let [h] = i;
+	let r = e instanceof SVGElement, o = (r ? q : D).bind(null, e, "Attribute");
+	return Object.entries(Object.assign({}, ...t)).forEach(function a([f, s]) {
+		s = n.processReactiveAttribute(e, f, s, a);
+		let [h] = f;
 		if (h === "=")
-			return o(i.slice(1), s);
+			return o(f.slice(1), s);
 		if (h === ".")
-			return N(e, i.slice(1), s);
+			return _(e, f.slice(1), s);
 		if (typeof s == "object")
-			switch (i) {
+			switch (f) {
 				case "style":
-					return y(s, P.bind(null, e.style, "Property"));
+					return w(s, D.bind(null, e.style, "Property"));
 				case "dataset":
-					return y(s, N.bind(null, e.dataset));
+					return w(s, _.bind(null, e.dataset));
 				case "ariaset":
-					return y(s, (E, v) => o("aria-" + E, v));
+					return w(s, (E, O) => o("aria-" + E, O));
 				case "classList":
 					return $(e, s);
 				default:
-					return Reflect.set(e, i, s);
+					return Reflect.set(e, f, s);
 			}
-		if (/(aria|data)([A-Z])/.test(i))
-			return i = i.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), o(i, s);
-		switch (i) {
+		if (/(aria|data)([A-Z])/.test(f))
+			return f = f.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), o(f, s);
+		switch (f) {
 			case "href":
-				return o(i, s);
+				return o(f, s);
 			case "xlink:href":
-				return o(i, s, "http://www.w3.org/1999/xlink");
+				return o(f, s, "http://www.w3.org/1999/xlink");
 			case "textContent":
-				if (!n)
+				if (!r)
 					break;
 				return e.appendChild(document.createTextNode(s));
 		}
-		return k(e, i) ? N(e, i, s) : o(i, s);
+		return k(e, f) ? _(e, f, s) : o(f, s);
 	}), e;
 }
 function $(e, t) {
-	return typeof t != "object" || y(
+	return typeof t != "object" || w(
 		t,
-		(r, n) => e.classList.toggle(r, n === -1 ? void 0 : !!n)
+		(n, r) => e.classList.toggle(n, r === -1 ? void 0 : !!r)
 	), e;
 }
 function ne(e) {
 	return Array.from(e.children).forEach((t) => t.remove()), e;
 }
 function k(e, t) {
-	let r = "HTMLElement," + t;
-	if (e instanceof HTMLElement && x.has(r))
-		return x.get(r);
-	let n = e.nodeName + "," + t;
-	if (x.has(n))
+	let n = "HTMLElement," + t;
+	if (e instanceof HTMLElement && x.has(n))
 		return x.get(n);
-	let [o, a, i] = T(e, t), s = !_(o.set);
-	return (!s || a) && x.set(i === HTMLElement.prototype ? r : n, s), s;
+	let r = e.nodeName + "," + t;
+	if (x.has(r))
+		return x.get(r);
+	let [o, a, f] = T(e, t), s = !A(o.set);
+	return (!s || a) && x.set(f === HTMLElement.prototype ? n : r, s), s;
 }
-function T(e, t, r = 0) {
+function T(e, t, n = 0) {
 	if (e = Object.getPrototypeOf(e), !e)
-		return [{}, r, e];
-	let n = Object.getOwnPropertyDescriptor(e, t);
-	return n ? [n, r, e] : T(e, t, r + 1);
+		return [{}, n, e];
+	let r = Object.getOwnPropertyDescriptor(e, t);
+	return r ? [r, n, e] : T(e, t, n + 1);
 }
-function y(e, t) {
-	return Object.entries(e).forEach(([r, n]) => t(r, n));
+function w(e, t) {
+	return Object.entries(e).forEach(([n, r]) => t(n, r));
 }
-function _(e) {
+function A(e) {
 	return typeof e > "u";
 }
-function P(e, t, r, n) {
-	return e[(_(n) ? "remove" : "set") + t](r, n);
+function D(e, t, n, r) {
+	return e[(A(r) ? "remove" : "set") + t](n, r);
 }
-function q(e, t, r, n, o = null) {
-	return e[(_(n) ? "remove" : "set") + t + "NS"](o, r, n);
+function q(e, t, n, r, o = null) {
+	return e[(A(r) ? "remove" : "set") + t + "NS"](o, n, r);
 }
-function N(e, t, r) {
-	return Reflect.set(e, t, r);
+function _(e, t, n) {
+	return Reflect.set(e, t, n);
 }
 
 // src/events.js
-function M(e, t, r) {
-	return (n) => (n.addEventListener(e, t, r), n);
+function M(e, t, n) {
+	return (r) => (r.addEventListener(e, t, n), r);
 }
-var O = W();
+var S = J();
 M.connected = function(e, t) {
-	return function(n) {
-		O.onConnected(n, e), t && t.signal && t.signal.addEventListener("abort", () => O.offConnected(n, e));
+	return function(r) {
+		S.onConnected(r, e), t && t.signal && t.signal.addEventListener("abort", () => S.offConnected(r, e));
 	};
 };
 M.disconnected = function(e, t) {
-	return function(n) {
-		O.onDisconnected(n, e), t && t.signal && t.signal.addEventListener("abort", () => O.offDisconnected(n, e));
+	return function(r) {
+		S.onDisconnected(r, e), t && t.signal && t.signal.addEventListener("abort", () => S.offDisconnected(r, e));
 	};
 };
-function W() {
-	let e = /* @__PURE__ */ new Map(), t = !1, r = new MutationObserver(function(c) {
-		for (let f of c)
-			if (f.type === "childList") {
-				if (E(f.addedNodes, !0)) {
-					i();
+function J() {
+	let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) {
+		for (let i of c)
+			if (i.type === "childList") {
+				if (E(i.addedNodes, !0)) {
+					f();
 					continue;
 				}
-				v(f.removedNodes, !0) && i();
+				O(i.removedNodes, !0) && f();
 			}
 	});
 	return {
-		onConnected(c, f) {
-			a(), o(c).connected.push(f);
+		onConnected(c, i) {
+			a(), o(c).connected.push(i);
 		},
-		offConnected(c, f) {
+		offConnected(c, i) {
 			if (!e.has(c))
 				return;
 			let u = e.get(c), l = u.connected;
-			l.splice(l.indexOf(f), 1), n(c, u);
+			l.splice(l.indexOf(i), 1), r(c, u);
 		},
-		onDisconnected(c, f) {
-			a(), o(c).disconnected.push(f);
+		onDisconnected(c, i) {
+			a(), o(c).disconnected.push(i);
 		},
-		offDisconnected(c, f) {
+		offDisconnected(c, i) {
 			if (!e.has(c))
 				return;
 			let u = e.get(c), l = u.disconnected;
-			l.splice(l.indexOf(f), 1), n(c, u);
+			l.splice(l.indexOf(i), 1), r(c, u);
 		}
 	};
-	function n(c, f) {
-		f.connected.length || f.disconnect.length || (e.delete(c), i());
+	function r(c, i) {
+		i.connected.length || i.disconnect.length || (e.delete(c), f());
 	}
 	function o(c) {
 		if (e.has(c))
 			return e.get(c);
-		let f = { connected: [], disconnected: [] };
-		return e.set(c, f), f;
+		let i = { connected: [], disconnected: [] };
+		return e.set(c, i), i;
 	}
 	function a() {
-		t || (t = !0, r.observe(document.body, { childList: !0, subtree: !0 }));
+		t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
 	}
-	function i() {
-		!t || e.size || (t = !1, r.disconnect());
+	function f() {
+		!t || e.size || (t = !1, n.disconnect());
 	}
 	function s() {
 		return new Promise(function(c) {
@@ -207,27 +199,27 @@ function W() {
 	}
 	async function h(c) {
 		e.size > 30 && await s();
-		let f = [];
+		let i = [];
 		if (!(c instanceof Node))
-			return f;
+			return i;
 		for (let u of e.keys())
-			u === c || !(u instanceof Node) || c.contains(u) && f.push(u);
-		return f;
+			u === c || !(u instanceof Node) || c.contains(u) && i.push(u);
+		return i;
 	}
-	function E(c, f) {
+	function E(c, i) {
 		for (let u of c) {
-			if (f && h(u).then(E), !e.has(u))
+			if (i && h(u).then(E), !e.has(u))
 				return !1;
 			let l = e.get(u);
-			return l.connected.forEach((C) => C(u)), l.connected.length = 0, l.disconnected.length || e.delete(u), !0;
+			return l.connected.forEach((L) => L(u)), l.connected.length = 0, l.disconnected.length || e.delete(u), !0;
 		}
 	}
-	function v(c, f) {
+	function O(c, i) {
 		for (let u of c) {
-			if (f && h(u).then(v), !e.has(u))
+			if (i && h(u).then(O), !e.has(u))
 				return !1;
 			let l = e.get(u);
-			return l.disconnected.forEach((C) => C(u)), l.connected.length = 0, l.disconnected.length = 0, e.delete(u), !0;
+			return l.disconnected.forEach((L) => L(u)), l.connected.length = 0, l.disconnected.length = 0, e.delete(u), !0;
 		}
 	}
 }
@@ -235,14 +227,14 @@ function W() {
 // index.js
 [HTMLElement, DocumentFragment].forEach((e) => {
 	let { append: t } = e.prototype;
-	e.prototype.append = function(...r) {
-		return t.apply(this, r), this;
+	e.prototype.append = function(...n) {
+		return t.apply(this, n), this;
 	};
 });
 
 // src/signals-lib.js
 var d = Symbol.for("Signal");
-function R(e) {
+function C(e) {
 	try {
 		return Reflect.has(e, d);
 	} catch {
@@ -253,25 +245,25 @@ var p = /* @__PURE__ */ new WeakMap();
 function g(e, t) {
 	if (typeof e != "function")
 		return H(e, t);
-	if (R(e))
+	if (C(e))
 		return e;
-	let r = H(""), n = () => r(e());
-	return p.set(n, /* @__PURE__ */ new Set([r])), B(n), r;
+	let n = H(""), r = () => n(e());
+	return p.set(r, /* @__PURE__ */ new Set([n])), Z(r), n;
 }
-g.action = function(e, t, ...r) {
-	let n = e[d], { actions: o } = n;
+g.action = function(e, t, ...n) {
+	let r = e[d], { actions: o } = r;
 	if (!o || !Reflect.has(o, t))
 		throw new Error(`'${e}' has no action with name '${t}'!`);
-	if (o[t].apply(n, r), n.skip)
-		return Reflect.deleteProperty(n, "skip");
-	n.listeners.forEach((a) => a(n.value));
+	if (o[t].apply(r, n), r.skip)
+		return Reflect.deleteProperty(r, "skip");
+	r.listeners.forEach((a) => a(r.value));
 };
-g.on = function e(t, r, n = {}) {
-	let { signal: o } = n;
+g.on = function e(t, n, r = {}) {
+	let { signal: o } = r;
 	if (!(o && o.aborted)) {
 		if (Array.isArray(t))
-			return t.forEach((a) => e(a, r, n));
-		D(t, r), o && o.addEventListener("abort", () => F(t, r));
+			return t.forEach((a) => e(a, n, r));
+		P(t, n), o && o.addEventListener("abort", () => F(t, n));
 	}
 };
 g.symbols = {
@@ -279,88 +271,86 @@ g.symbols = {
 	onclear: Symbol.for("Signal.onclear")
 };
 g.clear = function(...e) {
-	for (let r of e) {
-		let n = r[d], { onclear: o } = g.symbols;
-		n.actions && n.actions[o] && n.actions[o].call(n), t(r, n), Reflect.deleteProperty(r, d);
+	for (let n of e) {
+		Reflect.deleteProperty(n, "toJSON");
+		let r = n[d], { onclear: o } = g.symbols;
+		r.actions && r.actions[o] && r.actions[o].call(r), t(n, r), Reflect.deleteProperty(n, d);
 	}
-	function t(r, n) {
-		n.listeners.forEach((o) => {
-			if (n.listeners.delete(o), !p.has(o))
+	function t(n, r) {
+		r.listeners.forEach((o) => {
+			if (r.listeners.delete(o), !p.has(o))
 				return;
 			let a = p.get(o);
-			a.delete(r), !(a.size > 1) && (g.clear(...a), p.delete(o));
+			a.delete(n), !(a.size > 1) && (g.clear(...a), p.delete(o));
 		});
 	}
 };
+g.el = function(e, t) {
+	let n = document.createComment("<#reactive>"), r = document.createComment("</#reactive>"), o = document.createDocumentFragment();
+	o.append(n, r);
+	let a = (f) => {
+		if (!n.parentNode || !r.parentNode)
+			return F(e, a);
+		let s = t(f);
+		Array.isArray(s) || (s = [s]);
+		let h = n;
+		for (; (h = n.nextSibling) !== r; )
+			h.remove();
+		n.after(...s);
+	};
+	return P(e, a), a(e()), o;
+};
 var z = {
-	isReactiveAtrribute(e, t) {
-		return R(e);
-	},
 	isTextContent(e) {
-		return m(e) === "string" || R(e) && m(V(e)) === "string";
+		return m(e) === "string" || C(e) && m(V(e)) === "string";
 	},
-	processReactiveAttribute(e, t, r, n) {
-		return D(r, (o) => n([t, o])), r();
-	},
-	reactiveElement(e, t) {
-		let r = document.createComment("<#reactive>"), n = document.createComment("</#reactive>"), o = document.createDocumentFragment();
-		o.append(r, n);
-		let a = (i) => {
-			if (!r.parentNode || !n.parentNode)
-				return F(e, a);
-			let s = t(i);
-			Array.isArray(s) || (s = [s]);
-			let h = r;
-			for (; (h = r.nextSibling) !== n; )
-				h.remove();
-			r.after(...s);
-		};
-		return D(e, a), a(e()), o;
+	processReactiveAttribute(e, t, n, r) {
+		return C(n) ? (P(n, (o) => r([t, o])), n()) : n;
 	}
 };
 function H(e, t) {
-	let r = (...n) => n.length ? U(r, n[0]) : J(r);
-	return Z(r, e, t);
+	let n = (...r) => r.length ? U(n, r[0]) : G(n);
+	return I(n, e, t);
 }
-var I = Object.assign(/* @__PURE__ */ Object.create(null), {
+var W = Object.assign(/* @__PURE__ */ Object.create(null), {
 	stopPropagation() {
 		this.skip = !0;
 	}
 });
-function Z(e, t, r) {
-	return m(r) !== "[object Object]" && (r = {}), e[d] = {
+function I(e, t, n) {
+	return m(n) !== "[object Object]" && (n = {}), e[d] = {
 		value: t,
-		actions: r,
+		actions: n,
 		listeners: /* @__PURE__ */ new Set()
-	}, Object.setPrototypeOf(e[d], I), e;
+	}, e.toJSON = () => e(), Object.setPrototypeOf(e[d], W), e;
 }
-var S = [];
-function B(e) {
+var R = [];
+function Z(e) {
 	let t = function() {
-		S.push(t), e(), S.pop();
+		R.push(t), e(), R.pop();
 	};
 	p.has(e) && (p.set(t, p.get(e)), p.delete(e)), t();
 }
-function G() {
-	return S[S.length - 1];
+function B() {
+	return R[R.length - 1];
 }
-function J(e) {
+function G(e) {
 	if (!e[d])
 		return;
-	let { value: t, listeners: r } = e[d], n = G();
-	return n && r.add(n), p.has(n) && p.get(n).add(e), t;
+	let { value: t, listeners: n } = e[d], r = B();
+	return r && n.add(r), p.has(r) && p.get(r).add(e), t;
 }
 function U(e, t) {
 	if (!e[d])
 		return;
-	let r = e[d];
-	if (r.value !== t)
-		return r.value = t, r.listeners.forEach((n) => n(t)), t;
+	let n = e[d];
+	if (n.value !== t)
+		return n.value = t, n.listeners.forEach((r) => r(t)), t;
 }
 function V(e) {
 	return e[d].value;
 }
-function D(e, t) {
+function P(e, t) {
 	return e[d].listeners.add(t);
 }
 function F(e, t) {
@@ -368,16 +358,16 @@ function F(e, t) {
 }
 
 // src/signals.js
-L(z);
+j(z);
 export {
 	g as S,
-	A as assign,
+	y as assign,
 	$ as classListDeclarative,
 	te as createElement,
 	te as el,
 	ne as empty,
-	R as isSignal,
+	C as isSignal,
 	ee as namespace,
 	M as on,
-	L as registerReactivity
+	j as registerReactivity
 };
diff --git a/dist/esm.js b/dist/esm.js
index 70313c4..e4f1b4a 100644
--- a/dist/esm.js
+++ b/dist/esm.js
@@ -6,99 +6,91 @@ function N(e) {
 
 // src/signals-common.js
 var p = {
-	isReactiveAtrribute(e, t) {
-		return !1;
-	},
 	isTextContent(e) {
 		return N(e) !== "[object Object]";
 	},
 	processReactiveAttribute(e, t, r, n) {
-		return !1;
-	},
-	reactiveElement(e, ...t) {
-		return null;
+		return r;
 	}
 };
-function A(e, t = !0) {
+function D(e, t = !0) {
 	return t ? Object.assign(p, e) : (Object.setPrototypeOf(e, p), e);
 }
-function O(e) {
+function w(e) {
 	return p.isPrototypeOf(e) && e !== p ? e : p;
 }
 
 // src/dom.js
-var x = "html";
+var E = "html";
 function z(e) {
-	return x = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
+	return E = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
 		append(t) {
-			return x = "html", t;
+			return E = "html", t;
 		}
 	};
 }
 function F(e, t, ...r) {
-	let n = O(this), f;
-	if (e === "<>") {
-		if (n.isReactiveAtrribute(t))
-			return n.reactiveElement(t, ...r);
-		f = document.createDocumentFragment();
-	}
+	let n = w(this), i;
 	switch (n.isTextContent(t) && (t = { textContent: t }), !0) {
 		case typeof e == "function":
-			f = e(t || void 0);
+			i = e(t || void 0);
 			break;
 		case e === "#text":
-			f = w(document.createTextNode(""), t);
+			i = x(document.createTextNode(""), t);
 			break;
-		case x !== "html":
-			f = w(document.createElementNS(x, e), t);
+		case e === "<>":
+			i = x(document.createDocumentFragment(), t);
 			break;
-		case !f:
-			f = w(document.createElement(e), t);
+		case E !== "html":
+			i = x(document.createElementNS(E, e), t);
+			break;
+		case !i:
+			i = x(document.createElement(e), t);
 	}
-	return r.forEach((d) => d(f)), f;
+	return r.forEach((d) => d(i)), i;
 }
 var h = new Map(JSON.parse('[["#text,textContent",true],["HTMLElement,textContent",true],["HTMLElement,className",true]]'));
-function w(e, ...t) {
-	let r = O(this);
+function x(e, ...t) {
+	let r = w(this);
 	if (!t.length)
 		return e;
-	let n = e instanceof SVGElement, f = (n ? M : j).bind(null, e, "Attribute");
-	return Object.entries(Object.assign({}, ...t)).forEach(function d([i, u]) {
-		r.isReactiveAtrribute(u, i) && (u = r.processReactiveAttribute(e, i, u, d));
-		let [l] = i;
+	let n = e instanceof SVGElement, i = (n ? M : j).bind(null, e, "Attribute");
+	return Object.entries(Object.assign({}, ...t)).forEach(function d([u, f]) {
+		f = r.processReactiveAttribute(e, u, f, d);
+		let [l] = u;
 		if (l === "=")
-			return f(i.slice(1), u);
+			return i(u.slice(1), f);
 		if (l === ".")
-			return C(e, i.slice(1), u);
-		if (typeof u == "object")
-			switch (i) {
+			return C(e, u.slice(1), f);
+		if (typeof f == "object")
+			switch (u) {
 				case "style":
-					return m(u, j.bind(null, e.style, "Property"));
+					return m(f, j.bind(null, e.style, "Property"));
 				case "dataset":
-					return m(u, C.bind(null, e.dataset));
+					return m(f, C.bind(null, e.dataset));
 				case "ariaset":
-					return m(u, (g, b) => f("aria-" + g, b));
+					return m(f, (g, b) => i("aria-" + g, b));
 				case "classList":
-					return T(e, u);
+					return R(e, f);
 				default:
-					return Reflect.set(e, i, u);
+					return Reflect.set(e, u, f);
 			}
-		if (/(aria|data)([A-Z])/.test(i))
-			return i = i.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), f(i, u);
-		switch (i) {
+		if (/(aria|data)([A-Z])/.test(u))
+			return u = u.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), i(u, f);
+		switch (u) {
 			case "href":
-				return f(i, u);
+				return i(u, f);
 			case "xlink:href":
-				return f(i, u, "http://www.w3.org/1999/xlink");
+				return i(u, f, "http://www.w3.org/1999/xlink");
 			case "textContent":
 				if (!n)
 					break;
-				return e.appendChild(document.createTextNode(u));
+				return e.appendChild(document.createTextNode(f));
 		}
-		return D(e, i) ? C(e, i, u) : f(i, u);
+		return A(e, u) ? C(e, u, f) : i(u, f);
 	}), e;
 }
-function T(e, t) {
+function R(e, t) {
 	return typeof t != "object" || m(
 		t,
 		(r, n) => e.classList.toggle(r, n === -1 ? void 0 : !!n)
@@ -107,21 +99,21 @@ function T(e, t) {
 function I(e) {
 	return Array.from(e.children).forEach((t) => t.remove()), e;
 }
-function D(e, t) {
+function A(e, t) {
 	let r = "HTMLElement," + t;
 	if (e instanceof HTMLElement && h.has(r))
 		return h.get(r);
 	let n = e.nodeName + "," + t;
 	if (h.has(n))
 		return h.get(n);
-	let [f, d, i] = R(e, t), u = !L(f.set);
-	return (!u || d) && h.set(i === HTMLElement.prototype ? r : n, u), u;
+	let [i, d, u] = y(e, t), f = !L(i.set);
+	return (!f || d) && h.set(u === HTMLElement.prototype ? r : n, f), f;
 }
-function R(e, t, r = 0) {
+function y(e, t, r = 0) {
 	if (e = Object.getPrototypeOf(e), !e)
 		return [{}, r, e];
 	let n = Object.getOwnPropertyDescriptor(e, t);
-	return n ? [n, r, e] : R(e, t, r + 1);
+	return n ? [n, r, e] : y(e, t, r + 1);
 }
 function m(e, t) {
 	return Object.entries(e).forEach(([r, n]) => t(r, n));
@@ -132,26 +124,26 @@ function L(e) {
 function j(e, t, r, n) {
 	return e[(L(n) ? "remove" : "set") + t](r, n);
 }
-function M(e, t, r, n, f = null) {
-	return e[(L(n) ? "remove" : "set") + t + "NS"](f, r, n);
+function M(e, t, r, n, i = null) {
+	return e[(L(n) ? "remove" : "set") + t + "NS"](i, r, n);
 }
 function C(e, t, r) {
 	return Reflect.set(e, t, r);
 }
 
 // src/events.js
-function y(e, t, r) {
+function T(e, t, r) {
 	return (n) => (n.addEventListener(e, t, r), n);
 }
-var E = _();
-y.connected = function(e, t) {
+var O = _();
+T.connected = function(e, t) {
 	return function(n) {
-		E.onConnected(n, e), t && t.signal && t.signal.addEventListener("abort", () => E.offConnected(n, e));
+		O.onConnected(n, e), t && t.signal && t.signal.addEventListener("abort", () => O.offConnected(n, e));
 	};
 };
-y.disconnected = function(e, t) {
+T.disconnected = function(e, t) {
 	return function(n) {
-		E.onDisconnected(n, e), t && t.signal && t.signal.addEventListener("abort", () => E.offDisconnected(n, e));
+		O.onDisconnected(n, e), t && t.signal && t.signal.addEventListener("abort", () => O.offDisconnected(n, e));
 	};
 };
 function _() {
@@ -159,15 +151,15 @@ function _() {
 		for (let c of o)
 			if (c.type === "childList") {
 				if (g(c.addedNodes, !0)) {
-					i();
+					u();
 					continue;
 				}
-				b(c.removedNodes, !0) && i();
+				b(c.removedNodes, !0) && u();
 			}
 	});
 	return {
 		onConnected(o, c) {
-			d(), f(o).connected.push(c);
+			d(), i(o).connected.push(c);
 		},
 		offConnected(o, c) {
 			if (!e.has(o))
@@ -176,7 +168,7 @@ function _() {
 			a.splice(a.indexOf(c), 1), n(o, s);
 		},
 		onDisconnected(o, c) {
-			d(), f(o).disconnected.push(c);
+			d(), i(o).disconnected.push(c);
 		},
 		offDisconnected(o, c) {
 			if (!e.has(o))
@@ -186,9 +178,9 @@ function _() {
 		}
 	};
 	function n(o, c) {
-		c.connected.length || c.disconnect.length || (e.delete(o), i());
+		c.connected.length || c.disconnect.length || (e.delete(o), u());
 	}
-	function f(o) {
+	function i(o) {
 		if (e.has(o))
 			return e.get(o);
 		let c = { connected: [], disconnected: [] };
@@ -197,16 +189,16 @@ function _() {
 	function d() {
 		t || (t = !0, r.observe(document.body, { childList: !0, subtree: !0 }));
 	}
-	function i() {
+	function u() {
 		!t || e.size || (t = !1, r.disconnect());
 	}
-	function u() {
+	function f() {
 		return new Promise(function(o) {
 			(requestIdleCallback || requestAnimationFrame)(o);
 		});
 	}
 	async function l(o) {
-		e.size > 30 && await u();
+		e.size > 30 && await f();
 		let c = [];
 		if (!(o instanceof Node))
 			return c;
@@ -240,12 +232,12 @@ function _() {
 	};
 });
 export {
-	w as assign,
-	T as classListDeclarative,
+	x as assign,
+	R as classListDeclarative,
 	F as createElement,
 	F as el,
 	I as empty,
 	z as namespace,
-	y as on,
-	A as registerReactivity
+	T as on,
+	D as registerReactivity
 };
diff --git a/test/components/todosComponent.js b/test/components/todosComponent.js
index bc01f6a..37685fc 100644
--- a/test/components/todosComponent.js
+++ b/test/components/todosComponent.js
@@ -10,16 +10,18 @@ const className= style.host(todosComponent).css`
 	:host button{
 		margin-inline-start: 1em;
 	}
+	:host output{
+		white-space: pre;
+	}
 `;
 /** @param {{ todos: string[] }} */
-export function todosComponent({ todos= [ "A" ] }= {}){
+export function todosComponent({ todos= [ "Task A" ] }= {}){
 	const todosS= S([], {
 		add(v){ this.value.push(S(v)); },
 		remove(i){ this.value.splice(i, 1); },
 		[S.symbols.onclear](){ S.clear(...this.value); },
 	});
 	todos.forEach(v=> S.action(todosS, "add", v));
-	console.log(todosS); //TODO
 	const name= "todoName";
 	const onsubmitAdd= on("submit", event=> {
 		const value= event.target.elements[name].value;
@@ -33,16 +35,18 @@ export function todosComponent({ todos= [ "A" ] }= {}){
 		S.action(todosS, "remove", event.detail));
 	
 	const ul_todos= el("ul").append(
-		el("<>", todosS,
-			ts=> ts.map((t, i)=> el(todoComponent, { textContent: t, value: i, className }, onremove))
+		S.el(todosS, ts=> ts
+			.map((textContent, value)=>
+				el(todoComponent, { textContent, value, className }, onremove))
 	));
 	return el("div", { className }).append(
 		el("div").append(
 			el("h2", "Todos:"),
 			el("h3", "List of todos:"),
-			el("<>", todosS, ts=> !ts.length
+			S.el(todosS, ts=> !ts.length
 				? el("p", "No todos yet")
-				: ul_todos)
+				: ul_todos),
+			el("p", "Click to the text to edit it.")
 		),
 		el("form", null, onsubmitAdd).append(
 			el("h3", "Add a todo:"),
@@ -50,13 +54,17 @@ export function todosComponent({ todos= [ "A" ] }= {}){
 				el("input", { name, type: "text", required: true }),
 			),
 			el("button", "+")
+		),
+		el("div").append(
+			el("h3", "Output (JSON):"),
+			el("output", S(()=> JSON.stringify(todosS, null, "\t")))
 		)
 	)
 }
 /**
  * @type {ddeFires<[ "click" ]>}
  * @param {{
- *	textContent: string | ddeSignal<string, any>
+ *	textContent: ddeSignal<string, any>
  *	value: number
  * }}
  * */
@@ -68,8 +76,16 @@ function todoComponent({ textContent, value }){
 		event.stopPropagation();
 		ref().dispatchEvent(new CustomEvent("remove", { detail: value }));
 	});
+	const is_editable= S(false);
+	const onedited= on("change", ev=> {
+		textContent(ev.target.value);
+		is_editable(false);
+	});
 	return el("li", null, ref).append(
-		el("#text", textContent),
+		S.el(is_editable, is=> is
+			? el("input", { value: textContent(), type: "text" }, onedited)
+			: el("span", textContent, on("click", ()=> is_editable(true))),
+		),
 		el("button", { type: "button", value, textContent: "-" }, onclick)
 	);
 }
diff --git a/test/exports.js b/test/exports.js
index 6826fda..36a2a99 100644
--- a/test/exports.js
+++ b/test/exports.js
@@ -1,12 +1,12 @@
 import { namespace, el, assign, on, registerReactivity } from "../index.js";
-import { S } from "../src/signals.js";
+import { S, isSignal } from "../src/signals.js";
 // import { empty, namespace, on, dispatch } from "../index.js";
 // import "../dist/dde-with-signals.js";
 // Object.assign(globalThis, dde);
 // import { el, on, off, S } from "../dist/esm-with-signals.js";
 const style= createStyle();
 Object.assign(globalThis, { S, el, assign, namespace, on, registerReactivity, style });
-export { S, el, on, registerReactivity, style };
+export { S, isSignal, el, on, registerReactivity, style };
 
 function createStyle(){
 	const element= el("style");
diff --git a/test/index-nosignals.html b/test/index-nosignals.html
new file mode 100644
index 0000000..4f9cf06
--- /dev/null
+++ b/test/index-nosignals.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+<!-- DEL CSP https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP | https://github.com/Prinzhorn/minimal-csp -->
+<!-- DEL https://github.com/jensimmons/cssremedy -->
+<!-- <link rel="stylesheet" href="https://github.com/jensimmons/cssremedy/raw/master/css/remedy.css"> -->
+
+	<title>Small DOM element creation enhancements</title>
+	<meta name="description" content="Making creatig elements easier">
+	<script type="module">
+		import { el } from "../index.js";
+		document.body.append(
+			el("p", { textContent: "Ahoj", style: { color: "green" } })
+		);
+	</script>
+</head>
+<body>
+</body>
+</html>