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

🐛 ⚡ Updated types and removed empty

Browse Source
This commit is contained in:
Jan Andrle 2024-12-11 16:21:17 +01:00
parent bcddc75f56
commit 4c2edcf58c
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
9 changed files with 486 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,7 +70,7 @@ var A = [{
}, },
host: (t) => t ? t(d.D.body) : d.D.body, host: (t) => t ? t(d.D.body) : d.D.body,
prevent: !0 prevent: !0
}], m = { }], x = {
get current() { get current() {
return A[A.length - 1]; return A[A.length - 1];
}, },
@ -106,15 +106,17 @@ function P(t, e, ...n) {
let r = W(this), o = 0, c, i; let r = W(this), o = 0, c, i;
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, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((h) => h(i)), void 0) : i }), c = t(e || void 0); o = 1;
let a = c instanceof d.F; let a = (...p) => p.length ? (o === 1 ? n.unshift(...p) : p.forEach((m) => m(i)), void 0) : i;
x.push({ scope: t, host: a }), c = t(e || void 0);
let h = c instanceof d.F;
if (c.nodeName === "#comment") break; if (c.nodeName === "#comment") break;
let l = P.mark({ let v = P.mark({
type: "component", type: "component",
name: t.name, name: t.name,
host: a ? "this" : "parentElement" host: h ? "this" : "parentElement"
}); });
c.prepend(l), a && (i = l); c.prepend(v), h && (i = v);
break; break;
} }
case t === "#text": case t === "#text":
@ -129,23 +131,28 @@ function P(t, e, ...n) {
case !c: case !c:
c = j.call(this, d.D.createElement(t), e); c = j.call(this, d.D.createElement(t), e);
} }
return ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c; return ht(c), i || (i = c), n.forEach((a) => a(i)), o && x.pop(), o = 2, c;
} }
P.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
return e && (r.end = d.D.createComment("</dde:mark>")), r;
};
function Wt(t, e, n) { function Wt(t, e, n) {
typeof e != "object" && (n = e, e = 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); 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, { if (t.append = new Proxy(t.append, {
apply(i, a, l) { apply(i, a, h) {
if (l[0] === e) return i.apply(t, l); if (h[0] === e) return i.apply(t, h);
if (!l.length) return t; if (!h.length) return t;
let v = d.D.createDocumentFragment(); let v = d.D.createDocumentFragment();
for (let h of l) { for (let p of h) {
if (!h || !h.slot) { if (!p || !p.slot) {
c && v.append(h); c && v.append(p);
continue; continue;
} }
let x = h.slot, w = o[x]; let m = p.slot, y = o[m];
vt(h, "remove", "slot"), w && (bt(w, h, n), Reflect.deleteProperty(o, x)); 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; return c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;
} }
@ -158,16 +165,14 @@ function Wt(t, e, n) {
function bt(t, e, n) { function bt(t, e, n) {
n && n(t, e); n && n(t, e);
try { try {
t.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } })); t.replaceWith(j(e, {
className: [e.className, t.className],
dataset: { ...t.dataset }
}));
} catch { } catch {
t.replaceWith(e); t.replaceWith(e);
} }
} }
P.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
return e && (r.end = d.D.createComment("</dde:mark>")), r;
};
function qt(t) { function qt(t) {
let e = this; let e = this;
return function(...r) { return function(...r) {
@ -190,7 +195,7 @@ function nt(t, e, n) {
t, t,
e, e,
n, n,
(a, l) => nt.call(c, t, a, l) (a, h) => nt.call(c, t, a, h)
); );
let [i] = e; let [i] = e;
if (i === "=") return r(e.slice(1), n); if (i === "=") return r(e.slice(1), n);
@ -208,7 +213,7 @@ function nt(t, e, n) {
case "dataset": case "dataset":
return I(o, n, et.bind(null, t[e])); return I(o, n, et.bind(null, t[e]));
case "ariaset": case "ariaset":
return I(o, n, (a, l) => r("aria-" + a, l)); return I(o, n, (a, h) => r("aria-" + a, h));
case "classList": case "classList":
return gt.call(c, t, n); return gt.call(c, t, n);
} }
@ -227,9 +232,6 @@ function gt(t, e) {
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
), t; ), t;
} }
function Ft(t) {
return Array.from(t.children).forEach((e) => e.remove()), t;
}
function vt(t, e, n, r) { function vt(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);
} }
@ -264,21 +266,21 @@ function et(t, e, n) {
} }
// src/events-observer.js // src/events-observer.js
var D = d.M ? yt() : new Proxy({}, { var D = d.M ? wt() : new Proxy({}, {
get() { get() {
return () => { return () => {
}; };
} }
}); });
function yt() { function wt() {
let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) { let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
for (let f of u) for (let f of u)
if (f.type === "childList") { if (f.type === "childList") {
if (h(f.addedNodes, !0)) { if (p(f.addedNodes, !0)) {
s(); s();
continue; continue;
} }
x(f.removedNodes, !0) && s(); m(f.removedNodes, !0) && s();
} }
}, r = new d.M(n(a)); }, r = new d.M(n(a));
return { return {
@ -327,35 +329,35 @@ function yt() {
function a() { function a() {
!e || t.size || (e = !1, r.disconnect()); !e || t.size || (e = !1, r.disconnect());
} }
function l() { function h() {
return new Promise(function(s) { return new Promise(function(s) {
(requestIdleCallback || requestAnimationFrame)(s); (requestIdleCallback || requestAnimationFrame)(s);
}); });
} }
async function v(s) { async function v(s) {
t.size > 30 && await l(); t.size > 30 && await h();
let u = []; let u = [];
if (!(s instanceof Node)) return u; if (!(s instanceof Node)) return u;
for (let f of t.keys()) for (let f of t.keys())
f === s || !(f instanceof Node) || s.contains(f) && u.push(f); f === s || !(f instanceof Node) || s.contains(f) && u.push(f);
return u; return u;
} }
function h(s, u) { function p(s, u) {
let f = !1; let f = !1;
for (let b of s) { for (let b of s) {
if (u && v(b).then(h), !t.has(b)) continue; if (u && v(b).then(p), !t.has(b)) continue;
let N = t.get(b); let N = t.get(b);
N.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0); N.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);
} }
return f; return f;
} }
function x(s, u) { function m(s, u) {
let f = !1; let f = !1;
for (let b of s) for (let b of s)
u && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0); u && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);
return f; return f;
} }
function w(s) { function y(s) {
return () => { return () => {
s.isConnected || (s.dispatchEvent(new Event(C)), t.delete(s)); s.isConnected || (s.dispatchEvent(new Event(C)), t.delete(s));
}; };
@ -363,17 +365,17 @@ function yt() {
} }
// src/customElement.js // src/customElement.js
function Zt(t, e, n, r = _t) { function Jt(t, e, n, r = _t) {
m.push({ x.push({
scope: t, scope: t,
host: (...i) => i.length ? i.forEach((a) => a(t)) : t host: (...i) => i.length ? i.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 || wt(t); o || yt(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 }), m.pop(), e.append(c); return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), x.pop(), e.append(c);
} }
function wt(t) { function yt(t) {
return J(t.prototype, "connectedCallback", function(e, n, r) { 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) {
@ -396,43 +398,43 @@ function _t(t) {
} }
// src/events.js // src/events.js
function Qt(t, e, n) { function Kt(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 i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
return o.dispatchEvent(i); return o.dispatchEvent(i);
}; };
} }
function y(t, e, n) { function w(t, e, n) {
return function(o) { return function(o) {
return o.addEventListener(t, e, n), o; return o.addEventListener(t, e, n), o;
}; };
} }
var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
y.connected = function(t, e) { w.connected = function(t, e) {
return e = it(e), function(r) { return e = it(e), function(r) {
return r.addEventListener(_, t, e), r[O] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r); return r.addEventListener(_, t, e), r[O] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);
}; };
}; };
y.disconnected = function(t, e) { w.disconnected = function(t, e) {
return e = it(e), function(r) { return e = it(e), function(r) {
return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r; return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;
}; };
}; };
var Z = /* @__PURE__ */ new WeakMap(); var Z = /* @__PURE__ */ new WeakMap();
y.disconnectedAsAbort = function(t) { w.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(y.disconnected(() => e.abort())), e; return Z.set(t, e), t(w.disconnected(() => e.abort())), e;
}; };
var At = /* @__PURE__ */ new WeakSet(); var At = /* @__PURE__ */ new WeakSet();
y.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(M, t, e), r[O] || At.has(r) || !d.M) return r;
let o = new d.M(function(i) { let o = new d.M(function(i) {
for (let { attributeName: a, target: l } of i) for (let { attributeName: a, target: h } of i)
l.dispatchEvent( h.dispatchEvent(
new CustomEvent(M, { detail: [a, l.getAttribute(a)] }) new CustomEvent(M, { detail: [a, h.getAttribute(a)] })
); );
}); });
return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
@ -440,10 +442,10 @@ y.attributeChanged = function(t, e) {
}; };
// src/signals-lib.js // src/signals-lib.js
var p = "__dde_signal"; var l = "__dde_signal";
function z(t) { function z(t) {
try { try {
return T(t, p); return T(t, l);
} catch { } catch {
return !1; return !1;
} }
@ -460,10 +462,10 @@ function E(t, e) {
for (let a of c) for (let a of c)
i.has(a) || L(a, r); i.has(a) || L(a, r);
}; };
return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n; return g.set(n[l], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
} }
E.action = function(t, e, ...n) { E.action = function(t, e, ...n) {
let r = t[p], { actions: o } = r; let r = t[l], { actions: o } = r;
if (!o || !(e in o)) 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;
@ -482,8 +484,8 @@ E.symbols = {
}; };
E.clear = function(...t) { E.clear = function(...t) {
for (let n of t) { for (let n of t) {
let r = n[p]; let r = n[l];
r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]); r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[l]);
} }
function e(n, r) { function e(n, r) {
r.listeners.forEach((o) => { r.listeners.forEach((o) => {
@ -497,22 +499,22 @@ var R = "__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 = P.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment();
o.append(n, r); o.append(n, r);
let { current: c } = m, i = {}, a = (l) => { let { current: c } = x, i = {}, a = (h) => {
if (!n.parentNode || !r.parentNode) if (!n.parentNode || !r.parentNode)
return L(t, a); return L(t, a);
let v = i; let v = i;
i = {}, m.push(c); i = {}, x.push(c);
let h = e(l, function(u, f) { let p = e(h, function(u, f) {
let b; let b;
return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b; return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;
}); });
m.pop(), Array.isArray(h) || (h = [h]); x.pop(), Array.isArray(p) || (p = [p]);
let x = document.createComment(""); let m = document.createComment("");
h.push(x), n.after(...h); p.push(m), n.after(...p);
let w; let y;
for (; (w = x.nextSibling) && w !== r; ) for (; (y = m.nextSibling) && y !== r; )
w.remove(); y.remove();
x.remove(), n.isConnected && St(c.host()); m.remove(), n.isConnected && St(c.host());
}; };
return Q(t, a), ft(t, a, n, e), a(t()), o; return Q(t, a), ft(t, a, n, e), a(t()), o;
}; };
@ -535,12 +537,12 @@ function Ct(t) {
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 = F(t, Ct(e));
return y.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, i] = o, a = this[G][c];
if (a) return E.action(a, "_set", i); if (a) return E.action(a, "_set", i);
})(t), y.disconnected(function() { })(t), w.disconnected(function() {
/*! This removes all signals mapped to attributes (`S.observedAttributes`). /*! 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])); E.clear(...Object.values(this[G]));
@ -559,15 +561,15 @@ var ut = {
} }
}; };
function ft(t, e, ...n) { function ft(t, e, ...n) {
let { current: r } = m; let { current: r } = x;
r.prevent || r.host(function(o) { r.prevent || r.host(function(o) {
o[R] || (o[R] = [], y.disconnected( o[R] || (o[R] = [], w.disconnected(
() => ( () => (
/*! /*!
* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?). * 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[p] && c[p].host && c[p].host() === o)) o[R].forEach(([[c, i]]) => L(c, i, c[l] && c[l].host && c[l].host() === o))
) )
)(o)), o[R].push([[t, e], ...n]); )(o)), o[R].push([[t, e], ...n]);
}); });
@ -593,8 +595,8 @@ function at(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 } = m; let { host: i } = x;
return Reflect.defineProperty(t, p, { return Reflect.defineProperty(t, l, {
value: { value: {
value: e, value: e,
actions: n, actions: n,
@ -607,28 +609,28 @@ function at(t, e, n, r = !1) {
enumerable: !1, enumerable: !1,
writable: !1, writable: !1,
configurable: !0 configurable: !0
}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t; }), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], Dt), t;
} }
function Rt() { function Rt() {
return H[H.length - 1]; return H[H.length - 1];
} }
function K(t) { function K(t) {
if (!t[p]) return; if (!t[l]) return;
let { value: e, listeners: n } = t[p], r = Rt(); let { value: e, listeners: n } = t[l], r = Rt();
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 dt(t, e, n) { function dt(t, e, n) {
if (!t[p]) return; if (!t[l]) return;
let r = t[p]; let r = t[l];
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 Q(t, e) {
if (t[p]) if (t[l])
return t[p].listeners.add(e); return t[l].listeners.add(e);
} }
function L(t, e, n) { function L(t, e, n) {
let r = t[p]; let r = t[l];
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) {
@ -651,19 +653,18 @@ globalThis.dde= {
classListDeclarative: gt, classListDeclarative: gt,
createElement: P, createElement: P,
createElementNS: qt, createElementNS: qt,
customElementRender: Zt, customElementRender: Jt,
customElementWithDDE: wt, customElementWithDDE: yt,
dispatchEvent: Qt, dispatchEvent: Kt,
el: P, el: P,
elNS: qt, elNS: qt,
elementAttribute: vt, elementAttribute: vt,
empty: Ft,
isSignal: z, isSignal: z,
lifecyclesToEvents: wt, lifecyclesToEvents: yt,
observedAttributes: _t, observedAttributes: _t,
on: y, on: w,
registerReactivity: B, registerReactivity: B,
scope: m, scope: x,
signal: E, signal: E,
simulateSlots: Wt simulateSlots: Wt
}; };

107
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 m = {
isSignal(t) { isSignal(t) {
return !1; return !1;
}, },
@ -10,15 +10,15 @@ var C = {
} }
}; };
function V(t, e = !0) { function V(t, e = !0) {
return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t); return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t);
} }
function L(t) { function L(t) {
return C.isPrototypeOf(t) && t !== C ? t : C; return m.isPrototypeOf(t) && t !== m ? t : m;
} }
// src/helpers.js // src/helpers.js
var q = (...t) => Object.prototype.hasOwnProperty.call(...t); var q = (...t) => Object.prototype.hasOwnProperty.call(...t);
function E(t) { function x(t) {
return typeof t > "u"; return typeof t > "u";
} }
function N(t, e) { function N(t, e) {
@ -50,14 +50,14 @@ var a = {
M: globalThis.MutationObserver M: globalThis.MutationObserver
}; };
function K(t, e, n) { function K(t, e, n) {
if (Reflect.set(t, e, n), !!E(n)) { if (Reflect.set(t, e, n), !!x(n)) {
if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined") if (Reflect.deleteProperty(t, e), t instanceof a.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 x = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged"; var y = "__dde_lifecyclesToEvents", g = "dde:connected", w = "dde:disconnected", D = "dde:attributeChanged";
// src/dom.js // src/dom.js
var v = [{ var v = [{
@ -102,15 +102,17 @@ function j(t, e, ...n) {
let r = L(this), o = 0, c, f; let r = L(this), o = 0, c, f;
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, S.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((h) => h(f)), void 0) : f }), c = t(e || void 0); o = 1;
let d = c instanceof a.F; let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(f)), void 0) : f;
S.push({ scope: t, host: d }), c = t(e || void 0);
let p = c instanceof a.F;
if (c.nodeName === "#comment") break; if (c.nodeName === "#comment") break;
let p = j.mark({ let b = j.mark({
type: "component", type: "component",
name: t.name, name: t.name,
host: d ? "this" : "parentElement" host: p ? "this" : "parentElement"
}); });
c.prepend(p), d && (f = p); c.prepend(b), p && (f = b);
break; break;
} }
case t === "#text": case t === "#text":
@ -127,6 +129,11 @@ function j(t, e, ...n) {
} }
return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c; return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c;
} }
j.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
return e && (r.end = a.D.createComment("</dde:mark>")), r;
};
function bt(t, e, n) { function bt(t, e, n) {
typeof e != "object" && (n = e, e = 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); let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((f, d) => Reflect.set(f, d.name || r, d) && f, {}), c = q(o, r);
@ -135,13 +142,13 @@ function bt(t, e, n) {
if (p[0] === e) return f.apply(t, p); if (p[0] === e) return f.apply(t, p);
if (!p.length) return t; if (!p.length) return t;
let b = a.D.createDocumentFragment(); let b = a.D.createDocumentFragment();
for (let h of p) { for (let l of p) {
if (!h || !h.slot) { if (!l || !l.slot) {
c && b.append(h); c && b.append(l);
continue; continue;
} }
let A = h.slot, _ = o[A]; let E = l.slot, _ = o[E];
tt(h, "remove", "slot"), _ && (X(_, h, n), Reflect.deleteProperty(o, A)); 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; return c && (o[r].replaceWith(b), Reflect.deleteProperty(o, r)), t.append = f, t;
} }
@ -154,16 +161,14 @@ function bt(t, e, n) {
function X(t, e, n) { function X(t, e, n) {
n && n(t, e); n && n(t, e);
try { try {
t.replaceWith(O(e, { className: [e.className, t.className], dataset: { ...t.dataset } })); t.replaceWith(O(e, {
className: [e.className, t.className],
dataset: { ...t.dataset }
}));
} catch { } catch {
t.replaceWith(e); t.replaceWith(e);
} }
} }
j.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
return e && (r.end = a.D.createComment("</dde:mark>")), r;
};
function gt(t) { function gt(t) {
let e = this; let e = this;
return function(...r) { return function(...r) {
@ -223,16 +228,13 @@ function Y(t, 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) {
return Array.from(t.children).forEach((e) => e.remove()), t;
}
function tt(t, e, n, r) { function tt(t, e, n, r) {
return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
} }
function et(t, e) { function et(t, e) {
if (!(e in t)) return !1; if (!(e in t)) return !1;
let n = I(t, e); let n = I(t, e);
return !E(n.set); return !x(n.set);
} }
function I(t, e) { function I(t, e) {
if (t = Object.getPrototypeOf(t), !t) return {}; if (t = Object.getPrototypeOf(t), !t) return {};
@ -249,18 +251,18 @@ function Z(t) {
return Array.isArray(t) ? t.filter(Boolean).join(" ") : t; return Array.isArray(t) ? t.filter(Boolean).join(" ") : t;
} }
function nt(t, e, n, r) { function nt(t, e, n, r) {
return t[(E(r) ? "remove" : "set") + e](n, Z(r)); return t[(x(r) ? "remove" : "set") + e](n, Z(r));
} }
function rt(t, e, n, r, o = null) { function rt(t, e, n, r, o = null) {
return t[(E(r) ? "remove" : "set") + e + "NS"](o, n, Z(r)); return t[(x(r) ? "remove" : "set") + e + "NS"](o, n, Z(r));
} }
function H(t, e, n) { function H(t, e, n) {
if (Reflect.set(t, e, n), !!E(n)) if (Reflect.set(t, e, n), !!x(n))
return Reflect.deleteProperty(t, e); return Reflect.deleteProperty(t, e);
} }
// src/events-observer.js // src/events-observer.js
var w = a.M ? ot() : new Proxy({}, { var A = a.M ? ot() : new Proxy({}, {
get() { get() {
return () => { return () => {
}; };
@ -270,11 +272,11 @@ function ot() {
let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) { let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) {
for (let s of u) for (let s of u)
if (s.type === "childList") { if (s.type === "childList") {
if (h(s.addedNodes, !0)) { if (l(s.addedNodes, !0)) {
i(); i();
continue; continue;
} }
A(s.removedNodes, !0) && i(); E(s.removedNodes, !0) && i();
} }
}, r = new a.M(n(d)); }, r = new a.M(n(d));
return { return {
@ -336,52 +338,52 @@ function ot() {
s === i || !(s instanceof Node) || i.contains(s) && u.push(s); s === i || !(s instanceof Node) || i.contains(s) && u.push(s);
return u; return u;
} }
function h(i, u) { function l(i, u) {
let s = !1; let s = !1;
for (let l of i) { for (let h of i) {
if (u && b(l).then(h), !t.has(l)) continue; if (u && b(h).then(l), !t.has(h)) continue;
let m = t.get(l); let C = t.get(h);
m.length_c && (l.dispatchEvent(new Event(g)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(l), s = !0); C.length_c && (h.dispatchEvent(new Event(g)), C.connected = /* @__PURE__ */ new WeakSet(), C.length_c = 0, C.length_d || t.delete(h), s = !0);
} }
return s; return s;
} }
function A(i, u) { function E(i, u) {
let s = !1; let s = !1;
for (let l of i) for (let h of i)
u && b(l).then(A), !(!t.has(l) || !t.get(l).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(l)), s = !0); u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0);
return s; return s;
} }
function _(i) { function _(i) {
return () => { return () => {
i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i)); i.isConnected || (i.dispatchEvent(new Event(w)), t.delete(i));
}; };
} }
} }
// src/customElement.js // src/customElement.js
function Dt(t, e, n, r = it) { function mt(t, e, n, r = it) {
S.push({ S.push({
scope: t, scope: t,
host: (...f) => f.length ? f.forEach((d) => d(t)) : t host: (...f) => f.length ? f.forEach((d) => d(t)) : t
}), typeof r == "function" && (r = r.call(t, t)); }), typeof r == "function" && (r = r.call(t, t));
let o = t[x]; let o = t[y];
o || ct(t); o || ct(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, w.observe(e), { once: !0 }), S.pop(), e.append(c); return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(w, A.observe(e), { once: !0 }), S.pop(), e.append(c);
} }
function ct(t) { function ct(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(g));
}), 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(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(D, { n.dispatchEvent(new CustomEvent(D, {
detail: [o, c] detail: [o, c]
})), e.apply(n, r); })), e.apply(n, r);
}), t.prototype[x] = !0, t; }), t.prototype[y] = !0, t;
} }
function k(t, e, n) { function k(t, e, n) {
t[e] = new Proxy(t[e] || (() => { t[e] = new Proxy(t[e] || (() => {
@ -392,7 +394,7 @@ function it(t) {
} }
// src/events.js // src/events.js
function _t(t, e, n) { function Rt(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 f = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
@ -407,12 +409,12 @@ function R(t, e, n) {
var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
R.connected = function(t, e) { R.connected = function(t, e) {
return e = G(e), function(r) { return e = G(e), function(r) {
return r.addEventListener(g, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r); return r.addEventListener(g, t, e), r[y] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.onConnected(r, t), r);
}; };
}; };
R.disconnected = function(t, e) { R.disconnected = function(t, e) {
return e = G(e), function(r) { return e = G(e), function(r) {
return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r; return r.addEventListener(w, t, e), r[y] || N(e.signal, () => A.offDisconnected(r, t)) && A.onDisconnected(r, t), r;
}; };
}; };
var W = /* @__PURE__ */ new WeakMap(); var W = /* @__PURE__ */ new WeakMap();
@ -424,7 +426,7 @@ R.disconnectedAsAbort = function(t) {
var st = /* @__PURE__ */ new WeakSet(); var st = /* @__PURE__ */ new WeakSet();
R.attributeChanged = function(t, e) { R.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[x] || st.has(r) || !a.M) return r; if (r.addEventListener(D, t, e), r[y] || st.has(r) || !a.M) return r;
let o = new a.M(function(f) { let o = new a.M(function(f) {
for (let { attributeName: d, target: p } of f) for (let { attributeName: d, target: p } of f)
p.dispatchEvent( p.dispatchEvent(
@ -442,13 +444,12 @@ globalThis.dde= {
classListDeclarative: Y, classListDeclarative: Y,
createElement: j, createElement: j,
createElementNS: gt, createElementNS: gt,
customElementRender: Dt, customElementRender: mt,
customElementWithDDE: ct, customElementWithDDE: ct,
dispatchEvent: _t, dispatchEvent: Rt,
el: j, el: j,
elNS: gt, elNS: gt,
elementAttribute: tt, elementAttribute: tt,
empty: vt,
lifecyclesToEvents: ct, lifecyclesToEvents: ct,
observedAttributes: it, observedAttributes: it,
on: R, on: R,

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

@ -1,13 +1,13 @@
declare global{ /* ddeSignal */ } declare global{ /* ddeSignal */ }
type CustomElementTagNameMap= { '#text': Text, '#comment': Comment } type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
type SupportedElement= type SupportedElement=
HTMLElementTagNameMap[keyof HTMLElementTagNameMap] HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
| SVGElementTagNameMap[keyof SVGElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap]
| MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
| CustomElementTagNameMap[keyof CustomElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]
declare global { declare global {
type ddeComponentAttributes= Record<any, any> | undefined; type ddeComponentAttributes= Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
} }
type PascalCase= type PascalCase=
`${Capitalize<string>}${string}`; `${Capitalize<string>}${string}`;
@ -15,43 +15,64 @@ type AttrsModified= {
/** /**
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API). * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
*/ */
style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }> style: string | Partial<CSSStyleDeclaration> | ddeSignal<string>
| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
/** /**
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others. * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
* In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
* for others.
*/ */
classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>, classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
/** /**
* By default simiral to `className`, but also supports `string[]` * By default simiral to `className`, but also supports `string[]`
* */ * */
className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[]; className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
/**
* Used by the dataset HTML attribute to represent data for custom attributes added to elements.
* Values are converted to string (see {@link DOMStringMap}).
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
* */
dataset: Record<string,string|number|ddeSignal<string|number>>,
/** /**
* Sets `aria-*` simiraly to `dataset` * Sets `aria-*` simiraly to `dataset`
* */ * */
ariaset: Record<string,string|ddeSignal<string>>, ariaset: Record<string,string|ddeSignal<string>>,
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any> } & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>>
& Record<`.${string}`, any>
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>; type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
/** /**
* Just element attributtes * Just element attributtes
* *
* In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)). * In most cases, you can use native propertie such as
* [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
* (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
* *
* There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives. * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
* @private * @private
*/ */
type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & AttrsModified> & Record<string, any>; type ElementAttributes<T extends SupportedElement>= Partial<{
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
} & AttrsModified> & Record<string, any>;
export function classListDeclarative<El extends SupportedElement>(
element: El,
classList: AttrsModified["classList"]
): El
export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT] export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(
element: El,
attr: ATT,
value: ElementAttributes<El>[ATT]
): ElementAttributes<El>[ATT]
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
type textContent= string | ddeSignal<string>; type textContent= string | ddeSignal<string>;
export function el< export function el<
TAG extends keyof ExtendedHTMLElementTagNameMap, TAG extends keyof ExtendedHTMLElementTagNameMap,
EL extends ExtendedHTMLElementTagNameMap[TAG]
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<EL> | textContent, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | textContent,
...addons: ddeElementAddon<EL>[] ...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[], // TODO: for now addons must have the same element
): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement ): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
export function el( export function el(
tag_name?: "<>", tag_name?: "<>",
@ -68,7 +89,9 @@ export function el<
component: C, component: C,
attrs?: Parameters<C>[0] | textContent, attrs?: Parameters<C>[0] | textContent,
...addons: ddeElementAddon<ReturnType<C>>[] ...addons: ddeElementAddon<ReturnType<C>>[]
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType<C> : ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement ) ): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
? ReturnType<C>
: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
export { el as createElement } export { el as createElement }
export function elNS( export function elNS(
@ -78,8 +101,8 @@ 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<EL> | textContent, attrs?: ElementAttributes<NoInfer<EL>> | textContent,
...addons: ddeElementAddon<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(
namespace: "http://www.w3.org/1998/Math/MathML" namespace: "http://www.w3.org/1998/Math/MathML"
@ -88,8 +111,10 @@ 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?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean }>, attrs?: string | textContent | Partial<{
...addons: ddeElementAddon<EL>[] [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
}>,
...addons: ddeElementAddon<NoInfer<EL>>[]
)=> ddeMathMLElement )=> ddeMathMLElement
export function elNS( export function elNS(
namespace: string namespace: string
@ -106,36 +131,45 @@ export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
* */ * */
type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void; type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void;
/** Simulate slots for ddeComponents */ /** Simulate slots for ddeComponents */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL, mapper?: simulateSlotsMapper): EL export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
root: EL,
mapper?: simulateSlotsMapper
): EL
/** /**
* Simulate slots in Custom Elements without using `shadowRoot`. * Simulate slots in Custom Elements without using `shadowRoot`.
* @param el Custom Element root element * @param el Custom Element root element
* @param body Body of the custom element * @param body Body of the custom element
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL, mapper?: simulateSlotsMapper): EL export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
el: HTMLElement,
body: EL, mapper?: simulateSlotsMapper
): EL
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
(element: SupportedElement, data?: any)=> void; (element: SupportedElement, data?: any)=> void;
export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)): export function dispatchEvent(
(data?: any)=> void; name: keyof DocumentEventMap | string,
options: EventInit | null,
element: SupportedElement | (()=> SupportedElement)
): (data?: any)=> void;
interface On{ interface On{
/** Listens to the DOM event. See {@link Document.addEventListener} */ /** Listens to the DOM event. See {@link Document.addEventListener} */
< <
EE extends ddeElementAddon<SupportedElement>, Event extends keyof DocumentEventMap,
El extends ( EE extends ddeElementAddon<infer El> ? El : never ), EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
Event extends keyof DocumentEventMap>( >(
type: Event, type: Event,
listener: (this: El, ev: DocumentEventMap[Event]) => any, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
) : EE; ) : EE;
< <
EE extends ddeElementAddon<SupportedElement>, EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
El extends ( EE extends ddeElementAddon<infer El> ? El : never )>( >(
type: string, type: string,
listener: (this: El, ev: Event | CustomEvent ) => any, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
) : EE; ) : EE;
/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
connected< connected<
EE extends ddeElementAddon<SupportedElement>, EE extends ddeElementAddon<SupportedElement>,
El extends ( EE extends ddeElementAddon<infer El> ? El : never ) El extends ( EE extends ddeElementAddon<infer El> ? El : never )
@ -143,7 +177,7 @@ interface On{
listener: (this: El, event: CustomEvent<El>) => any, listener: (this: El, event: CustomEvent<El>) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
) : EE; ) : EE;
/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
disconnected< disconnected<
EE extends ddeElementAddon<SupportedElement>, EE extends ddeElementAddon<SupportedElement>,
El extends ( EE extends ddeElementAddon<infer El> ? El : never ) El extends ( EE extends ddeElementAddon<infer El> ? El : never )
@ -151,7 +185,7 @@ interface On{
listener: (this: El, event: CustomEvent<void>) => any, listener: (this: El, event: CustomEvent<void>) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
) : EE; ) : EE;
/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
attributeChanged< attributeChanged<
EE extends ddeElementAddon<SupportedElement>, EE extends ddeElementAddon<SupportedElement>,
El extends ( EE extends ddeElementAddon<infer El> ? El : never ) El extends ( EE extends ddeElementAddon<infer El> ? El : never )
@ -162,7 +196,12 @@ interface On{
} }
export const on: On; export const on: On;
type Scope= { scope: Node | Function | Object, host: ddeElementAddon<any>, custom_element: false | HTMLElement, prevent: boolean } type Scope= {
scope: Node | Function | Object,
host: ddeElementAddon<any>,
custom_element: false | HTMLElement,
prevent: boolean
};
/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */ /** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
export const scope: { export const scope: {
current: Scope, current: Scope,
@ -176,7 +215,7 @@ export const scope: {
* — `scope.host(on.connected(console.log))`. * — `scope.host(on.connected(console.log))`.
* */ * */
host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement, host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
state: Scope[], state: Scope[],
/** Adds new child scope. All attributes are inherited by default. */ /** Adds new child scope. All attributes are inherited by default. */
push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>, push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
@ -202,12 +241,12 @@ export function observedAttributes(custom_element: HTMLElement): Record<string,
/* TypeScript MEH */ /* TypeScript MEH */
declare global{ declare global{
type ddeAppend<el>= (...nodes: (Node | string)[])=> el; type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; } interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; } interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; } interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; } interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
interface ddeHTMLElementTagNameMap { interface ddeHTMLElementTagNameMap {
"a": ddeHTMLAnchorElement; "a": ddeHTMLAnchorElement;
"area": ddeHTMLAreaElement; "area": ddeHTMLAreaElement;
@ -350,6 +389,7 @@ declare global{
} }
} }
// editorconfig-checker-disable
interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; } interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; } interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; } interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
@ -477,6 +517,7 @@ interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTi
interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; } interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; } interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; } interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
// editorconfig-checker-enable
export type Signal<V, A>= (set?: V)=> V & A; export type Signal<V, A>= (set?: V)=> V & A;
type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void; type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
//type SymbolSignal= Symbol; //type SymbolSignal= Symbol;
@ -534,7 +575,7 @@ interface signal{
* */ * */
el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment; el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>; observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
} }
export const signal: signal; export const signal: signal;
export const S: signal; export const S: signal;

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

@ -68,7 +68,7 @@ var A = [{
}, },
host: (t) => t ? t(d.D.body) : d.D.body, host: (t) => t ? t(d.D.body) : d.D.body,
prevent: !0 prevent: !0
}], m = { }], x = {
get current() { get current() {
return A[A.length - 1]; return A[A.length - 1];
}, },
@ -104,15 +104,17 @@ function P(t, e, ...n) {
let r = W(this), o = 0, c, i; let r = W(this), o = 0, c, i;
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, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((h) => h(i)), void 0) : i }), c = t(e || void 0); o = 1;
let a = c instanceof d.F; let a = (...p) => p.length ? (o === 1 ? n.unshift(...p) : p.forEach((m) => m(i)), void 0) : i;
x.push({ scope: t, host: a }), c = t(e || void 0);
let h = c instanceof d.F;
if (c.nodeName === "#comment") break; if (c.nodeName === "#comment") break;
let l = P.mark({ let v = P.mark({
type: "component", type: "component",
name: t.name, name: t.name,
host: a ? "this" : "parentElement" host: h ? "this" : "parentElement"
}); });
c.prepend(l), a && (i = l); c.prepend(v), h && (i = v);
break; break;
} }
case t === "#text": case t === "#text":
@ -127,23 +129,28 @@ function P(t, e, ...n) {
case !c: case !c:
c = j.call(this, d.D.createElement(t), e); c = j.call(this, d.D.createElement(t), e);
} }
return ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c; return ht(c), i || (i = c), n.forEach((a) => a(i)), o && x.pop(), o = 2, c;
} }
P.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
return e && (r.end = d.D.createComment("</dde:mark>")), r;
};
function Wt(t, e, n) { function Wt(t, e, n) {
typeof e != "object" && (n = e, e = 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); 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, { if (t.append = new Proxy(t.append, {
apply(i, a, l) { apply(i, a, h) {
if (l[0] === e) return i.apply(t, l); if (h[0] === e) return i.apply(t, h);
if (!l.length) return t; if (!h.length) return t;
let v = d.D.createDocumentFragment(); let v = d.D.createDocumentFragment();
for (let h of l) { for (let p of h) {
if (!h || !h.slot) { if (!p || !p.slot) {
c && v.append(h); c && v.append(p);
continue; continue;
} }
let x = h.slot, w = o[x]; let m = p.slot, y = o[m];
vt(h, "remove", "slot"), w && (bt(w, h, n), Reflect.deleteProperty(o, x)); 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; return c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;
} }
@ -156,16 +163,14 @@ function Wt(t, e, n) {
function bt(t, e, n) { function bt(t, e, n) {
n && n(t, e); n && n(t, e);
try { try {
t.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } })); t.replaceWith(j(e, {
className: [e.className, t.className],
dataset: { ...t.dataset }
}));
} catch { } catch {
t.replaceWith(e); t.replaceWith(e);
} }
} }
P.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
return e && (r.end = d.D.createComment("</dde:mark>")), r;
};
function qt(t) { function qt(t) {
let e = this; let e = this;
return function(...r) { return function(...r) {
@ -188,7 +193,7 @@ function nt(t, e, n) {
t, t,
e, e,
n, n,
(a, l) => nt.call(c, t, a, l) (a, h) => nt.call(c, t, a, h)
); );
let [i] = e; let [i] = e;
if (i === "=") return r(e.slice(1), n); if (i === "=") return r(e.slice(1), n);
@ -206,7 +211,7 @@ function nt(t, e, n) {
case "dataset": case "dataset":
return I(o, n, et.bind(null, t[e])); return I(o, n, et.bind(null, t[e]));
case "ariaset": case "ariaset":
return I(o, n, (a, l) => r("aria-" + a, l)); return I(o, n, (a, h) => r("aria-" + a, h));
case "classList": case "classList":
return gt.call(c, t, n); return gt.call(c, t, n);
} }
@ -225,9 +230,6 @@ function gt(t, e) {
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
), t; ), t;
} }
function Ft(t) {
return Array.from(t.children).forEach((e) => e.remove()), t;
}
function vt(t, e, n, r) { function vt(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);
} }
@ -262,21 +264,21 @@ function et(t, e, n) {
} }
// src/events-observer.js // src/events-observer.js
var D = d.M ? yt() : new Proxy({}, { var D = d.M ? wt() : new Proxy({}, {
get() { get() {
return () => { return () => {
}; };
} }
}); });
function yt() { function wt() {
let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) { let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
for (let f of u) for (let f of u)
if (f.type === "childList") { if (f.type === "childList") {
if (h(f.addedNodes, !0)) { if (p(f.addedNodes, !0)) {
s(); s();
continue; continue;
} }
x(f.removedNodes, !0) && s(); m(f.removedNodes, !0) && s();
} }
}, r = new d.M(n(a)); }, r = new d.M(n(a));
return { return {
@ -325,35 +327,35 @@ function yt() {
function a() { function a() {
!e || t.size || (e = !1, r.disconnect()); !e || t.size || (e = !1, r.disconnect());
} }
function l() { function h() {
return new Promise(function(s) { return new Promise(function(s) {
(requestIdleCallback || requestAnimationFrame)(s); (requestIdleCallback || requestAnimationFrame)(s);
}); });
} }
async function v(s) { async function v(s) {
t.size > 30 && await l(); t.size > 30 && await h();
let u = []; let u = [];
if (!(s instanceof Node)) return u; if (!(s instanceof Node)) return u;
for (let f of t.keys()) for (let f of t.keys())
f === s || !(f instanceof Node) || s.contains(f) && u.push(f); f === s || !(f instanceof Node) || s.contains(f) && u.push(f);
return u; return u;
} }
function h(s, u) { function p(s, u) {
let f = !1; let f = !1;
for (let b of s) { for (let b of s) {
if (u && v(b).then(h), !t.has(b)) continue; if (u && v(b).then(p), !t.has(b)) continue;
let N = t.get(b); let N = t.get(b);
N.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0); N.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);
} }
return f; return f;
} }
function x(s, u) { function m(s, u) {
let f = !1; let f = !1;
for (let b of s) for (let b of s)
u && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0); u && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);
return f; return f;
} }
function w(s) { function y(s) {
return () => { return () => {
s.isConnected || (s.dispatchEvent(new Event(C)), t.delete(s)); s.isConnected || (s.dispatchEvent(new Event(C)), t.delete(s));
}; };
@ -361,17 +363,17 @@ function yt() {
} }
// src/customElement.js // src/customElement.js
function Zt(t, e, n, r = _t) { function Jt(t, e, n, r = _t) {
m.push({ x.push({
scope: t, scope: t,
host: (...i) => i.length ? i.forEach((a) => a(t)) : t host: (...i) => i.length ? i.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 || wt(t); o || yt(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 }), m.pop(), e.append(c); return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), x.pop(), e.append(c);
} }
function wt(t) { function yt(t) {
return J(t.prototype, "connectedCallback", function(e, n, r) { 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) {
@ -394,43 +396,43 @@ function _t(t) {
} }
// src/events.js // src/events.js
function Qt(t, e, n) { function Kt(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 i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
return o.dispatchEvent(i); return o.dispatchEvent(i);
}; };
} }
function y(t, e, n) { function w(t, e, n) {
return function(o) { return function(o) {
return o.addEventListener(t, e, n), o; return o.addEventListener(t, e, n), o;
}; };
} }
var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
y.connected = function(t, e) { w.connected = function(t, e) {
return e = it(e), function(r) { return e = it(e), function(r) {
return r.addEventListener(_, t, e), r[O] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r); return r.addEventListener(_, t, e), r[O] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);
}; };
}; };
y.disconnected = function(t, e) { w.disconnected = function(t, e) {
return e = it(e), function(r) { return e = it(e), function(r) {
return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r; return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;
}; };
}; };
var Z = /* @__PURE__ */ new WeakMap(); var Z = /* @__PURE__ */ new WeakMap();
y.disconnectedAsAbort = function(t) { w.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(y.disconnected(() => e.abort())), e; return Z.set(t, e), t(w.disconnected(() => e.abort())), e;
}; };
var At = /* @__PURE__ */ new WeakSet(); var At = /* @__PURE__ */ new WeakSet();
y.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(M, t, e), r[O] || At.has(r) || !d.M) return r;
let o = new d.M(function(i) { let o = new d.M(function(i) {
for (let { attributeName: a, target: l } of i) for (let { attributeName: a, target: h } of i)
l.dispatchEvent( h.dispatchEvent(
new CustomEvent(M, { detail: [a, l.getAttribute(a)] }) new CustomEvent(M, { detail: [a, h.getAttribute(a)] })
); );
}); });
return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
@ -438,10 +440,10 @@ y.attributeChanged = function(t, e) {
}; };
// src/signals-lib.js // src/signals-lib.js
var p = "__dde_signal"; var l = "__dde_signal";
function z(t) { function z(t) {
try { try {
return T(t, p); return T(t, l);
} catch { } catch {
return !1; return !1;
} }
@ -458,10 +460,10 @@ function E(t, e) {
for (let a of c) for (let a of c)
i.has(a) || L(a, r); i.has(a) || L(a, r);
}; };
return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n; return g.set(n[l], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
} }
E.action = function(t, e, ...n) { E.action = function(t, e, ...n) {
let r = t[p], { actions: o } = r; let r = t[l], { actions: o } = r;
if (!o || !(e in o)) 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;
@ -480,8 +482,8 @@ E.symbols = {
}; };
E.clear = function(...t) { E.clear = function(...t) {
for (let n of t) { for (let n of t) {
let r = n[p]; let r = n[l];
r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]); r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[l]);
} }
function e(n, r) { function e(n, r) {
r.listeners.forEach((o) => { r.listeners.forEach((o) => {
@ -495,22 +497,22 @@ var R = "__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 = P.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment();
o.append(n, r); o.append(n, r);
let { current: c } = m, i = {}, a = (l) => { let { current: c } = x, i = {}, a = (h) => {
if (!n.parentNode || !r.parentNode) if (!n.parentNode || !r.parentNode)
return L(t, a); return L(t, a);
let v = i; let v = i;
i = {}, m.push(c); i = {}, x.push(c);
let h = e(l, function(u, f) { let p = e(h, function(u, f) {
let b; let b;
return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b; return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;
}); });
m.pop(), Array.isArray(h) || (h = [h]); x.pop(), Array.isArray(p) || (p = [p]);
let x = document.createComment(""); let m = document.createComment("");
h.push(x), n.after(...h); p.push(m), n.after(...p);
let w; let y;
for (; (w = x.nextSibling) && w !== r; ) for (; (y = m.nextSibling) && y !== r; )
w.remove(); y.remove();
x.remove(), n.isConnected && St(c.host()); m.remove(), n.isConnected && St(c.host());
}; };
return Q(t, a), ft(t, a, n, e), a(t()), o; return Q(t, a), ft(t, a, n, e), a(t()), o;
}; };
@ -533,12 +535,12 @@ function Ct(t) {
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 = F(t, Ct(e));
return y.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, i] = o, a = this[G][c];
if (a) return E.action(a, "_set", i); if (a) return E.action(a, "_set", i);
})(t), y.disconnected(function() { })(t), w.disconnected(function() {
/*! This removes all signals mapped to attributes (`S.observedAttributes`). /*! 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])); E.clear(...Object.values(this[G]));
@ -557,15 +559,15 @@ var ut = {
} }
}; };
function ft(t, e, ...n) { function ft(t, e, ...n) {
let { current: r } = m; let { current: r } = x;
r.prevent || r.host(function(o) { r.prevent || r.host(function(o) {
o[R] || (o[R] = [], y.disconnected( o[R] || (o[R] = [], w.disconnected(
() => ( () => (
/*! /*!
* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?). * 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[p] && c[p].host && c[p].host() === o)) o[R].forEach(([[c, i]]) => L(c, i, c[l] && c[l].host && c[l].host() === o))
) )
)(o)), o[R].push([[t, e], ...n]); )(o)), o[R].push([[t, e], ...n]);
}); });
@ -591,8 +593,8 @@ function at(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 } = m; let { host: i } = x;
return Reflect.defineProperty(t, p, { return Reflect.defineProperty(t, l, {
value: { value: {
value: e, value: e,
actions: n, actions: n,
@ -605,28 +607,28 @@ function at(t, e, n, r = !1) {
enumerable: !1, enumerable: !1,
writable: !1, writable: !1,
configurable: !0 configurable: !0
}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t; }), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], Dt), t;
} }
function Rt() { function Rt() {
return H[H.length - 1]; return H[H.length - 1];
} }
function K(t) { function K(t) {
if (!t[p]) return; if (!t[l]) return;
let { value: e, listeners: n } = t[p], r = Rt(); let { value: e, listeners: n } = t[l], r = Rt();
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 dt(t, e, n) { function dt(t, e, n) {
if (!t[p]) return; if (!t[l]) return;
let r = t[p]; let r = t[l];
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 Q(t, e) {
if (t[p]) if (t[l])
return t[p].listeners.add(e); return t[l].listeners.add(e);
} }
function L(t, e, n) { function L(t, e, n) {
let r = t[p]; let r = t[l];
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) {
@ -648,19 +650,18 @@ export {
gt as classListDeclarative, gt as classListDeclarative,
P as createElement, P as createElement,
qt as createElementNS, qt as createElementNS,
Zt as customElementRender, Jt as customElementRender,
wt as customElementWithDDE, yt as customElementWithDDE,
Qt as dispatchEvent, Kt as dispatchEvent,
P as el, P as el,
qt as elNS, qt as elNS,
vt as elementAttribute, vt as elementAttribute,
Ft as empty,
z as isSignal, z as isSignal,
wt as lifecyclesToEvents, yt as lifecyclesToEvents,
_t as observedAttributes, _t as observedAttributes,
y as on, w as on,
B as registerReactivity, B as registerReactivity,
m as scope, x as scope,
E as signal, E as signal,
Wt as simulateSlots Wt as simulateSlots
}; };

119
dist/esm.d.ts vendored
View File

@ -1,13 +1,13 @@
declare global{ /* ddeSignal */ } declare global{ /* ddeSignal */ }
type CustomElementTagNameMap= { '#text': Text, '#comment': Comment } type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
type SupportedElement= type SupportedElement=
HTMLElementTagNameMap[keyof HTMLElementTagNameMap] HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
| SVGElementTagNameMap[keyof SVGElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap]
| MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
| CustomElementTagNameMap[keyof CustomElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]
declare global { declare global {
type ddeComponentAttributes= Record<any, any> | undefined; type ddeComponentAttributes= Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
} }
type PascalCase= type PascalCase=
`${Capitalize<string>}${string}`; `${Capitalize<string>}${string}`;
@ -15,43 +15,64 @@ type AttrsModified= {
/** /**
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API). * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
*/ */
style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }> style: string | Partial<CSSStyleDeclaration> | ddeSignal<string>
| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
/** /**
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others. * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
* In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
* for others.
*/ */
classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>, classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
/** /**
* By default simiral to `className`, but also supports `string[]` * By default simiral to `className`, but also supports `string[]`
* */ * */
className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[]; className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
/**
* Used by the dataset HTML attribute to represent data for custom attributes added to elements.
* Values are converted to string (see {@link DOMStringMap}).
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
* */
dataset: Record<string,string|number|ddeSignal<string|number>>,
/** /**
* Sets `aria-*` simiraly to `dataset` * Sets `aria-*` simiraly to `dataset`
* */ * */
ariaset: Record<string,string|ddeSignal<string>>, ariaset: Record<string,string|ddeSignal<string>>,
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any> } & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>>
& Record<`.${string}`, any>
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>; type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
/** /**
* Just element attributtes * Just element attributtes
* *
* In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)). * In most cases, you can use native propertie such as
* [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
* (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
* *
* There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives. * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
* @private * @private
*/ */
type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & AttrsModified> & Record<string, any>; type ElementAttributes<T extends SupportedElement>= Partial<{
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
} & AttrsModified> & Record<string, any>;
export function classListDeclarative<El extends SupportedElement>(
element: El,
classList: AttrsModified["classList"]
): El
export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT] export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(
element: El,
attr: ATT,
value: ElementAttributes<El>[ATT]
): ElementAttributes<El>[ATT]
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
type textContent= string | ddeSignal<string>; type textContent= string | ddeSignal<string>;
export function el< export function el<
TAG extends keyof ExtendedHTMLElementTagNameMap, TAG extends keyof ExtendedHTMLElementTagNameMap,
EL extends ExtendedHTMLElementTagNameMap[TAG]
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<EL> | textContent, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | textContent,
...addons: ddeElementAddon<EL>[] ...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[], // TODO: for now addons must have the same element
): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement ): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
export function el( export function el(
tag_name?: "<>", tag_name?: "<>",
@ -68,7 +89,9 @@ export function el<
component: C, component: C,
attrs?: Parameters<C>[0] | textContent, attrs?: Parameters<C>[0] | textContent,
...addons: ddeElementAddon<ReturnType<C>>[] ...addons: ddeElementAddon<ReturnType<C>>[]
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType<C> : ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement ) ): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
? ReturnType<C>
: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
export { el as createElement } export { el as createElement }
export function elNS( export function elNS(
@ -78,8 +101,8 @@ 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<EL> | textContent, attrs?: ElementAttributes<NoInfer<EL>> | textContent,
...addons: ddeElementAddon<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(
namespace: "http://www.w3.org/1998/Math/MathML" namespace: "http://www.w3.org/1998/Math/MathML"
@ -88,8 +111,10 @@ 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?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean }>, attrs?: string | textContent | Partial<{
...addons: ddeElementAddon<EL>[] [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
}>,
...addons: ddeElementAddon<NoInfer<EL>>[]
)=> ddeMathMLElement )=> ddeMathMLElement
export function elNS( export function elNS(
namespace: string namespace: string
@ -106,36 +131,45 @@ export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
* */ * */
type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void; type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void;
/** Simulate slots for ddeComponents */ /** Simulate slots for ddeComponents */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL, mapper?: simulateSlotsMapper): EL export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
root: EL,
mapper?: simulateSlotsMapper
): EL
/** /**
* Simulate slots in Custom Elements without using `shadowRoot`. * Simulate slots in Custom Elements without using `shadowRoot`.
* @param el Custom Element root element * @param el Custom Element root element
* @param body Body of the custom element * @param body Body of the custom element
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL, mapper?: simulateSlotsMapper): EL export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
el: HTMLElement,
body: EL, mapper?: simulateSlotsMapper
): EL
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
(element: SupportedElement, data?: any)=> void; (element: SupportedElement, data?: any)=> void;
export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)): export function dispatchEvent(
(data?: any)=> void; name: keyof DocumentEventMap | string,
options: EventInit | null,
element: SupportedElement | (()=> SupportedElement)
): (data?: any)=> void;
interface On{ interface On{
/** Listens to the DOM event. See {@link Document.addEventListener} */ /** Listens to the DOM event. See {@link Document.addEventListener} */
< <
EE extends ddeElementAddon<SupportedElement>, Event extends keyof DocumentEventMap,
El extends ( EE extends ddeElementAddon<infer El> ? El : never ), EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
Event extends keyof DocumentEventMap>( >(
type: Event, type: Event,
listener: (this: El, ev: DocumentEventMap[Event]) => any, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
) : EE; ) : EE;
< <
EE extends ddeElementAddon<SupportedElement>, EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
El extends ( EE extends ddeElementAddon<infer El> ? El : never )>( >(
type: string, type: string,
listener: (this: El, ev: Event | CustomEvent ) => any, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
) : EE; ) : EE;
/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
connected< connected<
EE extends ddeElementAddon<SupportedElement>, EE extends ddeElementAddon<SupportedElement>,
El extends ( EE extends ddeElementAddon<infer El> ? El : never ) El extends ( EE extends ddeElementAddon<infer El> ? El : never )
@ -143,7 +177,7 @@ interface On{
listener: (this: El, event: CustomEvent<El>) => any, listener: (this: El, event: CustomEvent<El>) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
) : EE; ) : EE;
/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
disconnected< disconnected<
EE extends ddeElementAddon<SupportedElement>, EE extends ddeElementAddon<SupportedElement>,
El extends ( EE extends ddeElementAddon<infer El> ? El : never ) El extends ( EE extends ddeElementAddon<infer El> ? El : never )
@ -151,7 +185,7 @@ interface On{
listener: (this: El, event: CustomEvent<void>) => any, listener: (this: El, event: CustomEvent<void>) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
) : EE; ) : EE;
/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
attributeChanged< attributeChanged<
EE extends ddeElementAddon<SupportedElement>, EE extends ddeElementAddon<SupportedElement>,
El extends ( EE extends ddeElementAddon<infer El> ? El : never ) El extends ( EE extends ddeElementAddon<infer El> ? El : never )
@ -162,7 +196,12 @@ interface On{
} }
export const on: On; export const on: On;
type Scope= { scope: Node | Function | Object, host: ddeElementAddon<any>, custom_element: false | HTMLElement, prevent: boolean } type Scope= {
scope: Node | Function | Object,
host: ddeElementAddon<any>,
custom_element: false | HTMLElement,
prevent: boolean
};
/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */ /** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
export const scope: { export const scope: {
current: Scope, current: Scope,
@ -176,7 +215,7 @@ export const scope: {
* — `scope.host(on.connected(console.log))`. * — `scope.host(on.connected(console.log))`.
* */ * */
host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement, host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
state: Scope[], state: Scope[],
/** Adds new child scope. All attributes are inherited by default. */ /** Adds new child scope. All attributes are inherited by default. */
push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>, push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
@ -202,12 +241,12 @@ export function observedAttributes(custom_element: HTMLElement): Record<string,
/* TypeScript MEH */ /* TypeScript MEH */
declare global{ declare global{
type ddeAppend<el>= (...nodes: (Node | string)[])=> el; type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; } interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; } interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; } interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; } interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
interface ddeHTMLElementTagNameMap { interface ddeHTMLElementTagNameMap {
"a": ddeHTMLAnchorElement; "a": ddeHTMLAnchorElement;
"area": ddeHTMLAreaElement; "area": ddeHTMLAreaElement;
@ -350,6 +389,7 @@ declare global{
} }
} }
// editorconfig-checker-disable
interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; } interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; } interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; } interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
@ -476,4 +516,5 @@ interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend<dd
interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; } interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; }
interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; } interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; } interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; } interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
// editorconfig-checker-enable

