jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-11-03 22:59:16 +01:00
Code Packages Releases Activity

🚀 lifecycle events, signals from attrs test

Browse Source
This commit is contained in:
Jan Andrle
2023-10-13 16:37:04 +02:00
parent b9bbd105a5
commit 18f93d7e0b
8 changed files with 745 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
//deka-dom-el library is available via global namespace `dde` //deka-dom-el library is available via global namespace `dde`
(()=> { (()=> {
// src/signals-common.js // src/signals-common.js
var E = { var y = {
isSignal(e) { isSignal(e) {
return !1; return !1;
}, },
@@ -9,22 +9,22 @@
return n; return n;
} }
}; };
function C(e, t = !0) { function N(e, t = !0) {
return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e); return t ? Object.assign(y, e) : (Object.setPrototypeOf(e, y), e);
} }
function S(e) { function _(e) {
return E.isPrototypeOf(e) && e !== E ? e : E; return y.isPrototypeOf(e) && e !== y ? e : y;
} }
// src/helpers.js // src/helpers.js
function m(e) { function v(e) {
return typeof e > "u"; return typeof e > "u";
} }
function P(e) { function j(e) {
let t = typeof e; let t = typeof e;
return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e); return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e);
} }
function L(e, t) { function A(e, t) {
if (!e || !(e instanceof AbortSignal)) if (!e || !(e instanceof AbortSignal))
return !0; return !0;
if (!e.aborted) if (!e.aborted)
@@ -34,9 +34,9 @@
} }
// src/dom-common.js // src/dom-common.js
var j = { setDeleteAttr: H }; var W = { setDeleteAttr: H };
function H(e, t, n) { function H(e, t, n) {
if (Reflect.set(e, t, n), !!m(n)) { if (Reflect.set(e, t, n), !!v(n)) {
if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined") if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined")
return e.removeAttribute(t); return e.removeAttribute(t);
if (Reflect.get(e, t) === "undefined") if (Reflect.get(e, t) === "undefined")
@@ -45,12 +45,12 @@
} }
// src/dom.js // src/dom.js
var w = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.body) : document.body }], W = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, O = { var S = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.body) : document.body }], M = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, E = {
get current() { get current() {
return w[w.length - 1]; return S[S.length - 1];
}, },
get state() { get state() {
return [...w]; return [...S];
}, },
get host() { get host() {
return this.current.host; return this.current.host;
@@ -59,80 +59,80 @@
return this.current.namespace; return this.current.namespace;
}, },
set namespace(e) { set namespace(e) {
return this.current.namespace = W(e); return this.current.namespace = M(e);
}, },
elNamespace(e) { elNamespace(e) {
let t = this.namespace; let t = this.namespace;
return this.namespace = e, { return this.namespace = e, {
append(...n) { append(...n) {
return O.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n); return E.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n);
} }
}; };
}, },
push(e = {}) { push(e = {}) {
return e.namespace && (e.namespace = W(e.namespace)), w.push(Object.assign({}, this.current, e)); return e.namespace && (e.namespace = M(e.namespace)), S.push(Object.assign({}, this.current, e));
}, },
pop() { pop() {
return w.pop(); return S.pop();
} }
}; };
function se(e, t, ...n) { function ie(e, t, ...n) {
let r = this, o = S(this), { namespace: u } = O, a; let r = this, o = _(this), { namespace: c } = E, a;
switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) { switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) {
case typeof e == "function": { case typeof e == "function": {
O.push({ scope: e, host: (s) => s ? (n.unshift(s), void 0) : a }), a = e(t || void 0), O.pop(); E.push({ scope: e, host: (s) => s ? (n.unshift(s), void 0) : a }), a = e(t || void 0), E.pop();
break; break;
} }
case e === "#text": case e === "#text":
a = y.call(r, document.createTextNode(""), t); a = O.call(r, document.createTextNode(""), t);
break; break;
case e === "<>": case e === "<>":
a = y.call(r, document.createDocumentFragment(), t); a = O.call(r, document.createDocumentFragment(), t);
break; break;
case u !== "html": case c !== "html":
a = y.call(r, document.createElementNS(u, e), t); a = O.call(r, document.createElementNS(c, e), t);
break; break;
case !a: case !a:
a = y.call(r, document.createElement(e), t); a = O.call(r, document.createElement(e), t);
} }
return n.forEach((s) => s(a)), a; return n.forEach((s) => s(a)), a;
} }
var { setDeleteAttr: F } = j; var { setDeleteAttr: k } = W;
function y(e, ...t) { function O(e, ...t) {
let n = this, r = S(this); let n = this, r = _(this);
if (!t.length) if (!t.length)
return e; return e;
let u = (e instanceof SVGElement ? J : I).bind(null, e, "Attribute"); let c = (e instanceof SVGElement ? J : I).bind(null, e, "Attribute");
return Object.entries(Object.assign({}, ...t)).forEach(function a([s, d]) { return Object.entries(Object.assign({}, ...t)).forEach(function a([s, d]) {
d = r.processReactiveAttribute(e, s, d, a); d = r.processReactiveAttribute(e, s, d, a);
let [b] = s; let [m] = s;
if (b === "=") if (m === "=")
return u(s.slice(1), d); return c(s.slice(1), d);
if (b === ".") if (m === ".")
return M(e, s.slice(1), d); return F(e, s.slice(1), d);
if (/(aria|data)([A-Z])/.test(s)) if (/(aria|data)([A-Z])/.test(s))
return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), u(s, d); return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, d);
switch (s === "className" && (s = "class"), s) { switch (s === "className" && (s = "class"), s) {
case "xlink:href": case "xlink:href":
return u(s, d, "http://www.w3.org/1999/xlink"); return c(s, d, "http://www.w3.org/1999/xlink");
case "textContent": case "textContent":
return F(e, s, d); return k(e, s, d);
case "style": case "style":
if (typeof d != "object") if (typeof d != "object")
break; break;
case "dataset": case "dataset":
return N(r, d, M.bind(null, e[s])); return D(r, d, F.bind(null, e[s]));
case "ariaset": case "ariaset":
return N(r, d, (x, c) => u("aria-" + x, c)); return D(r, d, (b, i) => c("aria-" + b, i));
case "classList": case "classList":
return B.call(n, e, d); return B.call(n, e, d);
} }
return G(e, s) ? F(e, s, d) : u(s, d); return G(e, s) ? k(e, s, d) : c(s, d);
}), e; }), e;
} }
function B(e, t) { function B(e, t) {
let n = S(this); let n = _(this);
return N( return D(
n, n,
t, t,
(r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o) (r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o)
@@ -145,7 +145,7 @@
if (!Reflect.has(e, t)) if (!Reflect.has(e, t))
return !1; return !1;
let n = z(e, t); let n = z(e, t);
return !m(n.set); return !v(n.set);
} }
function z(e, t) { function z(e, t) {
if (e = Object.getPrototypeOf(e), !e) if (e = Object.getPrototypeOf(e), !e)
@@ -153,130 +153,149 @@
let n = Object.getOwnPropertyDescriptor(e, t); let n = Object.getOwnPropertyDescriptor(e, t);
return n || z(e, t); return n || z(e, t);
} }
function N(e, t, n) { function D(e, t, n) {
if (!(typeof t != "object" || t === null)) if (!(typeof t != "object" || t === null))
return Object.entries(t).forEach(function([o, u]) { return Object.entries(t).forEach(function([o, c]) {
o && (u = e.processReactiveAttribute(t, o, u, (a) => n(...a)), n(o, u)); o && (c = e.processReactiveAttribute(t, o, c, (a) => n(...a)), n(o, c));
}); });
} }
function T(e) { function T(e) {
return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; return Array.isArray(e) ? e.filter(Boolean).join(" ") : e;
} }
function I(e, t, n, r) { function I(e, t, n, r) {
return e[(m(r) ? "remove" : "set") + t](n, T(r)); return e[(v(r) ? "remove" : "set") + t](n, T(r));
} }
function J(e, t, n, r, o = null) { function J(e, t, n, r, o = null) {
return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, T(r)); return e[(v(r) ? "remove" : "set") + t + "NS"](o, n, T(r));
} }
function M(e, t, n) { function F(e, t, n) {
if (Reflect.set(e, t, n), !!m(n)) if (Reflect.set(e, t, n), !!v(n))
return Reflect.deleteProperty(e, t); return Reflect.deleteProperty(e, t);
} }
// src/events.js // src/events.js
function de(e, t, ...n) { function le(e, t, ...n) {
let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
return e.dispatchEvent(r); return e.dispatchEvent(r);
} }
function U(e, t, n) { function x(e, t, n) {
return function(o) { return function(o) {
return o.addEventListener(e, t, n), o; return o.addEventListener(e, t, n), o;
}; };
} }
var _ = V(); var R = Z(), V = /* @__PURE__ */ new WeakSet();
U.connected = function(e, t) { x.connected = function(e, t) {
return typeof t != "object" && (t = {}), t.once = !0, function(r) { let n = "connected";
return r.addEventListener("dde:connected", e, t), typeof r.connectedCallback == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event("dde:connected")), r) : (L(t.signal, () => _.offConnected(r, e)) && _.onConnected(r, e), r); return typeof t != "object" && (t = {}), t.once = !0, function(o) {
let c = "dde:" + n;
return o.addEventListener(c, e, t), typeof o[n + "Callback"] == "function" ? o : o.isConnected ? (o.dispatchEvent(new Event(c)), o) : (A(t.signal, () => R.offConnected(o, e)) && R.onConnected(o, e), o);
}; };
}; };
U.disconnected = function(e, t) { x.disconnected = function(e, t) {
return typeof t != "object" && (t = {}), t.once = !0, function(r) { let n = "disconnected";
return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || L(t.signal, () => _.offDisconnected(r, e)) && _.onDisconnected(r, e), r; return typeof t != "object" && (t = {}), t.once = !0, function(o) {
let c = "dde:" + n;
return o.addEventListener(c, e, t), typeof o[n + "Callback"] == "function" || A(t.signal, () => R.offDisconnected(o, e)) && R.onDisconnected(o, e), o;
}; };
}; };
function V() { x.attributeChanged = function(e, t) {
let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) { let n = "attributeChanged";
for (let i of c) return typeof t != "object" && (t = {}), function(o) {
if (i.type === "childList") { let c = "dde:" + n;
if (b(i.addedNodes, !0)) { if (o.addEventListener(c, e, t), typeof o[n + "Callback"] == "function" || V.has(o))
return o;
let a = new MutationObserver(function(d) {
for (let { attributeName: m, target: b } of d)
b.dispatchEvent(
new CustomEvent(c, { detail: [m, b.getAttribute(m)] })
);
});
return A(t.signal, () => a.disconnect()) && a.observe(o, { attributes: !0 }), o;
};
};
function Z() {
let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(i) {
for (let u of i)
if (u.type === "childList") {
if (m(u.addedNodes, !0)) {
a(); a();
continue; continue;
} }
x(i.removedNodes, !0) && a(); b(u.removedNodes, !0) && a();
} }
}); });
return { return {
onConnected(c, i) { onConnected(i, u) {
u(); c();
let f = o(c); let f = o(i);
f.connected.has(i) || (f.connected.add(i), f.length_c += 1); f.connected.has(u) || (f.connected.add(u), f.length_c += 1);
}, },
offConnected(c, i) { offConnected(i, u) {
if (!e.has(c)) if (!e.has(i))
return; return;
let f = e.get(c); let f = e.get(i);
f.connected.has(i) && (f.connected.delete(i), f.length_c -= 1, r(c, f)); f.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, r(i, f));
}, },
onDisconnected(c, i) { onDisconnected(i, u) {
u(); c();
let f = o(c); let f = o(i);
f.disconnected.has(i) || (f.disconnected.add(i), f.length_d += 1); f.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);
}, },
offDisconnected(c, i) { offDisconnected(i, u) {
if (!e.has(c)) if (!e.has(i))
return; return;
let f = e.get(c); let f = e.get(i);
f.disconnected.has(i) && (f.disconnected.delete(i), f.length_d -= 1, r(c, f)); f.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, r(i, f));
} }
}; };
function r(c, i) { function r(i, u) {
i.length_c || i.length_d || (e.delete(c), a()); u.length_c || u.length_d || (e.delete(i), a());
} }
function o(c) { function o(i) {
if (e.has(c)) if (e.has(i))
return e.get(c); return e.get(i);
let i = { let u = {
connected: /* @__PURE__ */ new WeakSet(), connected: /* @__PURE__ */ new WeakSet(),
length_c: 0, length_c: 0,
disconnected: /* @__PURE__ */ new WeakSet(), disconnected: /* @__PURE__ */ new WeakSet(),
length_d: 0 length_d: 0
}; };
return e.set(c, i), i; return e.set(i, u), u;
} }
function u() { function c() {
t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
} }
function a() { function a() {
!t || e.size || (t = !1, n.disconnect()); !t || e.size || (t = !1, n.disconnect());
} }
function s() { function s() {
return new Promise(function(c) { return new Promise(function(i) {
(requestIdleCallback || requestAnimationFrame)(c); (requestIdleCallback || requestAnimationFrame)(i);
}); });
} }
async function d(c) { async function d(i) {
e.size > 30 && await s(); e.size > 30 && await s();
let i = []; let u = [];
if (!(c instanceof Node)) if (!(i instanceof Node))
return i; return u;
for (let f of e.keys()) for (let f of e.keys())
f === c || !(f instanceof Node) || c.contains(f) && i.push(f); f === i || !(f instanceof Node) || i.contains(f) && u.push(f);
return i; return u;
} }
function b(c, i) { function m(i, u) {
let f = !1; let f = !1;
for (let l of c) { for (let p of i) {
if (i && d(l).then(b), !e.has(l)) if (u && d(p).then(m), !e.has(p))
continue; continue;
let v = e.get(l); let w = e.get(p);
v.length_c && (l.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(l), f = !0); w.length_c && (p.dispatchEvent(new Event("dde:connected")), w.connected = /* @__PURE__ */ new WeakSet(), w.length_c = 0, w.length_d || e.delete(p), f = !0);
} }
return f; return f;
} }
function x(c, i) { function b(i, u) {
let f = !1; let f = !1;
for (let l of c) for (let p of i)
i && d(l).then(x), !(!e.has(l) || !e.get(l).length_d) && (l.dispatchEvent(new Event("dde:disconnected")), e.delete(l), f = !0); u && d(p).then(b), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), f = !0);
return f; return f;
} }
} }
@@ -290,64 +309,75 @@
}); });
// src/signals-lib.js // src/signals-lib.js
var p = Symbol.for("Signal"); var l = Symbol.for("Signal");
function R(e) { function C(e) {
try { try {
return Reflect.has(e, p); return Reflect.has(e, l);
} catch { } catch {
return !1; return !1;
} }
} }
var h = /* @__PURE__ */ new WeakMap(); var g = /* @__PURE__ */ new WeakMap();
function g(e, t) { function h(e, t) {
if (typeof e != "function") if (typeof e != "function")
return $(e, t); return U(e, t);
if (R(e)) if (C(e))
return e; return e;
let n = $(""), r = () => n(e()); let n = U(""), r = () => n(e());
return h.set(r, /* @__PURE__ */ new Set([n])), Q(r), n; return g.set(r, /* @__PURE__ */ new Set([n])), X(r), n;
} }
g.action = function(e, t, ...n) { h.action = function(e, t, ...n) {
let r = e[p], { actions: o } = r; let r = e[l], { actions: o } = r;
if (!o || !Reflect.has(o, t)) if (!o || !Reflect.has(o, t))
throw new Error(`'${e}' has no action with name '${t}'!`); throw new Error(`'${e}' has no action with name '${t}'!`);
if (o[t].apply(r, n), r.skip) if (o[t].apply(r, n), r.skip)
return Reflect.deleteProperty(r, "skip"); return Reflect.deleteProperty(r, "skip");
r.listeners.forEach((u) => u(r.value)); r.listeners.forEach((c) => c(r.value));
}; };
g.on = function e(t, n, r = {}) { h.on = function e(t, n, r = {}) {
let { signal: o } = r; let { signal: o } = r;
if (!(o && o.aborted)) { if (!(o && o.aborted)) {
if (Array.isArray(t)) if (Array.isArray(t))
return t.forEach((u) => e(u, n, r)); return t.forEach((c) => e(c, n, r));
D(t, n), o && o.addEventListener("abort", () => q(t, n)); P(t, n), o && o.addEventListener("abort", () => q(t, n));
} }
}; };
g.symbols = { h.symbols = {
signal: p, signal: l,
onclear: Symbol.for("Signal.onclear") onclear: Symbol.for("Signal.onclear")
}; };
g.clear = function(...e) { h.attribute = function(e, t = void 0) {
let { host: n } = E, r = n() && n().hasAttribute(e) ? n().getAttribute(e) : t, o = new AbortController(), c = h(r, {
[h.symbols.onclear]() {
o.abort();
}
});
return E.host(x.attributeChanged(function({ detail: a }) {
let [s, d] = a;
s === e && c(d);
}, { signal: o.signal })), c;
};
h.clear = function(...e) {
for (let n of e) { for (let n of e) {
Reflect.deleteProperty(n, "toJSON"); Reflect.deleteProperty(n, "toJSON");
let r = n[p], { onclear: o } = g.symbols; let r = n[l], { onclear: o } = h.symbols;
r.actions && r.actions[o] && r.actions[o].call(r), t(n, r), Reflect.deleteProperty(n, p); r.actions && r.actions[o] && r.actions[o].call(r), t(n, r), Reflect.deleteProperty(n, l);
} }
function t(n, r) { function t(n, r) {
r.listeners.forEach((o) => { r.listeners.forEach((o) => {
if (r.listeners.delete(o), !h.has(o)) if (r.listeners.delete(o), !g.has(o))
return; return;
let u = h.get(o); let c = g.get(o);
u.delete(n), !(u.size > 1) && (g.clear(...u), h.delete(o)); c.delete(n), !(c.size > 1) && (h.clear(...c), g.delete(o));
}); });
} }
}; };
g.el = function(e, t) { h.el = function(e, t) {
let n = document.createComment("<#reactive>"), r = document.createComment("</#reactive>"), o = document.createDocumentFragment(); let n = document.createComment("<#reactive>"), r = document.createComment("</#reactive>"), o = document.createDocumentFragment();
o.append(n, r); o.append(n, r);
let u = (a) => { let c = (a) => {
if (!n.parentNode || !r.parentNode) if (!n.parentNode || !r.parentNode)
return q(e, u); return q(e, c);
let s = t(a); let s = t(a);
Array.isArray(s) || (s = [s]); Array.isArray(s) || (s = [s]);
let d = n; let d = n;
@@ -355,77 +385,77 @@
d.remove(); d.remove();
n.after(...s); n.after(...s);
}; };
return D(e, u), u(e()), o; return P(e, c), c(e()), o;
}; };
var k = { var $ = {
isSignal: R, isSignal: C,
processReactiveAttribute(e, t, n, r) { processReactiveAttribute(e, t, n, r) {
return R(n) ? (D(n, (o) => r([t, o])), n()) : n; return C(n) ? (P(n, (o) => r([t, o])), n()) : n;
} }
}; };
function $(e, t) { function U(e, t) {
let n = (...r) => r.length ? ee(n, r[0]) : Y(n); let n = (...r) => r.length ? te(n, ...r) : ee(n);
return K(n, e, t); return Q(n, e, t);
} }
var Z = Object.assign(/* @__PURE__ */ Object.create(null), { var K = Object.assign(/* @__PURE__ */ Object.create(null), {
stopPropagation() { stopPropagation() {
this.skip = !0; this.skip = !0;
} }
}); });
function K(e, t, n) { function Q(e, t, n) {
return P(n) !== "[object Object]" && (n = {}), e[p] = { return j(n) !== "[object Object]" && (n = {}), e[l] = {
value: t, value: t,
actions: n, actions: n,
listeners: /* @__PURE__ */ new Set() listeners: /* @__PURE__ */ new Set()
}, e.toJSON = () => e(), Object.setPrototypeOf(e[p], Z), e; }, e.toJSON = () => e(), Object.setPrototypeOf(e[l], K), e;
} }
var A = []; var L = [];
function Q(e) { function X(e) {
let t = function() { let t = function() {
A.push(t), e(), A.pop(); L.push(t), e(), L.pop();
}; };
h.has(e) && (h.set(t, h.get(e)), h.delete(e)), t(); g.has(e) && (g.set(t, g.get(e)), g.delete(e)), t();
} }
function X() { function Y() {
return A[A.length - 1]; return L[L.length - 1];
} }
function Y(e) { function ee(e) {
if (!e[p]) if (!e[l])
return; return;
let { value: t, listeners: n } = e[p], r = X(); let { value: t, listeners: n } = e[l], r = Y();
return r && n.add(r), h.has(r) && h.get(r).add(e), t; return r && n.add(r), g.has(r) && g.get(r).add(e), t;
} }
function ee(e, t) { function te(e, t, n) {
if (!e[p]) if (!e[l])
return; return;
let n = e[p]; let r = e[l];
if (n.value !== t) if (!(!n && r.value === t))
return n.value = t, n.listeners.forEach((r) => r(t)), t; return r.value = t, r.listeners.forEach((o) => o(t)), t;
} }
function D(e, t) { function P(e, t) {
if (e[p]) if (e[l])
return e[p].listeners.add(t); return e[l].listeners.add(t);
} }
function q(e, t) { function q(e, t) {
if (e[p]) if (e[l])
return e[p].listeners.delete(t); return e[l].listeners.delete(t);
} }
// signals.js // signals.js
C(k); N($);
globalThis.dde= { globalThis.dde= {
S: g, S: h,
assign: y, assign: O,
classListDeclarative: B, classListDeclarative: B,
createElement: se, createElement: ie,
dispatchEvent: de, dispatchEvent: le,
el: se, el: ie,
empty: fe, empty: fe,
isSignal: R, isSignal: C,
on: U, on: x,
registerReactivity: C, registerReactivity: N,
scope: O scope: E
}; };
})(); })();

