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:99d073b87ac66523a8cf80f9db34ce2733c9890a
Branches Tags
jaandrle:main
jaandrle:v0.9.5-alpha
jaandrle:v0.9.4-alpha
jaandrle:v0.9.3-alpha
..
compare: jaandrle:e81ac9a3e516a9437a3f38e576a1de7e5921e1cc
Branches Tags
jaandrle:main
jaandrle:v0.9.5-alpha
jaandrle:v0.9.4-alpha
jaandrle:v0.9.3-alpha

2 Commits
99d073b87a ... e81ac9a3e5

Author SHA1 Message Date
Jan Andrle
e81ac9a3e5
🔤 Improves and updates docs 
- customElementRender
- introduction example
 2024-12-13 15:01:18 +01:00
Jan Andrle
3d0aeafc5c
⚡ improved customElementRender 2024-12-13 13:53:41 +01:00
18 changed files with 545 additions and 528 deletions
Show Stats Expand all files Collapse all files

21
README.md
View File

@ -8,12 +8,17 @@
```javascript ```javascript
document.body.append( document.body.append(
el(HelloWorldComponent) el(HelloWorldComponent, { initial: "🚀" })
); );
function HelloWorldComponent(){ /** @typedef {"🎉" | "🚀"} Emoji */
/** @param {{ initial: Emoji }} attrs */
function HelloWorldComponent({ initial }){
const clicks= S(0); const clicks= S(0);
const emoji= S("🚀"); const emoji= S(initial);
const isSelected= el=> (el.selected= el.value===emoji()); /** @param {HTMLOptionElement} el */
const isSelected= el=> (el.selected= el.value===initial);
// @ts-expect-error 2339: The <select> has only two options with {@link Emoji}
const onChange= on("change", event=> emoji(event.target.value));
return el().append( return el().append(
el("p", { el("p", {
@ -27,11 +32,9 @@ function HelloWorldComponent(){
on("click", ()=> clicks(clicks() + 1)), on("click", ()=> clicks(clicks() + 1)),
on("keyup", ()=> clicks(clicks() - 2)), on("keyup", ()=> clicks(clicks() - 2)),
), ),
el("select", { el("select", null, onChange).append(
onchange: event=> emoji(event.target.value), el(OptionComponent, "🎉", isSelected),//OR { textContent: "🎉" }
}).append( el(OptionComponent, "🚀", isSelected),//OR { textContent: "🚀" }
el(OptionComponent, "🎉", isSelected),
el(OptionComponent, "🚀", isSelected),
) )
); );
} }

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

@ -5,8 +5,8 @@ var N = {
isSignal(t) { isSignal(t) {
return !1; return !1;
}, },
processReactiveAttribute(t, e, n, r) { processReactiveAttribute(t, e, r, n) {
return n; return r;
} }
}; };
function H(t, e = !0) { function H(t, e = !0) {
@ -34,9 +34,9 @@ function P(t, e) {
}; };
} }
function W(t, e) { function W(t, e) {
let { observedAttributes: n = [] } = t.constructor; let { observedAttributes: r = [] } = t.constructor;
return n.reduce(function(r, o) { return r.reduce(function(n, o) {
return r[dt(o)] = e(t, o), r; return n[dt(o)] = e(t, o), n;
}, {}); }, {});
} }
function dt(t) { function dt(t) {
@ -54,15 +54,15 @@ var d = {
M: globalThis.MutationObserver, M: globalThis.MutationObserver,
q: (t) => t || Promise.resolve() q: (t) => t || Promise.resolve()
}; };
function pt(t, e, n) { function pt(t, e, r) {
if (Reflect.set(t, e, n), !!A(n)) { if (Reflect.set(t, e, r), !!A(r)) {
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", S = "dde:disconnected", T = "dde:attributeChanged"; var O = "__dde_lifecyclesToEvents", w = "dde:connected", S = "dde:disconnected", T = "dde:attributeChanged";
// src/dom.js // src/dom.js
function Mt(t) { function Mt(t) {
@ -106,12 +106,12 @@ 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 M(t, e, ...n) { function M(t, e, ...r) {
let r = j(this), o = 0, c, u; let n = j(this), o = 0, c, u;
switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { switch ((Object(e) !== e || n.isSignal(e)) && (e = { textContent: e }), !0) {
case typeof t == "function": { case typeof t == "function": {
o = 1; o = 1;
let a = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((m) => m(u)), void 0) : u; let a = (...l) => l.length ? (o === 1 ? r.unshift(...l) : l.forEach((E) => E(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;
@ -135,37 +135,37 @@ function M(t, e, ...n) {
case !c: case !c:
c = q.call(this, d.D.createElement(t), e); c = q.call(this, d.D.createElement(t), e);
} }
return lt(c), u || (u = c), n.forEach((a) => a(u)), o && x.pop(), o = 2, c; return lt(c), u || (u = c), r.forEach((a) => a(u)), o && x.pop(), o = 2, c;
} }
M.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 r = e ? "" : "/", n = d.D.createComment(`<dde:mark ${t}${d.ssr}${r}>`);
return e && (r.end = d.D.createComment("</dde:mark>")), r; return e && (n.end = d.D.createComment("</dde:mark>")), n;
}; };
function jt(t) { function jt(t) {
let e = this; let e = this;
return function(...r) { return function(...n) {
$ = t; $ = t;
let o = M.call(e, ...r); let o = M.call(e, ...n);
return $ = void 0, o; return $ = void 0, o;
}; };
} }
function Pt(t, e = t) { function Pt(t, e = t) {
let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries( let r = "\xB9\u2070", n = "\u2713", o = Object.fromEntries(
Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c]) Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(r)).map((c) => [c.name += r, c])
); );
if (t.append = new Proxy(t.append, { if (t.append = new Proxy(t.append, {
apply(c, u, a) { apply(c, u, a) {
if (a[0] === e) return c.apply(t, a); if (a[0] === e) return c.apply(t, a);
for (let h of a) { for (let h of a) {
let v = (h.slot || "") + n; let v = (h.slot || "") + r;
try { try {
bt(h, "remove", "slot"); bt(h, "remove", "slot");
} catch { } catch {
} }
let l = o[v]; let l = o[v];
if (!l) return; if (!l) return;
l.name.startsWith(r) || (l.childNodes.forEach((m) => m.remove()), l.name = r + v), l.append(h); l.name.startsWith(n) || (l.childNodes.forEach((E) => E.remove()), l.name = n + v), l.append(h);
} }
return t.append = c, t; return t.append = c, t;
} }
@ -179,104 +179,104 @@ var F = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;
function q(t, ...e) { function q(t, ...e) {
if (!e.length) return t; if (!e.length) return t;
F.set(t, rt(t, this)); F.set(t, rt(t, this));
for (let [n, r] of Object.entries(Object.assign({}, ...e))) for (let [r, n] of Object.entries(Object.assign({}, ...e)))
nt.call(this, t, n, r); nt.call(this, t, r, n);
return F.delete(t), t; return F.delete(t), t;
} }
function nt(t, e, n) { function nt(t, e, r) {
let { setRemoveAttr: r, s: o } = rt(t, this), c = this; let { setRemoveAttr: n, s: o } = rt(t, this), c = this;
n = o.processReactiveAttribute( r = o.processReactiveAttribute(
t, t,
e, e,
n, r,
(a, h) => nt.call(c, t, a, h) (a, h) => nt.call(c, t, a, h)
); );
let [u] = e; let [u] = e;
if (u === "=") return r(e.slice(1), n); if (u === "=") return n(e.slice(1), r);
if (u === ".") return et(t, e.slice(1), n); if (u === ".") return et(t, e.slice(1), r);
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(), n(e, r);
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 n(e, r, "http://www.w3.org/1999/xlink");
case "textContent": case "textContent":
return tt(t, e, n); return tt(t, e, r);
case "style": case "style":
if (typeof n != "object") break; if (typeof r != "object") break;
/* falls through */ /* falls through */
case "dataset": case "dataset":
return B(o, n, et.bind(null, t[e])); return B(o, r, et.bind(null, t[e]));
case "ariaset": case "ariaset":
return B(o, n, (a, h) => r("aria-" + a, h)); return B(o, r, (a, h) => n("aria-" + a, h));
case "classList": case "classList":
return ht.call(c, t, n); return ht.call(c, t, r);
} }
return gt(t, e) ? tt(t, e, n) : r(e, n); return gt(t, e) ? tt(t, e, r) : n(e, r);
} }
function rt(t, e) { function rt(t, e) {
if (F.has(t)) return F.get(t); if (F.has(t)) return F.get(t);
let r = (t instanceof d.S ? Et : vt).bind(null, t, "Attribute"), o = j(e); let n = (t instanceof d.S ? mt : vt).bind(null, t, "Attribute"), o = j(e);
return { setRemoveAttr: r, s: o }; return { setRemoveAttr: n, s: o };
} }
function ht(t, e) { function ht(t, e) {
let n = j(this); let r = j(this);
return B( return B(
n, r,
e, e,
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) (n, o) => t.classList.toggle(n, o === -1 ? void 0 : !!o)
), t; ), t;
} }
function bt(t, e, n, r) { function bt(t, e, r, n) {
return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); return t instanceof d.H ? t[e + "Attribute"](r, n) : t[e + "AttributeNS"](null, r, n);
} }
function gt(t, e) { function gt(t, e) {
if (!(e in t)) return !1; if (!(e in t)) return !1;
let n = ot(t, e); let r = ot(t, e);
return !A(n.set); return !A(r.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 r = Object.getOwnPropertyDescriptor(t, e);
return n || ot(t, e); return r || ot(t, e);
} }
function B(t, e, n) { function B(t, e, r) {
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, r), r(o, c));
}); });
} }
function vt(t, e, n, r) { function vt(t, e, r, n) {
return t[(A(r) ? "remove" : "set") + e](n, r); return t[(A(n) ? "remove" : "set") + e](r, n);
} }
function Et(t, e, n, r, o = null) { function mt(t, e, r, n, o = null) {
return t[(A(r) ? "remove" : "set") + e + "NS"](o, n, r); return t[(A(n) ? "remove" : "set") + e + "NS"](o, r, n);
} }
function et(t, e, n) { function et(t, e, r) {
if (Reflect.set(t, e, n), !!A(n)) if (Reflect.set(t, e, r), !!A(r))
return Reflect.deleteProperty(t, e); return Reflect.deleteProperty(t, e);
} }
// src/events-observer.js // src/events-observer.js
var C = d.M ? mt() : new Proxy({}, { var C = d.M ? Et() : new Proxy({}, {
get() { get() {
return () => { return () => {
}; };
} }
}); });
function mt() { function Et() {
let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(s) { let t = /* @__PURE__ */ new Map(), e = !1, r = (i) => function(s) {
for (let f of s) for (let f of s)
if (f.type === "childList") { if (f.type === "childList") {
if (l(f.addedNodes, !0)) { if (l(f.addedNodes, !0)) {
i(); i();
continue; continue;
} }
m(f.removedNodes, !0) && i(); E(f.removedNodes, !0) && i();
} }
}, r = new d.M(n(a)); }, n = new d.M(r(a));
return { return {
observe(i) { observe(i) {
let s = new d.M(n(() => { let s = new d.M(r(() => {
})); }));
return s.observe(i, { childList: !0, subtree: !0 }), () => s.disconnect(); return s.observe(i, { childList: !0, subtree: !0 }), () => s.disconnect();
}, },
@ -315,10 +315,10 @@ function mt() {
return t.set(i, s), s; return t.set(i, s), s;
} }
function u() { function u() {
e || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 })); e || (e = !0, n.observe(d.D.body, { childList: !0, subtree: !0 }));
} }
function a() { function a() {
!e || t.size || (e = !1, r.disconnect()); !e || t.size || (e = !1, n.disconnect());
} }
function h() { function h() {
return new Promise(function(i) { return new Promise(function(i) {
@ -338,14 +338,14 @@ function mt() {
for (let b of i) { for (let b of i) {
if (s && v(b).then(l), !t.has(b)) continue; if (s && v(b).then(l), !t.has(b)) continue;
let L = t.get(b); let L = t.get(b);
L.length_c && (b.dispatchEvent(new Event(_)), L.connected = /* @__PURE__ */ new WeakSet(), L.length_c = 0, L.length_d || t.delete(b), f = !0); L.length_c && (b.dispatchEvent(new Event(w)), L.connected = /* @__PURE__ */ new WeakSet(), L.length_c = 0, L.length_d || t.delete(b), f = !0);
} }
return f; return f;
} }
function m(i, s) { function E(i, s) {
let f = !1; let f = !1;
for (let b of i) for (let b of i)
s && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(k(b)), f = !0); s && v(b).then(E), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(k(b)), f = !0);
return f; return f;
} }
function k(i) { function k(i) {
@ -356,79 +356,80 @@ function mt() {
} }
// src/customElement.js // src/customElement.js
function It(t, e, n, r = wt) { function It(t, e, r = _t) {
let n = t.host || t;
x.push({ x.push({
scope: t, scope: n,
host: (...u) => u.length ? u.forEach((a) => a(t)) : t host: (...u) => u.length ? u.forEach((a) => a(n)) : n
}), typeof r == "function" && (r = r.call(t, t)); }), typeof r == "function" && (r = r.call(n, n));
let o = t[O]; let o = n[O];
o || xt(t); o || xt(n);
let c = n.call(t, r); let c = e.call(n, r);
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); return o || n.dispatchEvent(new Event(w)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(S, C.observe(t), { once: !0 }), x.pop(), t.append(c);
} }
function xt(t) { function xt(t) {
return J(t.prototype, "connectedCallback", function(e, n, r) { return J(t.prototype, "connectedCallback", function(e, r, n) {
e.apply(n, r), n.dispatchEvent(new Event(_)); e.apply(r, n), r.dispatchEvent(new Event(w));
}), J(t.prototype, "disconnectedCallback", function(e, n, r) { }), J(t.prototype, "disconnectedCallback", function(e, r, n) {
e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( e.apply(r, n), (globalThis.queueMicrotask || setTimeout)(
() => !n.isConnected && n.dispatchEvent(new Event(S)) () => !r.isConnected && r.dispatchEvent(new Event(S))
); );
}), J(t.prototype, "attributeChangedCallback", function(e, n, r) { }), J(t.prototype, "attributeChangedCallback", function(e, r, n) {
let [o, , c] = r; let [o, , c] = n;
n.dispatchEvent(new CustomEvent(T, { r.dispatchEvent(new CustomEvent(T, {
detail: [o, c] detail: [o, c]
})), e.apply(n, r); })), e.apply(r, n);
}), t.prototype[O] = !0, t; }), t.prototype[O] = !0, t;
} }
function J(t, e, n) { function J(t, e, r) {
t[e] = new Proxy(t[e] || (() => { t[e] = new Proxy(t[e] || (() => {
}), { apply: n }); }), { apply: r });
} }
function wt(t) { function _t(t) {
return W(t, (e, n) => e.getAttribute(n)); return W(t, (e, r) => e.getAttribute(r));
} }
// src/events.js // src/events.js
function Gt(t, e, n) { function Gt(t, e, r) {
return e || (e = {}), function(o, ...c) { return e || (e = {}), function(o, ...c) {
n && (c.unshift(o), o = typeof n == "function" ? n() : n); r && (c.unshift(o), o = typeof r == "function" ? r() : r);
let u = 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(u); return o.dispatchEvent(u);
}; };
} }
function w(t, e, n) { function _(t, e, r) {
return function(o) { return function(o) {
return o.addEventListener(t, e, n), o; return o.addEventListener(t, e, r), o;
}; };
} }
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) { _.connected = function(t, e) {
return e = ct(e), function(r) { return e = ct(e), function(n) {
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); return n.addEventListener(w, t, e), n[O] ? n : n.isConnected ? (n.dispatchEvent(new Event(w)), n) : (P(e.signal, () => C.offConnected(n, t)) && C.onConnected(n, t), n);
}; };
}; };
w.disconnected = function(t, e) { _.disconnected = function(t, e) {
return e = ct(e), function(r) { return e = ct(e), function(n) {
return r.addEventListener(S, t, e), r[O] || P(e.signal, () => C.offDisconnected(r, t)) && C.onDisconnected(r, t), r; return n.addEventListener(S, t, e), n[O] || P(e.signal, () => C.offDisconnected(n, t)) && C.onDisconnected(n, t), n;
}; };
}; };
var Z = /* @__PURE__ */ new WeakMap(); var Z = /* @__PURE__ */ new WeakMap();
w.disconnectedAsAbort = function(t) { _.disconnectedAsAbort = function(t) {
if (Z.has(t)) return Z.get(t); if (Z.has(t)) return Z.get(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(_.disconnected(() => e.abort())), e;
}; };
var _t = /* @__PURE__ */ new WeakSet(); var wt = /* @__PURE__ */ new WeakSet();
w.attributeChanged = function(t, e) { _.attributeChanged = function(t, e) {
return typeof e != "object" && (e = {}), function(r) { return typeof e != "object" && (e = {}), function(n) {
if (r.addEventListener(T, t, e), r[O] || _t.has(r) || !d.M) return r; if (n.addEventListener(T, t, e), n[O] || wt.has(n) || !d.M) return n;
let o = new d.M(function(u) { let o = new d.M(function(u) {
for (let { attributeName: a, target: h } of u) for (let { attributeName: a, target: h } of u)
h.dispatchEvent( h.dispatchEvent(
new CustomEvent(T, { detail: [a, h.getAttribute(a)] }) new CustomEvent(T, { detail: [a, h.getAttribute(a)] })
); );
}); });
return P(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; return P(e.signal, () => o.disconnect()) && o.observe(n, { attributes: !0 }), n;
}; };
}; };
@ -442,56 +443,56 @@ function U(t) {
} }
} }
var z = [], g = /* @__PURE__ */ new WeakMap(); var z = [], g = /* @__PURE__ */ new WeakMap();
function E(t, e) { function m(t, e) {
if (typeof t != "function") if (typeof t != "function")
return it(!1, t, e); return it(!1, t, e);
if (U(t)) return t; if (U(t)) return t;
let n = it(!0), r = function() { let r = it(!0), n = function() {
let [o, ...c] = g.get(r); let [o, ...c] = g.get(n);
if (g.set(r, /* @__PURE__ */ new Set([o])), z.push(r), at(n, t()), z.pop(), !c.length) return; if (g.set(n, /* @__PURE__ */ new Set([o])), z.push(n), at(r, t()), z.pop(), !c.length) return;
let u = g.get(r); let u = g.get(n);
for (let a of c) for (let a of c)
u.has(a) || R(a, r); u.has(a) || R(a, n);
}; };
return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n; return g.set(r[p], n), g.set(n, /* @__PURE__ */ new Set([r])), n(), r;
} }
E.action = function(t, e, ...n) { m.action = function(t, e, ...r) {
let r = t[p], { actions: o } = r; let n = t[p], { actions: o } = n;
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(n, r), n.skip) return delete n.skip;
r.listeners.forEach((c) => c(r.value)); n.listeners.forEach((c) => c(n.value));
}; };
E.on = function t(e, n, r = {}) { m.on = function t(e, r, n = {}) {
let { signal: o } = r; let { signal: o } = n;
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, r, n));
Q(e, n), o && o.addEventListener("abort", () => R(e, n)); Q(e, r), o && o.addEventListener("abort", () => R(e, r));
} }
}; };
E.symbols = { m.symbols = {
//signal: mark, //signal: mark,
onclear: Symbol.for("Signal.onclear") onclear: Symbol.for("Signal.onclear")
}; };
E.clear = function(...t) { m.clear = function(...t) {
for (let n of t) { for (let r of t) {
let r = n[p]; let n = r[p];
r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]); n && (delete r.toJSON, n.onclear.forEach((o) => o.call(n)), e(r, n), delete r[p]);
} }
function e(n, r) { function e(r, n) {
r.listeners.forEach((o) => { n.listeners.forEach((o) => {
if (r.listeners.delete(o), !g.has(o)) return; if (n.listeners.delete(o), !g.has(o)) return;
let c = g.get(o); let c = g.get(o);
c.delete(n), !(c.size > 1) && (n.clear(...c), g.delete(o)); c.delete(r), !(c.size > 1) && (r.clear(...c), g.delete(o));
}); });
} }
}; };
var D = "__dde_reactive"; var D = "__dde_reactive";
E.el = function(t, e) { m.el = function(t, e) {
let n = M.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment(); let r = M.mark({ type: "reactive" }, !0), n = r.end, o = d.D.createDocumentFragment();
o.append(n, r); o.append(r, n);
let { current: c } = x, u = {}, a = (h) => { let { current: c } = x, u = {}, a = (h) => {
if (!n.parentNode || !r.parentNode) if (!r.parentNode || !n.parentNode)
return R(t, a); return R(t, a);
let v = u; let v = u;
u = {}, x.push(c); u = {}, x.push(c);
@ -500,18 +501,18 @@ E.el = function(t, e) {
return I(v, s) ? (b = v[s], delete v[s]) : b = f(), u[s] = b, b; return I(v, s) ? (b = v[s], delete v[s]) : b = f(), u[s] = b, b;
}); });
x.pop(), Array.isArray(l) || (l = [l]); x.pop(), Array.isArray(l) || (l = [l]);
let m = document.createComment(""); let E = document.createComment("");
l.push(m), n.after(...l); l.push(E), r.after(...l);
let k; let k;
for (; (k = m.nextSibling) && k !== r; ) for (; (k = E.nextSibling) && k !== n; )
k.remove(); k.remove();
m.remove(), n.isConnected && yt(c.host()); E.remove(), r.isConnected && yt(c.host());
}; };
return Q(t, a), ut(t, a, n, e), a(t()), o; return Q(t, a), ut(t, a, r, e), a(t()), o;
}; };
function yt(t) { function yt(t) {
!t || !t[D] || (requestIdleCallback || setTimeout)(function() { !t || !t[D] || (requestIdleCallback || setTimeout)(function() {
t[D] = t[D].filter(([e, n]) => n.isConnected ? !0 : (R(...e), !1)); t[D] = t[D].filter(([e, r]) => r.isConnected ? !0 : (R(...e), !1));
}); });
} }
var At = { var At = {
@ -520,41 +521,41 @@ var At = {
} }
}; };
function Ot(t) { function Ot(t) {
return function(e, n) { return function(e, r) {
let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = ft(r, e.getAttribute(n), At); let n = (...c) => c.length ? e.setAttribute(r, ...c) : K(n), o = ft(n, e.getAttribute(r), At);
return t[n] = o, o; return t[r] = o, o;
}; };
} }
var G = "__dde_attributes"; var G = "__dde_attributes";
E.observedAttributes = function(t) { m.observedAttributes = function(t) {
let e = t[G] = {}, n = W(t, Ot(e)); let e = t[G] = {}, r = W(t, Ot(e));
return w.attributeChanged(function({ detail: o }) { return _.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, u] = o, a = this[G][c]; let [c, u] = o, a = this[G][c];
if (a) return E.action(a, "_set", u); if (a) return m.action(a, "_set", u);
})(t), w.disconnected(function() { })(t), _.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.*/
E.clear(...Object.values(this[G])); m.clear(...Object.values(this[G]));
})(t), n; })(t), r;
}; };
var st = { var st = {
isSignal: U, isSignal: U,
processReactiveAttribute(t, e, n, r) { processReactiveAttribute(t, e, r, n) {
if (!U(n)) return n; if (!U(r)) return r;
let o = (c) => { let o = (c) => {
if (!t.isConnected) if (!t.isConnected)
return R(n, o); return R(r, o);
r(e, c); n(e, c);
}; };
return Q(n, o), ut(n, o, t, e), n(); return Q(r, o), ut(r, o, t, e), r();
} }
}; };
function ut(t, e, ...n) { function ut(t, e, ...r) {
let { current: r } = x; let { current: n } = x;
r.prevent || r.host(function(o) { n.prevent || n.host(function(o) {
o[D] || (o[D] = [], w.disconnected( o[D] || (o[D] = [], _.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`, …?).
@ -562,12 +563,12 @@ function ut(t, e, ...n) {
* */ * */
o[D].forEach(([[c, u]]) => R(c, u, c[p] && c[p].host && c[p].host() === o)) o[D].forEach(([[c, u]]) => R(c, u, c[p] && c[p].host && c[p].host() === o))
) )
)(o)), o[D].push([[t, e], ...n]); )(o)), o[D].push([[t, e], ...r]);
}); });
} }
function it(t, e, n) { function it(t, e, r) {
let r = t ? () => K(r) : (...o) => o.length ? at(r, ...o) : K(r); let n = t ? () => K(n) : (...o) => o.length ? at(n, ...o) : K(n);
return ft(r, e, n, t); return ft(n, e, r, t);
} }
var St = Object.assign(/* @__PURE__ */ Object.create(null), { var St = Object.assign(/* @__PURE__ */ Object.create(null), {
stopPropagation() { stopPropagation() {
@ -576,26 +577,26 @@ var St = Object.assign(/* @__PURE__ */ Object.create(null), {
}), V = class extends Error { }), V = class extends Error {
constructor() { constructor() {
super(); super();
let [e, ...n] = this.stack.split(` let [e, ...r] = this.stack.split(`
`), r = e.slice(e.indexOf("@"), e.indexOf(".js:") + 4); `), n = e.slice(e.indexOf("@"), e.indexOf(".js:") + 4);
this.stack = n.find((o) => !o.includes(r)); this.stack = r.find((o) => !o.includes(n));
} }
}; };
function ft(t, e, n, r = !1) { function ft(t, e, r, n = !1) {
let o = []; let o = [];
X(n) !== "[object Object]" && (n = {}); X(r) !== "[object Object]" && (r = {});
let { onclear: c } = E.symbols; let { onclear: c } = m.symbols;
n[c] && (o.push(n[c]), delete n[c]); r[c] && (o.push(r[c]), delete r[c]);
let { host: u } = x; let { host: u } = x;
return Reflect.defineProperty(t, p, { return Reflect.defineProperty(t, p, {
value: { value: {
value: e, value: e,
actions: n, actions: r,
onclear: o, onclear: o,
host: u, host: u,
listeners: /* @__PURE__ */ new Set(), listeners: /* @__PURE__ */ new Set(),
defined: new V().stack, defined: new V().stack,
readonly: r readonly: n
}, },
enumerable: !1, enumerable: !1,
writable: !1, writable: !1,
@ -607,26 +608,26 @@ function Ct() {
} }
function K(t) { function K(t) {
if (!t[p]) return; if (!t[p]) return;
let { value: e, listeners: n } = t[p], r = Ct(); let { value: e, listeners: r } = t[p], n = Ct();
return r && n.add(r), g.has(r) && g.get(r).add(t), e; return n && r.add(n), g.has(n) && g.get(n).add(t), e;
} }
function at(t, e, n) { function at(t, e, r) {
if (!t[p]) return; if (!t[p]) return;
let r = t[p]; let n = t[p];
if (!(!n && r.value === e)) if (!(!r && n.value === e))
return r.value = e, r.listeners.forEach((o) => o(e)), e; return n.value = e, n.listeners.forEach((o) => o(e)), e;
} }
function Q(t, e) { function Q(t, e) {
if (t[p]) if (t[p])
return t[p].listeners.add(e); return t[p].listeners.add(e);
} }
function R(t, e, n) { function R(t, e, r) {
let r = t[p]; let n = t[p];
if (!r) return; if (!n) return;
let o = r.listeners.delete(e); let o = n.listeners.delete(e);
if (n && !r.listeners.size) { if (r && !n.listeners.size) {
if (E.clear(t), !g.has(r)) return o; if (m.clear(t), !g.has(n)) return o;
let c = g.get(r); let c = g.get(n);
if (!g.has(c)) return o; if (!g.has(c)) return o;
g.get(c).forEach((u) => R(u, c, !0)); g.get(c).forEach((u) => R(u, c, !0));
} }
@ -637,7 +638,7 @@ function R(t, e, n) {
H(st); H(st);
globalThis.dde= { globalThis.dde= {
S: E, S: m,
assign: q, assign: q,
assignAttribute: nt, assignAttribute: nt,
chainableAppend: lt, chainableAppend: lt,
@ -652,12 +653,12 @@ globalThis.dde= {
elementAttribute: bt, elementAttribute: bt,
isSignal: U, isSignal: U,
lifecyclesToEvents: xt, lifecyclesToEvents: xt,
observedAttributes: wt, observedAttributes: _t,
on: w, on: _,
queue: Mt, queue: Mt,
registerReactivity: H, registerReactivity: H,
scope: x, scope: x,
signal: E, signal: m,
simulateSlots: Pt simulateSlots: Pt
}; };

111
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 C = { var A = {
isSignal(t) { isSignal(t) {
return !1; return !1;
}, },
@ -10,14 +10,14 @@ var C = {
} }
}; };
function Z(t, e = !0) { function Z(t, e = !0) {
return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t); return e ? Object.assign(A, t) : (Object.setPrototypeOf(t, A), t);
} }
function S(t) { function S(t) {
return C.isPrototypeOf(t) && t !== C ? t : C; return A.isPrototypeOf(t) && t !== A ? t : A;
} }
// src/helpers.js // src/helpers.js
function x(t) { function m(t) {
return typeof t > "u"; return typeof t > "u";
} }
function L(t, e) { function L(t, e) {
@ -50,14 +50,14 @@ var f = {
q: (t) => t || Promise.resolve() q: (t) => t || Promise.resolve()
}; };
function V(t, e, n) { function V(t, e, n) {
if (Reflect.set(t, e, n), !!x(n)) { if (Reflect.set(t, e, n), !!m(n)) {
if (Reflect.deleteProperty(t, e), t instanceof f.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", v = "dde:connected", m = "dde:disconnected", O = "dde:attributeChanged"; var x = "__dde_lifecyclesToEvents", v = "dde:connected", w = "dde:disconnected", C = "dde:attributeChanged";
// src/dom.js // src/dom.js
function dt(t) { function dt(t) {
@ -69,7 +69,7 @@ var g = [{
}, },
host: (t) => t ? t(f.D.body) : f.D.body, host: (t) => t ? t(f.D.body) : f.D.body,
prevent: !0 prevent: !0
}], D = { }], O = {
get current() { get current() {
return g[g.length - 1]; return g[g.length - 1];
}, },
@ -106,8 +106,8 @@ function P(t, e, ...n) {
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 = (...h) => h.length ? (o === 1 ? n.unshift(...h) : h.forEach((E) => E(a)), void 0) : a; let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(a)), void 0) : a;
D.push({ scope: t, host: d }), c = t(e || void 0); O.push({ scope: t, host: d }), c = t(e || void 0);
let p = c instanceof f.F; let p = c instanceof f.F;
if (c.nodeName === "#comment") break; if (c.nodeName === "#comment") break;
let b = P.mark({ let b = P.mark({
@ -130,7 +130,7 @@ function P(t, e, ...n) {
case !c: case !c:
c = R.call(this, f.D.createElement(t), e); c = R.call(this, f.D.createElement(t), e);
} }
return J(c), a || (a = c), n.forEach((d) => d(a)), o && D.pop(), o = 2, c; return J(c), a || (a = c), n.forEach((d) => d(a)), o && O.pop(), o = 2, c;
} }
P.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(" ");
@ -145,7 +145,7 @@ function pt(t) {
return T = void 0, o; return T = void 0, o;
}; };
} }
function ht(t, e = t) { function lt(t, e = t) {
let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries( 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]) Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c])
); );
@ -158,9 +158,9 @@ function ht(t, e = t) {
Q(p, "remove", "slot"); Q(p, "remove", "slot");
} catch { } catch {
} }
let h = o[b]; let l = o[b];
if (!h) return; if (!l) return;
h.name.startsWith(r) || (h.childNodes.forEach((E) => E.remove()), h.name = r + b), h.append(p); l.name.startsWith(r) || (l.childNodes.forEach((E) => E.remove()), l.name = r + b), l.append(p);
} }
return t.append = c, t; return t.append = c, t;
} }
@ -227,7 +227,7 @@ function Q(t, e, n, r) {
function X(t, e) { function X(t, e) {
if (!(e in t)) return !1; if (!(e in t)) return !1;
let n = z(t, e); let n = z(t, e);
return !x(n.set); return !m(n.set);
} }
function z(t, e) { function z(t, e) {
if (t = Object.getPrototypeOf(t), !t) return {}; if (t = Object.getPrototypeOf(t), !t) return {};
@ -241,13 +241,13 @@ function M(t, e, n) {
}); });
} }
function Y(t, e, n, r) { function Y(t, e, n, r) {
return t[(x(r) ? "remove" : "set") + e](n, r); return t[(m(r) ? "remove" : "set") + e](n, r);
} }
function tt(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[(m(r) ? "remove" : "set") + e + "NS"](o, n, r);
} }
function F(t, e, n) { function F(t, e, n) {
if (Reflect.set(t, e, n), !!x(n)) if (Reflect.set(t, e, n), !!m(n))
return Reflect.deleteProperty(t, e); return Reflect.deleteProperty(t, e);
} }
@ -262,7 +262,7 @@ function et() {
let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) { let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
for (let i of u) for (let i of u)
if (i.type === "childList") { if (i.type === "childList") {
if (h(i.addedNodes, !0)) { if (l(i.addedNodes, !0)) {
s(); s();
continue; continue;
} }
@ -328,52 +328,53 @@ function et() {
i === s || !(i instanceof Node) || s.contains(i) && u.push(i); i === s || !(i instanceof Node) || s.contains(i) && u.push(i);
return u; return u;
} }
function h(s, u) { function l(s, u) {
let i = !1; let i = !1;
for (let l of s) { for (let h of s) {
if (u && b(l).then(h), !t.has(l)) continue; if (u && b(h).then(l), !t.has(h)) continue;
let A = t.get(l); let _ = t.get(h);
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); _.length_c && (h.dispatchEvent(new Event(v)), _.connected = /* @__PURE__ */ new WeakSet(), _.length_c = 0, _.length_d || t.delete(h), i = !0);
} }
return i; return i;
} }
function E(s, u) { function E(s, u) {
let i = !1; let i = !1;
for (let l of s) for (let h of s)
u && b(l).then(E), !(!t.has(l) || !t.get(l).length_d) && ((globalThis.queueMicrotask || setTimeout)(I(l)), i = !0); u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(I(h)), i = !0);
return i; return i;
} }
function I(s) { function I(s) {
return () => { return () => {
s.isConnected || (s.dispatchEvent(new Event(m)), t.delete(s)); s.isConnected || (s.dispatchEvent(new Event(w)), t.delete(s));
}; };
} }
} }
// src/customElement.js // src/customElement.js
function mt(t, e, n, r = rt) { function wt(t, e, n = rt) {
D.push({ let r = t.host || t;
scope: t, O.push({
host: (...a) => a.length ? a.forEach((d) => d(t)) : t scope: r,
}), typeof r == "function" && (r = r.call(t, t)); host: (...a) => a.length ? a.forEach((d) => d(r)) : r
let o = t[w]; }), typeof n == "function" && (n = n.call(r, r));
o || nt(t); let o = r[x];
let c = n.call(t, r); o || nt(r);
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); let c = e.call(r, n);
return o || r.dispatchEvent(new Event(v)), t.nodeType === 11 && typeof t.mode == "string" && r.addEventListener(w, y.observe(t), { once: !0 }), O.pop(), t.append(c);
} }
function nt(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(v)); 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(m)) () => !n.isConnected && n.dispatchEvent(new Event(w))
); );
}), 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(O, { n.dispatchEvent(new CustomEvent(C, {
detail: [o, c] detail: [o, c]
})), e.apply(n, r); })), e.apply(n, r);
}), t.prototype[w] = !0, t; }), t.prototype[x] = !0, t;
} }
function k(t, e, n) { function k(t, e, n) {
t[e] = new Proxy(t[e] || (() => { t[e] = new Proxy(t[e] || (() => {
@ -384,43 +385,43 @@ function rt(t) {
} }
// src/events.js // src/events.js
function Ot(t, e, n) { function Ct(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 a = 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(a); return o.dispatchEvent(a);
}; };
} }
function _(t, e, n) { function D(t, e, n) {
return function(o) { return function(o) {
return o.addEventListener(t, e, n), o; return o.addEventListener(t, e, n), o;
}; };
} }
var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
_.connected = function(t, e) { D.connected = function(t, e) {
return e = B(e), function(r) { return e = B(e), function(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); return r.addEventListener(v, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(v)), r) : (L(e.signal, () => y.offConnected(r, t)) && y.onConnected(r, t), r);
}; };
}; };
_.disconnected = function(t, e) { D.disconnected = function(t, e) {
return e = B(e), function(r) { return e = B(e), function(r) {
return r.addEventListener(m, t, e), r[w] || L(e.signal, () => y.offDisconnected(r, t)) && y.onDisconnected(r, t), r; return r.addEventListener(w, t, e), r[x] || L(e.signal, () => y.offDisconnected(r, t)) && y.onDisconnected(r, t), r;
}; };
}; };
var j = /* @__PURE__ */ new WeakMap(); var j = /* @__PURE__ */ new WeakMap();
_.disconnectedAsAbort = function(t) { D.disconnectedAsAbort = function(t) {
if (j.has(t)) return j.get(t); if (j.has(t)) return j.get(t);
let e = new AbortController(); let e = new AbortController();
return j.set(t, e), t(_.disconnected(() => e.abort())), e; return j.set(t, e), t(D.disconnected(() => e.abort())), e;
}; };
var ot = /* @__PURE__ */ new WeakSet(); var ot = /* @__PURE__ */ new WeakSet();
_.attributeChanged = function(t, e) { D.attributeChanged = function(t, e) {
return typeof e != "object" && (e = {}), function(r) { return typeof e != "object" && (e = {}), function(r) {
if (r.addEventListener(O, t, e), r[w] || ot.has(r) || !f.M) return r; if (r.addEventListener(C, t, e), r[x] || ot.has(r) || !f.M) return r;
let o = new f.M(function(a) { let o = new f.M(function(a) {
for (let { attributeName: d, target: p } of a) for (let { attributeName: d, target: p } of a)
p.dispatchEvent( p.dispatchEvent(
new CustomEvent(O, { detail: [d, p.getAttribute(d)] }) new CustomEvent(C, { detail: [d, p.getAttribute(d)] })
); );
}); });
return L(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; return L(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
@ -434,19 +435,19 @@ globalThis.dde= {
classListDeclarative: K, classListDeclarative: K,
createElement: P, createElement: P,
createElementNS: pt, createElementNS: pt,
customElementRender: mt, customElementRender: wt,
customElementWithDDE: nt, customElementWithDDE: nt,
dispatchEvent: Ot, dispatchEvent: Ct,
el: P, el: P,
elNS: pt, elNS: pt,
elementAttribute: Q, elementAttribute: Q,
lifecyclesToEvents: nt, lifecyclesToEvents: nt,
observedAttributes: rt, observedAttributes: rt,
on: _, on: D,
queue: dt, queue: dt,
registerReactivity: Z, registerReactivity: Z,
scope: D, scope: O,
simulateSlots: ht simulateSlots: lt
}; };
})(); })();

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

@ -227,7 +227,6 @@ export function customElementRender<
EL extends HTMLElement, EL extends HTMLElement,
P extends any = Record<string, string | ddeSignal<string>> P extends any = Record<string, string | ddeSignal<string>>
>( >(
custom_element: EL,
target: ShadowRoot | EL, target: ShadowRoot | EL,
render: (props: P)=> SupportedElement | DocumentFragment, render: (props: P)=> SupportedElement | DocumentFragment,
props?: P | ((el: EL)=> P) props?: P | ((el: EL)=> P)

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

@ -3,8 +3,8 @@ var N = {
isSignal(t) { isSignal(t) {
return !1; return !1;
}, },
processReactiveAttribute(t, e, n, r) { processReactiveAttribute(t, e, r, n) {
return n; return r;
} }
}; };
function H(t, e = !0) { function H(t, e = !0) {
@ -32,9 +32,9 @@ function P(t, e) {
}; };
} }
function W(t, e) { function W(t, e) {
let { observedAttributes: n = [] } = t.constructor; let { observedAttributes: r = [] } = t.constructor;
return n.reduce(function(r, o) { return r.reduce(function(n, o) {
return r[dt(o)] = e(t, o), r; return n[dt(o)] = e(t, o), n;
}, {}); }, {});
} }
function dt(t) { function dt(t) {
@ -52,15 +52,15 @@ var d = {
M: globalThis.MutationObserver, M: globalThis.MutationObserver,
q: (t) => t || Promise.resolve() q: (t) => t || Promise.resolve()
}; };
function pt(t, e, n) { function pt(t, e, r) {
if (Reflect.set(t, e, n), !!A(n)) { if (Reflect.set(t, e, r), !!A(r)) {
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", S = "dde:disconnected", T = "dde:attributeChanged"; var O = "__dde_lifecyclesToEvents", w = "dde:connected", S = "dde:disconnected", T = "dde:attributeChanged";
// src/dom.js // src/dom.js
function Mt(t) { function Mt(t) {
@ -104,12 +104,12 @@ 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 M(t, e, ...n) { function M(t, e, ...r) {
let r = j(this), o = 0, c, u; let n = j(this), o = 0, c, u;
switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { switch ((Object(e) !== e || n.isSignal(e)) && (e = { textContent: e }), !0) {
case typeof t == "function": { case typeof t == "function": {
o = 1; o = 1;
let a = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((m) => m(u)), void 0) : u; let a = (...l) => l.length ? (o === 1 ? r.unshift(...l) : l.forEach((E) => E(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;
@ -133,37 +133,37 @@ function M(t, e, ...n) {
case !c: case !c:
c = q.call(this, d.D.createElement(t), e); c = q.call(this, d.D.createElement(t), e);
} }
return lt(c), u || (u = c), n.forEach((a) => a(u)), o && x.pop(), o = 2, c; return lt(c), u || (u = c), r.forEach((a) => a(u)), o && x.pop(), o = 2, c;
} }
M.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 r = e ? "" : "/", n = d.D.createComment(`<dde:mark ${t}${d.ssr}${r}>`);
return e && (r.end = d.D.createComment("</dde:mark>")), r; return e && (n.end = d.D.createComment("</dde:mark>")), n;
}; };
function jt(t) { function jt(t) {
let e = this; let e = this;
return function(...r) { return function(...n) {
$ = t; $ = t;
let o = M.call(e, ...r); let o = M.call(e, ...n);
return $ = void 0, o; return $ = void 0, o;
}; };
} }
function Pt(t, e = t) { function Pt(t, e = t) {
let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries( let r = "\xB9\u2070", n = "\u2713", o = Object.fromEntries(
Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c]) Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(r)).map((c) => [c.name += r, c])
); );
if (t.append = new Proxy(t.append, { if (t.append = new Proxy(t.append, {
apply(c, u, a) { apply(c, u, a) {
if (a[0] === e) return c.apply(t, a); if (a[0] === e) return c.apply(t, a);
for (let h of a) { for (let h of a) {
let v = (h.slot || "") + n; let v = (h.slot || "") + r;
try { try {
bt(h, "remove", "slot"); bt(h, "remove", "slot");
} catch { } catch {
} }
let l = o[v]; let l = o[v];
if (!l) return; if (!l) return;
l.name.startsWith(r) || (l.childNodes.forEach((m) => m.remove()), l.name = r + v), l.append(h); l.name.startsWith(n) || (l.childNodes.forEach((E) => E.remove()), l.name = n + v), l.append(h);
} }
return t.append = c, t; return t.append = c, t;
} }
@ -177,104 +177,104 @@ var F = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;
function q(t, ...e) { function q(t, ...e) {
if (!e.length) return t; if (!e.length) return t;
F.set(t, rt(t, this)); F.set(t, rt(t, this));
for (let [n, r] of Object.entries(Object.assign({}, ...e))) for (let [r, n] of Object.entries(Object.assign({}, ...e)))
nt.call(this, t, n, r); nt.call(this, t, r, n);
return F.delete(t), t; return F.delete(t), t;
} }
function nt(t, e, n) { function nt(t, e, r) {
let { setRemoveAttr: r, s: o } = rt(t, this), c = this; let { setRemoveAttr: n, s: o } = rt(t, this), c = this;
n = o.processReactiveAttribute( r = o.processReactiveAttribute(
t, t,
e, e,
n, r,
(a, h) => nt.call(c, t, a, h) (a, h) => nt.call(c, t, a, h)
); );
let [u] = e; let [u] = e;
if (u === "=") return r(e.slice(1), n); if (u === "=") return n(e.slice(1), r);
if (u === ".") return et(t, e.slice(1), n); if (u === ".") return et(t, e.slice(1), r);
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(), n(e, r);
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 n(e, r, "http://www.w3.org/1999/xlink");
case "textContent": case "textContent":
return tt(t, e, n); return tt(t, e, r);
case "style": case "style":
if (typeof n != "object") break; if (typeof r != "object") break;
/* falls through */ /* falls through */
case "dataset": case "dataset":
return B(o, n, et.bind(null, t[e])); return B(o, r, et.bind(null, t[e]));
case "ariaset": case "ariaset":
return B(o, n, (a, h) => r("aria-" + a, h)); return B(o, r, (a, h) => n("aria-" + a, h));
case "classList": case "classList":
return ht.call(c, t, n); return ht.call(c, t, r);
} }
return gt(t, e) ? tt(t, e, n) : r(e, n); return gt(t, e) ? tt(t, e, r) : n(e, r);
} }
function rt(t, e) { function rt(t, e) {
if (F.has(t)) return F.get(t); if (F.has(t)) return F.get(t);
let r = (t instanceof d.S ? Et : vt).bind(null, t, "Attribute"), o = j(e); let n = (t instanceof d.S ? mt : vt).bind(null, t, "Attribute"), o = j(e);
return { setRemoveAttr: r, s: o }; return { setRemoveAttr: n, s: o };
} }
function ht(t, e) { function ht(t, e) {
let n = j(this); let r = j(this);
return B( return B(
n, r,
e, e,
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) (n, o) => t.classList.toggle(n, o === -1 ? void 0 : !!o)
), t; ), t;
} }
function bt(t, e, n, r) { function bt(t, e, r, n) {
return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); return t instanceof d.H ? t[e + "Attribute"](r, n) : t[e + "AttributeNS"](null, r, n);
} }
function gt(t, e) { function gt(t, e) {
if (!(e in t)) return !1; if (!(e in t)) return !1;
let n = ot(t, e); let r = ot(t, e);
return !A(n.set); return !A(r.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 r = Object.getOwnPropertyDescriptor(t, e);
return n || ot(t, e); return r || ot(t, e);
} }
function B(t, e, n) { function B(t, e, r) {
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, r), r(o, c));
}); });
} }
function vt(t, e, n, r) { function vt(t, e, r, n) {
return t[(A(r) ? "remove" : "set") + e](n, r); return t[(A(n) ? "remove" : "set") + e](r, n);
} }
function Et(t, e, n, r, o = null) { function mt(t, e, r, n, o = null) {
return t[(A(r) ? "remove" : "set") + e + "NS"](o, n, r); return t[(A(n) ? "remove" : "set") + e + "NS"](o, r, n);
} }
function et(t, e, n) { function et(t, e, r) {
if (Reflect.set(t, e, n), !!A(n)) if (Reflect.set(t, e, r), !!A(r))
return Reflect.deleteProperty(t, e); return Reflect.deleteProperty(t, e);
} }
// src/events-observer.js // src/events-observer.js
var C = d.M ? mt() : new Proxy({}, { var C = d.M ? Et() : new Proxy({}, {
get() { get() {
return () => { return () => {
}; };
} }
}); });
function mt() { function Et() {
let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(s) { let t = /* @__PURE__ */ new Map(), e = !1, r = (i) => function(s) {
for (let f of s) for (let f of s)
if (f.type === "childList") { if (f.type === "childList") {
if (l(f.addedNodes, !0)) { if (l(f.addedNodes, !0)) {
i(); i();
continue; continue;
} }
m(f.removedNodes, !0) && i(); E(f.removedNodes, !0) && i();
} }
}, r = new d.M(n(a)); }, n = new d.M(r(a));
return { return {
observe(i) { observe(i) {
let s = new d.M(n(() => { let s = new d.M(r(() => {
})); }));
return s.observe(i, { childList: !0, subtree: !0 }), () => s.disconnect(); return s.observe(i, { childList: !0, subtree: !0 }), () => s.disconnect();
}, },
@ -313,10 +313,10 @@ function mt() {
return t.set(i, s), s; return t.set(i, s), s;
} }
function u() { function u() {
e || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 })); e || (e = !0, n.observe(d.D.body, { childList: !0, subtree: !0 }));
} }
function a() { function a() {
!e || t.size || (e = !1, r.disconnect()); !e || t.size || (e = !1, n.disconnect());
} }
function h() { function h() {
return new Promise(function(i) { return new Promise(function(i) {
@ -336,14 +336,14 @@ function mt() {
for (let b of i) { for (let b of i) {
if (s && v(b).then(l), !t.has(b)) continue; if (s && v(b).then(l), !t.has(b)) continue;
let L = t.get(b); let L = t.get(b);
L.length_c && (b.dispatchEvent(new Event(_)), L.connected = /* @__PURE__ */ new WeakSet(), L.length_c = 0, L.length_d || t.delete(b), f = !0); L.length_c && (b.dispatchEvent(new Event(w)), L.connected = /* @__PURE__ */ new WeakSet(), L.length_c = 0, L.length_d || t.delete(b), f = !0);
} }
return f; return f;
} }
function m(i, s) { function E(i, s) {
let f = !1; let f = !1;
for (let b of i) for (let b of i)
s && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(k(b)), f = !0); s && v(b).then(E), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(k(b)), f = !0);
return f; return f;
} }
function k(i) { function k(i) {
@ -354,79 +354,80 @@ function mt() {
} }
// src/customElement.js // src/customElement.js
function It(t, e, n, r = wt) { function It(t, e, r = _t) {
let n = t.host || t;
x.push({ x.push({
scope: t, scope: n,
host: (...u) => u.length ? u.forEach((a) => a(t)) : t host: (...u) => u.length ? u.forEach((a) => a(n)) : n
}), typeof r == "function" && (r = r.call(t, t)); }), typeof r == "function" && (r = r.call(n, n));
let o = t[O]; let o = n[O];
o || xt(t); o || xt(n);
let c = n.call(t, r); let c = e.call(n, r);
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); return o || n.dispatchEvent(new Event(w)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(S, C.observe(t), { once: !0 }), x.pop(), t.append(c);
} }
function xt(t) { function xt(t) {
return J(t.prototype, "connectedCallback", function(e, n, r) { return J(t.prototype, "connectedCallback", function(e, r, n) {
e.apply(n, r), n.dispatchEvent(new Event(_)); e.apply(r, n), r.dispatchEvent(new Event(w));
}), J(t.prototype, "disconnectedCallback", function(e, n, r) { }), J(t.prototype, "disconnectedCallback", function(e, r, n) {
e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( e.apply(r, n), (globalThis.queueMicrotask || setTimeout)(
() => !n.isConnected && n.dispatchEvent(new Event(S)) () => !r.isConnected && r.dispatchEvent(new Event(S))
); );
}), J(t.prototype, "attributeChangedCallback", function(e, n, r) { }), J(t.prototype, "attributeChangedCallback", function(e, r, n) {
let [o, , c] = r; let [o, , c] = n;
n.dispatchEvent(new CustomEvent(T, { r.dispatchEvent(new CustomEvent(T, {
detail: [o, c] detail: [o, c]
})), e.apply(n, r); })), e.apply(r, n);
}), t.prototype[O] = !0, t; }), t.prototype[O] = !0, t;
} }
function J(t, e, n) { function J(t, e, r) {
t[e] = new Proxy(t[e] || (() => { t[e] = new Proxy(t[e] || (() => {
}), { apply: n }); }), { apply: r });
} }
function wt(t) { function _t(t) {
return W(t, (e, n) => e.getAttribute(n)); return W(t, (e, r) => e.getAttribute(r));
} }
// src/events.js // src/events.js
function Gt(t, e, n) { function Gt(t, e, r) {
return e || (e = {}), function(o, ...c) { return e || (e = {}), function(o, ...c) {
n && (c.unshift(o), o = typeof n == "function" ? n() : n); r && (c.unshift(o), o = typeof r == "function" ? r() : r);
let u = 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(u); return o.dispatchEvent(u);
}; };
} }
function w(t, e, n) { function _(t, e, r) {
return function(o) { return function(o) {
return o.addEventListener(t, e, n), o; return o.addEventListener(t, e, r), o;
}; };
} }
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) { _.connected = function(t, e) {
return e = ct(e), function(r) { return e = ct(e), function(n) {
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); return n.addEventListener(w, t, e), n[O] ? n : n.isConnected ? (n.dispatchEvent(new Event(w)), n) : (P(e.signal, () => C.offConnected(n, t)) && C.onConnected(n, t), n);
}; };
}; };
w.disconnected = function(t, e) { _.disconnected = function(t, e) {
return e = ct(e), function(r) { return e = ct(e), function(n) {
return r.addEventListener(S, t, e), r[O] || P(e.signal, () => C.offDisconnected(r, t)) && C.onDisconnected(r, t), r; return n.addEventListener(S, t, e), n[O] || P(e.signal, () => C.offDisconnected(n, t)) && C.onDisconnected(n, t), n;
}; };
}; };
var Z = /* @__PURE__ */ new WeakMap(); var Z = /* @__PURE__ */ new WeakMap();
w.disconnectedAsAbort = function(t) { _.disconnectedAsAbort = function(t) {
if (Z.has(t)) return Z.get(t); if (Z.has(t)) return Z.get(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(_.disconnected(() => e.abort())), e;
}; };
var _t = /* @__PURE__ */ new WeakSet(); var wt = /* @__PURE__ */ new WeakSet();
w.attributeChanged = function(t, e) { _.attributeChanged = function(t, e) {
return typeof e != "object" && (e = {}), function(r) { return typeof e != "object" && (e = {}), function(n) {
if (r.addEventListener(T, t, e), r[O] || _t.has(r) || !d.M) return r; if (n.addEventListener(T, t, e), n[O] || wt.has(n) || !d.M) return n;
let o = new d.M(function(u) { let o = new d.M(function(u) {
for (let { attributeName: a, target: h } of u) for (let { attributeName: a, target: h } of u)
h.dispatchEvent( h.dispatchEvent(
new CustomEvent(T, { detail: [a, h.getAttribute(a)] }) new CustomEvent(T, { detail: [a, h.getAttribute(a)] })
); );
}); });
return P(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; return P(e.signal, () => o.disconnect()) && o.observe(n, { attributes: !0 }), n;
}; };
}; };
@ -440,56 +441,56 @@ function U(t) {
} }
} }
var z = [], g = /* @__PURE__ */ new WeakMap(); var z = [], g = /* @__PURE__ */ new WeakMap();
function E(t, e) { function m(t, e) {
if (typeof t != "function") if (typeof t != "function")
return it(!1, t, e); return it(!1, t, e);
if (U(t)) return t; if (U(t)) return t;
let n = it(!0), r = function() { let r = it(!0), n = function() {
let [o, ...c] = g.get(r); let [o, ...c] = g.get(n);
if (g.set(r, /* @__PURE__ */ new Set([o])), z.push(r), at(n, t()), z.pop(), !c.length) return; if (g.set(n, /* @__PURE__ */ new Set([o])), z.push(n), at(r, t()), z.pop(), !c.length) return;
let u = g.get(r); let u = g.get(n);
for (let a of c) for (let a of c)
u.has(a) || R(a, r); u.has(a) || R(a, n);
}; };
return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n; return g.set(r[p], n), g.set(n, /* @__PURE__ */ new Set([r])), n(), r;
} }
E.action = function(t, e, ...n) { m.action = function(t, e, ...r) {
let r = t[p], { actions: o } = r; let n = t[p], { actions: o } = n;
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(n, r), n.skip) return delete n.skip;
r.listeners.forEach((c) => c(r.value)); n.listeners.forEach((c) => c(n.value));
}; };
E.on = function t(e, n, r = {}) { m.on = function t(e, r, n = {}) {
let { signal: o } = r; let { signal: o } = n;
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, r, n));
Q(e, n), o && o.addEventListener("abort", () => R(e, n)); Q(e, r), o && o.addEventListener("abort", () => R(e, r));
} }
}; };
E.symbols = { m.symbols = {
//signal: mark, //signal: mark,
onclear: Symbol.for("Signal.onclear") onclear: Symbol.for("Signal.onclear")
}; };
E.clear = function(...t) { m.clear = function(...t) {
for (let n of t) { for (let r of t) {
let r = n[p]; let n = r[p];
r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]); n && (delete r.toJSON, n.onclear.forEach((o) => o.call(n)), e(r, n), delete r[p]);
} }
function e(n, r) { function e(r, n) {
r.listeners.forEach((o) => { n.listeners.forEach((o) => {
if (r.listeners.delete(o), !g.has(o)) return; if (n.listeners.delete(o), !g.has(o)) return;
let c = g.get(o); let c = g.get(o);
c.delete(n), !(c.size > 1) && (n.clear(...c), g.delete(o)); c.delete(r), !(c.size > 1) && (r.clear(...c), g.delete(o));
}); });
} }
}; };
var D = "__dde_reactive"; var D = "__dde_reactive";
E.el = function(t, e) { m.el = function(t, e) {
let n = M.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment(); let r = M.mark({ type: "reactive" }, !0), n = r.end, o = d.D.createDocumentFragment();
o.append(n, r); o.append(r, n);
let { current: c } = x, u = {}, a = (h) => { let { current: c } = x, u = {}, a = (h) => {
if (!n.parentNode || !r.parentNode) if (!r.parentNode || !n.parentNode)
return R(t, a); return R(t, a);
let v = u; let v = u;
u = {}, x.push(c); u = {}, x.push(c);
@ -498,18 +499,18 @@ E.el = function(t, e) {
return I(v, s) ? (b = v[s], delete v[s]) : b = f(), u[s] = b, b; return I(v, s) ? (b = v[s], delete v[s]) : b = f(), u[s] = b, b;
}); });
x.pop(), Array.isArray(l) || (l = [l]); x.pop(), Array.isArray(l) || (l = [l]);
let m = document.createComment(""); let E = document.createComment("");
l.push(m), n.after(...l); l.push(E), r.after(...l);
let k; let k;
for (; (k = m.nextSibling) && k !== r; ) for (; (k = E.nextSibling) && k !== n; )
k.remove(); k.remove();
m.remove(), n.isConnected && yt(c.host()); E.remove(), r.isConnected && yt(c.host());
}; };
return Q(t, a), ut(t, a, n, e), a(t()), o; return Q(t, a), ut(t, a, r, e), a(t()), o;
}; };
function yt(t) { function yt(t) {
!t || !t[D] || (requestIdleCallback || setTimeout)(function() { !t || !t[D] || (requestIdleCallback || setTimeout)(function() {
t[D] = t[D].filter(([e, n]) => n.isConnected ? !0 : (R(...e), !1)); t[D] = t[D].filter(([e, r]) => r.isConnected ? !0 : (R(...e), !1));
}); });
} }
var At = { var At = {
@ -518,41 +519,41 @@ var At = {
} }
}; };
function Ot(t) { function Ot(t) {
return function(e, n) { return function(e, r) {
let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = ft(r, e.getAttribute(n), At); let n = (...c) => c.length ? e.setAttribute(r, ...c) : K(n), o = ft(n, e.getAttribute(r), At);
return t[n] = o, o; return t[r] = o, o;
}; };
} }
var G = "__dde_attributes"; var G = "__dde_attributes";
E.observedAttributes = function(t) { m.observedAttributes = function(t) {
let e = t[G] = {}, n = W(t, Ot(e)); let e = t[G] = {}, r = W(t, Ot(e));
return w.attributeChanged(function({ detail: o }) { return _.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, u] = o, a = this[G][c]; let [c, u] = o, a = this[G][c];
if (a) return E.action(a, "_set", u); if (a) return m.action(a, "_set", u);
})(t), w.disconnected(function() { })(t), _.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.*/
E.clear(...Object.values(this[G])); m.clear(...Object.values(this[G]));
})(t), n; })(t), r;
}; };
var st = { var st = {
isSignal: U, isSignal: U,
processReactiveAttribute(t, e, n, r) { processReactiveAttribute(t, e, r, n) {
if (!U(n)) return n; if (!U(r)) return r;
let o = (c) => { let o = (c) => {
if (!t.isConnected) if (!t.isConnected)
return R(n, o); return R(r, o);
r(e, c); n(e, c);
}; };
return Q(n, o), ut(n, o, t, e), n(); return Q(r, o), ut(r, o, t, e), r();
} }
}; };
function ut(t, e, ...n) { function ut(t, e, ...r) {
let { current: r } = x; let { current: n } = x;
r.prevent || r.host(function(o) { n.prevent || n.host(function(o) {
o[D] || (o[D] = [], w.disconnected( o[D] || (o[D] = [], _.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`, …?).
@ -560,12 +561,12 @@ function ut(t, e, ...n) {
* */ * */
o[D].forEach(([[c, u]]) => R(c, u, c[p] && c[p].host && c[p].host() === o)) o[D].forEach(([[c, u]]) => R(c, u, c[p] && c[p].host && c[p].host() === o))
) )
)(o)), o[D].push([[t, e], ...n]); )(o)), o[D].push([[t, e], ...r]);
}); });
} }
function it(t, e, n) { function it(t, e, r) {
let r = t ? () => K(r) : (...o) => o.length ? at(r, ...o) : K(r); let n = t ? () => K(n) : (...o) => o.length ? at(n, ...o) : K(n);
return ft(r, e, n, t); return ft(n, e, r, t);
} }
var St = Object.assign(/* @__PURE__ */ Object.create(null), { var St = Object.assign(/* @__PURE__ */ Object.create(null), {
stopPropagation() { stopPropagation() {
@ -574,26 +575,26 @@ var St = Object.assign(/* @__PURE__ */ Object.create(null), {
}), V = class extends Error { }), V = class extends Error {
constructor() { constructor() {
super(); super();
let [e, ...n] = this.stack.split(` let [e, ...r] = this.stack.split(`
`), r = e.slice(e.indexOf("@"), e.indexOf(".js:") + 4); `), n = e.slice(e.indexOf("@"), e.indexOf(".js:") + 4);
this.stack = n.find((o) => !o.includes(r)); this.stack = r.find((o) => !o.includes(n));
} }
}; };
function ft(t, e, n, r = !1) { function ft(t, e, r, n = !1) {
let o = []; let o = [];
X(n) !== "[object Object]" && (n = {}); X(r) !== "[object Object]" && (r = {});
let { onclear: c } = E.symbols; let { onclear: c } = m.symbols;
n[c] && (o.push(n[c]), delete n[c]); r[c] && (o.push(r[c]), delete r[c]);
let { host: u } = x; let { host: u } = x;
return Reflect.defineProperty(t, p, { return Reflect.defineProperty(t, p, {
value: { value: {
value: e, value: e,
actions: n, actions: r,
onclear: o, onclear: o,
host: u, host: u,
listeners: /* @__PURE__ */ new Set(), listeners: /* @__PURE__ */ new Set(),
defined: new V().stack, defined: new V().stack,
readonly: r readonly: n
}, },
enumerable: !1, enumerable: !1,
writable: !1, writable: !1,
@ -605,26 +606,26 @@ function Ct() {
} }
function K(t) { function K(t) {
if (!t[p]) return; if (!t[p]) return;
let { value: e, listeners: n } = t[p], r = Ct(); let { value: e, listeners: r } = t[p], n = Ct();
return r && n.add(r), g.has(r) && g.get(r).add(t), e; return n && r.add(n), g.has(n) && g.get(n).add(t), e;
} }
function at(t, e, n) { function at(t, e, r) {
if (!t[p]) return; if (!t[p]) return;
let r = t[p]; let n = t[p];
if (!(!n && r.value === e)) if (!(!r && n.value === e))
return r.value = e, r.listeners.forEach((o) => o(e)), e; return n.value = e, n.listeners.forEach((o) => o(e)), e;
} }
function Q(t, e) { function Q(t, e) {
if (t[p]) if (t[p])
return t[p].listeners.add(e); return t[p].listeners.add(e);
} }
function R(t, e, n) { function R(t, e, r) {
let r = t[p]; let n = t[p];
if (!r) return; if (!n) return;
let o = r.listeners.delete(e); let o = n.listeners.delete(e);
if (n && !r.listeners.size) { if (r && !n.listeners.size) {
if (E.clear(t), !g.has(r)) return o; if (m.clear(t), !g.has(n)) return o;
let c = g.get(r); let c = g.get(n);
if (!g.has(c)) return o; if (!g.has(c)) return o;
g.get(c).forEach((u) => R(u, c, !0)); g.get(c).forEach((u) => R(u, c, !0));
} }
@ -634,7 +635,7 @@ function R(t, e, n) {
// signals.js // signals.js
H(st); H(st);
export { export {
E as S, m as S,
q as assign, q as assign,
nt as assignAttribute, nt as assignAttribute,
lt as chainableAppend, lt as chainableAppend,
@ -649,11 +650,11 @@ export {
bt as elementAttribute, bt as elementAttribute,
U as isSignal, U as isSignal,
xt as lifecyclesToEvents, xt as lifecyclesToEvents,
wt as observedAttributes, _t as observedAttributes,
w as on, _ as on,
Mt as queue, Mt as queue,
H as registerReactivity, H as registerReactivity,
x as scope, x as scope,
E as signal, m as signal,
Pt as simulateSlots Pt as simulateSlots
}; };

1
dist/esm.d.ts vendored
View File

@ -227,7 +227,6 @@ export function customElementRender<
EL extends HTMLElement, EL extends HTMLElement,
P extends any = Record<string, string | ddeSignal<string>> P extends any = Record<string, string | ddeSignal<string>>
>( >(
custom_element: EL,
target: ShadowRoot | EL, target: ShadowRoot | EL,
render: (props: P)=> SupportedElement | DocumentFragment, render: (props: P)=> SupportedElement | DocumentFragment,
props?: P | ((el: EL)=> P) props?: P | ((el: EL)=> P)

111
dist/esm.js vendored
View File

@ -1,5 +1,5 @@
// src/signals-common.js // src/signals-common.js
var C = { var A = {
isSignal(t) { isSignal(t) {
return !1; return !1;
}, },
@ -8,14 +8,14 @@ var C = {
} }
}; };
function Z(t, e = !0) { function Z(t, e = !0) {
return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t); return e ? Object.assign(A, t) : (Object.setPrototypeOf(t, A), t);
} }
function S(t) { function S(t) {
return C.isPrototypeOf(t) && t !== C ? t : C; return A.isPrototypeOf(t) && t !== A ? t : A;
} }
// src/helpers.js // src/helpers.js
function x(t) { function m(t) {
return typeof t > "u"; return typeof t > "u";
} }
function L(t, e) { function L(t, e) {
@ -48,14 +48,14 @@ var f = {
q: (t) => t || Promise.resolve() q: (t) => t || Promise.resolve()
}; };
function V(t, e, n) { function V(t, e, n) {
if (Reflect.set(t, e, n), !!x(n)) { if (Reflect.set(t, e, n), !!m(n)) {
if (Reflect.deleteProperty(t, e), t instanceof f.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", v = "dde:connected", m = "dde:disconnected", O = "dde:attributeChanged"; var x = "__dde_lifecyclesToEvents", v = "dde:connected", w = "dde:disconnected", C = "dde:attributeChanged";
// src/dom.js // src/dom.js
function dt(t) { function dt(t) {
@ -67,7 +67,7 @@ var g = [{
}, },
host: (t) => t ? t(f.D.body) : f.D.body, host: (t) => t ? t(f.D.body) : f.D.body,
prevent: !0 prevent: !0
}], D = { }], O = {
get current() { get current() {
return g[g.length - 1]; return g[g.length - 1];
}, },
@ -104,8 +104,8 @@ function P(t, e, ...n) {
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 = (...h) => h.length ? (o === 1 ? n.unshift(...h) : h.forEach((E) => E(a)), void 0) : a; let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(a)), void 0) : a;
D.push({ scope: t, host: d }), c = t(e || void 0); O.push({ scope: t, host: d }), c = t(e || void 0);
let p = c instanceof f.F; let p = c instanceof f.F;
if (c.nodeName === "#comment") break; if (c.nodeName === "#comment") break;
let b = P.mark({ let b = P.mark({
@ -128,7 +128,7 @@ function P(t, e, ...n) {
case !c: case !c:
c = R.call(this, f.D.createElement(t), e); c = R.call(this, f.D.createElement(t), e);
} }
return J(c), a || (a = c), n.forEach((d) => d(a)), o && D.pop(), o = 2, c; return J(c), a || (a = c), n.forEach((d) => d(a)), o && O.pop(), o = 2, c;
} }
P.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(" ");
@ -143,7 +143,7 @@ function pt(t) {
return T = void 0, o; return T = void 0, o;
}; };
} }
function ht(t, e = t) { function lt(t, e = t) {
let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries( 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]) Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c])
); );
@ -156,9 +156,9 @@ function ht(t, e = t) {
Q(p, "remove", "slot"); Q(p, "remove", "slot");
} catch { } catch {
} }
let h = o[b]; let l = o[b];
if (!h) return; if (!l) return;
h.name.startsWith(r) || (h.childNodes.forEach((E) => E.remove()), h.name = r + b), h.append(p); l.name.startsWith(r) || (l.childNodes.forEach((E) => E.remove()), l.name = r + b), l.append(p);
} }
return t.append = c, t; return t.append = c, t;
} }
@ -225,7 +225,7 @@ function Q(t, e, n, r) {
function X(t, e) { function X(t, e) {
if (!(e in t)) return !1; if (!(e in t)) return !1;
let n = z(t, e); let n = z(t, e);
return !x(n.set); return !m(n.set);
} }
function z(t, e) { function z(t, e) {
if (t = Object.getPrototypeOf(t), !t) return {}; if (t = Object.getPrototypeOf(t), !t) return {};
@ -239,13 +239,13 @@ function M(t, e, n) {
}); });
} }
function Y(t, e, n, r) { function Y(t, e, n, r) {
return t[(x(r) ? "remove" : "set") + e](n, r); return t[(m(r) ? "remove" : "set") + e](n, r);
} }
function tt(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[(m(r) ? "remove" : "set") + e + "NS"](o, n, r);
} }
function F(t, e, n) { function F(t, e, n) {
if (Reflect.set(t, e, n), !!x(n)) if (Reflect.set(t, e, n), !!m(n))
return Reflect.deleteProperty(t, e); return Reflect.deleteProperty(t, e);
} }
@ -260,7 +260,7 @@ function et() {
let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) { let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
for (let i of u) for (let i of u)
if (i.type === "childList") { if (i.type === "childList") {
if (h(i.addedNodes, !0)) { if (l(i.addedNodes, !0)) {
s(); s();
continue; continue;
} }
@ -326,52 +326,53 @@ function et() {
i === s || !(i instanceof Node) || s.contains(i) && u.push(i); i === s || !(i instanceof Node) || s.contains(i) && u.push(i);
return u; return u;
} }
function h(s, u) { function l(s, u) {
let i = !1; let i = !1;
for (let l of s) { for (let h of s) {
if (u && b(l).then(h), !t.has(l)) continue; if (u && b(h).then(l), !t.has(h)) continue;
let A = t.get(l); let _ = t.get(h);
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); _.length_c && (h.dispatchEvent(new Event(v)), _.connected = /* @__PURE__ */ new WeakSet(), _.length_c = 0, _.length_d || t.delete(h), i = !0);
} }
return i; return i;
} }
function E(s, u) { function E(s, u) {
let i = !1; let i = !1;
for (let l of s) for (let h of s)
u && b(l).then(E), !(!t.has(l) || !t.get(l).length_d) && ((globalThis.queueMicrotask || setTimeout)(I(l)), i = !0); u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(I(h)), i = !0);
return i; return i;
} }
function I(s) { function I(s) {
return () => { return () => {
s.isConnected || (s.dispatchEvent(new Event(m)), t.delete(s)); s.isConnected || (s.dispatchEvent(new Event(w)), t.delete(s));
}; };
} }
} }
// src/customElement.js // src/customElement.js
function mt(t, e, n, r = rt) { function wt(t, e, n = rt) {
D.push({ let r = t.host || t;
scope: t, O.push({
host: (...a) => a.length ? a.forEach((d) => d(t)) : t scope: r,
}), typeof r == "function" && (r = r.call(t, t)); host: (...a) => a.length ? a.forEach((d) => d(r)) : r
let o = t[w]; }), typeof n == "function" && (n = n.call(r, r));
o || nt(t); let o = r[x];
let c = n.call(t, r); o || nt(r);
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); let c = e.call(r, n);
return o || r.dispatchEvent(new Event(v)), t.nodeType === 11 && typeof t.mode == "string" && r.addEventListener(w, y.observe(t), { once: !0 }), O.pop(), t.append(c);
} }
function nt(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(v)); 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(m)) () => !n.isConnected && n.dispatchEvent(new Event(w))
); );
}), 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(O, { n.dispatchEvent(new CustomEvent(C, {
detail: [o, c] detail: [o, c]
})), e.apply(n, r); })), e.apply(n, r);
}), t.prototype[w] = !0, t; }), t.prototype[x] = !0, t;
} }
function k(t, e, n) { function k(t, e, n) {
t[e] = new Proxy(t[e] || (() => { t[e] = new Proxy(t[e] || (() => {
@ -382,43 +383,43 @@ function rt(t) {
} }
// src/events.js // src/events.js
function Ot(t, e, n) { function Ct(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 a = 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(a); return o.dispatchEvent(a);
}; };
} }
function _(t, e, n) { function D(t, e, n) {
return function(o) { return function(o) {
return o.addEventListener(t, e, n), o; return o.addEventListener(t, e, n), o;
}; };
} }
var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
_.connected = function(t, e) { D.connected = function(t, e) {
return e = B(e), function(r) { return e = B(e), function(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); return r.addEventListener(v, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(v)), r) : (L(e.signal, () => y.offConnected(r, t)) && y.onConnected(r, t), r);
}; };
}; };
_.disconnected = function(t, e) { D.disconnected = function(t, e) {
return e = B(e), function(r) { return e = B(e), function(r) {
return r.addEventListener(m, t, e), r[w] || L(e.signal, () => y.offDisconnected(r, t)) && y.onDisconnected(r, t), r; return r.addEventListener(w, t, e), r[x] || L(e.signal, () => y.offDisconnected(r, t)) && y.onDisconnected(r, t), r;
}; };
}; };
var j = /* @__PURE__ */ new WeakMap(); var j = /* @__PURE__ */ new WeakMap();
_.disconnectedAsAbort = function(t) { D.disconnectedAsAbort = function(t) {
if (j.has(t)) return j.get(t); if (j.has(t)) return j.get(t);
let e = new AbortController(); let e = new AbortController();
return j.set(t, e), t(_.disconnected(() => e.abort())), e; return j.set(t, e), t(D.disconnected(() => e.abort())), e;
}; };
var ot = /* @__PURE__ */ new WeakSet(); var ot = /* @__PURE__ */ new WeakSet();
_.attributeChanged = function(t, e) { D.attributeChanged = function(t, e) {
return typeof e != "object" && (e = {}), function(r) { return typeof e != "object" && (e = {}), function(r) {
if (r.addEventListener(O, t, e), r[w] || ot.has(r) || !f.M) return r; if (r.addEventListener(C, t, e), r[x] || ot.has(r) || !f.M) return r;
let o = new f.M(function(a) { let o = new f.M(function(a) {
for (let { attributeName: d, target: p } of a) for (let { attributeName: d, target: p } of a)
p.dispatchEvent( p.dispatchEvent(
new CustomEvent(O, { detail: [d, p.getAttribute(d)] }) new CustomEvent(C, { detail: [d, p.getAttribute(d)] })
); );
}); });
return L(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; return L(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
@ -431,17 +432,17 @@ export {
K as classListDeclarative, K as classListDeclarative,
P as createElement, P as createElement,
pt as createElementNS, pt as createElementNS,
mt as customElementRender, wt as customElementRender,
nt as customElementWithDDE, nt as customElementWithDDE,
Ot as dispatchEvent, Ct as dispatchEvent,
P as el, P as el,
pt as elNS, pt as elNS,
Q as elementAttribute, Q as elementAttribute,
nt as lifecyclesToEvents, nt as lifecyclesToEvents,
rt as observedAttributes, rt as observedAttributes,
_ as on, D as on,
dt as queue, dt as queue,
Z as registerReactivity, Z as registerReactivity,
D as scope, O as scope,
ht as simulateSlots lt as simulateSlots
}; };

1
docs/components/examples/customElement/dde.js
View File

@ -7,7 +7,6 @@ export class HTMLCustomElement extends HTMLElement{
static observedAttributes= [ "attr" ]; static observedAttributes= [ "attr" ];
connectedCallback(){ connectedCallback(){
customElementRender( customElementRender(
this,
this.attachShadow({ mode: "open" }), this.attachShadow({ mode: "open" }),
ddeComponent ddeComponent
); );

1
docs/components/examples/customElement/observedAttributes.js
View File

@ -11,7 +11,6 @@ export class HTMLCustomElement extends HTMLElement{
connectedCallback(){ connectedCallback(){
console.log(observedAttributes(this)); console.log(observedAttributes(this));
customElementRender( customElementRender(
this,
this.attachShadow({ mode: "open" }), this.attachShadow({ mode: "open" }),
ddeComponent, ddeComponent,
S.observedAttributes S.observedAttributes

8
docs/components/examples/customElement/shadowRoot.js
View File

@ -17,11 +17,7 @@ function ddeComponent(){
export class A extends HTMLElement{ export class A extends HTMLElement{
static tagName= "custom-element-without"; static tagName= "custom-element-without";
connectedCallback(){ connectedCallback(){
customElementRender( customElementRender(this, ddeComponent);
this,
this,
ddeComponent
);
} }
} }
customElementWithDDE(A); customElementWithDDE(A);
@ -30,7 +26,6 @@ export class B extends HTMLElement{
static tagName= "custom-element-open"; static tagName= "custom-element-open";
connectedCallback(){ connectedCallback(){
customElementRender( customElementRender(
this,
this.attachShadow({ mode: "open" }), this.attachShadow({ mode: "open" }),
ddeComponent ddeComponent
); );
@ -42,7 +37,6 @@ export class C extends HTMLElement{
static tagName= "custom-element-closed"; static tagName= "custom-element-closed";
connectedCallback(){ connectedCallback(){
customElementRender( customElementRender(
this,
this.attachShadow({ mode: "closed" }), this.attachShadow({ mode: "closed" }),
ddeComponent ddeComponent
); );

2
docs/components/examples/customElement/simulateSlots.js
View File

@ -8,7 +8,7 @@ export class HTMLCustomElement extends HTMLElement{
static tagName= "custom-slotting"; static tagName= "custom-slotting";
connectedCallback(){ connectedCallback(){
const c= ()=> simulateSlots(this, ddeComponent()); const c= ()=> simulateSlots(this, ddeComponent());
customElementRender(this, this, c); customElementRender(this, c);
} }
} }
customElementWithDDE(HTMLCustomElement); customElementWithDDE(HTMLCustomElement);

44
docs/components/examples/introducing/helloWorld.js
View File

@ -1,18 +1,36 @@
import { el } from "deka-dom-el"; import { el, on } from "deka-dom-el";
import { S } from "deka-dom-el/signals"; import { S } from "deka-dom-el/signals";
document.body.append( document.body.append(
el(HelloWorldComponent) el(HelloWorldComponent, { initial: "🚀" })
); );
function HelloWorldComponent(){ /** @typedef {"🎉" | "🚀"} Emoji */
const clicksS= S(0); // A /** @param {{ initial: Emoji }} attrs */
function HelloWorldComponent({ initial }){
const clicks= S(0);
const emoji= S(initial);
/** @param {HTMLOptionElement} el */
const isSelected= el=> (el.selected= el.value===initial);
// @ts-expect-error 2339: The <select> has only two options with {@link Emoji}
const onChange= on("change", event=> emoji(event.target.value));
return el().append( return el().append(
el("p", S(()=> el("p", {
"Hello World "+"🎉".repeat(clicksS()) // B textContent: S(() => `Hello World ${emoji().repeat(clicks())}`),
)), className: "example",
el("button", { ariaLive: "polite", //OR ariaset: { live: "polite" },
type: "button", dataset: { example: "Example" }, //OR dataExample: "Example",
onclick: ()=> clicksS(clicksS()+1), // C }),
textContent: "Fire", el("button",
}) { textContent: "Fire", type: "button" },
) on("click", ()=> clicks(clicks() + 1)),
on("keyup", ()=> clicks(clicks() - 2)),
),
el("select", null, onChange).append(
el(OptionComponent, "🎉", isSelected),//OR { textContent: "🎉" }
el(OptionComponent, "🚀", isSelected),//OR { textContent: "🚀" }
)
);
}
function OptionComponent({ textContent }){
return el("option", { value: textContent, textContent })
} }

6
docs/components/mnemonic/customElement-init.js
View File

@ -4,8 +4,8 @@ import { mnemonicUl } from "../mnemonicUl.html.js";
export function mnemonic(){ export function mnemonic(){
return mnemonicUl().append( return mnemonicUl().append(
el("li").append( el("li").append(
el("code", "customElementRender(<custom-element>, <connect-target>, <render-function>[, <properties>])"), el("code", "customElementRender(<connect-target>, <render-function>[, <properties>])"),
" — use function to render DOM structure for given <custom-element>", " — use function to render DOM structure for given custom element (or its Shadow DOM)",
), ),
el("li").append( el("li").append(
el("code", "customElementWithDDE(<custom-element>)"), el("code", "customElementWithDDE(<custom-element>)"),
@ -24,7 +24,7 @@ export function mnemonic(){
" — convert lifecycle methods to events, can be also used as decorator", " — convert lifecycle methods to events, can be also used as decorator",
), ),
el("li").append( el("li").append(
el("code", "simulateSlots(<class-instance>, <body>[, <mapper>])"), el("code", "simulateSlots(<class-instance>, <body>)"),
" — simulate slots for Custom Elements without shadow DOM", " — simulate slots for Custom Elements without shadow DOM",
), ),
el("li").append( el("li").append(

6
examples/components/webComponent.js
View File

@ -12,7 +12,7 @@ export class CustomHTMLTestElement extends HTMLElement{
} }
connectedCallback(){ connectedCallback(){
if(!this.hasAttribute("pre-name")) this.setAttribute("pre-name", "default"); if(!this.hasAttribute("pre-name")) this.setAttribute("pre-name", "default");
customElementRender(this, this.attachShadow({ mode: "open" }), this.render, this.attributes) customElementRender(this.attachShadow({ mode: "open" }), this.render, this.attributes)
} }
attributes(element){ attributes(element){
@ -22,7 +22,7 @@ export class CustomHTMLTestElement extends HTMLElement{
render({ name, preName, test }){ render({ name, preName, test }){
console.log(scope.state); console.log(scope.state);
scope.host( scope.host(
on.connected(()=> console.log(CustomHTMLTestElement)), on.connected(console.log),
on.attributeChanged(e=> console.log(e)), on.attributeChanged(e=> console.log(e)),
on.disconnected(()=> console.log(CustomHTMLTestElement)) on.disconnected(()=> console.log(CustomHTMLTestElement))
); );
@ -63,7 +63,7 @@ export class CustomSlottingHTMLElement extends HTMLElement{
)); ));
} }
connectedCallback(){ connectedCallback(){
customElementRender(this, this, this.render); customElementRender(this, this.render);
} }
} }
customElementWithDDE(CustomSlottingHTMLElement); customElementWithDDE(CustomSlottingHTMLElement);

1
index.d.ts vendored
View File

@ -227,7 +227,6 @@ export function customElementRender<
EL extends HTMLElement, EL extends HTMLElement,
P extends any = Record<string, string | ddeSignal<string>> P extends any = Record<string, string | ddeSignal<string>>
>( >(
custom_element: EL,
target: ShadowRoot | EL, target: ShadowRoot | EL,
render: (props: P)=> SupportedElement | DocumentFragment, render: (props: P)=> SupportedElement | DocumentFragment,
props?: P | ((el: EL)=> P) props?: P | ((el: EL)=> P)

3
src/customElement.js
View File

@ -1,7 +1,8 @@
import { keyLTE, evc, evd, eva } from "./dom-common.js"; import { keyLTE, evc, evd, eva } from "./dom-common.js";
import { scope } from "./dom.js"; import { scope } from "./dom.js";
import { c_ch_o } from "./events-observer.js"; import { c_ch_o } from "./events-observer.js";
export function customElementRender(custom_element, target, render, props= observedAttributes){ export function customElementRender(target, render, props= observedAttributes){
const custom_element= target.host || target;
scope.push({ scope.push({
scope: custom_element, scope: custom_element,
host: (...c)=> c.length ? c.forEach(c=> c(custom_element)) : custom_element host: (...c)=> c.length ? c.forEach(c=> c(custom_element)) : custom_element

1
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';
//TODO: add type, docs ≡ make it public
export function queue(promise){ return env.q(promise); } export function queue(promise){ return env.q(promise); }
/** @type {{ scope: object, prevent: boolean, host: function }[]} */ /** @type {{ scope: object, prevent: boolean, host: function }[]} */
const scopes= [ { const scopes= [ {

1
src/events.js
View File

@ -8,6 +8,7 @@ export function dispatchEvent(name, options, host){
d.unshift(element); d.unshift(element);
element= typeof host==="function"? host() : host; element= typeof host==="function"? host() : host;
} }
//TODO: what about re-emmitting?
const event= d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options); const event= d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options);
return element.dispatchEvent(event); return element.dispatchEvent(event);
}; };