From ebbb76e9a00a7f18db53a3b7ba58b997dee08145 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Mon, 9 Oct 2023 13:49:38 +0200 Subject: [PATCH] :rocket: use native listeners & `scope` --- bs/build.js | 2 +- dist/dde-with-signals.js | 269 +++++++++++---------- dist/dde.js | 283 ++++++++++++----------- dist/esm-with-signals.js | 269 +++++++++++---------- dist/esm.js | 283 ++++++++++++----------- examples/components/fullNameComponent.js | 8 +- examples/components/webComponent.js | 3 +- index.d.ts | 8 +- package-lock.json | 4 +- package.json | 6 +- src/dom.js | 32 +-- src/events.js | 80 ++++--- 12 files changed, 668 insertions(+), 579 deletions(-) diff --git a/bs/build.js b/bs/build.js index 39d901e..8650dab 100755 --- a/bs/build.js +++ b/bs/build.js @@ -25,7 +25,7 @@ function toDDE(file, out){ const name= "dde"; echo(`\n ${out} (${file} → globalThis.${name})\n`); - let content= s.cat(file).toString().split("export {"); + let content= s.cat(file).toString().split(/export ?{/); content.splice(1, 0, `\nglobalThis.${name}= {`); content[2]= content[2].replace(/^(\t*)(.*) as ([^,\n]*)(,?)$/mg, "$1$3: $2$4"); s.echo([ diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js index f7641d0..8079c0b 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 E = { + var w = { isSignal(e) { return !1; }, @@ -9,22 +9,22 @@ return n; } }; - function C(e, t = !0) { - return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e); + function A(e, t = !0) { + return t ? Object.assign(w, e) : (Object.setPrototypeOf(e, w), e); } - function x(e) { - return E.isPrototypeOf(e) && e !== E ? e : E; + function S(e) { + return w.isPrototypeOf(e) && e !== w ? e : w; } // src/helpers.js function m(e) { return typeof e > "u"; } - function N(e) { + function D(e) { let t = typeof e; return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e); } - function L(e, t) { + function C(e, t) { if (!e || !(e instanceof AbortSignal)) return !0; if (!e.aborted) @@ -34,8 +34,8 @@ } // src/dom-common.js - var P = { setDeleteAttr: W }; - function W(e, t, n) { + var P = { setDeleteAttr: q }; + function q(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,77 +45,85 @@ } // src/dom.js - var w = "html"; - function oe(e) { - return w = e === "svg" ? "http://www.w3.org/2000/svg" : e, { - append(...t) { - return w = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); - } - }; - } - function ce(e, t, ...n) { - let r = this, o = x(this), c; + var b = "html", F = { + 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); + } + }; + }, + get namespace() { + return b; + }, + set namespace(e) { + return b = e; + } + }, ce = Object.assign((e) => e ? e(document.body) : document.body, F); + function ie(e, t, ...n) { + let r = this, o = S(this), c; switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) { case typeof e == "function": { - c = e(t || void 0, (s) => s ? (n.unshift(s), void 0) : c); + let l = Object.assign((u) => u ? (n.unshift(u), void 0) : c, F); + c = e(t || void 0, l), b = "html"; break; } case e === "#text": - c = S.call(r, document.createTextNode(""), t); + c = y.call(r, document.createTextNode(""), t); break; case e === "<>": - c = S.call(r, document.createDocumentFragment(), t); + c = y.call(r, document.createDocumentFragment(), t); break; - case w !== "html": - c = S.call(r, document.createElementNS(w, e), t); + case b !== "html": + c = y.call(r, document.createElementNS(b, e), t); break; case !c: - c = S.call(r, document.createElement(e), t); + c = y.call(r, document.createElement(e), t); } - return n.forEach((p) => p(c)), c; + return n.forEach((l) => l(c)), c; } var { setDeleteAttr: j } = P; - function S(e, ...t) { - let n = this, r = x(this); + 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 p([s, a]) { - a = r.processReactiveAttribute(e, s, a, p); - let [b] = s; - if (b === "=") - return c(s.slice(1), a); - if (b === ".") - return F(e, s.slice(1), a); - if (/(aria|data)([A-Z])/.test(s)) - return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, a); - switch (s === "className" && (s = "class"), s) { + 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) { case "xlink:href": - return c(s, a, "http://www.w3.org/1999/xlink"); + return c(u, a, "http://www.w3.org/1999/xlink"); case "textContent": - return j(e, s, a); + return j(e, u, a); case "style": if (typeof a != "object") break; case "dataset": - return _(r, a, F.bind(null, e[s])); + return L(r, a, W.bind(null, e[u])); case "ariaset": - return _(r, a, (v, i) => c("aria-" + v, i)); + return L(r, a, (x, i) => c("aria-" + x, i)); case "classList": return B.call(n, e, a); } - return G(e, s) ? j(e, s, a) : c(s, a); + return G(e, u) ? j(e, u, a) : c(u, a); }), e; } function B(e, t) { - let n = x(this); - return _( + let n = S(this); + return L( n, t, (r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o) ), e; } - function se(e) { + function fe(e) { return Array.from(e.children).forEach((t) => t.remove()), e; } function G(e, t) { @@ -130,10 +138,10 @@ let n = Object.getOwnPropertyDescriptor(e, t); return n || M(e, t); } - function _(e, t, n) { + function L(e, t, n) { if (!(typeof t != "object" || t === null)) return Object.entries(t).forEach(function([o, c]) { - o && (c = e.processReactiveAttribute(t, o, c, (p) => n(...p)), n(o, c)); + o && (c = e.processReactiveAttribute(t, o, c, (l) => n(...l)), n(o, c)); }); } function z(e) { @@ -145,13 +153,13 @@ function I(e, t, n, r, o = null) { return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, z(r)); } - function F(e, t, n) { + function W(e, t, n) { if (Reflect.set(e, t, n), !!m(n)) return Reflect.deleteProperty(e, t); } // src/events.js - function ae(e, t, ...n) { + function de(e, t, ...n) { let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); return e.dispatchEvent(r); } @@ -162,92 +170,99 @@ } var O = J(); T.connected = function(e, t) { - return function(r) { - return typeof r.connectedCallback == "function" ? (r.addEventListener("dde:connected", e, t), r) : (L(t && t.signal, () => O.offConnected(r, e)) && (r.isConnected ? e(new Event("dde:connected")) : O.onConnected(r, e)), r); + 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); }; }; T.disconnected = function(e, t) { - return function(r) { - return typeof r.disconnectedCallback == "function" ? (r.addEventListener("dde:disconnected", e, t), r) : (L(t && t.signal, () => O.offDisconnected(r, e)) && O.onDisconnected(r, e), r); + 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; }; }; function J() { let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(i) { - for (let f of i) - if (f.type === "childList") { - if (b(f.addedNodes, !0)) { - p(); + for (let s of i) + if (s.type === "childList") { + if (v(s.addedNodes, !0)) { + l(); continue; } - v(f.removedNodes, !0) && p(); + x(s.removedNodes, !0) && l(); } }); return { - onConnected(i, f) { - c(), o(i).connected.push(f); + onConnected(i, s) { + c(); + let f = o(i); + f.connected.has(s) || (f.connected.add(s), f.length_c += 1); }, - offConnected(i, f) { + offConnected(i, s) { if (!e.has(i)) return; - let u = e.get(i), l = u.connected; - l.splice(l.indexOf(f), 1), r(i, u); + let f = e.get(i); + f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, r(i, f)); }, - onDisconnected(i, f) { - c(), o(i).disconnected.push(f); + onDisconnected(i, s) { + c(); + let f = o(i); + f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1); }, - offDisconnected(i, f) { + offDisconnected(i, s) { if (!e.has(i)) return; - let u = e.get(i), l = u.disconnected; - l.splice(l.indexOf(f), 1), r(i, u); + let f = e.get(i); + f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, r(i, f)); } }; - function r(i, f) { - f.connected.length || f.disconnected.length || (e.delete(i), p()); + function r(i, s) { + s.length_c || s.length_d || (e.delete(i), l()); } function o(i) { if (e.has(i)) return e.get(i); - let f = { connected: [], disconnected: [] }; - return e.set(i, f), f; + let s = { + 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 p() { + function l() { !t || e.size || (t = !1, n.disconnect()); } - function s() { + function u() { return new Promise(function(i) { (requestIdleCallback || requestAnimationFrame)(i); }); } async function a(i) { - e.size > 30 && await s(); - let f = []; + e.size > 30 && await u(); + let s = []; if (!(i instanceof Node)) - return f; - for (let u of e.keys()) - u === i || !(u instanceof Node) || i.contains(u) && f.push(u); + return s; + for (let f of e.keys()) + f === i || !(f instanceof Node) || i.contains(f) && s.push(f); + return s; + } + function v(i, s) { + let f = !1; + for (let p of i) { + if (s && a(p).then(v), !e.has(p)) + 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); + } return f; } - function b(i, f) { - for (let u of i) { - if (f && a(u).then(b), !e.has(u)) - continue; - let l = e.get(u); - return l.connected.forEach((A) => A(u)), l.connected.length = 0, l.disconnected.length || e.delete(u), !0; - } - return !1; - } - function v(i, f) { - for (let u of i) { - if (f && a(u).then(v), !e.has(u)) - continue; - let l = e.get(u); - return l.disconnected.forEach((A) => A(u)), l.connected.length = 0, l.disconnected.length = 0, e.delete(u), !0; - } - return !1; + function x(i, s) { + 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); + return f; } } @@ -261,7 +276,7 @@ // src/signals-lib.js var d = Symbol.for("Signal"); - function y(e) { + function _(e) { try { return Reflect.has(e, d); } catch { @@ -272,10 +287,10 @@ function g(e, t) { if (typeof e != "function") return U(e, t); - if (y(e)) + if (_(e)) return e; let n = U(""), r = () => n(e()); - return h.set(r, /* @__PURE__ */ new Set([n])), k(r), n; + return h.set(r, /* @__PURE__ */ new Set([n])), K(r), n; } g.action = function(e, t, ...n) { let r = e[d], { actions: o } = r; @@ -290,7 +305,7 @@ if (!(o && o.aborted)) { if (Array.isArray(t)) return t.forEach((c) => e(c, n, r)); - D(t, n), o && o.addEventListener("abort", () => q(t, n)); + N(t, n), o && o.addEventListener("abort", () => k(t, n)); } }; g.symbols = { @@ -315,26 +330,26 @@ g.el = function(e, t) { let n = document.createComment("<#reactive>"), r = document.createComment(""), o = document.createDocumentFragment(); o.append(n, r); - let c = (p) => { + let c = (l) => { if (!n.parentNode || !r.parentNode) - return q(e, c); - let s = t(p); - Array.isArray(s) || (s = [s]); + 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(...s); + n.after(...u); }; - return D(e, c), c(e()), o; + return N(e, c), c(e()), o; }; var $ = { - isSignal: y, + isSignal: _, processReactiveAttribute(e, t, n, r) { - return y(n) ? (D(n, (o) => r([t, o])), n()) : n; + return _(n) ? (N(n, (o) => r([t, o])), n()) : n; } }; function U(e, t) { - let n = (...r) => r.length ? X(n, r[0]) : Q(n); + let n = (...r) => r.length ? Y(n, r[0]) : X(n); return Z(n, e, t); } var V = Object.assign(/* @__PURE__ */ Object.create(null), { @@ -343,59 +358,59 @@ } }); function Z(e, t, n) { - return N(n) !== "[object Object]" && (n = {}), e[d] = { + return D(n) !== "[object Object]" && (n = {}), e[d] = { value: t, actions: n, listeners: /* @__PURE__ */ new Set() }, e.toJSON = () => e(), Object.setPrototypeOf(e[d], V), e; } var R = []; - function k(e) { + function K(e) { let t = function() { R.push(t), e(), R.pop(); }; h.has(e) && (h.set(t, h.get(e)), h.delete(e)), t(); } - function K() { + function Q() { return R[R.length - 1]; } - function Q(e) { + function X(e) { if (!e[d]) return; - let { value: t, listeners: n } = e[d], r = K(); + let { value: t, listeners: n } = e[d], r = Q(); return r && n.add(r), h.has(r) && h.get(r).add(e), t; } - function X(e, t) { + function Y(e, t) { if (!e[d]) return; let n = e[d]; if (n.value !== t) return n.value = t, n.listeners.forEach((r) => r(t)), t; } - function D(e, t) { + function N(e, t) { if (e[d]) return e[d].listeners.add(t); } - function q(e, t) { + function k(e, t) { if (e[d]) return e[d].listeners.delete(t); } // signals.js - C($); + A($); globalThis.dde= { S: g, - assign: S, + assign: y, classListDeclarative: B, - createElement: ce, - dispatchEvent: ae, - el: ce, - empty: se, - isSignal: y, - namespace: oe, + createElement: ie, + dispatchEvent: de, + el: ie, + empty: fe, + isSignal: _, on: T, - registerReactivity: C + registerReactivity: A, + scope: ce }; })(); \ No newline at end of file diff --git a/dist/dde.js b/dist/dde.js index 331df48..f9cb83f 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -1,26 +1,26 @@ //deka-dom-el library is available via global namespace `dde` (()=> { // src/signals-common.js - var g = { + var E = { isSignal(e) { return !1; }, - processReactiveAttribute(e, t, n, r) { - return n; + processReactiveAttribute(e, t, r, n) { + return r; } }; - function y(e, t = !0) { - return t ? Object.assign(g, e) : (Object.setPrototypeOf(e, g), e); + function N(e, t = !0) { + return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e); } - function v(e) { - return g.isPrototypeOf(e) && e !== g ? e : g; + function m(e) { + return E.isPrototypeOf(e) && e !== E ? e : E; } // src/helpers.js function p(e) { return typeof e > "u"; } - function w(e, t) { + function _(e, t) { if (!e || !(e instanceof AbortSignal)) return !0; if (!e.aborted) @@ -30,9 +30,9 @@ } // src/dom-common.js - var R = { setDeleteAttr: P }; - function P(e, t, n) { - if (Reflect.set(e, t, n), !!p(n)) { + var O = { setDeleteAttr: P }; + function P(e, t, r) { + if (Reflect.set(e, t, r), !!p(r)) { if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined") return e.removeAttribute(t); if (Reflect.get(e, t) === "undefined") @@ -41,230 +41,245 @@ } // src/dom.js - var x = "html"; - function H(e) { - return x = e === "svg" ? "http://www.w3.org/2000/svg" : e, { - append(...t) { - return x = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); - } - }; - } - function I(e, t, ...n) { - let r = this, u = v(this), i; + var h = "html", S = { + 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); + } + }; + }, + get namespace() { + return h; + }, + set namespace(e) { + return h = e; + } + }, H = Object.assign((e) => e ? e(document.body) : document.body, S); + function I(e, t, ...r) { + let n = this, u = m(this), i; switch ((Object(t) !== t || u.isSignal(t)) && (t = { textContent: t }), !0) { case typeof e == "function": { - i = e(t || void 0, (f) => f ? (n.unshift(f), void 0) : i); + let a = Object.assign((f) => f ? (r.unshift(f), void 0) : i, S); + i = e(t || void 0, a), h = "html"; break; } case e === "#text": - i = m.call(r, document.createTextNode(""), t); + i = w.call(n, document.createTextNode(""), t); break; case e === "<>": - i = m.call(r, document.createDocumentFragment(), t); + i = w.call(n, document.createDocumentFragment(), t); break; - case x !== "html": - i = m.call(r, document.createElementNS(x, e), t); + case h !== "html": + i = w.call(n, document.createElementNS(h, e), t); break; case !i: - i = m.call(r, document.createElement(e), t); + i = w.call(n, document.createElement(e), t); } - return n.forEach((l) => l(i)), i; + return r.forEach((a) => a(i)), i; } - var { setDeleteAttr: C } = R; - function m(e, ...t) { - let n = this, r = v(this); + var { setDeleteAttr: R } = O; + function w(e, ...t) { + let r = this, n = m(this); if (!t.length) return e; - let i = (e instanceof SVGElement ? M : F).bind(null, e, "Attribute"); - return Object.entries(Object.assign({}, ...t)).forEach(function l([f, d]) { - d = r.processReactiveAttribute(e, f, d, l); - let [h] = f; - if (h === "=") + 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 (h === ".") - return D(e, 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) { case "xlink:href": return i(f, d, "http://www.w3.org/1999/xlink"); case "textContent": - return C(e, f, d); + return R(e, f, d); case "style": if (typeof d != "object") break; case "dataset": - return O(r, d, D.bind(null, e[f])); + return A(n, d, C.bind(null, e[f])); case "ariaset": - return O(r, d, (E, o) => i("aria-" + E, o)); + return A(n, d, (b, c) => i("aria-" + b, c)); case "classList": - return _.call(n, e, d); + return j.call(r, e, d); } - return j(e, f) ? C(e, f, d) : i(f, d); + return F(e, f) ? R(e, f, d) : i(f, d); }), e; } - function _(e, t) { - let n = v(this); - return O( - n, + function j(e, t) { + let r = m(this); + return A( + r, t, - (r, u) => e.classList.toggle(r, u === -1 ? void 0 : !!u) + (n, u) => e.classList.toggle(n, u === -1 ? void 0 : !!u) ), e; } function Z(e) { return Array.from(e.children).forEach((t) => t.remove()), e; } - function j(e, t) { + function F(e, t) { if (!Reflect.has(e, t)) return !1; - let n = L(e, t); - return !p(n.set); + let r = y(e, t); + return !p(r.set); } - function L(e, t) { + function y(e, t) { if (e = Object.getPrototypeOf(e), !e) return {}; - let n = Object.getOwnPropertyDescriptor(e, t); - return n || L(e, t); + let r = Object.getOwnPropertyDescriptor(e, t); + return r || y(e, t); } - function O(e, t, n) { + function A(e, t, r) { if (!(typeof t != "object" || t === null)) return Object.entries(t).forEach(function([u, i]) { - u && (i = e.processReactiveAttribute(t, u, i, (l) => n(...l)), n(u, i)); + u && (i = e.processReactiveAttribute(t, u, i, (a) => r(...a)), r(u, i)); }); } - function S(e) { + function D(e) { return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; } - function F(e, t, n, r) { - return e[(p(r) ? "remove" : "set") + t](n, S(r)); + function M(e, t, r, n) { + return e[(p(n) ? "remove" : "set") + t](r, D(n)); } - function M(e, t, n, r, u = null) { - return e[(p(r) ? "remove" : "set") + t + "NS"](u, n, S(r)); + function T(e, t, r, n, u = null) { + return e[(p(n) ? "remove" : "set") + t + "NS"](u, r, D(n)); } - function D(e, t, n) { - if (Reflect.set(e, t, n), !!p(n)) + function C(e, t, r) { + if (Reflect.set(e, t, r), !!p(r)) return Reflect.deleteProperty(e, t); } // src/events.js - function J(e, t, ...n) { - let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); - return e.dispatchEvent(r); + function K(e, t, ...r) { + let n = r.length ? new CustomEvent(t, { detail: r[0] }) : new Event(t); + return e.dispatchEvent(n); } - function N(e, t, n) { + function L(e, t, r) { return function(u) { - return u.addEventListener(e, t, n), u; + return u.addEventListener(e, t, r), u; }; } - var b = T(); - N.connected = function(e, t) { - return function(r) { - return typeof r.connectedCallback == "function" ? (r.addEventListener("dde:connected", e, t), r) : (w(t && t.signal, () => b.offConnected(r, e)) && (r.isConnected ? e(new Event("dde:connected")) : b.onConnected(r, e)), r); + 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); }; }; - N.disconnected = function(e, t) { - return function(r) { - return typeof r.disconnectedCallback == "function" ? (r.addEventListener("dde:disconnected", e, t), r) : (w(t && t.signal, () => b.offDisconnected(r, e)) && b.onDisconnected(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; }; }; - function T() { - let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(o) { - for (let c of o) - if (c.type === "childList") { - if (h(c.addedNodes, !0)) { - l(); + function U() { + let e = /* @__PURE__ */ new Map(), t = !1, r = new MutationObserver(function(c) { + for (let o of c) + if (o.type === "childList") { + if (g(o.addedNodes, !0)) { + a(); continue; } - E(c.removedNodes, !0) && l(); + b(o.removedNodes, !0) && a(); } }); return { - onConnected(o, c) { - i(), u(o).connected.push(c); + onConnected(c, o) { + i(); + let s = u(c); + s.connected.has(o) || (s.connected.add(o), s.length_c += 1); }, - offConnected(o, c) { - if (!e.has(o)) + offConnected(c, o) { + if (!e.has(c)) return; - let s = e.get(o), a = s.connected; - a.splice(a.indexOf(c), 1), r(o, s); + let s = e.get(c); + s.connected.has(o) && (s.connected.delete(o), s.length_c -= 1, n(c, s)); }, - onDisconnected(o, c) { - i(), u(o).disconnected.push(c); + onDisconnected(c, o) { + i(); + let s = u(c); + s.disconnected.has(o) || (s.disconnected.add(o), s.length_d += 1); }, - offDisconnected(o, c) { - if (!e.has(o)) + offDisconnected(c, o) { + if (!e.has(c)) return; - let s = e.get(o), a = s.disconnected; - a.splice(a.indexOf(c), 1), r(o, s); + let s = e.get(c); + s.disconnected.has(o) && (s.disconnected.delete(o), s.length_d -= 1, n(c, s)); } }; - function r(o, c) { - c.connected.length || c.disconnected.length || (e.delete(o), l()); + function n(c, o) { + o.length_c || o.length_d || (e.delete(c), a()); } - function u(o) { - if (e.has(o)) - return e.get(o); - let c = { connected: [], disconnected: [] }; - return e.set(o, c), c; + function u(c) { + if (e.has(c)) + return e.get(c); + let o = { + connected: /* @__PURE__ */ new WeakSet(), + length_c: 0, + disconnected: /* @__PURE__ */ new WeakSet(), + length_d: 0 + }; + return e.set(c, o), o; } function i() { - t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); + t || (t = !0, r.observe(document.body, { childList: !0, subtree: !0 })); } - function l() { - !t || e.size || (t = !1, n.disconnect()); + function a() { + !t || e.size || (t = !1, r.disconnect()); } function f() { - return new Promise(function(o) { - (requestIdleCallback || requestAnimationFrame)(o); + return new Promise(function(c) { + (requestIdleCallback || requestAnimationFrame)(c); }); } - async function d(o) { + async function d(c) { e.size > 30 && await f(); - let c = []; - if (!(o instanceof Node)) - return c; + let o = []; + if (!(c instanceof Node)) + return o; for (let s of e.keys()) - s === o || !(s instanceof Node) || o.contains(s) && c.push(s); - return c; + s === c || !(s instanceof Node) || c.contains(s) && o.push(s); + return o; } - function h(o, c) { - for (let s of o) { - if (c && d(s).then(h), !e.has(s)) + function g(c, o) { + let s = !1; + for (let l of c) { + if (o && d(l).then(g), !e.has(l)) continue; - let a = e.get(s); - return a.connected.forEach((A) => A(s)), a.connected.length = 0, a.disconnected.length || e.delete(s), !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), s = !0); } - return !1; + return s; } - function E(o, c) { - for (let s of o) { - if (c && d(s).then(E), !e.has(s)) - continue; - let a = e.get(s); - return a.disconnected.forEach((A) => A(s)), a.connected.length = 0, a.disconnected.length = 0, e.delete(s), !0; - } - return !1; + function b(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); + return s; } } // index.js [HTMLElement, SVGElement, DocumentFragment].forEach((e) => { let { append: t } = e.prototype; - e.prototype.append = function(...n) { - return t.apply(this, n), this; + e.prototype.append = function(...r) { + return t.apply(this, r), this; }; }); globalThis.dde= { - assign: m, - classListDeclarative: _, + assign: w, + classListDeclarative: j, createElement: I, - dispatchEvent: J, + dispatchEvent: K, el: I, empty: Z, - namespace: H, - on: N, - registerReactivity: y + on: L, + registerReactivity: N, + scope: H }; })(); \ No newline at end of file diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index ddaa65c..7409c84 100644 --- a/dist/esm-with-signals.js +++ b/dist/esm-with-signals.js @@ -1,5 +1,5 @@ // src/signals-common.js -var E = { +var w = { isSignal(e) { return !1; }, @@ -7,22 +7,22 @@ var E = { return n; } }; -function C(e, t = !0) { - return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e); +function A(e, t = !0) { + return t ? Object.assign(w, e) : (Object.setPrototypeOf(e, w), e); } -function x(e) { - return E.isPrototypeOf(e) && e !== E ? e : E; +function S(e) { + return w.isPrototypeOf(e) && e !== w ? e : w; } // src/helpers.js function m(e) { return typeof e > "u"; } -function N(e) { +function D(e) { let t = typeof e; return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e); } -function L(e, t) { +function C(e, t) { if (!e || !(e instanceof AbortSignal)) return !0; if (!e.aborted) @@ -32,8 +32,8 @@ function L(e, t) { } // src/dom-common.js -var P = { setDeleteAttr: W }; -function W(e, t, n) { +var P = { setDeleteAttr: q }; +function q(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,77 +43,85 @@ function W(e, t, n) { } // src/dom.js -var w = "html"; -function oe(e) { - return w = e === "svg" ? "http://www.w3.org/2000/svg" : e, { - append(...t) { - return w = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); - } - }; -} -function ce(e, t, ...n) { - let r = this, o = x(this), c; +var b = "html", F = { + 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); + } + }; + }, + get namespace() { + return b; + }, + set namespace(e) { + return b = e; + } +}, ce = Object.assign((e) => e ? e(document.body) : document.body, F); +function ie(e, t, ...n) { + let r = this, o = S(this), c; switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) { case typeof e == "function": { - c = e(t || void 0, (s) => s ? (n.unshift(s), void 0) : c); + let l = Object.assign((u) => u ? (n.unshift(u), void 0) : c, F); + c = e(t || void 0, l), b = "html"; break; } case e === "#text": - c = S.call(r, document.createTextNode(""), t); + c = y.call(r, document.createTextNode(""), t); break; case e === "<>": - c = S.call(r, document.createDocumentFragment(), t); + c = y.call(r, document.createDocumentFragment(), t); break; - case w !== "html": - c = S.call(r, document.createElementNS(w, e), t); + case b !== "html": + c = y.call(r, document.createElementNS(b, e), t); break; case !c: - c = S.call(r, document.createElement(e), t); + c = y.call(r, document.createElement(e), t); } - return n.forEach((p) => p(c)), c; + return n.forEach((l) => l(c)), c; } var { setDeleteAttr: j } = P; -function S(e, ...t) { - let n = this, r = x(this); +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 p([s, a]) { - a = r.processReactiveAttribute(e, s, a, p); - let [b] = s; - if (b === "=") - return c(s.slice(1), a); - if (b === ".") - return F(e, s.slice(1), a); - if (/(aria|data)([A-Z])/.test(s)) - return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, a); - switch (s === "className" && (s = "class"), s) { + 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) { case "xlink:href": - return c(s, a, "http://www.w3.org/1999/xlink"); + return c(u, a, "http://www.w3.org/1999/xlink"); case "textContent": - return j(e, s, a); + return j(e, u, a); case "style": if (typeof a != "object") break; case "dataset": - return _(r, a, F.bind(null, e[s])); + return L(r, a, W.bind(null, e[u])); case "ariaset": - return _(r, a, (v, i) => c("aria-" + v, i)); + return L(r, a, (x, i) => c("aria-" + x, i)); case "classList": return B.call(n, e, a); } - return G(e, s) ? j(e, s, a) : c(s, a); + return G(e, u) ? j(e, u, a) : c(u, a); }), e; } function B(e, t) { - let n = x(this); - return _( + let n = S(this); + return L( n, t, (r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o) ), e; } -function se(e) { +function fe(e) { return Array.from(e.children).forEach((t) => t.remove()), e; } function G(e, t) { @@ -128,10 +136,10 @@ function M(e, t) { let n = Object.getOwnPropertyDescriptor(e, t); return n || M(e, t); } -function _(e, t, n) { +function L(e, t, n) { if (!(typeof t != "object" || t === null)) return Object.entries(t).forEach(function([o, c]) { - o && (c = e.processReactiveAttribute(t, o, c, (p) => n(...p)), n(o, c)); + o && (c = e.processReactiveAttribute(t, o, c, (l) => n(...l)), n(o, c)); }); } function z(e) { @@ -143,13 +151,13 @@ function H(e, t, n, r) { function I(e, t, n, r, o = null) { return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, z(r)); } -function F(e, t, n) { +function W(e, t, n) { if (Reflect.set(e, t, n), !!m(n)) return Reflect.deleteProperty(e, t); } // src/events.js -function ae(e, t, ...n) { +function de(e, t, ...n) { let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); return e.dispatchEvent(r); } @@ -160,92 +168,99 @@ function T(e, t, n) { } var O = J(); T.connected = function(e, t) { - return function(r) { - return typeof r.connectedCallback == "function" ? (r.addEventListener("dde:connected", e, t), r) : (L(t && t.signal, () => O.offConnected(r, e)) && (r.isConnected ? e(new Event("dde:connected")) : O.onConnected(r, e)), r); + 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); }; }; T.disconnected = function(e, t) { - return function(r) { - return typeof r.disconnectedCallback == "function" ? (r.addEventListener("dde:disconnected", e, t), r) : (L(t && t.signal, () => O.offDisconnected(r, e)) && O.onDisconnected(r, e), r); + 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; }; }; function J() { let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(i) { - for (let f of i) - if (f.type === "childList") { - if (b(f.addedNodes, !0)) { - p(); + for (let s of i) + if (s.type === "childList") { + if (v(s.addedNodes, !0)) { + l(); continue; } - v(f.removedNodes, !0) && p(); + x(s.removedNodes, !0) && l(); } }); return { - onConnected(i, f) { - c(), o(i).connected.push(f); + onConnected(i, s) { + c(); + let f = o(i); + f.connected.has(s) || (f.connected.add(s), f.length_c += 1); }, - offConnected(i, f) { + offConnected(i, s) { if (!e.has(i)) return; - let u = e.get(i), l = u.connected; - l.splice(l.indexOf(f), 1), r(i, u); + let f = e.get(i); + f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, r(i, f)); }, - onDisconnected(i, f) { - c(), o(i).disconnected.push(f); + onDisconnected(i, s) { + c(); + let f = o(i); + f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1); }, - offDisconnected(i, f) { + offDisconnected(i, s) { if (!e.has(i)) return; - let u = e.get(i), l = u.disconnected; - l.splice(l.indexOf(f), 1), r(i, u); + let f = e.get(i); + f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, r(i, f)); } }; - function r(i, f) { - f.connected.length || f.disconnected.length || (e.delete(i), p()); + function r(i, s) { + s.length_c || s.length_d || (e.delete(i), l()); } function o(i) { if (e.has(i)) return e.get(i); - let f = { connected: [], disconnected: [] }; - return e.set(i, f), f; + let s = { + 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 p() { + function l() { !t || e.size || (t = !1, n.disconnect()); } - function s() { + function u() { return new Promise(function(i) { (requestIdleCallback || requestAnimationFrame)(i); }); } async function a(i) { - e.size > 30 && await s(); - let f = []; + e.size > 30 && await u(); + let s = []; if (!(i instanceof Node)) - return f; - for (let u of e.keys()) - u === i || !(u instanceof Node) || i.contains(u) && f.push(u); + return s; + for (let f of e.keys()) + f === i || !(f instanceof Node) || i.contains(f) && s.push(f); + return s; + } + function v(i, s) { + let f = !1; + for (let p of i) { + if (s && a(p).then(v), !e.has(p)) + 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); + } return f; } - function b(i, f) { - for (let u of i) { - if (f && a(u).then(b), !e.has(u)) - continue; - let l = e.get(u); - return l.connected.forEach((A) => A(u)), l.connected.length = 0, l.disconnected.length || e.delete(u), !0; - } - return !1; - } - function v(i, f) { - for (let u of i) { - if (f && a(u).then(v), !e.has(u)) - continue; - let l = e.get(u); - return l.disconnected.forEach((A) => A(u)), l.connected.length = 0, l.disconnected.length = 0, e.delete(u), !0; - } - return !1; + function x(i, s) { + 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); + return f; } } @@ -259,7 +274,7 @@ function J() { // src/signals-lib.js var d = Symbol.for("Signal"); -function y(e) { +function _(e) { try { return Reflect.has(e, d); } catch { @@ -270,10 +285,10 @@ var h = /* @__PURE__ */ new WeakMap(); function g(e, t) { if (typeof e != "function") return U(e, t); - if (y(e)) + if (_(e)) return e; let n = U(""), r = () => n(e()); - return h.set(r, /* @__PURE__ */ new Set([n])), k(r), n; + return h.set(r, /* @__PURE__ */ new Set([n])), K(r), n; } g.action = function(e, t, ...n) { let r = e[d], { actions: o } = r; @@ -288,7 +303,7 @@ g.on = function e(t, n, r = {}) { if (!(o && o.aborted)) { if (Array.isArray(t)) return t.forEach((c) => e(c, n, r)); - D(t, n), o && o.addEventListener("abort", () => q(t, n)); + N(t, n), o && o.addEventListener("abort", () => k(t, n)); } }; g.symbols = { @@ -313,26 +328,26 @@ g.clear = function(...e) { g.el = function(e, t) { let n = document.createComment("<#reactive>"), r = document.createComment(""), o = document.createDocumentFragment(); o.append(n, r); - let c = (p) => { + let c = (l) => { if (!n.parentNode || !r.parentNode) - return q(e, c); - let s = t(p); - Array.isArray(s) || (s = [s]); + 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(...s); + n.after(...u); }; - return D(e, c), c(e()), o; + return N(e, c), c(e()), o; }; var $ = { - isSignal: y, + isSignal: _, processReactiveAttribute(e, t, n, r) { - return y(n) ? (D(n, (o) => r([t, o])), n()) : n; + return _(n) ? (N(n, (o) => r([t, o])), n()) : n; } }; function U(e, t) { - let n = (...r) => r.length ? X(n, r[0]) : Q(n); + let n = (...r) => r.length ? Y(n, r[0]) : X(n); return Z(n, e, t); } var V = Object.assign(/* @__PURE__ */ Object.create(null), { @@ -341,56 +356,56 @@ var V = Object.assign(/* @__PURE__ */ Object.create(null), { } }); function Z(e, t, n) { - return N(n) !== "[object Object]" && (n = {}), e[d] = { + return D(n) !== "[object Object]" && (n = {}), e[d] = { value: t, actions: n, listeners: /* @__PURE__ */ new Set() }, e.toJSON = () => e(), Object.setPrototypeOf(e[d], V), e; } var R = []; -function k(e) { +function K(e) { let t = function() { R.push(t), e(), R.pop(); }; h.has(e) && (h.set(t, h.get(e)), h.delete(e)), t(); } -function K() { +function Q() { return R[R.length - 1]; } -function Q(e) { +function X(e) { if (!e[d]) return; - let { value: t, listeners: n } = e[d], r = K(); + let { value: t, listeners: n } = e[d], r = Q(); return r && n.add(r), h.has(r) && h.get(r).add(e), t; } -function X(e, t) { +function Y(e, t) { if (!e[d]) return; let n = e[d]; if (n.value !== t) return n.value = t, n.listeners.forEach((r) => r(t)), t; } -function D(e, t) { +function N(e, t) { if (e[d]) return e[d].listeners.add(t); } -function q(e, t) { +function k(e, t) { if (e[d]) return e[d].listeners.delete(t); } // signals.js -C($); +A($); export { g as S, - S as assign, + y as assign, B as classListDeclarative, - ce as createElement, - ae as dispatchEvent, - ce as el, - se as empty, - y as isSignal, - oe as namespace, + ie as createElement, + de as dispatchEvent, + ie as el, + fe as empty, + _ as isSignal, T as on, - C as registerReactivity + A as registerReactivity, + ce as scope }; diff --git a/dist/esm.js b/dist/esm.js index 1c2fcaf..638b69f 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -1,24 +1,24 @@ // src/signals-common.js -var g = { +var E = { isSignal(e) { return !1; }, - processReactiveAttribute(e, t, n, r) { - return n; + processReactiveAttribute(e, t, r, n) { + return r; } }; -function y(e, t = !0) { - return t ? Object.assign(g, e) : (Object.setPrototypeOf(e, g), e); +function N(e, t = !0) { + return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e); } -function v(e) { - return g.isPrototypeOf(e) && e !== g ? e : g; +function m(e) { + return E.isPrototypeOf(e) && e !== E ? e : E; } // src/helpers.js function p(e) { return typeof e > "u"; } -function w(e, t) { +function _(e, t) { if (!e || !(e instanceof AbortSignal)) return !0; if (!e.aborted) @@ -28,9 +28,9 @@ function w(e, t) { } // src/dom-common.js -var R = { setDeleteAttr: P }; -function P(e, t, n) { - if (Reflect.set(e, t, n), !!p(n)) { +var O = { setDeleteAttr: P }; +function P(e, t, r) { + if (Reflect.set(e, t, r), !!p(r)) { if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined") return e.removeAttribute(t); if (Reflect.get(e, t) === "undefined") @@ -39,227 +39,242 @@ function P(e, t, n) { } // src/dom.js -var x = "html"; -function H(e) { - return x = e === "svg" ? "http://www.w3.org/2000/svg" : e, { - append(...t) { - return x = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); - } - }; -} -function I(e, t, ...n) { - let r = this, u = v(this), i; +var h = "html", S = { + 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); + } + }; + }, + get namespace() { + return h; + }, + set namespace(e) { + return h = e; + } +}, H = Object.assign((e) => e ? e(document.body) : document.body, S); +function I(e, t, ...r) { + let n = this, u = m(this), i; switch ((Object(t) !== t || u.isSignal(t)) && (t = { textContent: t }), !0) { case typeof e == "function": { - i = e(t || void 0, (f) => f ? (n.unshift(f), void 0) : i); + let a = Object.assign((f) => f ? (r.unshift(f), void 0) : i, S); + i = e(t || void 0, a), h = "html"; break; } case e === "#text": - i = m.call(r, document.createTextNode(""), t); + i = w.call(n, document.createTextNode(""), t); break; case e === "<>": - i = m.call(r, document.createDocumentFragment(), t); + i = w.call(n, document.createDocumentFragment(), t); break; - case x !== "html": - i = m.call(r, document.createElementNS(x, e), t); + case h !== "html": + i = w.call(n, document.createElementNS(h, e), t); break; case !i: - i = m.call(r, document.createElement(e), t); + i = w.call(n, document.createElement(e), t); } - return n.forEach((l) => l(i)), i; + return r.forEach((a) => a(i)), i; } -var { setDeleteAttr: C } = R; -function m(e, ...t) { - let n = this, r = v(this); +var { setDeleteAttr: R } = O; +function w(e, ...t) { + let r = this, n = m(this); if (!t.length) return e; - let i = (e instanceof SVGElement ? M : F).bind(null, e, "Attribute"); - return Object.entries(Object.assign({}, ...t)).forEach(function l([f, d]) { - d = r.processReactiveAttribute(e, f, d, l); - let [h] = f; - if (h === "=") + 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 (h === ".") - return D(e, 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) { case "xlink:href": return i(f, d, "http://www.w3.org/1999/xlink"); case "textContent": - return C(e, f, d); + return R(e, f, d); case "style": if (typeof d != "object") break; case "dataset": - return O(r, d, D.bind(null, e[f])); + return A(n, d, C.bind(null, e[f])); case "ariaset": - return O(r, d, (E, o) => i("aria-" + E, o)); + return A(n, d, (b, c) => i("aria-" + b, c)); case "classList": - return _.call(n, e, d); + return j.call(r, e, d); } - return j(e, f) ? C(e, f, d) : i(f, d); + return F(e, f) ? R(e, f, d) : i(f, d); }), e; } -function _(e, t) { - let n = v(this); - return O( - n, +function j(e, t) { + let r = m(this); + return A( + r, t, - (r, u) => e.classList.toggle(r, u === -1 ? void 0 : !!u) + (n, u) => e.classList.toggle(n, u === -1 ? void 0 : !!u) ), e; } function Z(e) { return Array.from(e.children).forEach((t) => t.remove()), e; } -function j(e, t) { +function F(e, t) { if (!Reflect.has(e, t)) return !1; - let n = L(e, t); - return !p(n.set); + let r = y(e, t); + return !p(r.set); } -function L(e, t) { +function y(e, t) { if (e = Object.getPrototypeOf(e), !e) return {}; - let n = Object.getOwnPropertyDescriptor(e, t); - return n || L(e, t); + let r = Object.getOwnPropertyDescriptor(e, t); + return r || y(e, t); } -function O(e, t, n) { +function A(e, t, r) { if (!(typeof t != "object" || t === null)) return Object.entries(t).forEach(function([u, i]) { - u && (i = e.processReactiveAttribute(t, u, i, (l) => n(...l)), n(u, i)); + u && (i = e.processReactiveAttribute(t, u, i, (a) => r(...a)), r(u, i)); }); } -function S(e) { +function D(e) { return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; } -function F(e, t, n, r) { - return e[(p(r) ? "remove" : "set") + t](n, S(r)); +function M(e, t, r, n) { + return e[(p(n) ? "remove" : "set") + t](r, D(n)); } -function M(e, t, n, r, u = null) { - return e[(p(r) ? "remove" : "set") + t + "NS"](u, n, S(r)); +function T(e, t, r, n, u = null) { + return e[(p(n) ? "remove" : "set") + t + "NS"](u, r, D(n)); } -function D(e, t, n) { - if (Reflect.set(e, t, n), !!p(n)) +function C(e, t, r) { + if (Reflect.set(e, t, r), !!p(r)) return Reflect.deleteProperty(e, t); } // src/events.js -function J(e, t, ...n) { - let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); - return e.dispatchEvent(r); +function K(e, t, ...r) { + let n = r.length ? new CustomEvent(t, { detail: r[0] }) : new Event(t); + return e.dispatchEvent(n); } -function N(e, t, n) { +function L(e, t, r) { return function(u) { - return u.addEventListener(e, t, n), u; + return u.addEventListener(e, t, r), u; }; } -var b = T(); -N.connected = function(e, t) { - return function(r) { - return typeof r.connectedCallback == "function" ? (r.addEventListener("dde:connected", e, t), r) : (w(t && t.signal, () => b.offConnected(r, e)) && (r.isConnected ? e(new Event("dde:connected")) : b.onConnected(r, e)), r); +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); }; }; -N.disconnected = function(e, t) { - return function(r) { - return typeof r.disconnectedCallback == "function" ? (r.addEventListener("dde:disconnected", e, t), r) : (w(t && t.signal, () => b.offDisconnected(r, e)) && b.onDisconnected(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; }; }; -function T() { - let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(o) { - for (let c of o) - if (c.type === "childList") { - if (h(c.addedNodes, !0)) { - l(); +function U() { + let e = /* @__PURE__ */ new Map(), t = !1, r = new MutationObserver(function(c) { + for (let o of c) + if (o.type === "childList") { + if (g(o.addedNodes, !0)) { + a(); continue; } - E(c.removedNodes, !0) && l(); + b(o.removedNodes, !0) && a(); } }); return { - onConnected(o, c) { - i(), u(o).connected.push(c); + onConnected(c, o) { + i(); + let s = u(c); + s.connected.has(o) || (s.connected.add(o), s.length_c += 1); }, - offConnected(o, c) { - if (!e.has(o)) + offConnected(c, o) { + if (!e.has(c)) return; - let s = e.get(o), a = s.connected; - a.splice(a.indexOf(c), 1), r(o, s); + let s = e.get(c); + s.connected.has(o) && (s.connected.delete(o), s.length_c -= 1, n(c, s)); }, - onDisconnected(o, c) { - i(), u(o).disconnected.push(c); + onDisconnected(c, o) { + i(); + let s = u(c); + s.disconnected.has(o) || (s.disconnected.add(o), s.length_d += 1); }, - offDisconnected(o, c) { - if (!e.has(o)) + offDisconnected(c, o) { + if (!e.has(c)) return; - let s = e.get(o), a = s.disconnected; - a.splice(a.indexOf(c), 1), r(o, s); + let s = e.get(c); + s.disconnected.has(o) && (s.disconnected.delete(o), s.length_d -= 1, n(c, s)); } }; - function r(o, c) { - c.connected.length || c.disconnected.length || (e.delete(o), l()); + function n(c, o) { + o.length_c || o.length_d || (e.delete(c), a()); } - function u(o) { - if (e.has(o)) - return e.get(o); - let c = { connected: [], disconnected: [] }; - return e.set(o, c), c; + function u(c) { + if (e.has(c)) + return e.get(c); + let o = { + connected: /* @__PURE__ */ new WeakSet(), + length_c: 0, + disconnected: /* @__PURE__ */ new WeakSet(), + length_d: 0 + }; + return e.set(c, o), o; } function i() { - t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); + t || (t = !0, r.observe(document.body, { childList: !0, subtree: !0 })); } - function l() { - !t || e.size || (t = !1, n.disconnect()); + function a() { + !t || e.size || (t = !1, r.disconnect()); } function f() { - return new Promise(function(o) { - (requestIdleCallback || requestAnimationFrame)(o); + return new Promise(function(c) { + (requestIdleCallback || requestAnimationFrame)(c); }); } - async function d(o) { + async function d(c) { e.size > 30 && await f(); - let c = []; - if (!(o instanceof Node)) - return c; + let o = []; + if (!(c instanceof Node)) + return o; for (let s of e.keys()) - s === o || !(s instanceof Node) || o.contains(s) && c.push(s); - return c; + s === c || !(s instanceof Node) || c.contains(s) && o.push(s); + return o; } - function h(o, c) { - for (let s of o) { - if (c && d(s).then(h), !e.has(s)) + function g(c, o) { + let s = !1; + for (let l of c) { + if (o && d(l).then(g), !e.has(l)) continue; - let a = e.get(s); - return a.connected.forEach((A) => A(s)), a.connected.length = 0, a.disconnected.length || e.delete(s), !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), s = !0); } - return !1; + return s; } - function E(o, c) { - for (let s of o) { - if (c && d(s).then(E), !e.has(s)) - continue; - let a = e.get(s); - return a.disconnected.forEach((A) => A(s)), a.connected.length = 0, a.disconnected.length = 0, e.delete(s), !0; - } - return !1; + function b(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); + return s; } } // index.js [HTMLElement, SVGElement, DocumentFragment].forEach((e) => { let { append: t } = e.prototype; - e.prototype.append = function(...n) { - return t.apply(this, n), this; + e.prototype.append = function(...r) { + return t.apply(this, r), this; }; }); export { - m as assign, - _ as classListDeclarative, + w as assign, + j as classListDeclarative, I as createElement, - J as dispatchEvent, + K as dispatchEvent, I as el, Z as empty, - H as namespace, - N as on, - y as registerReactivity + L as on, + N as registerReactivity, + H as scope }; diff --git a/examples/components/fullNameComponent.js b/examples/components/fullNameComponent.js index dfbf687..1151708 100644 --- a/examples/components/fullNameComponent.js +++ b/examples/components/fullNameComponent.js @@ -1,15 +1,17 @@ -import { style, el, on, S, namespace } from '../exports.js'; +import { style, el, on, S } from '../exports.js'; const className= style.host(fullNameComponent).css` :host form{ display: flex; flex-flow: column nowrap; } `; -export function fullNameComponent(){ +export function fullNameComponent(_, scope){ 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))) return el("div", { className }).append( el("h2", "Simple form:"), @@ -24,7 +26,7 @@ export function fullNameComponent(){ ": ", el("#text", full_name) ), - namespace("svg").append( + scope.elNamespace("svg").append( el("svg", { viewBox: "0 0 240 80", style: { height: "80px", display: "block" } }).append( //el("style", { }) el("text", { x: 20, y: 35, textContent: "Text" }) diff --git a/examples/components/webComponent.js b/examples/components/webComponent.js index 63bff49..303a025 100644 --- a/examples/components/webComponent.js +++ b/examples/components/webComponent.js @@ -17,7 +17,8 @@ export class CustomHTMLTestElement extends HTMLElement{ } render({ name, test, preName }, host){ - host(on.connected(console.log)); + host(on.connected(()=> console.log(CustomHTMLTestElement))); + host(on.disconnected(()=> console.log(CustomHTMLTestElement))); return el("p").append( el("#text", { textContent: name }), el("#text", { textContent: test }), diff --git a/index.d.ts b/index.d.ts index a83cd13..9ad0a79 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,4 +1,4 @@ -import { Signal } from "./src/signals"; +import { Signal } from "./signals"; //TODO? /** Is filled when function is succesfully called ⇒ and returns component's root element. */ type Host= (extender?: ElementExtender)=> el | undefined; @@ -46,19 +46,17 @@ type ElementAttributes & AttrsModified : Omit & AttrsModified; -export function assign(element: El, ...attrs_array: ElementAttributes[]): El +export function assign(element: El, ...attrs_array: Partial>[]): El type ElementExtender= (element: El)=> El; type TagNameFragment= "<>"; export function el( tag_name: TAG, - attrs?: ElementAttributes, + attrs?: Partial>, ...extenders: ElementExtender[] ): ElementTagNameMap[TAG] export function el( tag_name: TagNameFragment, - signal?: Signal, - cb?: (a: T)=> HTMLElement | HTMLElement[] ): DocumentFragment export function el)=> R>( fComponent: T, diff --git a/package-lock.json b/package-lock.json index 4c32ab3..0ab511a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "deka-dom-el", - "version": "0.3.0", + "version": "0.4.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "deka-dom-el", - "version": "0.3.0", + "version": "0.4.0", "license": "MIT", "devDependencies": { "@size-limit/preset-small-lib": "^8.2.6", diff --git a/package.json b/package.json index f44e5fc..e73c92c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "deka-dom-el", - "version": "0.3.0", + "version": "0.4.0", "description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.", "author": "Jan Andrle ", "license": "MIT", @@ -71,8 +71,8 @@ "gzip": false }, { - "path": "./test/components/webComponent.js", - "limit": "10kb", + "path": "./examples/components/webComponent.js", + "limit": "11kb", "gzip": false } ], diff --git a/src/dom.js b/src/dom.js index 6edf909..7c2dc63 100644 --- a/src/dom.js +++ b/src/dom.js @@ -2,17 +2,22 @@ import { signals } from "./signals-common.js"; /** @type {"html"|"svg"|string} */ let namespace_curr= "html"; -export function namespace(namespace){ - namespace_curr= namespace==="svg" ? "http://www.w3.org/2000/svg" : namespace; - return { - append(...el){ - namespace_curr= "html"; - if(el.length===1) return el[0]; - const f= document.createDocumentFragment(); - return f.append(...el); - } - }; -} +const scopes= { + elNamespace(namespace){ + namespace_curr= namespace==="svg" ? "http://www.w3.org/2000/svg" : namespace; + return { + append(...el){ + namespace_curr= "html"; + if(el.length===1) return el[0]; + const f= document.createDocumentFragment(); + return f.append(...el); + } + }; + }, + get namespace(){ return namespace_curr; }, + set namespace(v){ return ( namespace_curr= v ); }, +}; +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); @@ -22,8 +27,9 @@ export function createElement(tag, attributes, ...connect){ attributes= { textContent: attributes }; switch(true){ case typeof tag==="function": { - const ref= c=> c ? (connect.unshift(c), undefined) : el; - el= tag(attributes || undefined, ref); + const scope= Object.assign(c=> c ? (connect.unshift(c), undefined) : el, scopes); + el= tag(attributes || undefined, scope); + namespace_curr= "html"; break; } case tag==="#text": el= assign.call(_this, document.createTextNode(""), attributes); break; diff --git a/src/events.js b/src/events.js index 9350a31..bc5a9a6 100644 --- a/src/events.js +++ b/src/events.js @@ -15,25 +15,31 @@ const c_ch_o= connectionsChangesObserverConstructor(); import { onAbort } from './helpers.js'; //TODO: cleanUp when event before abort? on.connected= function(listener, options){ + if(typeof options !== "object") + options= {}; + options.once= true; return function registerElement(element){ - if(typeof element.connectedCallback === "function"){ - element.addEventListener("dde:connected", listener, options); + element.addEventListener("dde:connected", listener, options); + if(typeof element.connectedCallback === "function") return element; + if(element.isConnected){ + element.dispatchEvent(new Event("dde:connected")); return element; } - const c= onAbort(options && options.signal, ()=> c_ch_o.offConnected(element, listener)); - if(!c) return element; - if(element.isConnected) listener(new Event("dde:connected")); - else c_ch_o.onConnected(element, listener); + + const c= onAbort(options.signal, ()=> c_ch_o.offConnected(element, listener)); + if(c) c_ch_o.onConnected(element, listener); return element; }; }; on.disconnected= function(listener, options){ + if(typeof options !== "object") + options= {}; + options.once= true; return function registerElement(element){ - if(typeof element.disconnectedCallback === "function"){ - element.addEventListener("dde:disconnected", listener, options); - return element; - } - const c= onAbort(options && options.signal, ()=> c_ch_o.offDisconnected(element, listener)); + element.addEventListener("dde:disconnected", listener, options); + if(typeof element.disconnectedCallback === "function") return element; + + const c= onAbort(options.signal, ()=> c_ch_o.offDisconnected(element, listener)); if(c) c_ch_o.onDisconnected(element, listener); return element; }; @@ -57,37 +63,48 @@ function connectionsChangesObserverConstructor(){ onConnected(element, listener){ start(); const listeners= getElementStore(element); - listeners.connected.push(listener); + if(listeners.connected.has(listener)) return; + listeners.connected.add(listener); + listeners.length_c+= 1; }, offConnected(element, listener){ if(!store.has(element)) return; const ls= store.get(element); - const l= ls.connected; - l.splice(l.indexOf(listener), 1); + if(!ls.connected.has(listener)) return; + ls.connected.delete(listener); + ls.length_c-= 1; cleanWhenOff(element, ls); }, onDisconnected(element, listener){ start(); const listeners= getElementStore(element); - listeners.disconnected.push(listener); + if(listeners.disconnected.has(listener)) return; + listeners.disconnected.add(listener); + listeners.length_d+= 1; }, offDisconnected(element, listener){ if(!store.has(element)) return; const ls= store.get(element); - const l= ls.disconnected; - l.splice(l.indexOf(listener), 1); + if(!ls.disconnected.has(listener)) return; + ls.disconnected.delete(listener); + ls.length_d-= 1; cleanWhenOff(element, ls); } }; function cleanWhenOff(element, ls){ - if(ls.connected.length || ls.disconnected.length) + if(ls.length_c || ls.length_d) return; store.delete(element); stop(); } function getElementStore(element){ if(store.has(element)) return store.get(element); - const out= { connected: [], disconnected: [] }; + const out= { + connected: new WeakSet(), + length_c: 0, + disconnected: new WeakSet(), + length_d: 0 + }; store.set(element, out); return out; } @@ -118,31 +135,36 @@ function connectionsChangesObserverConstructor(){ return out; } function observerAdded(addedNodes, is_root){ + let out= false; for(const element of addedNodes){ if(is_root) collectChildren(element).then(observerAdded); if(!store.has(element)) continue; const ls= store.get(element); - ls.connected.forEach(listener=> listener(element)); - ls.connected.length= 0; - if(!ls.disconnected.length) store.delete(element); - return true; + if(!ls.length_c) continue; + + element.dispatchEvent(new Event("dde:connected")); + ls.connected= new WeakSet(); + ls.length_c= 0; + if(!ls.length_d) store.delete(element); + out= true; } - return false; + return out; } function observerRemoved(removedNodes, is_root){ + let out= false; for(const element of removedNodes){ if(is_root) collectChildren(element).then(observerRemoved); if(!store.has(element)) continue; const ls= store.get(element); - ls.disconnected.forEach(listener=> listener(element)); + if(!ls.length_d) continue; + + element.dispatchEvent(new Event("dde:disconnected")); - ls.connected.length= 0; - ls.disconnected.length= 0; store.delete(element); - return true; + out= true; } - return false; + return out; } }