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

Merge branch 'main' into dev-docs

Browse Source
This commit is contained in:
Jan Andrle
2023-10-09 13:52:03 +02:00
parent 7bbc58e3cc ebbb76e9a0
commit b8c794922b
12 changed files with 668 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
bs/build.js
View File

@@ -25,7 +25,7 @@ function toDDE(file, out){
const name= "dde";
echo(`\n ${out} (${file} → globalThis.${name})\n`);
let content= s.cat(file).toString().split("export {");
let content= s.cat(file).toString().split(/export ?{/);
content.splice(1, 0, `\nglobalThis.${name}= {`);
content[2]= content[2].replace(/^(\t*)(.*) as ([^,\n]*)(,?)$/mg, "$1$3: $2$4");
s.echo([

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

@@ -1,7 +1,7 @@
//deka-dom-el library is available via global namespace `dde`
(()=> {
// src/signals-common.js
var E = {
var w = {
isSignal(e) {
return !1;
},
@@ -9,22 +9,22 @@
return n;
}
};
function C(e, t = !0) {
return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e);
function A(e, t = !0) {
return t ? Object.assign(w, e) : (Object.setPrototypeOf(e, w), e);
}
function x(e) {
return E.isPrototypeOf(e) && e !== E ? e : E;
function S(e) {
return w.isPrototypeOf(e) && e !== w ? e : w;
}
// src/helpers.js
function m(e) {
return typeof e > "u";
}
function N(e) {
function D(e) {
let t = typeof e;
return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e);
}
function L(e, t) {
function C(e, t) {
if (!e || !(e instanceof AbortSignal))
return !0;
if (!e.aborted)
@@ -34,8 +34,8 @@
}
// src/dom-common.js
var P = { setDeleteAttr: W };
function W(e, t, n) {
var P = { setDeleteAttr: q };
function q(e, t, n) {
if (Reflect.set(e, t, n), !!m(n)) {
if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined")
return e.removeAttribute(t);
@@ -45,77 +45,85 @@
}
// src/dom.js
var w = "html";
function oe(e) {
return w = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
var b = "html", F = {
elNamespace(e) {
return b = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
append(...t) {
return w = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t);
return b = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t);
}
};
},
get namespace() {
return b;
},
set namespace(e) {
return b = e;
}
function ce(e, t, ...n) {
let r = this, o = x(this), c;
}, ce = Object.assign((e) => e ? e(document.body) : document.body, F);
function ie(e, t, ...n) {
let r = this, o = S(this), c;
switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) {
case typeof e == "function": {
c = e(t || void 0, (s) => s ? (n.unshift(s), void 0) : c);
let l = Object.assign((u) => u ? (n.unshift(u), void 0) : c, F);
c = e(t || void 0, l), b = "html";
break;
}
case e === "#text":
c = S.call(r, document.createTextNode(""), t);
c = y.call(r, document.createTextNode(""), t);
break;
case e === "<>":
c = S.call(r, document.createDocumentFragment(), t);
c = y.call(r, document.createDocumentFragment(), t);
break;
case w !== "html":
c = S.call(r, document.createElementNS(w, e), t);
case b !== "html":
c = y.call(r, document.createElementNS(b, e), t);
break;
case !c:
c = S.call(r, document.createElement(e), t);
c = y.call(r, document.createElement(e), t);
}
return n.forEach((p) => p(c)), c;
return n.forEach((l) => l(c)), c;
}
var { setDeleteAttr: j } = P;
function S(e, ...t) {
let n = this, r = x(this);
function y(e, ...t) {
let n = this, r = S(this);
if (!t.length)
return e;
let c = (e instanceof SVGElement ? I : H).bind(null, e, "Attribute");
return Object.entries(Object.assign({}, ...t)).forEach(function p([s, a]) {
a = r.processReactiveAttribute(e, s, a, p);
let [b] = s;
if (b === "=")
return c(s.slice(1), a);
if (b === ".")
return F(e, s.slice(1), a);
if (/(aria|data)([A-Z])/.test(s))
return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, a);
switch (s === "className" && (s = "class"), s) {
return Object.entries(Object.assign({}, ...t)).forEach(function l([u, a]) {
a = r.processReactiveAttribute(e, u, a, l);
let [v] = u;
if (v === "=")
return c(u.slice(1), a);
if (v === ".")
return W(e, u.slice(1), a);
if (/(aria|data)([A-Z])/.test(u))
return u = u.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(u, a);
switch (u === "className" && (u = "class"), u) {
case "xlink:href":
return c(s, a, "http://www.w3.org/1999/xlink");
return c(u, a, "http://www.w3.org/1999/xlink");
case "textContent":
return j(e, s, a);
return j(e, u, a);
case "style":
if (typeof a != "object")
break;
case "dataset":
return _(r, a, F.bind(null, e[s]));
return L(r, a, W.bind(null, e[u]));
case "ariaset":
return _(r, a, (v, i) => c("aria-" + v, i));
return L(r, a, (x, i) => c("aria-" + x, i));
case "classList":
return B.call(n, e, a);
}
return G(e, s) ? j(e, s, a) : c(s, a);
return G(e, u) ? j(e, u, a) : c(u, a);
}), e;
}
function B(e, t) {
let n = x(this);
return _(
let n = S(this);
return L(
n,
t,
(r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o)
), e;
}
function se(e) {
function fe(e) {
return Array.from(e.children).forEach((t) => t.remove()), e;
}
function G(e, t) {
@@ -130,10 +138,10 @@
let n = Object.getOwnPropertyDescriptor(e, t);
return n || M(e, t);
}
function _(e, t, n) {
function L(e, t, n) {
if (!(typeof t != "object" || t === null))
return Object.entries(t).forEach(function([o, c]) {
o && (c = e.processReactiveAttribute(t, o, c, (p) => n(...p)), n(o, c));
o && (c = e.processReactiveAttribute(t, o, c, (l) => n(...l)), n(o, c));
});
}
function z(e) {
@@ -145,13 +153,13 @@
function I(e, t, n, r, o = null) {
return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, z(r));
}
function F(e, t, n) {
function W(e, t, n) {
if (Reflect.set(e, t, n), !!m(n))
return Reflect.deleteProperty(e, t);
}
// src/events.js
function ae(e, t, ...n) {
function de(e, t, ...n) {
let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
return e.dispatchEvent(r);
}
@@ -162,92 +170,99 @@
}
var O = J();
T.connected = function(e, t) {
return function(r) {
return typeof r.connectedCallback == "function" ? (r.addEventListener("dde:connected", e, t), r) : (L(t && t.signal, () => O.offConnected(r, e)) && (r.isConnected ? e(new Event("dde:connected")) : O.onConnected(r, e)), 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) : (C(t.signal, () => O.offConnected(r, e)) && O.onConnected(r, e), r);
};
};
T.disconnected = function(e, t) {
return function(r) {
return typeof r.disconnectedCallback == "function" ? (r.addEventListener("dde:disconnected", e, t), r) : (L(t && t.signal, () => O.offDisconnected(r, e)) && O.onDisconnected(r, e), r);
return typeof t != "object" && (t = {}), t.once = !0, function(r) {
return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || C(t.signal, () => O.offDisconnected(r, e)) && O.onDisconnected(r, e), r;
};
};
function J() {
let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(i) {
for (let f of i)
if (f.type === "childList") {
if (b(f.addedNodes, !0)) {
p();
for (let s of i)
if (s.type === "childList") {
if (v(s.addedNodes, !0)) {
l();
continue;
}
v(f.removedNodes, !0) && p();
x(s.removedNodes, !0) && l();
}
});
return {
onConnected(i, f) {
c(), o(i).connected.push(f);
onConnected(i, s) {
c();
let f = o(i);
f.connected.has(s) || (f.connected.add(s), f.length_c += 1);
},
offConnected(i, f) {
offConnected(i, s) {
if (!e.has(i))
return;
let u = e.get(i), l = u.connected;
l.splice(l.indexOf(f), 1), r(i, u);
let f = e.get(i);
f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, r(i, f));
},
onDisconnected(i, f) {
c(), o(i).disconnected.push(f);
onDisconnected(i, s) {
c();
let f = o(i);
f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1);
},
offDisconnected(i, f) {
offDisconnected(i, s) {
if (!e.has(i))
return;
let u = e.get(i), l = u.disconnected;
l.splice(l.indexOf(f), 1), r(i, u);
let f = e.get(i);
f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, r(i, f));
}
};
function r(i, f) {
f.connected.length || f.disconnected.length || (e.delete(i), p());
function r(i, s) {
s.length_c || s.length_d || (e.delete(i), l());
}
function o(i) {
if (e.has(i))
return e.get(i);
let f = { connected: [], disconnected: [] };
return e.set(i, f), f;
let s = {
connected: /* @__PURE__ */ new WeakSet(),
length_c: 0,
disconnected: /* @__PURE__ */ new WeakSet(),
length_d: 0
};
return e.set(i, s), s;
}
function c() {
t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
}
function p() {
function l() {
!t || e.size || (t = !1, n.disconnect());
}
function s() {
function u() {
return new Promise(function(i) {
(requestIdleCallback || requestAnimationFrame)(i);
});
}
async function a(i) {
e.size > 30 && await s();
let f = [];
e.size > 30 && await u();
let s = [];
if (!(i instanceof Node))
return f;
for (let u of e.keys())
u === i || !(u instanceof Node) || i.contains(u) && f.push(u);
return s;
for (let f of e.keys())
f === i || !(f instanceof Node) || i.contains(f) && s.push(f);
return s;
}
function v(i, s) {
let f = !1;
for (let p of i) {
if (s && a(p).then(v), !e.has(p))
continue;
let E = e.get(p);
E.length_c && (p.dispatchEvent(new Event("dde:connected")), E.connected = /* @__PURE__ */ new WeakSet(), E.length_c = 0, E.length_d || e.delete(p), f = !0);
}
return f;
}
function b(i, f) {
for (let u of i) {
if (f && a(u).then(b), !e.has(u))
continue;
let l = e.get(u);
return l.connected.forEach((A) => A(u)), l.connected.length = 0, l.disconnected.length || e.delete(u), !0;
}
return !1;
}
function v(i, f) {
for (let u of i) {
if (f && a(u).then(v), !e.has(u))
continue;
let l = e.get(u);
return l.disconnected.forEach((A) => A(u)), l.connected.length = 0, l.disconnected.length = 0, e.delete(u), !0;
}
return !1;
function x(i, s) {
let f = !1;
for (let p of i)
s && a(p).then(x), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), f = !0);
return f;
}
}
@@ -261,7 +276,7 @@
// src/signals-lib.js
var d = Symbol.for("Signal");
function y(e) {
function _(e) {
try {
return Reflect.has(e, d);
} catch {
@@ -272,10 +287,10 @@
function g(e, t) {
if (typeof e != "function")
return U(e, t);
if (y(e))
if (_(e))
return e;
let n = U(""), r = () => n(e());
return h.set(r, /* @__PURE__ */ new Set([n])), k(r), n;
return h.set(r, /* @__PURE__ */ new Set([n])), K(r), n;
}
g.action = function(e, t, ...n) {
let r = e[d], { actions: o } = r;
@@ -290,7 +305,7 @@
if (!(o && o.aborted)) {
if (Array.isArray(t))
return t.forEach((c) => e(c, n, r));
D(t, n), o && o.addEventListener("abort", () => q(t, n));
N(t, n), o && o.addEventListener("abort", () => k(t, n));
}
};
g.symbols = {
@@ -315,26 +330,26 @@
g.el = function(e, t) {
let n = document.createComment("<#reactive>"), r = document.createComment("</#reactive>"), o = document.createDocumentFragment();
o.append(n, r);
let c = (p) => {
let c = (l) => {
if (!n.parentNode || !r.parentNode)
return q(e, c);
let s = t(p);
Array.isArray(s) || (s = [s]);
return k(e, c);
let u = t(l);
Array.isArray(u) || (u = [u]);
let a = n;
for (; (a = n.nextSibling) !== r; )
a.remove();
n.after(...s);
n.after(...u);
};
return D(e, c), c(e()), o;
return N(e, c), c(e()), o;
};
var $ = {
isSignal: y,
isSignal: _,
processReactiveAttribute(e, t, n, r) {
return y(n) ? (D(n, (o) => r([t, o])), n()) : n;
return _(n) ? (N(n, (o) => r([t, o])), n()) : n;
}
};
function U(e, t) {
let n = (...r) => r.length ? X(n, r[0]) : Q(n);
let n = (...r) => r.length ? Y(n, r[0]) : X(n);
return Z(n, e, t);
}
var V = Object.assign(/* @__PURE__ */ Object.create(null), {
@@ -343,59 +358,59 @@
}
});
function Z(e, t, n) {
return N(n) !== "[object Object]" && (n = {}), e[d] = {
return D(n) !== "[object Object]" && (n = {}), e[d] = {
value: t,
actions: n,
listeners: /* @__PURE__ */ new Set()
}, e.toJSON = () => e(), Object.setPrototypeOf(e[d], V), e;
}
var R = [];
function k(e) {
function K(e) {
let t = function() {
R.push(t), e(), R.pop();
};
h.has(e) && (h.set(t, h.get(e)), h.delete(e)), t();
}
function K() {
function Q() {
return R[R.length - 1];
}
function Q(e) {
function X(e) {
if (!e[d])
return;
let { value: t, listeners: n } = e[d], r = K();
let { value: t, listeners: n } = e[d], r = Q();
return r && n.add(r), h.has(r) && h.get(r).add(e), t;
}
function X(e, t) {
function Y(e, t) {
if (!e[d])
return;
let n = e[d];
if (n.value !== t)
return n.value = t, n.listeners.forEach((r) => r(t)), t;
}
function D(e, t) {
function N(e, t) {
if (e[d])
return e[d].listeners.add(t);
}
function q(e, t) {
function k(e, t) {
if (e[d])
return e[d].listeners.delete(t);
}
// signals.js
C($);
A($);
globalThis.dde= {
S: g,
assign: S,
assign: y,
classListDeclarative: B,
createElement: ce,
dispatchEvent: ae,
el: ce,
empty: se,
isSignal: y,
namespace: oe,
createElement: ie,
dispatchEvent: de,
el: ie,
empty: fe,
isSignal: _,
on: T,
registerReactivity: C
registerReactivity: A,
scope: ce
};
})();

275
dist/dde.js vendored
View File

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

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

@@ -1,5 +1,5 @@
// src/signals-common.js
var E = {
var w = {
isSignal(e) {
return !1;
},
@@ -7,22 +7,22 @@ var E = {
return n;
}
};
function C(e, t = !0) {
return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e);
function A(e, t = !0) {
return t ? Object.assign(w, e) : (Object.setPrototypeOf(e, w), e);
}
function x(e) {
return E.isPrototypeOf(e) && e !== E ? e : E;
function S(e) {
return w.isPrototypeOf(e) && e !== w ? e : w;
}
// src/helpers.js
function m(e) {
return typeof e > "u";
}
function N(e) {
function D(e) {
let t = typeof e;
return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e);
}
function L(e, t) {
function C(e, t) {
if (!e || !(e instanceof AbortSignal))
return !0;
if (!e.aborted)
@@ -32,8 +32,8 @@ function L(e, t) {
}
// src/dom-common.js
var P = { setDeleteAttr: W };
function W(e, t, n) {
var P = { setDeleteAttr: q };
function q(e, t, n) {
if (Reflect.set(e, t, n), !!m(n)) {
if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined")
return e.removeAttribute(t);
@@ -43,77 +43,85 @@ function W(e, t, n) {
}
// src/dom.js
var w = "html";
function oe(e) {
return w = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
var b = "html", F = {
elNamespace(e) {
return b = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
append(...t) {
return w = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t);
return b = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t);
}
};
},
get namespace() {
return b;
},
set namespace(e) {
return b = e;
}
function ce(e, t, ...n) {
let r = this, o = x(this), c;
}, ce = Object.assign((e) => e ? e(document.body) : document.body, F);
function ie(e, t, ...n) {
let r = this, o = S(this), c;
switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) {
case typeof e == "function": {
c = e(t || void 0, (s) => s ? (n.unshift(s), void 0) : c);
let l = Object.assign((u) => u ? (n.unshift(u), void 0) : c, F);
c = e(t || void 0, l), b = "html";
break;
}
case e === "#text":
c = S.call(r, document.createTextNode(""), t);
c = y.call(r, document.createTextNode(""), t);
break;
case e === "<>":
c = S.call(r, document.createDocumentFragment(), t);
c = y.call(r, document.createDocumentFragment(), t);
break;
case w !== "html":
c = S.call(r, document.createElementNS(w, e), t);
case b !== "html":
c = y.call(r, document.createElementNS(b, e), t);
break;
case !c:
c = S.call(r, document.createElement(e), t);
c = y.call(r, document.createElement(e), t);
}
return n.forEach((p) => p(c)), c;
return n.forEach((l) => l(c)), c;
}
var { setDeleteAttr: j } = P;
function S(e, ...t) {
let n = this, r = x(this);
function y(e, ...t) {
let n = this, r = S(this);
if (!t.length)
return e;
let c = (e instanceof SVGElement ? I : H).bind(null, e, "Attribute");
return Object.entries(Object.assign({}, ...t)).forEach(function p([s, a]) {
a = r.processReactiveAttribute(e, s, a, p);
let [b] = s;
if (b === "=")
return c(s.slice(1), a);
if (b === ".")
return F(e, s.slice(1), a);
if (/(aria|data)([A-Z])/.test(s))
return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, a);
switch (s === "className" && (s = "class"), s) {
return Object.entries(Object.assign({}, ...t)).forEach(function l([u, a]) {
a = r.processReactiveAttribute(e, u, a, l);
let [v] = u;
if (v === "=")
return c(u.slice(1), a);
if (v === ".")
return W(e, u.slice(1), a);
if (/(aria|data)([A-Z])/.test(u))
return u = u.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(u, a);
switch (u === "className" && (u = "class"), u) {
case "xlink:href":
return c(s, a, "http://www.w3.org/1999/xlink");
return c(u, a, "http://www.w3.org/1999/xlink");
case "textContent":
return j(e, s, a);
return j(e, u, a);
case "style":
if (typeof a != "object")
break;
case "dataset":
return _(r, a, F.bind(null, e[s]));
return L(r, a, W.bind(null, e[u]));
case "ariaset":
return _(r, a, (v, i) => c("aria-" + v, i));
return L(r, a, (x, i) => c("aria-" + x, i));
case "classList":
return B.call(n, e, a);
}
return G(e, s) ? j(e, s, a) : c(s, a);
return G(e, u) ? j(e, u, a) : c(u, a);
}), e;
}
function B(e, t) {
let n = x(this);
return _(
let n = S(this);
return L(
n,
t,
(r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o)
), e;
}
function se(e) {
function fe(e) {
return Array.from(e.children).forEach((t) => t.remove()), e;
}
function G(e, t) {
@@ -128,10 +136,10 @@ function M(e, t) {
let n = Object.getOwnPropertyDescriptor(e, t);
return n || M(e, t);
}
function _(e, t, n) {
function L(e, t, n) {
if (!(typeof t != "object" || t === null))
return Object.entries(t).forEach(function([o, c]) {
o && (c = e.processReactiveAttribute(t, o, c, (p) => n(...p)), n(o, c));
o && (c = e.processReactiveAttribute(t, o, c, (l) => n(...l)), n(o, c));
});
}
function z(e) {
@@ -143,13 +151,13 @@ function H(e, t, n, r) {
function I(e, t, n, r, o = null) {
return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, z(r));
}
function F(e, t, n) {
function W(e, t, n) {
if (Reflect.set(e, t, n), !!m(n))
return Reflect.deleteProperty(e, t);
}
// src/events.js
function ae(e, t, ...n) {
function de(e, t, ...n) {
let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
return e.dispatchEvent(r);
}
@@ -160,92 +168,99 @@ function T(e, t, n) {
}
var O = J();
T.connected = function(e, t) {
return function(r) {
return typeof r.connectedCallback == "function" ? (r.addEventListener("dde:connected", e, t), r) : (L(t && t.signal, () => O.offConnected(r, e)) && (r.isConnected ? e(new Event("dde:connected")) : O.onConnected(r, e)), 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) : (C(t.signal, () => O.offConnected(r, e)) && O.onConnected(r, e), r);
};
};
T.disconnected = function(e, t) {
return function(r) {
return typeof r.disconnectedCallback == "function" ? (r.addEventListener("dde:disconnected", e, t), r) : (L(t && t.signal, () => O.offDisconnected(r, e)) && O.onDisconnected(r, e), r);
return typeof t != "object" && (t = {}), t.once = !0, function(r) {
return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || C(t.signal, () => O.offDisconnected(r, e)) && O.onDisconnected(r, e), r;
};
};
function J() {
let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(i) {
for (let f of i)
if (f.type === "childList") {
if (b(f.addedNodes, !0)) {
p();
for (let s of i)
if (s.type === "childList") {
if (v(s.addedNodes, !0)) {
l();
continue;
}
v(f.removedNodes, !0) && p();
x(s.removedNodes, !0) && l();
}
});
return {
onConnected(i, f) {
c(), o(i).connected.push(f);
onConnected(i, s) {
c();
let f = o(i);
f.connected.has(s) || (f.connected.add(s), f.length_c += 1);
},
offConnected(i, f) {
offConnected(i, s) {
if (!e.has(i))
return;
let u = e.get(i), l = u.connected;
l.splice(l.indexOf(f), 1), r(i, u);
let f = e.get(i);
f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, r(i, f));
},
onDisconnected(i, f) {
c(), o(i).disconnected.push(f);
onDisconnected(i, s) {
c();
let f = o(i);
f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1);
},
offDisconnected(i, f) {
offDisconnected(i, s) {
if (!e.has(i))
return;
let u = e.get(i), l = u.disconnected;
l.splice(l.indexOf(f), 1), r(i, u);
let f = e.get(i);
f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, r(i, f));
}
};
function r(i, f) {
f.connected.length || f.disconnected.length || (e.delete(i), p());
function r(i, s) {
s.length_c || s.length_d || (e.delete(i), l());
}
function o(i) {
if (e.has(i))
return e.get(i);
let f = { connected: [], disconnected: [] };
return e.set(i, f), f;
let s = {
connected: /* @__PURE__ */ new WeakSet(),
length_c: 0,
disconnected: /* @__PURE__ */ new WeakSet(),
length_d: 0
};
return e.set(i, s), s;
}
function c() {
t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
}
function p() {
function l() {
!t || e.size || (t = !1, n.disconnect());
}
function s() {
function u() {
return new Promise(function(i) {
(requestIdleCallback || requestAnimationFrame)(i);
});
}
async function a(i) {
e.size > 30 && await s();
let f = [];
e.size > 30 && await u();
let s = [];
if (!(i instanceof Node))
return f;
for (let u of e.keys())
u === i || !(u instanceof Node) || i.contains(u) && f.push(u);
return s;
for (let f of e.keys())
f === i || !(f instanceof Node) || i.contains(f) && s.push(f);
return s;
}
function v(i, s) {
let f = !1;
for (let p of i) {
if (s && a(p).then(v), !e.has(p))
continue;
let E = e.get(p);
E.length_c && (p.dispatchEvent(new Event("dde:connected")), E.connected = /* @__PURE__ */ new WeakSet(), E.length_c = 0, E.length_d || e.delete(p), f = !0);
}
return f;
}
function b(i, f) {
for (let u of i) {
if (f && a(u).then(b), !e.has(u))
continue;
let l = e.get(u);
return l.connected.forEach((A) => A(u)), l.connected.length = 0, l.disconnected.length || e.delete(u), !0;
}
return !1;
}
function v(i, f) {
for (let u of i) {
if (f && a(u).then(v), !e.has(u))
continue;
let l = e.get(u);
return l.disconnected.forEach((A) => A(u)), l.connected.length = 0, l.disconnected.length = 0, e.delete(u), !0;
}
return !1;
function x(i, s) {
let f = !1;
for (let p of i)
s && a(p).then(x), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), f = !0);
return f;
}
}
@@ -259,7 +274,7 @@ function J() {
// src/signals-lib.js
var d = Symbol.for("Signal");
function y(e) {
function _(e) {
try {
return Reflect.has(e, d);
} catch {
@@ -270,10 +285,10 @@ var h = /* @__PURE__ */ new WeakMap();
function g(e, t) {
if (typeof e != "function")
return U(e, t);
if (y(e))
if (_(e))
return e;
let n = U(""), r = () => n(e());
return h.set(r, /* @__PURE__ */ new Set([n])), k(r), n;
return h.set(r, /* @__PURE__ */ new Set([n])), K(r), n;
}
g.action = function(e, t, ...n) {
let r = e[d], { actions: o } = r;
@@ -288,7 +303,7 @@ g.on = function e(t, n, r = {}) {
if (!(o && o.aborted)) {
if (Array.isArray(t))
return t.forEach((c) => e(c, n, r));
D(t, n), o && o.addEventListener("abort", () => q(t, n));
N(t, n), o && o.addEventListener("abort", () => k(t, n));
}
};
g.symbols = {
@@ -313,26 +328,26 @@ g.clear = function(...e) {
g.el = function(e, t) {
let n = document.createComment("<#reactive>"), r = document.createComment("</#reactive>"), o = document.createDocumentFragment();
o.append(n, r);
let c = (p) => {
let c = (l) => {
if (!n.parentNode || !r.parentNode)
return q(e, c);
let s = t(p);
Array.isArray(s) || (s = [s]);
return k(e, c);
let u = t(l);
Array.isArray(u) || (u = [u]);
let a = n;
for (; (a = n.nextSibling) !== r; )
a.remove();
n.after(...s);
n.after(...u);
};
return D(e, c), c(e()), o;
return N(e, c), c(e()), o;
};
var $ = {
isSignal: y,
isSignal: _,
processReactiveAttribute(e, t, n, r) {
return y(n) ? (D(n, (o) => r([t, o])), n()) : n;
return _(n) ? (N(n, (o) => r([t, o])), n()) : n;
}
};
function U(e, t) {
let n = (...r) => r.length ? X(n, r[0]) : Q(n);
let n = (...r) => r.length ? Y(n, r[0]) : X(n);
return Z(n, e, t);
}
var V = Object.assign(/* @__PURE__ */ Object.create(null), {
@@ -341,56 +356,56 @@ var V = Object.assign(/* @__PURE__ */ Object.create(null), {
}
});
function Z(e, t, n) {
return N(n) !== "[object Object]" && (n = {}), e[d] = {
return D(n) !== "[object Object]" && (n = {}), e[d] = {
value: t,
actions: n,
listeners: /* @__PURE__ */ new Set()
}, e.toJSON = () => e(), Object.setPrototypeOf(e[d], V), e;
}
var R = [];
function k(e) {
function K(e) {
let t = function() {
R.push(t), e(), R.pop();
};
h.has(e) && (h.set(t, h.get(e)), h.delete(e)), t();
}
function K() {
function Q() {
return R[R.length - 1];
}
function Q(e) {
function X(e) {
if (!e[d])
return;
let { value: t, listeners: n } = e[d], r = K();
let { value: t, listeners: n } = e[d], r = Q();
return r && n.add(r), h.has(r) && h.get(r).add(e), t;
}
function X(e, t) {
function Y(e, t) {
if (!e[d])
return;
let n = e[d];
if (n.value !== t)
return n.value = t, n.listeners.forEach((r) => r(t)), t;
}
function D(e, t) {
function N(e, t) {
if (e[d])
return e[d].listeners.add(t);
}
function q(e, t) {
function k(e, t) {
if (e[d])
return e[d].listeners.delete(t);
}
// signals.js
C($);
A($);
export {
g as S,
S as assign,
y as assign,
B as classListDeclarative,
ce as createElement,
ae as dispatchEvent,
ce as el,
se as empty,
y as isSignal,
oe as namespace,
ie as createElement,
de as dispatchEvent,
ie as el,
fe as empty,
_ as isSignal,
T as on,
C as registerReactivity
A as registerReactivity,
ce as scope
};

275
dist/esm.js vendored
View File

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

8
examples/components/fullNameComponent.js
View File

@@ -1,15 +1,17 @@
import { style, el, on, S, namespace } from '../exports.js';
import { style, el, on, S } from '../exports.js';
const className= style.host(fullNameComponent).css`
:host form{
display: flex;
flex-flow: column nowrap;
}
`;
export function fullNameComponent(){
export function fullNameComponent(_, scope){
const labels= [ "Name", "Surname" ];
const name= labels.map(_=> S(""));
const full_name= S(()=>
name.map(l=> l()).filter(Boolean).join(" ") || "-");
scope(on.connected(()=> console.log(fullNameComponent)));
scope(on.disconnected(()=> console.log(fullNameComponent)))
return el("div", { className }).append(
el("h2", "Simple form:"),
@@ -24,7 +26,7 @@ export function fullNameComponent(){
": ",
el("#text", full_name)
),
namespace("svg").append(
scope.elNamespace("svg").append(
el("svg", { viewBox: "0 0 240 80", style: { height: "80px", display: "block" } }).append(
//el("style", { })
el("text", { x: 20, y: 35, textContent: "Text" })

3
examples/components/webComponent.js
View File

@@ -17,7 +17,8 @@ export class CustomHTMLTestElement extends HTMLElement{
}
render({ name, test, preName }, host){
host(on.connected(console.log));
host(on.connected(()=> console.log(CustomHTMLTestElement)));
host(on.disconnected(()=> console.log(CustomHTMLTestElement)));
return el("p").append(
el("#text", { textContent: name }),
el("#text", { textContent: test }),

8
index.d.ts vendored
View File

@@ -1,4 +1,4 @@
import { Signal } from "./src/signals";
import { Signal } from "./signals";
//TODO?
/** Is filled when function is succesfully called ⇒ and returns component's root element. */
type Host<el extends Element>= (extender?: ElementExtender<el>)=> el | undefined;
@@ -46,19 +46,17 @@ type ElementAttributes<T extends keyof ElementTagNameMap | ElementTagNameMap[key
T extends keyof ElementTagNameMap ?
Omit<ElementTagNameMap[T],"classList"|"className"> & AttrsModified :
Omit<T,"classList"|"className"> & AttrsModified;
export function assign<El extends Element>(element: El, ...attrs_array: ElementAttributes<El>[]): El
export function assign<El extends Element>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
type ElementExtender<El extends Element>= (element: El)=> El;
type TagNameFragment= "<>";
export function el<TAG extends keyof ElementTagNameMap>(
tag_name: TAG,
attrs?: ElementAttributes<ElementTagNameMap[TAG]>,
attrs?: Partial<ElementAttributes<ElementTagNameMap[TAG]>>,
...extenders: ElementExtender<ElementTagNameMap[TAG]>[]
): ElementTagNameMap[TAG]
export function el<T>(
tag_name: TagNameFragment,
signal?: Signal<T, any>,
cb?: (a: T)=> HTMLElement | HTMLElement[]
): DocumentFragment
export function el<R extends Element, T extends (attrs: any, host: Host<R>)=> R>(
fComponent: T,

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "deka-dom-el",
"version": "0.3.0",
"version": "0.4.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "deka-dom-el",
"version": "0.3.0",
"version": "0.4.0",
"license": "MIT",
"devDependencies": {
"@size-limit/preset-small-lib": "^8.2.6",

6
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "deka-dom-el",
"version": "0.3.0",
"version": "0.4.0",
"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>",
"license": "MIT",
@@ -71,8 +71,8 @@
"gzip": false
},
{
"path": "./test/components/webComponent.js",
"limit": "10kb",
"path": "./examples/components/webComponent.js",
"limit": "11kb",
"gzip": false
}
],

14
src/dom.js
View File

@@ -2,7 +2,8 @@ import { signals } from "./signals-common.js";
/** @type {"html"|"svg"|string} */
let namespace_curr= "html";
export function namespace(namespace){
const scopes= {
elNamespace(namespace){
namespace_curr= namespace==="svg" ? "http://www.w3.org/2000/svg" : namespace;
return {
append(...el){
@@ -12,7 +13,11 @@ export function namespace(namespace){
return f.append(...el);
}
};
}
},
get namespace(){ return namespace_curr; },
set namespace(v){ return ( namespace_curr= v ); },
};
export const scope= Object.assign(c=> c ? c(document.body) : document.body, scopes);
export function createElement(tag, attributes, ...connect){
const _this= this;
const s= signals(this);
@@ -22,8 +27,9 @@ export function createElement(tag, attributes, ...connect){
attributes= { textContent: attributes };
switch(true){
case typeof tag==="function": {
const ref= c=> c ? (connect.unshift(c), undefined) : el;
el= tag(attributes || undefined, ref);
const scope= Object.assign(c=> c ? (connect.unshift(c), undefined) : el, scopes);
el= tag(attributes || undefined, scope);
namespace_curr= "html";
break;
}
case tag==="#text": el= assign.call(_this, document.createTextNode(""), attributes); break;

76
src/events.js
View File

@@ -15,25 +15,31 @@ const c_ch_o= connectionsChangesObserverConstructor();
import { onAbort } from './helpers.js';
//TODO: cleanUp when event before abort?
on.connected= function(listener, options){
if(typeof options !== "object")
options= {};
options.once= true;
return function registerElement(element){
if(typeof element.connectedCallback === "function"){
element.addEventListener("dde:connected", listener, options);
if(typeof element.connectedCallback === "function") return element;
if(element.isConnected){
element.dispatchEvent(new Event("dde:connected"));
return element;
}
const c= onAbort(options && options.signal, ()=> c_ch_o.offConnected(element, listener));
if(!c) return element;
if(element.isConnected) listener(new Event("dde:connected"));
else c_ch_o.onConnected(element, listener);
const c= onAbort(options.signal, ()=> c_ch_o.offConnected(element, listener));
if(c) c_ch_o.onConnected(element, listener);
return element;
};
};
on.disconnected= function(listener, options){
if(typeof options !== "object")
options= {};
options.once= true;
return function registerElement(element){
if(typeof element.disconnectedCallback === "function"){
element.addEventListener("dde:disconnected", listener, options);
return element;
}
const c= onAbort(options && options.signal, ()=> c_ch_o.offDisconnected(element, listener));
if(typeof element.disconnectedCallback === "function") return element;
const c= onAbort(options.signal, ()=> c_ch_o.offDisconnected(element, listener));
if(c) c_ch_o.onDisconnected(element, listener);
return element;
};
@@ -57,37 +63,48 @@ function connectionsChangesObserverConstructor(){
onConnected(element, listener){
start();
const listeners= getElementStore(element);
listeners.connected.push(listener);
if(listeners.connected.has(listener)) return;
listeners.connected.add(listener);
listeners.length_c+= 1;
},
offConnected(element, listener){
if(!store.has(element)) return;
const ls= store.get(element);
const l= ls.connected;
l.splice(l.indexOf(listener), 1);
if(!ls.connected.has(listener)) return;
ls.connected.delete(listener);
ls.length_c-= 1;
cleanWhenOff(element, ls);
},
onDisconnected(element, listener){
start();
const listeners= getElementStore(element);
listeners.disconnected.push(listener);
if(listeners.disconnected.has(listener)) return;
listeners.disconnected.add(listener);
listeners.length_d+= 1;
},
offDisconnected(element, listener){
if(!store.has(element)) return;
const ls= store.get(element);
const l= ls.disconnected;
l.splice(l.indexOf(listener), 1);
if(!ls.disconnected.has(listener)) return;
ls.disconnected.delete(listener);
ls.length_d-= 1;
cleanWhenOff(element, ls);
}
};
function cleanWhenOff(element, ls){
if(ls.connected.length || ls.disconnected.length)
if(ls.length_c || ls.length_d)
return;
store.delete(element);
stop();
}
function getElementStore(element){
if(store.has(element)) return store.get(element);
const out= { connected: [], disconnected: [] };
const out= {
connected: new WeakSet(),
length_c: 0,
disconnected: new WeakSet(),
length_d: 0
};
store.set(element, out);
return out;
}
@@ -118,31 +135,36 @@ function connectionsChangesObserverConstructor(){
return out;
}
function observerAdded(addedNodes, is_root){
let out= false;
for(const element of addedNodes){
if(is_root) collectChildren(element).then(observerAdded);
if(!store.has(element)) continue;
const ls= store.get(element);
ls.connected.forEach(listener=> listener(element));
ls.connected.length= 0;
if(!ls.disconnected.length) store.delete(element);
return true;
if(!ls.length_c) continue;
element.dispatchEvent(new Event("dde:connected"));
ls.connected= new WeakSet();
ls.length_c= 0;
if(!ls.length_d) store.delete(element);
out= true;
}
return false;
return out;
}
function observerRemoved(removedNodes, is_root){
let out= false;
for(const element of removedNodes){
if(is_root) collectChildren(element).then(observerRemoved);
if(!store.has(element)) continue;
const ls= store.get(element);
ls.disconnected.forEach(listener=> listener(element));
if(!ls.length_d) continue;
element.dispatchEvent(new Event("dde:disconnected"));
ls.connected.length= 0;
ls.disconnected.length= 0;
store.delete(element);
return true;
out= true;
}
return false;
return out;
}
}