From 6a529723739b2e6a75248a0a98b4b8ed94279838 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Tue, 10 Oct 2023 10:55:00 +0200 Subject: [PATCH] :sparkles: :recycle: Update scope and namespace handling (scope hook) --- dist/dde-with-signals.js | 371 ++++++++++++----------- dist/dde.js | 247 ++++++++------- dist/esm-with-signals.js | 371 ++++++++++++----------- dist/esm.js | 247 ++++++++------- examples/components/fullNameComponent.js | 8 +- examples/components/todosComponent.js | 7 +- examples/components/webComponent.js | 15 +- src/dom.js | 46 +-- 8 files changed, 693 insertions(+), 619 deletions(-) diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js index 8079c0b..d590a55 100644 --- a/dist/dde-with-signals.js +++ b/dist/dde-with-signals.js @@ -1,7 +1,7 @@ //deka-dom-el library is available via global namespace `dde` (()=> { // src/signals-common.js - var w = { + var E = { isSignal(e) { return !1; }, @@ -9,22 +9,22 @@ return n; } }; - function A(e, t = !0) { - return t ? Object.assign(w, e) : (Object.setPrototypeOf(e, w), e); + function C(e, t = !0) { + return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e); } function S(e) { - return w.isPrototypeOf(e) && e !== w ? e : w; + return E.isPrototypeOf(e) && e !== E ? e : E; } // src/helpers.js function m(e) { return typeof e > "u"; } - function D(e) { + function P(e) { let t = typeof e; return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e); } - function C(e, t) { + function L(e, t) { if (!e || !(e instanceof AbortSignal)) return !0; if (!e.aborted) @@ -34,8 +34,8 @@ } // src/dom-common.js - var P = { setDeleteAttr: q }; - function q(e, t, n) { + var j = { setDeleteAttr: H }; + function H(e, t, n) { if (Reflect.set(e, t, n), !!m(n)) { if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined") return e.removeAttribute(t); @@ -45,79 +45,94 @@ } // src/dom.js - var b = "html", F = { + var w = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.body) : document.body }], W = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, O = { + get current() { + return w[w.length - 1]; + }, + get state() { + return [...w]; + }, + get host() { + return this.current.host; + }, + get namespace() { + return this.current.namespace; + }, + set namespace(e) { + return this.current.namespace = W(e); + }, elNamespace(e) { - return b = e === "svg" ? "http://www.w3.org/2000/svg" : e, { - append(...t) { - return b = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); + let t = this.namespace; + return this.namespace = e, { + append(...n) { + return O.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n); } }; }, - get namespace() { - return b; + push(e = {}) { + return e.namespace && (e.namespace = W(e.namespace)), w.push(Object.assign({}, this.current, e)); }, - set namespace(e) { - return b = e; + pop() { + return w.pop(); } - }, ce = Object.assign((e) => e ? e(document.body) : document.body, F); - function ie(e, t, ...n) { - let r = this, o = S(this), c; + }; + function se(e, t, ...n) { + let r = this, o = S(this), { namespace: u } = O, a; switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) { case typeof e == "function": { - let l = Object.assign((u) => u ? (n.unshift(u), void 0) : c, F); - c = e(t || void 0, l), b = "html"; + O.push({ scope: e, host: (s) => s ? (n.unshift(s), void 0) : a }), a = e(t || void 0), O.pop(); break; } case e === "#text": - c = y.call(r, document.createTextNode(""), t); + a = y.call(r, document.createTextNode(""), t); break; case e === "<>": - c = y.call(r, document.createDocumentFragment(), t); + a = y.call(r, document.createDocumentFragment(), t); break; - case b !== "html": - c = y.call(r, document.createElementNS(b, e), t); + case u !== "html": + a = y.call(r, document.createElementNS(u, e), t); break; - case !c: - c = y.call(r, document.createElement(e), t); + case !a: + a = y.call(r, document.createElement(e), t); } - return n.forEach((l) => l(c)), c; + return n.forEach((s) => s(a)), a; } - var { setDeleteAttr: j } = P; + var { setDeleteAttr: F } = j; function y(e, ...t) { let n = this, r = S(this); if (!t.length) return e; - let c = (e instanceof SVGElement ? I : H).bind(null, e, "Attribute"); - return Object.entries(Object.assign({}, ...t)).forEach(function l([u, a]) { - a = r.processReactiveAttribute(e, u, a, l); - let [v] = u; - if (v === "=") - return c(u.slice(1), a); - if (v === ".") - return W(e, u.slice(1), a); - if (/(aria|data)([A-Z])/.test(u)) - return u = u.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(u, a); - switch (u === "className" && (u = "class"), u) { + let u = (e instanceof SVGElement ? J : I).bind(null, e, "Attribute"); + return Object.entries(Object.assign({}, ...t)).forEach(function a([s, d]) { + d = r.processReactiveAttribute(e, s, d, a); + let [b] = s; + if (b === "=") + return u(s.slice(1), d); + if (b === ".") + return M(e, s.slice(1), d); + if (/(aria|data)([A-Z])/.test(s)) + return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), u(s, d); + switch (s === "className" && (s = "class"), s) { case "xlink:href": - return c(u, a, "http://www.w3.org/1999/xlink"); + return u(s, d, "http://www.w3.org/1999/xlink"); case "textContent": - return j(e, u, a); + return F(e, s, d); case "style": - if (typeof a != "object") + if (typeof d != "object") break; case "dataset": - return L(r, a, W.bind(null, e[u])); + return N(r, d, M.bind(null, e[s])); case "ariaset": - return L(r, a, (x, i) => c("aria-" + x, i)); + return N(r, d, (x, c) => u("aria-" + x, c)); case "classList": - return B.call(n, e, a); + return B.call(n, e, d); } - return G(e, u) ? j(e, u, a) : c(u, a); + return G(e, s) ? F(e, s, d) : u(s, d); }), e; } function B(e, t) { let n = S(this); - return L( + return N( n, t, (r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o) @@ -129,31 +144,31 @@ function G(e, t) { if (!Reflect.has(e, t)) return !1; - let n = M(e, t); + let n = z(e, t); return !m(n.set); } - function M(e, t) { + function z(e, t) { if (e = Object.getPrototypeOf(e), !e) return {}; let n = Object.getOwnPropertyDescriptor(e, t); - return n || M(e, t); + return n || z(e, t); } - function L(e, t, n) { + function N(e, t, n) { if (!(typeof t != "object" || t === null)) - return Object.entries(t).forEach(function([o, c]) { - o && (c = e.processReactiveAttribute(t, o, c, (l) => n(...l)), n(o, c)); + return Object.entries(t).forEach(function([o, u]) { + o && (u = e.processReactiveAttribute(t, o, u, (a) => n(...a)), n(o, u)); }); } - function z(e) { + function T(e) { return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; } - function H(e, t, n, r) { - return e[(m(r) ? "remove" : "set") + t](n, z(r)); + function I(e, t, n, r) { + return e[(m(r) ? "remove" : "set") + t](n, T(r)); } - function I(e, t, n, r, o = null) { - return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, z(r)); + function J(e, t, n, r, o = null) { + return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, T(r)); } - function W(e, t, n) { + function M(e, t, n) { if (Reflect.set(e, t, n), !!m(n)) return Reflect.deleteProperty(e, t); } @@ -163,105 +178,105 @@ let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); return e.dispatchEvent(r); } - function T(e, t, n) { + function U(e, t, n) { return function(o) { return o.addEventListener(e, t, n), o; }; } - var O = J(); - T.connected = function(e, t) { + var _ = V(); + U.connected = function(e, t) { return typeof t != "object" && (t = {}), t.once = !0, function(r) { - return r.addEventListener("dde:connected", e, t), typeof r.connectedCallback == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event("dde:connected")), r) : (C(t.signal, () => O.offConnected(r, e)) && O.onConnected(r, e), r); + return r.addEventListener("dde:connected", e, t), typeof r.connectedCallback == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event("dde:connected")), r) : (L(t.signal, () => _.offConnected(r, e)) && _.onConnected(r, e), r); }; }; - T.disconnected = function(e, t) { + U.disconnected = function(e, t) { return typeof t != "object" && (t = {}), t.once = !0, function(r) { - return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || C(t.signal, () => O.offDisconnected(r, e)) && O.onDisconnected(r, e), r; + return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || L(t.signal, () => _.offDisconnected(r, e)) && _.onDisconnected(r, e), r; }; }; - function J() { - let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(i) { - for (let s of i) - if (s.type === "childList") { - if (v(s.addedNodes, !0)) { - l(); + function V() { + let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) { + for (let i of c) + if (i.type === "childList") { + if (b(i.addedNodes, !0)) { + a(); continue; } - x(s.removedNodes, !0) && l(); + x(i.removedNodes, !0) && a(); } }); return { - onConnected(i, s) { - c(); - let f = o(i); - f.connected.has(s) || (f.connected.add(s), f.length_c += 1); + onConnected(c, i) { + u(); + let f = o(c); + f.connected.has(i) || (f.connected.add(i), f.length_c += 1); }, - offConnected(i, s) { - if (!e.has(i)) + offConnected(c, i) { + if (!e.has(c)) return; - let f = e.get(i); - f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, r(i, f)); + let f = e.get(c); + f.connected.has(i) && (f.connected.delete(i), f.length_c -= 1, r(c, f)); }, - onDisconnected(i, s) { - c(); - let f = o(i); - f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1); + onDisconnected(c, i) { + u(); + let f = o(c); + f.disconnected.has(i) || (f.disconnected.add(i), f.length_d += 1); }, - offDisconnected(i, s) { - if (!e.has(i)) + offDisconnected(c, i) { + if (!e.has(c)) return; - let f = e.get(i); - f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, r(i, f)); + let f = e.get(c); + f.disconnected.has(i) && (f.disconnected.delete(i), f.length_d -= 1, r(c, f)); } }; - function r(i, s) { - s.length_c || s.length_d || (e.delete(i), l()); + function r(c, i) { + i.length_c || i.length_d || (e.delete(c), a()); } - function o(i) { - if (e.has(i)) - return e.get(i); - let s = { + function o(c) { + if (e.has(c)) + return e.get(c); + let i = { connected: /* @__PURE__ */ new WeakSet(), length_c: 0, disconnected: /* @__PURE__ */ new WeakSet(), length_d: 0 }; - return e.set(i, s), s; - } - function c() { - t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); - } - function l() { - !t || e.size || (t = !1, n.disconnect()); + return e.set(c, i), i; } function u() { - return new Promise(function(i) { - (requestIdleCallback || requestAnimationFrame)(i); + t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); + } + function a() { + !t || e.size || (t = !1, n.disconnect()); + } + function s() { + return new Promise(function(c) { + (requestIdleCallback || requestAnimationFrame)(c); }); } - async function a(i) { - e.size > 30 && await u(); - let s = []; - if (!(i instanceof Node)) - return s; + async function d(c) { + e.size > 30 && await s(); + let i = []; + if (!(c instanceof Node)) + return i; for (let f of e.keys()) - f === i || !(f instanceof Node) || i.contains(f) && s.push(f); - return s; + f === c || !(f instanceof Node) || c.contains(f) && i.push(f); + return i; } - function v(i, s) { + function b(c, i) { let f = !1; - for (let p of i) { - if (s && a(p).then(v), !e.has(p)) + for (let l of c) { + if (i && d(l).then(b), !e.has(l)) continue; - let E = e.get(p); - E.length_c && (p.dispatchEvent(new Event("dde:connected")), E.connected = /* @__PURE__ */ new WeakSet(), E.length_c = 0, E.length_d || e.delete(p), f = !0); + let v = e.get(l); + v.length_c && (l.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(l), f = !0); } return f; } - function x(i, s) { + function x(c, i) { let f = !1; - for (let p of i) - s && a(p).then(x), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), f = !0); + for (let l of c) + i && d(l).then(x), !(!e.has(l) || !e.get(l).length_d) && (l.dispatchEvent(new Event("dde:disconnected")), e.delete(l), f = !0); return f; } } @@ -275,10 +290,10 @@ }); // src/signals-lib.js - var d = Symbol.for("Signal"); - function _(e) { + var p = Symbol.for("Signal"); + function R(e) { try { - return Reflect.has(e, d); + return Reflect.has(e, p); } catch { return !1; } @@ -286,131 +301,131 @@ var h = /* @__PURE__ */ new WeakMap(); function g(e, t) { if (typeof e != "function") - return U(e, t); - if (_(e)) + return $(e, t); + if (R(e)) return e; - let n = U(""), r = () => n(e()); - return h.set(r, /* @__PURE__ */ new Set([n])), K(r), n; + let n = $(""), r = () => n(e()); + return h.set(r, /* @__PURE__ */ new Set([n])), Q(r), n; } g.action = function(e, t, ...n) { - let r = e[d], { actions: o } = r; + let r = e[p], { actions: o } = r; if (!o || !Reflect.has(o, t)) throw new Error(`'${e}' has no action with name '${t}'!`); if (o[t].apply(r, n), r.skip) return Reflect.deleteProperty(r, "skip"); - r.listeners.forEach((c) => c(r.value)); + r.listeners.forEach((u) => u(r.value)); }; g.on = function e(t, n, r = {}) { let { signal: o } = r; if (!(o && o.aborted)) { if (Array.isArray(t)) - return t.forEach((c) => e(c, n, r)); - N(t, n), o && o.addEventListener("abort", () => k(t, n)); + return t.forEach((u) => e(u, n, r)); + D(t, n), o && o.addEventListener("abort", () => q(t, n)); } }; g.symbols = { - signal: d, + signal: p, onclear: Symbol.for("Signal.onclear") }; g.clear = function(...e) { 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); + let r = n[p], { onclear: o } = g.symbols; + r.actions && r.actions[o] && r.actions[o].call(r), t(n, r), Reflect.deleteProperty(n, p); } function t(n, r) { r.listeners.forEach((o) => { if (r.listeners.delete(o), !h.has(o)) return; - let c = h.get(o); - c.delete(n), !(c.size > 1) && (g.clear(...c), h.delete(o)); + let u = h.get(o); + u.delete(n), !(u.size > 1) && (g.clear(...u), h.delete(o)); }); } }; g.el = function(e, t) { let n = document.createComment("<#reactive>"), r = document.createComment(""), o = document.createDocumentFragment(); o.append(n, r); - let c = (l) => { + let u = (a) => { if (!n.parentNode || !r.parentNode) - return k(e, c); - let u = t(l); - Array.isArray(u) || (u = [u]); - let a = n; - for (; (a = n.nextSibling) !== r; ) - a.remove(); - n.after(...u); + return q(e, u); + let s = t(a); + Array.isArray(s) || (s = [s]); + let d = n; + for (; (d = n.nextSibling) !== r; ) + d.remove(); + n.after(...s); }; - return N(e, c), c(e()), o; + return D(e, u), u(e()), o; }; - var $ = { - isSignal: _, + var k = { + isSignal: R, processReactiveAttribute(e, t, n, r) { - return _(n) ? (N(n, (o) => r([t, o])), n()) : n; + return R(n) ? (D(n, (o) => r([t, o])), n()) : n; } }; - function U(e, t) { - let n = (...r) => r.length ? Y(n, r[0]) : X(n); - return Z(n, e, t); + function $(e, t) { + let n = (...r) => r.length ? ee(n, r[0]) : Y(n); + return K(n, e, t); } - var V = Object.assign(/* @__PURE__ */ Object.create(null), { + var Z = Object.assign(/* @__PURE__ */ Object.create(null), { stopPropagation() { this.skip = !0; } }); - function Z(e, t, n) { - return D(n) !== "[object Object]" && (n = {}), e[d] = { + function K(e, t, n) { + return P(n) !== "[object Object]" && (n = {}), e[p] = { value: t, actions: n, listeners: /* @__PURE__ */ new Set() - }, e.toJSON = () => e(), Object.setPrototypeOf(e[d], V), e; + }, e.toJSON = () => e(), Object.setPrototypeOf(e[p], Z), e; } - var R = []; - function K(e) { + var A = []; + function Q(e) { let t = function() { - R.push(t), e(), R.pop(); + A.push(t), e(), A.pop(); }; h.has(e) && (h.set(t, h.get(e)), h.delete(e)), t(); } - function Q() { - return R[R.length - 1]; + function X() { + return A[A.length - 1]; } - function X(e) { - if (!e[d]) + function Y(e) { + if (!e[p]) return; - let { value: t, listeners: n } = e[d], r = Q(); + let { value: t, listeners: n } = e[p], r = X(); return r && n.add(r), h.has(r) && h.get(r).add(e), t; } - function Y(e, t) { - if (!e[d]) + function ee(e, t) { + if (!e[p]) return; - let n = e[d]; + let n = e[p]; if (n.value !== t) return n.value = t, n.listeners.forEach((r) => r(t)), t; } - function N(e, t) { - if (e[d]) - return e[d].listeners.add(t); + function D(e, t) { + if (e[p]) + return e[p].listeners.add(t); } - function k(e, t) { - if (e[d]) - return e[d].listeners.delete(t); + function q(e, t) { + if (e[p]) + return e[p].listeners.delete(t); } // signals.js - A($); + C(k); globalThis.dde= { S: g, assign: y, classListDeclarative: B, - createElement: ie, + createElement: se, dispatchEvent: de, - el: ie, + el: se, empty: fe, - isSignal: _, - on: T, - registerReactivity: A, - scope: ce + isSignal: R, + on: U, + registerReactivity: C, + scope: O }; })(); \ No newline at end of file diff --git a/dist/dde.js b/dist/dde.js index f9cb83f..d3e2755 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -1,23 +1,23 @@ //deka-dom-el library is available via global namespace `dde` (()=> { // src/signals-common.js - var E = { + var m = { isSignal(e) { return !1; }, - processReactiveAttribute(e, t, r, n) { - return r; + processReactiveAttribute(e, t, n, r) { + return n; } }; - function N(e, t = !0) { - return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e); + function P(e, t = !0) { + return t ? Object.assign(m, e) : (Object.setPrototypeOf(e, m), e); } - function m(e) { - return E.isPrototypeOf(e) && e !== E ? e : E; + function b(e) { + return m.isPrototypeOf(e) && e !== m ? e : m; } // src/helpers.js - function p(e) { + function l(e) { return typeof e > "u"; } function _(e, t) { @@ -30,9 +30,9 @@ } // src/dom-common.js - var O = { setDeleteAttr: P }; - function P(e, t, r) { - if (Reflect.set(e, t, r), !!p(r)) { + var R = { setDeleteAttr: j }; + function j(e, t, n) { + if (Reflect.set(e, t, n), !!l(n)) { if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined") return e.removeAttribute(t); if (Reflect.get(e, t) === "undefined") @@ -41,154 +41,169 @@ } // src/dom.js - var h = "html", S = { + var v = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.body) : document.body }], C = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, x = { + get current() { + return v[v.length - 1]; + }, + get state() { + return [...v]; + }, + get host() { + return this.current.host; + }, + get namespace() { + return this.current.namespace; + }, + set namespace(e) { + return this.current.namespace = C(e); + }, elNamespace(e) { - return h = e === "svg" ? "http://www.w3.org/2000/svg" : e, { - append(...t) { - return h = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); + let t = this.namespace; + return this.namespace = e, { + append(...n) { + return x.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n); } }; }, - get namespace() { - return h; + push(e = {}) { + return e.namespace && (e.namespace = C(e.namespace)), v.push(Object.assign({}, this.current, e)); }, - set namespace(e) { - return h = e; + pop() { + return v.pop(); } - }, H = Object.assign((e) => e ? e(document.body) : document.body, S); - function I(e, t, ...r) { - let n = this, u = m(this), i; + }; + function I(e, t, ...n) { + let r = this, u = b(this), { namespace: d } = x, f; switch ((Object(t) !== t || u.isSignal(t)) && (t = { textContent: t }), !0) { case typeof e == "function": { - let a = Object.assign((f) => f ? (r.unshift(f), void 0) : i, S); - i = e(t || void 0, a), h = "html"; + x.push({ scope: e, host: (i) => i ? (n.unshift(i), void 0) : f }), f = e(t || void 0), x.pop(); break; } case e === "#text": - i = w.call(n, document.createTextNode(""), t); + f = w.call(r, document.createTextNode(""), t); break; case e === "<>": - i = w.call(n, document.createDocumentFragment(), t); + f = w.call(r, document.createDocumentFragment(), t); break; - case h !== "html": - i = w.call(n, document.createElementNS(h, e), t); + case d !== "html": + f = w.call(r, document.createElementNS(d, e), t); break; - case !i: - i = w.call(n, document.createElement(e), t); + case !f: + f = w.call(r, document.createElement(e), t); } - return r.forEach((a) => a(i)), i; + return n.forEach((i) => i(f)), f; } - var { setDeleteAttr: R } = O; + var { setDeleteAttr: S } = R; function w(e, ...t) { - let r = this, n = m(this); + let n = this, r = b(this); if (!t.length) return e; - let i = (e instanceof SVGElement ? T : M).bind(null, e, "Attribute"); - return Object.entries(Object.assign({}, ...t)).forEach(function a([f, d]) { - d = n.processReactiveAttribute(e, f, d, a); - let [g] = f; - if (g === "=") - return i(f.slice(1), d); - if (g === ".") - return C(e, f.slice(1), d); - if (/(aria|data)([A-Z])/.test(f)) - return f = f.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), i(f, d); - switch (f === "className" && (f = "class"), f) { + let d = (e instanceof SVGElement ? U : T).bind(null, e, "Attribute"); + return Object.entries(Object.assign({}, ...t)).forEach(function f([i, a]) { + a = r.processReactiveAttribute(e, i, a, f); + let [h] = i; + if (h === "=") + return d(i.slice(1), a); + if (h === ".") + return y(e, i.slice(1), a); + if (/(aria|data)([A-Z])/.test(i)) + return i = i.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), d(i, a); + switch (i === "className" && (i = "class"), i) { case "xlink:href": - return i(f, d, "http://www.w3.org/1999/xlink"); + return d(i, a, "http://www.w3.org/1999/xlink"); case "textContent": - return R(e, f, d); + return S(e, i, a); case "style": - if (typeof d != "object") + if (typeof a != "object") break; case "dataset": - return A(n, d, C.bind(null, e[f])); + return O(r, a, y.bind(null, e[i])); case "ariaset": - return A(n, d, (b, c) => i("aria-" + b, c)); + return O(r, a, (E, c) => d("aria-" + E, c)); case "classList": - return j.call(r, e, d); + return F.call(n, e, a); } - return F(e, f) ? R(e, f, d) : i(f, d); + return M(e, i) ? S(e, i, a) : d(i, a); }), e; } - function j(e, t) { - let r = m(this); - return A( - r, + function F(e, t) { + let n = b(this); + return O( + n, t, - (n, u) => e.classList.toggle(n, u === -1 ? void 0 : !!u) + (r, u) => e.classList.toggle(r, u === -1 ? void 0 : !!u) ), e; } function Z(e) { return Array.from(e.children).forEach((t) => t.remove()), e; } - function F(e, t) { + function M(e, t) { if (!Reflect.has(e, t)) return !1; - let r = y(e, t); - return !p(r.set); + let n = D(e, t); + return !l(n.set); } - function y(e, t) { + function D(e, t) { if (e = Object.getPrototypeOf(e), !e) return {}; - let r = Object.getOwnPropertyDescriptor(e, t); - return r || y(e, t); + let n = Object.getOwnPropertyDescriptor(e, t); + return n || D(e, t); } - function A(e, t, r) { + function O(e, t, n) { if (!(typeof t != "object" || t === null)) - return Object.entries(t).forEach(function([u, i]) { - u && (i = e.processReactiveAttribute(t, u, i, (a) => r(...a)), r(u, i)); + return Object.entries(t).forEach(function([u, d]) { + u && (d = e.processReactiveAttribute(t, u, d, (f) => n(...f)), n(u, d)); }); } - function D(e) { + function L(e) { return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; } - function M(e, t, r, n) { - return e[(p(n) ? "remove" : "set") + t](r, D(n)); + function T(e, t, n, r) { + return e[(l(r) ? "remove" : "set") + t](n, L(r)); } - function T(e, t, r, n, u = null) { - return e[(p(n) ? "remove" : "set") + t + "NS"](u, r, D(n)); + function U(e, t, n, r, u = null) { + return e[(l(r) ? "remove" : "set") + t + "NS"](u, n, L(r)); } - function C(e, t, r) { - if (Reflect.set(e, t, r), !!p(r)) + function y(e, t, n) { + if (Reflect.set(e, t, n), !!l(n)) return Reflect.deleteProperty(e, t); } // src/events.js - function K(e, t, ...r) { - let n = r.length ? new CustomEvent(t, { detail: r[0] }) : new Event(t); - return e.dispatchEvent(n); + function K(e, t, ...n) { + let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); + return e.dispatchEvent(r); } - function L(e, t, r) { + function N(e, t, n) { return function(u) { - return u.addEventListener(e, t, r), u; + return u.addEventListener(e, t, n), u; }; } - var x = U(); - L.connected = function(e, t) { - return typeof t != "object" && (t = {}), t.once = !0, function(n) { - return n.addEventListener("dde:connected", e, t), typeof n.connectedCallback == "function" ? n : n.isConnected ? (n.dispatchEvent(new Event("dde:connected")), n) : (_(t.signal, () => x.offConnected(n, e)) && x.onConnected(n, e), n); + var A = W(); + N.connected = function(e, t) { + return typeof t != "object" && (t = {}), t.once = !0, function(r) { + return r.addEventListener("dde:connected", e, t), typeof r.connectedCallback == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event("dde:connected")), r) : (_(t.signal, () => A.offConnected(r, e)) && A.onConnected(r, e), r); }; }; - L.disconnected = function(e, t) { - return typeof t != "object" && (t = {}), t.once = !0, function(n) { - return n.addEventListener("dde:disconnected", e, t), typeof n.disconnectedCallback == "function" || _(t.signal, () => x.offDisconnected(n, e)) && x.onDisconnected(n, e), n; + N.disconnected = function(e, t) { + return typeof t != "object" && (t = {}), t.once = !0, function(r) { + return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || _(t.signal, () => A.offDisconnected(r, e)) && A.onDisconnected(r, e), r; }; }; - function U() { - let e = /* @__PURE__ */ new Map(), t = !1, r = new MutationObserver(function(c) { + function W() { + let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) { for (let o of c) if (o.type === "childList") { - if (g(o.addedNodes, !0)) { - a(); + if (h(o.addedNodes, !0)) { + f(); continue; } - b(o.removedNodes, !0) && a(); + E(o.removedNodes, !0) && f(); } }); return { onConnected(c, o) { - i(); + d(); let s = u(c); s.connected.has(o) || (s.connected.add(o), s.length_c += 1); }, @@ -196,10 +211,10 @@ if (!e.has(c)) return; let s = e.get(c); - s.connected.has(o) && (s.connected.delete(o), s.length_c -= 1, n(c, s)); + s.connected.has(o) && (s.connected.delete(o), s.length_c -= 1, r(c, s)); }, onDisconnected(c, o) { - i(); + d(); let s = u(c); s.disconnected.has(o) || (s.disconnected.add(o), s.length_d += 1); }, @@ -207,11 +222,11 @@ if (!e.has(c)) return; let s = e.get(c); - s.disconnected.has(o) && (s.disconnected.delete(o), s.length_d -= 1, n(c, s)); + s.disconnected.has(o) && (s.disconnected.delete(o), s.length_d -= 1, r(c, s)); } }; - function n(c, o) { - o.length_c || o.length_d || (e.delete(c), a()); + function r(c, o) { + o.length_c || o.length_d || (e.delete(c), f()); } function u(c) { if (e.has(c)) @@ -224,19 +239,19 @@ }; return e.set(c, o), o; } - function i() { - t || (t = !0, r.observe(document.body, { childList: !0, subtree: !0 })); - } - function a() { - !t || e.size || (t = !1, r.disconnect()); + function d() { + t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); } function f() { + !t || e.size || (t = !1, n.disconnect()); + } + function i() { return new Promise(function(c) { (requestIdleCallback || requestAnimationFrame)(c); }); } - async function d(c) { - e.size > 30 && await f(); + async function a(c) { + e.size > 30 && await i(); let o = []; if (!(c instanceof Node)) return o; @@ -244,20 +259,20 @@ s === c || !(s instanceof Node) || c.contains(s) && o.push(s); return o; } - function g(c, o) { + function h(c, o) { let s = !1; - for (let l of c) { - if (o && d(l).then(g), !e.has(l)) + for (let p of c) { + if (o && a(p).then(h), !e.has(p)) continue; - let v = e.get(l); - v.length_c && (l.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(l), s = !0); + let g = e.get(p); + g.length_c && (p.dispatchEvent(new Event("dde:connected")), g.connected = /* @__PURE__ */ new WeakSet(), g.length_c = 0, g.length_d || e.delete(p), s = !0); } return s; } - function b(c, o) { + function E(c, o) { let s = !1; - for (let l of c) - o && d(l).then(b), !(!e.has(l) || !e.get(l).length_d) && (l.dispatchEvent(new Event("dde:disconnected")), e.delete(l), s = !0); + for (let p of c) + o && a(p).then(E), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), s = !0); return s; } } @@ -265,21 +280,21 @@ // index.js [HTMLElement, SVGElement, 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; }; }); globalThis.dde= { assign: w, - classListDeclarative: j, + classListDeclarative: F, createElement: I, dispatchEvent: K, el: I, empty: Z, - on: L, - registerReactivity: N, - scope: H + on: N, + registerReactivity: P, + scope: x }; })(); \ No newline at end of file diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index 7409c84..c357c62 100644 --- a/dist/esm-with-signals.js +++ b/dist/esm-with-signals.js @@ -1,5 +1,5 @@ // src/signals-common.js -var w = { +var E = { isSignal(e) { return !1; }, @@ -7,22 +7,22 @@ var w = { return n; } }; -function A(e, t = !0) { - return t ? Object.assign(w, e) : (Object.setPrototypeOf(e, w), e); +function C(e, t = !0) { + return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e); } function S(e) { - return w.isPrototypeOf(e) && e !== w ? e : w; + return E.isPrototypeOf(e) && e !== E ? e : E; } // src/helpers.js function m(e) { return typeof e > "u"; } -function D(e) { +function P(e) { let t = typeof e; return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e); } -function C(e, t) { +function L(e, t) { if (!e || !(e instanceof AbortSignal)) return !0; if (!e.aborted) @@ -32,8 +32,8 @@ function C(e, t) { } // src/dom-common.js -var P = { setDeleteAttr: q }; -function q(e, t, n) { +var j = { setDeleteAttr: H }; +function H(e, t, n) { if (Reflect.set(e, t, n), !!m(n)) { if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined") return e.removeAttribute(t); @@ -43,79 +43,94 @@ function q(e, t, n) { } // src/dom.js -var b = "html", F = { +var w = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.body) : document.body }], W = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, O = { + get current() { + return w[w.length - 1]; + }, + get state() { + return [...w]; + }, + get host() { + return this.current.host; + }, + get namespace() { + return this.current.namespace; + }, + set namespace(e) { + return this.current.namespace = W(e); + }, elNamespace(e) { - return b = e === "svg" ? "http://www.w3.org/2000/svg" : e, { - append(...t) { - return b = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); + let t = this.namespace; + return this.namespace = e, { + append(...n) { + return O.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n); } }; }, - get namespace() { - return b; + push(e = {}) { + return e.namespace && (e.namespace = W(e.namespace)), w.push(Object.assign({}, this.current, e)); }, - set namespace(e) { - return b = e; + pop() { + return w.pop(); } -}, ce = Object.assign((e) => e ? e(document.body) : document.body, F); -function ie(e, t, ...n) { - let r = this, o = S(this), c; +}; +function se(e, t, ...n) { + let r = this, o = S(this), { namespace: u } = O, a; switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) { case typeof e == "function": { - let l = Object.assign((u) => u ? (n.unshift(u), void 0) : c, F); - c = e(t || void 0, l), b = "html"; + O.push({ scope: e, host: (s) => s ? (n.unshift(s), void 0) : a }), a = e(t || void 0), O.pop(); break; } case e === "#text": - c = y.call(r, document.createTextNode(""), t); + a = y.call(r, document.createTextNode(""), t); break; case e === "<>": - c = y.call(r, document.createDocumentFragment(), t); + a = y.call(r, document.createDocumentFragment(), t); break; - case b !== "html": - c = y.call(r, document.createElementNS(b, e), t); + case u !== "html": + a = y.call(r, document.createElementNS(u, e), t); break; - case !c: - c = y.call(r, document.createElement(e), t); + case !a: + a = y.call(r, document.createElement(e), t); } - return n.forEach((l) => l(c)), c; + return n.forEach((s) => s(a)), a; } -var { setDeleteAttr: j } = P; +var { setDeleteAttr: F } = j; function y(e, ...t) { let n = this, r = S(this); if (!t.length) return e; - let c = (e instanceof SVGElement ? I : H).bind(null, e, "Attribute"); - return Object.entries(Object.assign({}, ...t)).forEach(function l([u, a]) { - a = r.processReactiveAttribute(e, u, a, l); - let [v] = u; - if (v === "=") - return c(u.slice(1), a); - if (v === ".") - return W(e, u.slice(1), a); - if (/(aria|data)([A-Z])/.test(u)) - return u = u.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(u, a); - switch (u === "className" && (u = "class"), u) { + let u = (e instanceof SVGElement ? J : I).bind(null, e, "Attribute"); + return Object.entries(Object.assign({}, ...t)).forEach(function a([s, d]) { + d = r.processReactiveAttribute(e, s, d, a); + let [b] = s; + if (b === "=") + return u(s.slice(1), d); + if (b === ".") + return M(e, s.slice(1), d); + if (/(aria|data)([A-Z])/.test(s)) + return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), u(s, d); + switch (s === "className" && (s = "class"), s) { case "xlink:href": - return c(u, a, "http://www.w3.org/1999/xlink"); + return u(s, d, "http://www.w3.org/1999/xlink"); case "textContent": - return j(e, u, a); + return F(e, s, d); case "style": - if (typeof a != "object") + if (typeof d != "object") break; case "dataset": - return L(r, a, W.bind(null, e[u])); + return N(r, d, M.bind(null, e[s])); case "ariaset": - return L(r, a, (x, i) => c("aria-" + x, i)); + return N(r, d, (x, c) => u("aria-" + x, c)); case "classList": - return B.call(n, e, a); + return B.call(n, e, d); } - return G(e, u) ? j(e, u, a) : c(u, a); + return G(e, s) ? F(e, s, d) : u(s, d); }), e; } function B(e, t) { let n = S(this); - return L( + return N( n, t, (r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o) @@ -127,31 +142,31 @@ function fe(e) { function G(e, t) { if (!Reflect.has(e, t)) return !1; - let n = M(e, t); + let n = z(e, t); return !m(n.set); } -function M(e, t) { +function z(e, t) { if (e = Object.getPrototypeOf(e), !e) return {}; let n = Object.getOwnPropertyDescriptor(e, t); - return n || M(e, t); + return n || z(e, t); } -function L(e, t, n) { +function N(e, t, n) { if (!(typeof t != "object" || t === null)) - return Object.entries(t).forEach(function([o, c]) { - o && (c = e.processReactiveAttribute(t, o, c, (l) => n(...l)), n(o, c)); + return Object.entries(t).forEach(function([o, u]) { + o && (u = e.processReactiveAttribute(t, o, u, (a) => n(...a)), n(o, u)); }); } -function z(e) { +function T(e) { return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; } -function H(e, t, n, r) { - return e[(m(r) ? "remove" : "set") + t](n, z(r)); +function I(e, t, n, r) { + return e[(m(r) ? "remove" : "set") + t](n, T(r)); } -function I(e, t, n, r, o = null) { - return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, z(r)); +function J(e, t, n, r, o = null) { + return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, T(r)); } -function W(e, t, n) { +function M(e, t, n) { if (Reflect.set(e, t, n), !!m(n)) return Reflect.deleteProperty(e, t); } @@ -161,105 +176,105 @@ function de(e, t, ...n) { let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); return e.dispatchEvent(r); } -function T(e, t, n) { +function U(e, t, n) { return function(o) { return o.addEventListener(e, t, n), o; }; } -var O = J(); -T.connected = function(e, t) { +var _ = V(); +U.connected = function(e, t) { return typeof t != "object" && (t = {}), t.once = !0, function(r) { - return r.addEventListener("dde:connected", e, t), typeof r.connectedCallback == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event("dde:connected")), r) : (C(t.signal, () => O.offConnected(r, e)) && O.onConnected(r, e), r); + return r.addEventListener("dde:connected", e, t), typeof r.connectedCallback == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event("dde:connected")), r) : (L(t.signal, () => _.offConnected(r, e)) && _.onConnected(r, e), r); }; }; -T.disconnected = function(e, t) { +U.disconnected = function(e, t) { return typeof t != "object" && (t = {}), t.once = !0, function(r) { - return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || C(t.signal, () => O.offDisconnected(r, e)) && O.onDisconnected(r, e), r; + return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || L(t.signal, () => _.offDisconnected(r, e)) && _.onDisconnected(r, e), r; }; }; -function J() { - let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(i) { - for (let s of i) - if (s.type === "childList") { - if (v(s.addedNodes, !0)) { - l(); +function V() { + let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) { + for (let i of c) + if (i.type === "childList") { + if (b(i.addedNodes, !0)) { + a(); continue; } - x(s.removedNodes, !0) && l(); + x(i.removedNodes, !0) && a(); } }); return { - onConnected(i, s) { - c(); - let f = o(i); - f.connected.has(s) || (f.connected.add(s), f.length_c += 1); + onConnected(c, i) { + u(); + let f = o(c); + f.connected.has(i) || (f.connected.add(i), f.length_c += 1); }, - offConnected(i, s) { - if (!e.has(i)) + offConnected(c, i) { + if (!e.has(c)) return; - let f = e.get(i); - f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, r(i, f)); + let f = e.get(c); + f.connected.has(i) && (f.connected.delete(i), f.length_c -= 1, r(c, f)); }, - onDisconnected(i, s) { - c(); - let f = o(i); - f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1); + onDisconnected(c, i) { + u(); + let f = o(c); + f.disconnected.has(i) || (f.disconnected.add(i), f.length_d += 1); }, - offDisconnected(i, s) { - if (!e.has(i)) + offDisconnected(c, i) { + if (!e.has(c)) return; - let f = e.get(i); - f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, r(i, f)); + let f = e.get(c); + f.disconnected.has(i) && (f.disconnected.delete(i), f.length_d -= 1, r(c, f)); } }; - function r(i, s) { - s.length_c || s.length_d || (e.delete(i), l()); + function r(c, i) { + i.length_c || i.length_d || (e.delete(c), a()); } - function o(i) { - if (e.has(i)) - return e.get(i); - let s = { + function o(c) { + if (e.has(c)) + return e.get(c); + let i = { connected: /* @__PURE__ */ new WeakSet(), length_c: 0, disconnected: /* @__PURE__ */ new WeakSet(), length_d: 0 }; - return e.set(i, s), s; - } - function c() { - t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); - } - function l() { - !t || e.size || (t = !1, n.disconnect()); + return e.set(c, i), i; } function u() { - return new Promise(function(i) { - (requestIdleCallback || requestAnimationFrame)(i); + t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); + } + function a() { + !t || e.size || (t = !1, n.disconnect()); + } + function s() { + return new Promise(function(c) { + (requestIdleCallback || requestAnimationFrame)(c); }); } - async function a(i) { - e.size > 30 && await u(); - let s = []; - if (!(i instanceof Node)) - return s; + async function d(c) { + e.size > 30 && await s(); + let i = []; + if (!(c instanceof Node)) + return i; for (let f of e.keys()) - f === i || !(f instanceof Node) || i.contains(f) && s.push(f); - return s; + f === c || !(f instanceof Node) || c.contains(f) && i.push(f); + return i; } - function v(i, s) { + function b(c, i) { let f = !1; - for (let p of i) { - if (s && a(p).then(v), !e.has(p)) + for (let l of c) { + if (i && d(l).then(b), !e.has(l)) continue; - let E = e.get(p); - E.length_c && (p.dispatchEvent(new Event("dde:connected")), E.connected = /* @__PURE__ */ new WeakSet(), E.length_c = 0, E.length_d || e.delete(p), f = !0); + let v = e.get(l); + v.length_c && (l.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(l), f = !0); } return f; } - function x(i, s) { + function x(c, i) { let f = !1; - for (let p of i) - s && a(p).then(x), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), f = !0); + for (let l of c) + i && d(l).then(x), !(!e.has(l) || !e.get(l).length_d) && (l.dispatchEvent(new Event("dde:disconnected")), e.delete(l), f = !0); return f; } } @@ -273,10 +288,10 @@ function J() { }); // src/signals-lib.js -var d = Symbol.for("Signal"); -function _(e) { +var p = Symbol.for("Signal"); +function R(e) { try { - return Reflect.has(e, d); + return Reflect.has(e, p); } catch { return !1; } @@ -284,128 +299,128 @@ function _(e) { var h = /* @__PURE__ */ new WeakMap(); function g(e, t) { if (typeof e != "function") - return U(e, t); - if (_(e)) + return $(e, t); + if (R(e)) return e; - let n = U(""), r = () => n(e()); - return h.set(r, /* @__PURE__ */ new Set([n])), K(r), n; + let n = $(""), r = () => n(e()); + return h.set(r, /* @__PURE__ */ new Set([n])), Q(r), n; } g.action = function(e, t, ...n) { - let r = e[d], { actions: o } = r; + let r = e[p], { actions: o } = r; if (!o || !Reflect.has(o, t)) throw new Error(`'${e}' has no action with name '${t}'!`); if (o[t].apply(r, n), r.skip) return Reflect.deleteProperty(r, "skip"); - r.listeners.forEach((c) => c(r.value)); + r.listeners.forEach((u) => u(r.value)); }; g.on = function e(t, n, r = {}) { let { signal: o } = r; if (!(o && o.aborted)) { if (Array.isArray(t)) - return t.forEach((c) => e(c, n, r)); - N(t, n), o && o.addEventListener("abort", () => k(t, n)); + return t.forEach((u) => e(u, n, r)); + D(t, n), o && o.addEventListener("abort", () => q(t, n)); } }; g.symbols = { - signal: d, + signal: p, onclear: Symbol.for("Signal.onclear") }; g.clear = function(...e) { 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); + let r = n[p], { onclear: o } = g.symbols; + r.actions && r.actions[o] && r.actions[o].call(r), t(n, r), Reflect.deleteProperty(n, p); } function t(n, r) { r.listeners.forEach((o) => { if (r.listeners.delete(o), !h.has(o)) return; - let c = h.get(o); - c.delete(n), !(c.size > 1) && (g.clear(...c), h.delete(o)); + let u = h.get(o); + u.delete(n), !(u.size > 1) && (g.clear(...u), h.delete(o)); }); } }; g.el = function(e, t) { let n = document.createComment("<#reactive>"), r = document.createComment(""), o = document.createDocumentFragment(); o.append(n, r); - let c = (l) => { + let u = (a) => { if (!n.parentNode || !r.parentNode) - return k(e, c); - let u = t(l); - Array.isArray(u) || (u = [u]); - let a = n; - for (; (a = n.nextSibling) !== r; ) - a.remove(); - n.after(...u); + return q(e, u); + let s = t(a); + Array.isArray(s) || (s = [s]); + let d = n; + for (; (d = n.nextSibling) !== r; ) + d.remove(); + n.after(...s); }; - return N(e, c), c(e()), o; + return D(e, u), u(e()), o; }; -var $ = { - isSignal: _, +var k = { + isSignal: R, processReactiveAttribute(e, t, n, r) { - return _(n) ? (N(n, (o) => r([t, o])), n()) : n; + return R(n) ? (D(n, (o) => r([t, o])), n()) : n; } }; -function U(e, t) { - let n = (...r) => r.length ? Y(n, r[0]) : X(n); - return Z(n, e, t); +function $(e, t) { + let n = (...r) => r.length ? ee(n, r[0]) : Y(n); + return K(n, e, t); } -var V = Object.assign(/* @__PURE__ */ Object.create(null), { +var Z = Object.assign(/* @__PURE__ */ Object.create(null), { stopPropagation() { this.skip = !0; } }); -function Z(e, t, n) { - return D(n) !== "[object Object]" && (n = {}), e[d] = { +function K(e, t, n) { + return P(n) !== "[object Object]" && (n = {}), e[p] = { value: t, actions: n, listeners: /* @__PURE__ */ new Set() - }, e.toJSON = () => e(), Object.setPrototypeOf(e[d], V), e; + }, e.toJSON = () => e(), Object.setPrototypeOf(e[p], Z), e; } -var R = []; -function K(e) { +var A = []; +function Q(e) { let t = function() { - R.push(t), e(), R.pop(); + A.push(t), e(), A.pop(); }; h.has(e) && (h.set(t, h.get(e)), h.delete(e)), t(); } -function Q() { - return R[R.length - 1]; +function X() { + return A[A.length - 1]; } -function X(e) { - if (!e[d]) +function Y(e) { + if (!e[p]) return; - let { value: t, listeners: n } = e[d], r = Q(); + let { value: t, listeners: n } = e[p], r = X(); return r && n.add(r), h.has(r) && h.get(r).add(e), t; } -function Y(e, t) { - if (!e[d]) +function ee(e, t) { + if (!e[p]) return; - let n = e[d]; + let n = e[p]; if (n.value !== t) return n.value = t, n.listeners.forEach((r) => r(t)), t; } -function N(e, t) { - if (e[d]) - return e[d].listeners.add(t); +function D(e, t) { + if (e[p]) + return e[p].listeners.add(t); } -function k(e, t) { - if (e[d]) - return e[d].listeners.delete(t); +function q(e, t) { + if (e[p]) + return e[p].listeners.delete(t); } // signals.js -A($); +C(k); export { g as S, y as assign, B as classListDeclarative, - ie as createElement, + se as createElement, de as dispatchEvent, - ie as el, + se as el, fe as empty, - _ as isSignal, - T as on, - A as registerReactivity, - ce as scope + R as isSignal, + U as on, + C as registerReactivity, + O as scope }; diff --git a/dist/esm.js b/dist/esm.js index 638b69f..0950d81 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -1,21 +1,21 @@ // src/signals-common.js -var E = { +var m = { isSignal(e) { return !1; }, - processReactiveAttribute(e, t, r, n) { - return r; + processReactiveAttribute(e, t, n, r) { + return n; } }; -function N(e, t = !0) { - return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e); +function P(e, t = !0) { + return t ? Object.assign(m, e) : (Object.setPrototypeOf(e, m), e); } -function m(e) { - return E.isPrototypeOf(e) && e !== E ? e : E; +function b(e) { + return m.isPrototypeOf(e) && e !== m ? e : m; } // src/helpers.js -function p(e) { +function l(e) { return typeof e > "u"; } function _(e, t) { @@ -28,9 +28,9 @@ function _(e, t) { } // src/dom-common.js -var O = { setDeleteAttr: P }; -function P(e, t, r) { - if (Reflect.set(e, t, r), !!p(r)) { +var R = { setDeleteAttr: j }; +function j(e, t, n) { + if (Reflect.set(e, t, n), !!l(n)) { if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined") return e.removeAttribute(t); if (Reflect.get(e, t) === "undefined") @@ -39,154 +39,169 @@ function P(e, t, r) { } // src/dom.js -var h = "html", S = { +var v = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.body) : document.body }], C = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, x = { + get current() { + return v[v.length - 1]; + }, + get state() { + return [...v]; + }, + get host() { + return this.current.host; + }, + get namespace() { + return this.current.namespace; + }, + set namespace(e) { + return this.current.namespace = C(e); + }, elNamespace(e) { - return h = e === "svg" ? "http://www.w3.org/2000/svg" : e, { - append(...t) { - return h = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); + let t = this.namespace; + return this.namespace = e, { + append(...n) { + return x.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n); } }; }, - get namespace() { - return h; + push(e = {}) { + return e.namespace && (e.namespace = C(e.namespace)), v.push(Object.assign({}, this.current, e)); }, - set namespace(e) { - return h = e; + pop() { + return v.pop(); } -}, H = Object.assign((e) => e ? e(document.body) : document.body, S); -function I(e, t, ...r) { - let n = this, u = m(this), i; +}; +function I(e, t, ...n) { + let r = this, u = b(this), { namespace: d } = x, f; switch ((Object(t) !== t || u.isSignal(t)) && (t = { textContent: t }), !0) { case typeof e == "function": { - let a = Object.assign((f) => f ? (r.unshift(f), void 0) : i, S); - i = e(t || void 0, a), h = "html"; + x.push({ scope: e, host: (i) => i ? (n.unshift(i), void 0) : f }), f = e(t || void 0), x.pop(); break; } case e === "#text": - i = w.call(n, document.createTextNode(""), t); + f = w.call(r, document.createTextNode(""), t); break; case e === "<>": - i = w.call(n, document.createDocumentFragment(), t); + f = w.call(r, document.createDocumentFragment(), t); break; - case h !== "html": - i = w.call(n, document.createElementNS(h, e), t); + case d !== "html": + f = w.call(r, document.createElementNS(d, e), t); break; - case !i: - i = w.call(n, document.createElement(e), t); + case !f: + f = w.call(r, document.createElement(e), t); } - return r.forEach((a) => a(i)), i; + return n.forEach((i) => i(f)), f; } -var { setDeleteAttr: R } = O; +var { setDeleteAttr: S } = R; function w(e, ...t) { - let r = this, n = m(this); + let n = this, r = b(this); if (!t.length) return e; - let i = (e instanceof SVGElement ? T : M).bind(null, e, "Attribute"); - return Object.entries(Object.assign({}, ...t)).forEach(function a([f, d]) { - d = n.processReactiveAttribute(e, f, d, a); - let [g] = f; - if (g === "=") - return i(f.slice(1), d); - if (g === ".") - return C(e, f.slice(1), d); - if (/(aria|data)([A-Z])/.test(f)) - return f = f.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), i(f, d); - switch (f === "className" && (f = "class"), f) { + let d = (e instanceof SVGElement ? U : T).bind(null, e, "Attribute"); + return Object.entries(Object.assign({}, ...t)).forEach(function f([i, a]) { + a = r.processReactiveAttribute(e, i, a, f); + let [h] = i; + if (h === "=") + return d(i.slice(1), a); + if (h === ".") + return y(e, i.slice(1), a); + if (/(aria|data)([A-Z])/.test(i)) + return i = i.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), d(i, a); + switch (i === "className" && (i = "class"), i) { case "xlink:href": - return i(f, d, "http://www.w3.org/1999/xlink"); + return d(i, a, "http://www.w3.org/1999/xlink"); case "textContent": - return R(e, f, d); + return S(e, i, a); case "style": - if (typeof d != "object") + if (typeof a != "object") break; case "dataset": - return A(n, d, C.bind(null, e[f])); + return O(r, a, y.bind(null, e[i])); case "ariaset": - return A(n, d, (b, c) => i("aria-" + b, c)); + return O(r, a, (E, c) => d("aria-" + E, c)); case "classList": - return j.call(r, e, d); + return F.call(n, e, a); } - return F(e, f) ? R(e, f, d) : i(f, d); + return M(e, i) ? S(e, i, a) : d(i, a); }), e; } -function j(e, t) { - let r = m(this); - return A( - r, +function F(e, t) { + let n = b(this); + return O( + n, t, - (n, u) => e.classList.toggle(n, u === -1 ? void 0 : !!u) + (r, u) => e.classList.toggle(r, u === -1 ? void 0 : !!u) ), e; } function Z(e) { return Array.from(e.children).forEach((t) => t.remove()), e; } -function F(e, t) { +function M(e, t) { if (!Reflect.has(e, t)) return !1; - let r = y(e, t); - return !p(r.set); + let n = D(e, t); + return !l(n.set); } -function y(e, t) { +function D(e, t) { if (e = Object.getPrototypeOf(e), !e) return {}; - let r = Object.getOwnPropertyDescriptor(e, t); - return r || y(e, t); + let n = Object.getOwnPropertyDescriptor(e, t); + return n || D(e, t); } -function A(e, t, r) { +function O(e, t, n) { if (!(typeof t != "object" || t === null)) - return Object.entries(t).forEach(function([u, i]) { - u && (i = e.processReactiveAttribute(t, u, i, (a) => r(...a)), r(u, i)); + return Object.entries(t).forEach(function([u, d]) { + u && (d = e.processReactiveAttribute(t, u, d, (f) => n(...f)), n(u, d)); }); } -function D(e) { +function L(e) { return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; } -function M(e, t, r, n) { - return e[(p(n) ? "remove" : "set") + t](r, D(n)); +function T(e, t, n, r) { + return e[(l(r) ? "remove" : "set") + t](n, L(r)); } -function T(e, t, r, n, u = null) { - return e[(p(n) ? "remove" : "set") + t + "NS"](u, r, D(n)); +function U(e, t, n, r, u = null) { + return e[(l(r) ? "remove" : "set") + t + "NS"](u, n, L(r)); } -function C(e, t, r) { - if (Reflect.set(e, t, r), !!p(r)) +function y(e, t, n) { + if (Reflect.set(e, t, n), !!l(n)) return Reflect.deleteProperty(e, t); } // src/events.js -function K(e, t, ...r) { - let n = r.length ? new CustomEvent(t, { detail: r[0] }) : new Event(t); - return e.dispatchEvent(n); +function K(e, t, ...n) { + let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); + return e.dispatchEvent(r); } -function L(e, t, r) { +function N(e, t, n) { return function(u) { - return u.addEventListener(e, t, r), u; + return u.addEventListener(e, t, n), u; }; } -var x = U(); -L.connected = function(e, t) { - return typeof t != "object" && (t = {}), t.once = !0, function(n) { - return n.addEventListener("dde:connected", e, t), typeof n.connectedCallback == "function" ? n : n.isConnected ? (n.dispatchEvent(new Event("dde:connected")), n) : (_(t.signal, () => x.offConnected(n, e)) && x.onConnected(n, e), n); +var A = W(); +N.connected = function(e, t) { + return typeof t != "object" && (t = {}), t.once = !0, function(r) { + return r.addEventListener("dde:connected", e, t), typeof r.connectedCallback == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event("dde:connected")), r) : (_(t.signal, () => A.offConnected(r, e)) && A.onConnected(r, e), r); }; }; -L.disconnected = function(e, t) { - return typeof t != "object" && (t = {}), t.once = !0, function(n) { - return n.addEventListener("dde:disconnected", e, t), typeof n.disconnectedCallback == "function" || _(t.signal, () => x.offDisconnected(n, e)) && x.onDisconnected(n, e), n; +N.disconnected = function(e, t) { + return typeof t != "object" && (t = {}), t.once = !0, function(r) { + return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || _(t.signal, () => A.offDisconnected(r, e)) && A.onDisconnected(r, e), r; }; }; -function U() { - let e = /* @__PURE__ */ new Map(), t = !1, r = new MutationObserver(function(c) { +function W() { + let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) { for (let o of c) if (o.type === "childList") { - if (g(o.addedNodes, !0)) { - a(); + if (h(o.addedNodes, !0)) { + f(); continue; } - b(o.removedNodes, !0) && a(); + E(o.removedNodes, !0) && f(); } }); return { onConnected(c, o) { - i(); + d(); let s = u(c); s.connected.has(o) || (s.connected.add(o), s.length_c += 1); }, @@ -194,10 +209,10 @@ function U() { if (!e.has(c)) return; let s = e.get(c); - s.connected.has(o) && (s.connected.delete(o), s.length_c -= 1, n(c, s)); + s.connected.has(o) && (s.connected.delete(o), s.length_c -= 1, r(c, s)); }, onDisconnected(c, o) { - i(); + d(); let s = u(c); s.disconnected.has(o) || (s.disconnected.add(o), s.length_d += 1); }, @@ -205,11 +220,11 @@ function U() { if (!e.has(c)) return; let s = e.get(c); - s.disconnected.has(o) && (s.disconnected.delete(o), s.length_d -= 1, n(c, s)); + s.disconnected.has(o) && (s.disconnected.delete(o), s.length_d -= 1, r(c, s)); } }; - function n(c, o) { - o.length_c || o.length_d || (e.delete(c), a()); + function r(c, o) { + o.length_c || o.length_d || (e.delete(c), f()); } function u(c) { if (e.has(c)) @@ -222,19 +237,19 @@ function U() { }; return e.set(c, o), o; } - function i() { - t || (t = !0, r.observe(document.body, { childList: !0, subtree: !0 })); - } - function a() { - !t || e.size || (t = !1, r.disconnect()); + function d() { + t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); } function f() { + !t || e.size || (t = !1, n.disconnect()); + } + function i() { return new Promise(function(c) { (requestIdleCallback || requestAnimationFrame)(c); }); } - async function d(c) { - e.size > 30 && await f(); + async function a(c) { + e.size > 30 && await i(); let o = []; if (!(c instanceof Node)) return o; @@ -242,20 +257,20 @@ function U() { s === c || !(s instanceof Node) || c.contains(s) && o.push(s); return o; } - function g(c, o) { + function h(c, o) { let s = !1; - for (let l of c) { - if (o && d(l).then(g), !e.has(l)) + for (let p of c) { + if (o && a(p).then(h), !e.has(p)) continue; - let v = e.get(l); - v.length_c && (l.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(l), s = !0); + let g = e.get(p); + g.length_c && (p.dispatchEvent(new Event("dde:connected")), g.connected = /* @__PURE__ */ new WeakSet(), g.length_c = 0, g.length_d || e.delete(p), s = !0); } return s; } - function b(c, o) { + function E(c, o) { let s = !1; - for (let l of c) - o && d(l).then(b), !(!e.has(l) || !e.get(l).length_d) && (l.dispatchEvent(new Event("dde:disconnected")), e.delete(l), s = !0); + for (let p of c) + o && a(p).then(E), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), s = !0); return s; } } @@ -263,18 +278,18 @@ function U() { // index.js [HTMLElement, SVGElement, 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; }; }); export { w as assign, - j as classListDeclarative, + F as classListDeclarative, I as createElement, K as dispatchEvent, I as el, Z as empty, - L as on, - N as registerReactivity, - H as scope + N as on, + P as registerReactivity, + x as scope }; diff --git a/examples/components/fullNameComponent.js b/examples/components/fullNameComponent.js index 1151708..f577a5c 100644 --- a/examples/components/fullNameComponent.js +++ b/examples/components/fullNameComponent.js @@ -1,17 +1,17 @@ -import { style, el, on, S } from '../exports.js'; +import { style, el, on, S, scope } from '../exports.js'; const className= style.host(fullNameComponent).css` :host form{ display: flex; flex-flow: column nowrap; } `; -export function fullNameComponent(_, scope){ +export function fullNameComponent(){ const labels= [ "Name", "Surname" ]; const name= labels.map(_=> S("")); const full_name= S(()=> name.map(l=> l()).filter(Boolean).join(" ") || "-"); - scope(on.connected(()=> console.log(fullNameComponent))); - scope(on.disconnected(()=> console.log(fullNameComponent))) + scope.host(on.connected(()=> console.log(fullNameComponent))); + scope.host(on.disconnected(()=> console.log(fullNameComponent))) return el("div", { className }).append( el("h2", "Simple form:"), diff --git a/examples/components/todosComponent.js b/examples/components/todosComponent.js index 5c94c62..48b8a21 100644 --- a/examples/components/todosComponent.js +++ b/examples/components/todosComponent.js @@ -1,4 +1,4 @@ -import { style, el, dispatchEvent, on, S } from '../exports.js'; +import { style, el, dispatchEvent, on, S, scope } from '../exports.js'; const className= style.host(todosComponent).css` :host{ display: flex; @@ -18,7 +18,7 @@ const className= style.host(todosComponent).css` export function todosComponent({ todos= [ "Task A" ] }= {}){ const todosS= S(todos.map(t=> S(t)), { add(v){ this.value.push(S(v)); }, - remove(i){ this.value.splice(i, 1); }, + remove(i){ S.clear(this.value.splice(i, 1)[0]); }, [S.symbols.onclear](){ S.clear(...this.value); }, }); const name= "todoName"; @@ -65,7 +65,8 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){ * [ "click" ] * >} * */ -function todoComponent({ textContent, value }, host){ +function todoComponent({ textContent, value }){ + const { host }= scope; const onclick= on("click", event=> { const value= Number(event.target.value); event.preventDefault(); diff --git a/examples/components/webComponent.js b/examples/components/webComponent.js index 303a025..36c7d00 100644 --- a/examples/components/webComponent.js +++ b/examples/components/webComponent.js @@ -1,4 +1,4 @@ -import { el } from "../../index.js"; +import { el, scope } from "../../index.js"; import { S } from "../../signals.js"; const { hasOwnProperty }= Object.prototype; @@ -16,9 +16,10 @@ export class CustomHTMLTestElement extends HTMLElement{ ); } - render({ name, test, preName }, host){ - host(on.connected(()=> console.log(CustomHTMLTestElement))); - host(on.disconnected(()=> console.log(CustomHTMLTestElement))); + render({ name, test, preName }){ + console.log(scope.state); + scope.host(on.connected(()=> console.log(CustomHTMLTestElement))); + scope.host(on.disconnected(()=> console.log(CustomHTMLTestElement))); return el("p").append( el("#text", { textContent: name }), el("#text", { textContent: test }), @@ -36,8 +37,10 @@ customElementsAssign( customElements.define("custom-test", CustomHTMLTestElement); function customElementRender(_this, attrs, render){ - const host= (...a)=> a.length ? a[0](_this) : _this; - return render(attrs, host); + scope.push({ scope: _this, host: (...a)=> a.length ? a[0](_this) : _this }); + const out= render(attrs); + scope.pop(); + return out; } /** @returns {HTMLElement} */ function customElementsAssign(class_base, ...automatize){ diff --git a/src/dom.js b/src/dom.js index 7c2dc63..75eb7f6 100644 --- a/src/dom.js +++ b/src/dom.js @@ -1,41 +1,51 @@ import { signals } from "./signals-common.js"; -/** @type {"html"|"svg"|string} */ -let namespace_curr= "html"; -const scopes= { +/** @type {{ namespace: "html"|string, host: function }[]} */ +const scopes= [ { scope: document.body, namespace: "html", host: c=> c ? c(document.body) : document.body } ]; +const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns; +export const scope= { + get current(){ return scopes[scopes.length-1]; }, + get state(){ return [ ...scopes ]; }, + get host(){ return this.current.host; }, + get namespace(){ return this.current.namespace; }, + set namespace(namespace){ return ( this.current.namespace= namespaceHelper(namespace)); }, elNamespace(namespace){ - namespace_curr= namespace==="svg" ? "http://www.w3.org/2000/svg" : namespace; + const ns= this.namespace; + this.namespace= namespace; return { - append(...el){ - namespace_curr= "html"; - if(el.length===1) return el[0]; + append(...els){ + scope.namespace= ns; + if(els.length===1) return els[0]; const f= document.createDocumentFragment(); - return f.append(...el); + return f.append(...els); } }; }, - get namespace(){ return namespace_curr; }, - set namespace(v){ return ( namespace_curr= v ); }, + push(s= {}){ + if(s.namespace) s.namespace= namespaceHelper(s.namespace); + return scopes.push(Object.assign({}, this.current, s)); + }, + pop(){ return scopes.pop(); }, }; -export const scope= Object.assign(c=> c ? c(document.body) : document.body, scopes); export function createElement(tag, attributes, ...connect){ const _this= this; const s= signals(this); + const { namespace }= scope; let el; //TODO Array.isArray(tag) ⇒ set key (cache els) if(Object(attributes)!==attributes || s.isSignal(attributes)) attributes= { textContent: attributes }; switch(true){ case typeof tag==="function": { - const scope= Object.assign(c=> c ? (connect.unshift(c), undefined) : el, scopes); - el= tag(attributes || undefined, scope); - namespace_curr= "html"; + scope.push({ scope: tag, host: c=> c ? (connect.unshift(c), undefined) : el }); + el= tag(attributes || undefined); + scope.pop(); break; } - case tag==="#text": el= assign.call(_this, document.createTextNode(""), attributes); break; - case tag==="<>": el= assign.call(_this, document.createDocumentFragment(), attributes); break; - case namespace_curr!=="html": el= assign.call(_this, document.createElementNS(namespace_curr, tag), attributes); break; - case !el: el= assign.call(_this, document.createElement(tag), attributes); + case tag==="#text": el= assign.call(_this, document.createTextNode(""), attributes); break; + case tag==="<>": el= assign.call(_this, document.createDocumentFragment(), attributes); break; + case namespace!=="html": el= assign.call(_this, document.createElementNS(namespace, tag), attributes); break; + case !el: el= assign.call(_this, document.createElement(tag), attributes); } connect.forEach(c=> c(el)); return el;