jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-04-03 20:35:53 +02:00
Code Packages Releases Activity

Compare commits

base: jaandrle:2105776d2ace97eab735b32bc57b185e2ab469c8
Branches Tags
jaandrle:main
jaandrle:v0.9.5-alpha
jaandrle:v0.9.4-alpha
jaandrle:v0.9.3-alpha
...
compare: jaandrle:5098fb7fa2134e4f8efd3c1c211dae7741dad1a4
Branches Tags
jaandrle:main
jaandrle:v0.9.5-alpha
jaandrle:v0.9.4-alpha
jaandrle:v0.9.3-alpha

4 Commits
2105776d2a ... 5098fb7fa2

Author SHA1 Message Date
Jan Andrle
5098fb7fa2
⚡ builds 2024-12-12 17:17:27 +01:00
Jan Andrle
94ac2becfc
🐛 ddeStringable and simulateSlots 2024-12-12 17:16:57 +01:00
Jan Andrle
89553383bb
⚡ asyncQueue 2024-12-12 17:16:31 +01:00
Jan Andrle
c085f268e8
⚡ Improves simulateSlots 2024-12-12 15:54:03 +01:00
18 changed files with 987 additions and 1040 deletions
Show Stats Expand all files Collapse all files

486
dist/dde-with-signals.js vendored
View File