107
dist/esm.js vendored
View File

@ -1,5 +1,5 @@
// src/signals-common.js // src/signals-common.js
var C = { var m = {
isSignal(t) { isSignal(t) {
return !1; return !1;
}, },
@ -8,15 +8,15 @@ var C = {
} }
}; };
function V(t, e = !0) { function V(t, e = !0) {
return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t); return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t);
} }
function L(t) { function L(t) {
return C.isPrototypeOf(t) && t !== C ? t : C; return m.isPrototypeOf(t) && t !== m ? t : m;
} }
// src/helpers.js // src/helpers.js
var q = (...t) => Object.prototype.hasOwnProperty.call(...t); var q = (...t) => Object.prototype.hasOwnProperty.call(...t);
function E(t) { function x(t) {
return typeof t > "u"; return typeof t > "u";
} }
function N(t, e) { function N(t, e) {
@ -48,14 +48,14 @@ var a = {
M: globalThis.MutationObserver M: globalThis.MutationObserver
}; };
function K(t, e, n) { function K(t, e, n) {
if (Reflect.set(t, e, n), !!E(n)) { if (Reflect.set(t, e, n), !!x(n)) {
if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined") if (Reflect.deleteProperty(t, e), t instanceof a.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 x = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged"; var y = "__dde_lifecyclesToEvents", g = "dde:connected", w = "dde:disconnected", D = "dde:attributeChanged";
// src/dom.js // src/dom.js
var v = [{ var v = [{
@ -100,15 +100,17 @@ function j(t, e, ...n) {
let r = L(this), o = 0, c, f; let r = L(this), o = 0, c, f;
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, S.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((h) => h(f)), void 0) : f }), c = t(e || void 0); o = 1;
let d = c instanceof a.F; let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(f)), void 0) : f;
S.push({ scope: t, host: d }), c = t(e || void 0);
let p = c instanceof a.F;
if (c.nodeName === "#comment") break; if (c.nodeName === "#comment") break;
let p = j.mark({ let b = j.mark({
type: "component", type: "component",
name: t.name, name: t.name,
host: d ? "this" : "parentElement" host: p ? "this" : "parentElement"
}); });
c.prepend(p), d && (f = p); c.prepend(b), p && (f = b);
break; break;
} }
case t === "#text": case t === "#text":
@ -125,6 +127,11 @@ function j(t, e, ...n) {
} }
return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c; return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c;
} }
j.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
return e && (r.end = a.D.createComment("</dde:mark>")), r;
};
function bt(t, e, n) { function bt(t, e, n) {
typeof e != "object" && (n = e, e = 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); let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((f, d) => Reflect.set(f, d.name || r, d) && f, {}), c = q(o, r);
@ -133,13 +140,13 @@ function bt(t, e, n) {
if (p[0] === e) return f.apply(t, p); if (p[0] === e) return f.apply(t, p);
if (!p.length) return t; if (!p.length) return t;
let b = a.D.createDocumentFragment(); let b = a.D.createDocumentFragment();
for (let h of p) { for (let l of p) {
if (!h || !h.slot) { if (!l || !l.slot) {
c && b.append(h); c && b.append(l);
continue; continue;
} }
let A = h.slot, _ = o[A]; let E = l.slot, _ = o[E];
tt(h, "remove", "slot"), _ && (X(_, h, n), Reflect.deleteProperty(o, A)); 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; return c && (o[r].replaceWith(b), Reflect.deleteProperty(o, r)), t.append = f, t;
} }
@ -152,16 +159,14 @@ function bt(t, e, n) {
function X(t, e, n) { function X(t, e, n) {
n && n(t, e); n && n(t, e);
try { try {
t.replaceWith(O(e, { className: [e.className, t.className], dataset: { ...t.dataset } })); t.replaceWith(O(e, {
className: [e.className, t.className],
dataset: { ...t.dataset }
}));
} catch { } catch {
t.replaceWith(e); t.replaceWith(e);
} }
} }
j.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
return e && (r.end = a.D.createComment("</dde:mark>")), r;
};
function gt(t) { function gt(t) {
let e = this; let e = this;
return function(...r) { return function(...r) {
@ -221,16 +226,13 @@ function Y(t, 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) {
return Array.from(t.children).forEach((e) => e.remove()), t;
}
function tt(t, e, n, r) { function tt(t, e, n, r) {
return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
} }
function et(t, e) { function et(t, e) {
if (!(e in t)) return !1; if (!(e in t)) return !1;
let n = I(t, e); let n = I(t, e);
return !E(n.set); return !x(n.set);
} }
function I(t, e) { function I(t, e) {
if (t = Object.getPrototypeOf(t), !t) return {}; if (t = Object.getPrototypeOf(t), !t) return {};
@ -247,18 +249,18 @@ function Z(t) {
return Array.isArray(t) ? t.filter(Boolean).join(" ") : t; return Array.isArray(t) ? t.filter(Boolean).join(" ") : t;
} }
function nt(t, e, n, r) { function nt(t, e, n, r) {
return t[(E(r) ? "remove" : "set") + e](n, Z(r)); return t[(x(r) ? "remove" : "set") + e](n, Z(r));
} }
function rt(t, e, n, r, o = null) { function rt(t, e, n, r, o = null) {
return t[(E(r) ? "remove" : "set") + e + "NS"](o, n, Z(r)); return t[(x(r) ? "remove" : "set") + e + "NS"](o, n, Z(r));
} }
function H(t, e, n) { function H(t, e, n) {
if (Reflect.set(t, e, n), !!E(n)) if (Reflect.set(t, e, n), !!x(n))
return Reflect.deleteProperty(t, e); return Reflect.deleteProperty(t, e);
} }
// src/events-observer.js // src/events-observer.js
var w = a.M ? ot() : new Proxy({}, { var A = a.M ? ot() : new Proxy({}, {
get() { get() {
return () => { return () => {
}; };
@ -268,11 +270,11 @@ function ot() {
let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) { let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) {
for (let s of u) for (let s of u)
if (s.type === "childList") { if (s.type === "childList") {
if (h(s.addedNodes, !0)) { if (l(s.addedNodes, !0)) {
i(); i();
continue; continue;
} }
A(s.removedNodes, !0) && i(); E(s.removedNodes, !0) && i();
} }
}, r = new a.M(n(d)); }, r = new a.M(n(d));
return { return {
@ -334,52 +336,52 @@ function ot() {
s === i || !(s instanceof Node) || i.contains(s) && u.push(s); s === i || !(s instanceof Node) || i.contains(s) && u.push(s);
return u; return u;
} }
function h(i, u) { function l(i, u) {
let s = !1; let s = !1;
for (let l of i) { for (let h of i) {
if (u && b(l).then(h), !t.has(l)) continue; if (u && b(h).then(l), !t.has(h)) continue;
let m = t.get(l); let C = t.get(h);
m.length_c && (l.dispatchEvent(new Event(g)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(l), s = !0); C.length_c && (h.dispatchEvent(new Event(g)), C.connected = /* @__PURE__ */ new WeakSet(), C.length_c = 0, C.length_d || t.delete(h), s = !0);
} }
return s; return s;
} }
function A(i, u) { function E(i, u) {
let s = !1; let s = !1;
for (let l of i) for (let h of i)
u && b(l).then(A), !(!t.has(l) || !t.get(l).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(l)), s = !0); u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0);
return s; return s;
} }
function _(i) { function _(i) {
return () => { return () => {
i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i)); i.isConnected || (i.dispatchEvent(new Event(w)), t.delete(i));
}; };
} }
} }
// src/customElement.js // src/customElement.js
function Dt(t, e, n, r = it) { function mt(t, e, n, r = it) {
S.push({ S.push({
scope: t, scope: t,
host: (...f) => f.length ? f.forEach((d) => d(t)) : t host: (...f) => f.length ? f.forEach((d) => d(t)) : t
}), typeof r == "function" && (r = r.call(t, t)); }), typeof r == "function" && (r = r.call(t, t));
let o = t[x]; let o = t[y];
o || ct(t); o || ct(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, w.observe(e), { once: !0 }), S.pop(), e.append(c); return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(w, A.observe(e), { once: !0 }), S.pop(), e.append(c);
} }
function ct(t) { function ct(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(g));
}), 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(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(D, { n.dispatchEvent(new CustomEvent(D, {
detail: [o, c] detail: [o, c]
})), e.apply(n, r); })), e.apply(n, r);
}), t.prototype[x] = !0, t; }), t.prototype[y] = !0, t;
} }
function k(t, e, n) { function k(t, e, n) {
t[e] = new Proxy(t[e] || (() => { t[e] = new Proxy(t[e] || (() => {
@ -390,7 +392,7 @@ function it(t) {
} }
// src/events.js // src/events.js
function _t(t, e, n) { function Rt(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 f = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
@ -405,12 +407,12 @@ function R(t, e, n) {
var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
R.connected = function(t, e) { R.connected = function(t, e) {
return e = G(e), function(r) { return e = G(e), function(r) {
return r.addEventListener(g, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r); return r.addEventListener(g, t, e), r[y] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.onConnected(r, t), r);
}; };
}; };
R.disconnected = function(t, e) { R.disconnected = function(t, e) {
return e = G(e), function(r) { return e = G(e), function(r) {
return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r; return r.addEventListener(w, t, e), r[y] || N(e.signal, () => A.offDisconnected(r, t)) && A.onDisconnected(r, t), r;
}; };
}; };
var W = /* @__PURE__ */ new WeakMap(); var W = /* @__PURE__ */ new WeakMap();
@ -422,7 +424,7 @@ R.disconnectedAsAbort = function(t) {
var st = /* @__PURE__ */ new WeakSet(); var st = /* @__PURE__ */ new WeakSet();
R.attributeChanged = function(t, e) { R.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[x] || st.has(r) || !a.M) return r; if (r.addEventListener(D, t, e), r[y] || st.has(r) || !a.M) return r;
let o = new a.M(function(f) { let o = new a.M(function(f) {
for (let { attributeName: d, target: p } of f) for (let { attributeName: d, target: p } of f)
p.dispatchEvent( p.dispatchEvent(
@ -439,13 +441,12 @@ export {
Y as classListDeclarative, Y as classListDeclarative,
j as createElement, j as createElement,
gt as createElementNS, gt as createElementNS,
Dt as customElementRender, mt as customElementRender,
ct as customElementWithDDE, ct as customElementWithDDE,
_t as dispatchEvent, Rt as dispatchEvent,
j as el, j as el,
gt as elNS, gt as elNS,
tt as elementAttribute, tt as elementAttribute,
vt as empty,
ct as lifecyclesToEvents, ct as lifecyclesToEvents,
it as observedAttributes, it as observedAttributes,
R as on, R as on,

4
docs/components/examples/scopes/cleaning.js
View File

@ -1,4 +1,6 @@
import { el, empty, on } from "deka-dom-el"; import { el, on } from "deka-dom-el";
/** @param {HTMLElement} el */
const empty= el=> Array.from(el.children).forEach(c=> c.remove());
document.body.append( document.body.append(
el(component), el(component),
el("button", { el("button", {

34
index.d.ts vendored
View File

@ -8,7 +8,7 @@ type SupportedElement=
| CustomElementTagNameMap[keyof CustomElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]
declare global { declare global {
type ddeComponentAttributes= Record<any, any> | undefined; type ddeComponentAttributes= Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
} }
type PascalCase= `${Capitalize<string>}${string}`; type PascalCase= `${Capitalize<string>}${string}`;
type AttrsModified= { type AttrsModified= {
@ -27,6 +27,13 @@ type AttrsModified= {
* By default simiral to `className`, but also supports `string[]` * By default simiral to `className`, but also supports `string[]`
* */ * */
className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[]; className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
/**
* Used by the dataset HTML attribute to represent data for custom attributes added to elements.
* Values are converted to string (see {@link DOMStringMap}).
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
* */
dataset: Record<string,string|number|ddeSignal<string|number>>,
/** /**
* Sets `aria-*` simiraly to `dataset` * Sets `aria-*` simiraly to `dataset`
* */ * */
@ -62,11 +69,10 @@ type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagName
type textContent= string | ddeSignal<string>; type textContent= string | ddeSignal<string>;
export function el< export function el<
TAG extends keyof ExtendedHTMLElementTagNameMap, TAG extends keyof ExtendedHTMLElementTagNameMap,
EL extends ExtendedHTMLElementTagNameMap[TAG]
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<EL> | textContent, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | textContent,
...addons: ddeElementAddon<EL>[] ...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[], // TODO: for now addons must have the same element
): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement ): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
export function el( export function el(
tag_name?: "<>", tag_name?: "<>",
@ -95,8 +101,8 @@ 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<EL> | textContent, attrs?: ElementAttributes<NoInfer<EL>> | textContent,
...addons: ddeElementAddon<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(
namespace: "http://www.w3.org/1998/Math/MathML" namespace: "http://www.w3.org/1998/Math/MathML"
@ -108,7 +114,7 @@ export function elNS(
attrs?: string | textContent | Partial<{ attrs?: string | textContent | 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<EL>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
)=> ddeMathMLElement )=> ddeMathMLElement
export function elNS( export function elNS(
namespace: string namespace: string
@ -149,18 +155,18 @@ export function dispatchEvent(
interface On{ interface On{
/** Listens to the DOM event. See {@link Document.addEventListener} */ /** Listens to the DOM event. See {@link Document.addEventListener} */
< <
EE extends ddeElementAddon<SupportedElement>, Event extends keyof DocumentEventMap,
El extends ( EE extends ddeElementAddon<infer El> ? El : never ), EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
Event extends keyof DocumentEventMap>( >(
type: Event, type: Event,
listener: (this: El, ev: DocumentEventMap[Event]) => any, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
) : EE; ) : EE;
< <
EE extends ddeElementAddon<SupportedElement>, EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
El extends ( EE extends ddeElementAddon<infer El> ? El : never )>( >(
type: string, type: string,
listener: (this: El, ev: Event | CustomEvent ) => any, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
) : EE; ) : EE;
/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line

29
src/dom.js
View File

@ -69,6 +69,19 @@ export function createElement(tag, attributes, ...addons){
scoped= 2; scoped= 2;
return el; return el;
} }
/**
* @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs
* @param {boolean} [is_open=false]
* */
createElement.mark= function(attrs, is_open= false){
attrs= Object.entries(attrs).map(([ n, v ])=> n+`="${v}"`).join(" ");
const end= is_open ? "" : "/";
const out= env.D.createComment(`<dde:mark ${attrs}${env.ssr}${end}>`);
if(is_open) out.end= env.D.createComment("</dde:mark>");
return out;
};
export { createElement as el };
import { hasOwn } from "./helpers.js"; import { hasOwn } from "./helpers.js";
/** @param {HTMLElement} element @param {HTMLElement} [root] */ /** @param {HTMLElement} element @param {HTMLElement} [root] */
export function simulateSlots(element, root, mapper){ export function simulateSlots(element, root, mapper){
@ -117,18 +130,6 @@ function simulateSlotReplace(slot, element, mapper){
dataset: { ...slot.dataset } })); } dataset: { ...slot.dataset } })); }
catch(_){ slot.replaceWith(element); } catch(_){ slot.replaceWith(element); }
} }
/**
* @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs
* @param {boolean} [is_open=false]
* */
createElement.mark= function(attrs, is_open= false){
attrs= Object.entries(attrs).map(([ n, v ])=> n+`="${v}"`).join(" ");
const end= is_open ? "" : "/";
const out= env.D.createComment(`<dde:mark ${attrs}${env.ssr}${end}>`);
if(is_open) out.end= env.D.createComment("</dde:mark>");
return out;
};
export { createElement as el };
//const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns; //const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns;
export function createElementNS(ns){ export function createElementNS(ns){
@ -198,10 +199,6 @@ export function classListDeclarative(element, toggle){
element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val))); element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val)));
return element; return element;
} }
export function empty(el){
Array.from(el.children).forEach(el=> el.remove());
return el;
}
export function elementAttribute(element, op, key, value){ export function elementAttribute(element, op, key, value){
if(element instanceof env.H) if(element instanceof env.H)
return element[op+"Attribute"](key, value); return element[op+"Attribute"](key, value);