247
dist/dde.js vendored
View File

@@ -1,26 +1,26 @@
//deka-dom-el library is available via global namespace `dde` //deka-dom-el library is available via global namespace `dde`
(()=> { (()=> {
// src/signals-common.js // src/signals-common.js
var m = { var b = {
isSignal(e) { isSignal(e) {
return !1; return !1;
}, },
processReactiveAttribute(e, t, n, r) { processReactiveAttribute(e, t, n, s) {
return n; return n;
} }
}; };
function P(e, t = !0) { function P(e, t = !0) {
return t ? Object.assign(m, e) : (Object.setPrototypeOf(e, m), e); return t ? Object.assign(b, e) : (Object.setPrototypeOf(e, b), e);
} }
function b(e) { function E(e) {
return m.isPrototypeOf(e) && e !== m ? e : m; return b.isPrototypeOf(e) && e !== b ? e : b;
} }
// src/helpers.js // src/helpers.js
function l(e) { function g(e) {
return typeof e > "u"; return typeof e > "u";
} }
function _(e, t) { function w(e, t) {
if (!e || !(e instanceof AbortSignal)) if (!e || !(e instanceof AbortSignal))
return !0; return !0;
if (!e.aborted) if (!e.aborted)
@@ -30,9 +30,9 @@
} }
// src/dom-common.js // src/dom-common.js
var R = { setDeleteAttr: j }; var y = { setDeleteAttr: j };
function j(e, t, n) { function j(e, t, n) {
if (Reflect.set(e, t, n), !!l(n)) { if (Reflect.set(e, t, n), !!g(n)) {
if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined") if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined")
return e.removeAttribute(t); return e.removeAttribute(t);
if (Reflect.get(e, t) === "undefined") if (Reflect.get(e, t) === "undefined")
@@ -41,12 +41,12 @@
} }
// src/dom.js // src/dom.js
var v = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.body) : document.body }], C = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, x = { var m = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.body) : document.body }], R = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, _ = {
get current() { get current() {
return v[v.length - 1]; return m[m.length - 1];
}, },
get state() { get state() {
return [...v]; return [...m];
}, },
get host() { get host() {
return this.current.host; return this.current.host;
@@ -55,93 +55,93 @@
return this.current.namespace; return this.current.namespace;
}, },
set namespace(e) { set namespace(e) {
return this.current.namespace = C(e); return this.current.namespace = R(e);
}, },
elNamespace(e) { elNamespace(e) {
let t = this.namespace; let t = this.namespace;
return this.namespace = e, { return this.namespace = e, {
append(...n) { append(...n) {
return x.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n); return _.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n);
} }
}; };
}, },
push(e = {}) { push(e = {}) {
return e.namespace && (e.namespace = C(e.namespace)), v.push(Object.assign({}, this.current, e)); return e.namespace && (e.namespace = R(e.namespace)), m.push(Object.assign({}, this.current, e));
}, },
pop() { pop() {
return v.pop(); return m.pop();
} }
}; };
function I(e, t, ...n) { function V(e, t, ...n) {
let r = this, u = b(this), { namespace: d } = x, f; let s = this, r = E(this), { namespace: f } = _, a;
switch ((Object(t) !== t || u.isSignal(t)) && (t = { textContent: t }), !0) { switch ((Object(t) !== t || r.isSignal(t)) && (t = { textContent: t }), !0) {
case typeof e == "function": { case typeof e == "function": {
x.push({ scope: e, host: (i) => i ? (n.unshift(i), void 0) : f }), f = e(t || void 0), x.pop(); _.push({ scope: e, host: (u) => u ? (n.unshift(u), void 0) : a }), a = e(t || void 0), _.pop();
break; break;
} }
case e === "#text": case e === "#text":
f = w.call(r, document.createTextNode(""), t); a = x.call(s, document.createTextNode(""), t);
break; break;
case e === "<>": case e === "<>":
f = w.call(r, document.createDocumentFragment(), t); a = x.call(s, document.createDocumentFragment(), t);
break; break;
case d !== "html": case f !== "html":
f = w.call(r, document.createElementNS(d, e), t); a = x.call(s, document.createElementNS(f, e), t);
break; break;
case !f: case !a:
f = w.call(r, document.createElement(e), t); a = x.call(s, document.createElement(e), t);
} }
return n.forEach((i) => i(f)), f; return n.forEach((u) => u(a)), a;
} }
var { setDeleteAttr: S } = R; var { setDeleteAttr: S } = y;
function w(e, ...t) { function x(e, ...t) {
let n = this, r = b(this); let n = this, s = E(this);
if (!t.length) if (!t.length)
return e; return e;
let d = (e instanceof SVGElement ? U : T).bind(null, e, "Attribute"); let f = (e instanceof SVGElement ? T : F).bind(null, e, "Attribute");
return Object.entries(Object.assign({}, ...t)).forEach(function f([i, a]) { return Object.entries(Object.assign({}, ...t)).forEach(function a([u, d]) {
a = r.processReactiveAttribute(e, i, a, f); d = s.processReactiveAttribute(e, u, d, a);
let [h] = i; let [h] = u;
if (h === "=") if (h === "=")
return d(i.slice(1), a); return f(u.slice(1), d);
if (h === ".") if (h === ".")
return y(e, i.slice(1), a); return L(e, u.slice(1), d);
if (/(aria|data)([A-Z])/.test(i)) if (/(aria|data)([A-Z])/.test(u))
return i = i.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), d(i, a); return u = u.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), f(u, d);
switch (i === "className" && (i = "class"), i) { switch (u === "className" && (u = "class"), u) {
case "xlink:href": case "xlink:href":
return d(i, a, "http://www.w3.org/1999/xlink"); return f(u, d, "http://www.w3.org/1999/xlink");
case "textContent": case "textContent":
return S(e, i, a); return S(e, u, d);
case "style": case "style":
if (typeof a != "object") if (typeof d != "object")
break; break;
case "dataset": case "dataset":
return O(r, a, y.bind(null, e[i])); return C(s, d, L.bind(null, e[u]));
case "ariaset": case "ariaset":
return O(r, a, (E, c) => d("aria-" + E, c)); return C(s, d, (l, c) => f("aria-" + l, c));
case "classList": case "classList":
return F.call(n, e, a); return M.call(n, e, d);
} }
return M(e, i) ? S(e, i, a) : d(i, a); return W(e, u) ? S(e, u, d) : f(u, d);
}), e; }), e;
} }
function F(e, t) { function M(e, t) {
let n = b(this); let n = E(this);
return O( return C(
n, n,
t, t,
(r, u) => e.classList.toggle(r, u === -1 ? void 0 : !!u) (s, r) => e.classList.toggle(s, r === -1 ? void 0 : !!r)
), e; ), e;
} }
function Z(e) { function $(e) {
return Array.from(e.children).forEach((t) => t.remove()), e; return Array.from(e.children).forEach((t) => t.remove()), e;
} }
function M(e, t) { function W(e, t) {
if (!Reflect.has(e, t)) if (!Reflect.has(e, t))
return !1; return !1;
let n = D(e, t); let n = D(e, t);
return !l(n.set); return !g(n.set);
} }
function D(e, t) { function D(e, t) {
if (e = Object.getPrototypeOf(e), !e) if (e = Object.getPrototypeOf(e), !e)
@@ -149,86 +149,105 @@
let n = Object.getOwnPropertyDescriptor(e, t); let n = Object.getOwnPropertyDescriptor(e, t);
return n || D(e, t); return n || D(e, t);
} }
function O(e, t, n) { function C(e, t, n) {
if (!(typeof t != "object" || t === null)) if (!(typeof t != "object" || t === null))
return Object.entries(t).forEach(function([u, d]) { return Object.entries(t).forEach(function([r, f]) {
u && (d = e.processReactiveAttribute(t, u, d, (f) => n(...f)), n(u, d)); r && (f = e.processReactiveAttribute(t, r, f, (a) => n(...a)), n(r, f));
}); });
} }
function L(e) { function N(e) {
return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; return Array.isArray(e) ? e.filter(Boolean).join(" ") : e;
} }
function T(e, t, n, r) { function F(e, t, n, s) {
return e[(l(r) ? "remove" : "set") + t](n, L(r)); return e[(g(s) ? "remove" : "set") + t](n, N(s));
} }
function U(e, t, n, r, u = null) { function T(e, t, n, s, r = null) {
return e[(l(r) ? "remove" : "set") + t + "NS"](u, n, L(r)); return e[(g(s) ? "remove" : "set") + t + "NS"](r, n, N(s));
} }
function y(e, t, n) { function L(e, t, n) {
if (Reflect.set(e, t, n), !!l(n)) if (Reflect.set(e, t, n), !!g(n))
return Reflect.deleteProperty(e, t); return Reflect.deleteProperty(e, t);
} }
// src/events.js // src/events.js
function K(e, t, ...n) { function Q(e, t, ...n) {
let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); let s = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
return e.dispatchEvent(r); return e.dispatchEvent(s);
} }
function N(e, t, n) { function O(e, t, n) {
return function(u) { return function(r) {
return u.addEventListener(e, t, n), u; return r.addEventListener(e, t, n), r;
}; };
} }
var A = W(); var A = q(), U = /* @__PURE__ */ new WeakSet();
N.connected = function(e, t) { O.connected = function(e, t) {
let n = "connected";
return typeof t != "object" && (t = {}), t.once = !0, function(r) { return typeof t != "object" && (t = {}), t.once = !0, function(r) {
return r.addEventListener("dde:connected", e, t), typeof r.connectedCallback == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event("dde:connected")), r) : (_(t.signal, () => A.offConnected(r, e)) && A.onConnected(r, e), r); let f = "dde:" + n;
return r.addEventListener(f, e, t), typeof r[n + "Callback"] == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event(f)), r) : (w(t.signal, () => A.offConnected(r, e)) && A.onConnected(r, e), r);
}; };
}; };
N.disconnected = function(e, t) { O.disconnected = function(e, t) {
let n = "disconnected";
return typeof t != "object" && (t = {}), t.once = !0, function(r) { return typeof t != "object" && (t = {}), t.once = !0, function(r) {
return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || _(t.signal, () => A.offDisconnected(r, e)) && A.onDisconnected(r, e), r; let f = "dde:" + n;
return r.addEventListener(f, e, t), typeof r[n + "Callback"] == "function" || w(t.signal, () => A.offDisconnected(r, e)) && A.onDisconnected(r, e), r;
}; };
}; };
function W() { O.attributeChanged = function(e, t) {
let n = "attributeChanged";
return typeof t != "object" && (t = {}), function(r) {
let f = "dde:" + n;
if (r.addEventListener(f, e, t), typeof r[n + "Callback"] == "function" || U.has(r))
return r;
let a = new MutationObserver(function(d) {
for (let { attributeName: h, target: l } of d)
l.dispatchEvent(
new CustomEvent(f, { detail: [h, l.getAttribute(h)] })
);
});
return w(t.signal, () => a.disconnect()) && a.observe(r, { attributes: !0 }), r;
};
};
function q() {
let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) { let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) {
for (let o of c) for (let o of c)
if (o.type === "childList") { if (o.type === "childList") {
if (h(o.addedNodes, !0)) { if (h(o.addedNodes, !0)) {
f(); a();
continue; continue;
} }
E(o.removedNodes, !0) && f(); l(o.removedNodes, !0) && a();
} }
}); });
return { return {
onConnected(c, o) { onConnected(c, o) {
d(); f();
let s = u(c); let i = r(c);
s.connected.has(o) || (s.connected.add(o), s.length_c += 1); i.connected.has(o) || (i.connected.add(o), i.length_c += 1);
}, },
offConnected(c, o) { offConnected(c, o) {
if (!e.has(c)) if (!e.has(c))
return; return;
let s = e.get(c); let i = e.get(c);
s.connected.has(o) && (s.connected.delete(o), s.length_c -= 1, r(c, s)); i.connected.has(o) && (i.connected.delete(o), i.length_c -= 1, s(c, i));
}, },
onDisconnected(c, o) { onDisconnected(c, o) {
d(); f();
let s = u(c); let i = r(c);
s.disconnected.has(o) || (s.disconnected.add(o), s.length_d += 1); i.disconnected.has(o) || (i.disconnected.add(o), i.length_d += 1);
}, },
offDisconnected(c, o) { offDisconnected(c, o) {
if (!e.has(c)) if (!e.has(c))
return; return;
let s = e.get(c); let i = e.get(c);
s.disconnected.has(o) && (s.disconnected.delete(o), s.length_d -= 1, r(c, s)); i.disconnected.has(o) && (i.disconnected.delete(o), i.length_d -= 1, s(c, i));
} }
}; };
function r(c, o) { function s(c, o) {
o.length_c || o.length_d || (e.delete(c), f()); o.length_c || o.length_d || (e.delete(c), a());
} }
function u(c) { function r(c) {
if (e.has(c)) if (e.has(c))
return e.get(c); return e.get(c);
let o = { let o = {
@@ -239,41 +258,41 @@
}; };
return e.set(c, o), o; return e.set(c, o), o;
} }
function d() { function f() {
t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
} }
function f() { function a() {
!t || e.size || (t = !1, n.disconnect()); !t || e.size || (t = !1, n.disconnect());
} }
function i() { function u() {
return new Promise(function(c) { return new Promise(function(c) {
(requestIdleCallback || requestAnimationFrame)(c); (requestIdleCallback || requestAnimationFrame)(c);
}); });
} }
async function a(c) { async function d(c) {
e.size > 30 && await i(); e.size > 30 && await u();
let o = []; let o = [];
if (!(c instanceof Node)) if (!(c instanceof Node))
return o; return o;
for (let s of e.keys()) for (let i of e.keys())
s === c || !(s instanceof Node) || c.contains(s) && o.push(s); i === c || !(i instanceof Node) || c.contains(i) && o.push(i);
return o; return o;
} }
function h(c, o) { function h(c, o) {
let s = !1; let i = !1;
for (let p of c) { for (let p of c) {
if (o && a(p).then(h), !e.has(p)) if (o && d(p).then(h), !e.has(p))
continue; continue;
let g = e.get(p); let v = e.get(p);
g.length_c && (p.dispatchEvent(new Event("dde:connected")), g.connected = /* @__PURE__ */ new WeakSet(), g.length_c = 0, g.length_d || e.delete(p), s = !0); v.length_c && (p.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(p), i = !0);
} }
return s; return i;
} }
function E(c, o) { function l(c, o) {
let s = !1; let i = !1;
for (let p of c) for (let p of c)
o && a(p).then(E), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), s = !0); o && d(p).then(l), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), i = !0);
return s; return i;
} }
} }
@@ -286,15 +305,15 @@
}); });
globalThis.dde= { globalThis.dde= {
assign: w, assign: x,
classListDeclarative: F, classListDeclarative: M,
createElement: I, createElement: V,
dispatchEvent: K, dispatchEvent: Q,
el: I, el: V,
empty: Z, empty: $,
on: N, on: O,
registerReactivity: P, registerReactivity: P,
scope: x scope: _
}; };
})(); })();

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

