diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js index 798dde3..38fde21 100644 --- a/dist/dde-with-signals.js +++ b/dist/dde-with-signals.js @@ -70,7 +70,7 @@ var A = [{ }, host: (t) => t ? t(d.D.body) : d.D.body, prevent: !0 -}], m = { +}], x = { get current() { return A[A.length - 1]; }, @@ -106,15 +106,17 @@ function P(t, e, ...n) { let r = W(this), o = 0, c, i; switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { case typeof t == "function": { - o = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((h) => h(i)), void 0) : i }), c = t(e || void 0); - let a = c instanceof d.F; + o = 1; + let a = (...p) => p.length ? (o === 1 ? n.unshift(...p) : p.forEach((m) => m(i)), void 0) : i; + x.push({ scope: t, host: a }), c = t(e || void 0); + let h = c instanceof d.F; if (c.nodeName === "#comment") break; - let l = P.mark({ + let v = P.mark({ type: "component", name: t.name, - host: a ? "this" : "parentElement" + host: h ? "this" : "parentElement" }); - c.prepend(l), a && (i = l); + c.prepend(v), h && (i = v); break; } case t === "#text": @@ -129,23 +131,28 @@ function P(t, e, ...n) { case !c: c = j.call(this, d.D.createElement(t), e); } - return ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c; + return ht(c), i || (i = c), n.forEach((a) => a(i)), o && x.pop(), o = 2, c; } +P.mark = function(t, e = !1) { + t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); + let n = e ? "" : "/", r = d.D.createComment(``); + return e && (r.end = d.D.createComment("")), r; +}; function Wt(t, e, n) { typeof e != "object" && (n = e, e = t); let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r); if (t.append = new Proxy(t.append, { - apply(i, a, l) { - if (l[0] === e) return i.apply(t, l); - if (!l.length) return t; + apply(i, a, h) { + if (h[0] === e) return i.apply(t, h); + if (!h.length) return t; let v = d.D.createDocumentFragment(); - for (let h of l) { - if (!h || !h.slot) { - c && v.append(h); + for (let p of h) { + if (!p || !p.slot) { + c && v.append(p); continue; } - let x = h.slot, w = o[x]; - vt(h, "remove", "slot"), w && (bt(w, h, n), Reflect.deleteProperty(o, x)); + let m = p.slot, y = o[m]; + vt(p, "remove", "slot"), y && (bt(y, p, n), Reflect.deleteProperty(o, m)); } return c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t; } @@ -158,16 +165,14 @@ function Wt(t, e, n) { function bt(t, e, n) { n && n(t, e); try { - t.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } })); + t.replaceWith(j(e, { + className: [e.className, t.className], + dataset: { ...t.dataset } + })); } catch { t.replaceWith(e); } } -P.mark = function(t, e = !1) { - t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); - let n = e ? "" : "/", r = d.D.createComment(``); - return e && (r.end = d.D.createComment("")), r; -}; function qt(t) { let e = this; return function(...r) { @@ -190,7 +195,7 @@ function nt(t, e, n) { t, e, n, - (a, l) => nt.call(c, t, a, l) + (a, h) => nt.call(c, t, a, h) ); let [i] = e; if (i === "=") return r(e.slice(1), n); @@ -208,7 +213,7 @@ function nt(t, e, n) { case "dataset": return I(o, n, et.bind(null, t[e])); case "ariaset": - return I(o, n, (a, l) => r("aria-" + a, l)); + return I(o, n, (a, h) => r("aria-" + a, h)); case "classList": return gt.call(c, t, n); } @@ -227,9 +232,6 @@ function gt(t, e) { (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) ), t; } -function Ft(t) { - return Array.from(t.children).forEach((e) => e.remove()), t; -} function vt(t, e, n, r) { return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); } @@ -264,21 +266,21 @@ function et(t, e, n) { } // src/events-observer.js -var D = d.M ? yt() : new Proxy({}, { +var D = d.M ? wt() : new Proxy({}, { get() { return () => { }; } }); -function yt() { +function wt() { let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) { for (let f of u) if (f.type === "childList") { - if (h(f.addedNodes, !0)) { + if (p(f.addedNodes, !0)) { s(); continue; } - x(f.removedNodes, !0) && s(); + m(f.removedNodes, !0) && s(); } }, r = new d.M(n(a)); return { @@ -327,35 +329,35 @@ function yt() { function a() { !e || t.size || (e = !1, r.disconnect()); } - function l() { + function h() { return new Promise(function(s) { (requestIdleCallback || requestAnimationFrame)(s); }); } async function v(s) { - t.size > 30 && await l(); + t.size > 30 && await h(); let u = []; if (!(s instanceof Node)) return u; for (let f of t.keys()) f === s || !(f instanceof Node) || s.contains(f) && u.push(f); return u; } - function h(s, u) { + function p(s, u) { let f = !1; for (let b of s) { - if (u && v(b).then(h), !t.has(b)) continue; + if (u && v(b).then(p), !t.has(b)) continue; let N = t.get(b); N.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0); } return f; } - function x(s, u) { + function m(s, u) { let f = !1; for (let b of s) - u && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0); + u && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0); return f; } - function w(s) { + function y(s) { return () => { s.isConnected || (s.dispatchEvent(new Event(C)), t.delete(s)); }; @@ -363,17 +365,17 @@ function yt() { } // src/customElement.js -function Zt(t, e, n, r = _t) { - m.push({ +function Jt(t, e, n, r = _t) { + x.push({ scope: t, host: (...i) => i.length ? i.forEach((a) => a(t)) : t }), typeof r == "function" && (r = r.call(t, t)); let o = t[O]; - o || wt(t); + o || yt(t); let c = n.call(t, r); - return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), m.pop(), e.append(c); + return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), x.pop(), e.append(c); } -function wt(t) { +function yt(t) { return J(t.prototype, "connectedCallback", function(e, n, r) { e.apply(n, r), n.dispatchEvent(new Event(_)); }), J(t.prototype, "disconnectedCallback", function(e, n, r) { @@ -396,43 +398,43 @@ function _t(t) { } // src/events.js -function Qt(t, e, n) { +function Kt(t, e, n) { return e || (e = {}), function(o, ...c) { n && (c.unshift(o), o = typeof n == "function" ? n() : n); let i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); return o.dispatchEvent(i); }; } -function y(t, e, n) { +function w(t, e, n) { return function(o) { return o.addEventListener(t, e, n), o; }; } var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); -y.connected = function(t, e) { +w.connected = function(t, e) { return e = it(e), function(r) { return r.addEventListener(_, t, e), r[O] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r); }; }; -y.disconnected = function(t, e) { +w.disconnected = function(t, e) { return e = it(e), function(r) { return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r; }; }; var Z = /* @__PURE__ */ new WeakMap(); -y.disconnectedAsAbort = function(t) { +w.disconnectedAsAbort = function(t) { if (Z.has(t)) return Z.get(t); let e = new AbortController(); - return Z.set(t, e), t(y.disconnected(() => e.abort())), e; + return Z.set(t, e), t(w.disconnected(() => e.abort())), e; }; var At = /* @__PURE__ */ new WeakSet(); -y.attributeChanged = function(t, e) { +w.attributeChanged = function(t, e) { return typeof e != "object" && (e = {}), function(r) { if (r.addEventListener(M, t, e), r[O] || At.has(r) || !d.M) return r; let o = new d.M(function(i) { - for (let { attributeName: a, target: l } of i) - l.dispatchEvent( - new CustomEvent(M, { detail: [a, l.getAttribute(a)] }) + for (let { attributeName: a, target: h } of i) + h.dispatchEvent( + new CustomEvent(M, { detail: [a, h.getAttribute(a)] }) ); }); return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; @@ -440,10 +442,10 @@ y.attributeChanged = function(t, e) { }; // src/signals-lib.js -var p = "__dde_signal"; +var l = "__dde_signal"; function z(t) { try { - return T(t, p); + return T(t, l); } catch { return !1; } @@ -460,10 +462,10 @@ function E(t, e) { for (let a of c) i.has(a) || L(a, r); }; - return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n; + return g.set(n[l], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n; } E.action = function(t, e, ...n) { - let r = t[p], { actions: o } = r; + let r = t[l], { actions: o } = r; if (!o || !(e in o)) throw new Error(`'${t}' has no action with name '${e}'!`); if (o[e].apply(r, n), r.skip) return delete r.skip; @@ -482,8 +484,8 @@ E.symbols = { }; E.clear = function(...t) { for (let n of t) { - let r = n[p]; - r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]); + let r = n[l]; + r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[l]); } function e(n, r) { r.listeners.forEach((o) => { @@ -497,22 +499,22 @@ var R = "__dde_reactive"; E.el = function(t, e) { let n = P.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment(); o.append(n, r); - let { current: c } = m, i = {}, a = (l) => { + let { current: c } = x, i = {}, a = (h) => { if (!n.parentNode || !r.parentNode) return L(t, a); let v = i; - i = {}, m.push(c); - let h = e(l, function(u, f) { + i = {}, x.push(c); + let p = e(h, function(u, f) { let b; return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b; }); - m.pop(), Array.isArray(h) || (h = [h]); - let x = document.createComment(""); - h.push(x), n.after(...h); - let w; - for (; (w = x.nextSibling) && w !== r; ) - w.remove(); - x.remove(), n.isConnected && St(c.host()); + x.pop(), Array.isArray(p) || (p = [p]); + let m = document.createComment(""); + p.push(m), n.after(...p); + let y; + for (; (y = m.nextSibling) && y !== r; ) + y.remove(); + m.remove(), n.isConnected && St(c.host()); }; return Q(t, a), ft(t, a, n, e), a(t()), o; }; @@ -535,12 +537,12 @@ function Ct(t) { var G = "__dde_attributes"; E.observedAttributes = function(t) { let e = t[G] = {}, n = F(t, Ct(e)); - return y.attributeChanged(function({ detail: o }) { + return w.attributeChanged(function({ detail: o }) { /*! This maps attributes to signals (`S.observedAttributes`). * Investigate `__dde_attributes` key of the element.*/ let [c, i] = o, a = this[G][c]; if (a) return E.action(a, "_set", i); - })(t), y.disconnected(function() { + })(t), w.disconnected(function() { /*! This removes all signals mapped to attributes (`S.observedAttributes`). * Investigate `__dde_attributes` key of the element.*/ E.clear(...Object.values(this[G])); @@ -559,15 +561,15 @@ var ut = { } }; function ft(t, e, ...n) { - let { current: r } = m; + let { current: r } = x; r.prevent || r.host(function(o) { - o[R] || (o[R] = [], y.disconnected( + o[R] || (o[R] = [], w.disconnected( () => ( /*! * Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?). * You can investigate the `__dde_reactive` key of the element. * */ - o[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o)) + o[R].forEach(([[c, i]]) => L(c, i, c[l] && c[l].host && c[l].host() === o)) ) )(o)), o[R].push([[t, e], ...n]); }); @@ -593,8 +595,8 @@ function at(t, e, n, r = !1) { X(n) !== "[object Object]" && (n = {}); let { onclear: c } = E.symbols; n[c] && (o.push(n[c]), delete n[c]); - let { host: i } = m; - return Reflect.defineProperty(t, p, { + let { host: i } = x; + return Reflect.defineProperty(t, l, { value: { value: e, actions: n, @@ -607,28 +609,28 @@ function at(t, e, n, r = !1) { enumerable: !1, writable: !1, configurable: !0 - }), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t; + }), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], Dt), t; } function Rt() { return H[H.length - 1]; } function K(t) { - if (!t[p]) return; - let { value: e, listeners: n } = t[p], r = Rt(); + if (!t[l]) return; + let { value: e, listeners: n } = t[l], r = Rt(); return r && n.add(r), g.has(r) && g.get(r).add(t), e; } function dt(t, e, n) { - if (!t[p]) return; - let r = t[p]; + if (!t[l]) return; + let r = t[l]; if (!(!n && r.value === e)) return r.value = e, r.listeners.forEach((o) => o(e)), e; } function Q(t, e) { - if (t[p]) - return t[p].listeners.add(e); + if (t[l]) + return t[l].listeners.add(e); } function L(t, e, n) { - let r = t[p]; + let r = t[l]; if (!r) return; let o = r.listeners.delete(e); if (n && !r.listeners.size) { @@ -651,19 +653,18 @@ globalThis.dde= { classListDeclarative: gt, createElement: P, createElementNS: qt, - customElementRender: Zt, - customElementWithDDE: wt, - dispatchEvent: Qt, + customElementRender: Jt, + customElementWithDDE: yt, + dispatchEvent: Kt, el: P, elNS: qt, elementAttribute: vt, - empty: Ft, isSignal: z, - lifecyclesToEvents: wt, + lifecyclesToEvents: yt, observedAttributes: _t, - on: y, + on: w, registerReactivity: B, - scope: m, + scope: x, signal: E, simulateSlots: Wt }; diff --git a/dist/dde.js b/dist/dde.js index 9213f89..c6a64cc 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -1,7 +1,7 @@ //deka-dom-el library is available via global namespace `dde` (()=> { // src/signals-common.js -var C = { +var m = { isSignal(t) { return !1; }, @@ -10,15 +10,15 @@ var C = { } }; function V(t, e = !0) { - return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t); + return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t); } function L(t) { - return C.isPrototypeOf(t) && t !== C ? t : C; + return m.isPrototypeOf(t) && t !== m ? t : m; } // src/helpers.js var q = (...t) => Object.prototype.hasOwnProperty.call(...t); -function E(t) { +function x(t) { return typeof t > "u"; } function N(t, e) { @@ -50,14 +50,14 @@ var a = { M: globalThis.MutationObserver }; function K(t, e, n) { - if (Reflect.set(t, e, n), !!E(n)) { + if (Reflect.set(t, e, n), !!x(n)) { if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined") return t.removeAttribute(e); if (Reflect.get(t, e) === "undefined") return Reflect.set(t, e, ""); } } -var x = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged"; +var y = "__dde_lifecyclesToEvents", g = "dde:connected", w = "dde:disconnected", D = "dde:attributeChanged"; // src/dom.js var v = [{ @@ -102,15 +102,17 @@ function j(t, e, ...n) { let r = L(this), o = 0, c, f; switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { case typeof t == "function": { - o = 1, S.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((h) => h(f)), void 0) : f }), c = t(e || void 0); - let d = c instanceof a.F; + o = 1; + let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(f)), void 0) : f; + S.push({ scope: t, host: d }), c = t(e || void 0); + let p = c instanceof a.F; if (c.nodeName === "#comment") break; - let p = j.mark({ + let b = j.mark({ type: "component", name: t.name, - host: d ? "this" : "parentElement" + host: p ? "this" : "parentElement" }); - c.prepend(p), d && (f = p); + c.prepend(b), p && (f = b); break; } case t === "#text": @@ -127,6 +129,11 @@ function j(t, e, ...n) { } return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c; } +j.mark = function(t, e = !1) { + t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); + let n = e ? "" : "/", r = a.D.createComment(``); + return e && (r.end = a.D.createComment("")), r; +}; function bt(t, e, n) { typeof e != "object" && (n = e, e = t); let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((f, d) => Reflect.set(f, d.name || r, d) && f, {}), c = q(o, r); @@ -135,13 +142,13 @@ function bt(t, e, n) { if (p[0] === e) return f.apply(t, p); if (!p.length) return t; let b = a.D.createDocumentFragment(); - for (let h of p) { - if (!h || !h.slot) { - c && b.append(h); + for (let l of p) { + if (!l || !l.slot) { + c && b.append(l); continue; } - let A = h.slot, _ = o[A]; - tt(h, "remove", "slot"), _ && (X(_, h, n), Reflect.deleteProperty(o, A)); + let E = l.slot, _ = o[E]; + tt(l, "remove", "slot"), _ && (X(_, l, n), Reflect.deleteProperty(o, E)); } return c && (o[r].replaceWith(b), Reflect.deleteProperty(o, r)), t.append = f, t; } @@ -154,16 +161,14 @@ function bt(t, e, n) { function X(t, e, n) { n && n(t, e); try { - t.replaceWith(O(e, { className: [e.className, t.className], dataset: { ...t.dataset } })); + t.replaceWith(O(e, { + className: [e.className, t.className], + dataset: { ...t.dataset } + })); } catch { t.replaceWith(e); } } -j.mark = function(t, e = !1) { - t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); - let n = e ? "" : "/", r = a.D.createComment(``); - return e && (r.end = a.D.createComment("")), r; -}; function gt(t) { let e = this; return function(...r) { @@ -223,16 +228,13 @@ function Y(t, e) { (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) ), t; } -function vt(t) { - return Array.from(t.children).forEach((e) => e.remove()), t; -} function tt(t, e, n, r) { return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); } function et(t, e) { if (!(e in t)) return !1; let n = I(t, e); - return !E(n.set); + return !x(n.set); } function I(t, e) { if (t = Object.getPrototypeOf(t), !t) return {}; @@ -249,18 +251,18 @@ function Z(t) { return Array.isArray(t) ? t.filter(Boolean).join(" ") : t; } function nt(t, e, n, r) { - return t[(E(r) ? "remove" : "set") + e](n, Z(r)); + return t[(x(r) ? "remove" : "set") + e](n, Z(r)); } function rt(t, e, n, r, o = null) { - return t[(E(r) ? "remove" : "set") + e + "NS"](o, n, Z(r)); + return t[(x(r) ? "remove" : "set") + e + "NS"](o, n, Z(r)); } function H(t, e, n) { - if (Reflect.set(t, e, n), !!E(n)) + if (Reflect.set(t, e, n), !!x(n)) return Reflect.deleteProperty(t, e); } // src/events-observer.js -var w = a.M ? ot() : new Proxy({}, { +var A = a.M ? ot() : new Proxy({}, { get() { return () => { }; @@ -270,11 +272,11 @@ function ot() { let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) { for (let s of u) if (s.type === "childList") { - if (h(s.addedNodes, !0)) { + if (l(s.addedNodes, !0)) { i(); continue; } - A(s.removedNodes, !0) && i(); + E(s.removedNodes, !0) && i(); } }, r = new a.M(n(d)); return { @@ -336,52 +338,52 @@ function ot() { s === i || !(s instanceof Node) || i.contains(s) && u.push(s); return u; } - function h(i, u) { + function l(i, u) { let s = !1; - for (let l of i) { - if (u && b(l).then(h), !t.has(l)) continue; - let m = t.get(l); - m.length_c && (l.dispatchEvent(new Event(g)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(l), s = !0); + for (let h of i) { + if (u && b(h).then(l), !t.has(h)) continue; + let C = t.get(h); + C.length_c && (h.dispatchEvent(new Event(g)), C.connected = /* @__PURE__ */ new WeakSet(), C.length_c = 0, C.length_d || t.delete(h), s = !0); } return s; } - function A(i, u) { + function E(i, u) { let s = !1; - for (let l of i) - u && b(l).then(A), !(!t.has(l) || !t.get(l).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(l)), s = !0); + for (let h of i) + u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0); return s; } function _(i) { return () => { - i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i)); + i.isConnected || (i.dispatchEvent(new Event(w)), t.delete(i)); }; } } // src/customElement.js -function Dt(t, e, n, r = it) { +function mt(t, e, n, r = it) { S.push({ scope: t, host: (...f) => f.length ? f.forEach((d) => d(t)) : t }), typeof r == "function" && (r = r.call(t, t)); - let o = t[x]; + let o = t[y]; o || ct(t); let c = n.call(t, r); - return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, w.observe(e), { once: !0 }), S.pop(), e.append(c); + return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(w, A.observe(e), { once: !0 }), S.pop(), e.append(c); } function ct(t) { return k(t.prototype, "connectedCallback", function(e, n, r) { e.apply(n, r), n.dispatchEvent(new Event(g)); }), k(t.prototype, "disconnectedCallback", function(e, n, r) { e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( - () => !n.isConnected && n.dispatchEvent(new Event(y)) + () => !n.isConnected && n.dispatchEvent(new Event(w)) ); }), k(t.prototype, "attributeChangedCallback", function(e, n, r) { let [o, , c] = r; n.dispatchEvent(new CustomEvent(D, { detail: [o, c] })), e.apply(n, r); - }), t.prototype[x] = !0, t; + }), t.prototype[y] = !0, t; } function k(t, e, n) { t[e] = new Proxy(t[e] || (() => { @@ -392,7 +394,7 @@ function it(t) { } // src/events.js -function _t(t, e, n) { +function Rt(t, e, n) { return e || (e = {}), function(o, ...c) { n && (c.unshift(o), o = typeof n == "function" ? n() : n); let f = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); @@ -407,12 +409,12 @@ function R(t, e, n) { var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); R.connected = function(t, e) { return e = G(e), function(r) { - return r.addEventListener(g, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r); + return r.addEventListener(g, t, e), r[y] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.onConnected(r, t), r); }; }; R.disconnected = function(t, e) { return e = G(e), function(r) { - return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r; + return r.addEventListener(w, t, e), r[y] || N(e.signal, () => A.offDisconnected(r, t)) && A.onDisconnected(r, t), r; }; }; var W = /* @__PURE__ */ new WeakMap(); @@ -424,7 +426,7 @@ R.disconnectedAsAbort = function(t) { var st = /* @__PURE__ */ new WeakSet(); R.attributeChanged = function(t, e) { return typeof e != "object" && (e = {}), function(r) { - if (r.addEventListener(D, t, e), r[x] || st.has(r) || !a.M) return r; + if (r.addEventListener(D, t, e), r[y] || st.has(r) || !a.M) return r; let o = new a.M(function(f) { for (let { attributeName: d, target: p } of f) p.dispatchEvent( @@ -442,13 +444,12 @@ globalThis.dde= { classListDeclarative: Y, createElement: j, createElementNS: gt, - customElementRender: Dt, + customElementRender: mt, customElementWithDDE: ct, - dispatchEvent: _t, + dispatchEvent: Rt, el: j, elNS: gt, elementAttribute: tt, - empty: vt, lifecyclesToEvents: ct, observedAttributes: it, on: R, diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts index 18a5868..38df36e 100644 --- a/dist/esm-with-signals.d.ts +++ b/dist/esm-with-signals.d.ts @@ -1,13 +1,13 @@ declare global{ /* ddeSignal */ } type CustomElementTagNameMap= { '#text': Text, '#comment': Comment } type SupportedElement= - HTMLElementTagNameMap[keyof HTMLElementTagNameMap] - | SVGElementTagNameMap[keyof SVGElementTagNameMap] - | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] - | CustomElementTagNameMap[keyof CustomElementTagNameMap] + HTMLElementTagNameMap[keyof HTMLElementTagNameMap] + | SVGElementTagNameMap[keyof SVGElementTagNameMap] + | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] + | CustomElementTagNameMap[keyof CustomElementTagNameMap] declare global { type ddeComponentAttributes= Record | undefined; - type ddeElementAddon= (element: El)=> El | void; + type ddeElementAddon= (element: El)=> any; } type PascalCase= `${Capitalize}${string}`; @@ -15,43 +15,64 @@ type AttrsModified= { /** * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API). */ - style: string | Partial | ddeSignal | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal }> + style: string | Partial | ddeSignal + | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal }> /** - * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others. + * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. + * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` + * for others. */ classList: Record>, /** * By default simiral to `className`, but also supports `string[]` * */ className: string | (string|boolean|undefined|ddeSignal)[]; + /** + * Used by the dataset HTML attribute to represent data for custom attributes added to elements. + * Values are converted to string (see {@link DOMStringMap}). + * + * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap) + * */ + dataset: Record>, /** * Sets `aria-*` simiraly to `dataset` * */ ariaset: Record>, -} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal> & Record<`.${string}`, any> +} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal> + & Record<`.${string}`, any> type _fromElsInterfaces= Omit; /** * Just element attributtes * - * In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)). + * In most cases, you can use native propertie such as + * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on + * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)). * * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives. * @private */ -type ElementAttributes= Partial<{ [K in keyof _fromElsInterfaces]: _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> } & AttrsModified> & Record; -export function classListDeclarative(element: El, classList: AttrsModified["classList"]): El +type ElementAttributes= Partial<{ + [K in keyof _fromElsInterfaces]: _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> +} & AttrsModified> & Record; +export function classListDeclarative( + element: El, + classList: AttrsModified["classList"] +): El export function assign(element: El, ...attrs_array: ElementAttributes[]): El -export function assignAttribute>(element: El, attr: ATT, value: ElementAttributes[ATT]): ElementAttributes[ATT] +export function assignAttribute>( + element: El, + attr: ATT, + value: ElementAttributes[ATT] +): ElementAttributes[ATT] type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; type textContent= string | ddeSignal; export function el< TAG extends keyof ExtendedHTMLElementTagNameMap, - EL extends ExtendedHTMLElementTagNameMap[TAG] >( tag_name: TAG, - attrs?: ElementAttributes | textContent, - ...addons: ddeElementAddon[] + attrs?: ElementAttributes]> | textContent, + ...addons: ddeElementAddon]>[], // TODO: for now addons must have the same element ): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement export function el( tag_name?: "<>", @@ -68,7 +89,9 @@ export function el< component: C, attrs?: Parameters[0] | textContent, ...addons: ddeElementAddon>[] -): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType : ( ReturnType extends ddeDocumentFragment ? ReturnType : ddeHTMLElement ) +): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] + ? ReturnType + : ( ReturnType extends ddeDocumentFragment ? ReturnType : ddeHTMLElement ) export { el as createElement } export function elNS( @@ -78,8 +101,8 @@ export function elNS( EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), >( tag_name: TAG, - attrs?: ElementAttributes | textContent, - ...addons: ddeElementAddon[] + attrs?: ElementAttributes> | textContent, + ...addons: ddeElementAddon>[] )=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement export function elNS( namespace: "http://www.w3.org/1998/Math/MathML" @@ -88,8 +111,10 @@ export function elNS( EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ), >( tag_name: TAG, - attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal | string | number | boolean }>, - ...addons: ddeElementAddon[] + attrs?: string | textContent | Partial<{ + [key in keyof EL]: EL[key] | ddeSignal | string | number | boolean + }>, + ...addons: ddeElementAddon>[] )=> ddeMathMLElement export function elNS( namespace: string @@ -106,36 +131,45 @@ export function chainableAppend(el: EL): EL; * */ type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void; /** Simulate slots for ddeComponents */ -export function simulateSlots(root: EL, mapper?: simulateSlotsMapper): EL +export function simulateSlots( + root: EL, + mapper?: simulateSlotsMapper +): EL /** * Simulate slots in Custom Elements without using `shadowRoot`. * @param el Custom Element root element * @param body Body of the custom element * */ -export function simulateSlots(el: HTMLElement, body: EL, mapper?: simulateSlotsMapper): EL +export function simulateSlots( + el: HTMLElement, + body: EL, mapper?: simulateSlotsMapper +): EL export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any)=> void; -export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)): - (data?: any)=> void; +export function dispatchEvent( + name: keyof DocumentEventMap | string, + options: EventInit | null, + element: SupportedElement | (()=> SupportedElement) +): (data?: any)=> void; interface On{ /** Listens to the DOM event. See {@link Document.addEventListener} */ < - EE extends ddeElementAddon, - El extends ( EE extends ddeElementAddon ? El : never ), - Event extends keyof DocumentEventMap>( + Event extends keyof DocumentEventMap, + EE extends ddeElementAddon= ddeElementAddon, + >( type: Event, - listener: (this: El, ev: DocumentEventMap[Event]) => any, + listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions ) : EE; < - EE extends ddeElementAddon, - El extends ( EE extends ddeElementAddon ? El : never )>( + EE extends ddeElementAddon= ddeElementAddon, + >( type: string, - listener: (this: El, ev: Event | CustomEvent ) => any, + listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent ) => any, options?: AddEventListenerOptions ) : EE; - /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ + /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line connected< EE extends ddeElementAddon, El extends ( EE extends ddeElementAddon ? El : never ) @@ -143,7 +177,7 @@ interface On{ listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions ) : EE; - /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ + /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line disconnected< EE extends ddeElementAddon, El extends ( EE extends ddeElementAddon ? El : never ) @@ -151,7 +185,7 @@ interface On{ listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions ) : EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ + /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line attributeChanged< EE extends ddeElementAddon, El extends ( EE extends ddeElementAddon ? El : never ) @@ -162,7 +196,12 @@ interface On{ } export const on: On; -type Scope= { scope: Node | Function | Object, host: ddeElementAddon, custom_element: false | HTMLElement, prevent: boolean } +type Scope= { + scope: Node | Function | Object, + host: ddeElementAddon, + custom_element: false | HTMLElement, + prevent: boolean +}; /** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */ export const scope: { current: Scope, @@ -176,7 +215,7 @@ export const scope: { * — `scope.host(on.connected(console.log))`. * */ host: (...addons: ddeElementAddon[])=> HTMLElement, - + state: Scope[], /** Adds new child scope. All attributes are inherited by default. */ push(scope: Partial): ReturnType["push"]>, @@ -202,12 +241,12 @@ export function observedAttributes(custom_element: HTMLElement): Record= (...nodes: (Node | string)[])=> el; - + interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend; } interface ddeHTMLElement extends HTMLElement{ append: ddeAppend; } interface ddeSVGElement extends SVGElement{ append: ddeAppend; } interface ddeMathMLElement extends MathMLElement{ append: ddeAppend; } - + interface ddeHTMLElementTagNameMap { "a": ddeHTMLAnchorElement; "area": ddeHTMLAreaElement; @@ -350,6 +389,7 @@ declare global{ } } +// editorconfig-checker-disable interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend; } interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend; } interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend; } @@ -477,6 +517,7 @@ interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend; } interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend; } interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend; } +// editorconfig-checker-enable export type Signal= (set?: V)=> V & A; type Action= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void; //type SymbolSignal= Symbol; @@ -534,7 +575,7 @@ interface signal{ * */ el(signal: Signal, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment; - observedAttributes(custom_element: HTMLElement): Record>; + observedAttributes(custom_element: HTMLElement): Record>; } export const signal: signal; export const S: signal; diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index f718eb8..53a9282 100644 --- a/dist/esm-with-signals.js +++ b/dist/esm-with-signals.js @@ -68,7 +68,7 @@ var A = [{ }, host: (t) => t ? t(d.D.body) : d.D.body, prevent: !0 -}], m = { +}], x = { get current() { return A[A.length - 1]; }, @@ -104,15 +104,17 @@ function P(t, e, ...n) { let r = W(this), o = 0, c, i; switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { case typeof t == "function": { - o = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((h) => h(i)), void 0) : i }), c = t(e || void 0); - let a = c instanceof d.F; + o = 1; + let a = (...p) => p.length ? (o === 1 ? n.unshift(...p) : p.forEach((m) => m(i)), void 0) : i; + x.push({ scope: t, host: a }), c = t(e || void 0); + let h = c instanceof d.F; if (c.nodeName === "#comment") break; - let l = P.mark({ + let v = P.mark({ type: "component", name: t.name, - host: a ? "this" : "parentElement" + host: h ? "this" : "parentElement" }); - c.prepend(l), a && (i = l); + c.prepend(v), h && (i = v); break; } case t === "#text": @@ -127,23 +129,28 @@ function P(t, e, ...n) { case !c: c = j.call(this, d.D.createElement(t), e); } - return ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c; + return ht(c), i || (i = c), n.forEach((a) => a(i)), o && x.pop(), o = 2, c; } +P.mark = function(t, e = !1) { + t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); + let n = e ? "" : "/", r = d.D.createComment(``); + return e && (r.end = d.D.createComment("")), r; +}; function Wt(t, e, n) { typeof e != "object" && (n = e, e = t); let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r); if (t.append = new Proxy(t.append, { - apply(i, a, l) { - if (l[0] === e) return i.apply(t, l); - if (!l.length) return t; + apply(i, a, h) { + if (h[0] === e) return i.apply(t, h); + if (!h.length) return t; let v = d.D.createDocumentFragment(); - for (let h of l) { - if (!h || !h.slot) { - c && v.append(h); + for (let p of h) { + if (!p || !p.slot) { + c && v.append(p); continue; } - let x = h.slot, w = o[x]; - vt(h, "remove", "slot"), w && (bt(w, h, n), Reflect.deleteProperty(o, x)); + let m = p.slot, y = o[m]; + vt(p, "remove", "slot"), y && (bt(y, p, n), Reflect.deleteProperty(o, m)); } return c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t; } @@ -156,16 +163,14 @@ function Wt(t, e, n) { function bt(t, e, n) { n && n(t, e); try { - t.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } })); + t.replaceWith(j(e, { + className: [e.className, t.className], + dataset: { ...t.dataset } + })); } catch { t.replaceWith(e); } } -P.mark = function(t, e = !1) { - t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); - let n = e ? "" : "/", r = d.D.createComment(``); - return e && (r.end = d.D.createComment("")), r; -}; function qt(t) { let e = this; return function(...r) { @@ -188,7 +193,7 @@ function nt(t, e, n) { t, e, n, - (a, l) => nt.call(c, t, a, l) + (a, h) => nt.call(c, t, a, h) ); let [i] = e; if (i === "=") return r(e.slice(1), n); @@ -206,7 +211,7 @@ function nt(t, e, n) { case "dataset": return I(o, n, et.bind(null, t[e])); case "ariaset": - return I(o, n, (a, l) => r("aria-" + a, l)); + return I(o, n, (a, h) => r("aria-" + a, h)); case "classList": return gt.call(c, t, n); } @@ -225,9 +230,6 @@ function gt(t, e) { (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) ), t; } -function Ft(t) { - return Array.from(t.children).forEach((e) => e.remove()), t; -} function vt(t, e, n, r) { return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); } @@ -262,21 +264,21 @@ function et(t, e, n) { } // src/events-observer.js -var D = d.M ? yt() : new Proxy({}, { +var D = d.M ? wt() : new Proxy({}, { get() { return () => { }; } }); -function yt() { +function wt() { let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) { for (let f of u) if (f.type === "childList") { - if (h(f.addedNodes, !0)) { + if (p(f.addedNodes, !0)) { s(); continue; } - x(f.removedNodes, !0) && s(); + m(f.removedNodes, !0) && s(); } }, r = new d.M(n(a)); return { @@ -325,35 +327,35 @@ function yt() { function a() { !e || t.size || (e = !1, r.disconnect()); } - function l() { + function h() { return new Promise(function(s) { (requestIdleCallback || requestAnimationFrame)(s); }); } async function v(s) { - t.size > 30 && await l(); + t.size > 30 && await h(); let u = []; if (!(s instanceof Node)) return u; for (let f of t.keys()) f === s || !(f instanceof Node) || s.contains(f) && u.push(f); return u; } - function h(s, u) { + function p(s, u) { let f = !1; for (let b of s) { - if (u && v(b).then(h), !t.has(b)) continue; + if (u && v(b).then(p), !t.has(b)) continue; let N = t.get(b); N.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0); } return f; } - function x(s, u) { + function m(s, u) { let f = !1; for (let b of s) - u && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0); + u && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0); return f; } - function w(s) { + function y(s) { return () => { s.isConnected || (s.dispatchEvent(new Event(C)), t.delete(s)); }; @@ -361,17 +363,17 @@ function yt() { } // src/customElement.js -function Zt(t, e, n, r = _t) { - m.push({ +function Jt(t, e, n, r = _t) { + x.push({ scope: t, host: (...i) => i.length ? i.forEach((a) => a(t)) : t }), typeof r == "function" && (r = r.call(t, t)); let o = t[O]; - o || wt(t); + o || yt(t); let c = n.call(t, r); - return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), m.pop(), e.append(c); + return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), x.pop(), e.append(c); } -function wt(t) { +function yt(t) { return J(t.prototype, "connectedCallback", function(e, n, r) { e.apply(n, r), n.dispatchEvent(new Event(_)); }), J(t.prototype, "disconnectedCallback", function(e, n, r) { @@ -394,43 +396,43 @@ function _t(t) { } // src/events.js -function Qt(t, e, n) { +function Kt(t, e, n) { return e || (e = {}), function(o, ...c) { n && (c.unshift(o), o = typeof n == "function" ? n() : n); let i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); return o.dispatchEvent(i); }; } -function y(t, e, n) { +function w(t, e, n) { return function(o) { return o.addEventListener(t, e, n), o; }; } var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); -y.connected = function(t, e) { +w.connected = function(t, e) { return e = it(e), function(r) { return r.addEventListener(_, t, e), r[O] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r); }; }; -y.disconnected = function(t, e) { +w.disconnected = function(t, e) { return e = it(e), function(r) { return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r; }; }; var Z = /* @__PURE__ */ new WeakMap(); -y.disconnectedAsAbort = function(t) { +w.disconnectedAsAbort = function(t) { if (Z.has(t)) return Z.get(t); let e = new AbortController(); - return Z.set(t, e), t(y.disconnected(() => e.abort())), e; + return Z.set(t, e), t(w.disconnected(() => e.abort())), e; }; var At = /* @__PURE__ */ new WeakSet(); -y.attributeChanged = function(t, e) { +w.attributeChanged = function(t, e) { return typeof e != "object" && (e = {}), function(r) { if (r.addEventListener(M, t, e), r[O] || At.has(r) || !d.M) return r; let o = new d.M(function(i) { - for (let { attributeName: a, target: l } of i) - l.dispatchEvent( - new CustomEvent(M, { detail: [a, l.getAttribute(a)] }) + for (let { attributeName: a, target: h } of i) + h.dispatchEvent( + new CustomEvent(M, { detail: [a, h.getAttribute(a)] }) ); }); return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; @@ -438,10 +440,10 @@ y.attributeChanged = function(t, e) { }; // src/signals-lib.js -var p = "__dde_signal"; +var l = "__dde_signal"; function z(t) { try { - return T(t, p); + return T(t, l); } catch { return !1; } @@ -458,10 +460,10 @@ function E(t, e) { for (let a of c) i.has(a) || L(a, r); }; - return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n; + return g.set(n[l], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n; } E.action = function(t, e, ...n) { - let r = t[p], { actions: o } = r; + let r = t[l], { actions: o } = r; if (!o || !(e in o)) throw new Error(`'${t}' has no action with name '${e}'!`); if (o[e].apply(r, n), r.skip) return delete r.skip; @@ -480,8 +482,8 @@ E.symbols = { }; E.clear = function(...t) { for (let n of t) { - let r = n[p]; - r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]); + let r = n[l]; + r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[l]); } function e(n, r) { r.listeners.forEach((o) => { @@ -495,22 +497,22 @@ var R = "__dde_reactive"; E.el = function(t, e) { let n = P.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment(); o.append(n, r); - let { current: c } = m, i = {}, a = (l) => { + let { current: c } = x, i = {}, a = (h) => { if (!n.parentNode || !r.parentNode) return L(t, a); let v = i; - i = {}, m.push(c); - let h = e(l, function(u, f) { + i = {}, x.push(c); + let p = e(h, function(u, f) { let b; return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b; }); - m.pop(), Array.isArray(h) || (h = [h]); - let x = document.createComment(""); - h.push(x), n.after(...h); - let w; - for (; (w = x.nextSibling) && w !== r; ) - w.remove(); - x.remove(), n.isConnected && St(c.host()); + x.pop(), Array.isArray(p) || (p = [p]); + let m = document.createComment(""); + p.push(m), n.after(...p); + let y; + for (; (y = m.nextSibling) && y !== r; ) + y.remove(); + m.remove(), n.isConnected && St(c.host()); }; return Q(t, a), ft(t, a, n, e), a(t()), o; }; @@ -533,12 +535,12 @@ function Ct(t) { var G = "__dde_attributes"; E.observedAttributes = function(t) { let e = t[G] = {}, n = F(t, Ct(e)); - return y.attributeChanged(function({ detail: o }) { + return w.attributeChanged(function({ detail: o }) { /*! This maps attributes to signals (`S.observedAttributes`). * Investigate `__dde_attributes` key of the element.*/ let [c, i] = o, a = this[G][c]; if (a) return E.action(a, "_set", i); - })(t), y.disconnected(function() { + })(t), w.disconnected(function() { /*! This removes all signals mapped to attributes (`S.observedAttributes`). * Investigate `__dde_attributes` key of the element.*/ E.clear(...Object.values(this[G])); @@ -557,15 +559,15 @@ var ut = { } }; function ft(t, e, ...n) { - let { current: r } = m; + let { current: r } = x; r.prevent || r.host(function(o) { - o[R] || (o[R] = [], y.disconnected( + o[R] || (o[R] = [], w.disconnected( () => ( /*! * Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?). * You can investigate the `__dde_reactive` key of the element. * */ - o[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o)) + o[R].forEach(([[c, i]]) => L(c, i, c[l] && c[l].host && c[l].host() === o)) ) )(o)), o[R].push([[t, e], ...n]); }); @@ -591,8 +593,8 @@ function at(t, e, n, r = !1) { X(n) !== "[object Object]" && (n = {}); let { onclear: c } = E.symbols; n[c] && (o.push(n[c]), delete n[c]); - let { host: i } = m; - return Reflect.defineProperty(t, p, { + let { host: i } = x; + return Reflect.defineProperty(t, l, { value: { value: e, actions: n, @@ -605,28 +607,28 @@ function at(t, e, n, r = !1) { enumerable: !1, writable: !1, configurable: !0 - }), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t; + }), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], Dt), t; } function Rt() { return H[H.length - 1]; } function K(t) { - if (!t[p]) return; - let { value: e, listeners: n } = t[p], r = Rt(); + if (!t[l]) return; + let { value: e, listeners: n } = t[l], r = Rt(); return r && n.add(r), g.has(r) && g.get(r).add(t), e; } function dt(t, e, n) { - if (!t[p]) return; - let r = t[p]; + if (!t[l]) return; + let r = t[l]; if (!(!n && r.value === e)) return r.value = e, r.listeners.forEach((o) => o(e)), e; } function Q(t, e) { - if (t[p]) - return t[p].listeners.add(e); + if (t[l]) + return t[l].listeners.add(e); } function L(t, e, n) { - let r = t[p]; + let r = t[l]; if (!r) return; let o = r.listeners.delete(e); if (n && !r.listeners.size) { @@ -648,19 +650,18 @@ export { gt as classListDeclarative, P as createElement, qt as createElementNS, - Zt as customElementRender, - wt as customElementWithDDE, - Qt as dispatchEvent, + Jt as customElementRender, + yt as customElementWithDDE, + Kt as dispatchEvent, P as el, qt as elNS, vt as elementAttribute, - Ft as empty, z as isSignal, - wt as lifecyclesToEvents, + yt as lifecyclesToEvents, _t as observedAttributes, - y as on, + w as on, B as registerReactivity, - m as scope, + x as scope, E as signal, Wt as simulateSlots }; diff --git a/dist/esm.d.ts b/dist/esm.d.ts index 4656d84..c035e27 100644 --- a/dist/esm.d.ts +++ b/dist/esm.d.ts @@ -1,13 +1,13 @@ declare global{ /* ddeSignal */ } type CustomElementTagNameMap= { '#text': Text, '#comment': Comment } type SupportedElement= - HTMLElementTagNameMap[keyof HTMLElementTagNameMap] - | SVGElementTagNameMap[keyof SVGElementTagNameMap] - | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] - | CustomElementTagNameMap[keyof CustomElementTagNameMap] + HTMLElementTagNameMap[keyof HTMLElementTagNameMap] + | SVGElementTagNameMap[keyof SVGElementTagNameMap] + | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] + | CustomElementTagNameMap[keyof CustomElementTagNameMap] declare global { type ddeComponentAttributes= Record | undefined; - type ddeElementAddon= (element: El)=> El | void; + type ddeElementAddon= (element: El)=> any; } type PascalCase= `${Capitalize}${string}`; @@ -15,43 +15,64 @@ type AttrsModified= { /** * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API). */ - style: string | Partial | ddeSignal | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal }> + style: string | Partial | ddeSignal + | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal }> /** - * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others. + * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. + * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` + * for others. */ classList: Record>, /** * By default simiral to `className`, but also supports `string[]` * */ className: string | (string|boolean|undefined|ddeSignal)[]; + /** + * Used by the dataset HTML attribute to represent data for custom attributes added to elements. + * Values are converted to string (see {@link DOMStringMap}). + * + * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap) + * */ + dataset: Record>, /** * Sets `aria-*` simiraly to `dataset` * */ ariaset: Record>, -} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal> & Record<`.${string}`, any> +} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal> + & Record<`.${string}`, any> type _fromElsInterfaces= Omit; /** * Just element attributtes * - * In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)). + * In most cases, you can use native propertie such as + * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on + * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)). * * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives. * @private */ -type ElementAttributes= Partial<{ [K in keyof _fromElsInterfaces]: _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> } & AttrsModified> & Record; -export function classListDeclarative(element: El, classList: AttrsModified["classList"]): El +type ElementAttributes= Partial<{ + [K in keyof _fromElsInterfaces]: _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> +} & AttrsModified> & Record; +export function classListDeclarative( + element: El, + classList: AttrsModified["classList"] +): El export function assign(element: El, ...attrs_array: ElementAttributes[]): El -export function assignAttribute>(element: El, attr: ATT, value: ElementAttributes[ATT]): ElementAttributes[ATT] +export function assignAttribute>( + element: El, + attr: ATT, + value: ElementAttributes[ATT] +): ElementAttributes[ATT] type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; type textContent= string | ddeSignal; export function el< TAG extends keyof ExtendedHTMLElementTagNameMap, - EL extends ExtendedHTMLElementTagNameMap[TAG] >( tag_name: TAG, - attrs?: ElementAttributes | textContent, - ...addons: ddeElementAddon[] + attrs?: ElementAttributes]> | textContent, + ...addons: ddeElementAddon]>[], // TODO: for now addons must have the same element ): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement export function el( tag_name?: "<>", @@ -68,7 +89,9 @@ export function el< component: C, attrs?: Parameters[0] | textContent, ...addons: ddeElementAddon>[] -): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType : ( ReturnType extends ddeDocumentFragment ? ReturnType : ddeHTMLElement ) +): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] + ? ReturnType + : ( ReturnType extends ddeDocumentFragment ? ReturnType : ddeHTMLElement ) export { el as createElement } export function elNS( @@ -78,8 +101,8 @@ export function elNS( EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), >( tag_name: TAG, - attrs?: ElementAttributes | textContent, - ...addons: ddeElementAddon[] + attrs?: ElementAttributes> | textContent, + ...addons: ddeElementAddon>[] )=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement export function elNS( namespace: "http://www.w3.org/1998/Math/MathML" @@ -88,8 +111,10 @@ export function elNS( EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ), >( tag_name: TAG, - attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal | string | number | boolean }>, - ...addons: ddeElementAddon[] + attrs?: string | textContent | Partial<{ + [key in keyof EL]: EL[key] | ddeSignal | string | number | boolean + }>, + ...addons: ddeElementAddon>[] )=> ddeMathMLElement export function elNS( namespace: string @@ -106,36 +131,45 @@ export function chainableAppend(el: EL): EL; * */ type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void; /** Simulate slots for ddeComponents */ -export function simulateSlots(root: EL, mapper?: simulateSlotsMapper): EL +export function simulateSlots( + root: EL, + mapper?: simulateSlotsMapper +): EL /** * Simulate slots in Custom Elements without using `shadowRoot`. * @param el Custom Element root element * @param body Body of the custom element * */ -export function simulateSlots(el: HTMLElement, body: EL, mapper?: simulateSlotsMapper): EL +export function simulateSlots( + el: HTMLElement, + body: EL, mapper?: simulateSlotsMapper +): EL export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any)=> void; -export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)): - (data?: any)=> void; +export function dispatchEvent( + name: keyof DocumentEventMap | string, + options: EventInit | null, + element: SupportedElement | (()=> SupportedElement) +): (data?: any)=> void; interface On{ /** Listens to the DOM event. See {@link Document.addEventListener} */ < - EE extends ddeElementAddon, - El extends ( EE extends ddeElementAddon ? El : never ), - Event extends keyof DocumentEventMap>( + Event extends keyof DocumentEventMap, + EE extends ddeElementAddon= ddeElementAddon, + >( type: Event, - listener: (this: El, ev: DocumentEventMap[Event]) => any, + listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions ) : EE; < - EE extends ddeElementAddon, - El extends ( EE extends ddeElementAddon ? El : never )>( + EE extends ddeElementAddon= ddeElementAddon, + >( type: string, - listener: (this: El, ev: Event | CustomEvent ) => any, + listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent ) => any, options?: AddEventListenerOptions ) : EE; - /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ + /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line connected< EE extends ddeElementAddon, El extends ( EE extends ddeElementAddon ? El : never ) @@ -143,7 +177,7 @@ interface On{ listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions ) : EE; - /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ + /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line disconnected< EE extends ddeElementAddon, El extends ( EE extends ddeElementAddon ? El : never ) @@ -151,7 +185,7 @@ interface On{ listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions ) : EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ + /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line attributeChanged< EE extends ddeElementAddon, El extends ( EE extends ddeElementAddon ? El : never ) @@ -162,7 +196,12 @@ interface On{ } export const on: On; -type Scope= { scope: Node | Function | Object, host: ddeElementAddon, custom_element: false | HTMLElement, prevent: boolean } +type Scope= { + scope: Node | Function | Object, + host: ddeElementAddon, + custom_element: false | HTMLElement, + prevent: boolean +}; /** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */ export const scope: { current: Scope, @@ -176,7 +215,7 @@ export const scope: { * — `scope.host(on.connected(console.log))`. * */ host: (...addons: ddeElementAddon[])=> HTMLElement, - + state: Scope[], /** Adds new child scope. All attributes are inherited by default. */ push(scope: Partial): ReturnType["push"]>, @@ -202,12 +241,12 @@ export function observedAttributes(custom_element: HTMLElement): Record= (...nodes: (Node | string)[])=> el; - + interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend; } interface ddeHTMLElement extends HTMLElement{ append: ddeAppend; } interface ddeSVGElement extends SVGElement{ append: ddeAppend; } interface ddeMathMLElement extends MathMLElement{ append: ddeAppend; } - + interface ddeHTMLElementTagNameMap { "a": ddeHTMLAnchorElement; "area": ddeHTMLAreaElement; @@ -350,6 +389,7 @@ declare global{ } } +// editorconfig-checker-disable interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend; } interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend; } interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend; } @@ -476,4 +516,5 @@ interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend
; } interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend; } interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend; } -interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend; } \ No newline at end of file +interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend; } +// editorconfig-checker-enable \ No newline at end of file diff --git a/dist/esm.js b/dist/esm.js index a5e5b75..72391e8 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -1,5 +1,5 @@ // src/signals-common.js -var C = { +var m = { isSignal(t) { return !1; }, @@ -8,15 +8,15 @@ var C = { } }; function V(t, e = !0) { - return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t); + return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t); } function L(t) { - return C.isPrototypeOf(t) && t !== C ? t : C; + return m.isPrototypeOf(t) && t !== m ? t : m; } // src/helpers.js var q = (...t) => Object.prototype.hasOwnProperty.call(...t); -function E(t) { +function x(t) { return typeof t > "u"; } function N(t, e) { @@ -48,14 +48,14 @@ var a = { M: globalThis.MutationObserver }; function K(t, e, n) { - if (Reflect.set(t, e, n), !!E(n)) { + if (Reflect.set(t, e, n), !!x(n)) { if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined") return t.removeAttribute(e); if (Reflect.get(t, e) === "undefined") return Reflect.set(t, e, ""); } } -var x = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged"; +var y = "__dde_lifecyclesToEvents", g = "dde:connected", w = "dde:disconnected", D = "dde:attributeChanged"; // src/dom.js var v = [{ @@ -100,15 +100,17 @@ function j(t, e, ...n) { let r = L(this), o = 0, c, f; switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { case typeof t == "function": { - o = 1, S.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((h) => h(f)), void 0) : f }), c = t(e || void 0); - let d = c instanceof a.F; + o = 1; + let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(f)), void 0) : f; + S.push({ scope: t, host: d }), c = t(e || void 0); + let p = c instanceof a.F; if (c.nodeName === "#comment") break; - let p = j.mark({ + let b = j.mark({ type: "component", name: t.name, - host: d ? "this" : "parentElement" + host: p ? "this" : "parentElement" }); - c.prepend(p), d && (f = p); + c.prepend(b), p && (f = b); break; } case t === "#text": @@ -125,6 +127,11 @@ function j(t, e, ...n) { } return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c; } +j.mark = function(t, e = !1) { + t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); + let n = e ? "" : "/", r = a.D.createComment(``); + return e && (r.end = a.D.createComment("")), r; +}; function bt(t, e, n) { typeof e != "object" && (n = e, e = t); let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((f, d) => Reflect.set(f, d.name || r, d) && f, {}), c = q(o, r); @@ -133,13 +140,13 @@ function bt(t, e, n) { if (p[0] === e) return f.apply(t, p); if (!p.length) return t; let b = a.D.createDocumentFragment(); - for (let h of p) { - if (!h || !h.slot) { - c && b.append(h); + for (let l of p) { + if (!l || !l.slot) { + c && b.append(l); continue; } - let A = h.slot, _ = o[A]; - tt(h, "remove", "slot"), _ && (X(_, h, n), Reflect.deleteProperty(o, A)); + let E = l.slot, _ = o[E]; + tt(l, "remove", "slot"), _ && (X(_, l, n), Reflect.deleteProperty(o, E)); } return c && (o[r].replaceWith(b), Reflect.deleteProperty(o, r)), t.append = f, t; } @@ -152,16 +159,14 @@ function bt(t, e, n) { function X(t, e, n) { n && n(t, e); try { - t.replaceWith(O(e, { className: [e.className, t.className], dataset: { ...t.dataset } })); + t.replaceWith(O(e, { + className: [e.className, t.className], + dataset: { ...t.dataset } + })); } catch { t.replaceWith(e); } } -j.mark = function(t, e = !1) { - t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); - let n = e ? "" : "/", r = a.D.createComment(``); - return e && (r.end = a.D.createComment("")), r; -}; function gt(t) { let e = this; return function(...r) { @@ -221,16 +226,13 @@ function Y(t, e) { (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) ), t; } -function vt(t) { - return Array.from(t.children).forEach((e) => e.remove()), t; -} function tt(t, e, n, r) { return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); } function et(t, e) { if (!(e in t)) return !1; let n = I(t, e); - return !E(n.set); + return !x(n.set); } function I(t, e) { if (t = Object.getPrototypeOf(t), !t) return {}; @@ -247,18 +249,18 @@ function Z(t) { return Array.isArray(t) ? t.filter(Boolean).join(" ") : t; } function nt(t, e, n, r) { - return t[(E(r) ? "remove" : "set") + e](n, Z(r)); + return t[(x(r) ? "remove" : "set") + e](n, Z(r)); } function rt(t, e, n, r, o = null) { - return t[(E(r) ? "remove" : "set") + e + "NS"](o, n, Z(r)); + return t[(x(r) ? "remove" : "set") + e + "NS"](o, n, Z(r)); } function H(t, e, n) { - if (Reflect.set(t, e, n), !!E(n)) + if (Reflect.set(t, e, n), !!x(n)) return Reflect.deleteProperty(t, e); } // src/events-observer.js -var w = a.M ? ot() : new Proxy({}, { +var A = a.M ? ot() : new Proxy({}, { get() { return () => { }; @@ -268,11 +270,11 @@ function ot() { let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) { for (let s of u) if (s.type === "childList") { - if (h(s.addedNodes, !0)) { + if (l(s.addedNodes, !0)) { i(); continue; } - A(s.removedNodes, !0) && i(); + E(s.removedNodes, !0) && i(); } }, r = new a.M(n(d)); return { @@ -334,52 +336,52 @@ function ot() { s === i || !(s instanceof Node) || i.contains(s) && u.push(s); return u; } - function h(i, u) { + function l(i, u) { let s = !1; - for (let l of i) { - if (u && b(l).then(h), !t.has(l)) continue; - let m = t.get(l); - m.length_c && (l.dispatchEvent(new Event(g)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(l), s = !0); + for (let h of i) { + if (u && b(h).then(l), !t.has(h)) continue; + let C = t.get(h); + C.length_c && (h.dispatchEvent(new Event(g)), C.connected = /* @__PURE__ */ new WeakSet(), C.length_c = 0, C.length_d || t.delete(h), s = !0); } return s; } - function A(i, u) { + function E(i, u) { let s = !1; - for (let l of i) - u && b(l).then(A), !(!t.has(l) || !t.get(l).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(l)), s = !0); + for (let h of i) + u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0); return s; } function _(i) { return () => { - i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i)); + i.isConnected || (i.dispatchEvent(new Event(w)), t.delete(i)); }; } } // src/customElement.js -function Dt(t, e, n, r = it) { +function mt(t, e, n, r = it) { S.push({ scope: t, host: (...f) => f.length ? f.forEach((d) => d(t)) : t }), typeof r == "function" && (r = r.call(t, t)); - let o = t[x]; + let o = t[y]; o || ct(t); let c = n.call(t, r); - return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, w.observe(e), { once: !0 }), S.pop(), e.append(c); + return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(w, A.observe(e), { once: !0 }), S.pop(), e.append(c); } function ct(t) { return k(t.prototype, "connectedCallback", function(e, n, r) { e.apply(n, r), n.dispatchEvent(new Event(g)); }), k(t.prototype, "disconnectedCallback", function(e, n, r) { e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( - () => !n.isConnected && n.dispatchEvent(new Event(y)) + () => !n.isConnected && n.dispatchEvent(new Event(w)) ); }), k(t.prototype, "attributeChangedCallback", function(e, n, r) { let [o, , c] = r; n.dispatchEvent(new CustomEvent(D, { detail: [o, c] })), e.apply(n, r); - }), t.prototype[x] = !0, t; + }), t.prototype[y] = !0, t; } function k(t, e, n) { t[e] = new Proxy(t[e] || (() => { @@ -390,7 +392,7 @@ function it(t) { } // src/events.js -function _t(t, e, n) { +function Rt(t, e, n) { return e || (e = {}), function(o, ...c) { n && (c.unshift(o), o = typeof n == "function" ? n() : n); let f = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); @@ -405,12 +407,12 @@ function R(t, e, n) { var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); R.connected = function(t, e) { return e = G(e), function(r) { - return r.addEventListener(g, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r); + return r.addEventListener(g, t, e), r[y] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.onConnected(r, t), r); }; }; R.disconnected = function(t, e) { return e = G(e), function(r) { - return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r; + return r.addEventListener(w, t, e), r[y] || N(e.signal, () => A.offDisconnected(r, t)) && A.onDisconnected(r, t), r; }; }; var W = /* @__PURE__ */ new WeakMap(); @@ -422,7 +424,7 @@ R.disconnectedAsAbort = function(t) { var st = /* @__PURE__ */ new WeakSet(); R.attributeChanged = function(t, e) { return typeof e != "object" && (e = {}), function(r) { - if (r.addEventListener(D, t, e), r[x] || st.has(r) || !a.M) return r; + if (r.addEventListener(D, t, e), r[y] || st.has(r) || !a.M) return r; let o = new a.M(function(f) { for (let { attributeName: d, target: p } of f) p.dispatchEvent( @@ -439,13 +441,12 @@ export { Y as classListDeclarative, j as createElement, gt as createElementNS, - Dt as customElementRender, + mt as customElementRender, ct as customElementWithDDE, - _t as dispatchEvent, + Rt as dispatchEvent, j as el, gt as elNS, tt as elementAttribute, - vt as empty, ct as lifecyclesToEvents, it as observedAttributes, R as on, diff --git a/docs/components/examples/scopes/cleaning.js b/docs/components/examples/scopes/cleaning.js index 923b331..f648322 100644 --- a/docs/components/examples/scopes/cleaning.js +++ b/docs/components/examples/scopes/cleaning.js @@ -1,4 +1,6 @@ -import { el, empty, on } from "deka-dom-el"; +import { el, on } from "deka-dom-el"; +/** @param {HTMLElement} el */ +const empty= el=> Array.from(el.children).forEach(c=> c.remove()); document.body.append( el(component), el("button", { diff --git a/index.d.ts b/index.d.ts index c5fc42b..d3ec563 100644 --- a/index.d.ts +++ b/index.d.ts @@ -8,7 +8,7 @@ type SupportedElement= | CustomElementTagNameMap[keyof CustomElementTagNameMap] declare global { type ddeComponentAttributes= Record | undefined; - type ddeElementAddon= (element: El)=> El | void; + type ddeElementAddon= (element: El)=> any; } type PascalCase= `${Capitalize}${string}`; type AttrsModified= { @@ -27,6 +27,13 @@ type AttrsModified= { * By default simiral to `className`, but also supports `string[]` * */ className: string | (string|boolean|undefined|ddeSignal)[]; + /** + * Used by the dataset HTML attribute to represent data for custom attributes added to elements. + * Values are converted to string (see {@link DOMStringMap}). + * + * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap) + * */ + dataset: Record>, /** * Sets `aria-*` simiraly to `dataset` * */ @@ -62,11 +69,10 @@ type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagName type textContent= string | ddeSignal; export function el< TAG extends keyof ExtendedHTMLElementTagNameMap, - EL extends ExtendedHTMLElementTagNameMap[TAG] >( tag_name: TAG, - attrs?: ElementAttributes | textContent, - ...addons: ddeElementAddon[] + attrs?: ElementAttributes]> | textContent, + ...addons: ddeElementAddon]>[], // TODO: for now addons must have the same element ): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement export function el( tag_name?: "<>", @@ -95,8 +101,8 @@ export function elNS( EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), >( tag_name: TAG, - attrs?: ElementAttributes | textContent, - ...addons: ddeElementAddon[] + attrs?: ElementAttributes> | textContent, + ...addons: ddeElementAddon>[] )=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement export function elNS( namespace: "http://www.w3.org/1998/Math/MathML" @@ -108,7 +114,7 @@ export function elNS( attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal | string | number | boolean }>, - ...addons: ddeElementAddon[] + ...addons: ddeElementAddon>[] )=> ddeMathMLElement export function elNS( namespace: string @@ -149,18 +155,18 @@ export function dispatchEvent( interface On{ /** Listens to the DOM event. See {@link Document.addEventListener} */ < - EE extends ddeElementAddon, - El extends ( EE extends ddeElementAddon ? El : never ), - Event extends keyof DocumentEventMap>( + Event extends keyof DocumentEventMap, + EE extends ddeElementAddon= ddeElementAddon, + >( type: Event, - listener: (this: El, ev: DocumentEventMap[Event]) => any, + listener: (this: EE extends ddeElementAddon ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions ) : EE; < - EE extends ddeElementAddon, - El extends ( EE extends ddeElementAddon ? El : never )>( + EE extends ddeElementAddon= ddeElementAddon, + >( type: string, - listener: (this: El, ev: Event | CustomEvent ) => any, + listener: (this: EE extends ddeElementAddon ? El : never, ev: Event | CustomEvent ) => any, options?: AddEventListenerOptions ) : EE; /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line diff --git a/src/dom.js b/src/dom.js index 7ed8dc1..28c4c64 100644 --- a/src/dom.js +++ b/src/dom.js @@ -69,6 +69,19 @@ export function createElement(tag, attributes, ...addons){ scoped= 2; return el; } +/** + * @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs + * @param {boolean} [is_open=false] + * */ +createElement.mark= function(attrs, is_open= false){ + attrs= Object.entries(attrs).map(([ n, v ])=> n+`="${v}"`).join(" "); + const end= is_open ? "" : "/"; + const out= env.D.createComment(``); + if(is_open) out.end= env.D.createComment(""); + return out; +}; +export { createElement as el }; + import { hasOwn } from "./helpers.js"; /** @param {HTMLElement} element @param {HTMLElement} [root] */ export function simulateSlots(element, root, mapper){ @@ -117,18 +130,6 @@ function simulateSlotReplace(slot, element, mapper){ dataset: { ...slot.dataset } })); } catch(_){ slot.replaceWith(element); } } -/** - * @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs - * @param {boolean} [is_open=false] - * */ -createElement.mark= function(attrs, is_open= false){ - attrs= Object.entries(attrs).map(([ n, v ])=> n+`="${v}"`).join(" "); - const end= is_open ? "" : "/"; - const out= env.D.createComment(``); - if(is_open) out.end= env.D.createComment(""); - return out; -}; -export { createElement as el }; //const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns; export function createElementNS(ns){ @@ -198,10 +199,6 @@ export function classListDeclarative(element, toggle){ element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val))); return element; } -export function empty(el){ - Array.from(el.children).forEach(el=> el.remove()); - return el; -} export function elementAttribute(element, op, key, value){ if(element instanceof env.H) return element[op+"Attribute"](key, value);