From 7d5f3d17aed85f6f72ad48fd4abc0955336bcc40 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Fri, 8 Sep 2023 20:18:58 +0200 Subject: [PATCH] :package: dist and experiments --- dist/dde-with-signals.js | 336 +++++++++++++++--------------- dist/dde.js | 140 ++++++------- dist/esm-with-signals.js | 336 +++++++++++++++--------------- dist/esm.js | 140 ++++++------- test/components/todosComponent.js | 32 ++- test/exports.js | 4 +- test/index-nosignals.html | 21 ++ 7 files changed, 505 insertions(+), 504 deletions(-) create mode 100644 test/index-nosignals.html 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(""), 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(""), 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(""), 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(""), 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 + * textContent: ddeSignal * 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 @@ + + + + + + + + + + Small DOM element creation enhancements + + + + + +