@ -1,7 +1,7 @@
//deka-dom-el library is available via global namespace `dde` //deka-dom-el library is available via global namespace `dde`
(()=> { (()=> {
// src/signals-common.js // src/signals-common.js
var k = { var N = {
isSignal(t) { isSignal(t) {
return !1; return !1;
}, },
@ -9,23 +9,23 @@ var k = {
return n; return n;
} }
}; };
function B(t, e = !0) { function H(t, e = !0) {
return e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t); return e ? Object.assign(N, t) : (Object.setPrototypeOf(t, N), t);
} }
function W(t) { function j(t) {
return k.isPrototypeOf(t) && t !== k ? t : k; return N.isPrototypeOf(t) && t !== N ? t : N;
} }
// src/helpers.js // src/helpers.js
var T = (...t) => Object.prototype.hasOwnProperty.call(...t); var I = (...t) => Object.prototype.hasOwnProperty.call(...t);
function S(t) { function A(t) {
return typeof t > "u"; return typeof t > "u";
} }
function X(t) { function X(t) {
let e = typeof t; let e = typeof t;
return e !== "object" ? e : t === null ? "null" : Object.prototype.toString.call(t); return e !== "object" ? e : t === null ? "null" : Object.prototype.toString.call(t);
} }
function q(t, e) { function P(t, e) {
if (!t || !(t instanceof AbortSignal)) if (!t || !(t instanceof AbortSignal))
return !0; return !0;
if (!t.aborted) if (!t.aborted)
@ -33,7 +33,7 @@ function q(t, e) {
t.removeEventListener("abort", e); t.removeEventListener("abort", e);
}; };
} }
function F(t, e) { function W(t, e) {
let { observedAttributes: n = [] } = t.constructor; let { observedAttributes: n = [] } = t.constructor;
return n.reduce(function(r, o) { return n.reduce(function(r, o) {
return r[dt(o)] = e(t, o), r; return r[dt(o)] = e(t, o), r;
@ -51,20 +51,25 @@ var d = {
F: globalThis.DocumentFragment, F: globalThis.DocumentFragment,
H: globalThis.HTMLElement, H: globalThis.HTMLElement,
S: globalThis.SVGElement, S: globalThis.SVGElement,
M: globalThis.MutationObserver M: globalThis.MutationObserver,
qa: (t) => t,
qw: () => Promise.resolve()
}; };
function pt(t, e, n) { function pt(t, e, n) {
if (Reflect.set(t, e, n), !!S(n)) { if (Reflect.set(t, e, n), !!A(n)) {
if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined") if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined")
return t.removeAttribute(e); return t.removeAttribute(e);
if (Reflect.get(t, e) === "undefined") if (Reflect.get(t, e) === "undefined")
return Reflect.set(t, e, ""); return Reflect.set(t, e, "");
} }
} }
var O = "__dde_lifecyclesToEvents", _ = "dde:connected", C = "dde:disconnected", M = "dde:attributeChanged"; var O = "__dde_lifecyclesToEvents", _ = "dde:connected", S = "dde:disconnected", T = "dde:attributeChanged";
// src/dom.js // src/dom.js
var A = [{ function Mt(t) {
return d.qa(t);
}
var y = [{
get scope() { get scope() {
return d.D.body; return d.D.body;
}, },
@ -72,7 +77,7 @@ var A = [{
prevent: !0 prevent: !0
}], x = { }], x = {
get current() { get current() {
return A[A.length - 1]; return y[y.length - 1];
}, },
get host() { get host() {
return this.current.host; return this.current.host;
@ -82,17 +87,17 @@ var A = [{
return t.prevent = !0, t; return t.prevent = !0, t;
}, },
get state() { get state() {
return [...A]; return [...y];
}, },
push(t = {}) { push(t = {}) {
return A.push(Object.assign({}, this.current, { prevent: !1 }, t)); return y.push(Object.assign({}, this.current, { prevent: !1 }, t));
}, },
pushRoot() { pushRoot() {
return A.push(A[0]); return y.push(y[0]);
}, },
pop() { pop() {
if (A.length !== 1) if (y.length !== 1)
return A.pop(); return y.pop();
} }
}; };
function Y(...t) { function Y(...t) {
@ -102,95 +107,82 @@ function lt(t) {
return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t; return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;
} }
var $; var $;
function P(t, e, ...n) { function M(t, e, ...n) {
let r = W(this), o = 0, c, i; let r = j(this), o = 0, c, u;
switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
case typeof t == "function": { case typeof t == "function": {
o = 1; o = 1;
let a = (...p) => p.length ? (o === 1 ? n.unshift(...p) : p.forEach((m) => m(i)), void 0) : i; 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); x.push({ scope: t, host: a }), c = t(e || void 0);
let h = c instanceof d.F; let h = c instanceof d.F;
if (c.nodeName === "#comment") break; if (c.nodeName === "#comment") break;
let v = P.mark({ let v = M.mark({
type: "component", type: "component",
name: t.name, name: t.name,
host: h ? "this" : "parentElement" host: h ? "this" : "parentElement"
}); });
c.prepend(v), h && (i = v); c.prepend(v), h && (u = v);
break; break;
} }
case t === "#text": case t === "#text":
c = j.call(this, d.D.createTextNode(""), e); c = q.call(this, d.D.createTextNode(""), e);
break; break;
case (t === "<>" || !t): case (t === "<>" || !t):
c = j.call(this, d.D.createDocumentFragment(), e); c = q.call(this, d.D.createDocumentFragment(), e);
break; break;
case !!$: case !!$:
c = j.call(this, d.D.createElementNS($, t), e); c = q.call(this, d.D.createElementNS($, t), e);
break; break;
case !c: case !c:
c = j.call(this, d.D.createElement(t), e); c = q.call(this, d.D.createElement(t), e);
} }
return lt(c), i || (i = c), n.forEach((a) => a(i)), o && x.pop(), o = 2, c; return lt(c), u || (u = c), n.forEach((a) => a(u)), o && x.pop(), o = 2, c;
} }
P.mark = function(t, e = !1) { M.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`); let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
return e && (r.end = d.D.createComment("</dde:mark>")), r; return e && (r.end = d.D.createComment("</dde:mark>")), r;
}; };
function Wt(t, e, n) { function jt(t) {
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, h) {
if (h[0] === e) return i.apply(t, h);
if (!h.length) return t;
let v = d.D.createDocumentFragment();
for (let p of h) {
if (!p || !p.slot) {
c && v.append(p);
continue;
}
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;
}
}), t !== e) {
let i = Array.from(t.childNodes);
i.forEach((a) => a.remove()), t.append(...i);
}
return e;
}
function ht(...t) {
return t.filter(Boolean).join(" ");
}
function bt(t, e, n) {
n && n(t, e);
try {
t.replaceWith(j(e, {
className: ht(e.className, t.className),
dataset: { ...t.dataset }
}));
} catch {
t.replaceWith(e);
}
}
function qt(t) {
let e = this; let e = this;
return function(...r) { return function(...r) {
$ = t; $ = t;
let o = P.call(e, ...r); let o = M.call(e, ...r);
return $ = void 0, o; return $ = void 0, o;
}; };
} }
var U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d; function Pt(t, e = t) {
function j(t, ...e) { 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 h of a) {
let v = (h.slot || "") + n;
try {
bt(h, "remove", "slot");
} catch {
}
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;
}
}), t !== e) {
let c = Array.from(t.childNodes);
t.append(...c);
}
return e;
}
var F = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;
function q(t, ...e) {
if (!e.length) return t; if (!e.length) return t;
U.set(t, rt(t, this)); F.set(t, rt(t, this));
for (let [n, r] of Object.entries(Object.assign({}, ...e))) for (let [n, r] of Object.entries(Object.assign({}, ...e)))
nt.call(this, t, n, r); nt.call(this, t, n, r);
return U.delete(t), t; return F.delete(t), t;
} }
function nt(t, e, n) { function nt(t, e, n) {
let { setRemoveAttr: r, s: o } = rt(t, this), c = this; let { setRemoveAttr: r, s: o } = rt(t, this), c = this;
@ -200,9 +192,9 @@ function nt(t, e, n) {
n, n,
(a, h) => nt.call(c, t, a, h) (a, h) => nt.call(c, t, a, h)
); );
let [i] = e; let [u] = e;
if (i === "=") return r(e.slice(1), n); if (u === "=") return r(e.slice(1), n);
if (i === ".") return et(t, e.slice(1), n); if (u === ".") return et(t, e.slice(1), n);
if (/(aria|data)([A-Z])/.test(e)) if (/(aria|data)([A-Z])/.test(e))
return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n); return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n);
switch (e === "className" && (e = "class"), e) { switch (e === "className" && (e = "class"), e) {
@ -214,177 +206,177 @@ function nt(t, e, n) {
if (typeof n != "object") break; if (typeof n != "object") break;
/* falls through */ /* falls through */
case "dataset": case "dataset":
return I(o, n, et.bind(null, t[e])); return B(o, n, et.bind(null, t[e]));
case "ariaset": case "ariaset":
return I(o, n, (a, h) => r("aria-" + a, h)); return B(o, n, (a, h) => r("aria-" + a, h));
case "classList": case "classList":
return gt.call(c, t, n); return ht.call(c, t, n);
} }
return Et(t, e) ? tt(t, e, n) : r(e, n); return gt(t, e) ? tt(t, e, n) : r(e, n);
} }
function rt(t, e) { function rt(t, e) {
if (U.has(t)) return U.get(t); if (F.has(t)) return F.get(t);
let r = (t instanceof d.S ? xt : mt).bind(null, t, "Attribute"), o = W(e); let r = (t instanceof d.S ? Et : vt).bind(null, t, "Attribute"), o = j(e);
return { setRemoveAttr: r, s: o }; return { setRemoveAttr: r, s: o };
} }
function gt(t, e) { function ht(t, e) {
let n = W(this); let n = j(this);
return I( return B(
n, n,
e, e,
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
), t; ), t;
} }
function vt(t, e, n, r) { function bt(t, e, n, r) {
return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
} }
function Et(t, e) { function gt(t, e) {
if (!(e in t)) return !1; if (!(e in t)) return !1;
let n = ot(t, e); let n = ot(t, e);
return !S(n.set); return !A(n.set);
} }
function ot(t, e) { function ot(t, e) {
if (t = Object.getPrototypeOf(t), !t) return {}; if (t = Object.getPrototypeOf(t), !t) return {};
let n = Object.getOwnPropertyDescriptor(t, e); let n = Object.getOwnPropertyDescriptor(t, e);
return n || ot(t, e); return n || ot(t, e);
} }
function I(t, e, n) { function B(t, e, n) {
if (!(typeof e != "object" || e === null)) if (!(typeof e != "object" || e === null))
return Object.entries(e).forEach(function([o, c]) { return Object.entries(e).forEach(function([o, c]) {
o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));
}); });
} }
function mt(t, e, n, r) { function vt(t, e, n, r) {
return t[(S(r) ? "remove" : "set") + e](n, r); return t[(A(r) ? "remove" : "set") + e](n, r);
} }
function xt(t, e, n, r, o = null) { function Et(t, e, n, r, o = null) {
return t[(S(r) ? "remove" : "set") + e + "NS"](o, n, r); return t[(A(r) ? "remove" : "set") + e + "NS"](o, n, r);
} }
function et(t, e, n) { function et(t, e, n) {
if (Reflect.set(t, e, n), !!S(n)) if (Reflect.set(t, e, n), !!A(n))
return Reflect.deleteProperty(t, e); return Reflect.deleteProperty(t, e);
} }
// src/events-observer.js // src/events-observer.js
var D = d.M ? wt() : new Proxy({}, { var C = d.M ? mt() : new Proxy({}, {
get() { get() {
return () => { return () => {
}; };
} }
}); });
function wt() { function mt() {
let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) { let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(s) {
for (let f of u) for (let f of s)
if (f.type === "childList") { if (f.type === "childList") {
if (p(f.addedNodes, !0)) { if (l(f.addedNodes, !0)) {
s(); i();
continue; continue;
} }
m(f.removedNodes, !0) && s(); m(f.removedNodes, !0) && i();
} }
}, r = new d.M(n(a)); }, r = new d.M(n(a));
return { return {
observe(s) { observe(i) {
let u = new d.M(n(() => { let s = new d.M(n(() => {
})); }));
return u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect(); return s.observe(i, { childList: !0, subtree: !0 }), () => s.disconnect();
}, },
onConnected(s, u) { onConnected(i, s) {
i(); u();
let f = c(s); let f = c(i);
f.connected.has(u) || (f.connected.add(u), f.length_c += 1); f.connected.has(s) || (f.connected.add(s), f.length_c += 1);
}, },
offConnected(s, u) { offConnected(i, s) {
if (!t.has(s)) return; if (!t.has(i)) return;
let f = t.get(s); let f = t.get(i);
f.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(s, f)); f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, o(i, f));
}, },
onDisconnected(s, u) { onDisconnected(i, s) {
i(); u();
let f = c(s); let f = c(i);
f.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1); f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1);
}, },
offDisconnected(s, u) { offDisconnected(i, s) {
if (!t.has(s)) return; if (!t.has(i)) return;
let f = t.get(s); let f = t.get(i);
f.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(s, f)); f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, o(i, f));
} }
}; };
function o(s, u) { function o(i, s) {
u.length_c || u.length_d || (t.delete(s), a()); s.length_c || s.length_d || (t.delete(i), a());
} }
function c(s) { function c(i) {
if (t.has(s)) return t.get(s); if (t.has(i)) return t.get(i);
let u = { let s = {
connected: /* @__PURE__ */ new WeakSet(), connected: /* @__PURE__ */ new WeakSet(),
length_c: 0, length_c: 0,
disconnected: /* @__PURE__ */ new WeakSet(), disconnected: /* @__PURE__ */ new WeakSet(),
length_d: 0 length_d: 0
}; };
return t.set(s, u), u; return t.set(i, s), s;
} }
function i() { function u() {
e || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 })); e || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 }));
} }
function a() { function a() {
!e || t.size || (e = !1, r.disconnect()); !e || t.size || (e = !1, r.disconnect());
} }
function h() { function h() {
return new Promise(function(s) { return new Promise(function(i) {
(requestIdleCallback || requestAnimationFrame)(s); (requestIdleCallback || requestAnimationFrame)(i);
}); });
} }
async function v(s) { async function v(i) {
t.size > 30 && await h(); t.size > 30 && await h();
let u = []; let s = [];
if (!(s instanceof Node)) return u; if (!(i instanceof Node)) return s;
for (let f of t.keys()) for (let f of t.keys())
f === s || !(f instanceof Node) || s.contains(f) && u.push(f); f === i || !(f instanceof Node) || i.contains(f) && s.push(f);
return u; return s;
} }
function p(s, u) { function l(i, s) {
let f = !1; let f = !1;
for (let b of s) { for (let b of i) {
if (u && v(b).then(p), !t.has(b)) continue; if (s && v(b).then(l), !t.has(b)) continue;
let N = t.get(b); let L = 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); L.length_c && (b.dispatchEvent(new Event(_)), L.connected = /* @__PURE__ */ new WeakSet(), L.length_c = 0, L.length_d || t.delete(b), f = !0);
} }
return f; return f;
} }
function m(s, u) { function m(i, s) {
let f = !1; let f = !1;
for (let b of s) for (let b of i)
u && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0); s && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(k(b)), f = !0);
return f; return f;
} }
function y(s) { function k(i) {
return () => { return () => {
s.isConnected || (s.dispatchEvent(new Event(C)), t.delete(s)); i.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i));
}; };
} }
} }
// src/customElement.js // src/customElement.js
function Jt(t, e, n, r = _t) { function It(t, e, n, r = wt) {
x.push({ x.push({
scope: t, scope: t,
host: (...i) => i.length ? i.forEach((a) => a(t)) : t host: (...u) => u.length ? u.forEach((a) => a(t)) : t
}), typeof r == "function" && (r = r.call(t, t)); }), typeof r == "function" && (r = r.call(t, t));
let o = t[O]; let o = t[O];
o || yt(t); o || xt(t);
let c = n.call(t, r); 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 }), x.pop(), e.append(c); return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(S, C.observe(e), { once: !0 }), x.pop(), e.append(c);
} }
function yt(t) { function xt(t) {
return J(t.prototype, "connectedCallback", function(e, n, r) { return J(t.prototype, "connectedCallback", function(e, n, r) {
e.apply(n, r), n.dispatchEvent(new Event(_)); e.apply(n, r), n.dispatchEvent(new Event(_));
}), J(t.prototype, "disconnectedCallback", function(e, n, r) { }), J(t.prototype, "disconnectedCallback", function(e, n, r) {
e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
() => !n.isConnected && n.dispatchEvent(new Event(C)) () => !n.isConnected && n.dispatchEvent(new Event(S))
); );
}), J(t.prototype, "attributeChangedCallback", function(e, n, r) { }), J(t.prototype, "attributeChangedCallback", function(e, n, r) {
let [o, , c] = r; let [o, , c] = r;
n.dispatchEvent(new CustomEvent(M, { n.dispatchEvent(new CustomEvent(T, {
detail: [o, c] detail: [o, c]
})), e.apply(n, r); })), e.apply(n, r);
}), t.prototype[O] = !0, t; }), t.prototype[O] = !0, t;
@ -393,16 +385,16 @@ function J(t, e, n) {
t[e] = new Proxy(t[e] || (() => { t[e] = new Proxy(t[e] || (() => {
}), { apply: n }); }), { apply: n });
} }
function _t(t) { function wt(t) {
return F(t, (e, n) => e.getAttribute(n)); return W(t, (e, n) => e.getAttribute(n));
} }
// src/events.js // src/events.js
function Kt(t, e, n) { function Gt(t, e, n) {
return e || (e = {}), function(o, ...c) { return e || (e = {}), function(o, ...c) {
n && (c.unshift(o), o = typeof n == "function" ? n() : n); 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); let u = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
return o.dispatchEvent(i); return o.dispatchEvent(u);
}; };
} }
function w(t, e, n) { function w(t, e, n) {
@ -413,12 +405,12 @@ function w(t, e, n) {
var ct = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); var ct = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
w.connected = function(t, e) { w.connected = function(t, e) {
return e = ct(e), function(r) { return e = ct(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); return r.addEventListener(_, t, e), r[O] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (P(e.signal, () => C.offConnected(r, t)) && C.onConnected(r, t), r);
}; };
}; };
w.disconnected = function(t, e) { w.disconnected = function(t, e) {
return e = ct(e), function(r) { return e = ct(e), function(r) {
return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r; return r.addEventListener(S, t, e), r[O] || P(e.signal, () => C.offDisconnected(r, t)) && C.onDisconnected(r, t), r;
}; };
}; };
var Z = /* @__PURE__ */ new WeakMap(); var Z = /* @__PURE__ */ new WeakMap();
@ -427,45 +419,45 @@ w.disconnectedAsAbort = function(t) {
let e = new AbortController(); let e = new AbortController();
return Z.set(t, e), t(w.disconnected(() => e.abort())), e; return Z.set(t, e), t(w.disconnected(() => e.abort())), e;
}; };
var At = /* @__PURE__ */ new WeakSet(); var _t = /* @__PURE__ */ new WeakSet();
w.attributeChanged = function(t, e) { w.attributeChanged = function(t, e) {
return typeof e != "object" && (e = {}), function(r) { return typeof e != "object" && (e = {}), function(r) {
if (r.addEventListener(M, t, e), r[O] || At.has(r) || !d.M) return r; if (r.addEventListener(T, t, e), r[O] || _t.has(r) || !d.M) return r;
let o = new d.M(function(i) { let o = new d.M(function(u) {
for (let { attributeName: a, target: h } of i) for (let { attributeName: a, target: h } of u)
h.dispatchEvent( h.dispatchEvent(
new CustomEvent(M, { detail: [a, h.getAttribute(a)] }) new CustomEvent(T, { detail: [a, h.getAttribute(a)] })
); );
}); });
return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; return P(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
}; };
}; };
// src/signals-lib.js // src/signals-lib.js
var l = "__dde_signal"; var p = "__dde_signal";
function z(t) { function U(t) {
try { try {
return T(t, l); return I(t, p);
} catch { } catch {
return !1; return !1;
} }
} }
var H = [], g = /* @__PURE__ */ new WeakMap(); var z = [], g = /* @__PURE__ */ new WeakMap();
function E(t, e) { function E(t, e) {
if (typeof t != "function") if (typeof t != "function")
return it(!1, t, e); return it(!1, t, e);
if (z(t)) return t; if (U(t)) return t;
let n = it(!0), r = function() { let n = it(!0), r = function() {
let [o, ...c] = g.get(r); let [o, ...c] = g.get(r);
if (g.set(r, /* @__PURE__ */ new Set([o])), H.push(r), at(n, t()), H.pop(), !c.length) return; if (g.set(r, /* @__PURE__ */ new Set([o])), z.push(r), at(n, t()), z.pop(), !c.length) return;
let i = g.get(r); let u = g.get(r);
for (let a of c) for (let a of c)
i.has(a) || L(a, r); u.has(a) || R(a, r);
}; };
return g.set(n[l], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n; return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
} }
E.action = function(t, e, ...n) { E.action = function(t, e, ...n) {
let r = t[l], { actions: o } = r; let r = t[p], { actions: o } = r;
if (!o || !(e in o)) if (!o || !(e in o))
throw new Error(`'${t}' has no action with name '${e}'!`); throw new Error(`'${t}' has no action with name '${e}'!`);
if (o[e].apply(r, n), r.skip) return delete r.skip; if (o[e].apply(r, n), r.skip) return delete r.skip;
@ -475,7 +467,7 @@ E.on = function t(e, n, r = {}) {
let { signal: o } = r; let { signal: o } = r;
if (!(o && o.aborted)) { if (!(o && o.aborted)) {
if (Array.isArray(e)) return e.forEach((c) => t(c, n, r)); if (Array.isArray(e)) return e.forEach((c) => t(c, n, r));
Q(e, n), o && o.addEventListener("abort", () => L(e, n)); K(e, n), o && o.addEventListener("abort", () => R(e, n));
} }
}; };
E.symbols = { E.symbols = {
@ -484,8 +476,8 @@ E.symbols = {
}; };
E.clear = function(...t) { E.clear = function(...t) {
for (let n of t) { for (let n of t) {
let r = n[l]; let r = n[p];
r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[l]); r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]);
} }
function e(n, r) { function e(n, r) {
r.listeners.forEach((o) => { r.listeners.forEach((o) => {
@ -495,53 +487,53 @@ E.clear = function(...t) {
}); });
} }
}; };
var R = "__dde_reactive"; var D = "__dde_reactive";
E.el = function(t, e) { E.el = function(t, e) {
let n = P.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment(); let n = M.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment();
o.append(n, r); o.append(n, r);
let { current: c } = x, i = {}, a = (h) => { let { current: c } = x, u = {}, a = (h) => {
if (!n.parentNode || !r.parentNode) if (!n.parentNode || !r.parentNode)
return L(t, a); return R(t, a);
let v = i; let v = u;
i = {}, x.push(c); u = {}, x.push(c);
let p = e(h, function(u, f) { let l = e(h, function(s, f) {
let b; let b;
return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b; return I(v, s) ? (b = v[s], delete v[s]) : b = f(), u[s] = b, b;
}); });
x.pop(), Array.isArray(p) || (p = [p]); x.pop(), Array.isArray(l) || (l = [l]);
let m = document.createComment(""); let m = document.createComment("");
p.push(m), n.after(...p); l.push(m), n.after(...l);
let y; let k;
for (; (y = m.nextSibling) && y !== r; ) for (; (k = m.nextSibling) && k !== r; )
y.remove(); k.remove();
m.remove(), n.isConnected && St(c.host()); 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 St(t) { function yt(t) {
!t || !t[R] || (requestIdleCallback || setTimeout)(function() { !t || !t[D] || (requestIdleCallback || setTimeout)(function() {
t[R] = t[R].filter(([e, n]) => n.isConnected ? !0 : (L(...e), !1)); t[D] = t[D].filter(([e, n]) => n.isConnected ? !0 : (R(...e), !1));
}); });
} }
var Ot = { var At = {
_set(t) { _set(t) {
this.value = t; this.value = t;
} }
}; };
function Ct(t) { function Ot(t) {
return function(e, n) { return function(e, n) {
let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = ft(r, e.getAttribute(n), Ot); let r = (...c) => c.length ? e.setAttribute(n, ...c) : V(r), o = ft(r, e.getAttribute(n), At);
return t[n] = o, o; return t[n] = o, o;
}; };
} }
var G = "__dde_attributes"; var G = "__dde_attributes";
E.observedAttributes = function(t) { E.observedAttributes = function(t) {
let e = t[G] = {}, n = F(t, Ct(e)); let e = t[G] = {}, n = W(t, Ot(e));
return w.attributeChanged(function({ detail: o }) { return w.attributeChanged(function({ detail: o }) {
/*! This maps attributes to signals (`S.observedAttributes`). /*! This maps attributes to signals (`S.observedAttributes`).
* Investigate `__dde_attributes` key of the element.*/ * Investigate `__dde_attributes` key of the element.*/
let [c, i] = o, a = this[G][c]; let [c, u] = o, a = this[G][c];
if (a) return E.action(a, "_set", i); if (a) return E.action(a, "_set", u);
})(t), w.disconnected(function() { })(t), w.disconnected(function() {
/*! This removes all signals mapped to attributes (`S.observedAttributes`). /*! This removes all signals mapped to attributes (`S.observedAttributes`).
* Investigate `__dde_attributes` key of the element.*/ * Investigate `__dde_attributes` key of the element.*/
@ -549,40 +541,40 @@ E.observedAttributes = function(t) {
})(t), n; })(t), n;
}; };
var st = { var st = {
isSignal: z, isSignal: U,
processReactiveAttribute(t, e, n, r) { processReactiveAttribute(t, e, n, r) {
if (!z(n)) return n; if (!U(n)) return n;
let o = (c) => { let o = (c) => {
if (!t.isConnected) if (!t.isConnected)
return L(n, o); return R(n, o);
r(e, c); 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) { function ut(t, e, ...n) {
let { current: r } = x; let { current: r } = x;
r.prevent || r.host(function(o) { r.prevent || r.host(function(o) {
o[R] || (o[R] = [], w.disconnected( o[D] || (o[D] = [], w.disconnected(
() => ( () => (
/*! /*!
* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?). * Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
* You can investigate the `__dde_reactive` key of the element. * You can investigate the `__dde_reactive` key of the element.
* */ * */
o[R].forEach(([[c, i]]) => L(c, i, c[l] && c[l].host && c[l].host() === o)) o[D].forEach(([[c, u]]) => R(c, u, c[p] && c[p].host && c[p].host() === o))
) )
)(o)), o[R].push([[t, e], ...n]); )(o)), o[D].push([[t, e], ...n]);
}); });
} }
function it(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); return ft(r, e, n, t);
} }
var Dt = Object.assign(/* @__PURE__ */ Object.create(null), { var St = Object.assign(/* @__PURE__ */ Object.create(null), {
stopPropagation() { stopPropagation() {
this.skip = !0; this.skip = !0;
} }
}), V = class extends Error { }), Q = class extends Error {
constructor() { constructor() {
super(); super();
let [e, ...n] = this.stack.split(` let [e, ...n] = this.stack.split(`
@ -595,79 +587,79 @@ function ft(t, e, n, r = !1) {
X(n) !== "[object Object]" && (n = {}); X(n) !== "[object Object]" && (n = {});
let { onclear: c } = E.symbols; let { onclear: c } = E.symbols;
n[c] && (o.push(n[c]), delete n[c]); n[c] && (o.push(n[c]), delete n[c]);
let { host: i } = x; let { host: u } = x;
return Reflect.defineProperty(t, l, { return Reflect.defineProperty(t, p, {
value: { value: {
value: e, value: e,
actions: n, actions: n,
onclear: o, onclear: o,
host: i, host: u,
listeners: /* @__PURE__ */ new Set(), listeners: /* @__PURE__ */ new Set(),
defined: new V().stack, defined: new Q().stack,
readonly: r readonly: r
}, },
enumerable: !1, enumerable: !1,
writable: !1, writable: !1,
configurable: !0 configurable: !0
}), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], Dt), t; }), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], St), t;
} }
function Rt() { function Ct() {
return H[H.length - 1]; return z[z.length - 1];
} }
function K(t) { function V(t) {
if (!t[l]) return; if (!t[p]) return;
let { value: e, listeners: n } = t[l], r = Rt(); let { value: e, listeners: n } = t[p], r = Ct();
return r && n.add(r), g.has(r) && g.get(r).add(t), e; return r && n.add(r), g.has(r) && g.get(r).add(t), e;
} }
function at(t, e, n) { function at(t, e, n) {
if (!t[l]) return; if (!t[p]) return;
let r = t[l]; let r = t[p];
if (!(!n && r.value === e)) if (!(!n && r.value === e))
return r.value = e, r.listeners.forEach((o) => o(e)), e; return r.value = e, r.listeners.forEach((o) => o(e)), e;
} }
function Q(t, e) { function K(t, e) {
if (t[l]) if (t[p])
return t[l].listeners.add(e); return t[p].listeners.add(e);
} }
function L(t, e, n) { function R(t, e, n) {
let r = t[l]; let r = t[p];
if (!r) return; if (!r) return;
let o = r.listeners.delete(e); let o = r.listeners.delete(e);
if (n && !r.listeners.size) { if (n && !r.listeners.size) {
if (E.clear(t), !g.has(r)) return o; if (E.clear(t), !g.has(r)) return o;
let c = g.get(r); let c = g.get(r);
if (!g.has(c)) return o; if (!g.has(c)) return o;
g.get(c).forEach((i) => L(i, c, !0)); g.get(c).forEach((u) => R(u, c, !0));
} }
return o; return o;
} }
// signals.js // signals.js
B(st); H(st);
globalThis.dde= { globalThis.dde= {
S: E, S: E,
assign: j, assign: q,
assignAttribute: nt, assignAttribute: nt,
asyncQueueAdd: Mt,
chainableAppend: lt, chainableAppend: lt,
classListDeclarative: gt, classListDeclarative: ht,
cn: ht, createElement: M,
createElement: P, createElementNS: jt,
createElementNS: qt, customElementRender: It,
customElementRender: Jt, customElementWithDDE: xt,
customElementWithDDE: yt, dispatchEvent: Gt,
dispatchEvent: Kt, el: M,
el: P, elNS: jt,
elNS: qt, elementAttribute: bt,
elementAttribute: vt, isSignal: U,
isSignal: z, lifecyclesToEvents: xt,
lifecyclesToEvents: yt, observedAttributes: wt,
observedAttributes: _t,
on: w, on: w,
registerReactivity: B, registerReactivity: H,
scope: x, scope: x,
signal: E, signal: E,
simulateSlots: Wt simulateSlots: Pt
}; };
})(); })();

433
dist/dde.js vendored
View File

@ -1,7 +1,7 @@
//deka-dom-el library is available via global namespace `dde` //deka-dom-el library is available via global namespace `dde`
(()=> { (()=> {
// src/signals-common.js // src/signals-common.js
var m = { var C = {
isSignal(t) { isSignal(t) {
return !1; return !1;
}, },
@ -9,19 +9,18 @@ var m = {
return n; return n;
} }
}; };
function G(t, e = !0) { function Z(t, e = !0) {
return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t); return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t);
} }
function L(t) { function S(t) {
return m.isPrototypeOf(t) && t !== m ? t : m; return C.isPrototypeOf(t) && t !== C ? t : C;
} }
// src/helpers.js // src/helpers.js
var q = (...t) => Object.prototype.hasOwnProperty.call(...t);
function x(t) { function x(t) {
return typeof t > "u"; return typeof t > "u";
} }
function N(t, e) { function L(t, e) {
if (!t || !(t instanceof AbortSignal)) if (!t || !(t instanceof AbortSignal))
return !0; return !0;
if (!t.aborted) if (!t.aborted)
@ -29,46 +28,51 @@ function N(t, e) {
t.removeEventListener("abort", e); t.removeEventListener("abort", e);
}; };
} }
function F(t, e) { function W(t, e) {
let { observedAttributes: n = [] } = t.constructor; let { observedAttributes: n = [] } = t.constructor;
return n.reduce(function(r, o) { return n.reduce(function(r, o) {
return r[V(o)] = e(t, o), r; return r[G(o)] = e(t, o), r;
}, {}); }, {});
} }
function V(t) { function G(t) {
return t.replace(/-./g, (e) => e[1].toUpperCase()); return t.replace(/-./g, (e) => e[1].toUpperCase());
} }
// src/dom-common.js // src/dom-common.js
var a = { var f = {
setDeleteAttr: J, setDeleteAttr: Q,
ssr: "", ssr: "",
D: globalThis.document, D: globalThis.document,
F: globalThis.DocumentFragment, F: globalThis.DocumentFragment,
H: globalThis.HTMLElement, H: globalThis.HTMLElement,
S: globalThis.SVGElement, S: globalThis.SVGElement,
M: globalThis.MutationObserver M: globalThis.MutationObserver,
qa: (t) => t,
qw: () => Promise.resolve()
}; };
function J(t, e, n) { function Q(t, e, n) {
if (Reflect.set(t, e, n), !!x(n)) { if (Reflect.set(t, e, n), !!x(n)) {
if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined") if (Reflect.deleteProperty(t, e), t instanceof f.H && t.getAttribute(e) === "undefined")
return t.removeAttribute(e); return t.removeAttribute(e);
if (Reflect.get(t, e) === "undefined") if (Reflect.get(t, e) === "undefined")
return Reflect.set(t, e, ""); return Reflect.set(t, e, "");
} }
} }
var w = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged"; var w = "__dde_lifecyclesToEvents", v = "dde:connected", m = "dde:disconnected", O = "dde:attributeChanged";
// src/dom.js // src/dom.js
var v = [{ function dt(t) {
return f.qa(t);
}
var g = [{
get scope() { get scope() {
return a.D.body; return f.D.body;
}, },
host: (t) => t ? t(a.D.body) : a.D.body, host: (t) => t ? t(f.D.body) : f.D.body,
prevent: !0 prevent: !0
}], S = { }], D = {
get current() { get current() {
return v[v.length - 1]; return g[g.length - 1];
}, },
get host() { get host() {
return this.current.host; return this.current.host;
@ -78,171 +82,158 @@ var v = [{
return t.prevent = !0, t; return t.prevent = !0, t;
}, },
get state() { get state() {
return [...v]; return [...g];
}, },
push(t = {}) { push(t = {}) {
return v.push(Object.assign({}, this.current, { prevent: !1 }, t)); return g.push(Object.assign({}, this.current, { prevent: !1 }, t));
}, },
pushRoot() { pushRoot() {
return v.push(v[0]); return g.push(g[0]);
}, },
pop() { pop() {
if (v.length !== 1) if (g.length !== 1)
return v.pop(); return g.pop();
} }
}; };
function $(...t) { function q(...t) {
return this.appendOriginal(...t), this; return this.appendOriginal(...t), this;
} }
function K(t) { function V(t) {
return t.append === $ || (t.appendOriginal = t.append, t.append = $), t; return t.append === q || (t.appendOriginal = t.append, t.append = q), t;
} }
var T; var T;
function j(t, e, ...n) { function P(t, e, ...n) {
let r = L(this), o = 0, c, f; let r = S(this), o = 0, c, a;
switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
case typeof t == "function": { case typeof t == "function": {
o = 1; o = 1;
let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(f)), void 0) : f; let d = (...h) => h.length ? (o === 1 ? n.unshift(...h) : h.forEach((E) => E(a)), void 0) : a;
S.push({ scope: t, host: d }), c = t(e || void 0); D.push({ scope: t, host: d }), c = t(e || void 0);
let p = c instanceof a.F; let p = c instanceof f.F;
if (c.nodeName === "#comment") break; if (c.nodeName === "#comment") break;
let b = j.mark({ let b = P.mark({
type: "component", type: "component",
name: t.name, name: t.name,
host: p ? "this" : "parentElement" host: p ? "this" : "parentElement"
}); });
c.prepend(b), p && (f = b); c.prepend(b), p && (a = b);
break; break;
} }
case t === "#text": case t === "#text":
c = O.call(this, a.D.createTextNode(""), e); c = R.call(this, f.D.createTextNode(""), e);
break; break;
case (t === "<>" || !t): case (t === "<>" || !t):
c = O.call(this, a.D.createDocumentFragment(), e); c = R.call(this, f.D.createDocumentFragment(), e);
break; break;
case !!T: case !!T:
c = O.call(this, a.D.createElementNS(T, t), e); c = R.call(this, f.D.createElementNS(T, t), e);
break; break;
case !c: case !c:
c = O.call(this, a.D.createElement(t), e); c = R.call(this, f.D.createElement(t), e);
} }
return K(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c; return V(c), a || (a = c), n.forEach((d) => d(a)), o && D.pop(), o = 2, c;
} }
j.mark = function(t, e = !1) { P.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`); let n = e ? "" : "/", r = f.D.createComment(`<dde:mark ${t}${f.ssr}${n}>`);
return e && (r.end = a.D.createComment("</dde:mark>")), r; return e && (r.end = f.D.createComment("</dde:mark>")), r;
}; };
function bt(t, e, n) { function pt(t) {
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);
if (t.append = new Proxy(t.append, {
apply(f, d, p) {
if (p[0] === e) return f.apply(t, p);
if (!p.length) return t;
let b = a.D.createDocumentFragment();
for (let l of p) {
if (!l || !l.slot) {
c && b.append(l);
continue;
}
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;
}
}), t !== e) {
let f = Array.from(t.childNodes);
f.forEach((d) => d.remove()), t.append(...f);
}
return e;
}
function Q(...t) {
return t.filter(Boolean).join(" ");
}
function X(t, e, n) {
n && n(t, e);
try {
t.replaceWith(O(e, {
className: Q(e.className, t.className),
dataset: { ...t.dataset }
}));
} catch {
t.replaceWith(e);
}
}
function gt(t) {
let e = this; let e = this;
return function(...r) { return function(...r) {
T = t; T = t;
let o = j.call(e, ...r); let o = P.call(e, ...r);
return T = void 0, o; return T = void 0, o;
}; };
} }
var P = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: U } = a; function ht(t, e = t) {
function O(t, ...e) { let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries(
if (!e.length) return t; Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c])
P.set(t, B(t, this)); );
for (let [n, r] of Object.entries(Object.assign({}, ...e))) if (t.append = new Proxy(t.append, {
z.call(this, t, n, r); apply(c, a, d) {
return P.delete(t), t; if (d[0] === e) return c.apply(t, d);
for (let p of d) {
let b = (p.slot || "") + n;
try {
K(p, "remove", "slot");
} catch {
}
let h = o[b];
if (!h) return;
h.name.startsWith(r) || (h.childNodes.forEach((E) => E.remove()), h.name = r + b), h.append(p);
}
return t.append = c, t;
}
}), t !== e) {
let c = Array.from(t.childNodes);
t.append(...c);
}
return e;
} }
function z(t, e, n) { var N = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: $ } = f;
let { setRemoveAttr: r, s: o } = B(t, this), c = this; function R(t, ...e) {
if (!e.length) return t;
N.set(t, H(t, this));
for (let [n, r] of Object.entries(Object.assign({}, ...e)))
U.call(this, t, n, r);
return N.delete(t), t;
}
function U(t, e, n) {
let { setRemoveAttr: r, s: o } = H(t, this), c = this;
n = o.processReactiveAttribute( n = o.processReactiveAttribute(
t, t,
e, e,
n, n,
(d, p) => z.call(c, t, d, p) (d, p) => U.call(c, t, d, p)
); );
let [f] = e; let [a] = e;
if (f === "=") return r(e.slice(1), n); if (a === "=") return r(e.slice(1), n);
if (f === ".") return H(t, e.slice(1), n); if (a === ".") return F(t, e.slice(1), n);
if (/(aria|data)([A-Z])/.test(e)) if (/(aria|data)([A-Z])/.test(e))
return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n); return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n);
switch (e === "className" && (e = "class"), e) { switch (e === "className" && (e = "class"), e) {
case "xlink:href": case "xlink:href":
return r(e, n, "http://www.w3.org/1999/xlink"); return r(e, n, "http://www.w3.org/1999/xlink");
case "textContent": case "textContent":
return U(t, e, n); return $(t, e, n);
case "style": case "style":
if (typeof n != "object") break; if (typeof n != "object") break;
/* falls through */ /* falls through */
case "dataset": case "dataset":
return M(o, n, H.bind(null, t[e])); return M(o, n, F.bind(null, t[e]));
case "ariaset": case "ariaset":
return M(o, n, (d, p) => r("aria-" + d, p)); return M(o, n, (d, p) => r("aria-" + d, p));
case "classList": case "classList":
return Y.call(c, t, n); return J.call(c, t, n);
} }
return et(t, e) ? U(t, e, n) : r(e, n); return X(t, e) ? $(t, e, n) : r(e, n);
} }
function B(t, e) { function H(t, e) {
if (P.has(t)) return P.get(t); if (N.has(t)) return N.get(t);
let r = (t instanceof a.S ? rt : nt).bind(null, t, "Attribute"), o = L(e); let r = (t instanceof f.S ? tt : Y).bind(null, t, "Attribute"), o = S(e);
return { setRemoveAttr: r, s: o }; return { setRemoveAttr: r, s: o };
} }
function Y(t, e) { function J(t, e) {
let n = L(this); let n = S(this);
return M( return M(
n, n,
e, e,
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
), t; ), t;
} }
function tt(t, e, n, r) { function K(t, e, n, r) {
return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); return t instanceof f.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
} }
function et(t, e) { function X(t, e) {
if (!(e in t)) return !1; if (!(e in t)) return !1;
let n = I(t, e); let n = z(t, e);
return !x(n.set); return !x(n.set);
} }
function I(t, e) { function z(t, e) {
if (t = Object.getPrototypeOf(t), !t) return {}; if (t = Object.getPrototypeOf(t), !t) return {};
let n = Object.getOwnPropertyDescriptor(t, e); let n = Object.getOwnPropertyDescriptor(t, e);
return n || I(t, e); return n || z(t, e);
} }
function M(t, e, n) { function M(t, e, n) {
if (!(typeof e != "object" || e === null)) if (!(typeof e != "object" || e === null))
@ -250,137 +241,137 @@ function M(t, e, n) {
o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));
}); });
} }
function nt(t, e, n, r) { function Y(t, e, n, r) {
return t[(x(r) ? "remove" : "set") + e](n, r); return t[(x(r) ? "remove" : "set") + e](n, r);
} }
function rt(t, e, n, r, o = null) { function tt(t, e, n, r, o = null) {
return t[(x(r) ? "remove" : "set") + e + "NS"](o, n, r); return t[(x(r) ? "remove" : "set") + e + "NS"](o, n, r);
} }
function H(t, e, n) { function F(t, e, n) {
if (Reflect.set(t, e, n), !!x(n)) if (Reflect.set(t, e, n), !!x(n))
return Reflect.deleteProperty(t, e); return Reflect.deleteProperty(t, e);
} }
// src/events-observer.js // src/events-observer.js
var A = a.M ? ot() : new Proxy({}, { var y = f.M ? et() : new Proxy({}, {
get() { get() {
return () => { return () => {
}; };
} }
}); });
function ot() { function et() {
let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) { let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
for (let s of u) for (let i of u)
if (s.type === "childList") { if (i.type === "childList") {
if (l(s.addedNodes, !0)) { if (h(i.addedNodes, !0)) {
i(); s();
continue; continue;
} }
E(s.removedNodes, !0) && i(); E(i.removedNodes, !0) && s();
} }
}, r = new a.M(n(d)); }, r = new f.M(n(d));
return { return {
observe(i) { observe(s) {
let u = new a.M(n(() => { let u = new f.M(n(() => {
})); }));
return u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect(); return u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();
}, },
onConnected(i, u) { onConnected(s, u) {
f(); a();
let s = c(i); let i = c(s);
s.connected.has(u) || (s.connected.add(u), s.length_c += 1); i.connected.has(u) || (i.connected.add(u), i.length_c += 1);
}, },
offConnected(i, u) { offConnected(s, u) {
if (!t.has(i)) return; if (!t.has(s)) return;
let s = t.get(i); let i = t.get(s);
s.connected.has(u) && (s.connected.delete(u), s.length_c -= 1, o(i, s)); i.connected.has(u) && (i.connected.delete(u), i.length_c -= 1, o(s, i));
}, },
onDisconnected(i, u) { onDisconnected(s, u) {
f(); a();
let s = c(i); let i = c(s);
s.disconnected.has(u) || (s.disconnected.add(u), s.length_d += 1); i.disconnected.has(u) || (i.disconnected.add(u), i.length_d += 1);
}, },
offDisconnected(i, u) { offDisconnected(s, u) {
if (!t.has(i)) return; if (!t.has(s)) return;
let s = t.get(i); let i = t.get(s);
s.disconnected.has(u) && (s.disconnected.delete(u), s.length_d -= 1, o(i, s)); i.disconnected.has(u) && (i.disconnected.delete(u), i.length_d -= 1, o(s, i));
} }
}; };
function o(i, u) { function o(s, u) {
u.length_c || u.length_d || (t.delete(i), d()); u.length_c || u.length_d || (t.delete(s), d());
} }
function c(i) { function c(s) {
if (t.has(i)) return t.get(i); if (t.has(s)) return t.get(s);
let u = { let u = {
connected: /* @__PURE__ */ new WeakSet(), connected: /* @__PURE__ */ new WeakSet(),
length_c: 0, length_c: 0,
disconnected: /* @__PURE__ */ new WeakSet(), disconnected: /* @__PURE__ */ new WeakSet(),
length_d: 0 length_d: 0
}; };
return t.set(i, u), u; return t.set(s, u), u;
} }
function f() { function a() {
e || (e = !0, r.observe(a.D.body, { childList: !0, subtree: !0 })); e || (e = !0, r.observe(f.D.body, { childList: !0, subtree: !0 }));
} }
function d() { function d() {
!e || t.size || (e = !1, r.disconnect()); !e || t.size || (e = !1, r.disconnect());
} }
function p() { function p() {
return new Promise(function(i) { return new Promise(function(s) {
(requestIdleCallback || requestAnimationFrame)(i); (requestIdleCallback || requestAnimationFrame)(s);
}); });
} }
async function b(i) { async function b(s) {
t.size > 30 && await p(); t.size > 30 && await p();
let u = []; let u = [];
if (!(i instanceof Node)) return u; if (!(s instanceof Node)) return u;
for (let s of t.keys()) for (let i of t.keys())
s === i || !(s instanceof Node) || i.contains(s) && u.push(s); i === s || !(i instanceof Node) || s.contains(i) && u.push(i);
return u; return u;
} }
function l(i, u) { function h(s, u) {
let s = !1; let i = !1;
for (let h of i) { for (let l of s) {
if (u && b(h).then(l), !t.has(h)) continue; if (u && b(l).then(h), !t.has(l)) continue;
let C = t.get(h); let A = t.get(l);
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); 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 s; return i;
} }
function E(i, u) { function E(s, u) {
let s = !1; let i = !1;
for (let h of i) for (let l of s)
u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0); u && b(l).then(E), !(!t.has(l) || !t.get(l).length_d) && ((globalThis.queueMicrotask || setTimeout)(I(l)), i = !0);
return s; return i;
} }
function _(i) { function I(s) {
return () => { return () => {
i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i)); s.isConnected || (s.dispatchEvent(new Event(m)), t.delete(s));
}; };
} }
} }
// src/customElement.js // src/customElement.js
function mt(t, e, n, r = it) { function mt(t, e, n, r = rt) {
S.push({ D.push({
scope: t, scope: t,
host: (...f) => f.length ? f.forEach((d) => d(t)) : t host: (...a) => a.length ? a.forEach((d) => d(t)) : t
}), typeof r == "function" && (r = r.call(t, t)); }), typeof r == "function" && (r = r.call(t, t));
let o = t[w]; let o = t[w];
o || ct(t); o || nt(t);
let c = n.call(t, r); let c = n.call(t, r);
return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, A.observe(e), { once: !0 }), S.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 ct(t) { function nt(t) {
return k(t.prototype, "connectedCallback", function(e, n, r) { return k(t.prototype, "connectedCallback", function(e, n, r) {
e.apply(n, r), n.dispatchEvent(new Event(g)); e.apply(n, r), n.dispatchEvent(new Event(v));
}), k(t.prototype, "disconnectedCallback", function(e, n, r) { }), k(t.prototype, "disconnectedCallback", function(e, n, r) {
e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
() => !n.isConnected && n.dispatchEvent(new Event(y)) () => !n.isConnected && n.dispatchEvent(new Event(m))
); );
}), k(t.prototype, "attributeChangedCallback", function(e, n, r) { }), k(t.prototype, "attributeChangedCallback", function(e, n, r) {
let [o, , c] = r; let [o, , c] = r;
n.dispatchEvent(new CustomEvent(D, { n.dispatchEvent(new CustomEvent(O, {
detail: [o, c] detail: [o, c]
})), e.apply(n, r); })), e.apply(n, r);
}), t.prototype[w] = !0, t; }), t.prototype[w] = !0, t;
@ -389,74 +380,74 @@ function k(t, e, n) {
t[e] = new Proxy(t[e] || (() => { t[e] = new Proxy(t[e] || (() => {
}), { apply: n }); }), { apply: n });
} }
function it(t) { function rt(t) {
return F(t, (e, n) => e.getAttribute(n)); return W(t, (e, n) => e.getAttribute(n));
} }
// src/events.js // src/events.js
function Rt(t, e, n) { function Ot(t, e, n) {
return e || (e = {}), function(o, ...c) { return e || (e = {}), function(o, ...c) {
n && (c.unshift(o), o = typeof n == "function" ? n() : n); 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); let a = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
return o.dispatchEvent(f); return o.dispatchEvent(a);
}; };
} }
function R(t, e, n) { function _(t, e, n) {
return function(o) { return function(o) {
return o.addEventListener(t, e, n), o; return o.addEventListener(t, e, n), o;
}; };
} }
var Z = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
R.connected = function(t, e) { _.connected = function(t, e) {
return e = Z(e), function(r) { return e = B(e), function(r) {
return r.addEventListener(g, t, e), r[w] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.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);
}; };
}; };
R.disconnected = function(t, e) { _.disconnected = function(t, e) {
return e = Z(e), function(r) { return e = B(e), function(r) {
return r.addEventListener(y, t, e), r[w] || N(e.signal, () => A.offDisconnected(r, t)) && A.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 W = /* @__PURE__ */ new WeakMap(); var j = /* @__PURE__ */ new WeakMap();
R.disconnectedAsAbort = function(t) { _.disconnectedAsAbort = function(t) {
if (W.has(t)) return W.get(t); if (j.has(t)) return j.get(t);
let e = new AbortController(); let e = new AbortController();
return W.set(t, e), t(R.disconnected(() => e.abort())), e; return j.set(t, e), t(_.disconnected(() => e.abort())), e;
}; };
var st = /* @__PURE__ */ new WeakSet(); var ot = /* @__PURE__ */ new WeakSet();
R.attributeChanged = function(t, e) { _.attributeChanged = function(t, e) {
return typeof e != "object" && (e = {}), function(r) { return typeof e != "object" && (e = {}), function(r) {
if (r.addEventListener(D, t, e), r[w] || st.has(r) || !a.M) return r; if (r.addEventListener(O, t, e), r[w] || ot.has(r) || !f.M) return r;
let o = new a.M(function(f) { let o = new f.M(function(a) {
for (let { attributeName: d, target: p } of f) for (let { attributeName: d, target: p } of a)
p.dispatchEvent( p.dispatchEvent(
new CustomEvent(D, { detail: [d, p.getAttribute(d)] }) new CustomEvent(O, { detail: [d, p.getAttribute(d)] })
); );
}); });
return N(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; return L(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
}; };
}; };
globalThis.dde= { globalThis.dde= {
assign: O, assign: R,
assignAttribute: z, assignAttribute: U,
chainableAppend: K, asyncQueueAdd: dt,
classListDeclarative: Y, chainableAppend: V,
cn: Q, classListDeclarative: J,
createElement: j, createElement: P,
createElementNS: gt, createElementNS: pt,
customElementRender: mt, customElementRender: mt,
customElementWithDDE: ct, customElementWithDDE: nt,
dispatchEvent: Rt, dispatchEvent: Ot,
el: j, el: P,
elNS: gt, elNS: pt,
elementAttribute: tt, elementAttribute: K,
lifecyclesToEvents: ct, lifecyclesToEvents: nt,
observedAttributes: it, observedAttributes: rt,
on: R, on: _,
registerReactivity: G, registerReactivity: Z,
scope: S, scope: D,
simulateSlots: bt simulateSlots: ht
}; };
})(); })();

19
dist/esm-with-signals.d.ts vendored
View File

@ -72,7 +72,7 @@ export function el<
TAG extends keyof ExtendedHTMLElementTagNameMap, TAG extends keyof ExtendedHTMLElementTagNameMap,
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeString, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable,
...addons: ddeElementAddon< ...addons: ddeElementAddon<
ExtendedHTMLElementTagNameMap[NoInfer<TAG>] ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
>[], // TODO: for now addons must have the same element >[], // TODO: for now addons must have the same element
@ -82,7 +82,7 @@ export function el(
): ddeDocumentFragment ): ddeDocumentFragment
export function el( export function el(
tag_name: string, tag_name: string,
attrs?: ElementAttributes<HTMLElement> | ddeString, attrs?: ElementAttributes<HTMLElement> | ddeStringable,
...addons: ddeElementAddon<HTMLElement>[] ...addons: ddeElementAddon<HTMLElement>[]
): ddeHTMLElement ): ddeHTMLElement
@ -90,7 +90,7 @@ export function el<
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
>( >(
component: C, component: C,
attrs?: Parameters<C>[0] | ddeString, attrs?: Parameters<C>[0] | ddeStringable,
...addons: ddeElementAddon<ReturnType<C>>[] ...addons: ddeElementAddon<ReturnType<C>>[]
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
? ReturnType<C> ? ReturnType<C>
@ -104,7 +104,7 @@ export function elNS(
EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<NoInfer<EL>> | ddeString, attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable,
...addons: ddeElementAddon<NoInfer<EL>>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement )=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
export function elNS( export function elNS(
@ -114,7 +114,7 @@ export function elNS(
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ), EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ddeString | Partial<{ attrs?: ddeStringable | Partial<{
[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
}>, }>,
...addons: ddeElementAddon<NoInfer<EL>>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
@ -123,20 +123,15 @@ export function elNS(
namespace: string namespace: string
): ( ): (
tag_name: string, tag_name: string,
attrs?: string | ddeString | Record<string, any>, attrs?: string | ddeStringable | Record<string, any>,
...addons: ddeElementAddon<SupportedElement>[] ...addons: ddeElementAddon<SupportedElement>[]
)=> SupportedElement )=> SupportedElement
export { elNS as createElementNS } export { elNS as createElementNS }
export function chainableAppend<EL extends SupportedElement>(el: EL): EL; export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
/**
* Mapper function (optional). Pass for coppying attributes, this is NOT implemented by {@link simulateSlots} itself!
* */
type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void;
/** Simulate slots for ddeComponents */ /** Simulate slots for ddeComponents */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>( export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
root: EL, root: EL,
mapper?: simulateSlotsMapper
): EL ): EL
/** /**
* Simulate slots in Custom Elements without using `shadowRoot`. * Simulate slots in Custom Elements without using `shadowRoot`.
@ -145,7 +140,7 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>( export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
el: HTMLElement, el: HTMLElement,
body: EL, mapper?: simulateSlotsMapper body: EL,
): EL ): EL
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):

486
dist/esm-with-signals.js vendored
View File

@ -1,5 +1,5 @@
// src/signals-common.js // src/signals-common.js
var k = { var N = {
isSignal(t) { isSignal(t) {
return !1; return !1;
}, },
@ -7,23 +7,23 @@ var k = {
return n; return n;
} }
}; };
function B(t, e = !0) { function H(t, e = !0) {
return e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t); return e ? Object.assign(N, t) : (Object.setPrototypeOf(t, N), t);
} }
function W(t) { function j(t) {
return k.isPrototypeOf(t) && t !== k ? t : k; return N.isPrototypeOf(t) && t !== N ? t : N;
} }
// src/helpers.js // src/helpers.js
var T = (...t) => Object.prototype.hasOwnProperty.call(...t); var I = (...t) => Object.prototype.hasOwnProperty.call(...t);
function S(t) { function A(t) {
return typeof t > "u"; return typeof t > "u";
} }
function X(t) { function X(t) {
let e = typeof t; let e = typeof t;
return e !== "object" ? e : t === null ? "null" : Object.prototype.toString.call(t); return e !== "object" ? e : t === null ? "null" : Object.prototype.toString.call(t);
} }
function q(t, e) { function P(t, e) {
if (!t || !(t instanceof AbortSignal)) if (!t || !(t instanceof AbortSignal))
return !0; return !0;
if (!t.aborted) if (!t.aborted)
@ -31,7 +31,7 @@ function q(t, e) {
t.removeEventListener("abort", e); t.removeEventListener("abort", e);
}; };
} }
function F(t, e) { function W(t, e) {
let { observedAttributes: n = [] } = t.constructor; let { observedAttributes: n = [] } = t.constructor;
return n.reduce(function(r, o) { return n.reduce(function(r, o) {
return r[dt(o)] = e(t, o), r; return r[dt(o)] = e(t, o), r;
@ -49,20 +49,25 @@ var d = {
F: globalThis.DocumentFragment, F: globalThis.DocumentFragment,
H: globalThis.HTMLElement, H: globalThis.HTMLElement,
S: globalThis.SVGElement, S: globalThis.SVGElement,
M: globalThis.MutationObserver M: globalThis.MutationObserver,
qa: (t) => t,
qw: () => Promise.resolve()
}; };
function pt(t, e, n) { function pt(t, e, n) {
if (Reflect.set(t, e, n), !!S(n)) { if (Reflect.set(t, e, n), !!A(n)) {
if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined") if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined")
return t.removeAttribute(e); return t.removeAttribute(e);
if (Reflect.get(t, e) === "undefined") if (Reflect.get(t, e) === "undefined")
return Reflect.set(t, e, ""); return Reflect.set(t, e, "");
} }
} }
var O = "__dde_lifecyclesToEvents", _ = "dde:connected", C = "dde:disconnected", M = "dde:attributeChanged"; var O = "__dde_lifecyclesToEvents", _ = "dde:connected", S = "dde:disconnected", T = "dde:attributeChanged";
// src/dom.js // src/dom.js
var A = [{ function Mt(t) {
return d.qa(t);
}
var y = [{
get scope() { get scope() {
return d.D.body; return d.D.body;
}, },
@ -70,7 +75,7 @@ var A = [{
prevent: !0 prevent: !0
}], x = { }], x = {
get current() { get current() {
return A[A.length - 1]; return y[y.length - 1];
}, },
get host() { get host() {
return this.current.host; return this.current.host;
@ -80,17 +85,17 @@ var A = [{
return t.prevent = !0, t; return t.prevent = !0, t;
}, },
get state() { get state() {
return [...A]; return [...y];
}, },
push(t = {}) { push(t = {}) {
return A.push(Object.assign({}, this.current, { prevent: !1 }, t)); return y.push(Object.assign({}, this.current, { prevent: !1 }, t));
}, },
pushRoot() { pushRoot() {
return A.push(A[0]); return y.push(y[0]);
}, },
pop() { pop() {
if (A.length !== 1) if (y.length !== 1)
return A.pop(); return y.pop();
} }
}; };
function Y(...t) { function Y(...t) {
@ -100,95 +105,82 @@ function lt(t) {
return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t; return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;
} }
var $; var $;
function P(t, e, ...n) { function M(t, e, ...n) {
let r = W(this), o = 0, c, i; let r = j(this), o = 0, c, u;
switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
case typeof t == "function": { case typeof t == "function": {
o = 1; o = 1;
let a = (...p) => p.length ? (o === 1 ? n.unshift(...p) : p.forEach((m) => m(i)), void 0) : i; 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); x.push({ scope: t, host: a }), c = t(e || void 0);
let h = c instanceof d.F; let h = c instanceof d.F;
if (c.nodeName === "#comment") break; if (c.nodeName === "#comment") break;
let v = P.mark({ let v = M.mark({
type: "component", type: "component",
name: t.name, name: t.name,
host: h ? "this" : "parentElement" host: h ? "this" : "parentElement"
}); });
c.prepend(v), h && (i = v); c.prepend(v), h && (u = v);
break; break;
} }
case t === "#text": case t === "#text":
c = j.call(this, d.D.createTextNode(""), e); c = q.call(this, d.D.createTextNode(""), e);
break; break;
case (t === "<>" || !t): case (t === "<>" || !t):
c = j.call(this, d.D.createDocumentFragment(), e); c = q.call(this, d.D.createDocumentFragment(), e);
break; break;
case !!$: case !!$:
c = j.call(this, d.D.createElementNS($, t), e); c = q.call(this, d.D.createElementNS($, t), e);
break; break;
case !c: case !c:
c = j.call(this, d.D.createElement(t), e); c = q.call(this, d.D.createElement(t), e);
} }
return lt(c), i || (i = c), n.forEach((a) => a(i)), o && x.pop(), o = 2, c; return lt(c), u || (u = c), n.forEach((a) => a(u)), o && x.pop(), o = 2, c;
} }
P.mark = function(t, e = !1) { M.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`); let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
return e && (r.end = d.D.createComment("</dde:mark>")), r; return e && (r.end = d.D.createComment("</dde:mark>")), r;
}; };
function Wt(t, e, n) { function jt(t) {
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, h) {
if (h[0] === e) return i.apply(t, h);
if (!h.length) return t;
let v = d.D.createDocumentFragment();
for (let p of h) {
if (!p || !p.slot) {
c && v.append(p);
continue;
}
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;
}
}), t !== e) {
let i = Array.from(t.childNodes);
i.forEach((a) => a.remove()), t.append(...i);
}
return e;
}
function ht(...t) {
return t.filter(Boolean).join(" ");
}
function bt(t, e, n) {
n && n(t, e);
try {
t.replaceWith(j(e, {
className: ht(e.className, t.className),
dataset: { ...t.dataset }
}));
} catch {
t.replaceWith(e);
}
}
function qt(t) {
let e = this; let e = this;
return function(...r) { return function(...r) {
$ = t; $ = t;
let o = P.call(e, ...r); let o = M.call(e, ...r);
return $ = void 0, o; return $ = void 0, o;
}; };
} }
var U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d; function Pt(t, e = t) {
function j(t, ...e) { 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 h of a) {
let v = (h.slot || "") + n;
try {
bt(h, "remove", "slot");
} catch {
}
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;
}
}), t !== e) {
let c = Array.from(t.childNodes);
t.append(...c);
}
return e;
}
var F = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;
function q(t, ...e) {
if (!e.length) return t; if (!e.length) return t;
U.set(t, rt(t, this)); F.set(t, rt(t, this));
for (let [n, r] of Object.entries(Object.assign({}, ...e))) for (let [n, r] of Object.entries(Object.assign({}, ...e)))
nt.call(this, t, n, r); nt.call(this, t, n, r);
return U.delete(t), t; return F.delete(t), t;
} }
function nt(t, e, n) { function nt(t, e, n) {
let { setRemoveAttr: r, s: o } = rt(t, this), c = this; let { setRemoveAttr: r, s: o } = rt(t, this), c = this;
@ -198,9 +190,9 @@ function nt(t, e, n) {
n, n,
(a, h) => nt.call(c, t, a, h) (a, h) => nt.call(c, t, a, h)
); );
let [i] = e; let [u] = e;
if (i === "=") return r(e.slice(1), n); if (u === "=") return r(e.slice(1), n);
if (i === ".") return et(t, e.slice(1), n); if (u === ".") return et(t, e.slice(1), n);
if (/(aria|data)([A-Z])/.test(e)) if (/(aria|data)([A-Z])/.test(e))
return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n); return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n);
switch (e === "className" && (e = "class"), e) { switch (e === "className" && (e = "class"), e) {
@ -212,177 +204,177 @@ function nt(t, e, n) {
if (typeof n != "object") break; if (typeof n != "object") break;
/* falls through */ /* falls through */
case "dataset": case "dataset":
return I(o, n, et.bind(null, t[e])); return B(o, n, et.bind(null, t[e]));
case "ariaset": case "ariaset":
return I(o, n, (a, h) => r("aria-" + a, h)); return B(o, n, (a, h) => r("aria-" + a, h));
case "classList": case "classList":
return gt.call(c, t, n); return ht.call(c, t, n);
} }
return Et(t, e) ? tt(t, e, n) : r(e, n); return gt(t, e) ? tt(t, e, n) : r(e, n);
} }
function rt(t, e) { function rt(t, e) {
if (U.has(t)) return U.get(t); if (F.has(t)) return F.get(t);
let r = (t instanceof d.S ? xt : mt).bind(null, t, "Attribute"), o = W(e); let r = (t instanceof d.S ? Et : vt).bind(null, t, "Attribute"), o = j(e);
return { setRemoveAttr: r, s: o }; return { setRemoveAttr: r, s: o };
} }
function gt(t, e) { function ht(t, e) {
let n = W(this); let n = j(this);
return I( return B(
n, n,
e, e,
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
), t; ), t;
} }
function vt(t, e, n, r) { function bt(t, e, n, r) {
return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
} }
function Et(t, e) { function gt(t, e) {
if (!(e in t)) return !1; if (!(e in t)) return !1;
let n = ot(t, e); let n = ot(t, e);
return !S(n.set); return !A(n.set);
} }
function ot(t, e) { function ot(t, e) {
if (t = Object.getPrototypeOf(t), !t) return {}; if (t = Object.getPrototypeOf(t), !t) return {};
let n = Object.getOwnPropertyDescriptor(t, e); let n = Object.getOwnPropertyDescriptor(t, e);
return n || ot(t, e); return n || ot(t, e);
} }
function I(t, e, n) { function B(t, e, n) {
if (!(typeof e != "object" || e === null)) if (!(typeof e != "object" || e === null))
return Object.entries(e).forEach(function([o, c]) { return Object.entries(e).forEach(function([o, c]) {
o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));
}); });
} }
function mt(t, e, n, r) { function vt(t, e, n, r) {
return t[(S(r) ? "remove" : "set") + e](n, r); return t[(A(r) ? "remove" : "set") + e](n, r);
} }
function xt(t, e, n, r, o = null) { function Et(t, e, n, r, o = null) {
return t[(S(r) ? "remove" : "set") + e + "NS"](o, n, r); return t[(A(r) ? "remove" : "set") + e + "NS"](o, n, r);
} }
function et(t, e, n) { function et(t, e, n) {
if (Reflect.set(t, e, n), !!S(n)) if (Reflect.set(t, e, n), !!A(n))
return Reflect.deleteProperty(t, e); return Reflect.deleteProperty(t, e);
} }
// src/events-observer.js // src/events-observer.js
var D = d.M ? wt() : new Proxy({}, { var C = d.M ? mt() : new Proxy({}, {
get() { get() {
return () => { return () => {
}; };
} }
}); });
function wt() { function mt() {
let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) { let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(s) {
for (let f of u) for (let f of s)
if (f.type === "childList") { if (f.type === "childList") {
if (p(f.addedNodes, !0)) { if (l(f.addedNodes, !0)) {
s(); i();
continue; continue;
} }
m(f.removedNodes, !0) && s(); m(f.removedNodes, !0) && i();
} }
}, r = new d.M(n(a)); }, r = new d.M(n(a));
return { return {
observe(s) { observe(i) {
let u = new d.M(n(() => { let s = new d.M(n(() => {
})); }));
return u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect(); return s.observe(i, { childList: !0, subtree: !0 }), () => s.disconnect();
}, },
onConnected(s, u) { onConnected(i, s) {
i(); u();
let f = c(s); let f = c(i);
f.connected.has(u) || (f.connected.add(u), f.length_c += 1); f.connected.has(s) || (f.connected.add(s), f.length_c += 1);
}, },
offConnected(s, u) { offConnected(i, s) {
if (!t.has(s)) return; if (!t.has(i)) return;
let f = t.get(s); let f = t.get(i);
f.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(s, f)); f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, o(i, f));
}, },
onDisconnected(s, u) { onDisconnected(i, s) {
i(); u();
let f = c(s); let f = c(i);
f.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1); f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1);
}, },
offDisconnected(s, u) { offDisconnected(i, s) {
if (!t.has(s)) return; if (!t.has(i)) return;
let f = t.get(s); let f = t.get(i);
f.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(s, f)); f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, o(i, f));
} }
}; };
function o(s, u) { function o(i, s) {
u.length_c || u.length_d || (t.delete(s), a()); s.length_c || s.length_d || (t.delete(i), a());
} }
function c(s) { function c(i) {
if (t.has(s)) return t.get(s); if (t.has(i)) return t.get(i);
let u = { let s = {
connected: /* @__PURE__ */ new WeakSet(), connected: /* @__PURE__ */ new WeakSet(),
length_c: 0, length_c: 0,
disconnected: /* @__PURE__ */ new WeakSet(), disconnected: /* @__PURE__ */ new WeakSet(),
length_d: 0 length_d: 0
}; };
return t.set(s, u), u; return t.set(i, s), s;
} }
function i() { function u() {
e || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 })); e || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 }));
} }
function a() { function a() {
!e || t.size || (e = !1, r.disconnect()); !e || t.size || (e = !1, r.disconnect());
} }
function h() { function h() {
return new Promise(function(s) { return new Promise(function(i) {
(requestIdleCallback || requestAnimationFrame)(s); (requestIdleCallback || requestAnimationFrame)(i);
}); });
} }
async function v(s) { async function v(i) {
t.size > 30 && await h(); t.size > 30 && await h();
let u = []; let s = [];
if (!(s instanceof Node)) return u; if (!(i instanceof Node)) return s;
for (let f of t.keys()) for (let f of t.keys())
f === s || !(f instanceof Node) || s.contains(f) && u.push(f); f === i || !(f instanceof Node) || i.contains(f) && s.push(f);
return u; return s;
} }
function p(s, u) { function l(i, s) {
let f = !1; let f = !1;
for (let b of s) { for (let b of i) {
if (u && v(b).then(p), !t.has(b)) continue; if (s && v(b).then(l), !t.has(b)) continue;
let N = t.get(b); let L = 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); L.length_c && (b.dispatchEvent(new Event(_)), L.connected = /* @__PURE__ */ new WeakSet(), L.length_c = 0, L.length_d || t.delete(b), f = !0);
} }
return f; return f;
} }
function m(s, u) { function m(i, s) {
let f = !1; let f = !1;
for (let b of s) for (let b of i)
u && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0); s && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(k(b)), f = !0);
return f; return f;
} }
function y(s) { function k(i) {
return () => { return () => {
s.isConnected || (s.dispatchEvent(new Event(C)), t.delete(s)); i.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i));
}; };
} }
} }
// src/customElement.js // src/customElement.js
function Jt(t, e, n, r = _t) { function It(t, e, n, r = wt) {
x.push({ x.push({
scope: t, scope: t,
host: (...i) => i.length ? i.forEach((a) => a(t)) : t host: (...u) => u.length ? u.forEach((a) => a(t)) : t
}), typeof r == "function" && (r = r.call(t, t)); }), typeof r == "function" && (r = r.call(t, t));
let o = t[O]; let o = t[O];
o || yt(t); o || xt(t);
let c = n.call(t, r); 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 }), x.pop(), e.append(c); return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(S, C.observe(e), { once: !0 }), x.pop(), e.append(c);
} }
function yt(t) { function xt(t) {
return J(t.prototype, "connectedCallback", function(e, n, r) { return J(t.prototype, "connectedCallback", function(e, n, r) {
e.apply(n, r), n.dispatchEvent(new Event(_)); e.apply(n, r), n.dispatchEvent(new Event(_));
}), J(t.prototype, "disconnectedCallback", function(e, n, r) { }), J(t.prototype, "disconnectedCallback", function(e, n, r) {
e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
() => !n.isConnected && n.dispatchEvent(new Event(C)) () => !n.isConnected && n.dispatchEvent(new Event(S))
); );
}), J(t.prototype, "attributeChangedCallback", function(e, n, r) { }), J(t.prototype, "attributeChangedCallback", function(e, n, r) {
let [o, , c] = r; let [o, , c] = r;
n.dispatchEvent(new CustomEvent(M, { n.dispatchEvent(new CustomEvent(T, {
detail: [o, c] detail: [o, c]
})), e.apply(n, r); })), e.apply(n, r);
}), t.prototype[O] = !0, t; }), t.prototype[O] = !0, t;
@ -391,16 +383,16 @@ function J(t, e, n) {
t[e] = new Proxy(t[e] || (() => { t[e] = new Proxy(t[e] || (() => {
}), { apply: n }); }), { apply: n });
} }
function _t(t) { function wt(t) {
return F(t, (e, n) => e.getAttribute(n)); return W(t, (e, n) => e.getAttribute(n));
} }
// src/events.js // src/events.js
function Kt(t, e, n) { function Gt(t, e, n) {
return e || (e = {}), function(o, ...c) { return e || (e = {}), function(o, ...c) {
n && (c.unshift(o), o = typeof n == "function" ? n() : n); 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); let u = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
return o.dispatchEvent(i); return o.dispatchEvent(u);
}; };
} }
function w(t, e, n) { function w(t, e, n) {
@ -411,12 +403,12 @@ function w(t, e, n) {
var ct = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); var ct = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
w.connected = function(t, e) { w.connected = function(t, e) {
return e = ct(e), function(r) { return e = ct(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); return r.addEventListener(_, t, e), r[O] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (P(e.signal, () => C.offConnected(r, t)) && C.onConnected(r, t), r);
}; };
}; };
w.disconnected = function(t, e) { w.disconnected = function(t, e) {
return e = ct(e), function(r) { return e = ct(e), function(r) {
return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r; return r.addEventListener(S, t, e), r[O] || P(e.signal, () => C.offDisconnected(r, t)) && C.onDisconnected(r, t), r;
}; };
}; };
var Z = /* @__PURE__ */ new WeakMap(); var Z = /* @__PURE__ */ new WeakMap();
@ -425,45 +417,45 @@ w.disconnectedAsAbort = function(t) {
let e = new AbortController(); let e = new AbortController();
return Z.set(t, e), t(w.disconnected(() => e.abort())), e; return Z.set(t, e), t(w.disconnected(() => e.abort())), e;
}; };
var At = /* @__PURE__ */ new WeakSet(); var _t = /* @__PURE__ */ new WeakSet();
w.attributeChanged = function(t, e) { w.attributeChanged = function(t, e) {
return typeof e != "object" && (e = {}), function(r) { return typeof e != "object" && (e = {}), function(r) {
if (r.addEventListener(M, t, e), r[O] || At.has(r) || !d.M) return r; if (r.addEventListener(T, t, e), r[O] || _t.has(r) || !d.M) return r;
let o = new d.M(function(i) { let o = new d.M(function(u) {
for (let { attributeName: a, target: h } of i) for (let { attributeName: a, target: h } of u)
h.dispatchEvent( h.dispatchEvent(
new CustomEvent(M, { detail: [a, h.getAttribute(a)] }) new CustomEvent(T, { detail: [a, h.getAttribute(a)] })
); );
}); });
return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; return P(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
}; };
}; };
// src/signals-lib.js // src/signals-lib.js
var l = "__dde_signal"; var p = "__dde_signal";
function z(t) { function U(t) {
try { try {
return T(t, l); return I(t, p);
} catch { } catch {
return !1; return !1;
} }
} }
var H = [], g = /* @__PURE__ */ new WeakMap(); var z = [], g = /* @__PURE__ */ new WeakMap();
function E(t, e) { function E(t, e) {
if (typeof t != "function") if (typeof t != "function")
return it(!1, t, e); return it(!1, t, e);
if (z(t)) return t; if (U(t)) return t;
let n = it(!0), r = function() { let n = it(!0), r = function() {
let [o, ...c] = g.get(r); let [o, ...c] = g.get(r);
if (g.set(r, /* @__PURE__ */ new Set([o])), H.push(r), at(n, t()), H.pop(), !c.length) return; if (g.set(r, /* @__PURE__ */ new Set([o])), z.push(r), at(n, t()), z.pop(), !c.length) return;
let i = g.get(r); let u = g.get(r);
for (let a of c) for (let a of c)
i.has(a) || L(a, r); u.has(a) || R(a, r);
}; };
return g.set(n[l], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n; return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
} }
E.action = function(t, e, ...n) { E.action = function(t, e, ...n) {
let r = t[l], { actions: o } = r; let r = t[p], { actions: o } = r;
if (!o || !(e in o)) if (!o || !(e in o))
throw new Error(`'${t}' has no action with name '${e}'!`); throw new Error(`'${t}' has no action with name '${e}'!`);
if (o[e].apply(r, n), r.skip) return delete r.skip; if (o[e].apply(r, n), r.skip) return delete r.skip;
@ -473,7 +465,7 @@ E.on = function t(e, n, r = {}) {
let { signal: o } = r; let { signal: o } = r;
if (!(o && o.aborted)) { if (!(o && o.aborted)) {
if (Array.isArray(e)) return e.forEach((c) => t(c, n, r)); if (Array.isArray(e)) return e.forEach((c) => t(c, n, r));
Q(e, n), o && o.addEventListener("abort", () => L(e, n)); K(e, n), o && o.addEventListener("abort", () => R(e, n));
} }
}; };
E.symbols = { E.symbols = {
@ -482,8 +474,8 @@ E.symbols = {
}; };
E.clear = function(...t) { E.clear = function(...t) {
for (let n of t) { for (let n of t) {
let r = n[l]; let r = n[p];
r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[l]); r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]);
} }
function e(n, r) { function e(n, r) {
r.listeners.forEach((o) => { r.listeners.forEach((o) => {
@ -493,53 +485,53 @@ E.clear = function(...t) {
}); });
} }
}; };
var R = "__dde_reactive"; var D = "__dde_reactive";
E.el = function(t, e) { E.el = function(t, e) {
let n = P.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment(); let n = M.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment();
o.append(n, r); o.append(n, r);
let { current: c } = x, i = {}, a = (h) => { let { current: c } = x, u = {}, a = (h) => {
if (!n.parentNode || !r.parentNode) if (!n.parentNode || !r.parentNode)
return L(t, a); return R(t, a);
let v = i; let v = u;
i = {}, x.push(c); u = {}, x.push(c);
let p = e(h, function(u, f) { let l = e(h, function(s, f) {
let b; let b;
return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b; return I(v, s) ? (b = v[s], delete v[s]) : b = f(), u[s] = b, b;
}); });
x.pop(), Array.isArray(p) || (p = [p]); x.pop(), Array.isArray(l) || (l = [l]);
let m = document.createComment(""); let m = document.createComment("");
p.push(m), n.after(...p); l.push(m), n.after(...l);
let y; let k;
for (; (y = m.nextSibling) && y !== r; ) for (; (k = m.nextSibling) && k !== r; )
y.remove(); k.remove();
m.remove(), n.isConnected && St(c.host()); 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 St(t) { function yt(t) {
!t || !t[R] || (requestIdleCallback || setTimeout)(function() { !t || !t[D] || (requestIdleCallback || setTimeout)(function() {
t[R] = t[R].filter(([e, n]) => n.isConnected ? !0 : (L(...e), !1)); t[D] = t[D].filter(([e, n]) => n.isConnected ? !0 : (R(...e), !1));
}); });
} }
var Ot = { var At = {
_set(t) { _set(t) {
this.value = t; this.value = t;
} }
}; };
function Ct(t) { function Ot(t) {
return function(e, n) { return function(e, n) {
let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = ft(r, e.getAttribute(n), Ot); let r = (...c) => c.length ? e.setAttribute(n, ...c) : V(r), o = ft(r, e.getAttribute(n), At);
return t[n] = o, o; return t[n] = o, o;
}; };
} }
var G = "__dde_attributes"; var G = "__dde_attributes";
E.observedAttributes = function(t) { E.observedAttributes = function(t) {
let e = t[G] = {}, n = F(t, Ct(e)); let e = t[G] = {}, n = W(t, Ot(e));
return w.attributeChanged(function({ detail: o }) { return w.attributeChanged(function({ detail: o }) {
/*! This maps attributes to signals (`S.observedAttributes`). /*! This maps attributes to signals (`S.observedAttributes`).
* Investigate `__dde_attributes` key of the element.*/ * Investigate `__dde_attributes` key of the element.*/
let [c, i] = o, a = this[G][c]; let [c, u] = o, a = this[G][c];
if (a) return E.action(a, "_set", i); if (a) return E.action(a, "_set", u);
})(t), w.disconnected(function() { })(t), w.disconnected(function() {
/*! This removes all signals mapped to attributes (`S.observedAttributes`). /*! This removes all signals mapped to attributes (`S.observedAttributes`).
* Investigate `__dde_attributes` key of the element.*/ * Investigate `__dde_attributes` key of the element.*/
@ -547,40 +539,40 @@ E.observedAttributes = function(t) {
})(t), n; })(t), n;
}; };
var st = { var st = {
isSignal: z, isSignal: U,
processReactiveAttribute(t, e, n, r) { processReactiveAttribute(t, e, n, r) {
if (!z(n)) return n; if (!U(n)) return n;
let o = (c) => { let o = (c) => {
if (!t.isConnected) if (!t.isConnected)
return L(n, o); return R(n, o);
r(e, c); 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) { function ut(t, e, ...n) {
let { current: r } = x; let { current: r } = x;
r.prevent || r.host(function(o) { r.prevent || r.host(function(o) {
o[R] || (o[R] = [], w.disconnected( o[D] || (o[D] = [], w.disconnected(
() => ( () => (
/*! /*!
* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?). * Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
* You can investigate the `__dde_reactive` key of the element. * You can investigate the `__dde_reactive` key of the element.
* */ * */
o[R].forEach(([[c, i]]) => L(c, i, c[l] && c[l].host && c[l].host() === o)) o[D].forEach(([[c, u]]) => R(c, u, c[p] && c[p].host && c[p].host() === o))
) )
)(o)), o[R].push([[t, e], ...n]); )(o)), o[D].push([[t, e], ...n]);
}); });
} }
function it(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); return ft(r, e, n, t);
} }
var Dt = Object.assign(/* @__PURE__ */ Object.create(null), { var St = Object.assign(/* @__PURE__ */ Object.create(null), {
stopPropagation() { stopPropagation() {
this.skip = !0; this.skip = !0;
} }
}), V = class extends Error { }), Q = class extends Error {
constructor() { constructor() {
super(); super();
let [e, ...n] = this.stack.split(` let [e, ...n] = this.stack.split(`
@ -593,76 +585,76 @@ function ft(t, e, n, r = !1) {
X(n) !== "[object Object]" && (n = {}); X(n) !== "[object Object]" && (n = {});
let { onclear: c } = E.symbols; let { onclear: c } = E.symbols;
n[c] && (o.push(n[c]), delete n[c]); n[c] && (o.push(n[c]), delete n[c]);
let { host: i } = x; let { host: u } = x;
return Reflect.defineProperty(t, l, { return Reflect.defineProperty(t, p, {
value: { value: {
value: e, value: e,
actions: n, actions: n,
onclear: o, onclear: o,
host: i, host: u,
listeners: /* @__PURE__ */ new Set(), listeners: /* @__PURE__ */ new Set(),
defined: new V().stack, defined: new Q().stack,
readonly: r readonly: r
}, },
enumerable: !1, enumerable: !1,
writable: !1, writable: !1,
configurable: !0 configurable: !0
}), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], Dt), t; }), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], St), t;
} }
function Rt() { function Ct() {
return H[H.length - 1]; return z[z.length - 1];
} }
function K(t) { function V(t) {
if (!t[l]) return; if (!t[p]) return;
let { value: e, listeners: n } = t[l], r = Rt(); let { value: e, listeners: n } = t[p], r = Ct();
return r && n.add(r), g.has(r) && g.get(r).add(t), e; return r && n.add(r), g.has(r) && g.get(r).add(t), e;
} }
function at(t, e, n) { function at(t, e, n) {
if (!t[l]) return; if (!t[p]) return;
let r = t[l]; let r = t[p];
if (!(!n && r.value === e)) if (!(!n && r.value === e))
return r.value = e, r.listeners.forEach((o) => o(e)), e; return r.value = e, r.listeners.forEach((o) => o(e)), e;
} }
function Q(t, e) { function K(t, e) {
if (t[l]) if (t[p])
return t[l].listeners.add(e); return t[p].listeners.add(e);
} }
function L(t, e, n) { function R(t, e, n) {
let r = t[l]; let r = t[p];
if (!r) return; if (!r) return;
let o = r.listeners.delete(e); let o = r.listeners.delete(e);
if (n && !r.listeners.size) { if (n && !r.listeners.size) {
if (E.clear(t), !g.has(r)) return o; if (E.clear(t), !g.has(r)) return o;
let c = g.get(r); let c = g.get(r);
if (!g.has(c)) return o; if (!g.has(c)) return o;
g.get(c).forEach((i) => L(i, c, !0)); g.get(c).forEach((u) => R(u, c, !0));
} }
return o; return o;
} }
// signals.js // signals.js
B(st); H(st);
export { export {
E as S, E as S,
j as assign, q as assign,
nt as assignAttribute, nt as assignAttribute,
Mt as asyncQueueAdd,
lt as chainableAppend, lt as chainableAppend,
gt as classListDeclarative, ht as classListDeclarative,
ht as cn, M as createElement,
P as createElement, jt as createElementNS,
qt as createElementNS, It as customElementRender,
Jt as customElementRender, xt as customElementWithDDE,
yt as customElementWithDDE, Gt as dispatchEvent,
Kt as dispatchEvent, M as el,
P as el, jt as elNS,
qt as elNS, bt as elementAttribute,
vt as elementAttribute, U as isSignal,
z as isSignal, xt as lifecyclesToEvents,
yt as lifecyclesToEvents, wt as observedAttributes,
_t as observedAttributes,
w as on, w as on,
B as registerReactivity, H as registerReactivity,
x as scope, x as scope,
E as signal, E as signal,
Wt as simulateSlots Pt as simulateSlots
}; };

19
dist/esm.d.ts vendored
View File

@ -72,7 +72,7 @@ export function el<
TAG extends keyof ExtendedHTMLElementTagNameMap, TAG extends keyof ExtendedHTMLElementTagNameMap,
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeString, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable,
...addons: ddeElementAddon< ...addons: ddeElementAddon<
ExtendedHTMLElementTagNameMap[NoInfer<TAG>] ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
>[], // TODO: for now addons must have the same element >[], // TODO: for now addons must have the same element
@ -82,7 +82,7 @@ export function el(
): ddeDocumentFragment ): ddeDocumentFragment
export function el( export function el(
tag_name: string, tag_name: string,
attrs?: ElementAttributes<HTMLElement> | ddeString, attrs?: ElementAttributes<HTMLElement> | ddeStringable,
...addons: ddeElementAddon<HTMLElement>[] ...addons: ddeElementAddon<HTMLElement>[]
): ddeHTMLElement ): ddeHTMLElement
@ -90,7 +90,7 @@ export function el<
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
>( >(
component: C, component: C,
attrs?: Parameters<C>[0] | ddeString, attrs?: Parameters<C>[0] | ddeStringable,
...addons: ddeElementAddon<ReturnType<C>>[] ...addons: ddeElementAddon<ReturnType<C>>[]
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
? ReturnType<C> ? ReturnType<C>
@ -104,7 +104,7 @@ export function elNS(
EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<NoInfer<EL>> | ddeString, attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable,
...addons: ddeElementAddon<NoInfer<EL>>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement )=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
export function elNS( export function elNS(
@ -114,7 +114,7 @@ export function elNS(
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ), EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ddeString | Partial<{ attrs?: ddeStringable | Partial<{
[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
}>, }>,
...addons: ddeElementAddon<NoInfer<EL>>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
@ -123,20 +123,15 @@ export function elNS(
namespace: string namespace: string
): ( ): (
tag_name: string, tag_name: string,
attrs?: string | ddeString | Record<string, any>, attrs?: string | ddeStringable | Record<string, any>,
...addons: ddeElementAddon<SupportedElement>[] ...addons: ddeElementAddon<SupportedElement>[]
)=> SupportedElement )=> SupportedElement
export { elNS as createElementNS } export { elNS as createElementNS }
export function chainableAppend<EL extends SupportedElement>(el: EL): EL; export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
/**
* Mapper function (optional). Pass for coppying attributes, this is NOT implemented by {@link simulateSlots} itself!
* */
type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void;
/** Simulate slots for ddeComponents */ /** Simulate slots for ddeComponents */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>( export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
root: EL, root: EL,
mapper?: simulateSlotsMapper
): EL ): EL
/** /**
* Simulate slots in Custom Elements without using `shadowRoot`. * Simulate slots in Custom Elements without using `shadowRoot`.
@ -145,7 +140,7 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>( export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
el: HTMLElement, el: HTMLElement,
body: EL, mapper?: simulateSlotsMapper body: EL,
): EL ): EL
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):

433
dist/esm.js vendored
View File

@ -1,5 +1,5 @@
// src/signals-common.js // src/signals-common.js
var m = { var C = {
isSignal(t) { isSignal(t) {
return !1; return !1;
}, },
@ -7,19 +7,18 @@ var m = {
return n; return n;
} }
}; };
function G(t, e = !0) { function Z(t, e = !0) {
return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t); return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t);
} }
function L(t) { function S(t) {
return m.isPrototypeOf(t) && t !== m ? t : m; return C.isPrototypeOf(t) && t !== C ? t : C;
} }
// src/helpers.js // src/helpers.js
var q = (...t) => Object.prototype.hasOwnProperty.call(...t);
function x(t) { function x(t) {
return typeof t > "u"; return typeof t > "u";
} }
function N(t, e) { function L(t, e) {
if (!t || !(t instanceof AbortSignal)) if (!t || !(t instanceof AbortSignal))
return !0; return !0;
if (!t.aborted) if (!t.aborted)
@ -27,46 +26,51 @@ function N(t, e) {
t.removeEventListener("abort", e); t.removeEventListener("abort", e);
}; };
} }
function F(t, e) { function W(t, e) {
let { observedAttributes: n = [] } = t.constructor; let { observedAttributes: n = [] } = t.constructor;
return n.reduce(function(r, o) { return n.reduce(function(r, o) {
return r[V(o)] = e(t, o), r; return r[G(o)] = e(t, o), r;
}, {}); }, {});
} }
function V(t) { function G(t) {
return t.replace(/-./g, (e) => e[1].toUpperCase()); return t.replace(/-./g, (e) => e[1].toUpperCase());
} }
// src/dom-common.js // src/dom-common.js
var a = { var f = {
setDeleteAttr: J, setDeleteAttr: Q,
ssr: "", ssr: "",
D: globalThis.document, D: globalThis.document,
F: globalThis.DocumentFragment, F: globalThis.DocumentFragment,
H: globalThis.HTMLElement, H: globalThis.HTMLElement,
S: globalThis.SVGElement, S: globalThis.SVGElement,
M: globalThis.MutationObserver M: globalThis.MutationObserver,
qa: (t) => t,
qw: () => Promise.resolve()
}; };
function J(t, e, n) { function Q(t, e, n) {
if (Reflect.set(t, e, n), !!x(n)) { if (Reflect.set(t, e, n), !!x(n)) {
if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined") if (Reflect.deleteProperty(t, e), t instanceof f.H && t.getAttribute(e) === "undefined")
return t.removeAttribute(e); return t.removeAttribute(e);
if (Reflect.get(t, e) === "undefined") if (Reflect.get(t, e) === "undefined")
return Reflect.set(t, e, ""); return Reflect.set(t, e, "");
} }
} }
var w = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged"; var w = "__dde_lifecyclesToEvents", v = "dde:connected", m = "dde:disconnected", O = "dde:attributeChanged";
// src/dom.js // src/dom.js
var v = [{ function dt(t) {
return f.qa(t);
}
var g = [{
get scope() { get scope() {
return a.D.body; return f.D.body;
}, },
host: (t) => t ? t(a.D.body) : a.D.body, host: (t) => t ? t(f.D.body) : f.D.body,
prevent: !0 prevent: !0
}], S = { }], D = {
get current() { get current() {
return v[v.length - 1]; return g[g.length - 1];
}, },
get host() { get host() {
return this.current.host; return this.current.host;
@ -76,171 +80,158 @@ var v = [{
return t.prevent = !0, t; return t.prevent = !0, t;
}, },
get state() { get state() {
return [...v]; return [...g];
}, },
push(t = {}) { push(t = {}) {
return v.push(Object.assign({}, this.current, { prevent: !1 }, t)); return g.push(Object.assign({}, this.current, { prevent: !1 }, t));
}, },
pushRoot() { pushRoot() {
return v.push(v[0]); return g.push(g[0]);
}, },
pop() { pop() {
if (v.length !== 1) if (g.length !== 1)
return v.pop(); return g.pop();
} }
}; };
function $(...t) { function q(...t) {
return this.appendOriginal(...t), this; return this.appendOriginal(...t), this;
} }
function K(t) { function V(t) {
return t.append === $ || (t.appendOriginal = t.append, t.append = $), t; return t.append === q || (t.appendOriginal = t.append, t.append = q), t;
} }
var T; var T;
function j(t, e, ...n) { function P(t, e, ...n) {
let r = L(this), o = 0, c, f; let r = S(this), o = 0, c, a;
switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
case typeof t == "function": { case typeof t == "function": {
o = 1; o = 1;
let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(f)), void 0) : f; let d = (...h) => h.length ? (o === 1 ? n.unshift(...h) : h.forEach((E) => E(a)), void 0) : a;
S.push({ scope: t, host: d }), c = t(e || void 0); D.push({ scope: t, host: d }), c = t(e || void 0);
let p = c instanceof a.F; let p = c instanceof f.F;
if (c.nodeName === "#comment") break; if (c.nodeName === "#comment") break;
let b = j.mark({ let b = P.mark({
type: "component", type: "component",
name: t.name, name: t.name,
host: p ? "this" : "parentElement" host: p ? "this" : "parentElement"
}); });
c.prepend(b), p && (f = b); c.prepend(b), p && (a = b);
break; break;
} }
case t === "#text": case t === "#text":
c = O.call(this, a.D.createTextNode(""), e); c = R.call(this, f.D.createTextNode(""), e);
break; break;
case (t === "<>" || !t): case (t === "<>" || !t):
c = O.call(this, a.D.createDocumentFragment(), e); c = R.call(this, f.D.createDocumentFragment(), e);
break; break;
case !!T: case !!T:
c = O.call(this, a.D.createElementNS(T, t), e); c = R.call(this, f.D.createElementNS(T, t), e);
break; break;
case !c: case !c:
c = O.call(this, a.D.createElement(t), e); c = R.call(this, f.D.createElement(t), e);
} }
return K(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c; return V(c), a || (a = c), n.forEach((d) => d(a)), o && D.pop(), o = 2, c;
} }
j.mark = function(t, e = !1) { P.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`); let n = e ? "" : "/", r = f.D.createComment(`<dde:mark ${t}${f.ssr}${n}>`);
return e && (r.end = a.D.createComment("</dde:mark>")), r; return e && (r.end = f.D.createComment("</dde:mark>")), r;
}; };
function bt(t, e, n) { function pt(t) {
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);
if (t.append = new Proxy(t.append, {
apply(f, d, p) {
if (p[0] === e) return f.apply(t, p);
if (!p.length) return t;
let b = a.D.createDocumentFragment();
for (let l of p) {
if (!l || !l.slot) {
c && b.append(l);
continue;
}
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;
}
}), t !== e) {
let f = Array.from(t.childNodes);
f.forEach((d) => d.remove()), t.append(...f);
}
return e;
}
function Q(...t) {
return t.filter(Boolean).join(" ");
}
function X(t, e, n) {
n && n(t, e);
try {
t.replaceWith(O(e, {
className: Q(e.className, t.className),
dataset: { ...t.dataset }
}));
} catch {
t.replaceWith(e);
}
}
function gt(t) {
let e = this; let e = this;
return function(...r) { return function(...r) {
T = t; T = t;
let o = j.call(e, ...r); let o = P.call(e, ...r);
return T = void 0, o; return T = void 0, o;
}; };
} }
var P = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: U } = a; function ht(t, e = t) {
function O(t, ...e) { let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries(
if (!e.length) return t; Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c])
P.set(t, B(t, this)); );
for (let [n, r] of Object.entries(Object.assign({}, ...e))) if (t.append = new Proxy(t.append, {
z.call(this, t, n, r); apply(c, a, d) {
return P.delete(t), t; if (d[0] === e) return c.apply(t, d);
for (let p of d) {
let b = (p.slot || "") + n;
try {
K(p, "remove", "slot");
} catch {
}
let h = o[b];
if (!h) return;
h.name.startsWith(r) || (h.childNodes.forEach((E) => E.remove()), h.name = r + b), h.append(p);
}
return t.append = c, t;
}
}), t !== e) {
let c = Array.from(t.childNodes);
t.append(...c);
}
return e;
} }
function z(t, e, n) { var N = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: $ } = f;
let { setRemoveAttr: r, s: o } = B(t, this), c = this; function R(t, ...e) {
if (!e.length) return t;
N.set(t, H(t, this));
for (let [n, r] of Object.entries(Object.assign({}, ...e)))
U.call(this, t, n, r);
return N.delete(t), t;
}
function U(t, e, n) {
let { setRemoveAttr: r, s: o } = H(t, this), c = this;
n = o.processReactiveAttribute( n = o.processReactiveAttribute(
t, t,
e, e,
n, n,
(d, p) => z.call(c, t, d, p) (d, p) => U.call(c, t, d, p)
); );
let [f] = e; let [a] = e;
if (f === "=") return r(e.slice(1), n); if (a === "=") return r(e.slice(1), n);
if (f === ".") return H(t, e.slice(1), n); if (a === ".") return F(t, e.slice(1), n);
if (/(aria|data)([A-Z])/.test(e)) if (/(aria|data)([A-Z])/.test(e))
return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n); return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n);
switch (e === "className" && (e = "class"), e) { switch (e === "className" && (e = "class"), e) {
case "xlink:href": case "xlink:href":
return r(e, n, "http://www.w3.org/1999/xlink"); return r(e, n, "http://www.w3.org/1999/xlink");
case "textContent": case "textContent":
return U(t, e, n); return $(t, e, n);
case "style": case "style":
if (typeof n != "object") break; if (typeof n != "object") break;
/* falls through */ /* falls through */
case "dataset": case "dataset":
return M(o, n, H.bind(null, t[e])); return M(o, n, F.bind(null, t[e]));
case "ariaset": case "ariaset":
return M(o, n, (d, p) => r("aria-" + d, p)); return M(o, n, (d, p) => r("aria-" + d, p));
case "classList": case "classList":
return Y.call(c, t, n); return J.call(c, t, n);
} }
return et(t, e) ? U(t, e, n) : r(e, n); return X(t, e) ? $(t, e, n) : r(e, n);
} }
function B(t, e) { function H(t, e) {
if (P.has(t)) return P.get(t); if (N.has(t)) return N.get(t);
let r = (t instanceof a.S ? rt : nt).bind(null, t, "Attribute"), o = L(e); let r = (t instanceof f.S ? tt : Y).bind(null, t, "Attribute"), o = S(e);
return { setRemoveAttr: r, s: o }; return { setRemoveAttr: r, s: o };
} }
function Y(t, e) { function J(t, e) {
let n = L(this); let n = S(this);
return M( return M(
n, n,
e, e,
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
), t; ), t;
} }
function tt(t, e, n, r) { function K(t, e, n, r) {
return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); return t instanceof f.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
} }
function et(t, e) { function X(t, e) {
if (!(e in t)) return !1; if (!(e in t)) return !1;
let n = I(t, e); let n = z(t, e);
return !x(n.set); return !x(n.set);
} }
function I(t, e) { function z(t, e) {
if (t = Object.getPrototypeOf(t), !t) return {}; if (t = Object.getPrototypeOf(t), !t) return {};
let n = Object.getOwnPropertyDescriptor(t, e); let n = Object.getOwnPropertyDescriptor(t, e);
return n || I(t, e); return n || z(t, e);
} }
function M(t, e, n) { function M(t, e, n) {
if (!(typeof e != "object" || e === null)) if (!(typeof e != "object" || e === null))
@ -248,137 +239,137 @@ function M(t, e, n) {
o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));
}); });
} }
function nt(t, e, n, r) { function Y(t, e, n, r) {
return t[(x(r) ? "remove" : "set") + e](n, r); return t[(x(r) ? "remove" : "set") + e](n, r);
} }
function rt(t, e, n, r, o = null) { function tt(t, e, n, r, o = null) {
return t[(x(r) ? "remove" : "set") + e + "NS"](o, n, r); return t[(x(r) ? "remove" : "set") + e + "NS"](o, n, r);
} }
function H(t, e, n) { function F(t, e, n) {
if (Reflect.set(t, e, n), !!x(n)) if (Reflect.set(t, e, n), !!x(n))
return Reflect.deleteProperty(t, e); return Reflect.deleteProperty(t, e);
} }
// src/events-observer.js // src/events-observer.js
var A = a.M ? ot() : new Proxy({}, { var y = f.M ? et() : new Proxy({}, {
get() { get() {
return () => { return () => {
}; };
} }
}); });
function ot() { function et() {
let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) { let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
for (let s of u) for (let i of u)
if (s.type === "childList") { if (i.type === "childList") {
if (l(s.addedNodes, !0)) { if (h(i.addedNodes, !0)) {
i(); s();
continue; continue;
} }
E(s.removedNodes, !0) && i(); E(i.removedNodes, !0) && s();
} }
}, r = new a.M(n(d)); }, r = new f.M(n(d));
return { return {
observe(i) { observe(s) {
let u = new a.M(n(() => { let u = new f.M(n(() => {
})); }));
return u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect(); return u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();
}, },
onConnected(i, u) { onConnected(s, u) {
f(); a();
let s = c(i); let i = c(s);
s.connected.has(u) || (s.connected.add(u), s.length_c += 1); i.connected.has(u) || (i.connected.add(u), i.length_c += 1);
}, },
offConnected(i, u) { offConnected(s, u) {
if (!t.has(i)) return; if (!t.has(s)) return;
let s = t.get(i); let i = t.get(s);
s.connected.has(u) && (s.connected.delete(u), s.length_c -= 1, o(i, s)); i.connected.has(u) && (i.connected.delete(u), i.length_c -= 1, o(s, i));
}, },
onDisconnected(i, u) { onDisconnected(s, u) {
f(); a();
let s = c(i); let i = c(s);
s.disconnected.has(u) || (s.disconnected.add(u), s.length_d += 1); i.disconnected.has(u) || (i.disconnected.add(u), i.length_d += 1);
}, },
offDisconnected(i, u) { offDisconnected(s, u) {
if (!t.has(i)) return; if (!t.has(s)) return;
let s = t.get(i); let i = t.get(s);
s.disconnected.has(u) && (s.disconnected.delete(u), s.length_d -= 1, o(i, s)); i.disconnected.has(u) && (i.disconnected.delete(u), i.length_d -= 1, o(s, i));
} }
}; };
function o(i, u) { function o(s, u) {
u.length_c || u.length_d || (t.delete(i), d()); u.length_c || u.length_d || (t.delete(s), d());
} }
function c(i) { function c(s) {
if (t.has(i)) return t.get(i); if (t.has(s)) return t.get(s);
let u = { let u = {
connected: /* @__PURE__ */ new WeakSet(), connected: /* @__PURE__ */ new WeakSet(),
length_c: 0, length_c: 0,
disconnected: /* @__PURE__ */ new WeakSet(), disconnected: /* @__PURE__ */ new WeakSet(),
length_d: 0 length_d: 0
}; };
return t.set(i, u), u; return t.set(s, u), u;
} }
function f() { function a() {
e || (e = !0, r.observe(a.D.body, { childList: !0, subtree: !0 })); e || (e = !0, r.observe(f.D.body, { childList: !0, subtree: !0 }));
} }
function d() { function d() {
!e || t.size || (e = !1, r.disconnect()); !e || t.size || (e = !1, r.disconnect());
} }
function p() { function p() {
return new Promise(function(i) { return new Promise(function(s) {
(requestIdleCallback || requestAnimationFrame)(i); (requestIdleCallback || requestAnimationFrame)(s);
}); });
} }
async function b(i) { async function b(s) {
t.size > 30 && await p(); t.size > 30 && await p();
let u = []; let u = [];
if (!(i instanceof Node)) return u; if (!(s instanceof Node)) return u;
for (let s of t.keys()) for (let i of t.keys())
s === i || !(s instanceof Node) || i.contains(s) && u.push(s); i === s || !(i instanceof Node) || s.contains(i) && u.push(i);
return u; return u;
} }
function l(i, u) { function h(s, u) {
let s = !1; let i = !1;
for (let h of i) { for (let l of s) {
if (u && b(h).then(l), !t.has(h)) continue; if (u && b(l).then(h), !t.has(l)) continue;
let C = t.get(h); let A = t.get(l);
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); 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 s; return i;
} }
function E(i, u) { function E(s, u) {
let s = !1; let i = !1;
for (let h of i) for (let l of s)
u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0); u && b(l).then(E), !(!t.has(l) || !t.get(l).length_d) && ((globalThis.queueMicrotask || setTimeout)(I(l)), i = !0);
return s; return i;
} }
function _(i) { function I(s) {
return () => { return () => {
i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i)); s.isConnected || (s.dispatchEvent(new Event(m)), t.delete(s));
}; };
} }
} }
// src/customElement.js // src/customElement.js
function mt(t, e, n, r = it) { function mt(t, e, n, r = rt) {
S.push({ D.push({
scope: t, scope: t,
host: (...f) => f.length ? f.forEach((d) => d(t)) : t host: (...a) => a.length ? a.forEach((d) => d(t)) : t
}), typeof r == "function" && (r = r.call(t, t)); }), typeof r == "function" && (r = r.call(t, t));
let o = t[w]; let o = t[w];
o || ct(t); o || nt(t);
let c = n.call(t, r); let c = n.call(t, r);
return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, A.observe(e), { once: !0 }), S.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 ct(t) { function nt(t) {
return k(t.prototype, "connectedCallback", function(e, n, r) { return k(t.prototype, "connectedCallback", function(e, n, r) {
e.apply(n, r), n.dispatchEvent(new Event(g)); e.apply(n, r), n.dispatchEvent(new Event(v));
}), k(t.prototype, "disconnectedCallback", function(e, n, r) { }), k(t.prototype, "disconnectedCallback", function(e, n, r) {
e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
() => !n.isConnected && n.dispatchEvent(new Event(y)) () => !n.isConnected && n.dispatchEvent(new Event(m))
); );
}), k(t.prototype, "attributeChangedCallback", function(e, n, r) { }), k(t.prototype, "attributeChangedCallback", function(e, n, r) {
let [o, , c] = r; let [o, , c] = r;
n.dispatchEvent(new CustomEvent(D, { n.dispatchEvent(new CustomEvent(O, {
detail: [o, c] detail: [o, c]
})), e.apply(n, r); })), e.apply(n, r);
}), t.prototype[w] = !0, t; }), t.prototype[w] = !0, t;
@ -387,71 +378,71 @@ function k(t, e, n) {
t[e] = new Proxy(t[e] || (() => { t[e] = new Proxy(t[e] || (() => {
}), { apply: n }); }), { apply: n });
} }
function it(t) { function rt(t) {
return F(t, (e, n) => e.getAttribute(n)); return W(t, (e, n) => e.getAttribute(n));
} }
// src/events.js // src/events.js
function Rt(t, e, n) { function Ot(t, e, n) {
return e || (e = {}), function(o, ...c) { return e || (e = {}), function(o, ...c) {
n && (c.unshift(o), o = typeof n == "function" ? n() : n); 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); let a = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
return o.dispatchEvent(f); return o.dispatchEvent(a);
}; };
} }
function R(t, e, n) { function _(t, e, n) {
return function(o) { return function(o) {
return o.addEventListener(t, e, n), o; return o.addEventListener(t, e, n), o;
}; };
} }
var Z = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
R.connected = function(t, e) { _.connected = function(t, e) {
return e = Z(e), function(r) { return e = B(e), function(r) {
return r.addEventListener(g, t, e), r[w] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.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);
}; };
}; };
R.disconnected = function(t, e) { _.disconnected = function(t, e) {
return e = Z(e), function(r) { return e = B(e), function(r) {
return r.addEventListener(y, t, e), r[w] || N(e.signal, () => A.offDisconnected(r, t)) && A.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 W = /* @__PURE__ */ new WeakMap(); var j = /* @__PURE__ */ new WeakMap();
R.disconnectedAsAbort = function(t) { _.disconnectedAsAbort = function(t) {
if (W.has(t)) return W.get(t); if (j.has(t)) return j.get(t);
let e = new AbortController(); let e = new AbortController();
return W.set(t, e), t(R.disconnected(() => e.abort())), e; return j.set(t, e), t(_.disconnected(() => e.abort())), e;
}; };
var st = /* @__PURE__ */ new WeakSet(); var ot = /* @__PURE__ */ new WeakSet();
R.attributeChanged = function(t, e) { _.attributeChanged = function(t, e) {
return typeof e != "object" && (e = {}), function(r) { return typeof e != "object" && (e = {}), function(r) {
if (r.addEventListener(D, t, e), r[w] || st.has(r) || !a.M) return r; if (r.addEventListener(O, t, e), r[w] || ot.has(r) || !f.M) return r;
let o = new a.M(function(f) { let o = new f.M(function(a) {
for (let { attributeName: d, target: p } of f) for (let { attributeName: d, target: p } of a)
p.dispatchEvent( p.dispatchEvent(
new CustomEvent(D, { detail: [d, p.getAttribute(d)] }) new CustomEvent(O, { detail: [d, p.getAttribute(d)] })
); );
}); });
return N(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; return L(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
}; };
}; };
export { export {
O as assign, R as assign,
z as assignAttribute, U as assignAttribute,
K as chainableAppend, dt as asyncQueueAdd,
Y as classListDeclarative, V as chainableAppend,
Q as cn, J as classListDeclarative,
j as createElement, P as createElement,
gt as createElementNS, pt as createElementNS,
mt as customElementRender, mt as customElementRender,
ct as customElementWithDDE, nt as customElementWithDDE,
Rt as dispatchEvent, Ot as dispatchEvent,
j as el, P as el,
gt as elNS, pt as elNS,
tt as elementAttribute, K as elementAttribute,
ct as lifecyclesToEvents, nt as lifecyclesToEvents,
it as observedAttributes, rt as observedAttributes,
R as on, _ as on,
G as registerReactivity, Z as registerReactivity,
S as scope, D as scope,
bt as simulateSlots ht as simulateSlots
}; };

2
docs/components/examples/signals/dom-attrs.js
View File

@ -4,7 +4,7 @@ const count= S(0);
import { el } from "deka-dom-el"; import { el } from "deka-dom-el";
document.body.append( document.body.append(
el("p", S(()=> "Currently: "+count())), el("p", S(()=> "Currently: "+count())),
el("p", { classList: { red: S(()=> count()%2 === 0) }, dataset: { count }, textContent: "Attributes example" }) el("p", { classList: { red: S(()=> count()%2 === 0) }, dataset: { count }, textContent: "Attributes example" }),
); );
document.head.append( document.head.append(
el("style", ".red { color: red; }") el("style", ".red { color: red; }")

2
docs/global.css.js
View File

@ -103,7 +103,7 @@ main{
[main-start] min(var(--body-max-width), 90%) [main-end] [main-start] min(var(--body-max-width), 90%) [main-end]
1fr [full-main-end]; 1fr [full-main-end];
} }
main > *{ main > *, main slot > *{
grid-column: main; grid-column: main;
} }
.icon { .icon {

2
docs/index.html.js
View File

@ -36,7 +36,7 @@ export function page({ pkg, info }){
el(code, { src: fileURL("./components/examples/introducing/3ps.js"), page_id }), el(code, { src: fileURL("./components/examples/introducing/3ps.js"), page_id }),
el("p").append(...T` el("p").append(...T`
As we can see, in the code at location “A” we define ${el("em", t`how to react`)} when the function As we can see, in the code at location “A” we define ${el("em", t`how to react`)} when the function
is called with any event as an argument. At that moment, we ${el("em", t`don't care who/why/how`)} is called with any event as an argument. At that moment, we ${el("em", t`don’t care who/why/how`)}
the function was called. Similarly, at point “B”, we reference to a function to be called on the event the function was called. Similarly, at point “B”, we reference to a function to be called on the event
${el("em", t`without caring`)} what the function will do at that time. Finally, at point “C”, we tell ${el("em", t`without caring`)} what the function will do at that time. Finally, at point “C”, we tell
the application that a change has occurred, in the input, and we ${el("em", t`don't care if/how someone`)} the application that a change has occurred, in the input, and we ${el("em", t`don't care if/how someone`)}

4
examples/components/webComponent.js
View File

@ -34,7 +34,9 @@ export class CustomHTMLTestElement extends HTMLElement{
text(test), text(test),
text(name), text(name),
text(preName), text(preName),
el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName("Ahoj") }) el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName("Ahoj") }),
" | ",
el("slot", { className: "test", name: "test" }),
); );
} }
test= "A"; test= "A";

5
examples/index.js
View File

@ -15,7 +15,10 @@ document.body.append(
el("h1", "Experiments:"), el("h1", "Experiments:"),
el(fullNameComponent), el(fullNameComponent),
el(todosComponent), el(todosComponent),
el(CustomHTMLTestElement.tagName, { name: "attr" }), el(CustomHTMLTestElement.tagName, { name: "attr" }).append(
el("span", { textContent: "test", slot: "test" }),
el("span", { textContent: "test", slot: "test" }),
),
el(thirdParty), el(thirdParty),
el(CustomSlottingHTMLElement.tagName, { onclick: ()=> toggle(!toggle()) }).append( el(CustomSlottingHTMLElement.tagName, { onclick: ()=> toggle(!toggle()) }).append(
el("strong", { slot: "name", textContent: "Honzo" }), el("strong", { slot: "name", textContent: "Honzo" }),

19
index.d.ts vendored
View File

@ -72,7 +72,7 @@ export function el<
TAG extends keyof ExtendedHTMLElementTagNameMap, TAG extends keyof ExtendedHTMLElementTagNameMap,
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeString, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable,
...addons: ddeElementAddon< ...addons: ddeElementAddon<
ExtendedHTMLElementTagNameMap[NoInfer<TAG>] ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
>[], // TODO: for now addons must have the same element >[], // TODO: for now addons must have the same element
@ -82,7 +82,7 @@ export function el(
): ddeDocumentFragment ): ddeDocumentFragment
export function el( export function el(
tag_name: string, tag_name: string,
attrs?: ElementAttributes<HTMLElement> | ddeString, attrs?: ElementAttributes<HTMLElement> | ddeStringable,
...addons: ddeElementAddon<HTMLElement>[] ...addons: ddeElementAddon<HTMLElement>[]
): ddeHTMLElement ): ddeHTMLElement
@ -90,7 +90,7 @@ export function el<
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
>( >(
component: C, component: C,
attrs?: Parameters<C>[0] | ddeString, attrs?: Parameters<C>[0] | ddeStringable,
...addons: ddeElementAddon<ReturnType<C>>[] ...addons: ddeElementAddon<ReturnType<C>>[]
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
? ReturnType<C> ? ReturnType<C>
@ -104,7 +104,7 @@ export function elNS(
EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<NoInfer<EL>> | ddeString, attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable,
...addons: ddeElementAddon<NoInfer<EL>>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement )=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
export function elNS( export function elNS(
@ -114,7 +114,7 @@ export function elNS(
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ), EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ddeString | Partial<{ attrs?: ddeStringable | Partial<{
[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
}>, }>,
...addons: ddeElementAddon<NoInfer<EL>>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
@ -123,20 +123,15 @@ export function elNS(
namespace: string namespace: string
): ( ): (
tag_name: string, tag_name: string,
attrs?: string | ddeString | Record<string, any>, attrs?: string | ddeStringable | Record<string, any>,
...addons: ddeElementAddon<SupportedElement>[] ...addons: ddeElementAddon<SupportedElement>[]
)=> SupportedElement )=> SupportedElement
export { elNS as createElementNS } export { elNS as createElementNS }
export function chainableAppend<EL extends SupportedElement>(el: EL): EL; export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
/**
* Mapper function (optional). Pass for coppying attributes, this is NOT implemented by {@link simulateSlots} itself!
* */
type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void;
/** Simulate slots for ddeComponents */ /** Simulate slots for ddeComponents */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>( export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
root: EL, root: EL,
mapper?: simulateSlotsMapper
): EL ): EL
/** /**
* Simulate slots in Custom Elements without using `shadowRoot`. * Simulate slots in Custom Elements without using `shadowRoot`.
@ -145,7 +140,7 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>( export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
el: HTMLElement, el: HTMLElement,
body: EL, mapper?: simulateSlotsMapper body: EL,
): EL ): EL
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):

6
jsdom.js
View File

@ -1,6 +1,12 @@
//TODO: https://www.npmjs.com/package/html-element //TODO: https://www.npmjs.com/package/html-element
import { enviroment as env } from './src/dom-common.js'; import { enviroment as env } from './src/dom-common.js';
env.ssr= " ssr"; env.ssr= " ssr";
const wa_store= new Set();
env.qa= function(promise){ wa_store.add(promise); return promise; };
env.qw= function(){ return Promise.allSettled(Array.from(wa_store)).then(()=> wa_store.clear()); };
export const asyncQueue= env.ww;
const { setDeleteAttr }= env; const { setDeleteAttr }= env;
/** @param {HTMLElement} obj */ /** @param {HTMLElement} obj */
env.setDeleteAttr= function(obj, prop, value){ env.setDeleteAttr= function(obj, prop, value){

2
src/dom-common.js
View File

@ -6,6 +6,8 @@ export const enviroment= {
H: globalThis.HTMLElement, H: globalThis.HTMLElement,
S: globalThis.SVGElement, S: globalThis.SVGElement,
M: globalThis.MutationObserver, M: globalThis.MutationObserver,
qa: (p)=> p,
qw: ()=> Promise.resolve(),
}; };
import { isUndef } from './helpers.js'; import { isUndef } from './helpers.js';
function setDeleteAttr(obj, prop, val){ function setDeleteAttr(obj, prop, val){

97
src/dom.js
View File

@ -1,6 +1,7 @@
import { signals } from "./signals-common.js"; import { signals } from "./signals-common.js";
import { enviroment as env } from './dom-common.js'; import { enviroment as env } from './dom-common.js';
export function asyncQueueAdd(promise){ return env.qa(promise); }
/** @type {{ scope: object, prevent: boolean, host: function }[]} */ /** @type {{ scope: object, prevent: boolean, host: function }[]} */
const scopes= [ { const scopes= [ {
get scope(){ return env.D.body; }, get scope(){ return env.D.body; },
@ -25,7 +26,7 @@ export const scope= {
return scopes.pop(); return scopes.pop();
}, },
}; };
// following chainableAppend implementation is OK as the ElementPrototype.append description already is { writable: true, enumerable: true, configurable: true } // editorconfig-checker-disable-line //NOTE: following chainableAppend implementation is OK as the ElementPrototype.append description already is { writable: true, enumerable: true, configurable: true } // editorconfig-checker-disable-line
function append(...els){ this.appendOriginal(...els); return this; } function append(...els){ this.appendOriginal(...els); return this; }
export function chainableAppend(el){ export function chainableAppend(el){
if(el.append===append) return el; el.appendOriginal= el.append; el.append= append; return el; if(el.append===append) return el; el.appendOriginal= el.append; el.append= append; return el;
@ -36,7 +37,6 @@ export function createElement(tag, attributes, ...addons){
const s= signals(this); const s= signals(this);
let scoped= 0; let scoped= 0;
let el, el_host; let el, el_host;
//TODO Array.isArray(tag) ⇒ set key (cache els)
if(Object(attributes)!==attributes || s.isSignal(attributes)) if(Object(attributes)!==attributes || s.isSignal(attributes))
attributes= { textContent: attributes }; attributes= { textContent: attributes };
switch(true){ switch(true){
@ -81,58 +81,7 @@ createElement.mark= function(attrs, is_open= false){
return out; return out;
}; };
export { createElement as el }; export { createElement as el };
//TODO?: const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns;
import { hasOwn } from "./helpers.js";
/** @param {HTMLElement} element @param {HTMLElement} [root] */
export function simulateSlots(element, root, mapper){
if(typeof root!=="object"){
mapper= root;
root= element;
}
const _default= Symbol.for("default");
const slots= Array.from(root.querySelectorAll("slot"))
.reduce((out, curr)=> Reflect.set(out, curr.name || _default, curr) && out, {});
const has_d= hasOwn(slots, _default);
element.append= new Proxy(element.append, {
apply(orig, _, els){
if(els[0]===root) return orig.apply(element, els);
if(!els.length) return element;
const d= env.D.createDocumentFragment();
for(const el of els){
if(!el || !el.slot){ if(has_d) d.append(el); continue; }
const name= el.slot;
const slot= slots[name];
elementAttribute(el, "remove", "slot");
if(!slot) continue;
simulateSlotReplace(slot, el, mapper);
Reflect.deleteProperty(slots, name);
}
if(has_d){
slots[_default].replaceWith(d);
Reflect.deleteProperty(slots, _default);
}
element.append= orig; //TODO: better memory management, but non-native behavior!
return element;
}
});
if(element!==root){
const els= Array.from(element.childNodes);
els.forEach(el=> el.remove());
element.append(...els);
}
return root;
}
export function cn(...s){ return s.filter(Boolean).join(" "); }
function simulateSlotReplace(slot, element, mapper){
if(mapper) mapper(slot, element);
try{ slot.replaceWith(assign(element, {
className: cn(element.className, slot.className),
dataset: { ...slot.dataset } })); }
catch(_){ slot.replaceWith(element); }
}
//const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns;
export function createElementNS(ns){ export function createElementNS(ns){
const _this= this; const _this= this;
return function createElementNSCurried(...rest){ return function createElementNSCurried(...rest){
@ -144,6 +93,40 @@ export function createElementNS(ns){
} }
export { createElementNS as elNS }; export { createElementNS as elNS };
/** @param {HTMLElement} element @param {HTMLElement} [root] */
export function simulateSlots(element, root= element){
const mark_e= "¹⁰", mark_s= "✓"; //NOTE: Markers to identify slots processed by this function. Also “prevents” native behavior as it is unlikely to use these in names. // editorconfig-checker-disable-line
const slots= Object.fromEntries(
Array.from(root.querySelectorAll("slot"))
.filter(s => !s.name.endsWith(mark_e))
.map(s => [(s.name += mark_e), s]));
element.append= new Proxy(element.append, {
apply(orig, _, els){
if(els[0]===root) return orig.apply(element, els);
for(const el of els){
const name= (el.slot||"")+mark_e;
try{ elementAttribute(el, "remove", "slot"); } catch(_error){}
const slot= slots[name];
if(!slot) return;
if(!slot.name.startsWith(mark_s)){
slot.childNodes.forEach(c=> c.remove());
slot.name= mark_s+name;
}
slot.append(el);
//TODO?: el.dispatchEvent(new CustomEvent("dde:slotchange", { detail: slot }));
}
element.append= orig; //TODO?: better memory management, but non-native behavior!
return element;
}
});
if(element!==root){
const els= Array.from(element.childNodes);
//TODO?: els.forEach(el=> el.remove());
element.append(...els);
}
return root;
}
const assign_context= new WeakMap(); const assign_context= new WeakMap();
const { setDeleteAttr }= env; const { setDeleteAttr }= env;
export function assign(element, ...attributes){ export function assign(element, ...attributes){
@ -168,11 +151,11 @@ export function assignAttribute(element, key, value){
key= key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(); key= key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
return setRemoveAttr(key, value); return setRemoveAttr(key, value);
} }
if("className"===key) key= "class";//just optimalization, `isPropSetter` returns false immediately if("className"===key) key= "class";//NOTE: just optimalization, this makes `isPropSetter` returns false immediately // editorconfig-checker-disable-line
switch(key){ switch(key){
case "xlink:href": case "xlink:href":
return setRemoveAttr(key, value, "http://www.w3.org/1999/xlink"); return setRemoveAttr(key, value, "http://www.w3.org/1999/xlink");
case "textContent": //just optimalization, its part of Node ⇒ deep for `isPropSetter` case "textContent": //NOTE: just optimalization, this makes `isPropSetter` returns false immediately (as its part of Node ⇒ deep for `isPropSetter`) // editorconfig-checker-disable-line
return setDeleteAttr(element, key, value); return setDeleteAttr(element, key, value);
case "style": case "style":
if(typeof value!=="object") break; if(typeof value!=="object") break;
@ -206,7 +189,7 @@ export function elementAttribute(element, op, key, value){
return element[op+"AttributeNS"](null, key, value); return element[op+"AttributeNS"](null, key, value);
} }
import { isUndef } from "./helpers.js"; import { isUndef } from "./helpers.js";
//TODO add cache? `(Map/Set)<el.tagName+key,isUndef>` //TODO: add cache? `(Map/Set)<el.tagName+key,isUndef>`
function isPropSetter(el, key){ function isPropSetter(el, key){
if(!(key in el)) return false; if(!(key in el)) return false;
const des= getPropDescriptor(el, key); const des= getPropDescriptor(el, key);

4
src/events-observer.js
View File

@ -82,12 +82,12 @@ function connectionsChangesObserverConstructor(){
is_observing= false; is_observing= false;
observer.disconnect(); observer.disconnect();
} }
//TODO remount support? //TODO: remount support?
function requestIdle(){ return new Promise(function(resolve){ function requestIdle(){ return new Promise(function(resolve){
(requestIdleCallback || requestAnimationFrame)(resolve); (requestIdleCallback || requestAnimationFrame)(resolve);
}); } }); }
async function collectChildren(element){ async function collectChildren(element){
if(store.size > 30)//TODO limit? if(store.size > 30)//TODO?: limit
await requestIdle(); await requestIdle();
const out= []; const out= [];
if(!(element instanceof Node)) return out; if(!(element instanceof Node)) return out;

2
src/observables-lib.js
View File

@ -58,7 +58,7 @@ signal.on= function on(s, listener, options= {}){
if(Array.isArray(s)) return s.forEach(s=> on(s, listener, options)); if(Array.isArray(s)) return s.forEach(s=> on(s, listener, options));
addSignalListener(s, listener); addSignalListener(s, listener);
if(as) as.addEventListener("abort", ()=> removeSignalListener(s, listener)); if(as) as.addEventListener("abort", ()=> removeSignalListener(s, listener));
//TODO cleanup when signal removed //TODO: cleanup when signal removed
}; };
signal.symbols= { signal.symbols= {
//signal: mark, //signal: mark,

2
src/signals-lib.js
View File

@ -58,7 +58,7 @@ signal.on= function on(s, listener, options= {}){
if(Array.isArray(s)) return s.forEach(s=> on(s, listener, options)); if(Array.isArray(s)) return s.forEach(s=> on(s, listener, options));
addSignalListener(s, listener); addSignalListener(s, listener);
if(as) as.addEventListener("abort", ()=> removeSignalListener(s, listener)); if(as) as.addEventListener("abort", ()=> removeSignalListener(s, listener));
//TODO cleanup when signal removed //TODO: cleanup when signal removed
}; };
signal.symbols= { signal.symbols= {
//signal: mark, //signal: mark,