@@ -1,5 +1,5 @@
// src/signals-common.js // src/signals-common.js
var E = { var y = {
isSignal(e) { isSignal(e) {
return !1; return !1;
}, },
@@ -7,22 +7,22 @@ var E = {
return n; return n;
} }
}; };
function C(e, t = !0) { function N(e, t = !0) {
return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e); return t ? Object.assign(y, e) : (Object.setPrototypeOf(e, y), e);
} }
function S(e) { function _(e) {
return E.isPrototypeOf(e) && e !== E ? e : E; return y.isPrototypeOf(e) && e !== y ? e : y;
} }
// src/helpers.js // src/helpers.js
function m(e) { function v(e) {
return typeof e > "u"; return typeof e > "u";
} }
function P(e) { function j(e) {
let t = typeof e; let t = typeof e;
return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e); return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e);
} }
function L(e, t) { function A(e, t) {
if (!e || !(e instanceof AbortSignal)) if (!e || !(e instanceof AbortSignal))
return !0; return !0;
if (!e.aborted) if (!e.aborted)
@@ -32,9 +32,9 @@ function L(e, t) {
} }
// src/dom-common.js // src/dom-common.js
var j = { setDeleteAttr: H }; var W = { setDeleteAttr: H };
function H(e, t, n) { function H(e, t, n) {
if (Reflect.set(e, t, n), !!m(n)) { if (Reflect.set(e, t, n), !!v(n)) {
if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined") if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined")
return e.removeAttribute(t); return e.removeAttribute(t);
if (Reflect.get(e, t) === "undefined") if (Reflect.get(e, t) === "undefined")
@@ -43,12 +43,12 @@ function H(e, t, n) {
} }
// src/dom.js // src/dom.js
var w = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.body) : document.body }], W = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, O = { var S = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.body) : document.body }], M = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, E = {
get current() { get current() {
return w[w.length - 1]; return S[S.length - 1];
}, },
get state() { get state() {
return [...w]; return [...S];
}, },
get host() { get host() {
return this.current.host; return this.current.host;
@@ -57,80 +57,80 @@ var w = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.
return this.current.namespace; return this.current.namespace;
}, },
set namespace(e) { set namespace(e) {
return this.current.namespace = W(e); return this.current.namespace = M(e);
}, },
elNamespace(e) { elNamespace(e) {
let t = this.namespace; let t = this.namespace;
return this.namespace = e, { return this.namespace = e, {
append(...n) { append(...n) {
return O.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n); return E.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n);
} }
}; };
}, },
push(e = {}) { push(e = {}) {
return e.namespace && (e.namespace = W(e.namespace)), w.push(Object.assign({}, this.current, e)); return e.namespace && (e.namespace = M(e.namespace)), S.push(Object.assign({}, this.current, e));
}, },
pop() { pop() {
return w.pop(); return S.pop();
} }
}; };
function se(e, t, ...n) { function ie(e, t, ...n) {
let r = this, o = S(this), { namespace: u } = O, a; let r = this, o = _(this), { namespace: c } = E, a;
switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) { switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) {
case typeof e == "function": { case typeof e == "function": {
O.push({ scope: e, host: (s) => s ? (n.unshift(s), void 0) : a }), a = e(t || void 0), O.pop(); E.push({ scope: e, host: (s) => s ? (n.unshift(s), void 0) : a }), a = e(t || void 0), E.pop();
break; break;
} }
case e === "#text": case e === "#text":
a = y.call(r, document.createTextNode(""), t); a = O.call(r, document.createTextNode(""), t);
break; break;
case e === "<>": case e === "<>":
a = y.call(r, document.createDocumentFragment(), t); a = O.call(r, document.createDocumentFragment(), t);
break; break;
case u !== "html": case c !== "html":
a = y.call(r, document.createElementNS(u, e), t); a = O.call(r, document.createElementNS(c, e), t);
break; break;
case !a: case !a:
a = y.call(r, document.createElement(e), t); a = O.call(r, document.createElement(e), t);
} }
return n.forEach((s) => s(a)), a; return n.forEach((s) => s(a)), a;
} }
var { setDeleteAttr: F } = j; var { setDeleteAttr: k } = W;
function y(e, ...t) { function O(e, ...t) {
let n = this, r = S(this); let n = this, r = _(this);
if (!t.length) if (!t.length)
return e; return e;
let u = (e instanceof SVGElement ? J : I).bind(null, e, "Attribute"); let c = (e instanceof SVGElement ? J : I).bind(null, e, "Attribute");
return Object.entries(Object.assign({}, ...t)).forEach(function a([s, d]) { return Object.entries(Object.assign({}, ...t)).forEach(function a([s, d]) {
d = r.processReactiveAttribute(e, s, d, a); d = r.processReactiveAttribute(e, s, d, a);
let [b] = s; let [m] = s;
if (b === "=") if (m === "=")
return u(s.slice(1), d); return c(s.slice(1), d);
if (b === ".") if (m === ".")
return M(e, s.slice(1), d); return F(e, s.slice(1), d);
if (/(aria|data)([A-Z])/.test(s)) if (/(aria|data)([A-Z])/.test(s))
return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), u(s, d); return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, d);
switch (s === "className" && (s = "class"), s) { switch (s === "className" && (s = "class"), s) {
case "xlink:href": case "xlink:href":
return u(s, d, "http://www.w3.org/1999/xlink"); return c(s, d, "http://www.w3.org/1999/xlink");
case "textContent": case "textContent":
return F(e, s, d); return k(e, s, d);
case "style": case "style":
if (typeof d != "object") if (typeof d != "object")
break; break;
case "dataset": case "dataset":
return N(r, d, M.bind(null, e[s])); return D(r, d, F.bind(null, e[s]));
case "ariaset": case "ariaset":
return N(r, d, (x, c) => u("aria-" + x, c)); return D(r, d, (b, i) => c("aria-" + b, i));
case "classList": case "classList":
return B.call(n, e, d); return B.call(n, e, d);
} }
return G(e, s) ? F(e, s, d) : u(s, d); return G(e, s) ? k(e, s, d) : c(s, d);
}), e; }), e;
} }
function B(e, t) { function B(e, t) {
let n = S(this); let n = _(this);
return N( return D(
n, n,
t, t,
(r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o) (r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o)
@@ -143,7 +143,7 @@ function G(e, t) {
if (!Reflect.has(e, t)) if (!Reflect.has(e, t))
return !1; return !1;
let n = z(e, t); let n = z(e, t);
return !m(n.set); return !v(n.set);
} }
function z(e, t) { function z(e, t) {
if (e = Object.getPrototypeOf(e), !e) if (e = Object.getPrototypeOf(e), !e)
@@ -151,130 +151,149 @@ function z(e, t) {
let n = Object.getOwnPropertyDescriptor(e, t); let n = Object.getOwnPropertyDescriptor(e, t);
return n || z(e, t); return n || z(e, t);
} }
function N(e, t, n) { function D(e, t, n) {
if (!(typeof t != "object" || t === null)) if (!(typeof t != "object" || t === null))
return Object.entries(t).forEach(function([o, u]) { return Object.entries(t).forEach(function([o, c]) {
o && (u = e.processReactiveAttribute(t, o, u, (a) => n(...a)), n(o, u)); o && (c = e.processReactiveAttribute(t, o, c, (a) => n(...a)), n(o, c));
}); });
} }
function T(e) { function T(e) {
return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; return Array.isArray(e) ? e.filter(Boolean).join(" ") : e;
} }
function I(e, t, n, r) { function I(e, t, n, r) {
return e[(m(r) ? "remove" : "set") + t](n, T(r)); return e[(v(r) ? "remove" : "set") + t](n, T(r));
} }
function J(e, t, n, r, o = null) { function J(e, t, n, r, o = null) {
return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, T(r)); return e[(v(r) ? "remove" : "set") + t + "NS"](o, n, T(r));
} }
function M(e, t, n) { function F(e, t, n) {
if (Reflect.set(e, t, n), !!m(n)) if (Reflect.set(e, t, n), !!v(n))
return Reflect.deleteProperty(e, t); return Reflect.deleteProperty(e, t);
} }
// src/events.js // src/events.js
function de(e, t, ...n) { function le(e, t, ...n) {
let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
return e.dispatchEvent(r); return e.dispatchEvent(r);
} }
function U(e, t, n) { function x(e, t, n) {
return function(o) { return function(o) {
return o.addEventListener(e, t, n), o; return o.addEventListener(e, t, n), o;
}; };
} }
var _ = V(); var R = Z(), V = /* @__PURE__ */ new WeakSet();
U.connected = function(e, t) { x.connected = function(e, t) {
return typeof t != "object" && (t = {}), t.once = !0, function(r) { let n = "connected";
return r.addEventListener("dde:connected", e, t), typeof r.connectedCallback == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event("dde:connected")), r) : (L(t.signal, () => _.offConnected(r, e)) && _.onConnected(r, e), r); return typeof t != "object" && (t = {}), t.once = !0, function(o) {
let c = "dde:" + n;
return o.addEventListener(c, e, t), typeof o[n + "Callback"] == "function" ? o : o.isConnected ? (o.dispatchEvent(new Event(c)), o) : (A(t.signal, () => R.offConnected(o, e)) && R.onConnected(o, e), o);
}; };
}; };
U.disconnected = function(e, t) { x.disconnected = function(e, t) {
return typeof t != "object" && (t = {}), t.once = !0, function(r) { let n = "disconnected";
return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || L(t.signal, () => _.offDisconnected(r, e)) && _.onDisconnected(r, e), r; return typeof t != "object" && (t = {}), t.once = !0, function(o) {
let c = "dde:" + n;
return o.addEventListener(c, e, t), typeof o[n + "Callback"] == "function" || A(t.signal, () => R.offDisconnected(o, e)) && R.onDisconnected(o, e), o;
}; };
}; };
function V() { x.attributeChanged = function(e, t) {
let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) { let n = "attributeChanged";
for (let i of c) return typeof t != "object" && (t = {}), function(o) {
if (i.type === "childList") { let c = "dde:" + n;
if (b(i.addedNodes, !0)) { if (o.addEventListener(c, e, t), typeof o[n + "Callback"] == "function" || V.has(o))
return o;
let a = new MutationObserver(function(d) {
for (let { attributeName: m, target: b } of d)
b.dispatchEvent(
new CustomEvent(c, { detail: [m, b.getAttribute(m)] })
);
});
return A(t.signal, () => a.disconnect()) && a.observe(o, { attributes: !0 }), o;
};
};
function Z() {
let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(i) {
for (let u of i)
if (u.type === "childList") {
if (m(u.addedNodes, !0)) {
a(); a();
continue; continue;
} }
x(i.removedNodes, !0) && a(); b(u.removedNodes, !0) && a();
} }
}); });
return { return {
onConnected(c, i) { onConnected(i, u) {
u(); c();
let f = o(c); let f = o(i);
f.connected.has(i) || (f.connected.add(i), f.length_c += 1); f.connected.has(u) || (f.connected.add(u), f.length_c += 1);
}, },
offConnected(c, i) { offConnected(i, u) {
if (!e.has(c)) if (!e.has(i))
return; return;
let f = e.get(c); let f = e.get(i);
f.connected.has(i) && (f.connected.delete(i), f.length_c -= 1, r(c, f)); f.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, r(i, f));
}, },
onDisconnected(c, i) { onDisconnected(i, u) {
u(); c();
let f = o(c); let f = o(i);
f.disconnected.has(i) || (f.disconnected.add(i), f.length_d += 1); f.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);
}, },
offDisconnected(c, i) { offDisconnected(i, u) {
if (!e.has(c)) if (!e.has(i))
return; return;
let f = e.get(c); let f = e.get(i);
f.disconnected.has(i) && (f.disconnected.delete(i), f.length_d -= 1, r(c, f)); f.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, r(i, f));
} }
}; };
function r(c, i) { function r(i, u) {
i.length_c || i.length_d || (e.delete(c), a()); u.length_c || u.length_d || (e.delete(i), a());
} }
function o(c) { function o(i) {
if (e.has(c)) if (e.has(i))
return e.get(c); return e.get(i);
let i = { let u = {
connected: /* @__PURE__ */ new WeakSet(), connected: /* @__PURE__ */ new WeakSet(),
length_c: 0, length_c: 0,
disconnected: /* @__PURE__ */ new WeakSet(), disconnected: /* @__PURE__ */ new WeakSet(),
length_d: 0 length_d: 0
}; };
return e.set(c, i), i; return e.set(i, u), u;
} }
function u() { function c() {
t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
} }
function a() { function a() {
!t || e.size || (t = !1, n.disconnect()); !t || e.size || (t = !1, n.disconnect());
} }
function s() { function s() {
return new Promise(function(c) { return new Promise(function(i) {
(requestIdleCallback || requestAnimationFrame)(c); (requestIdleCallback || requestAnimationFrame)(i);
}); });
} }
async function d(c) { async function d(i) {
e.size > 30 && await s(); e.size > 30 && await s();
let i = []; let u = [];
if (!(c instanceof Node)) if (!(i instanceof Node))
return i; return u;
for (let f of e.keys()) for (let f of e.keys())
f === c || !(f instanceof Node) || c.contains(f) && i.push(f); f === i || !(f instanceof Node) || i.contains(f) && u.push(f);
return i; return u;
} }
function b(c, i) { function m(i, u) {
let f = !1; let f = !1;
for (let l of c) { for (let p of i) {
if (i && d(l).then(b), !e.has(l)) if (u && d(p).then(m), !e.has(p))
continue; continue;
let v = e.get(l); let w = e.get(p);
v.length_c && (l.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(l), f = !0); w.length_c && (p.dispatchEvent(new Event("dde:connected")), w.connected = /* @__PURE__ */ new WeakSet(), w.length_c = 0, w.length_d || e.delete(p), f = !0);
} }
return f; return f;
} }
function x(c, i) { function b(i, u) {
let f = !1; let f = !1;
for (let l of c) for (let p of i)
i && d(l).then(x), !(!e.has(l) || !e.get(l).length_d) && (l.dispatchEvent(new Event("dde:disconnected")), e.delete(l), f = !0); u && d(p).then(b), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), f = !0);
return f; return f;
} }
} }
@@ -288,64 +307,75 @@ function V() {
}); });
// src/signals-lib.js // src/signals-lib.js
var p = Symbol.for("Signal"); var l = Symbol.for("Signal");
function R(e) { function C(e) {
try { try {
return Reflect.has(e, p); return Reflect.has(e, l);
} catch { } catch {
return !1; return !1;
} }
} }
var h = /* @__PURE__ */ new WeakMap(); var g = /* @__PURE__ */ new WeakMap();
function g(e, t) { function h(e, t) {
if (typeof e != "function") if (typeof e != "function")
return $(e, t); return U(e, t);
if (R(e)) if (C(e))
return e; return e;
let n = $(""), r = () => n(e()); let n = U(""), r = () => n(e());
return h.set(r, /* @__PURE__ */ new Set([n])), Q(r), n; return g.set(r, /* @__PURE__ */ new Set([n])), X(r), n;
} }
g.action = function(e, t, ...n) { h.action = function(e, t, ...n) {
let r = e[p], { actions: o } = r; let r = e[l], { actions: o } = r;
if (!o || !Reflect.has(o, t)) if (!o || !Reflect.has(o, t))
throw new Error(`'${e}' has no action with name '${t}'!`); throw new Error(`'${e}' has no action with name '${t}'!`);
if (o[t].apply(r, n), r.skip) if (o[t].apply(r, n), r.skip)
return Reflect.deleteProperty(r, "skip"); return Reflect.deleteProperty(r, "skip");
r.listeners.forEach((u) => u(r.value)); r.listeners.forEach((c) => c(r.value));
}; };
g.on = function e(t, n, r = {}) { h.on = function e(t, n, r = {}) {
let { signal: o } = r; let { signal: o } = r;
if (!(o && o.aborted)) { if (!(o && o.aborted)) {
if (Array.isArray(t)) if (Array.isArray(t))
return t.forEach((u) => e(u, n, r)); return t.forEach((c) => e(c, n, r));
D(t, n), o && o.addEventListener("abort", () => q(t, n)); P(t, n), o && o.addEventListener("abort", () => q(t, n));
} }
}; };
g.symbols = { h.symbols = {
signal: p, signal: l,
onclear: Symbol.for("Signal.onclear") onclear: Symbol.for("Signal.onclear")
}; };
g.clear = function(...e) { h.attribute = function(e, t = void 0) {
let { host: n } = E, r = n() && n().hasAttribute(e) ? n().getAttribute(e) : t, o = new AbortController(), c = h(r, {
[h.symbols.onclear]() {
o.abort();
}
});
return E.host(x.attributeChanged(function({ detail: a }) {
let [s, d] = a;
s === e && c(d);
}, { signal: o.signal })), c;
};
h.clear = function(...e) {
for (let n of e) { for (let n of e) {
Reflect.deleteProperty(n, "toJSON"); Reflect.deleteProperty(n, "toJSON");
let r = n[p], { onclear: o } = g.symbols; let r = n[l], { onclear: o } = h.symbols;
r.actions && r.actions[o] && r.actions[o].call(r), t(n, r), Reflect.deleteProperty(n, p); r.actions && r.actions[o] && r.actions[o].call(r), t(n, r), Reflect.deleteProperty(n, l);
} }
function t(n, r) { function t(n, r) {
r.listeners.forEach((o) => { r.listeners.forEach((o) => {
if (r.listeners.delete(o), !h.has(o)) if (r.listeners.delete(o), !g.has(o))
return; return;
let u = h.get(o); let c = g.get(o);
u.delete(n), !(u.size > 1) && (g.clear(...u), h.delete(o)); c.delete(n), !(c.size > 1) && (h.clear(...c), g.delete(o));
}); });
} }
}; };
g.el = function(e, t) { h.el = function(e, t) {
let n = document.createComment("<#reactive>"), r = document.createComment("</#reactive>"), o = document.createDocumentFragment(); let n = document.createComment("<#reactive>"), r = document.createComment("</#reactive>"), o = document.createDocumentFragment();
o.append(n, r); o.append(n, r);
let u = (a) => { let c = (a) => {
if (!n.parentNode || !r.parentNode) if (!n.parentNode || !r.parentNode)
return q(e, u); return q(e, c);
let s = t(a); let s = t(a);
Array.isArray(s) || (s = [s]); Array.isArray(s) || (s = [s]);
let d = n; let d = n;
@@ -353,74 +383,74 @@ g.el = function(e, t) {
d.remove(); d.remove();
n.after(...s); n.after(...s);
}; };
return D(e, u), u(e()), o; return P(e, c), c(e()), o;
}; };
var k = { var $ = {
isSignal: R, isSignal: C,
processReactiveAttribute(e, t, n, r) { processReactiveAttribute(e, t, n, r) {
return R(n) ? (D(n, (o) => r([t, o])), n()) : n; return C(n) ? (P(n, (o) => r([t, o])), n()) : n;
} }
}; };
function $(e, t) { function U(e, t) {
let n = (...r) => r.length ? ee(n, r[0]) : Y(n); let n = (...r) => r.length ? te(n, ...r) : ee(n);
return K(n, e, t); return Q(n, e, t);
} }
var Z = Object.assign(/* @__PURE__ */ Object.create(null), { var K = Object.assign(/* @__PURE__ */ Object.create(null), {
stopPropagation() { stopPropagation() {
this.skip = !0; this.skip = !0;
} }
}); });
function K(e, t, n) { function Q(e, t, n) {
return P(n) !== "[object Object]" && (n = {}), e[p] = { return j(n) !== "[object Object]" && (n = {}), e[l] = {
value: t, value: t,
actions: n, actions: n,
listeners: /* @__PURE__ */ new Set() listeners: /* @__PURE__ */ new Set()
}, e.toJSON = () => e(), Object.setPrototypeOf(e[p], Z), e; }, e.toJSON = () => e(), Object.setPrototypeOf(e[l], K), e;
} }
var A = []; var L = [];
function Q(e) { function X(e) {
let t = function() { let t = function() {
A.push(t), e(), A.pop(); L.push(t), e(), L.pop();
}; };
h.has(e) && (h.set(t, h.get(e)), h.delete(e)), t(); g.has(e) && (g.set(t, g.get(e)), g.delete(e)), t();
} }
function X() { function Y() {
return A[A.length - 1]; return L[L.length - 1];
} }
function Y(e) { function ee(e) {
if (!e[p]) if (!e[l])
return; return;
let { value: t, listeners: n } = e[p], r = X(); let { value: t, listeners: n } = e[l], r = Y();
return r && n.add(r), h.has(r) && h.get(r).add(e), t; return r && n.add(r), g.has(r) && g.get(r).add(e), t;
} }
function ee(e, t) { function te(e, t, n) {
if (!e[p]) if (!e[l])
return; return;
let n = e[p]; let r = e[l];
if (n.value !== t) if (!(!n && r.value === t))
return n.value = t, n.listeners.forEach((r) => r(t)), t; return r.value = t, r.listeners.forEach((o) => o(t)), t;
} }
function D(e, t) { function P(e, t) {
if (e[p]) if (e[l])
return e[p].listeners.add(t); return e[l].listeners.add(t);
} }
function q(e, t) { function q(e, t) {
if (e[p]) if (e[l])
return e[p].listeners.delete(t); return e[l].listeners.delete(t);
} }
// signals.js // signals.js
C(k); N($);
export { export {
g as S, h as S,
y as assign, O as assign,
B as classListDeclarative, B as classListDeclarative,
se as createElement, ie as createElement,
de as dispatchEvent, le as dispatchEvent,
se as el, ie as el,
fe as empty, fe as empty,
R as isSignal, C as isSignal,
U as on, x as on,
C as registerReactivity, N as registerReactivity,
O as scope E as scope
}; };

247
dist/esm.js vendored
View File

@@ -1,24 +1,24 @@
// src/signals-common.js // src/signals-common.js
var m = { var b = {
isSignal(e) { isSignal(e) {
return !1; return !1;
}, },
processReactiveAttribute(e, t, n, r) { processReactiveAttribute(e, t, n, s) {
return n; return n;
} }
}; };
function P(e, t = !0) { function P(e, t = !0) {
return t ? Object.assign(m, e) : (Object.setPrototypeOf(e, m), e); return t ? Object.assign(b, e) : (Object.setPrototypeOf(e, b), e);
} }
function b(e) { function E(e) {
return m.isPrototypeOf(e) && e !== m ? e : m; return b.isPrototypeOf(e) && e !== b ? e : b;
} }
// src/helpers.js // src/helpers.js
function l(e) { function g(e) {
return typeof e > "u"; return typeof e > "u";
} }
function _(e, t) { function w(e, t) {
if (!e || !(e instanceof AbortSignal)) if (!e || !(e instanceof AbortSignal))
return !0; return !0;
if (!e.aborted) if (!e.aborted)
@@ -28,9 +28,9 @@ function _(e, t) {
} }
// src/dom-common.js // src/dom-common.js
var R = { setDeleteAttr: j }; var y = { setDeleteAttr: j };
function j(e, t, n) { function j(e, t, n) {
if (Reflect.set(e, t, n), !!l(n)) { if (Reflect.set(e, t, n), !!g(n)) {
if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined") if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined")
return e.removeAttribute(t); return e.removeAttribute(t);
if (Reflect.get(e, t) === "undefined") if (Reflect.get(e, t) === "undefined")
@@ -39,12 +39,12 @@ function j(e, t, n) {
} }
// src/dom.js // src/dom.js
var v = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.body) : document.body }], C = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, x = { var m = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.body) : document.body }], R = (e) => e === "svg" ? "http://www.w3.org/2000/svg" : e, _ = {
get current() { get current() {
return v[v.length - 1]; return m[m.length - 1];
}, },
get state() { get state() {
return [...v]; return [...m];
}, },
get host() { get host() {
return this.current.host; return this.current.host;
@@ -53,93 +53,93 @@ var v = [{ scope: document.body, namespace: "html", host: (e) => e ? e(document.
return this.current.namespace; return this.current.namespace;
}, },
set namespace(e) { set namespace(e) {
return this.current.namespace = C(e); return this.current.namespace = R(e);
}, },
elNamespace(e) { elNamespace(e) {
let t = this.namespace; let t = this.namespace;
return this.namespace = e, { return this.namespace = e, {
append(...n) { append(...n) {
return x.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n); return _.namespace = t, n.length === 1 ? n[0] : document.createDocumentFragment().append(...n);
} }
}; };
}, },
push(e = {}) { push(e = {}) {
return e.namespace && (e.namespace = C(e.namespace)), v.push(Object.assign({}, this.current, e)); return e.namespace && (e.namespace = R(e.namespace)), m.push(Object.assign({}, this.current, e));
}, },
pop() { pop() {
return v.pop(); return m.pop();
} }
}; };
function I(e, t, ...n) { function V(e, t, ...n) {
let r = this, u = b(this), { namespace: d } = x, f; let s = this, r = E(this), { namespace: f } = _, a;
switch ((Object(t) !== t || u.isSignal(t)) && (t = { textContent: t }), !0) { switch ((Object(t) !== t || r.isSignal(t)) && (t = { textContent: t }), !0) {
case typeof e == "function": { case typeof e == "function": {
x.push({ scope: e, host: (i) => i ? (n.unshift(i), void 0) : f }), f = e(t || void 0), x.pop(); _.push({ scope: e, host: (u) => u ? (n.unshift(u), void 0) : a }), a = e(t || void 0), _.pop();
break; break;
} }
case e === "#text": case e === "#text":
f = w.call(r, document.createTextNode(""), t); a = x.call(s, document.createTextNode(""), t);
break; break;
case e === "<>": case e === "<>":
f = w.call(r, document.createDocumentFragment(), t); a = x.call(s, document.createDocumentFragment(), t);
break; break;
case d !== "html": case f !== "html":
f = w.call(r, document.createElementNS(d, e), t); a = x.call(s, document.createElementNS(f, e), t);
break; break;
case !f: case !a:
f = w.call(r, document.createElement(e), t); a = x.call(s, document.createElement(e), t);
} }
return n.forEach((i) => i(f)), f; return n.forEach((u) => u(a)), a;
} }
var { setDeleteAttr: S } = R; var { setDeleteAttr: S } = y;
function w(e, ...t) { function x(e, ...t) {
let n = this, r = b(this); let n = this, s = E(this);
if (!t.length) if (!t.length)
return e; return e;
let d = (e instanceof SVGElement ? U : T).bind(null, e, "Attribute"); let f = (e instanceof SVGElement ? T : F).bind(null, e, "Attribute");
return Object.entries(Object.assign({}, ...t)).forEach(function f([i, a]) { return Object.entries(Object.assign({}, ...t)).forEach(function a([u, d]) {
a = r.processReactiveAttribute(e, i, a, f); d = s.processReactiveAttribute(e, u, d, a);
let [h] = i; let [h] = u;
if (h === "=") if (h === "=")
return d(i.slice(1), a); return f(u.slice(1), d);
if (h === ".") if (h === ".")
return y(e, i.slice(1), a); return L(e, u.slice(1), d);
if (/(aria|data)([A-Z])/.test(i)) if (/(aria|data)([A-Z])/.test(u))
return i = i.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), d(i, a); return u = u.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), f(u, d);
switch (i === "className" && (i = "class"), i) { switch (u === "className" && (u = "class"), u) {
case "xlink:href": case "xlink:href":
return d(i, a, "http://www.w3.org/1999/xlink"); return f(u, d, "http://www.w3.org/1999/xlink");
case "textContent": case "textContent":
return S(e, i, a); return S(e, u, d);
case "style": case "style":
if (typeof a != "object") if (typeof d != "object")
break; break;
case "dataset": case "dataset":
return O(r, a, y.bind(null, e[i])); return C(s, d, L.bind(null, e[u]));
case "ariaset": case "ariaset":
return O(r, a, (E, c) => d("aria-" + E, c)); return C(s, d, (l, c) => f("aria-" + l, c));
case "classList": case "classList":
return F.call(n, e, a); return M.call(n, e, d);
} }
return M(e, i) ? S(e, i, a) : d(i, a); return W(e, u) ? S(e, u, d) : f(u, d);
}), e; }), e;
} }
function F(e, t) { function M(e, t) {
let n = b(this); let n = E(this);
return O( return C(
n, n,
t, t,
(r, u) => e.classList.toggle(r, u === -1 ? void 0 : !!u) (s, r) => e.classList.toggle(s, r === -1 ? void 0 : !!r)
), e; ), e;
} }
function Z(e) { function $(e) {
return Array.from(e.children).forEach((t) => t.remove()), e; return Array.from(e.children).forEach((t) => t.remove()), e;
} }
function M(e, t) { function W(e, t) {
if (!Reflect.has(e, t)) if (!Reflect.has(e, t))
return !1; return !1;
let n = D(e, t); let n = D(e, t);
return !l(n.set); return !g(n.set);
} }
function D(e, t) { function D(e, t) {
if (e = Object.getPrototypeOf(e), !e) if (e = Object.getPrototypeOf(e), !e)
@@ -147,86 +147,105 @@ function D(e, t) {
let n = Object.getOwnPropertyDescriptor(e, t); let n = Object.getOwnPropertyDescriptor(e, t);
return n || D(e, t); return n || D(e, t);
} }
function O(e, t, n) { function C(e, t, n) {
if (!(typeof t != "object" || t === null)) if (!(typeof t != "object" || t === null))
return Object.entries(t).forEach(function([u, d]) { return Object.entries(t).forEach(function([r, f]) {
u && (d = e.processReactiveAttribute(t, u, d, (f) => n(...f)), n(u, d)); r && (f = e.processReactiveAttribute(t, r, f, (a) => n(...a)), n(r, f));
}); });
} }
function L(e) { function N(e) {
return Array.isArray(e) ? e.filter(Boolean).join(" ") : e; return Array.isArray(e) ? e.filter(Boolean).join(" ") : e;
} }
function T(e, t, n, r) { function F(e, t, n, s) {
return e[(l(r) ? "remove" : "set") + t](n, L(r)); return e[(g(s) ? "remove" : "set") + t](n, N(s));
} }
function U(e, t, n, r, u = null) { function T(e, t, n, s, r = null) {
return e[(l(r) ? "remove" : "set") + t + "NS"](u, n, L(r)); return e[(g(s) ? "remove" : "set") + t + "NS"](r, n, N(s));
} }
function y(e, t, n) { function L(e, t, n) {
if (Reflect.set(e, t, n), !!l(n)) if (Reflect.set(e, t, n), !!g(n))
return Reflect.deleteProperty(e, t); return Reflect.deleteProperty(e, t);
} }
// src/events.js // src/events.js
function K(e, t, ...n) { function Q(e, t, ...n) {
let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t); let s = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
return e.dispatchEvent(r); return e.dispatchEvent(s);
} }
function N(e, t, n) { function O(e, t, n) {
return function(u) { return function(r) {
return u.addEventListener(e, t, n), u; return r.addEventListener(e, t, n), r;
}; };
} }
var A = W(); var A = q(), U = /* @__PURE__ */ new WeakSet();
N.connected = function(e, t) { O.connected = function(e, t) {
let n = "connected";
return typeof t != "object" && (t = {}), t.once = !0, function(r) { return typeof t != "object" && (t = {}), t.once = !0, function(r) {
return r.addEventListener("dde:connected", e, t), typeof r.connectedCallback == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event("dde:connected")), r) : (_(t.signal, () => A.offConnected(r, e)) && A.onConnected(r, e), r); let f = "dde:" + n;
return r.addEventListener(f, e, t), typeof r[n + "Callback"] == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event(f)), r) : (w(t.signal, () => A.offConnected(r, e)) && A.onConnected(r, e), r);
}; };
}; };
N.disconnected = function(e, t) { O.disconnected = function(e, t) {
let n = "disconnected";
return typeof t != "object" && (t = {}), t.once = !0, function(r) { return typeof t != "object" && (t = {}), t.once = !0, function(r) {
return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || _(t.signal, () => A.offDisconnected(r, e)) && A.onDisconnected(r, e), r; let f = "dde:" + n;
return r.addEventListener(f, e, t), typeof r[n + "Callback"] == "function" || w(t.signal, () => A.offDisconnected(r, e)) && A.onDisconnected(r, e), r;
}; };
}; };
function W() { O.attributeChanged = function(e, t) {
let n = "attributeChanged";
return typeof t != "object" && (t = {}), function(r) {
let f = "dde:" + n;
if (r.addEventListener(f, e, t), typeof r[n + "Callback"] == "function" || U.has(r))
return r;
let a = new MutationObserver(function(d) {
for (let { attributeName: h, target: l } of d)
l.dispatchEvent(
new CustomEvent(f, { detail: [h, l.getAttribute(h)] })
);
});
return w(t.signal, () => a.disconnect()) && a.observe(r, { attributes: !0 }), r;
};
};
function q() {
let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) { let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(c) {
for (let o of c) for (let o of c)
if (o.type === "childList") { if (o.type === "childList") {
if (h(o.addedNodes, !0)) { if (h(o.addedNodes, !0)) {
f(); a();
continue; continue;
} }
E(o.removedNodes, !0) && f(); l(o.removedNodes, !0) && a();
} }
}); });
return { return {
onConnected(c, o) { onConnected(c, o) {
d(); f();
let s = u(c); let i = r(c);
s.connected.has(o) || (s.connected.add(o), s.length_c += 1); i.connected.has(o) || (i.connected.add(o), i.length_c += 1);
}, },
offConnected(c, o) { offConnected(c, o) {
if (!e.has(c)) if (!e.has(c))
return; return;
let s = e.get(c); let i = e.get(c);
s.connected.has(o) && (s.connected.delete(o), s.length_c -= 1, r(c, s)); i.connected.has(o) && (i.connected.delete(o), i.length_c -= 1, s(c, i));
}, },
onDisconnected(c, o) { onDisconnected(c, o) {
d(); f();
let s = u(c); let i = r(c);
s.disconnected.has(o) || (s.disconnected.add(o), s.length_d += 1); i.disconnected.has(o) || (i.disconnected.add(o), i.length_d += 1);
}, },
offDisconnected(c, o) { offDisconnected(c, o) {
if (!e.has(c)) if (!e.has(c))
return; return;
let s = e.get(c); let i = e.get(c);
s.disconnected.has(o) && (s.disconnected.delete(o), s.length_d -= 1, r(c, s)); i.disconnected.has(o) && (i.disconnected.delete(o), i.length_d -= 1, s(c, i));
} }
}; };
function r(c, o) { function s(c, o) {
o.length_c || o.length_d || (e.delete(c), f()); o.length_c || o.length_d || (e.delete(c), a());
} }
function u(c) { function r(c) {
if (e.has(c)) if (e.has(c))
return e.get(c); return e.get(c);
let o = { let o = {
@@ -237,41 +256,41 @@ function W() {
}; };
return e.set(c, o), o; return e.set(c, o), o;
} }
function d() { function f() {
t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 })); t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
} }
function f() { function a() {
!t || e.size || (t = !1, n.disconnect()); !t || e.size || (t = !1, n.disconnect());
} }
function i() { function u() {
return new Promise(function(c) { return new Promise(function(c) {
(requestIdleCallback || requestAnimationFrame)(c); (requestIdleCallback || requestAnimationFrame)(c);
}); });
} }
async function a(c) { async function d(c) {
e.size > 30 && await i(); e.size > 30 && await u();
let o = []; let o = [];
if (!(c instanceof Node)) if (!(c instanceof Node))
return o; return o;
for (let s of e.keys()) for (let i of e.keys())
s === c || !(s instanceof Node) || c.contains(s) && o.push(s); i === c || !(i instanceof Node) || c.contains(i) && o.push(i);
return o; return o;
} }
function h(c, o) { function h(c, o) {
let s = !1; let i = !1;
for (let p of c) { for (let p of c) {
if (o && a(p).then(h), !e.has(p)) if (o && d(p).then(h), !e.has(p))
continue; continue;
let g = e.get(p); let v = e.get(p);
g.length_c && (p.dispatchEvent(new Event("dde:connected")), g.connected = /* @__PURE__ */ new WeakSet(), g.length_c = 0, g.length_d || e.delete(p), s = !0); v.length_c && (p.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(p), i = !0);
} }
return s; return i;
} }
function E(c, o) { function l(c, o) {
let s = !1; let i = !1;
for (let p of c) for (let p of c)
o && a(p).then(E), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), s = !0); o && d(p).then(l), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), i = !0);
return s; return i;
} }
} }
@@ -283,13 +302,13 @@ function W() {
}; };
}); });
export { export {
w as assign, x as assign,
F as classListDeclarative, M as classListDeclarative,
I as createElement, V as createElement,
K as dispatchEvent, Q as dispatchEvent,
I as el, V as el,
Z as empty, $ as empty,
N as on, O as on,
P as registerReactivity, P as registerReactivity,
x as scope _ as scope
}; };

