From cc69018d999fe5ae3c32863e863a9a65f3a3f7b7 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Thu, 21 Sep 2023 12:35:27 +0200 Subject: [PATCH] :bug: Process primitives & signals correctly in `createElement`/`assign` --- dist/dde-with-signals.js | 319 +++++++++++++-------------- dist/dde.js | 250 ++++++++++----------- dist/esm-with-signals.js | 319 +++++++++++++-------------- dist/esm.js | 250 ++++++++++----------- package.json | 2 +- src/dom-common.js | 9 +- src/dom.js | 60 ++--- src/signals-common.js | 4 +- src/signals-lib.js | 4 +- test/components/fullNameComponent.js | 2 +- test/exports.js | 4 +- 11 files changed, 610 insertions(+), 613 deletions(-) diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js index 31d3a98..db9a978 100644 --- a/dist/dde-with-signals.js +++ b/dist/dde-with-signals.js @@ -1,30 +1,30 @@ //deka-dom-el library is available via global namespace `dde` (()=> { // src/signals-common.js - var b = { - isTextContent(e) { - return typeof e == "string"; + var x = { + isSignal(e) { + return !1; }, processReactiveAttribute(e, t, n, r) { return n; } }; - function _(e, t = !0) { - return t ? Object.assign(b, e) : (Object.setPrototypeOf(e, b), e); + function C(e, t = !0) { + return t ? Object.assign(x, e) : (Object.setPrototypeOf(e, x), e); } - function N(e) { - return b.isPrototypeOf(e) && e !== b ? e : b; + function v(e) { + return x.isPrototypeOf(e) && e !== x ? e : x; } // src/helpers.js function m(e) { return typeof e > "u"; } - function w(e) { + function _(e) { let t = typeof e; return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e); } - function D(e, t) { + function L(e, t) { if (!e || !(e instanceof AbortSignal)) return !0; if (!e.aborted) @@ -34,175 +34,177 @@ } // src/dom-common.js - var x = new Map(JSON.parse('[["#text,textContent",true],["HTMLElement,textContent",true],["HTMLElement,className",true]]')), j = { setDeleteAttr: k }; - function k(e, t, n) { - Reflect.set(e, t, n), m(n) && e.getAttribute(t) === "undefined" && e.removeAttribute(t); + var P = { setDeleteAttr: W }; + function W(e, t, n) { + if (Reflect.set(e, t, n), !!m(n)) { + if (e instanceof HTMLElement && e.getAttribute(t) === "undefined") + return e.removeAttribute(t); + if (Reflect.get(e, t) === "undefined") + return Reflect.set(e, t, ""); + } } // src/dom.js var S = "html"; - function ce(e) { + function oe(e) { return S = e === "svg" ? "http://www.w3.org/2000/svg" : e, { append(...t) { return S = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); } }; } - function ie(e, t, ...n) { - let r = N(this), o; - switch (r.isTextContent(t) && (t = { textContent: t }), !0) { + function ce(e, t, ...n) { + let r = v(this), o; + switch ((Object(t) !== t || r.isSignal(t)) && (t = { textContent: t }), !0) { case typeof e == "function": { - o = e(t || void 0, (s) => s ? (n.unshift(s), void 0) : o); + o = e(t || void 0, (p) => p ? (n.unshift(p), void 0) : o); break; } case e === "#text": - o = y(document.createTextNode(""), t); + o = w(document.createTextNode(""), t); break; case e === "<>": - o = y(document.createDocumentFragment(), t); + o = w(document.createDocumentFragment(), t); break; case S !== "html": - o = y(document.createElementNS(S, e), t); + o = w(document.createElementNS(S, e), t); break; case !o: - o = y(document.createElement(e), t); + o = w(document.createElement(e), t); } - return n.forEach((a) => a(o)), o; + return n.forEach((i) => i(o)), o; } - var { setDeleteAttr: q } = j; - function y(e, ...t) { - let n = N(this); + var { setDeleteAttr: j } = P; + function w(e, ...t) { + let n = this, r = v(this); if (!t.length) return e; - let r = e instanceof SVGElement, o = (r ? I : T).bind(null, e, "Attribute"); - return Object.entries(Object.assign({}, ...t)).forEach(function a([s, i]) { - i = n.processReactiveAttribute(e, s, i, a); - let [h] = s; - if (h === "=") - return o(s.slice(1), i); - if (h === ".") - return M(e, s.slice(1), i); - if (typeof i == "object" && i !== null) + let o = e instanceof SVGElement, i = (o ? J : I).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 i(s.slice(1), a); + if (b === ".") + return T(e, s.slice(1), a); + if (typeof a == "object" && a !== null && !Array.isArray(a)) switch (s) { case "style": - return O(i, T.bind(null, e.style, "Property")); - case "dataset": - return O(i, M.bind(null, e.dataset)); + return N(r, a, T.bind(null, e[s])); case "ariaset": - return O(i, (E, v) => o("aria-" + E, v)); + return N(r, a, (E, c) => i("aria-" + E, c)); case "classList": - return J(e, i); + return B.call(n, e, a); default: - return Reflect.set(e, s, i); + return Reflect.set(e, s, a); } if (/(aria|data)([A-Z])/.test(s)) - return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), o(s, i); - switch (s) { + return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), i(s, a); + switch (s === "className" && (s = "class"), s) { case "href": - return o(s, i); - case "xlink:href": - return o(s, i, "http://www.w3.org/1999/xlink"); + return i(s, a, "http://www.w3.org/1999/xlink"); case "textContent": - if (!r) - break; - return e.appendChild(document.createTextNode(i)); + return o ? e.appendChild(document.createTextNode(a)) : j(e, s, a); } - return W(e, s) ? q(e, s, i) : o(s, i); + return H(e, s) ? j(e, s, a) : i(s, a); }), e; } - function J(e, t) { - return typeof t != "object" || O( + function B(e, t) { + let n = v(this); + return typeof t != "object" || N( + n, t, - (n, r) => e.classList.toggle(n, r === -1 ? void 0 : !!r) + (r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o) ), e; } - function fe(e) { + function se(e) { return Array.from(e.children).forEach((t) => t.remove()), e; } - function W(e, t) { - let n = "HTMLElement," + t; - if (e instanceof HTMLElement && x.has(n)) - return x.get(n); - let r = e.nodeName + "," + t; - if (x.has(r)) - return x.get(r); - let [o, a, s] = H(e, t), i = !m(o.set); - return (!i || a) && x.set(s === HTMLElement.prototype ? n : r, i), i; + function H(e, t) { + if (!Reflect.has(e, t)) + return !1; + let n = F(e, t); + return !m(n.set); } - function H(e, t, n = 0) { + function F(e, t, n = 0) { if (e = Object.getPrototypeOf(e), !e) - return [{}, n, e]; + return {}; let r = Object.getOwnPropertyDescriptor(e, t); - return r ? [r, n, e] : H(e, t, n + 1); + return r || F(e, t, n + 1); } - function O(e, t) { - return Object.entries(e).forEach(([n, r]) => n && t(n, r)); + function N(e, t, n) { + return Object.entries(t).forEach(function([o, i]) { + o && (i = e.processReactiveAttribute(t, o, i, (p) => n(...p)), n(o, i)); + }); } - function T(e, t, n, r) { - return e[(m(r) ? "remove" : "set") + t](n, r); + function M(e) { + return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; } - function I(e, t, n, r, o = null) { - return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, r); + function I(e, t, n, r) { + return e[(m(r) ? "remove" : "set") + t](n, M(r)); } - function M(e, t, n) { + function J(e, t, n, r, o = null) { + return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, M(r)); + } + function T(e, t, n) { if (Reflect.set(e, t, n), !!m(n)) return Reflect.deleteProperty(e, t); } // src/events.js - function de(e, t, ...n) { + function ae(e, t, ...n) { let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); return e.dispatchEvent(r); } - function F(e, t, n) { + function z(e, t, n) { return function(o) { return o.addEventListener(e, t, n), o; }; } - var C = Z(); - F.connected = function(e, t) { + var O = Z(); + z.connected = function(e, t) { return function(r) { - return typeof r.connectedCallback == "function" ? (r.addEventListener("dde:connected", e, t), r) : (D(t && t.signal, () => C.offConnected(r, e)) && (r.isConnected ? e(new Event("dde:connected")) : C.onConnected(r, e)), 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); }; }; - F.disconnected = function(e, t) { + z.disconnected = function(e, t) { return function(r) { - return typeof r.disconnectedCallback == "function" ? (r.addEventListener("dde:disconnected", e, t), r) : (D(t && t.signal, () => C.offDisconnected(r, e)) && C.onDisconnected(r, e), 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); }; }; function Z() { let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) { for (let f of c) if (f.type === "childList") { - if (E(f.addedNodes, !0)) { - s(); + if (b(f.addedNodes, !0)) { + p(); continue; } - v(f.removedNodes, !0) && s(); + E(f.removedNodes, !0) && p(); } }); return { onConnected(c, f) { - a(), o(c).connected.push(f); + i(), o(c).connected.push(f); }, offConnected(c, f) { if (!e.has(c)) return; - let u = e.get(c), p = u.connected; - p.splice(p.indexOf(f), 1), r(c, u); + let u = e.get(c), l = u.connected; + l.splice(l.indexOf(f), 1), r(c, u); }, onDisconnected(c, f) { - a(), o(c).disconnected.push(f); + i(), o(c).disconnected.push(f); }, offDisconnected(c, f) { if (!e.has(c)) return; - let u = e.get(c), p = u.disconnected; - p.splice(p.indexOf(f), 1), r(c, u); + let u = e.get(c), l = u.disconnected; + l.splice(l.indexOf(f), 1), r(c, u); } }; function r(c, f) { - f.connected.length || f.disconnected.length || (e.delete(c), s()); + f.connected.length || f.disconnected.length || (e.delete(c), p()); } function o(c) { if (e.has(c)) @@ -210,19 +212,19 @@ let f = { connected: [], disconnected: [] }; return e.set(c, f), f; } - function a() { + function i() { t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); } - function s() { + function p() { !t || e.size || (t = !1, n.disconnect()); } - function i() { + function s() { return new Promise(function(c) { (requestIdleCallback || requestAnimationFrame)(c); }); } - async function h(c) { - e.size > 30 && await i(); + async function a(c) { + e.size > 30 && await s(); let f = []; if (!(c instanceof Node)) return f; @@ -230,21 +232,21 @@ u === c || !(u instanceof Node) || c.contains(u) && f.push(u); return f; } - function E(c, f) { + function b(c, f) { for (let u of c) { - if (f && h(u).then(E), !e.has(u)) + if (f && a(u).then(b), !e.has(u)) continue; - let p = e.get(u); - return p.connected.forEach((L) => L(u)), p.connected.length = 0, p.disconnected.length || e.delete(u), !0; + let l = e.get(u); + return l.connected.forEach((y) => y(u)), l.connected.length = 0, l.disconnected.length || e.delete(u), !0; } return !1; } - function v(c, f) { + function E(c, f) { for (let u of c) { - if (f && h(u).then(v), !e.has(u)) + if (f && a(u).then(E), !e.has(u)) continue; - let p = e.get(u); - return p.disconnected.forEach((L) => L(u)), p.connected.length = 0, p.disconnected.length = 0, e.delete(u), !0; + let l = e.get(u); + return l.disconnected.forEach((y) => y(u)), l.connected.length = 0, l.disconnected.length = 0, e.delete(u), !0; } return !1; } @@ -260,21 +262,21 @@ // src/signals-lib.js var d = Symbol.for("Signal"); - function R(e) { + function A(e) { try { return Reflect.has(e, d); } catch { return !1; } } - var l = /* @__PURE__ */ new WeakMap(); + var h = /* @__PURE__ */ new WeakMap(); function g(e, t) { if (typeof e != "function") - return z(e, t); - if (R(e)) + return U(e, t); + if (A(e)) return e; - let n = z(""), r = () => n(e()); - return l.set(r, /* @__PURE__ */ new Set([n])), V(r), n; + let n = U(""), r = () => n(e()); + return h.set(r, /* @__PURE__ */ new Set([n])), K(r), n; } g.action = function(e, t, ...n) { let r = e[d], { actions: o } = r; @@ -282,14 +284,14 @@ 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((a) => a(r.value)); + r.listeners.forEach((i) => i(r.value)); }; g.on = function e(t, n, r = {}) { let { signal: o } = r; if (!(o && o.aborted)) { if (Array.isArray(t)) - return t.forEach((a) => e(a, n, r)); - P(t, n), o && o.addEventListener("abort", () => $(t, n)); + return t.forEach((i) => e(i, n, r)); + D(t, n), o && o.addEventListener("abort", () => q(t, n)); } }; g.symbols = { @@ -304,102 +306,97 @@ } function t(n, r) { r.listeners.forEach((o) => { - if (r.listeners.delete(o), !l.has(o)) + if (r.listeners.delete(o), !h.has(o)) return; - let a = l.get(o); - a.delete(n), !(a.size > 1) && (g.clear(...a), l.delete(o)); + let i = h.get(o); + i.delete(n), !(i.size > 1) && (g.clear(...i), h.delete(o)); }); } }; g.el = function(e, t) { let n = document.createComment("<#reactive>"), r = document.createComment(""), o = document.createDocumentFragment(); o.append(n, r); - let a = (s) => { + let i = (p) => { if (!n.parentNode || !r.parentNode) - return $(e, a); - let i = t(s); - Array.isArray(i) || (i = [i]); - let h = n; - for (; (h = n.nextSibling) !== r; ) - h.remove(); - n.after(...i); + return q(e, i); + let s = t(p); + Array.isArray(s) || (s = [s]); + let a = n; + for (; (a = n.nextSibling) !== r; ) + a.remove(); + n.after(...s); }; - return P(e, a), a(e()), o; + return D(e, i), i(e()), o; }; - var U = { - isTextContent(e) { - return w(e) === "string" || R(e) && w(Y(e)) === "string"; - }, + var $ = { + isSignal: A, processReactiveAttribute(e, t, n, r) { - return R(n) ? (P(n, (o) => r([t, o])), n()) : n; + return A(n) ? (D(n, (o) => r([t, o])), n()) : n; } }; - function z(e, t) { - let n = (...r) => r.length ? X(n, r[0]) : Q(n); - return G(n, e, t); + function U(e, t) { + let n = (...r) => r.length ? Y(n, r[0]) : X(n); + return V(n, e, t); } - var B = Object.assign(/* @__PURE__ */ Object.create(null), { + var G = Object.assign(/* @__PURE__ */ Object.create(null), { stopPropagation() { this.skip = !0; } }); - function G(e, t, n) { - return w(n) !== "[object Object]" && (n = {}), e[d] = { + function V(e, t, n) { + return _(n) !== "[object Object]" && (n = {}), e[d] = { value: t, actions: n, listeners: /* @__PURE__ */ new Set() - }, e.toJSON = () => e(), Object.setPrototypeOf(e[d], B), e; + }, e.toJSON = () => e(), Object.setPrototypeOf(e[d], G), e; } - var A = []; - function V(e) { + var R = []; + function K(e) { let t = function() { - A.push(t), e(), A.pop(); + R.push(t), e(), R.pop(); }; - l.has(e) && (l.set(t, l.get(e)), l.delete(e)), t(); + h.has(e) && (h.set(t, h.get(e)), h.delete(e)), t(); } - function K() { - return A[A.length - 1]; + 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(); - return r && n.add(r), l.has(r) && l.get(r).add(e), t; + 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 Y(e) { - return e[d].value; - } - function P(e, t) { + function D(e, t) { if (e[d]) return e[d].listeners.add(t); } - function $(e, t) { + function q(e, t) { if (e[d]) return e[d].listeners.delete(t); } // signals.js - _(U); + C($); globalThis.dde= { S: g, - assign: y, - classListDeclarative: J, - createElement: ie, - dispatchEvent: de, - el: ie, - empty: fe, - isSignal: R, - namespace: ce, - on: F, - registerReactivity: _ + assign: w, + classListDeclarative: B, + createElement: ce, + dispatchEvent: ae, + el: ce, + empty: se, + isSignal: A, + namespace: oe, + on: z, + registerReactivity: C }; })(); \ No newline at end of file diff --git a/dist/dde.js b/dist/dde.js index b1e98b9..094f2d1 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -2,17 +2,17 @@ (()=> { // src/signals-common.js var g = { - isTextContent(e) { - return typeof e == "string"; + isSignal(e) { + return !1; }, processReactiveAttribute(e, t, r, n) { return r; } }; - function _(e, t = !0) { + function y(e, t = !0) { return t ? Object.assign(g, e) : (Object.setPrototypeOf(e, g), e); } - function O(e) { + function v(e) { return g.isPrototypeOf(e) && e !== g ? e : g; } @@ -20,7 +20,7 @@ function p(e) { return typeof e > "u"; } - function L(e, t) { + function w(e, t) { if (!e || !(e instanceof AbortSignal)) return !0; if (!e.aborted) @@ -30,186 +30,188 @@ } // src/dom-common.js - var l = new Map(JSON.parse('[["#text,textContent",true],["HTMLElement,textContent",true],["HTMLElement,className",true]]')), A = { setDeleteAttr: T }; - function T(e, t, r) { - Reflect.set(e, t, r), p(r) && e.getAttribute(t) === "undefined" && e.removeAttribute(t); + var C = { setDeleteAttr: P }; + function P(e, t, r) { + if (Reflect.set(e, t, r), !!p(r)) { + if (e instanceof HTMLElement && e.getAttribute(t) === "undefined") + return e.removeAttribute(t); + if (Reflect.get(e, t) === "undefined") + return Reflect.set(e, t, ""); + } } // src/dom.js - var v = "html"; - function Z(e) { - return v = e === "svg" ? "http://www.w3.org/2000/svg" : e, { + var b = "html"; + function I(e) { + return b = e === "svg" ? "http://www.w3.org/2000/svg" : e, { append(...t) { - return v = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); + return b = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); } }; } - function $(e, t, ...r) { - let n = O(this), c; - switch (n.isTextContent(t) && (t = { textContent: t }), !0) { + function Z(e, t, ...r) { + let n = v(this), c; + switch ((Object(t) !== t || n.isSignal(t)) && (t = { textContent: t }), !0) { case typeof e == "function": { - c = e(t || void 0, (s) => s ? (r.unshift(s), void 0) : c); + c = e(t || void 0, (l) => l ? (r.unshift(l), void 0) : c); break; } case e === "#text": - c = b(document.createTextNode(""), t); + c = x(document.createTextNode(""), t); break; case e === "<>": - c = b(document.createDocumentFragment(), t); + c = x(document.createDocumentFragment(), t); break; - case v !== "html": - c = b(document.createElementNS(v, e), t); + case b !== "html": + c = x(document.createElementNS(b, e), t); break; case !c: - c = b(document.createElement(e), t); + c = x(document.createElement(e), t); } - return r.forEach((a) => a(c)), c; + return r.forEach((d) => d(c)), c; } - var { setDeleteAttr: M } = A; - function b(e, ...t) { - let r = O(this); + var { setDeleteAttr: R } = C; + function x(e, ...t) { + let r = this, n = v(this); if (!t.length) return e; - let n = e instanceof SVGElement, c = (n ? j : N).bind(null, e, "Attribute"); - return Object.entries(Object.assign({}, ...t)).forEach(function a([s, f]) { - f = r.processReactiveAttribute(e, s, f, a); - let [h] = s; + let c = e instanceof SVGElement, d = (c ? F : T).bind(null, e, "Attribute"); + return Object.entries(Object.assign({}, ...t)).forEach(function l([f, u]) { + u = n.processReactiveAttribute(e, f, u, l); + let [h] = f; if (h === "=") - return c(s.slice(1), f); + return d(f.slice(1), u); if (h === ".") - return y(e, s.slice(1), f); - if (typeof f == "object" && f !== null) - switch (s) { + return D(e, f.slice(1), u); + if (typeof u == "object" && u !== null && !Array.isArray(u)) + switch (f) { case "style": - return m(f, N.bind(null, e.style, "Property")); - case "dataset": - return m(f, y.bind(null, e.dataset)); + return O(n, u, D.bind(null, e[f])); case "ariaset": - return m(f, (x, E) => c("aria-" + x, E)); + return O(n, u, (E, o) => d("aria-" + E, o)); case "classList": - return P(e, f); + return j.call(r, e, u); default: - return Reflect.set(e, s, f); + return Reflect.set(e, f, u); } - if (/(aria|data)([A-Z])/.test(s)) - return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, f); - switch (s) { + if (/(aria|data)([A-Z])/.test(f)) + return f = f.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), d(f, u); + switch (f === "className" && (f = "class"), f) { case "href": - return c(s, f); - case "xlink:href": - return c(s, f, "http://www.w3.org/1999/xlink"); + return d(f, u, "http://www.w3.org/1999/xlink"); case "textContent": - if (!n) - break; - return e.appendChild(document.createTextNode(f)); + return c ? e.appendChild(document.createTextNode(u)) : R(e, f, u); } - return S(e, s) ? M(e, s, f) : c(s, f); + return _(e, f) ? R(e, f, u) : d(f, u); }), e; } - function P(e, t) { - return typeof t != "object" || m( + function j(e, t) { + let r = v(this); + return typeof t != "object" || O( + r, t, - (r, n) => e.classList.toggle(r, n === -1 ? void 0 : !!n) + (n, c) => e.classList.toggle(n, c === -1 ? void 0 : !!c) ), e; } function G(e) { return Array.from(e.children).forEach((t) => t.remove()), e; } - function S(e, t) { - let r = "HTMLElement," + t; - if (e instanceof HTMLElement && l.has(r)) - return l.get(r); - let n = e.nodeName + "," + t; - if (l.has(n)) - return l.get(n); - let [c, a, s] = D(e, t), f = !p(c.set); - return (!f || a) && l.set(s === HTMLElement.prototype ? r : n, f), f; + function _(e, t) { + if (!Reflect.has(e, t)) + return !1; + let r = L(e, t); + return !p(r.set); } - function D(e, t, r = 0) { + function L(e, t, r = 0) { if (e = Object.getPrototypeOf(e), !e) - return [{}, r, e]; + return {}; let n = Object.getOwnPropertyDescriptor(e, t); - return n ? [n, r, e] : D(e, t, r + 1); + return n || L(e, t, r + 1); } - function m(e, t) { - return Object.entries(e).forEach(([r, n]) => r && t(r, n)); + function O(e, t, r) { + return Object.entries(t).forEach(function([c, d]) { + c && (d = e.processReactiveAttribute(t, c, d, (l) => r(...l)), r(c, d)); + }); } - function N(e, t, r, n) { - return e[(p(n) ? "remove" : "set") + t](r, n); + function N(e) { + return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; } - function j(e, t, r, n, c = null) { - return e[(p(n) ? "remove" : "set") + t + "NS"](c, r, n); + function T(e, t, r, n) { + return e[(p(n) ? "remove" : "set") + t](r, N(n)); } - function y(e, t, r) { + function F(e, t, r, n, c = null) { + return e[(p(n) ? "remove" : "set") + t + "NS"](c, r, N(n)); + } + function D(e, t, r) { if (Reflect.set(e, t, r), !!p(r)) return Reflect.deleteProperty(e, t); } // src/events.js - function W(e, t, ...r) { + function J(e, t, ...r) { let n = r.length ? new CustomEvent(t, { detail: r[0] }) : new Event(t); return e.dispatchEvent(n); } - function R(e, t, r) { + function S(e, t, r) { return function(c) { return c.addEventListener(e, t, r), c; }; } - var w = H(); - R.connected = function(e, t) { + var m = M(); + S.connected = function(e, t) { return function(n) { - return typeof n.connectedCallback == "function" ? (n.addEventListener("dde:connected", e, t), n) : (L(t && t.signal, () => w.offConnected(n, e)) && (n.isConnected ? e(new Event("dde:connected")) : w.onConnected(n, e)), n); + return typeof n.connectedCallback == "function" ? (n.addEventListener("dde:connected", e, t), n) : (w(t && t.signal, () => m.offConnected(n, e)) && (n.isConnected ? e(new Event("dde:connected")) : m.onConnected(n, e)), n); }; }; - R.disconnected = function(e, t) { + S.disconnected = function(e, t) { return function(n) { - return typeof n.disconnectedCallback == "function" ? (n.addEventListener("dde:disconnected", e, t), n) : (L(t && t.signal, () => w.offDisconnected(n, e)) && w.onDisconnected(n, e), n); + return typeof n.disconnectedCallback == "function" ? (n.addEventListener("dde:disconnected", e, t), n) : (w(t && t.signal, () => m.offDisconnected(n, e)) && m.onDisconnected(n, e), n); }; }; - function H() { + function M() { let e = /* @__PURE__ */ new Map(), t = !1, r = new MutationObserver(function(o) { - for (let i of o) - if (i.type === "childList") { - if (x(i.addedNodes, !0)) { - s(); + for (let s of o) + if (s.type === "childList") { + if (h(s.addedNodes, !0)) { + l(); continue; } - E(i.removedNodes, !0) && s(); + E(s.removedNodes, !0) && l(); } }); return { - onConnected(o, i) { - a(), c(o).connected.push(i); + onConnected(o, s) { + d(), c(o).connected.push(s); }, - offConnected(o, i) { + offConnected(o, s) { if (!e.has(o)) return; - let u = e.get(o), d = u.connected; - d.splice(d.indexOf(i), 1), n(o, u); + let i = e.get(o), a = i.connected; + a.splice(a.indexOf(s), 1), n(o, i); }, - onDisconnected(o, i) { - a(), c(o).disconnected.push(i); + onDisconnected(o, s) { + d(), c(o).disconnected.push(s); }, - offDisconnected(o, i) { + offDisconnected(o, s) { if (!e.has(o)) return; - let u = e.get(o), d = u.disconnected; - d.splice(d.indexOf(i), 1), n(o, u); + let i = e.get(o), a = i.disconnected; + a.splice(a.indexOf(s), 1), n(o, i); } }; - function n(o, i) { - i.connected.length || i.disconnected.length || (e.delete(o), s()); + function n(o, s) { + s.connected.length || s.disconnected.length || (e.delete(o), l()); } function c(o) { if (e.has(o)) return e.get(o); - let i = { connected: [], disconnected: [] }; - return e.set(o, i), i; + let s = { connected: [], disconnected: [] }; + return e.set(o, s), s; } - function a() { + function d() { t || (t = !0, r.observe(document.body, { childList: !0, subtree: !0 })); } - function s() { + function l() { !t || e.size || (t = !1, r.disconnect()); } function f() { @@ -217,30 +219,30 @@ (requestIdleCallback || requestAnimationFrame)(o); }); } - async function h(o) { + async function u(o) { e.size > 30 && await f(); - let i = []; + let s = []; if (!(o instanceof Node)) - return i; - for (let u of e.keys()) - u === o || !(u instanceof Node) || o.contains(u) && i.push(u); - return i; + return s; + for (let i of e.keys()) + i === o || !(i instanceof Node) || o.contains(i) && s.push(i); + return s; } - function x(o, i) { - for (let u of o) { - if (i && h(u).then(x), !e.has(u)) + function h(o, s) { + for (let i of o) { + if (s && u(i).then(h), !e.has(i)) continue; - let d = e.get(u); - return d.connected.forEach((C) => C(u)), d.connected.length = 0, d.disconnected.length || e.delete(u), !0; + let a = e.get(i); + return a.connected.forEach((A) => A(i)), a.connected.length = 0, a.disconnected.length || e.delete(i), !0; } return !1; } - function E(o, i) { - for (let u of o) { - if (i && h(u).then(E), !e.has(u)) + function E(o, s) { + for (let i of o) { + if (s && u(i).then(E), !e.has(i)) continue; - let d = e.get(u); - return d.disconnected.forEach((C) => C(u)), d.connected.length = 0, d.disconnected.length = 0, e.delete(u), !0; + let a = e.get(i); + return a.disconnected.forEach((A) => A(i)), a.connected.length = 0, a.disconnected.length = 0, e.delete(i), !0; } return !1; } @@ -255,15 +257,15 @@ }); globalThis.dde= { - assign: b, - classListDeclarative: P, - createElement: $, - dispatchEvent: W, - el: $, + assign: x, + classListDeclarative: j, + createElement: Z, + dispatchEvent: J, + el: Z, empty: G, - namespace: Z, - on: R, - registerReactivity: _ + namespace: I, + on: S, + registerReactivity: y }; })(); \ No newline at end of file diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index bfc9989..3fb5e7a 100644 --- a/dist/esm-with-signals.js +++ b/dist/esm-with-signals.js @@ -1,28 +1,28 @@ // src/signals-common.js -var b = { - isTextContent(e) { - return typeof e == "string"; +var x = { + isSignal(e) { + return !1; }, processReactiveAttribute(e, t, n, r) { return n; } }; -function _(e, t = !0) { - return t ? Object.assign(b, e) : (Object.setPrototypeOf(e, b), e); +function C(e, t = !0) { + return t ? Object.assign(x, e) : (Object.setPrototypeOf(e, x), e); } -function N(e) { - return b.isPrototypeOf(e) && e !== b ? e : b; +function v(e) { + return x.isPrototypeOf(e) && e !== x ? e : x; } // src/helpers.js function m(e) { return typeof e > "u"; } -function w(e) { +function _(e) { let t = typeof e; return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e); } -function D(e, t) { +function L(e, t) { if (!e || !(e instanceof AbortSignal)) return !0; if (!e.aborted) @@ -32,175 +32,177 @@ function D(e, t) { } // src/dom-common.js -var x = new Map(JSON.parse('[["#text,textContent",true],["HTMLElement,textContent",true],["HTMLElement,className",true]]')), j = { setDeleteAttr: k }; -function k(e, t, n) { - Reflect.set(e, t, n), m(n) && e.getAttribute(t) === "undefined" && e.removeAttribute(t); +var P = { setDeleteAttr: W }; +function W(e, t, n) { + if (Reflect.set(e, t, n), !!m(n)) { + if (e instanceof HTMLElement && e.getAttribute(t) === "undefined") + return e.removeAttribute(t); + if (Reflect.get(e, t) === "undefined") + return Reflect.set(e, t, ""); + } } // src/dom.js var S = "html"; -function ce(e) { +function oe(e) { return S = e === "svg" ? "http://www.w3.org/2000/svg" : e, { append(...t) { return S = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); } }; } -function ie(e, t, ...n) { - let r = N(this), o; - switch (r.isTextContent(t) && (t = { textContent: t }), !0) { +function ce(e, t, ...n) { + let r = v(this), o; + switch ((Object(t) !== t || r.isSignal(t)) && (t = { textContent: t }), !0) { case typeof e == "function": { - o = e(t || void 0, (s) => s ? (n.unshift(s), void 0) : o); + o = e(t || void 0, (p) => p ? (n.unshift(p), void 0) : o); break; } case e === "#text": - o = y(document.createTextNode(""), t); + o = w(document.createTextNode(""), t); break; case e === "<>": - o = y(document.createDocumentFragment(), t); + o = w(document.createDocumentFragment(), t); break; case S !== "html": - o = y(document.createElementNS(S, e), t); + o = w(document.createElementNS(S, e), t); break; case !o: - o = y(document.createElement(e), t); + o = w(document.createElement(e), t); } - return n.forEach((a) => a(o)), o; + return n.forEach((i) => i(o)), o; } -var { setDeleteAttr: q } = j; -function y(e, ...t) { - let n = N(this); +var { setDeleteAttr: j } = P; +function w(e, ...t) { + let n = this, r = v(this); if (!t.length) return e; - let r = e instanceof SVGElement, o = (r ? I : T).bind(null, e, "Attribute"); - return Object.entries(Object.assign({}, ...t)).forEach(function a([s, i]) { - i = n.processReactiveAttribute(e, s, i, a); - let [h] = s; - if (h === "=") - return o(s.slice(1), i); - if (h === ".") - return M(e, s.slice(1), i); - if (typeof i == "object" && i !== null) + let o = e instanceof SVGElement, i = (o ? J : I).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 i(s.slice(1), a); + if (b === ".") + return T(e, s.slice(1), a); + if (typeof a == "object" && a !== null && !Array.isArray(a)) switch (s) { case "style": - return O(i, T.bind(null, e.style, "Property")); - case "dataset": - return O(i, M.bind(null, e.dataset)); + return N(r, a, T.bind(null, e[s])); case "ariaset": - return O(i, (E, v) => o("aria-" + E, v)); + return N(r, a, (E, c) => i("aria-" + E, c)); case "classList": - return J(e, i); + return B.call(n, e, a); default: - return Reflect.set(e, s, i); + return Reflect.set(e, s, a); } if (/(aria|data)([A-Z])/.test(s)) - return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), o(s, i); - switch (s) { + return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), i(s, a); + switch (s === "className" && (s = "class"), s) { case "href": - return o(s, i); - case "xlink:href": - return o(s, i, "http://www.w3.org/1999/xlink"); + return i(s, a, "http://www.w3.org/1999/xlink"); case "textContent": - if (!r) - break; - return e.appendChild(document.createTextNode(i)); + return o ? e.appendChild(document.createTextNode(a)) : j(e, s, a); } - return W(e, s) ? q(e, s, i) : o(s, i); + return H(e, s) ? j(e, s, a) : i(s, a); }), e; } -function J(e, t) { - return typeof t != "object" || O( +function B(e, t) { + let n = v(this); + return typeof t != "object" || N( + n, t, - (n, r) => e.classList.toggle(n, r === -1 ? void 0 : !!r) + (r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o) ), e; } -function fe(e) { +function se(e) { return Array.from(e.children).forEach((t) => t.remove()), e; } -function W(e, t) { - let n = "HTMLElement," + t; - if (e instanceof HTMLElement && x.has(n)) - return x.get(n); - let r = e.nodeName + "," + t; - if (x.has(r)) - return x.get(r); - let [o, a, s] = H(e, t), i = !m(o.set); - return (!i || a) && x.set(s === HTMLElement.prototype ? n : r, i), i; +function H(e, t) { + if (!Reflect.has(e, t)) + return !1; + let n = F(e, t); + return !m(n.set); } -function H(e, t, n = 0) { +function F(e, t, n = 0) { if (e = Object.getPrototypeOf(e), !e) - return [{}, n, e]; + return {}; let r = Object.getOwnPropertyDescriptor(e, t); - return r ? [r, n, e] : H(e, t, n + 1); + return r || F(e, t, n + 1); } -function O(e, t) { - return Object.entries(e).forEach(([n, r]) => n && t(n, r)); +function N(e, t, n) { + return Object.entries(t).forEach(function([o, i]) { + o && (i = e.processReactiveAttribute(t, o, i, (p) => n(...p)), n(o, i)); + }); } -function T(e, t, n, r) { - return e[(m(r) ? "remove" : "set") + t](n, r); +function M(e) { + return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; } -function I(e, t, n, r, o = null) { - return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, r); +function I(e, t, n, r) { + return e[(m(r) ? "remove" : "set") + t](n, M(r)); } -function M(e, t, n) { +function J(e, t, n, r, o = null) { + return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, M(r)); +} +function T(e, t, n) { if (Reflect.set(e, t, n), !!m(n)) return Reflect.deleteProperty(e, t); } // src/events.js -function de(e, t, ...n) { +function ae(e, t, ...n) { let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); return e.dispatchEvent(r); } -function F(e, t, n) { +function z(e, t, n) { return function(o) { return o.addEventListener(e, t, n), o; }; } -var C = Z(); -F.connected = function(e, t) { +var O = Z(); +z.connected = function(e, t) { return function(r) { - return typeof r.connectedCallback == "function" ? (r.addEventListener("dde:connected", e, t), r) : (D(t && t.signal, () => C.offConnected(r, e)) && (r.isConnected ? e(new Event("dde:connected")) : C.onConnected(r, e)), 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); }; }; -F.disconnected = function(e, t) { +z.disconnected = function(e, t) { return function(r) { - return typeof r.disconnectedCallback == "function" ? (r.addEventListener("dde:disconnected", e, t), r) : (D(t && t.signal, () => C.offDisconnected(r, e)) && C.onDisconnected(r, e), 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); }; }; function Z() { let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) { for (let f of c) if (f.type === "childList") { - if (E(f.addedNodes, !0)) { - s(); + if (b(f.addedNodes, !0)) { + p(); continue; } - v(f.removedNodes, !0) && s(); + E(f.removedNodes, !0) && p(); } }); return { onConnected(c, f) { - a(), o(c).connected.push(f); + i(), o(c).connected.push(f); }, offConnected(c, f) { if (!e.has(c)) return; - let u = e.get(c), p = u.connected; - p.splice(p.indexOf(f), 1), r(c, u); + let u = e.get(c), l = u.connected; + l.splice(l.indexOf(f), 1), r(c, u); }, onDisconnected(c, f) { - a(), o(c).disconnected.push(f); + i(), o(c).disconnected.push(f); }, offDisconnected(c, f) { if (!e.has(c)) return; - let u = e.get(c), p = u.disconnected; - p.splice(p.indexOf(f), 1), r(c, u); + let u = e.get(c), l = u.disconnected; + l.splice(l.indexOf(f), 1), r(c, u); } }; function r(c, f) { - f.connected.length || f.disconnected.length || (e.delete(c), s()); + f.connected.length || f.disconnected.length || (e.delete(c), p()); } function o(c) { if (e.has(c)) @@ -208,19 +210,19 @@ function Z() { let f = { connected: [], disconnected: [] }; return e.set(c, f), f; } - function a() { + function i() { t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); } - function s() { + function p() { !t || e.size || (t = !1, n.disconnect()); } - function i() { + function s() { return new Promise(function(c) { (requestIdleCallback || requestAnimationFrame)(c); }); } - async function h(c) { - e.size > 30 && await i(); + async function a(c) { + e.size > 30 && await s(); let f = []; if (!(c instanceof Node)) return f; @@ -228,21 +230,21 @@ function Z() { u === c || !(u instanceof Node) || c.contains(u) && f.push(u); return f; } - function E(c, f) { + function b(c, f) { for (let u of c) { - if (f && h(u).then(E), !e.has(u)) + if (f && a(u).then(b), !e.has(u)) continue; - let p = e.get(u); - return p.connected.forEach((L) => L(u)), p.connected.length = 0, p.disconnected.length || e.delete(u), !0; + let l = e.get(u); + return l.connected.forEach((y) => y(u)), l.connected.length = 0, l.disconnected.length || e.delete(u), !0; } return !1; } - function v(c, f) { + function E(c, f) { for (let u of c) { - if (f && h(u).then(v), !e.has(u)) + if (f && a(u).then(E), !e.has(u)) continue; - let p = e.get(u); - return p.disconnected.forEach((L) => L(u)), p.connected.length = 0, p.disconnected.length = 0, e.delete(u), !0; + let l = e.get(u); + return l.disconnected.forEach((y) => y(u)), l.connected.length = 0, l.disconnected.length = 0, e.delete(u), !0; } return !1; } @@ -258,21 +260,21 @@ function Z() { // src/signals-lib.js var d = Symbol.for("Signal"); -function R(e) { +function A(e) { try { return Reflect.has(e, d); } catch { return !1; } } -var l = /* @__PURE__ */ new WeakMap(); +var h = /* @__PURE__ */ new WeakMap(); function g(e, t) { if (typeof e != "function") - return z(e, t); - if (R(e)) + return U(e, t); + if (A(e)) return e; - let n = z(""), r = () => n(e()); - return l.set(r, /* @__PURE__ */ new Set([n])), V(r), n; + let n = U(""), r = () => n(e()); + return h.set(r, /* @__PURE__ */ new Set([n])), K(r), n; } g.action = function(e, t, ...n) { let r = e[d], { actions: o } = r; @@ -280,14 +282,14 @@ g.action = function(e, t, ...n) { 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((a) => a(r.value)); + r.listeners.forEach((i) => i(r.value)); }; g.on = function e(t, n, r = {}) { let { signal: o } = r; if (!(o && o.aborted)) { if (Array.isArray(t)) - return t.forEach((a) => e(a, n, r)); - P(t, n), o && o.addEventListener("abort", () => $(t, n)); + return t.forEach((i) => e(i, n, r)); + D(t, n), o && o.addEventListener("abort", () => q(t, n)); } }; g.symbols = { @@ -302,99 +304,94 @@ g.clear = function(...e) { } function t(n, r) { r.listeners.forEach((o) => { - if (r.listeners.delete(o), !l.has(o)) + if (r.listeners.delete(o), !h.has(o)) return; - let a = l.get(o); - a.delete(n), !(a.size > 1) && (g.clear(...a), l.delete(o)); + let i = h.get(o); + i.delete(n), !(i.size > 1) && (g.clear(...i), h.delete(o)); }); } }; g.el = function(e, t) { let n = document.createComment("<#reactive>"), r = document.createComment(""), o = document.createDocumentFragment(); o.append(n, r); - let a = (s) => { + let i = (p) => { if (!n.parentNode || !r.parentNode) - return $(e, a); - let i = t(s); - Array.isArray(i) || (i = [i]); - let h = n; - for (; (h = n.nextSibling) !== r; ) - h.remove(); - n.after(...i); + return q(e, i); + let s = t(p); + Array.isArray(s) || (s = [s]); + let a = n; + for (; (a = n.nextSibling) !== r; ) + a.remove(); + n.after(...s); }; - return P(e, a), a(e()), o; + return D(e, i), i(e()), o; }; -var U = { - isTextContent(e) { - return w(e) === "string" || R(e) && w(Y(e)) === "string"; - }, +var $ = { + isSignal: A, processReactiveAttribute(e, t, n, r) { - return R(n) ? (P(n, (o) => r([t, o])), n()) : n; + return A(n) ? (D(n, (o) => r([t, o])), n()) : n; } }; -function z(e, t) { - let n = (...r) => r.length ? X(n, r[0]) : Q(n); - return G(n, e, t); +function U(e, t) { + let n = (...r) => r.length ? Y(n, r[0]) : X(n); + return V(n, e, t); } -var B = Object.assign(/* @__PURE__ */ Object.create(null), { +var G = Object.assign(/* @__PURE__ */ Object.create(null), { stopPropagation() { this.skip = !0; } }); -function G(e, t, n) { - return w(n) !== "[object Object]" && (n = {}), e[d] = { +function V(e, t, n) { + return _(n) !== "[object Object]" && (n = {}), e[d] = { value: t, actions: n, listeners: /* @__PURE__ */ new Set() - }, e.toJSON = () => e(), Object.setPrototypeOf(e[d], B), e; + }, e.toJSON = () => e(), Object.setPrototypeOf(e[d], G), e; } -var A = []; -function V(e) { +var R = []; +function K(e) { let t = function() { - A.push(t), e(), A.pop(); + R.push(t), e(), R.pop(); }; - l.has(e) && (l.set(t, l.get(e)), l.delete(e)), t(); + h.has(e) && (h.set(t, h.get(e)), h.delete(e)), t(); } -function K() { - return A[A.length - 1]; +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(); - return r && n.add(r), l.has(r) && l.get(r).add(e), t; + 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 Y(e) { - return e[d].value; -} -function P(e, t) { +function D(e, t) { if (e[d]) return e[d].listeners.add(t); } -function $(e, t) { +function q(e, t) { if (e[d]) return e[d].listeners.delete(t); } // signals.js -_(U); +C($); export { g as S, - y as assign, - J as classListDeclarative, - ie as createElement, - de as dispatchEvent, - ie as el, - fe as empty, - R as isSignal, - ce as namespace, - F as on, - _ as registerReactivity + w as assign, + B as classListDeclarative, + ce as createElement, + ae as dispatchEvent, + ce as el, + se as empty, + A as isSignal, + oe as namespace, + z as on, + C as registerReactivity }; diff --git a/dist/esm.js b/dist/esm.js index da9d312..aa94116 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -1,16 +1,16 @@ // src/signals-common.js var g = { - isTextContent(e) { - return typeof e == "string"; + isSignal(e) { + return !1; }, processReactiveAttribute(e, t, r, n) { return r; } }; -function _(e, t = !0) { +function y(e, t = !0) { return t ? Object.assign(g, e) : (Object.setPrototypeOf(e, g), e); } -function O(e) { +function v(e) { return g.isPrototypeOf(e) && e !== g ? e : g; } @@ -18,7 +18,7 @@ function O(e) { function p(e) { return typeof e > "u"; } -function L(e, t) { +function w(e, t) { if (!e || !(e instanceof AbortSignal)) return !0; if (!e.aborted) @@ -28,186 +28,188 @@ function L(e, t) { } // src/dom-common.js -var l = new Map(JSON.parse('[["#text,textContent",true],["HTMLElement,textContent",true],["HTMLElement,className",true]]')), A = { setDeleteAttr: T }; -function T(e, t, r) { - Reflect.set(e, t, r), p(r) && e.getAttribute(t) === "undefined" && e.removeAttribute(t); +var C = { setDeleteAttr: P }; +function P(e, t, r) { + if (Reflect.set(e, t, r), !!p(r)) { + if (e instanceof HTMLElement && e.getAttribute(t) === "undefined") + return e.removeAttribute(t); + if (Reflect.get(e, t) === "undefined") + return Reflect.set(e, t, ""); + } } // src/dom.js -var v = "html"; -function Z(e) { - return v = e === "svg" ? "http://www.w3.org/2000/svg" : e, { +var b = "html"; +function I(e) { + return b = e === "svg" ? "http://www.w3.org/2000/svg" : e, { append(...t) { - return v = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); + return b = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t); } }; } -function $(e, t, ...r) { - let n = O(this), c; - switch (n.isTextContent(t) && (t = { textContent: t }), !0) { +function Z(e, t, ...r) { + let n = v(this), c; + switch ((Object(t) !== t || n.isSignal(t)) && (t = { textContent: t }), !0) { case typeof e == "function": { - c = e(t || void 0, (s) => s ? (r.unshift(s), void 0) : c); + c = e(t || void 0, (l) => l ? (r.unshift(l), void 0) : c); break; } case e === "#text": - c = b(document.createTextNode(""), t); + c = x(document.createTextNode(""), t); break; case e === "<>": - c = b(document.createDocumentFragment(), t); + c = x(document.createDocumentFragment(), t); break; - case v !== "html": - c = b(document.createElementNS(v, e), t); + case b !== "html": + c = x(document.createElementNS(b, e), t); break; case !c: - c = b(document.createElement(e), t); + c = x(document.createElement(e), t); } - return r.forEach((a) => a(c)), c; + return r.forEach((d) => d(c)), c; } -var { setDeleteAttr: M } = A; -function b(e, ...t) { - let r = O(this); +var { setDeleteAttr: R } = C; +function x(e, ...t) { + let r = this, n = v(this); if (!t.length) return e; - let n = e instanceof SVGElement, c = (n ? j : N).bind(null, e, "Attribute"); - return Object.entries(Object.assign({}, ...t)).forEach(function a([s, f]) { - f = r.processReactiveAttribute(e, s, f, a); - let [h] = s; + let c = e instanceof SVGElement, d = (c ? F : T).bind(null, e, "Attribute"); + return Object.entries(Object.assign({}, ...t)).forEach(function l([f, u]) { + u = n.processReactiveAttribute(e, f, u, l); + let [h] = f; if (h === "=") - return c(s.slice(1), f); + return d(f.slice(1), u); if (h === ".") - return y(e, s.slice(1), f); - if (typeof f == "object" && f !== null) - switch (s) { + return D(e, f.slice(1), u); + if (typeof u == "object" && u !== null && !Array.isArray(u)) + switch (f) { case "style": - return m(f, N.bind(null, e.style, "Property")); - case "dataset": - return m(f, y.bind(null, e.dataset)); + return O(n, u, D.bind(null, e[f])); case "ariaset": - return m(f, (x, E) => c("aria-" + x, E)); + return O(n, u, (E, o) => d("aria-" + E, o)); case "classList": - return P(e, f); + return j.call(r, e, u); default: - return Reflect.set(e, s, f); + return Reflect.set(e, f, u); } - if (/(aria|data)([A-Z])/.test(s)) - return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, f); - switch (s) { + if (/(aria|data)([A-Z])/.test(f)) + return f = f.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), d(f, u); + switch (f === "className" && (f = "class"), f) { case "href": - return c(s, f); - case "xlink:href": - return c(s, f, "http://www.w3.org/1999/xlink"); + return d(f, u, "http://www.w3.org/1999/xlink"); case "textContent": - if (!n) - break; - return e.appendChild(document.createTextNode(f)); + return c ? e.appendChild(document.createTextNode(u)) : R(e, f, u); } - return S(e, s) ? M(e, s, f) : c(s, f); + return _(e, f) ? R(e, f, u) : d(f, u); }), e; } -function P(e, t) { - return typeof t != "object" || m( +function j(e, t) { + let r = v(this); + return typeof t != "object" || O( + r, t, - (r, n) => e.classList.toggle(r, n === -1 ? void 0 : !!n) + (n, c) => e.classList.toggle(n, c === -1 ? void 0 : !!c) ), e; } function G(e) { return Array.from(e.children).forEach((t) => t.remove()), e; } -function S(e, t) { - let r = "HTMLElement," + t; - if (e instanceof HTMLElement && l.has(r)) - return l.get(r); - let n = e.nodeName + "," + t; - if (l.has(n)) - return l.get(n); - let [c, a, s] = D(e, t), f = !p(c.set); - return (!f || a) && l.set(s === HTMLElement.prototype ? r : n, f), f; +function _(e, t) { + if (!Reflect.has(e, t)) + return !1; + let r = L(e, t); + return !p(r.set); } -function D(e, t, r = 0) { +function L(e, t, r = 0) { if (e = Object.getPrototypeOf(e), !e) - return [{}, r, e]; + return {}; let n = Object.getOwnPropertyDescriptor(e, t); - return n ? [n, r, e] : D(e, t, r + 1); + return n || L(e, t, r + 1); } -function m(e, t) { - return Object.entries(e).forEach(([r, n]) => r && t(r, n)); +function O(e, t, r) { + return Object.entries(t).forEach(function([c, d]) { + c && (d = e.processReactiveAttribute(t, c, d, (l) => r(...l)), r(c, d)); + }); } -function N(e, t, r, n) { - return e[(p(n) ? "remove" : "set") + t](r, n); +function N(e) { + return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; } -function j(e, t, r, n, c = null) { - return e[(p(n) ? "remove" : "set") + t + "NS"](c, r, n); +function T(e, t, r, n) { + return e[(p(n) ? "remove" : "set") + t](r, N(n)); } -function y(e, t, r) { +function F(e, t, r, n, c = null) { + return e[(p(n) ? "remove" : "set") + t + "NS"](c, r, N(n)); +} +function D(e, t, r) { if (Reflect.set(e, t, r), !!p(r)) return Reflect.deleteProperty(e, t); } // src/events.js -function W(e, t, ...r) { +function J(e, t, ...r) { let n = r.length ? new CustomEvent(t, { detail: r[0] }) : new Event(t); return e.dispatchEvent(n); } -function R(e, t, r) { +function S(e, t, r) { return function(c) { return c.addEventListener(e, t, r), c; }; } -var w = H(); -R.connected = function(e, t) { +var m = M(); +S.connected = function(e, t) { return function(n) { - return typeof n.connectedCallback == "function" ? (n.addEventListener("dde:connected", e, t), n) : (L(t && t.signal, () => w.offConnected(n, e)) && (n.isConnected ? e(new Event("dde:connected")) : w.onConnected(n, e)), n); + return typeof n.connectedCallback == "function" ? (n.addEventListener("dde:connected", e, t), n) : (w(t && t.signal, () => m.offConnected(n, e)) && (n.isConnected ? e(new Event("dde:connected")) : m.onConnected(n, e)), n); }; }; -R.disconnected = function(e, t) { +S.disconnected = function(e, t) { return function(n) { - return typeof n.disconnectedCallback == "function" ? (n.addEventListener("dde:disconnected", e, t), n) : (L(t && t.signal, () => w.offDisconnected(n, e)) && w.onDisconnected(n, e), n); + return typeof n.disconnectedCallback == "function" ? (n.addEventListener("dde:disconnected", e, t), n) : (w(t && t.signal, () => m.offDisconnected(n, e)) && m.onDisconnected(n, e), n); }; }; -function H() { +function M() { let e = /* @__PURE__ */ new Map(), t = !1, r = new MutationObserver(function(o) { - for (let i of o) - if (i.type === "childList") { - if (x(i.addedNodes, !0)) { - s(); + for (let s of o) + if (s.type === "childList") { + if (h(s.addedNodes, !0)) { + l(); continue; } - E(i.removedNodes, !0) && s(); + E(s.removedNodes, !0) && l(); } }); return { - onConnected(o, i) { - a(), c(o).connected.push(i); + onConnected(o, s) { + d(), c(o).connected.push(s); }, - offConnected(o, i) { + offConnected(o, s) { if (!e.has(o)) return; - let u = e.get(o), d = u.connected; - d.splice(d.indexOf(i), 1), n(o, u); + let i = e.get(o), a = i.connected; + a.splice(a.indexOf(s), 1), n(o, i); }, - onDisconnected(o, i) { - a(), c(o).disconnected.push(i); + onDisconnected(o, s) { + d(), c(o).disconnected.push(s); }, - offDisconnected(o, i) { + offDisconnected(o, s) { if (!e.has(o)) return; - let u = e.get(o), d = u.disconnected; - d.splice(d.indexOf(i), 1), n(o, u); + let i = e.get(o), a = i.disconnected; + a.splice(a.indexOf(s), 1), n(o, i); } }; - function n(o, i) { - i.connected.length || i.disconnected.length || (e.delete(o), s()); + function n(o, s) { + s.connected.length || s.disconnected.length || (e.delete(o), l()); } function c(o) { if (e.has(o)) return e.get(o); - let i = { connected: [], disconnected: [] }; - return e.set(o, i), i; + let s = { connected: [], disconnected: [] }; + return e.set(o, s), s; } - function a() { + function d() { t || (t = !0, r.observe(document.body, { childList: !0, subtree: !0 })); } - function s() { + function l() { !t || e.size || (t = !1, r.disconnect()); } function f() { @@ -215,30 +217,30 @@ function H() { (requestIdleCallback || requestAnimationFrame)(o); }); } - async function h(o) { + async function u(o) { e.size > 30 && await f(); - let i = []; + let s = []; if (!(o instanceof Node)) - return i; - for (let u of e.keys()) - u === o || !(u instanceof Node) || o.contains(u) && i.push(u); - return i; + return s; + for (let i of e.keys()) + i === o || !(i instanceof Node) || o.contains(i) && s.push(i); + return s; } - function x(o, i) { - for (let u of o) { - if (i && h(u).then(x), !e.has(u)) + function h(o, s) { + for (let i of o) { + if (s && u(i).then(h), !e.has(i)) continue; - let d = e.get(u); - return d.connected.forEach((C) => C(u)), d.connected.length = 0, d.disconnected.length || e.delete(u), !0; + let a = e.get(i); + return a.connected.forEach((A) => A(i)), a.connected.length = 0, a.disconnected.length || e.delete(i), !0; } return !1; } - function E(o, i) { - for (let u of o) { - if (i && h(u).then(E), !e.has(u)) + function E(o, s) { + for (let i of o) { + if (s && u(i).then(E), !e.has(i)) continue; - let d = e.get(u); - return d.disconnected.forEach((C) => C(u)), d.connected.length = 0, d.disconnected.length = 0, e.delete(u), !0; + let a = e.get(i); + return a.disconnected.forEach((A) => A(i)), a.connected.length = 0, a.disconnected.length = 0, e.delete(i), !0; } return !1; } @@ -252,13 +254,13 @@ function H() { }; }); export { - b as assign, - P as classListDeclarative, - $ as createElement, - W as dispatchEvent, - $ as el, + x as assign, + j as classListDeclarative, + Z as createElement, + J as dispatchEvent, + Z as el, G as empty, - Z as namespace, - R as on, - _ as registerReactivity + I as namespace, + S as on, + y as registerReactivity }; diff --git a/package.json b/package.json index 3b8fdc2..f44e5fc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "deka-dom-el", - "version": "0.2.2", + "version": "0.3.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", diff --git a/src/dom-common.js b/src/dom-common.js index 1d63203..9b933c6 100644 --- a/src/dom-common.js +++ b/src/dom-common.js @@ -1,5 +1,3 @@ -/** @type {Map} */ -export const prop_cache= new Map(JSON.parse('[["#text,textContent",true],["HTMLElement,textContent",true],["HTMLElement,className",true]]')); export const prop_process= { setDeleteAttr }; import { isUndef } from './helpers.js'; function setDeleteAttr(obj, prop, val){ @@ -13,6 +11,9 @@ function setDeleteAttr(obj, prop, val){ 4. Point 2. with checks for coincidence (e.g. use special string) */ Reflect.set(obj, prop, val); - if(isUndef(val) && obj.getAttribute(prop)==="undefined") - obj.removeAttribute(prop); + if(!isUndef(val)) return; + if(obj instanceof HTMLElement && obj.getAttribute(prop)==="undefined") + return obj.removeAttribute(prop); + if(Reflect.get(obj, prop)==="undefined") + return Reflect.set(obj, prop, ""); } diff --git a/src/dom.js b/src/dom.js index 14c88cf..9b50b16 100644 --- a/src/dom.js +++ b/src/dom.js @@ -17,7 +17,7 @@ export function createElement(tag, attributes, ...connect){ const s= signals(this); let el; //TODO Array.isArray(tag) ⇒ set key (cache els) - if(s.isTextContent(attributes)) + if(Object(attributes)!==attributes || s.isSignal(attributes)) attributes= { textContent: attributes }; switch(true){ case typeof tag==="function": { @@ -35,40 +35,39 @@ export function createElement(tag, attributes, ...connect){ } export { createElement as el }; -import { prop_cache, prop_process } from './dom-common.js'; +import { prop_process } from './dom-common.js'; const { setDeleteAttr }= prop_process; export function assign(element, ...attributes){ + const _this= this; const s= signals(this); if(!attributes.length) return element; const is_svg= element instanceof SVGElement; const setRemoveAttr= (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute"); - /* jshint maxcomplexity:17 */ + /* jshint maxcomplexity:20 */ Object.entries(Object.assign({}, ...attributes)).forEach(function assignNth([ key, attr ]){ attr= s.processReactiveAttribute(element, key, attr, assignNth); const [ k ]= key; if("="===k) return setRemoveAttr(key.slice(1), attr); if("."===k) return setDelete(element, key.slice(1), attr); - if(typeof attr === "object" && attr!==null){ + if(typeof attr === "object" && attr!==null && !Array.isArray(attr)){ switch(key){ - case "style": return forEachEntries(attr, setRemove.bind(null, element.style, "Property")); - case "dataset": return forEachEntries(attr, setDelete.bind(null, element.dataset)); - case "ariaset": return forEachEntries(attr, (key, val)=> setRemoveAttr("aria-"+key, val)); - case "classList": return classListDeclarative(element, attr); - default: return Reflect.set(element, key, attr); + case "style" || "dataset": return forEachEntries(s, attr, setDelete.bind(null, element[key])); + case "ariaset": return forEachEntries(s, attr, (key, val)=> setRemoveAttr("aria-"+key, val)); + case "classList": return classListDeclarative.call(_this, element, attr); + default: return Reflect.set(element, key, attr); } } if(/(aria|data)([A-Z])/.test(key)){ key= key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(); return setRemoveAttr(key, attr); } + if("className"===key) key= "class"; switch(key){ - case "href" || "src": - return setRemoveAttr(key, attr); - case "xlink:href": + case "href" || "src" || "class" || "xlink:href": return setRemoveAttr(key, attr, "http://www.w3.org/1999/xlink"); case "textContent" || "innerText": - if(!is_svg) break; + if(!is_svg) return setDeleteAttr(element, key, attr); return element.appendChild(document.createTextNode(attr)); } return isPropSetter(element, key) ? setDeleteAttr(element, key, attr) : setRemoveAttr(key, attr); @@ -76,9 +75,10 @@ export function assign(element, ...attributes){ return element; } export function classListDeclarative(element, toggle){ + const s= signals(this); if(typeof toggle !== "object") return element; - forEachEntries(toggle, + forEachEntries(s, toggle, (class_name, val)=> element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val))); return element; @@ -89,28 +89,28 @@ export function empty(el){ } import { isUndef } from "./helpers.js"; function isPropSetter(el, key){ - const cache_key_he= "HTMLElement,"+key; - if(el instanceof HTMLElement && prop_cache.has(cache_key_he)) - return prop_cache.get(cache_key_he); - const cache_key= el.nodeName+","+key; - if(prop_cache.has(cache_key)) return prop_cache.get(cache_key); - const [ des, level, p ]= getPropDescriptor(el, key); - const is_set= !isUndef(des.set); - if(!is_set || level) - prop_cache.set(p===HTMLElement.prototype ? cache_key_he : cache_key, is_set); - return is_set; + if(!Reflect.has(el, key)) return false; + const des= getPropDescriptor(el, key); + return !isUndef(des.set); } function getPropDescriptor(p, key, level= 0){ p= Object.getPrototypeOf(p); - if(!p) return [ {}, level, p ]; + if(!p) return {}; const des= Object.getOwnPropertyDescriptor(p, key); if(!des) return getPropDescriptor(p, key, level+1); - return [ des, level, p ]; + return des; } -/** @template {Record} T @param {T} obj @param {(param: [ keyof T, T[keyof T] ])=> void} cb */ -function forEachEntries(obj, cb){ return Object.entries(obj).forEach(([ key, val ])=> key && cb(key, val)); } +/** @template {Record} T @param {object} s @param {T} obj @param {(param: [ keyof T, T[keyof T] ])=> void} cb */ +function forEachEntries(s, obj, cb){ + return Object.entries(obj).forEach(function process([ key, val ]){ + if(!key) return; + val= s.processReactiveAttribute(obj, key, val, a=> cb(...a)); + cb(key, val); + }); +} -function setRemove(obj, prop, key, val){ return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, val); } -function setRemoveNS(obj, prop, key, val, ns= null){ return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, val); } +function attrArrToStr(attr){ return Array.isArray(attr) ? attr.filter(Boolean).join(" ") : attr; } +function setRemove(obj, prop, key, val){ return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, attrArrToStr(val)); } +function setRemoveNS(obj, prop, key, val, ns= null){ return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, attrArrToStr(val)); } function setDelete(obj, key, val){ Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key); } diff --git a/src/signals-common.js b/src/signals-common.js index 84581a5..d0b42c5 100644 --- a/src/signals-common.js +++ b/src/signals-common.js @@ -1,6 +1,6 @@ export const signals_global= { - isTextContent(attributes){ return typeof attributes==="string"; }, - processReactiveAttribute(el, key, attr, assignNth){ return attr; }, + isSignal(attributes){ return false; }, + processReactiveAttribute(obj, key, attr, assignNth){ return attr; }, }; export function registerReactivity(def, global= true){ if(global) return Object.assign(signals_global, def); diff --git a/src/signals-lib.js b/src/signals-lib.js index 8613699..82ab75b 100644 --- a/src/signals-lib.js +++ b/src/signals-lib.js @@ -84,9 +84,7 @@ S.el= function(signal, map){ import { typeOf } from './helpers.js'; export const signals_config= { - isTextContent(attributes){ - return typeOf(attributes)==="string" || ( isSignal(attributes) && typeOf(valueOfSignal(attributes))==="string" ); - }, + isSignal, processReactiveAttribute(_, key, attrs, assignNth){ //TODO DOC: once the signal is used as attribute, there is no reason to use assign again (if for some reason needed, use imperative listeners clear with `S.clear`) if(!isSignal(attrs)) return attrs; diff --git a/test/components/fullNameComponent.js b/test/components/fullNameComponent.js index 712d7d3..d9143d5 100644 --- a/test/components/fullNameComponent.js +++ b/test/components/fullNameComponent.js @@ -21,7 +21,7 @@ export function fullNameComponent(){ ), el("p").append( el("strong", "Full name"), - el("#text", ": "), + ": ", el("#text", full_name) ) ); diff --git a/test/exports.js b/test/exports.js index 4186c18..f356813 100644 --- a/test/exports.js +++ b/test/exports.js @@ -1,7 +1,7 @@ import * as dde_dom from "../index.js"; export * from "../index.js"; -import * as dde_s from "../src/signals.js"; -export * from "../src/signals.js"; +import * as dde_s from "../signals.js"; +export * from "../signals.js"; // import { empty, namespace, on, dispatch } from "../index.js"; // import "../dist/dde-with-signals.js"; // Object.assign(globalThis, dde);