diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js index 70b02fe..039fcf8 100644 --- a/dist/dde-with-signals.js +++ b/dist/dde-with-signals.js @@ -51,7 +51,9 @@ var d = { F: globalThis.DocumentFragment, H: globalThis.HTMLElement, S: globalThis.SVGElement, - M: globalThis.MutationObserver + M: globalThis.MutationObserver, + qa: (t) => t, + qw: () => Promise.resolve() }; function pt(t, e, n) { if (Reflect.set(t, e, n), !!A(n)) { @@ -64,6 +66,9 @@ function pt(t, e, n) { var O = "__dde_lifecyclesToEvents", _ = "dde:connected", S = "dde:disconnected", T = "dde:attributeChanged"; // src/dom.js +function Mt(t) { + return d.qa(t); +} var y = [{ get scope() { return d.D.body; @@ -107,16 +112,16 @@ function M(t, e, ...n) { switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { case typeof t == "function": { o = 1; - let a = (...h) => h.length ? (o === 1 ? n.unshift(...h) : h.forEach((m) => m(u)), void 0) : u; + let a = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((m) => m(u)), void 0) : u; x.push({ scope: t, host: a }), c = t(e || void 0); - let l = c instanceof d.F; + let h = c instanceof d.F; if (c.nodeName === "#comment") break; let v = M.mark({ type: "component", name: t.name, - host: l ? "this" : "parentElement" + host: h ? "this" : "parentElement" }); - c.prepend(v), l && (u = v); + c.prepend(v), h && (u = v); break; } case t === "#text": @@ -138,7 +143,7 @@ M.mark = function(t, e = !1) { let n = e ? "" : "/", r = d.D.createComment(``); return e && (r.end = d.D.createComment("")), r; }; -function Mt(t) { +function jt(t) { let e = this; return function(...r) { $ = t; @@ -146,22 +151,22 @@ function Mt(t) { return $ = void 0, o; }; } -function jt(t, e = t) { +function Pt(t, e = t) { let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries( Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c]) ); if (t.append = new Proxy(t.append, { apply(c, u, a) { if (a[0] === e) return c.apply(t, a); - for (let l of a) { - let v = (l.slot || "") + n; + for (let h of a) { + let v = (h.slot || "") + n; try { - bt(l, "remove", "slot"); + bt(h, "remove", "slot"); } catch { } - let h = o[v]; - if (!h) return; - v.startsWith(r) || h.childNodes.forEach((m) => m.remove()), h.append(l), h.name = r + v; + let l = o[v]; + if (!l) return; + l.name.startsWith(r) || (l.childNodes.forEach((m) => m.remove()), l.name = r + v), l.append(h); } return t.append = c, t; } @@ -185,7 +190,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 [u] = e; if (u === "=") return r(e.slice(1), n); @@ -203,7 +208,7 @@ function nt(t, e, n) { case "dataset": return B(o, n, et.bind(null, t[e])); case "ariaset": - return B(o, n, (a, l) => r("aria-" + a, l)); + return B(o, n, (a, h) => r("aria-" + a, h)); case "classList": return ht.call(c, t, n); } @@ -263,7 +268,7 @@ function mt() { let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(s) { for (let f of s) if (f.type === "childList") { - if (h(f.addedNodes, !0)) { + if (l(f.addedNodes, !0)) { i(); continue; } @@ -316,23 +321,23 @@ function mt() { function a() { !e || t.size || (e = !1, r.disconnect()); } - function l() { + function h() { return new Promise(function(i) { (requestIdleCallback || requestAnimationFrame)(i); }); } async function v(i) { - t.size > 30 && await l(); + t.size > 30 && await h(); let s = []; if (!(i instanceof Node)) return s; for (let f of t.keys()) f === i || !(f instanceof Node) || i.contains(f) && s.push(f); return s; } - function h(i, s) { + function l(i, s) { let f = !1; for (let b of i) { - if (s && v(b).then(h), !t.has(b)) continue; + if (s && v(b).then(l), !t.has(b)) continue; let L = t.get(b); L.length_c && (b.dispatchEvent(new Event(_)), L.connected = /* @__PURE__ */ new WeakSet(), L.length_c = 0, L.length_d || t.delete(b), f = !0); } @@ -352,7 +357,7 @@ function mt() { } // src/customElement.js -function Ht(t, e, n, r = wt) { +function It(t, e, n, r = wt) { x.push({ scope: t, host: (...u) => u.length ? u.forEach((a) => a(t)) : t @@ -385,7 +390,7 @@ function wt(t) { } // src/events.js -function Zt(t, e, n) { +function Gt(t, e, n) { return e || (e = {}), function(o, ...c) { n && (c.unshift(o), o = typeof n == "function" ? n() : n); let u = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); @@ -419,9 +424,9 @@ w.attributeChanged = function(t, e) { return typeof e != "object" && (e = {}), function(r) { if (r.addEventListener(T, t, e), r[O] || _t.has(r) || !d.M) return r; let o = new d.M(function(u) { - for (let { attributeName: a, target: l } of u) - l.dispatchEvent( - new CustomEvent(T, { detail: [a, l.getAttribute(a)] }) + for (let { attributeName: a, target: h } of u) + h.dispatchEvent( + new CustomEvent(T, { detail: [a, h.getAttribute(a)] }) ); }); return P(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; @@ -462,7 +467,7 @@ E.on = function t(e, n, r = {}) { let { signal: o } = r; if (!(o && o.aborted)) { if (Array.isArray(e)) return e.forEach((c) => t(c, n, r)); - Q(e, n), o && o.addEventListener("abort", () => R(e, n)); + K(e, n), o && o.addEventListener("abort", () => R(e, n)); } }; E.symbols = { @@ -486,24 +491,24 @@ var D = "__dde_reactive"; E.el = function(t, e) { let n = M.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment(); o.append(n, r); - let { current: c } = x, u = {}, a = (l) => { + let { current: c } = x, u = {}, a = (h) => { if (!n.parentNode || !r.parentNode) return R(t, a); let v = u; u = {}, x.push(c); - let h = e(l, function(s, f) { + let l = e(h, function(s, f) { let b; return I(v, s) ? (b = v[s], delete v[s]) : b = f(), u[s] = b, b; }); - x.pop(), Array.isArray(h) || (h = [h]); + x.pop(), Array.isArray(l) || (l = [l]); let m = document.createComment(""); - h.push(m), n.after(...h); + l.push(m), n.after(...l); let k; for (; (k = m.nextSibling) && k !== r; ) k.remove(); m.remove(), n.isConnected && yt(c.host()); }; - return Q(t, a), ut(t, a, n, e), a(t()), o; + return K(t, a), ut(t, a, n, e), a(t()), o; }; function yt(t) { !t || !t[D] || (requestIdleCallback || setTimeout)(function() { @@ -517,7 +522,7 @@ var At = { }; function Ot(t) { return function(e, n) { - let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = ft(r, e.getAttribute(n), At); + let r = (...c) => c.length ? e.setAttribute(n, ...c) : V(r), o = ft(r, e.getAttribute(n), At); return t[n] = o, o; }; } @@ -544,7 +549,7 @@ var st = { return R(n, o); r(e, c); }; - return Q(n, o), ut(n, o, t, e), n(); + return K(n, o), ut(n, o, t, e), n(); } }; function ut(t, e, ...n) { @@ -562,14 +567,14 @@ function ut(t, e, ...n) { }); } function it(t, e, n) { - let r = t ? () => K(r) : (...o) => o.length ? at(r, ...o) : K(r); + let r = t ? () => V(r) : (...o) => o.length ? at(r, ...o) : V(r); return ft(r, e, n, t); } var St = Object.assign(/* @__PURE__ */ Object.create(null), { stopPropagation() { this.skip = !0; } -}), V = class extends Error { +}), Q = class extends Error { constructor() { super(); let [e, ...n] = this.stack.split(` @@ -590,7 +595,7 @@ function ft(t, e, n, r = !1) { onclear: o, host: u, listeners: /* @__PURE__ */ new Set(), - defined: new V().stack, + defined: new Q().stack, readonly: r }, enumerable: !1, @@ -601,7 +606,7 @@ function ft(t, e, n, r = !1) { function Ct() { return z[z.length - 1]; } -function K(t) { +function V(t) { if (!t[p]) return; let { value: e, listeners: n } = t[p], r = Ct(); return r && n.add(r), g.has(r) && g.get(r).add(t), e; @@ -612,7 +617,7 @@ function at(t, e, n) { if (!(!n && r.value === e)) return r.value = e, r.listeners.forEach((o) => o(e)), e; } -function Q(t, e) { +function K(t, e) { if (t[p]) return t[p].listeners.add(e); } @@ -636,15 +641,16 @@ globalThis.dde= { S: E, assign: q, assignAttribute: nt, + asyncQueueAdd: Mt, chainableAppend: lt, classListDeclarative: ht, createElement: M, - createElementNS: Mt, - customElementRender: Ht, + createElementNS: jt, + customElementRender: It, customElementWithDDE: xt, - dispatchEvent: Zt, + dispatchEvent: Gt, el: M, - elNS: Mt, + elNS: jt, elementAttribute: bt, isSignal: U, lifecyclesToEvents: xt, @@ -653,7 +659,7 @@ globalThis.dde= { registerReactivity: H, scope: x, signal: E, - simulateSlots: jt + simulateSlots: Pt }; })(); \ No newline at end of file diff --git a/dist/dde.js b/dist/dde.js index 73db7c7..b9ef61d 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -40,15 +40,17 @@ function G(t) { // src/dom-common.js var f = { - setDeleteAttr: V, + setDeleteAttr: Q, ssr: "", D: globalThis.document, F: globalThis.DocumentFragment, H: globalThis.HTMLElement, S: globalThis.SVGElement, - M: globalThis.MutationObserver + M: globalThis.MutationObserver, + qa: (t) => t, + qw: () => Promise.resolve() }; -function V(t, e, n) { +function Q(t, e, n) { if (Reflect.set(t, e, n), !!x(n)) { if (Reflect.deleteProperty(t, e), t instanceof f.H && t.getAttribute(e) === "undefined") return t.removeAttribute(e); @@ -56,10 +58,13 @@ function V(t, e, n) { return Reflect.set(t, e, ""); } } -var w = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", O = "dde:attributeChanged"; +var w = "__dde_lifecyclesToEvents", v = "dde:connected", m = "dde:disconnected", O = "dde:attributeChanged"; // src/dom.js -var v = [{ +function dt(t) { + return f.qa(t); +} +var g = [{ get scope() { return f.D.body; }, @@ -67,7 +72,7 @@ var v = [{ prevent: !0 }], D = { get current() { - return v[v.length - 1]; + return g[g.length - 1]; }, get host() { return this.current.host; @@ -77,27 +82,27 @@ var v = [{ return t.prevent = !0, t; }, get state() { - return [...v]; + return [...g]; }, push(t = {}) { - return v.push(Object.assign({}, this.current, { prevent: !1 }, t)); + return g.push(Object.assign({}, this.current, { prevent: !1 }, t)); }, pushRoot() { - return v.push(v[0]); + return g.push(g[0]); }, pop() { - if (v.length !== 1) - return v.pop(); + if (g.length !== 1) + return g.pop(); } }; function q(...t) { return this.appendOriginal(...t), this; } -function J(t) { +function V(t) { return t.append === q || (t.appendOriginal = t.append, t.append = q), t; } var T; -function k(t, e, ...n) { +function P(t, e, ...n) { let r = S(this), o = 0, c, a; switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { case typeof t == "function": { @@ -106,7 +111,7 @@ function k(t, e, ...n) { D.push({ scope: t, host: d }), c = t(e || void 0); let p = c instanceof f.F; if (c.nodeName === "#comment") break; - let b = k.mark({ + let b = P.mark({ type: "component", name: t.name, host: p ? "this" : "parentElement" @@ -126,22 +131,22 @@ function k(t, e, ...n) { case !c: c = R.call(this, f.D.createElement(t), e); } - return J(c), a || (a = c), n.forEach((d) => d(a)), o && D.pop(), o = 2, c; + return V(c), a || (a = c), n.forEach((d) => d(a)), o && D.pop(), o = 2, c; } -k.mark = function(t, e = !1) { +P.mark = function(t, e = !1) { t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); let n = e ? "" : "/", r = f.D.createComment(``); return e && (r.end = f.D.createComment("")), r; }; -function dt(t) { +function pt(t) { let e = this; return function(...r) { T = t; - let o = k.call(e, ...r); + let o = P.call(e, ...r); return T = void 0, o; }; } -function pt(t, e = t) { +function ht(t, e = t) { let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries( Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c]) ); @@ -151,12 +156,12 @@ function pt(t, e = t) { for (let p of d) { let b = (p.slot || "") + n; try { - Q(p, "remove", "slot"); + K(p, "remove", "slot"); } catch { } let h = o[b]; if (!h) return; - b.startsWith(r) || h.childNodes.forEach((E) => E.remove()), h.append(p), h.name = r + b; + h.name.startsWith(r) || (h.childNodes.forEach((E) => E.remove()), h.name = r + b), h.append(p); } return t.append = c, t; } @@ -200,7 +205,7 @@ function U(t, e, n) { case "ariaset": return M(o, n, (d, p) => r("aria-" + d, p)); case "classList": - return K.call(c, t, n); + return J.call(c, t, n); } return X(t, e) ? $(t, e, n) : r(e, n); } @@ -209,7 +214,7 @@ function H(t, e) { let r = (t instanceof f.S ? tt : Y).bind(null, t, "Attribute"), o = S(e); return { setRemoveAttr: r, s: o }; } -function K(t, e) { +function J(t, e) { let n = S(this); return M( n, @@ -217,7 +222,7 @@ function K(t, e) { (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) ), t; } -function Q(t, e, n, r) { +function K(t, e, n, r) { return t instanceof f.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); } function X(t, e) { @@ -248,7 +253,7 @@ function F(t, e, n) { } // src/events-observer.js -var m = f.M ? et() : new Proxy({}, { +var y = f.M ? et() : new Proxy({}, { get() { return () => { }; @@ -329,7 +334,7 @@ function et() { for (let l of s) { if (u && b(l).then(h), !t.has(l)) continue; let A = t.get(l); - A.length_c && (l.dispatchEvent(new Event(g)), A.connected = /* @__PURE__ */ new WeakSet(), A.length_c = 0, A.length_d || t.delete(l), i = !0); + A.length_c && (l.dispatchEvent(new Event(v)), A.connected = /* @__PURE__ */ new WeakSet(), A.length_c = 0, A.length_d || t.delete(l), i = !0); } return i; } @@ -341,13 +346,13 @@ function et() { } function I(s) { return () => { - s.isConnected || (s.dispatchEvent(new Event(y)), t.delete(s)); + s.isConnected || (s.dispatchEvent(new Event(m)), t.delete(s)); }; } } // src/customElement.js -function wt(t, e, n, r = rt) { +function mt(t, e, n, r = rt) { D.push({ scope: t, host: (...a) => a.length ? a.forEach((d) => d(t)) : t @@ -355,23 +360,23 @@ function wt(t, e, n, r = rt) { let o = t[w]; o || nt(t); let c = n.call(t, r); - return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, m.observe(e), { once: !0 }), D.pop(), e.append(c); + return o || t.dispatchEvent(new Event(v)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(m, y.observe(e), { once: !0 }), D.pop(), e.append(c); } function nt(t) { - return P(t.prototype, "connectedCallback", function(e, n, r) { - e.apply(n, r), n.dispatchEvent(new Event(g)); - }), P(t.prototype, "disconnectedCallback", function(e, n, r) { + return k(t.prototype, "connectedCallback", function(e, n, r) { + e.apply(n, r), n.dispatchEvent(new Event(v)); + }), 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(m)) ); - }), P(t.prototype, "attributeChangedCallback", function(e, n, r) { + }), k(t.prototype, "attributeChangedCallback", function(e, n, r) { let [o, , c] = r; n.dispatchEvent(new CustomEvent(O, { detail: [o, c] })), e.apply(n, r); }), t.prototype[w] = !0, t; } -function P(t, e, n) { +function k(t, e, n) { t[e] = new Proxy(t[e] || (() => { }), { apply: n }); } @@ -380,7 +385,7 @@ function rt(t) { } // src/events.js -function Ct(t, e, n) { +function Ot(t, e, n) { return e || (e = {}), function(o, ...c) { n && (c.unshift(o), o = typeof n == "function" ? n() : n); let a = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); @@ -395,12 +400,12 @@ function _(t, e, n) { var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); _.connected = function(t, e) { return e = B(e), function(r) { - return r.addEventListener(g, t, e), r[w] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (L(e.signal, () => m.offConnected(r, t)) && m.onConnected(r, t), r); + return r.addEventListener(v, t, e), r[w] ? r : r.isConnected ? (r.dispatchEvent(new Event(v)), r) : (L(e.signal, () => y.offConnected(r, t)) && y.onConnected(r, t), r); }; }; _.disconnected = function(t, e) { return e = B(e), function(r) { - return r.addEventListener(y, t, e), r[w] || L(e.signal, () => m.offDisconnected(r, t)) && m.onDisconnected(r, t), r; + return r.addEventListener(m, t, e), r[w] || L(e.signal, () => y.offDisconnected(r, t)) && y.onDisconnected(r, t), r; }; }; var j = /* @__PURE__ */ new WeakMap(); @@ -426,22 +431,23 @@ _.attributeChanged = function(t, e) { globalThis.dde= { assign: R, assignAttribute: U, - chainableAppend: J, - classListDeclarative: K, - createElement: k, - createElementNS: dt, - customElementRender: wt, + asyncQueueAdd: dt, + chainableAppend: V, + classListDeclarative: J, + createElement: P, + createElementNS: pt, + customElementRender: mt, customElementWithDDE: nt, - dispatchEvent: Ct, - el: k, - elNS: dt, - elementAttribute: Q, + dispatchEvent: Ot, + el: P, + elNS: pt, + elementAttribute: K, lifecyclesToEvents: nt, observedAttributes: rt, on: _, registerReactivity: Z, scope: D, - simulateSlots: pt + simulateSlots: ht }; })(); \ No newline at end of file diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts index 8c053ff..8780bac 100644 --- a/dist/esm-with-signals.d.ts +++ b/dist/esm-with-signals.d.ts @@ -72,7 +72,7 @@ export function el< TAG extends keyof ExtendedHTMLElementTagNameMap, >( tag_name: TAG, - attrs?: ElementAttributes]> | ddeString, + attrs?: ElementAttributes]> | ddeStringable, ...addons: ddeElementAddon< ExtendedHTMLElementTagNameMap[NoInfer] >[], // TODO: for now addons must have the same element @@ -82,7 +82,7 @@ export function el( ): ddeDocumentFragment export function el( tag_name: string, - attrs?: ElementAttributes | ddeString, + attrs?: ElementAttributes | ddeStringable, ...addons: ddeElementAddon[] ): ddeHTMLElement @@ -90,7 +90,7 @@ export function el< C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment >( component: C, - attrs?: Parameters[0] | ddeString, + attrs?: Parameters[0] | ddeStringable, ...addons: ddeElementAddon>[] ): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType @@ -104,7 +104,7 @@ export function elNS( EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), >( tag_name: TAG, - attrs?: ElementAttributes> | ddeString, + attrs?: ElementAttributes> | ddeStringable, ...addons: ddeElementAddon>[] )=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement export function elNS( @@ -114,7 +114,7 @@ export function elNS( EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ), >( tag_name: TAG, - attrs?: ddeString | Partial<{ + attrs?: ddeStringable | Partial<{ [key in keyof EL]: EL[key] | ddeSignal | string | number | boolean }>, ...addons: ddeElementAddon>[] @@ -123,7 +123,7 @@ export function elNS( namespace: string ): ( tag_name: string, - attrs?: string | ddeString | Record, + attrs?: string | ddeStringable | Record, ...addons: ddeElementAddon[] )=> SupportedElement export { elNS as createElementNS } diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index 00ae571..b14e915 100644 --- a/dist/esm-with-signals.js +++ b/dist/esm-with-signals.js @@ -49,7 +49,9 @@ var d = { F: globalThis.DocumentFragment, H: globalThis.HTMLElement, S: globalThis.SVGElement, - M: globalThis.MutationObserver + M: globalThis.MutationObserver, + qa: (t) => t, + qw: () => Promise.resolve() }; function pt(t, e, n) { if (Reflect.set(t, e, n), !!A(n)) { @@ -62,6 +64,9 @@ function pt(t, e, n) { var O = "__dde_lifecyclesToEvents", _ = "dde:connected", S = "dde:disconnected", T = "dde:attributeChanged"; // src/dom.js +function Mt(t) { + return d.qa(t); +} var y = [{ get scope() { return d.D.body; @@ -105,16 +110,16 @@ function M(t, e, ...n) { switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { case typeof t == "function": { o = 1; - let a = (...h) => h.length ? (o === 1 ? n.unshift(...h) : h.forEach((m) => m(u)), void 0) : u; + let a = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((m) => m(u)), void 0) : u; x.push({ scope: t, host: a }), c = t(e || void 0); - let l = c instanceof d.F; + let h = c instanceof d.F; if (c.nodeName === "#comment") break; let v = M.mark({ type: "component", name: t.name, - host: l ? "this" : "parentElement" + host: h ? "this" : "parentElement" }); - c.prepend(v), l && (u = v); + c.prepend(v), h && (u = v); break; } case t === "#text": @@ -136,7 +141,7 @@ M.mark = function(t, e = !1) { let n = e ? "" : "/", r = d.D.createComment(``); return e && (r.end = d.D.createComment("")), r; }; -function Mt(t) { +function jt(t) { let e = this; return function(...r) { $ = t; @@ -144,22 +149,22 @@ function Mt(t) { return $ = void 0, o; }; } -function jt(t, e = t) { +function Pt(t, e = t) { let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries( Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c]) ); if (t.append = new Proxy(t.append, { apply(c, u, a) { if (a[0] === e) return c.apply(t, a); - for (let l of a) { - let v = (l.slot || "") + n; + for (let h of a) { + let v = (h.slot || "") + n; try { - bt(l, "remove", "slot"); + bt(h, "remove", "slot"); } catch { } - let h = o[v]; - if (!h) return; - v.startsWith(r) || h.childNodes.forEach((m) => m.remove()), h.append(l), h.name = r + v; + let l = o[v]; + if (!l) return; + l.name.startsWith(r) || (l.childNodes.forEach((m) => m.remove()), l.name = r + v), l.append(h); } return t.append = c, t; } @@ -183,7 +188,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 [u] = e; if (u === "=") return r(e.slice(1), n); @@ -201,7 +206,7 @@ function nt(t, e, n) { case "dataset": return B(o, n, et.bind(null, t[e])); case "ariaset": - return B(o, n, (a, l) => r("aria-" + a, l)); + return B(o, n, (a, h) => r("aria-" + a, h)); case "classList": return ht.call(c, t, n); } @@ -261,7 +266,7 @@ function mt() { let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(s) { for (let f of s) if (f.type === "childList") { - if (h(f.addedNodes, !0)) { + if (l(f.addedNodes, !0)) { i(); continue; } @@ -314,23 +319,23 @@ function mt() { function a() { !e || t.size || (e = !1, r.disconnect()); } - function l() { + function h() { return new Promise(function(i) { (requestIdleCallback || requestAnimationFrame)(i); }); } async function v(i) { - t.size > 30 && await l(); + t.size > 30 && await h(); let s = []; if (!(i instanceof Node)) return s; for (let f of t.keys()) f === i || !(f instanceof Node) || i.contains(f) && s.push(f); return s; } - function h(i, s) { + function l(i, s) { let f = !1; for (let b of i) { - if (s && v(b).then(h), !t.has(b)) continue; + if (s && v(b).then(l), !t.has(b)) continue; let L = t.get(b); L.length_c && (b.dispatchEvent(new Event(_)), L.connected = /* @__PURE__ */ new WeakSet(), L.length_c = 0, L.length_d || t.delete(b), f = !0); } @@ -350,7 +355,7 @@ function mt() { } // src/customElement.js -function Ht(t, e, n, r = wt) { +function It(t, e, n, r = wt) { x.push({ scope: t, host: (...u) => u.length ? u.forEach((a) => a(t)) : t @@ -383,7 +388,7 @@ function wt(t) { } // src/events.js -function Zt(t, e, n) { +function Gt(t, e, n) { return e || (e = {}), function(o, ...c) { n && (c.unshift(o), o = typeof n == "function" ? n() : n); let u = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); @@ -417,9 +422,9 @@ w.attributeChanged = function(t, e) { return typeof e != "object" && (e = {}), function(r) { if (r.addEventListener(T, t, e), r[O] || _t.has(r) || !d.M) return r; let o = new d.M(function(u) { - for (let { attributeName: a, target: l } of u) - l.dispatchEvent( - new CustomEvent(T, { detail: [a, l.getAttribute(a)] }) + for (let { attributeName: a, target: h } of u) + h.dispatchEvent( + new CustomEvent(T, { detail: [a, h.getAttribute(a)] }) ); }); return P(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; @@ -460,7 +465,7 @@ E.on = function t(e, n, r = {}) { let { signal: o } = r; if (!(o && o.aborted)) { if (Array.isArray(e)) return e.forEach((c) => t(c, n, r)); - Q(e, n), o && o.addEventListener("abort", () => R(e, n)); + K(e, n), o && o.addEventListener("abort", () => R(e, n)); } }; E.symbols = { @@ -484,24 +489,24 @@ var D = "__dde_reactive"; E.el = function(t, e) { let n = M.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment(); o.append(n, r); - let { current: c } = x, u = {}, a = (l) => { + let { current: c } = x, u = {}, a = (h) => { if (!n.parentNode || !r.parentNode) return R(t, a); let v = u; u = {}, x.push(c); - let h = e(l, function(s, f) { + let l = e(h, function(s, f) { let b; return I(v, s) ? (b = v[s], delete v[s]) : b = f(), u[s] = b, b; }); - x.pop(), Array.isArray(h) || (h = [h]); + x.pop(), Array.isArray(l) || (l = [l]); let m = document.createComment(""); - h.push(m), n.after(...h); + l.push(m), n.after(...l); let k; for (; (k = m.nextSibling) && k !== r; ) k.remove(); m.remove(), n.isConnected && yt(c.host()); }; - return Q(t, a), ut(t, a, n, e), a(t()), o; + return K(t, a), ut(t, a, n, e), a(t()), o; }; function yt(t) { !t || !t[D] || (requestIdleCallback || setTimeout)(function() { @@ -515,7 +520,7 @@ var At = { }; function Ot(t) { return function(e, n) { - let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = ft(r, e.getAttribute(n), At); + let r = (...c) => c.length ? e.setAttribute(n, ...c) : V(r), o = ft(r, e.getAttribute(n), At); return t[n] = o, o; }; } @@ -542,7 +547,7 @@ var st = { return R(n, o); r(e, c); }; - return Q(n, o), ut(n, o, t, e), n(); + return K(n, o), ut(n, o, t, e), n(); } }; function ut(t, e, ...n) { @@ -560,14 +565,14 @@ function ut(t, e, ...n) { }); } function it(t, e, n) { - let r = t ? () => K(r) : (...o) => o.length ? at(r, ...o) : K(r); + let r = t ? () => V(r) : (...o) => o.length ? at(r, ...o) : V(r); return ft(r, e, n, t); } var St = Object.assign(/* @__PURE__ */ Object.create(null), { stopPropagation() { this.skip = !0; } -}), V = class extends Error { +}), Q = class extends Error { constructor() { super(); let [e, ...n] = this.stack.split(` @@ -588,7 +593,7 @@ function ft(t, e, n, r = !1) { onclear: o, host: u, listeners: /* @__PURE__ */ new Set(), - defined: new V().stack, + defined: new Q().stack, readonly: r }, enumerable: !1, @@ -599,7 +604,7 @@ function ft(t, e, n, r = !1) { function Ct() { return z[z.length - 1]; } -function K(t) { +function V(t) { if (!t[p]) return; let { value: e, listeners: n } = t[p], r = Ct(); return r && n.add(r), g.has(r) && g.get(r).add(t), e; @@ -610,7 +615,7 @@ function at(t, e, n) { if (!(!n && r.value === e)) return r.value = e, r.listeners.forEach((o) => o(e)), e; } -function Q(t, e) { +function K(t, e) { if (t[p]) return t[p].listeners.add(e); } @@ -633,15 +638,16 @@ export { E as S, q as assign, nt as assignAttribute, + Mt as asyncQueueAdd, lt as chainableAppend, ht as classListDeclarative, M as createElement, - Mt as createElementNS, - Ht as customElementRender, + jt as createElementNS, + It as customElementRender, xt as customElementWithDDE, - Zt as dispatchEvent, + Gt as dispatchEvent, M as el, - Mt as elNS, + jt as elNS, bt as elementAttribute, U as isSignal, xt as lifecyclesToEvents, @@ -650,5 +656,5 @@ export { H as registerReactivity, x as scope, E as signal, - jt as simulateSlots + Pt as simulateSlots }; diff --git a/dist/esm.d.ts b/dist/esm.d.ts index f004308..6d1fd8a 100644 --- a/dist/esm.d.ts +++ b/dist/esm.d.ts @@ -72,7 +72,7 @@ export function el< TAG extends keyof ExtendedHTMLElementTagNameMap, >( tag_name: TAG, - attrs?: ElementAttributes]> | ddeString, + attrs?: ElementAttributes]> | ddeStringable, ...addons: ddeElementAddon< ExtendedHTMLElementTagNameMap[NoInfer] >[], // TODO: for now addons must have the same element @@ -82,7 +82,7 @@ export function el( ): ddeDocumentFragment export function el( tag_name: string, - attrs?: ElementAttributes | ddeString, + attrs?: ElementAttributes | ddeStringable, ...addons: ddeElementAddon[] ): ddeHTMLElement @@ -90,7 +90,7 @@ export function el< C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment >( component: C, - attrs?: Parameters[0] | ddeString, + attrs?: Parameters[0] | ddeStringable, ...addons: ddeElementAddon>[] ): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType @@ -104,7 +104,7 @@ export function elNS( EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), >( tag_name: TAG, - attrs?: ElementAttributes> | ddeString, + attrs?: ElementAttributes> | ddeStringable, ...addons: ddeElementAddon>[] )=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement export function elNS( @@ -114,7 +114,7 @@ export function elNS( EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ), >( tag_name: TAG, - attrs?: ddeString | Partial<{ + attrs?: ddeStringable | Partial<{ [key in keyof EL]: EL[key] | ddeSignal | string | number | boolean }>, ...addons: ddeElementAddon>[] @@ -123,7 +123,7 @@ export function elNS( namespace: string ): ( tag_name: string, - attrs?: string | ddeString | Record, + attrs?: string | ddeStringable | Record, ...addons: ddeElementAddon[] )=> SupportedElement export { elNS as createElementNS } diff --git a/dist/esm.js b/dist/esm.js index 78da6a9..dd954e2 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -38,15 +38,17 @@ function G(t) { // src/dom-common.js var f = { - setDeleteAttr: V, + setDeleteAttr: Q, ssr: "", D: globalThis.document, F: globalThis.DocumentFragment, H: globalThis.HTMLElement, S: globalThis.SVGElement, - M: globalThis.MutationObserver + M: globalThis.MutationObserver, + qa: (t) => t, + qw: () => Promise.resolve() }; -function V(t, e, n) { +function Q(t, e, n) { if (Reflect.set(t, e, n), !!x(n)) { if (Reflect.deleteProperty(t, e), t instanceof f.H && t.getAttribute(e) === "undefined") return t.removeAttribute(e); @@ -54,10 +56,13 @@ function V(t, e, n) { return Reflect.set(t, e, ""); } } -var w = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", O = "dde:attributeChanged"; +var w = "__dde_lifecyclesToEvents", v = "dde:connected", m = "dde:disconnected", O = "dde:attributeChanged"; // src/dom.js -var v = [{ +function dt(t) { + return f.qa(t); +} +var g = [{ get scope() { return f.D.body; }, @@ -65,7 +70,7 @@ var v = [{ prevent: !0 }], D = { get current() { - return v[v.length - 1]; + return g[g.length - 1]; }, get host() { return this.current.host; @@ -75,27 +80,27 @@ var v = [{ return t.prevent = !0, t; }, get state() { - return [...v]; + return [...g]; }, push(t = {}) { - return v.push(Object.assign({}, this.current, { prevent: !1 }, t)); + return g.push(Object.assign({}, this.current, { prevent: !1 }, t)); }, pushRoot() { - return v.push(v[0]); + return g.push(g[0]); }, pop() { - if (v.length !== 1) - return v.pop(); + if (g.length !== 1) + return g.pop(); } }; function q(...t) { return this.appendOriginal(...t), this; } -function J(t) { +function V(t) { return t.append === q || (t.appendOriginal = t.append, t.append = q), t; } var T; -function k(t, e, ...n) { +function P(t, e, ...n) { let r = S(this), o = 0, c, a; switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { case typeof t == "function": { @@ -104,7 +109,7 @@ function k(t, e, ...n) { D.push({ scope: t, host: d }), c = t(e || void 0); let p = c instanceof f.F; if (c.nodeName === "#comment") break; - let b = k.mark({ + let b = P.mark({ type: "component", name: t.name, host: p ? "this" : "parentElement" @@ -124,22 +129,22 @@ function k(t, e, ...n) { case !c: c = R.call(this, f.D.createElement(t), e); } - return J(c), a || (a = c), n.forEach((d) => d(a)), o && D.pop(), o = 2, c; + return V(c), a || (a = c), n.forEach((d) => d(a)), o && D.pop(), o = 2, c; } -k.mark = function(t, e = !1) { +P.mark = function(t, e = !1) { t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); let n = e ? "" : "/", r = f.D.createComment(``); return e && (r.end = f.D.createComment("")), r; }; -function dt(t) { +function pt(t) { let e = this; return function(...r) { T = t; - let o = k.call(e, ...r); + let o = P.call(e, ...r); return T = void 0, o; }; } -function pt(t, e = t) { +function ht(t, e = t) { let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries( Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c]) ); @@ -149,12 +154,12 @@ function pt(t, e = t) { for (let p of d) { let b = (p.slot || "") + n; try { - Q(p, "remove", "slot"); + K(p, "remove", "slot"); } catch { } let h = o[b]; if (!h) return; - b.startsWith(r) || h.childNodes.forEach((E) => E.remove()), h.append(p), h.name = r + b; + h.name.startsWith(r) || (h.childNodes.forEach((E) => E.remove()), h.name = r + b), h.append(p); } return t.append = c, t; } @@ -198,7 +203,7 @@ function U(t, e, n) { case "ariaset": return M(o, n, (d, p) => r("aria-" + d, p)); case "classList": - return K.call(c, t, n); + return J.call(c, t, n); } return X(t, e) ? $(t, e, n) : r(e, n); } @@ -207,7 +212,7 @@ function H(t, e) { let r = (t instanceof f.S ? tt : Y).bind(null, t, "Attribute"), o = S(e); return { setRemoveAttr: r, s: o }; } -function K(t, e) { +function J(t, e) { let n = S(this); return M( n, @@ -215,7 +220,7 @@ function K(t, e) { (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) ), t; } -function Q(t, e, n, r) { +function K(t, e, n, r) { return t instanceof f.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); } function X(t, e) { @@ -246,7 +251,7 @@ function F(t, e, n) { } // src/events-observer.js -var m = f.M ? et() : new Proxy({}, { +var y = f.M ? et() : new Proxy({}, { get() { return () => { }; @@ -327,7 +332,7 @@ function et() { for (let l of s) { if (u && b(l).then(h), !t.has(l)) continue; let A = t.get(l); - A.length_c && (l.dispatchEvent(new Event(g)), A.connected = /* @__PURE__ */ new WeakSet(), A.length_c = 0, A.length_d || t.delete(l), i = !0); + A.length_c && (l.dispatchEvent(new Event(v)), A.connected = /* @__PURE__ */ new WeakSet(), A.length_c = 0, A.length_d || t.delete(l), i = !0); } return i; } @@ -339,13 +344,13 @@ function et() { } function I(s) { return () => { - s.isConnected || (s.dispatchEvent(new Event(y)), t.delete(s)); + s.isConnected || (s.dispatchEvent(new Event(m)), t.delete(s)); }; } } // src/customElement.js -function wt(t, e, n, r = rt) { +function mt(t, e, n, r = rt) { D.push({ scope: t, host: (...a) => a.length ? a.forEach((d) => d(t)) : t @@ -353,23 +358,23 @@ function wt(t, e, n, r = rt) { let o = t[w]; o || nt(t); let c = n.call(t, r); - return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, m.observe(e), { once: !0 }), D.pop(), e.append(c); + return o || t.dispatchEvent(new Event(v)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(m, y.observe(e), { once: !0 }), D.pop(), e.append(c); } function nt(t) { - return P(t.prototype, "connectedCallback", function(e, n, r) { - e.apply(n, r), n.dispatchEvent(new Event(g)); - }), P(t.prototype, "disconnectedCallback", function(e, n, r) { + return k(t.prototype, "connectedCallback", function(e, n, r) { + e.apply(n, r), n.dispatchEvent(new Event(v)); + }), 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(m)) ); - }), P(t.prototype, "attributeChangedCallback", function(e, n, r) { + }), k(t.prototype, "attributeChangedCallback", function(e, n, r) { let [o, , c] = r; n.dispatchEvent(new CustomEvent(O, { detail: [o, c] })), e.apply(n, r); }), t.prototype[w] = !0, t; } -function P(t, e, n) { +function k(t, e, n) { t[e] = new Proxy(t[e] || (() => { }), { apply: n }); } @@ -378,7 +383,7 @@ function rt(t) { } // src/events.js -function Ct(t, e, n) { +function Ot(t, e, n) { return e || (e = {}), function(o, ...c) { n && (c.unshift(o), o = typeof n == "function" ? n() : n); let a = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); @@ -393,12 +398,12 @@ function _(t, e, n) { var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); _.connected = function(t, e) { return e = B(e), function(r) { - return r.addEventListener(g, t, e), r[w] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (L(e.signal, () => m.offConnected(r, t)) && m.onConnected(r, t), r); + return r.addEventListener(v, t, e), r[w] ? r : r.isConnected ? (r.dispatchEvent(new Event(v)), r) : (L(e.signal, () => y.offConnected(r, t)) && y.onConnected(r, t), r); }; }; _.disconnected = function(t, e) { return e = B(e), function(r) { - return r.addEventListener(y, t, e), r[w] || L(e.signal, () => m.offDisconnected(r, t)) && m.onDisconnected(r, t), r; + return r.addEventListener(m, t, e), r[w] || L(e.signal, () => y.offDisconnected(r, t)) && y.onDisconnected(r, t), r; }; }; var j = /* @__PURE__ */ new WeakMap(); @@ -423,20 +428,21 @@ _.attributeChanged = function(t, e) { export { R as assign, U as assignAttribute, - J as chainableAppend, - K as classListDeclarative, - k as createElement, - dt as createElementNS, - wt as customElementRender, + dt as asyncQueueAdd, + V as chainableAppend, + J as classListDeclarative, + P as createElement, + pt as createElementNS, + mt as customElementRender, nt as customElementWithDDE, - Ct as dispatchEvent, - k as el, - dt as elNS, - Q as elementAttribute, + Ot as dispatchEvent, + P as el, + pt as elNS, + K as elementAttribute, nt as lifecyclesToEvents, rt as observedAttributes, _ as on, Z as registerReactivity, D as scope, - pt as simulateSlots + ht as simulateSlots };