90
examples/components/webComponent.js
View File

@@ -2,7 +2,6 @@ import { el, scope } from "../../index.js";
import { S } from "../../signals.js"; import { S } from "../../signals.js";
const { hasOwnProperty }= Object.prototype; const { hasOwnProperty }= Object.prototype;
const store= attrsPropsToSignals([ "test" ]);
/** /**
* Compatible with `npx-wca test/components/webComponent.js` * Compatible with `npx-wca test/components/webComponent.js`
* */ * */
@@ -12,14 +11,19 @@ export class CustomHTMLTestElement extends HTMLElement{
} }
connectedCallback(){ connectedCallback(){
this.attachShadow({ mode: "open" }).append( this.attachShadow({ mode: "open" }).append(
customElementRender(this, store.toRender(this), this.render) customElementRender(this, this.render)
); );
} }
render({ name, test, preName }){ render({ test }){
console.log(scope.state); console.log(scope.state);
scope.host(on.connected(()=> console.log(CustomHTMLTestElement))); scope.host(on.connected(()=> console.log(CustomHTMLTestElement)));
scope.host(on.attributeChanged(e=> console.log(e)));
scope.host(on.disconnected(()=> console.log(CustomHTMLTestElement))); scope.host(on.disconnected(()=> console.log(CustomHTMLTestElement)));
const name= S.attribute("name");
const preName= S.attribute("pre-name");
console.log({ name, test, preName});
return el("p").append( return el("p").append(
el("#text", { textContent: name }), el("#text", { textContent: name }),
el("#text", { textContent: test }), el("#text", { textContent: test }),
@@ -31,14 +35,13 @@ export class CustomHTMLTestElement extends HTMLElement{
customElementsAssign( customElementsAssign(
CustomHTMLTestElement, CustomHTMLTestElement,
reflectObservedAttributes, reflectObservedAttributes,
lifecycleToEvents(false), lifecycleToEvents,
store.connect
); );
customElements.define("custom-test", CustomHTMLTestElement); customElements.define("custom-test", CustomHTMLTestElement);
function customElementRender(_this, attrs, render){ function customElementRender(_this, render){
scope.push({ scope: _this, host: (...a)=> a.length ? a[0](_this) : _this }); scope.push({ scope: _this, host: (...a)=> a.length ? a[0](_this) : _this });
const out= render(attrs); const out= render(_this);
scope.pop(); scope.pop();
return out; return out;
} }
@@ -57,69 +60,20 @@ function reflectObservedAttributes(c){
}); });
} }
} }
function lifecycleToEvents(is_attrs){ function lifecycleToEvents(class_declaration){
return function(c){ for (const name of [ "connected", "disconnected" ])
wrapMethod(c.prototype, "connectedCallback", function(target, thisArg, detail){ wrapMethod(class_declaration.prototype, name+"Callback", function(target, thisArg, detail){
target.apply(thisArg, detail); target.apply(thisArg, detail);
thisArg.dispatchEvent(new Event("dde:connected")); thisArg.dispatchEvent(new Event("dde:"+name));
}); });
wrapMethod(c.prototype, "disconnectedCallback", function(target, thisArg, detail){ const name= "attributeChanged";
target.apply(thisArg, detail); wrapMethod(class_declaration.prototype, name+"Callback", function(target, thisArg, detail){
thisArg.dispatchEvent(new Event("dde:disconnected")); const [ attribute, , value ]= detail;
}); thisArg.dispatchEvent(new CustomEvent("dde:"+name, {
if(is_attrs) detail: [ attribute, value ]
wrapMethod(c.prototype, "attributeChangedCallback", function(target, thisArg, detail){ }));
thisArg.dispatchEvent(new CustomEvent("dde:attribute", { detail })); target.apply(thisArg, detail);
target.apply(thisArg, detail); });
});
};
}
function attrsPropsToSignals(props= []){
const store_attrs= new WeakMap();
const store_props= new WeakMap();
return {
toRender(target){
const out= {};
const sattrs= get(store_attrs, target);
target.constructor.observedAttributes.forEach(function(name){
const name_camel= name.replace(/([a-z])-([a-z])/g, (_, l, r)=> l+r.toUpperCase());
if(!hasOwnProperty.call(sattrs, name)) sattrs[name]= S(undefined);
out[name_camel]= sattrs[name];
});
const sprops= get(store_props, target);
props.forEach(p=> !hasOwnProperty.call(sprops, p) && (sprops[p]= S(undefined)));
return Object.assign(out, sprops);
},
connect(c){
wrapMethod(c.prototype, "attributeChangedCallback", function(target, thisArg, detail){
const [ name, _, value ]= detail;
const s= get(store_attrs, thisArg);
if(s[name]) s[name](value);
else s[name]= S(value);
target.apply(thisArg, detail);
});
for(const name of props){
Reflect.defineProperty(c.prototype, name, {
get(){
const s= get(store_props, this);
if(s[name]) return s[name]();
},
set(value){
const s= get(store_props, this);
if(s[name]) s[name](value);
else s[name]= S(value);
}
});
}
}
};
function get(store, t){
if(store.has(t)) return store.get(t);
const s= {};
store.set(t, s);
return s;
}
} }
function wrapMethod(obj, method, apply){ function wrapMethod(obj, method, apply){
obj[method]= new Proxy(obj[method] || (()=> {}), { apply }); obj[method]= new Proxy(obj[method] || (()=> {}), { apply });

7
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "deka-dom-el", "name": "deka-dom-el",
"version": "0.4.0", "version": "0.5.0",
"description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.", "description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.",
"author": "Jan Andrle <andrle.jan@centrum.cz>", "author": "Jan Andrle <andrle.jan@centrum.cz>",
"license": "MIT", "license": "MIT",
@@ -51,6 +51,7 @@
"maxcomplexity": 10, "maxcomplexity": 10,
"globals": { "globals": {
"requestIdleCallback": false, "requestIdleCallback": false,
"AbortController": false,
"AbortSignal": false "AbortSignal": false
} }
}, },
@@ -62,12 +63,12 @@
}, },
{ {
"path": "./signals.js", "path": "./signals.js",
"limit": "4 kB", "limit": "7 kB",
"gzip": false "gzip": false
}, },
{ {
"path": "./jsdom.js", "path": "./jsdom.js",
"limit": "8 kB", "limit": "10 kB",
"gzip": false "gzip": false
}, },
{ {

35
src/events.js
View File

@@ -12,17 +12,20 @@ export function on(event, listener, options){
} }
const c_ch_o= connectionsChangesObserverConstructor(); const c_ch_o= connectionsChangesObserverConstructor();
const els_attribute_store= new WeakSet();
import { onAbort } from './helpers.js'; import { onAbort } from './helpers.js';
//TODO: cleanUp when event before abort? //TODO: cleanUp when event before abort?
on.connected= function(listener, options){ on.connected= function(listener, options){
const name= "connected";
if(typeof options !== "object") if(typeof options !== "object")
options= {}; options= {};
options.once= true; options.once= true;
return function registerElement(element){ return function registerElement(element){
element.addEventListener("dde:connected", listener, options); const event= "dde:"+name;
if(typeof element.connectedCallback === "function") return element; element.addEventListener(event, listener, options);
if(typeof element[name+"Callback"] === "function") return element;
if(element.isConnected){ if(element.isConnected){
element.dispatchEvent(new Event("dde:connected")); element.dispatchEvent(new Event(event));
return element; return element;
} }
@@ -32,18 +35,40 @@ on.connected= function(listener, options){
}; };
}; };
on.disconnected= function(listener, options){ on.disconnected= function(listener, options){
const name= "disconnected";
if(typeof options !== "object") if(typeof options !== "object")
options= {}; options= {};
options.once= true; options.once= true;
return function registerElement(element){ return function registerElement(element){
element.addEventListener("dde:disconnected", listener, options); const event= "dde:"+name;
if(typeof element.disconnectedCallback === "function") return element; element.addEventListener(event, listener, options);
if(typeof element[name+"Callback"] === "function") return element;
const c= onAbort(options.signal, ()=> c_ch_o.offDisconnected(element, listener)); const c= onAbort(options.signal, ()=> c_ch_o.offDisconnected(element, listener));
if(c) c_ch_o.onDisconnected(element, listener); if(c) c_ch_o.onDisconnected(element, listener);
return element; return element;
}; };
}; };
on.attributeChanged= function(listener, options){
const name= "attributeChanged";
if(typeof options !== "object")
options= {};
return function registerElement(element){
const event= "dde:"+name;
element.addEventListener(event, listener, options);
if(typeof element[name+"Callback"] === "function") return element;
if(els_attribute_store.has(element)) return element;
const observer= new MutationObserver(function(mutations){
for(const { attributeName, target } of mutations)
target.dispatchEvent(
new CustomEvent(event, { detail: [ attributeName, target.getAttribute(attributeName) ] }));
});
const c= onAbort(options.signal, ()=> observer.disconnect());
if(c) observer.observe(element, { attributes: true });
return element;
};
};
function connectionsChangesObserverConstructor(){ function connectionsChangesObserverConstructor(){
const store= new Map(); const store= new Map();

22
src/signals-lib.js
View File

@@ -37,6 +37,22 @@ S.symbols= {
signal: mark, signal: mark,
onclear: Symbol.for("Signal.onclear") onclear: Symbol.for("Signal.onclear")
}; };
import { on } from "./events.js";
import { scope } from "./dom.js";
S.attribute= function(name, initial= undefined){
const { host }= scope;
const value= host() && host().hasAttribute(name) ? host().getAttribute(name) : initial;
const ac= new AbortController();
const out= S(value, {
[S.symbols.onclear](){ ac.abort(); }
});
scope.host(on.attributeChanged(function({ detail }){
const [ name_c, value ]= detail;
if(name_c!==name) return;
out(value);
}, { signal: ac.signal }));
return out;
};
S.clear= function(...signals){ S.clear= function(...signals){
for(const signal of signals){ for(const signal of signals){
Reflect.deleteProperty(signal, "toJSON"); Reflect.deleteProperty(signal, "toJSON");
@@ -95,7 +111,7 @@ export const signals_config= {
function create(value, actions){ function create(value, actions){
const signal= (...value)=> const signal= (...value)=>
value.length ? write(signal, value[0]) : read(signal); value.length ? write(signal, ...value) : read(signal);
return toSignal(signal, value, actions); return toSignal(signal, value, actions);
} }
const protoSigal= Object.assign(Object.create(null), { const protoSigal= Object.assign(Object.create(null), {
@@ -138,10 +154,10 @@ function read(signal){
if(deps.has(context)) deps.get(context).add(signal); if(deps.has(context)) deps.get(context).add(signal);
return value; return value;
} }
function write(signal, value){ function write(signal, value, force){
if(!signal[mark]) return; if(!signal[mark]) return;
const s= signal[mark]; const s= signal[mark];
if(s.value===value) return; if(!force && s.value===value) return;
s.value= value; s.value= value;
s.listeners.forEach(l=> l(value)); s.listeners.forEach(l=> l(value));
return value; return value;