mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-07-01 12:22:15 +02:00
⚡ Replace “observable” term with “signal” (#19)
* ⚡ refact docs to make editing (now renaming observables to signal) easier * ⚡ ⚡ use signal(s) term isntead of observable(s) * ⚡ 🔤 version + typo * 🐛 customElement example (0→S) * 📺 version in package-lock.json
This commit is contained in:
GitHub
@ -1,8 +1,8 @@
|
||||
//deka-dom-el library is available via global namespace `dde`
|
||||
(()=> {
|
||||
// src/observables-common.js
|
||||
// src/signals-common.js
|
||||
var k = {
|
||||
isObservable(t) {
|
||||
isSignal(t) {
|
||||
return !1;
|
||||
},
|
||||
processReactiveAttribute(t, e, n, r) {
|
||||
@ -18,7 +18,7 @@ function W(t) {
|
||||
|
||||
// src/helpers.js
|
||||
var T = (...t) => Object.prototype.hasOwnProperty.call(...t);
|
||||
function A(t) {
|
||||
function S(t) {
|
||||
return typeof t > "u";
|
||||
}
|
||||
function X(t) {
|
||||
@ -54,17 +54,17 @@ var d = {
|
||||
M: globalThis.MutationObserver
|
||||
};
|
||||
function lt(t, e, n) {
|
||||
if (Reflect.set(t, e, n), !!A(n)) {
|
||||
if (Reflect.set(t, e, n), !!S(n)) {
|
||||
if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined")
|
||||
return t.removeAttribute(e);
|
||||
if (Reflect.get(t, e) === "undefined")
|
||||
return Reflect.set(t, e, "");
|
||||
}
|
||||
}
|
||||
var C = "__dde_lifecyclesToEvents", y = "dde:connected", S = "dde:disconnected", P = "dde:attributeChanged";
|
||||
var C = "__dde_lifecyclesToEvents", _ = "dde:connected", O = "dde:disconnected", M = "dde:attributeChanged";
|
||||
|
||||
// src/dom.js
|
||||
var _ = [{
|
||||
var A = [{
|
||||
get scope() {
|
||||
return d.D.body;
|
||||
},
|
||||
@ -72,7 +72,7 @@ var _ = [{
|
||||
prevent: !0
|
||||
}], m = {
|
||||
get current() {
|
||||
return _[_.length - 1];
|
||||
return A[A.length - 1];
|
||||
},
|
||||
get host() {
|
||||
return this.current.host;
|
||||
@ -82,17 +82,17 @@ var _ = [{
|
||||
return t.prevent = !0, t;
|
||||
},
|
||||
get state() {
|
||||
return [..._];
|
||||
return [...A];
|
||||
},
|
||||
push(t = {}) {
|
||||
return _.push(Object.assign({}, this.current, { prevent: !1 }, t));
|
||||
return A.push(Object.assign({}, this.current, { prevent: !1 }, t));
|
||||
},
|
||||
pushRoot() {
|
||||
return _.push(_[0]);
|
||||
return A.push(A[0]);
|
||||
},
|
||||
pop() {
|
||||
if (_.length !== 1)
|
||||
return _.pop();
|
||||
if (A.length !== 1)
|
||||
return A.pop();
|
||||
}
|
||||
};
|
||||
function Y(...t) {
|
||||
@ -102,68 +102,68 @@ function ht(t) {
|
||||
return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;
|
||||
}
|
||||
var $;
|
||||
function M(t, e, ...n) {
|
||||
let r = W(this), o = 0, c, s;
|
||||
switch ((Object(e) !== e || r.isObservable(e)) && (e = { textContent: e }), !0) {
|
||||
function j(t, e, ...n) {
|
||||
let r = W(this), o = 0, c, i;
|
||||
switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
|
||||
case typeof t == "function": {
|
||||
o = 1, m.push({ scope: t, host: (...g) => g.length ? (o === 1 ? n.unshift(...g) : g.forEach((l) => l(s)), void 0) : s }), c = t(e || void 0);
|
||||
o = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);
|
||||
let a = c instanceof d.F;
|
||||
if (c.nodeName === "#comment")
|
||||
break;
|
||||
let h = M.mark({
|
||||
let h = j.mark({
|
||||
type: "component",
|
||||
name: t.name,
|
||||
host: a ? "this" : "parentElement"
|
||||
});
|
||||
c.prepend(h), a && (s = h);
|
||||
c.prepend(h), a && (i = h);
|
||||
break;
|
||||
}
|
||||
case t === "#text":
|
||||
c = j.call(this, d.D.createTextNode(""), e);
|
||||
c = P.call(this, d.D.createTextNode(""), e);
|
||||
break;
|
||||
case (t === "<>" || !t):
|
||||
c = j.call(this, d.D.createDocumentFragment(), e);
|
||||
c = P.call(this, d.D.createDocumentFragment(), e);
|
||||
break;
|
||||
case !!$:
|
||||
c = j.call(this, d.D.createElementNS($, t), e);
|
||||
c = P.call(this, d.D.createElementNS($, t), e);
|
||||
break;
|
||||
case !c:
|
||||
c = j.call(this, d.D.createElement(t), e);
|
||||
c = P.call(this, d.D.createElement(t), e);
|
||||
}
|
||||
return ht(c), s || (s = c), n.forEach((a) => a(s)), o && m.pop(), o = 2, c;
|
||||
return ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;
|
||||
}
|
||||
function Wt(t, e = t, n = void 0) {
|
||||
let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((s, a) => Reflect.set(s, a.name || r, a) && s, {}), c = T(o, r);
|
||||
let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);
|
||||
if (t.append = new Proxy(t.append, {
|
||||
apply(s, a, h) {
|
||||
apply(i, a, h) {
|
||||
if (!h.length)
|
||||
return t;
|
||||
let g = d.D.createDocumentFragment();
|
||||
let v = d.D.createDocumentFragment();
|
||||
for (let l of h) {
|
||||
if (!l || !l.slot) {
|
||||
c && g.appendChild(l);
|
||||
c && v.appendChild(l);
|
||||
continue;
|
||||
}
|
||||
let x = l.slot, w = o[x];
|
||||
gt(l, "remove", "slot"), w && (bt(w, l, n), Reflect.deleteProperty(o, x));
|
||||
let x = l.slot, y = o[x];
|
||||
vt(l, "remove", "slot"), y && (bt(y, l, n), Reflect.deleteProperty(o, x));
|
||||
}
|
||||
return c && (o[r].replaceWith(g), Reflect.deleteProperty(o, r)), t.append = s, t;
|
||||
return c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;
|
||||
}
|
||||
}), t !== e) {
|
||||
let s = Array.from(t.childNodes);
|
||||
s.forEach((a) => a.remove()), t.append(...s);
|
||||
let i = Array.from(t.childNodes);
|
||||
i.forEach((a) => a.remove()), t.append(...i);
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function bt(t, e, n) {
|
||||
n && n(t, e);
|
||||
try {
|
||||
t.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
|
||||
t.replaceWith(P(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
|
||||
} catch {
|
||||
t.replaceWith(e);
|
||||
}
|
||||
}
|
||||
M.mark = function(t, e = !1) {
|
||||
j.mark = function(t, e = !1) {
|
||||
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
|
||||
let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
|
||||
return e && (r.end = d.D.createComment("</dde:mark>")), r;
|
||||
@ -172,12 +172,12 @@ function qt(t) {
|
||||
let e = this;
|
||||
return function(...r) {
|
||||
$ = t;
|
||||
let o = M.call(e, ...r);
|
||||
let o = j.call(e, ...r);
|
||||
return $ = void 0, o;
|
||||
};
|
||||
}
|
||||
var U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;
|
||||
function j(t, ...e) {
|
||||
function P(t, ...e) {
|
||||
if (!e.length)
|
||||
return t;
|
||||
U.set(t, rt(t, this));
|
||||
@ -193,10 +193,10 @@ function nt(t, e, n) {
|
||||
n,
|
||||
(a, h) => nt.call(c, t, a, h)
|
||||
);
|
||||
let [s] = e;
|
||||
if (s === "=")
|
||||
let [i] = e;
|
||||
if (i === "=")
|
||||
return r(e.slice(1), n);
|
||||
if (s === ".")
|
||||
if (i === ".")
|
||||
return et(t, e.slice(1), n);
|
||||
if (/(aria|data)([A-Z])/.test(e))
|
||||
return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n);
|
||||
@ -213,7 +213,7 @@ function nt(t, e, n) {
|
||||
case "ariaset":
|
||||
return I(o, n, (a, h) => r("aria-" + a, h));
|
||||
case "classList":
|
||||
return vt.call(c, t, n);
|
||||
return gt.call(c, t, n);
|
||||
}
|
||||
return Et(t, e) ? tt(t, e, n) : r(e, n);
|
||||
}
|
||||
@ -223,7 +223,7 @@ function rt(t, e) {
|
||||
let r = (t instanceof d.S ? xt : mt).bind(null, t, "Attribute"), o = W(e);
|
||||
return { setRemoveAttr: r, s: o };
|
||||
}
|
||||
function vt(t, e) {
|
||||
function gt(t, e) {
|
||||
let n = W(this);
|
||||
return I(
|
||||
n,
|
||||
@ -234,14 +234,14 @@ function vt(t, e) {
|
||||
function Ft(t) {
|
||||
return Array.from(t.children).forEach((e) => e.remove()), t;
|
||||
}
|
||||
function gt(t, e, n, r) {
|
||||
function vt(t, e, n, r) {
|
||||
return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
|
||||
}
|
||||
function Et(t, e) {
|
||||
if (!(e in t))
|
||||
return !1;
|
||||
let n = ot(t, e);
|
||||
return !A(n.set);
|
||||
return !S(n.set);
|
||||
}
|
||||
function ot(t, e) {
|
||||
if (t = Object.getPrototypeOf(t), !t)
|
||||
@ -259,141 +259,141 @@ function ct(t) {
|
||||
return Array.isArray(t) ? t.filter(Boolean).join(" ") : t;
|
||||
}
|
||||
function mt(t, e, n, r) {
|
||||
return t[(A(r) ? "remove" : "set") + e](n, ct(r));
|
||||
return t[(S(r) ? "remove" : "set") + e](n, ct(r));
|
||||
}
|
||||
function xt(t, e, n, r, o = null) {
|
||||
return t[(A(r) ? "remove" : "set") + e + "NS"](o, n, ct(r));
|
||||
return t[(S(r) ? "remove" : "set") + e + "NS"](o, n, ct(r));
|
||||
}
|
||||
function et(t, e, n) {
|
||||
if (Reflect.set(t, e, n), !!A(n))
|
||||
if (Reflect.set(t, e, n), !!S(n))
|
||||
return Reflect.deleteProperty(t, e);
|
||||
}
|
||||
|
||||
// src/events-observer.js
|
||||
var D = d.M ? Ot() : new Proxy({}, {
|
||||
var D = d.M ? wt() : new Proxy({}, {
|
||||
get() {
|
||||
return () => {
|
||||
};
|
||||
}
|
||||
});
|
||||
function Ot() {
|
||||
let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) {
|
||||
function wt() {
|
||||
let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
|
||||
for (let f of u)
|
||||
if (f.type === "childList") {
|
||||
if (l(f.addedNodes, !0)) {
|
||||
i();
|
||||
s();
|
||||
continue;
|
||||
}
|
||||
x(f.removedNodes, !0) && i();
|
||||
x(f.removedNodes, !0) && s();
|
||||
}
|
||||
}, r = new d.M(n(a));
|
||||
return {
|
||||
observe(i) {
|
||||
observe(s) {
|
||||
let u = new d.M(n(() => {
|
||||
}));
|
||||
return u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect();
|
||||
return u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();
|
||||
},
|
||||
onConnected(i, u) {
|
||||
s();
|
||||
let f = c(i);
|
||||
onConnected(s, u) {
|
||||
i();
|
||||
let f = c(s);
|
||||
f.connected.has(u) || (f.connected.add(u), f.length_c += 1);
|
||||
},
|
||||
offConnected(i, u) {
|
||||
if (!t.has(i))
|
||||
offConnected(s, u) {
|
||||
if (!t.has(s))
|
||||
return;
|
||||
let f = t.get(i);
|
||||
f.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(i, f));
|
||||
let f = t.get(s);
|
||||
f.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(s, f));
|
||||
},
|
||||
onDisconnected(i, u) {
|
||||
s();
|
||||
let f = c(i);
|
||||
onDisconnected(s, u) {
|
||||
i();
|
||||
let f = c(s);
|
||||
f.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);
|
||||
},
|
||||
offDisconnected(i, u) {
|
||||
if (!t.has(i))
|
||||
offDisconnected(s, u) {
|
||||
if (!t.has(s))
|
||||
return;
|
||||
let f = t.get(i);
|
||||
f.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(i, f));
|
||||
let f = t.get(s);
|
||||
f.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(s, f));
|
||||
}
|
||||
};
|
||||
function o(i, u) {
|
||||
u.length_c || u.length_d || (t.delete(i), a());
|
||||
function o(s, u) {
|
||||
u.length_c || u.length_d || (t.delete(s), a());
|
||||
}
|
||||
function c(i) {
|
||||
if (t.has(i))
|
||||
return t.get(i);
|
||||
function c(s) {
|
||||
if (t.has(s))
|
||||
return t.get(s);
|
||||
let u = {
|
||||
connected: /* @__PURE__ */ new WeakSet(),
|
||||
length_c: 0,
|
||||
disconnected: /* @__PURE__ */ new WeakSet(),
|
||||
length_d: 0
|
||||
};
|
||||
return t.set(i, u), u;
|
||||
return t.set(s, u), u;
|
||||
}
|
||||
function s() {
|
||||
function i() {
|
||||
e || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 }));
|
||||
}
|
||||
function a() {
|
||||
!e || t.size || (e = !1, r.disconnect());
|
||||
}
|
||||
function h() {
|
||||
return new Promise(function(i) {
|
||||
(requestIdleCallback || requestAnimationFrame)(i);
|
||||
return new Promise(function(s) {
|
||||
(requestIdleCallback || requestAnimationFrame)(s);
|
||||
});
|
||||
}
|
||||
async function g(i) {
|
||||
async function v(s) {
|
||||
t.size > 30 && await h();
|
||||
let u = [];
|
||||
if (!(i instanceof Node))
|
||||
if (!(s instanceof Node))
|
||||
return u;
|
||||
for (let f of t.keys())
|
||||
f === i || !(f instanceof Node) || i.contains(f) && u.push(f);
|
||||
f === s || !(f instanceof Node) || s.contains(f) && u.push(f);
|
||||
return u;
|
||||
}
|
||||
function l(i, u) {
|
||||
function l(s, u) {
|
||||
let f = !1;
|
||||
for (let b of i) {
|
||||
if (u && g(b).then(l), !t.has(b))
|
||||
for (let b of s) {
|
||||
if (u && v(b).then(l), !t.has(b))
|
||||
continue;
|
||||
let N = t.get(b);
|
||||
N.length_c && (b.dispatchEvent(new Event(y)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);
|
||||
N.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);
|
||||
}
|
||||
return f;
|
||||
}
|
||||
function x(i, u) {
|
||||
function x(s, u) {
|
||||
let f = !1;
|
||||
for (let b of i)
|
||||
u && g(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0);
|
||||
for (let b of s)
|
||||
u && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);
|
||||
return f;
|
||||
}
|
||||
function w(i) {
|
||||
function y(s) {
|
||||
return () => {
|
||||
i.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i));
|
||||
s.isConnected || (s.dispatchEvent(new Event(O)), t.delete(s));
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// src/customElement.js
|
||||
function Zt(t, e, n, r = yt) {
|
||||
function Zt(t, e, n, r = _t) {
|
||||
m.push({
|
||||
scope: t,
|
||||
host: (...s) => s.length ? s.forEach((a) => a(t)) : t
|
||||
host: (...i) => i.length ? i.forEach((a) => a(t)) : t
|
||||
}), typeof r == "function" && (r = r.call(t, t));
|
||||
let o = t[C];
|
||||
o || wt(t);
|
||||
o || yt(t);
|
||||
let c = n.call(t, r);
|
||||
return o || t.dispatchEvent(new Event(y)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(S, D.observe(e), { once: !0 }), m.pop(), e.append(c);
|
||||
return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(O, D.observe(e), { once: !0 }), m.pop(), e.append(c);
|
||||
}
|
||||
function wt(t) {
|
||||
function yt(t) {
|
||||
return J(t.prototype, "connectedCallback", function(e, n, r) {
|
||||
e.apply(n, r), n.dispatchEvent(new Event(y));
|
||||
e.apply(n, r), n.dispatchEvent(new Event(_));
|
||||
}), J(t.prototype, "disconnectedCallback", function(e, n, r) {
|
||||
e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
|
||||
() => !n.isConnected && n.dispatchEvent(new Event(S))
|
||||
() => !n.isConnected && n.dispatchEvent(new Event(O))
|
||||
);
|
||||
}), J(t.prototype, "attributeChangedCallback", function(e, n, r) {
|
||||
let [o, , c] = r;
|
||||
n.dispatchEvent(new CustomEvent(P, {
|
||||
n.dispatchEvent(new CustomEvent(M, {
|
||||
detail: [o, c]
|
||||
})), e.apply(n, r);
|
||||
}), t.prototype[C] = !0, t;
|
||||
@ -402,7 +402,7 @@ function J(t, e, n) {
|
||||
t[e] = new Proxy(t[e] || (() => {
|
||||
}), { apply: n });
|
||||
}
|
||||
function yt(t) {
|
||||
function _t(t) {
|
||||
return F(t, (e, n) => e.getAttribute(n));
|
||||
}
|
||||
|
||||
@ -410,50 +410,50 @@ function yt(t) {
|
||||
function Qt(t, e, n) {
|
||||
return e || (e = {}), function(o, ...c) {
|
||||
n && (c.unshift(o), o = typeof n == "function" ? n() : n);
|
||||
let s = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
|
||||
return o.dispatchEvent(s);
|
||||
let i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
|
||||
return o.dispatchEvent(i);
|
||||
};
|
||||
}
|
||||
function O(t, e, n) {
|
||||
function w(t, e, n) {
|
||||
return function(o) {
|
||||
return o.addEventListener(t, e, n), o;
|
||||
};
|
||||
}
|
||||
var st = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
O.connected = function(t, e) {
|
||||
return e = st(e), function(r) {
|
||||
return r.addEventListener(y, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(y)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);
|
||||
var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
w.connected = function(t, e) {
|
||||
return e = it(e), function(r) {
|
||||
return r.addEventListener(_, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);
|
||||
};
|
||||
};
|
||||
O.disconnected = function(t, e) {
|
||||
return e = st(e), function(r) {
|
||||
return r.addEventListener(S, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;
|
||||
w.disconnected = function(t, e) {
|
||||
return e = it(e), function(r) {
|
||||
return r.addEventListener(O, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;
|
||||
};
|
||||
};
|
||||
var Z = /* @__PURE__ */ new WeakMap();
|
||||
O.disconnectedAsAbort = function(t) {
|
||||
w.disconnectedAsAbort = function(t) {
|
||||
if (Z.has(t))
|
||||
return Z.get(t);
|
||||
let e = new AbortController();
|
||||
return Z.set(t, e), t(O.disconnected(() => e.abort())), e;
|
||||
return Z.set(t, e), t(w.disconnected(() => e.abort())), e;
|
||||
};
|
||||
var _t = /* @__PURE__ */ new WeakSet();
|
||||
O.attributeChanged = function(t, e) {
|
||||
var At = /* @__PURE__ */ new WeakSet();
|
||||
w.attributeChanged = function(t, e) {
|
||||
return typeof e != "object" && (e = {}), function(r) {
|
||||
if (r.addEventListener(P, t, e), r[C] || _t.has(r) || !d.M)
|
||||
if (r.addEventListener(M, t, e), r[C] || At.has(r) || !d.M)
|
||||
return r;
|
||||
let o = new d.M(function(s) {
|
||||
for (let { attributeName: a, target: h } of s)
|
||||
let o = new d.M(function(i) {
|
||||
for (let { attributeName: a, target: h } of i)
|
||||
h.dispatchEvent(
|
||||
new CustomEvent(P, { detail: [a, h.getAttribute(a)] })
|
||||
new CustomEvent(M, { detail: [a, h.getAttribute(a)] })
|
||||
);
|
||||
});
|
||||
return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
|
||||
};
|
||||
};
|
||||
|
||||
// src/observables-lib.js
|
||||
var p = "__dde_observable";
|
||||
// src/signals-lib.js
|
||||
var p = "__dde_signal";
|
||||
function z(t) {
|
||||
try {
|
||||
return T(t, p);
|
||||
@ -461,21 +461,21 @@ function z(t) {
|
||||
return !1;
|
||||
}
|
||||
}
|
||||
var H = [], v = /* @__PURE__ */ new WeakMap();
|
||||
var H = [], g = /* @__PURE__ */ new WeakMap();
|
||||
function E(t, e) {
|
||||
if (typeof t != "function")
|
||||
return it(!1, t, e);
|
||||
return st(!1, t, e);
|
||||
if (z(t))
|
||||
return t;
|
||||
let n = it(!0), r = function() {
|
||||
let [o, ...c] = v.get(r);
|
||||
if (v.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)
|
||||
let n = st(!0), r = function() {
|
||||
let [o, ...c] = g.get(r);
|
||||
if (g.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)
|
||||
return;
|
||||
let s = v.get(r);
|
||||
let i = g.get(r);
|
||||
for (let a of c)
|
||||
s.has(a) || L(a, r);
|
||||
i.has(a) || L(a, r);
|
||||
};
|
||||
return v.set(n[p], r), v.set(r, /* @__PURE__ */ new Set([n])), r(), n;
|
||||
return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
|
||||
}
|
||||
E.action = function(t, e, ...n) {
|
||||
let r = t[p], { actions: o } = r;
|
||||
@ -494,8 +494,8 @@ E.on = function t(e, n, r = {}) {
|
||||
}
|
||||
};
|
||||
E.symbols = {
|
||||
//observable: mark,
|
||||
onclear: Symbol.for("Observable.onclear")
|
||||
//signal: mark,
|
||||
onclear: Symbol.for("Signal.onclear")
|
||||
};
|
||||
E.clear = function(...t) {
|
||||
for (let n of t) {
|
||||
@ -504,37 +504,37 @@ E.clear = function(...t) {
|
||||
}
|
||||
function e(n, r) {
|
||||
r.listeners.forEach((o) => {
|
||||
if (r.listeners.delete(o), !v.has(o))
|
||||
if (r.listeners.delete(o), !g.has(o))
|
||||
return;
|
||||
let c = v.get(o);
|
||||
c.delete(n), !(c.size > 1) && (n.clear(...c), v.delete(o));
|
||||
let c = g.get(o);
|
||||
c.delete(n), !(c.size > 1) && (n.clear(...c), g.delete(o));
|
||||
});
|
||||
}
|
||||
};
|
||||
var R = "__dde_reactive";
|
||||
E.el = function(t, e) {
|
||||
let n = M.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment();
|
||||
let n = j.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment();
|
||||
o.append(n, r);
|
||||
let { current: c } = m, s = {}, a = (h) => {
|
||||
let { current: c } = m, i = {}, a = (h) => {
|
||||
if (!n.parentNode || !r.parentNode)
|
||||
return L(t, a);
|
||||
let g = s;
|
||||
s = {}, m.push(c);
|
||||
let v = i;
|
||||
i = {}, m.push(c);
|
||||
let l = e(h, function(u, f) {
|
||||
let b;
|
||||
return T(g, u) ? (b = g[u], delete g[u]) : b = f(), s[u] = b, b;
|
||||
return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;
|
||||
});
|
||||
m.pop(), Array.isArray(l) || (l = [l]);
|
||||
let x = document.createComment("");
|
||||
l.push(x), n.after(...l);
|
||||
let w;
|
||||
for (; (w = x.nextSibling) && w !== r; )
|
||||
w.remove();
|
||||
x.remove(), n.isConnected && At(c.host());
|
||||
let y;
|
||||
for (; (y = x.nextSibling) && y !== r; )
|
||||
y.remove();
|
||||
x.remove(), n.isConnected && St(c.host());
|
||||
};
|
||||
return Q(t, a), ft(t, a, n, e), a(t()), o;
|
||||
};
|
||||
function At(t) {
|
||||
function St(t) {
|
||||
!t || !t[R] || (requestIdleCallback || setTimeout)(function() {
|
||||
t[R] = t[R].filter(([e, n]) => n.isConnected ? !0 : (L(...e), !1));
|
||||
});
|
||||
@ -544,7 +544,7 @@ var Ct = {
|
||||
this.value = t;
|
||||
}
|
||||
};
|
||||
function St(t) {
|
||||
function Ot(t) {
|
||||
return function(e, n) {
|
||||
let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = at(r, e.getAttribute(n), Ct);
|
||||
return t[n] = o, o;
|
||||
@ -552,21 +552,21 @@ function St(t) {
|
||||
}
|
||||
var G = "__dde_attributes";
|
||||
E.observedAttributes = function(t) {
|
||||
let e = t[G] = {}, n = F(t, St(e));
|
||||
return O.attributeChanged(function({ detail: o }) {
|
||||
/*! This maps attributes to observables (`O.observedAttributes`).
|
||||
let e = t[G] = {}, n = F(t, Ot(e));
|
||||
return w.attributeChanged(function({ detail: o }) {
|
||||
/*! This maps attributes to signals (`S.observedAttributes`).
|
||||
* Investigate `__dde_attributes` key of the element.*/
|
||||
let [c, s] = o, a = this[G][c];
|
||||
let [c, i] = o, a = this[G][c];
|
||||
if (a)
|
||||
return E.action(a, "_set", s);
|
||||
})(t), O.disconnected(function() {
|
||||
/*! This removes all observables mapped to attributes (`O.observedAttributes`).
|
||||
return E.action(a, "_set", i);
|
||||
})(t), w.disconnected(function() {
|
||||
/*! This removes all signals mapped to attributes (`S.observedAttributes`).
|
||||
* Investigate `__dde_attributes` key of the element.*/
|
||||
E.clear(...Object.values(this[G]));
|
||||
})(t), n;
|
||||
};
|
||||
var ut = {
|
||||
isObservable: z,
|
||||
isSignal: z,
|
||||
processReactiveAttribute(t, e, n, r) {
|
||||
if (!z(n))
|
||||
return n;
|
||||
@ -581,18 +581,18 @@ var ut = {
|
||||
function ft(t, e, ...n) {
|
||||
let { current: r } = m;
|
||||
r.prevent || r.host(function(o) {
|
||||
o[R] || (o[R] = [], O.disconnected(
|
||||
o[R] || (o[R] = [], w.disconnected(
|
||||
() => (
|
||||
/*!
|
||||
* Clears all Observables listeners added in the current scope/host (`O.el`, `assign`, …?).
|
||||
* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
|
||||
* You can investigate the `__dde_reactive` key of the element.
|
||||
* */
|
||||
o[R].forEach(([[c, s]]) => L(c, s, c[p] && c[p].host && c[p].host() === o))
|
||||
o[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o))
|
||||
)
|
||||
)(o)), o[R].push([[t, e], ...n]);
|
||||
});
|
||||
}
|
||||
function it(t, e, n) {
|
||||
function st(t, e, n) {
|
||||
let r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r);
|
||||
return at(r, e, n, t);
|
||||
}
|
||||
@ -613,13 +613,13 @@ function at(t, e, n, r = !1) {
|
||||
X(n) !== "[object Object]" && (n = {});
|
||||
let { onclear: c } = E.symbols;
|
||||
n[c] && (o.push(n[c]), delete n[c]);
|
||||
let { host: s } = m;
|
||||
let { host: i } = m;
|
||||
return Reflect.defineProperty(t, p, {
|
||||
value: {
|
||||
value: e,
|
||||
actions: n,
|
||||
onclear: o,
|
||||
host: s,
|
||||
host: i,
|
||||
listeners: /* @__PURE__ */ new Set(),
|
||||
defined: new V().stack,
|
||||
readonly: r
|
||||
@ -636,7 +636,7 @@ function K(t) {
|
||||
if (!t[p])
|
||||
return;
|
||||
let { value: e, listeners: n } = t[p], r = Rt();
|
||||
return r && n.add(r), v.has(r) && v.get(r).add(t), e;
|
||||
return r && n.add(r), g.has(r) && g.get(r).add(t), e;
|
||||
}
|
||||
function dt(t, e, n) {
|
||||
if (!t[p])
|
||||
@ -655,41 +655,41 @@ function L(t, e, n) {
|
||||
return;
|
||||
let o = r.listeners.delete(e);
|
||||
if (n && !r.listeners.size) {
|
||||
if (E.clear(t), !v.has(r))
|
||||
if (E.clear(t), !g.has(r))
|
||||
return o;
|
||||
let c = v.get(r);
|
||||
if (!v.has(c))
|
||||
let c = g.get(r);
|
||||
if (!g.has(c))
|
||||
return o;
|
||||
v.get(c).forEach((s) => L(s, c, !0));
|
||||
g.get(c).forEach((i) => L(i, c, !0));
|
||||
}
|
||||
return o;
|
||||
}
|
||||
|
||||
// observables.js
|
||||
// signals.js
|
||||
B(ut);
|
||||
|
||||
globalThis.dde= {
|
||||
O: E,
|
||||
assign: j,
|
||||
S: E,
|
||||
assign: P,
|
||||
assignAttribute: nt,
|
||||
chainableAppend: ht,
|
||||
classListDeclarative: vt,
|
||||
createElement: M,
|
||||
classListDeclarative: gt,
|
||||
createElement: j,
|
||||
createElementNS: qt,
|
||||
customElementRender: Zt,
|
||||
customElementWithDDE: wt,
|
||||
customElementWithDDE: yt,
|
||||
dispatchEvent: Qt,
|
||||
el: M,
|
||||
el: j,
|
||||
elNS: qt,
|
||||
elementAttribute: gt,
|
||||
elementAttribute: vt,
|
||||
empty: Ft,
|
||||
isObservable: z,
|
||||
lifecyclesToEvents: wt,
|
||||
observable: E,
|
||||
observedAttributes: yt,
|
||||
on: O,
|
||||
isSignal: z,
|
||||
lifecyclesToEvents: yt,
|
||||
observedAttributes: _t,
|
||||
on: w,
|
||||
registerReactivity: B,
|
||||
scope: m,
|
||||
signal: E,
|
||||
simulateSlots: Wt
|
||||
};
|
||||
|
||||
88
dist/dde.js
vendored
88
dist/dde.js
vendored
@ -1,8 +1,8 @@
|
||||
//deka-dom-el library is available via global namespace `dde`
|
||||
(()=> {
|
||||
// src/observables-common.js
|
||||
// src/signals-common.js
|
||||
var C = {
|
||||
isObservable(t) {
|
||||
isSignal(t) {
|
||||
return !1;
|
||||
},
|
||||
processReactiveAttribute(t, e, n, r) {
|
||||
@ -57,18 +57,18 @@ function K(t, e, n) {
|
||||
return Reflect.set(t, e, "");
|
||||
}
|
||||
}
|
||||
var x = "__dde_lifecyclesToEvents", v = "dde:connected", y = "dde:disconnected", O = "dde:attributeChanged";
|
||||
var x = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged";
|
||||
|
||||
// src/dom.js
|
||||
var g = [{
|
||||
var v = [{
|
||||
get scope() {
|
||||
return a.D.body;
|
||||
},
|
||||
host: (t) => t ? t(a.D.body) : a.D.body,
|
||||
prevent: !0
|
||||
}], R = {
|
||||
}], S = {
|
||||
get current() {
|
||||
return g[g.length - 1];
|
||||
return v[v.length - 1];
|
||||
},
|
||||
get host() {
|
||||
return this.current.host;
|
||||
@ -78,17 +78,17 @@ var g = [{
|
||||
return t.prevent = !0, t;
|
||||
},
|
||||
get state() {
|
||||
return [...g];
|
||||
return [...v];
|
||||
},
|
||||
push(t = {}) {
|
||||
return g.push(Object.assign({}, this.current, { prevent: !1 }, t));
|
||||
return v.push(Object.assign({}, this.current, { prevent: !1 }, t));
|
||||
},
|
||||
pushRoot() {
|
||||
return g.push(g[0]);
|
||||
return v.push(v[0]);
|
||||
},
|
||||
pop() {
|
||||
if (g.length !== 1)
|
||||
return g.pop();
|
||||
if (v.length !== 1)
|
||||
return v.pop();
|
||||
}
|
||||
};
|
||||
function $(...t) {
|
||||
@ -100,9 +100,9 @@ function Q(t) {
|
||||
var T;
|
||||
function k(t, e, ...n) {
|
||||
let r = L(this), o = 0, c, f;
|
||||
switch ((Object(e) !== e || r.isObservable(e)) && (e = { textContent: e }), !0) {
|
||||
switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
|
||||
case typeof t == "function": {
|
||||
o = 1, R.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((l) => l(f)), void 0) : f }), c = t(e || void 0);
|
||||
o = 1, S.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((l) => l(f)), void 0) : f }), c = t(e || void 0);
|
||||
let d = c instanceof a.F;
|
||||
if (c.nodeName === "#comment")
|
||||
break;
|
||||
@ -115,18 +115,18 @@ function k(t, e, ...n) {
|
||||
break;
|
||||
}
|
||||
case t === "#text":
|
||||
c = D.call(this, a.D.createTextNode(""), e);
|
||||
c = O.call(this, a.D.createTextNode(""), e);
|
||||
break;
|
||||
case (t === "<>" || !t):
|
||||
c = D.call(this, a.D.createDocumentFragment(), e);
|
||||
c = O.call(this, a.D.createDocumentFragment(), e);
|
||||
break;
|
||||
case !!T:
|
||||
c = D.call(this, a.D.createElementNS(T, t), e);
|
||||
c = O.call(this, a.D.createElementNS(T, t), e);
|
||||
break;
|
||||
case !c:
|
||||
c = D.call(this, a.D.createElement(t), e);
|
||||
c = O.call(this, a.D.createElement(t), e);
|
||||
}
|
||||
return Q(c), f || (f = c), n.forEach((d) => d(f)), o && R.pop(), o = 2, c;
|
||||
return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c;
|
||||
}
|
||||
function bt(t, e = t, n = void 0) {
|
||||
let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((f, d) => Reflect.set(f, d.name || r, d) && f, {}), c = q(o, r);
|
||||
@ -154,7 +154,7 @@ function bt(t, e = t, n = void 0) {
|
||||
function X(t, e, n) {
|
||||
n && n(t, e);
|
||||
try {
|
||||
t.replaceWith(D(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
|
||||
t.replaceWith(O(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
|
||||
} catch {
|
||||
t.replaceWith(e);
|
||||
}
|
||||
@ -164,7 +164,7 @@ k.mark = function(t, e = !1) {
|
||||
let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
|
||||
return e && (r.end = a.D.createComment("</dde:mark>")), r;
|
||||
};
|
||||
function vt(t) {
|
||||
function gt(t) {
|
||||
let e = this;
|
||||
return function(...r) {
|
||||
T = t;
|
||||
@ -173,7 +173,7 @@ function vt(t) {
|
||||
};
|
||||
}
|
||||
var P = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: U } = a;
|
||||
function D(t, ...e) {
|
||||
function O(t, ...e) {
|
||||
if (!e.length)
|
||||
return t;
|
||||
P.set(t, B(t, this));
|
||||
@ -227,7 +227,7 @@ function Y(t, e) {
|
||||
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
|
||||
), t;
|
||||
}
|
||||
function gt(t) {
|
||||
function vt(t) {
|
||||
return Array.from(t.children).forEach((e) => e.remove()), t;
|
||||
}
|
||||
function tt(t, e, n, r) {
|
||||
@ -352,7 +352,7 @@ function ot() {
|
||||
if (u && b(h).then(l), !t.has(h))
|
||||
continue;
|
||||
let m = t.get(h);
|
||||
m.length_c && (h.dispatchEvent(new Event(v)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(h), s = !0);
|
||||
m.length_c && (h.dispatchEvent(new Event(g)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(h), s = !0);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
@ -370,26 +370,26 @@ function ot() {
|
||||
}
|
||||
|
||||
// src/customElement.js
|
||||
function Ot(t, e, n, r = it) {
|
||||
R.push({
|
||||
function Dt(t, e, n, r = it) {
|
||||
S.push({
|
||||
scope: t,
|
||||
host: (...f) => f.length ? f.forEach((d) => d(t)) : t
|
||||
}), typeof r == "function" && (r = r.call(t, t));
|
||||
let o = t[x];
|
||||
o || ct(t);
|
||||
let c = n.call(t, r);
|
||||
return o || t.dispatchEvent(new Event(v)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, w.observe(e), { once: !0 }), R.pop(), e.append(c);
|
||||
return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, w.observe(e), { once: !0 }), S.pop(), e.append(c);
|
||||
}
|
||||
function ct(t) {
|
||||
return W(t.prototype, "connectedCallback", function(e, n, r) {
|
||||
e.apply(n, r), n.dispatchEvent(new Event(v));
|
||||
e.apply(n, r), n.dispatchEvent(new Event(g));
|
||||
}), W(t.prototype, "disconnectedCallback", function(e, n, r) {
|
||||
e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
|
||||
() => !n.isConnected && n.dispatchEvent(new Event(y))
|
||||
);
|
||||
}), W(t.prototype, "attributeChangedCallback", function(e, n, r) {
|
||||
let [o, , c] = r;
|
||||
n.dispatchEvent(new CustomEvent(O, {
|
||||
n.dispatchEvent(new CustomEvent(D, {
|
||||
detail: [o, c]
|
||||
})), e.apply(n, r);
|
||||
}), t.prototype[x] = !0, t;
|
||||
@ -410,38 +410,38 @@ function _t(t, e, n) {
|
||||
return o.dispatchEvent(f);
|
||||
};
|
||||
}
|
||||
function S(t, e, n) {
|
||||
function R(t, e, n) {
|
||||
return function(o) {
|
||||
return o.addEventListener(t, e, n), o;
|
||||
};
|
||||
}
|
||||
var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
S.connected = function(t, e) {
|
||||
R.connected = function(t, e) {
|
||||
return e = G(e), function(r) {
|
||||
return r.addEventListener(v, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(v)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r);
|
||||
return r.addEventListener(g, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r);
|
||||
};
|
||||
};
|
||||
S.disconnected = function(t, e) {
|
||||
R.disconnected = function(t, e) {
|
||||
return e = G(e), function(r) {
|
||||
return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r;
|
||||
};
|
||||
};
|
||||
var j = /* @__PURE__ */ new WeakMap();
|
||||
S.disconnectedAsAbort = function(t) {
|
||||
R.disconnectedAsAbort = function(t) {
|
||||
if (j.has(t))
|
||||
return j.get(t);
|
||||
let e = new AbortController();
|
||||
return j.set(t, e), t(S.disconnected(() => e.abort())), e;
|
||||
return j.set(t, e), t(R.disconnected(() => e.abort())), e;
|
||||
};
|
||||
var st = /* @__PURE__ */ new WeakSet();
|
||||
S.attributeChanged = function(t, e) {
|
||||
R.attributeChanged = function(t, e) {
|
||||
return typeof e != "object" && (e = {}), function(r) {
|
||||
if (r.addEventListener(O, t, e), r[x] || st.has(r) || !a.M)
|
||||
if (r.addEventListener(D, t, e), r[x] || st.has(r) || !a.M)
|
||||
return r;
|
||||
let o = new a.M(function(f) {
|
||||
for (let { attributeName: d, target: p } of f)
|
||||
p.dispatchEvent(
|
||||
new CustomEvent(O, { detail: [d, p.getAttribute(d)] })
|
||||
new CustomEvent(D, { detail: [d, p.getAttribute(d)] })
|
||||
);
|
||||
});
|
||||
return N(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
|
||||
@ -449,24 +449,24 @@ S.attributeChanged = function(t, e) {
|
||||
};
|
||||
|
||||
globalThis.dde= {
|
||||
assign: D,
|
||||
assign: O,
|
||||
assignAttribute: z,
|
||||
chainableAppend: Q,
|
||||
classListDeclarative: Y,
|
||||
createElement: k,
|
||||
createElementNS: vt,
|
||||
customElementRender: Ot,
|
||||
createElementNS: gt,
|
||||
customElementRender: Dt,
|
||||
customElementWithDDE: ct,
|
||||
dispatchEvent: _t,
|
||||
el: k,
|
||||
elNS: vt,
|
||||
elNS: gt,
|
||||
elementAttribute: tt,
|
||||
empty: gt,
|
||||
empty: vt,
|
||||
lifecyclesToEvents: ct,
|
||||
observedAttributes: it,
|
||||
on: S,
|
||||
on: R,
|
||||
registerReactivity: V,
|
||||
scope: R,
|
||||
scope: S,
|
||||
simulateSlots: bt
|
||||
};
|
||||
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
export type Observable<V, A>= (set?: V)=> V & A;
|
||||
type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof observable._ | void;
|
||||
//type SymbolObservable= Symbol;
|
||||
export type Signal<V, A>= (set?: V)=> V & A;
|
||||
type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
|
||||
//type SymbolSignal= Symbol;
|
||||
type SymbolOnclear= symbol;
|
||||
type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
|
||||
type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
|
||||
interface observable{
|
||||
interface signal{
|
||||
_: Symbol
|
||||
/**
|
||||
* Simple example:
|
||||
* ```js
|
||||
* const hello= S("Hello Observable");
|
||||
* const hello= S("Hello Signal");
|
||||
* ```
|
||||
* …simple todo observable:
|
||||
* …simple todo signal:
|
||||
* ```js
|
||||
* const todos= S([], {
|
||||
* add(v){ this.value.push(S(v)); },
|
||||
@ -19,48 +19,48 @@ interface observable{
|
||||
* [S.symbols.onclear](){ S.clear(...this.value); },
|
||||
* });
|
||||
* ```
|
||||
* …computed observable:
|
||||
* …computed signal:
|
||||
* ```js
|
||||
* const name= S("Jan");
|
||||
* const surname= S("Andrle");
|
||||
* const fullname= S(()=> name()+" "+surname());
|
||||
* ```
|
||||
* @param value Initial observable value. Or function computing value from other observables.
|
||||
* @param actions Use to define actions on the observable. Such as add item to the array.
|
||||
* There is also a reserved function `S.symbol.onclear` which is called when the observable is cleared
|
||||
* @param value Initial signal value. Or function computing value from other signals.
|
||||
* @param actions Use to define actions on the signal. Such as add item to the array.
|
||||
* There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
|
||||
* by `S.clear`.
|
||||
* */
|
||||
<V, A extends Actions<V>>(value: V, actions?: A): Observable<V, A>;
|
||||
<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
|
||||
/**
|
||||
* Computations observable. This creates a observable which is computed from other observables.
|
||||
* Computations signal. This creates a signal which is computed from other signals.
|
||||
* */
|
||||
<V>(computation: ()=> V): Observable<V, {}>
|
||||
action<S extends Observable<any, Actions<any>>, A extends (S extends Observable<any, infer A> ? A : never), N extends keyof A>(
|
||||
observable: S,
|
||||
<V>(computation: ()=> V): Signal<V, {}>
|
||||
action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
|
||||
signal: S,
|
||||
name: N,
|
||||
...params: A[N] extends (...args: infer P)=> any ? P : never
|
||||
): void;
|
||||
clear(...observables: Observable<any, any>[]): void;
|
||||
on<T>(observable: Observable<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
|
||||
clear(...signals: Signal<any, any>[]): void;
|
||||
on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
|
||||
symbols: {
|
||||
//observable: SymbolObservable;
|
||||
//signal: SymbolSignal;
|
||||
onclear: SymbolOnclear;
|
||||
}
|
||||
/**
|
||||
* Reactive element, which is rendered based on the given observable.
|
||||
* Reactive element, which is rendered based on the given signal.
|
||||
* ```js
|
||||
* S.el(observable, value=> value ? el("b", "True") : el("i", "False"));
|
||||
* S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
|
||||
* S.el(listS, list=> list.map(li=> el("li", li)));
|
||||
* ```
|
||||
* */
|
||||
el<S extends any>(observable: Observable<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
|
||||
el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
|
||||
|
||||
observedAttributes(custom_element: HTMLElement): Record<string, Observable<any, any>>;
|
||||
observedAttributes(custom_element: HTMLElement): Record<string, Signal<any, any>>;
|
||||
}
|
||||
export const observable: observable;
|
||||
export const O: observable;
|
||||
export const signal: signal;
|
||||
export const S: signal;
|
||||
declare global {
|
||||
type ddeObservable<T, A= {}>= Observable<T, A>;
|
||||
type ddeSignal<T, A= {}>= Signal<T, A>;
|
||||
type ddeAction<V>= Action<V>
|
||||
type ddeActions<V>= Actions<V>
|
||||
}
|
||||
@ -80,20 +80,20 @@ type AttrsModified= {
|
||||
/**
|
||||
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
|
||||
*/
|
||||
style: string | Partial<CSSStyleDeclaration> | Observable<string, any> | Partial<{ [K in keyof CSSStyleDeclaration]: Observable<CSSStyleDeclaration[K], any> }>
|
||||
style: string | Partial<CSSStyleDeclaration> | Signal<string, any> | Partial<{ [K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], any> }>
|
||||
/**
|
||||
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
|
||||
*/
|
||||
classList: Record<string,-1|0|1|boolean|Observable<-1|0|1|boolean, any>>,
|
||||
classList: Record<string,-1|0|1|boolean|Signal<-1|0|1|boolean, any>>,
|
||||
/**
|
||||
* By default simiral to `className`, but also supports `string[]`
|
||||
* */
|
||||
className: string | (string|boolean|undefined|Observable<string|boolean|undefined, any>)[];
|
||||
className: string | (string|boolean|undefined|Signal<string|boolean|undefined, any>)[];
|
||||
/**
|
||||
* Sets `aria-*` simiraly to `dataset`
|
||||
* */
|
||||
ariaset: Record<string,string|Observable<string, any>>,
|
||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|Observable<string, any>> & Record<`.${string}`, any>
|
||||
ariaset: Record<string,string|Signal<string, any>>,
|
||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|Signal<string, any>> & Record<`.${string}`, any>
|
||||
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
|
||||
/**
|
||||
* Just element attributtes
|
||||
@ -103,13 +103,13 @@ type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModifi
|
||||
* There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
|
||||
* @private
|
||||
*/
|
||||
type ElementAttributes<T extends SupportedElement>= Partial<_fromElsInterfaces<T> & { [K in keyof _fromElsInterfaces<T>]: Observable<_fromElsInterfaces<T>[K], any> } & AttrsModified> & Record<string, any>;
|
||||
type ElementAttributes<T extends SupportedElement>= Partial<_fromElsInterfaces<T> & { [K in keyof _fromElsInterfaces<T>]: Signal<_fromElsInterfaces<T>[K], any> } & AttrsModified> & Record<string, any>;
|
||||
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
|
||||
export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
|
||||
export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
|
||||
|
||||
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
|
||||
type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Observable<string, any>` leads to `attrs?: any`
|
||||
type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Signal<string, any>` leads to `attrs?: any`
|
||||
export function el<
|
||||
TAG extends keyof ExtendedHTMLElementTagNameMap & string,
|
||||
EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
|
||||
@ -148,7 +148,7 @@ export function elNS(
|
||||
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
|
||||
>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | Observable<EL[key], any> | string | number | boolean }>,
|
||||
attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | Signal<EL[key], any> | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
)=> ddeMathMLElement
|
||||
export function elNS(
|
||||
@ -1,6 +1,6 @@
|
||||
// src/observables-common.js
|
||||
// src/signals-common.js
|
||||
var k = {
|
||||
isObservable(t) {
|
||||
isSignal(t) {
|
||||
return !1;
|
||||
},
|
||||
processReactiveAttribute(t, e, n, r) {
|
||||
@ -16,7 +16,7 @@ function W(t) {
|
||||
|
||||
// src/helpers.js
|
||||
var T = (...t) => Object.prototype.hasOwnProperty.call(...t);
|
||||
function A(t) {
|
||||
function S(t) {
|
||||
return typeof t > "u";
|
||||
}
|
||||
function X(t) {
|
||||
@ -52,17 +52,17 @@ var d = {
|
||||
M: globalThis.MutationObserver
|
||||
};
|
||||
function lt(t, e, n) {
|
||||
if (Reflect.set(t, e, n), !!A(n)) {
|
||||
if (Reflect.set(t, e, n), !!S(n)) {
|
||||
if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined")
|
||||
return t.removeAttribute(e);
|
||||
if (Reflect.get(t, e) === "undefined")
|
||||
return Reflect.set(t, e, "");
|
||||
}
|
||||
}
|
||||
var C = "__dde_lifecyclesToEvents", y = "dde:connected", S = "dde:disconnected", P = "dde:attributeChanged";
|
||||
var C = "__dde_lifecyclesToEvents", _ = "dde:connected", O = "dde:disconnected", M = "dde:attributeChanged";
|
||||
|
||||
// src/dom.js
|
||||
var _ = [{
|
||||
var A = [{
|
||||
get scope() {
|
||||
return d.D.body;
|
||||
},
|
||||
@ -70,7 +70,7 @@ var _ = [{
|
||||
prevent: !0
|
||||
}], m = {
|
||||
get current() {
|
||||
return _[_.length - 1];
|
||||
return A[A.length - 1];
|
||||
},
|
||||
get host() {
|
||||
return this.current.host;
|
||||
@ -80,17 +80,17 @@ var _ = [{
|
||||
return t.prevent = !0, t;
|
||||
},
|
||||
get state() {
|
||||
return [..._];
|
||||
return [...A];
|
||||
},
|
||||
push(t = {}) {
|
||||
return _.push(Object.assign({}, this.current, { prevent: !1 }, t));
|
||||
return A.push(Object.assign({}, this.current, { prevent: !1 }, t));
|
||||
},
|
||||
pushRoot() {
|
||||
return _.push(_[0]);
|
||||
return A.push(A[0]);
|
||||
},
|
||||
pop() {
|
||||
if (_.length !== 1)
|
||||
return _.pop();
|
||||
if (A.length !== 1)
|
||||
return A.pop();
|
||||
}
|
||||
};
|
||||
function Y(...t) {
|
||||
@ -100,68 +100,68 @@ function ht(t) {
|
||||
return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;
|
||||
}
|
||||
var $;
|
||||
function M(t, e, ...n) {
|
||||
let r = W(this), o = 0, c, s;
|
||||
switch ((Object(e) !== e || r.isObservable(e)) && (e = { textContent: e }), !0) {
|
||||
function j(t, e, ...n) {
|
||||
let r = W(this), o = 0, c, i;
|
||||
switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
|
||||
case typeof t == "function": {
|
||||
o = 1, m.push({ scope: t, host: (...g) => g.length ? (o === 1 ? n.unshift(...g) : g.forEach((l) => l(s)), void 0) : s }), c = t(e || void 0);
|
||||
o = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);
|
||||
let a = c instanceof d.F;
|
||||
if (c.nodeName === "#comment")
|
||||
break;
|
||||
let h = M.mark({
|
||||
let h = j.mark({
|
||||
type: "component",
|
||||
name: t.name,
|
||||
host: a ? "this" : "parentElement"
|
||||
});
|
||||
c.prepend(h), a && (s = h);
|
||||
c.prepend(h), a && (i = h);
|
||||
break;
|
||||
}
|
||||
case t === "#text":
|
||||
c = j.call(this, d.D.createTextNode(""), e);
|
||||
c = P.call(this, d.D.createTextNode(""), e);
|
||||
break;
|
||||
case (t === "<>" || !t):
|
||||
c = j.call(this, d.D.createDocumentFragment(), e);
|
||||
c = P.call(this, d.D.createDocumentFragment(), e);
|
||||
break;
|
||||
case !!$:
|
||||
c = j.call(this, d.D.createElementNS($, t), e);
|
||||
c = P.call(this, d.D.createElementNS($, t), e);
|
||||
break;
|
||||
case !c:
|
||||
c = j.call(this, d.D.createElement(t), e);
|
||||
c = P.call(this, d.D.createElement(t), e);
|
||||
}
|
||||
return ht(c), s || (s = c), n.forEach((a) => a(s)), o && m.pop(), o = 2, c;
|
||||
return ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;
|
||||
}
|
||||
function Wt(t, e = t, n = void 0) {
|
||||
let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((s, a) => Reflect.set(s, a.name || r, a) && s, {}), c = T(o, r);
|
||||
let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);
|
||||
if (t.append = new Proxy(t.append, {
|
||||
apply(s, a, h) {
|
||||
apply(i, a, h) {
|
||||
if (!h.length)
|
||||
return t;
|
||||
let g = d.D.createDocumentFragment();
|
||||
let v = d.D.createDocumentFragment();
|
||||
for (let l of h) {
|
||||
if (!l || !l.slot) {
|
||||
c && g.appendChild(l);
|
||||
c && v.appendChild(l);
|
||||
continue;
|
||||
}
|
||||
let x = l.slot, w = o[x];
|
||||
gt(l, "remove", "slot"), w && (bt(w, l, n), Reflect.deleteProperty(o, x));
|
||||
let x = l.slot, y = o[x];
|
||||
vt(l, "remove", "slot"), y && (bt(y, l, n), Reflect.deleteProperty(o, x));
|
||||
}
|
||||
return c && (o[r].replaceWith(g), Reflect.deleteProperty(o, r)), t.append = s, t;
|
||||
return c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;
|
||||
}
|
||||
}), t !== e) {
|
||||
let s = Array.from(t.childNodes);
|
||||
s.forEach((a) => a.remove()), t.append(...s);
|
||||
let i = Array.from(t.childNodes);
|
||||
i.forEach((a) => a.remove()), t.append(...i);
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function bt(t, e, n) {
|
||||
n && n(t, e);
|
||||
try {
|
||||
t.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
|
||||
t.replaceWith(P(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
|
||||
} catch {
|
||||
t.replaceWith(e);
|
||||
}
|
||||
}
|
||||
M.mark = function(t, e = !1) {
|
||||
j.mark = function(t, e = !1) {
|
||||
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
|
||||
let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
|
||||
return e && (r.end = d.D.createComment("</dde:mark>")), r;
|
||||
@ -170,12 +170,12 @@ function qt(t) {
|
||||
let e = this;
|
||||
return function(...r) {
|
||||
$ = t;
|
||||
let o = M.call(e, ...r);
|
||||
let o = j.call(e, ...r);
|
||||
return $ = void 0, o;
|
||||
};
|
||||
}
|
||||
var U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;
|
||||
function j(t, ...e) {
|
||||
function P(t, ...e) {
|
||||
if (!e.length)
|
||||
return t;
|
||||
U.set(t, rt(t, this));
|
||||
@ -191,10 +191,10 @@ function nt(t, e, n) {
|
||||
n,
|
||||
(a, h) => nt.call(c, t, a, h)
|
||||
);
|
||||
let [s] = e;
|
||||
if (s === "=")
|
||||
let [i] = e;
|
||||
if (i === "=")
|
||||
return r(e.slice(1), n);
|
||||
if (s === ".")
|
||||
if (i === ".")
|
||||
return et(t, e.slice(1), n);
|
||||
if (/(aria|data)([A-Z])/.test(e))
|
||||
return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n);
|
||||
@ -211,7 +211,7 @@ function nt(t, e, n) {
|
||||
case "ariaset":
|
||||
return I(o, n, (a, h) => r("aria-" + a, h));
|
||||
case "classList":
|
||||
return vt.call(c, t, n);
|
||||
return gt.call(c, t, n);
|
||||
}
|
||||
return Et(t, e) ? tt(t, e, n) : r(e, n);
|
||||
}
|
||||
@ -221,7 +221,7 @@ function rt(t, e) {
|
||||
let r = (t instanceof d.S ? xt : mt).bind(null, t, "Attribute"), o = W(e);
|
||||
return { setRemoveAttr: r, s: o };
|
||||
}
|
||||
function vt(t, e) {
|
||||
function gt(t, e) {
|
||||
let n = W(this);
|
||||
return I(
|
||||
n,
|
||||
@ -232,14 +232,14 @@ function vt(t, e) {
|
||||
function Ft(t) {
|
||||
return Array.from(t.children).forEach((e) => e.remove()), t;
|
||||
}
|
||||
function gt(t, e, n, r) {
|
||||
function vt(t, e, n, r) {
|
||||
return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
|
||||
}
|
||||
function Et(t, e) {
|
||||
if (!(e in t))
|
||||
return !1;
|
||||
let n = ot(t, e);
|
||||
return !A(n.set);
|
||||
return !S(n.set);
|
||||
}
|
||||
function ot(t, e) {
|
||||
if (t = Object.getPrototypeOf(t), !t)
|
||||
@ -257,141 +257,141 @@ function ct(t) {
|
||||
return Array.isArray(t) ? t.filter(Boolean).join(" ") : t;
|
||||
}
|
||||
function mt(t, e, n, r) {
|
||||
return t[(A(r) ? "remove" : "set") + e](n, ct(r));
|
||||
return t[(S(r) ? "remove" : "set") + e](n, ct(r));
|
||||
}
|
||||
function xt(t, e, n, r, o = null) {
|
||||
return t[(A(r) ? "remove" : "set") + e + "NS"](o, n, ct(r));
|
||||
return t[(S(r) ? "remove" : "set") + e + "NS"](o, n, ct(r));
|
||||
}
|
||||
function et(t, e, n) {
|
||||
if (Reflect.set(t, e, n), !!A(n))
|
||||
if (Reflect.set(t, e, n), !!S(n))
|
||||
return Reflect.deleteProperty(t, e);
|
||||
}
|
||||
|
||||
// src/events-observer.js
|
||||
var D = d.M ? Ot() : new Proxy({}, {
|
||||
var D = d.M ? wt() : new Proxy({}, {
|
||||
get() {
|
||||
return () => {
|
||||
};
|
||||
}
|
||||
});
|
||||
function Ot() {
|
||||
let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) {
|
||||
function wt() {
|
||||
let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
|
||||
for (let f of u)
|
||||
if (f.type === "childList") {
|
||||
if (l(f.addedNodes, !0)) {
|
||||
i();
|
||||
s();
|
||||
continue;
|
||||
}
|
||||
x(f.removedNodes, !0) && i();
|
||||
x(f.removedNodes, !0) && s();
|
||||
}
|
||||
}, r = new d.M(n(a));
|
||||
return {
|
||||
observe(i) {
|
||||
observe(s) {
|
||||
let u = new d.M(n(() => {
|
||||
}));
|
||||
return u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect();
|
||||
return u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();
|
||||
},
|
||||
onConnected(i, u) {
|
||||
s();
|
||||
let f = c(i);
|
||||
onConnected(s, u) {
|
||||
i();
|
||||
let f = c(s);
|
||||
f.connected.has(u) || (f.connected.add(u), f.length_c += 1);
|
||||
},
|
||||
offConnected(i, u) {
|
||||
if (!t.has(i))
|
||||
offConnected(s, u) {
|
||||
if (!t.has(s))
|
||||
return;
|
||||
let f = t.get(i);
|
||||
f.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(i, f));
|
||||
let f = t.get(s);
|
||||
f.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(s, f));
|
||||
},
|
||||
onDisconnected(i, u) {
|
||||
s();
|
||||
let f = c(i);
|
||||
onDisconnected(s, u) {
|
||||
i();
|
||||
let f = c(s);
|
||||
f.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);
|
||||
},
|
||||
offDisconnected(i, u) {
|
||||
if (!t.has(i))
|
||||
offDisconnected(s, u) {
|
||||
if (!t.has(s))
|
||||
return;
|
||||
let f = t.get(i);
|
||||
f.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(i, f));
|
||||
let f = t.get(s);
|
||||
f.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(s, f));
|
||||
}
|
||||
};
|
||||
function o(i, u) {
|
||||
u.length_c || u.length_d || (t.delete(i), a());
|
||||
function o(s, u) {
|
||||
u.length_c || u.length_d || (t.delete(s), a());
|
||||
}
|
||||
function c(i) {
|
||||
if (t.has(i))
|
||||
return t.get(i);
|
||||
function c(s) {
|
||||
if (t.has(s))
|
||||
return t.get(s);
|
||||
let u = {
|
||||
connected: /* @__PURE__ */ new WeakSet(),
|
||||
length_c: 0,
|
||||
disconnected: /* @__PURE__ */ new WeakSet(),
|
||||
length_d: 0
|
||||
};
|
||||
return t.set(i, u), u;
|
||||
return t.set(s, u), u;
|
||||
}
|
||||
function s() {
|
||||
function i() {
|
||||
e || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 }));
|
||||
}
|
||||
function a() {
|
||||
!e || t.size || (e = !1, r.disconnect());
|
||||
}
|
||||
function h() {
|
||||
return new Promise(function(i) {
|
||||
(requestIdleCallback || requestAnimationFrame)(i);
|
||||
return new Promise(function(s) {
|
||||
(requestIdleCallback || requestAnimationFrame)(s);
|
||||
});
|
||||
}
|
||||
async function g(i) {
|
||||
async function v(s) {
|
||||
t.size > 30 && await h();
|
||||
let u = [];
|
||||
if (!(i instanceof Node))
|
||||
if (!(s instanceof Node))
|
||||
return u;
|
||||
for (let f of t.keys())
|
||||
f === i || !(f instanceof Node) || i.contains(f) && u.push(f);
|
||||
f === s || !(f instanceof Node) || s.contains(f) && u.push(f);
|
||||
return u;
|
||||
}
|
||||
function l(i, u) {
|
||||
function l(s, u) {
|
||||
let f = !1;
|
||||
for (let b of i) {
|
||||
if (u && g(b).then(l), !t.has(b))
|
||||
for (let b of s) {
|
||||
if (u && v(b).then(l), !t.has(b))
|
||||
continue;
|
||||
let N = t.get(b);
|
||||
N.length_c && (b.dispatchEvent(new Event(y)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);
|
||||
N.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);
|
||||
}
|
||||
return f;
|
||||
}
|
||||
function x(i, u) {
|
||||
function x(s, u) {
|
||||
let f = !1;
|
||||
for (let b of i)
|
||||
u && g(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0);
|
||||
for (let b of s)
|
||||
u && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);
|
||||
return f;
|
||||
}
|
||||
function w(i) {
|
||||
function y(s) {
|
||||
return () => {
|
||||
i.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i));
|
||||
s.isConnected || (s.dispatchEvent(new Event(O)), t.delete(s));
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// src/customElement.js
|
||||
function Zt(t, e, n, r = yt) {
|
||||
function Zt(t, e, n, r = _t) {
|
||||
m.push({
|
||||
scope: t,
|
||||
host: (...s) => s.length ? s.forEach((a) => a(t)) : t
|
||||
host: (...i) => i.length ? i.forEach((a) => a(t)) : t
|
||||
}), typeof r == "function" && (r = r.call(t, t));
|
||||
let o = t[C];
|
||||
o || wt(t);
|
||||
o || yt(t);
|
||||
let c = n.call(t, r);
|
||||
return o || t.dispatchEvent(new Event(y)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(S, D.observe(e), { once: !0 }), m.pop(), e.append(c);
|
||||
return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(O, D.observe(e), { once: !0 }), m.pop(), e.append(c);
|
||||
}
|
||||
function wt(t) {
|
||||
function yt(t) {
|
||||
return J(t.prototype, "connectedCallback", function(e, n, r) {
|
||||
e.apply(n, r), n.dispatchEvent(new Event(y));
|
||||
e.apply(n, r), n.dispatchEvent(new Event(_));
|
||||
}), J(t.prototype, "disconnectedCallback", function(e, n, r) {
|
||||
e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
|
||||
() => !n.isConnected && n.dispatchEvent(new Event(S))
|
||||
() => !n.isConnected && n.dispatchEvent(new Event(O))
|
||||
);
|
||||
}), J(t.prototype, "attributeChangedCallback", function(e, n, r) {
|
||||
let [o, , c] = r;
|
||||
n.dispatchEvent(new CustomEvent(P, {
|
||||
n.dispatchEvent(new CustomEvent(M, {
|
||||
detail: [o, c]
|
||||
})), e.apply(n, r);
|
||||
}), t.prototype[C] = !0, t;
|
||||
@ -400,7 +400,7 @@ function J(t, e, n) {
|
||||
t[e] = new Proxy(t[e] || (() => {
|
||||
}), { apply: n });
|
||||
}
|
||||
function yt(t) {
|
||||
function _t(t) {
|
||||
return F(t, (e, n) => e.getAttribute(n));
|
||||
}
|
||||
|
||||
@ -408,50 +408,50 @@ function yt(t) {
|
||||
function Qt(t, e, n) {
|
||||
return e || (e = {}), function(o, ...c) {
|
||||
n && (c.unshift(o), o = typeof n == "function" ? n() : n);
|
||||
let s = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
|
||||
return o.dispatchEvent(s);
|
||||
let i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
|
||||
return o.dispatchEvent(i);
|
||||
};
|
||||
}
|
||||
function O(t, e, n) {
|
||||
function w(t, e, n) {
|
||||
return function(o) {
|
||||
return o.addEventListener(t, e, n), o;
|
||||
};
|
||||
}
|
||||
var st = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
O.connected = function(t, e) {
|
||||
return e = st(e), function(r) {
|
||||
return r.addEventListener(y, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(y)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);
|
||||
var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
w.connected = function(t, e) {
|
||||
return e = it(e), function(r) {
|
||||
return r.addEventListener(_, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);
|
||||
};
|
||||
};
|
||||
O.disconnected = function(t, e) {
|
||||
return e = st(e), function(r) {
|
||||
return r.addEventListener(S, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;
|
||||
w.disconnected = function(t, e) {
|
||||
return e = it(e), function(r) {
|
||||
return r.addEventListener(O, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;
|
||||
};
|
||||
};
|
||||
var Z = /* @__PURE__ */ new WeakMap();
|
||||
O.disconnectedAsAbort = function(t) {
|
||||
w.disconnectedAsAbort = function(t) {
|
||||
if (Z.has(t))
|
||||
return Z.get(t);
|
||||
let e = new AbortController();
|
||||
return Z.set(t, e), t(O.disconnected(() => e.abort())), e;
|
||||
return Z.set(t, e), t(w.disconnected(() => e.abort())), e;
|
||||
};
|
||||
var _t = /* @__PURE__ */ new WeakSet();
|
||||
O.attributeChanged = function(t, e) {
|
||||
var At = /* @__PURE__ */ new WeakSet();
|
||||
w.attributeChanged = function(t, e) {
|
||||
return typeof e != "object" && (e = {}), function(r) {
|
||||
if (r.addEventListener(P, t, e), r[C] || _t.has(r) || !d.M)
|
||||
if (r.addEventListener(M, t, e), r[C] || At.has(r) || !d.M)
|
||||
return r;
|
||||
let o = new d.M(function(s) {
|
||||
for (let { attributeName: a, target: h } of s)
|
||||
let o = new d.M(function(i) {
|
||||
for (let { attributeName: a, target: h } of i)
|
||||
h.dispatchEvent(
|
||||
new CustomEvent(P, { detail: [a, h.getAttribute(a)] })
|
||||
new CustomEvent(M, { detail: [a, h.getAttribute(a)] })
|
||||
);
|
||||
});
|
||||
return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
|
||||
};
|
||||
};
|
||||
|
||||
// src/observables-lib.js
|
||||
var p = "__dde_observable";
|
||||
// src/signals-lib.js
|
||||
var p = "__dde_signal";
|
||||
function z(t) {
|
||||
try {
|
||||
return T(t, p);
|
||||
@ -459,21 +459,21 @@ function z(t) {
|
||||
return !1;
|
||||
}
|
||||
}
|
||||
var H = [], v = /* @__PURE__ */ new WeakMap();
|
||||
var H = [], g = /* @__PURE__ */ new WeakMap();
|
||||
function E(t, e) {
|
||||
if (typeof t != "function")
|
||||
return it(!1, t, e);
|
||||
return st(!1, t, e);
|
||||
if (z(t))
|
||||
return t;
|
||||
let n = it(!0), r = function() {
|
||||
let [o, ...c] = v.get(r);
|
||||
if (v.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)
|
||||
let n = st(!0), r = function() {
|
||||
let [o, ...c] = g.get(r);
|
||||
if (g.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)
|
||||
return;
|
||||
let s = v.get(r);
|
||||
let i = g.get(r);
|
||||
for (let a of c)
|
||||
s.has(a) || L(a, r);
|
||||
i.has(a) || L(a, r);
|
||||
};
|
||||
return v.set(n[p], r), v.set(r, /* @__PURE__ */ new Set([n])), r(), n;
|
||||
return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
|
||||
}
|
||||
E.action = function(t, e, ...n) {
|
||||
let r = t[p], { actions: o } = r;
|
||||
@ -492,8 +492,8 @@ E.on = function t(e, n, r = {}) {
|
||||
}
|
||||
};
|
||||
E.symbols = {
|
||||
//observable: mark,
|
||||
onclear: Symbol.for("Observable.onclear")
|
||||
//signal: mark,
|
||||
onclear: Symbol.for("Signal.onclear")
|
||||
};
|
||||
E.clear = function(...t) {
|
||||
for (let n of t) {
|
||||
@ -502,37 +502,37 @@ E.clear = function(...t) {
|
||||
}
|
||||
function e(n, r) {
|
||||
r.listeners.forEach((o) => {
|
||||
if (r.listeners.delete(o), !v.has(o))
|
||||
if (r.listeners.delete(o), !g.has(o))
|
||||
return;
|
||||
let c = v.get(o);
|
||||
c.delete(n), !(c.size > 1) && (n.clear(...c), v.delete(o));
|
||||
let c = g.get(o);
|
||||
c.delete(n), !(c.size > 1) && (n.clear(...c), g.delete(o));
|
||||
});
|
||||
}
|
||||
};
|
||||
var R = "__dde_reactive";
|
||||
E.el = function(t, e) {
|
||||
let n = M.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment();
|
||||
let n = j.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment();
|
||||
o.append(n, r);
|
||||
let { current: c } = m, s = {}, a = (h) => {
|
||||
let { current: c } = m, i = {}, a = (h) => {
|
||||
if (!n.parentNode || !r.parentNode)
|
||||
return L(t, a);
|
||||
let g = s;
|
||||
s = {}, m.push(c);
|
||||
let v = i;
|
||||
i = {}, m.push(c);
|
||||
let l = e(h, function(u, f) {
|
||||
let b;
|
||||
return T(g, u) ? (b = g[u], delete g[u]) : b = f(), s[u] = b, b;
|
||||
return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;
|
||||
});
|
||||
m.pop(), Array.isArray(l) || (l = [l]);
|
||||
let x = document.createComment("");
|
||||
l.push(x), n.after(...l);
|
||||
let w;
|
||||
for (; (w = x.nextSibling) && w !== r; )
|
||||
w.remove();
|
||||
x.remove(), n.isConnected && At(c.host());
|
||||
let y;
|
||||
for (; (y = x.nextSibling) && y !== r; )
|
||||
y.remove();
|
||||
x.remove(), n.isConnected && St(c.host());
|
||||
};
|
||||
return Q(t, a), ft(t, a, n, e), a(t()), o;
|
||||
};
|
||||
function At(t) {
|
||||
function St(t) {
|
||||
!t || !t[R] || (requestIdleCallback || setTimeout)(function() {
|
||||
t[R] = t[R].filter(([e, n]) => n.isConnected ? !0 : (L(...e), !1));
|
||||
});
|
||||
@ -542,7 +542,7 @@ var Ct = {
|
||||
this.value = t;
|
||||
}
|
||||
};
|
||||
function St(t) {
|
||||
function Ot(t) {
|
||||
return function(e, n) {
|
||||
let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = at(r, e.getAttribute(n), Ct);
|
||||
return t[n] = o, o;
|
||||
@ -550,21 +550,21 @@ function St(t) {
|
||||
}
|
||||
var G = "__dde_attributes";
|
||||
E.observedAttributes = function(t) {
|
||||
let e = t[G] = {}, n = F(t, St(e));
|
||||
return O.attributeChanged(function({ detail: o }) {
|
||||
/*! This maps attributes to observables (`O.observedAttributes`).
|
||||
let e = t[G] = {}, n = F(t, Ot(e));
|
||||
return w.attributeChanged(function({ detail: o }) {
|
||||
/*! This maps attributes to signals (`S.observedAttributes`).
|
||||
* Investigate `__dde_attributes` key of the element.*/
|
||||
let [c, s] = o, a = this[G][c];
|
||||
let [c, i] = o, a = this[G][c];
|
||||
if (a)
|
||||
return E.action(a, "_set", s);
|
||||
})(t), O.disconnected(function() {
|
||||
/*! This removes all observables mapped to attributes (`O.observedAttributes`).
|
||||
return E.action(a, "_set", i);
|
||||
})(t), w.disconnected(function() {
|
||||
/*! This removes all signals mapped to attributes (`S.observedAttributes`).
|
||||
* Investigate `__dde_attributes` key of the element.*/
|
||||
E.clear(...Object.values(this[G]));
|
||||
})(t), n;
|
||||
};
|
||||
var ut = {
|
||||
isObservable: z,
|
||||
isSignal: z,
|
||||
processReactiveAttribute(t, e, n, r) {
|
||||
if (!z(n))
|
||||
return n;
|
||||
@ -579,18 +579,18 @@ var ut = {
|
||||
function ft(t, e, ...n) {
|
||||
let { current: r } = m;
|
||||
r.prevent || r.host(function(o) {
|
||||
o[R] || (o[R] = [], O.disconnected(
|
||||
o[R] || (o[R] = [], w.disconnected(
|
||||
() => (
|
||||
/*!
|
||||
* Clears all Observables listeners added in the current scope/host (`O.el`, `assign`, …?).
|
||||
* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
|
||||
* You can investigate the `__dde_reactive` key of the element.
|
||||
* */
|
||||
o[R].forEach(([[c, s]]) => L(c, s, c[p] && c[p].host && c[p].host() === o))
|
||||
o[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o))
|
||||
)
|
||||
)(o)), o[R].push([[t, e], ...n]);
|
||||
});
|
||||
}
|
||||
function it(t, e, n) {
|
||||
function st(t, e, n) {
|
||||
let r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r);
|
||||
return at(r, e, n, t);
|
||||
}
|
||||
@ -611,13 +611,13 @@ function at(t, e, n, r = !1) {
|
||||
X(n) !== "[object Object]" && (n = {});
|
||||
let { onclear: c } = E.symbols;
|
||||
n[c] && (o.push(n[c]), delete n[c]);
|
||||
let { host: s } = m;
|
||||
let { host: i } = m;
|
||||
return Reflect.defineProperty(t, p, {
|
||||
value: {
|
||||
value: e,
|
||||
actions: n,
|
||||
onclear: o,
|
||||
host: s,
|
||||
host: i,
|
||||
listeners: /* @__PURE__ */ new Set(),
|
||||
defined: new V().stack,
|
||||
readonly: r
|
||||
@ -634,7 +634,7 @@ function K(t) {
|
||||
if (!t[p])
|
||||
return;
|
||||
let { value: e, listeners: n } = t[p], r = Rt();
|
||||
return r && n.add(r), v.has(r) && v.get(r).add(t), e;
|
||||
return r && n.add(r), g.has(r) && g.get(r).add(t), e;
|
||||
}
|
||||
function dt(t, e, n) {
|
||||
if (!t[p])
|
||||
@ -653,39 +653,39 @@ function L(t, e, n) {
|
||||
return;
|
||||
let o = r.listeners.delete(e);
|
||||
if (n && !r.listeners.size) {
|
||||
if (E.clear(t), !v.has(r))
|
||||
if (E.clear(t), !g.has(r))
|
||||
return o;
|
||||
let c = v.get(r);
|
||||
if (!v.has(c))
|
||||
let c = g.get(r);
|
||||
if (!g.has(c))
|
||||
return o;
|
||||
v.get(c).forEach((s) => L(s, c, !0));
|
||||
g.get(c).forEach((i) => L(i, c, !0));
|
||||
}
|
||||
return o;
|
||||
}
|
||||
|
||||
// observables.js
|
||||
// signals.js
|
||||
B(ut);
|
||||
export {
|
||||
E as O,
|
||||
j as assign,
|
||||
E as S,
|
||||
P as assign,
|
||||
nt as assignAttribute,
|
||||
ht as chainableAppend,
|
||||
vt as classListDeclarative,
|
||||
M as createElement,
|
||||
gt as classListDeclarative,
|
||||
j as createElement,
|
||||
qt as createElementNS,
|
||||
Zt as customElementRender,
|
||||
wt as customElementWithDDE,
|
||||
yt as customElementWithDDE,
|
||||
Qt as dispatchEvent,
|
||||
M as el,
|
||||
j as el,
|
||||
qt as elNS,
|
||||
gt as elementAttribute,
|
||||
vt as elementAttribute,
|
||||
Ft as empty,
|
||||
z as isObservable,
|
||||
wt as lifecyclesToEvents,
|
||||
E as observable,
|
||||
yt as observedAttributes,
|
||||
O as on,
|
||||
z as isSignal,
|
||||
yt as lifecyclesToEvents,
|
||||
_t as observedAttributes,
|
||||
w as on,
|
||||
B as registerReactivity,
|
||||
m as scope,
|
||||
E as signal,
|
||||
Wt as simulateSlots
|
||||
};
|
||||
66
dist/esm.d.ts
vendored
66
dist/esm.d.ts
vendored
@ -1,17 +1,17 @@
|
||||
export type Observable<V, A>= (set?: V)=> V & A;
|
||||
type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof observable._ | void;
|
||||
//type SymbolObservable= Symbol;
|
||||
export type Signal<V, A>= (set?: V)=> V & A;
|
||||
type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
|
||||
//type SymbolSignal= Symbol;
|
||||
type SymbolOnclear= symbol;
|
||||
type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
|
||||
type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
|
||||
interface observable{
|
||||
interface signal{
|
||||
_: Symbol
|
||||
/**
|
||||
* Simple example:
|
||||
* ```js
|
||||
* const hello= S("Hello Observable");
|
||||
* const hello= S("Hello Signal");
|
||||
* ```
|
||||
* …simple todo observable:
|
||||
* …simple todo signal:
|
||||
* ```js
|
||||
* const todos= S([], {
|
||||
* add(v){ this.value.push(S(v)); },
|
||||
@ -19,48 +19,48 @@ interface observable{
|
||||
* [S.symbols.onclear](){ S.clear(...this.value); },
|
||||
* });
|
||||
* ```
|
||||
* …computed observable:
|
||||
* …computed signal:
|
||||
* ```js
|
||||
* const name= S("Jan");
|
||||
* const surname= S("Andrle");
|
||||
* const fullname= S(()=> name()+" "+surname());
|
||||
* ```
|
||||
* @param value Initial observable value. Or function computing value from other observables.
|
||||
* @param actions Use to define actions on the observable. Such as add item to the array.
|
||||
* There is also a reserved function `S.symbol.onclear` which is called when the observable is cleared
|
||||
* @param value Initial signal value. Or function computing value from other signals.
|
||||
* @param actions Use to define actions on the signal. Such as add item to the array.
|
||||
* There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
|
||||
* by `S.clear`.
|
||||
* */
|
||||
<V, A extends Actions<V>>(value: V, actions?: A): Observable<V, A>;
|
||||
<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
|
||||
/**
|
||||
* Computations observable. This creates a observable which is computed from other observables.
|
||||
* Computations signal. This creates a signal which is computed from other signals.
|
||||
* */
|
||||
<V>(computation: ()=> V): Observable<V, {}>
|
||||
action<S extends Observable<any, Actions<any>>, A extends (S extends Observable<any, infer A> ? A : never), N extends keyof A>(
|
||||
observable: S,
|
||||
<V>(computation: ()=> V): Signal<V, {}>
|
||||
action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
|
||||
signal: S,
|
||||
name: N,
|
||||
...params: A[N] extends (...args: infer P)=> any ? P : never
|
||||
): void;
|
||||
clear(...observables: Observable<any, any>[]): void;
|
||||
on<T>(observable: Observable<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
|
||||
clear(...signals: Signal<any, any>[]): void;
|
||||
on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
|
||||
symbols: {
|
||||
//observable: SymbolObservable;
|
||||
//signal: SymbolSignal;
|
||||
onclear: SymbolOnclear;
|
||||
}
|
||||
/**
|
||||
* Reactive element, which is rendered based on the given observable.
|
||||
* Reactive element, which is rendered based on the given signal.
|
||||
* ```js
|
||||
* S.el(observable, value=> value ? el("b", "True") : el("i", "False"));
|
||||
* S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
|
||||
* S.el(listS, list=> list.map(li=> el("li", li)));
|
||||
* ```
|
||||
* */
|
||||
el<S extends any>(observable: Observable<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
|
||||
el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
|
||||
|
||||
observedAttributes(custom_element: HTMLElement): Record<string, Observable<any, any>>;
|
||||
observedAttributes(custom_element: HTMLElement): Record<string, Signal<any, any>>;
|
||||
}
|
||||
export const observable: observable;
|
||||
export const O: observable;
|
||||
export const signal: signal;
|
||||
export const S: signal;
|
||||
declare global {
|
||||
type ddeObservable<T, A= {}>= Observable<T, A>;
|
||||
type ddeSignal<T, A= {}>= Signal<T, A>;
|
||||
type ddeAction<V>= Action<V>
|
||||
type ddeActions<V>= Actions<V>
|
||||
}
|
||||
@ -80,20 +80,20 @@ type AttrsModified= {
|
||||
/**
|
||||
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
|
||||
*/
|
||||
style: string | Partial<CSSStyleDeclaration> | Observable<string, any> | Partial<{ [K in keyof CSSStyleDeclaration]: Observable<CSSStyleDeclaration[K], any> }>
|
||||
style: string | Partial<CSSStyleDeclaration> | Signal<string, any> | Partial<{ [K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], any> }>
|
||||
/**
|
||||
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
|
||||
*/
|
||||
classList: Record<string,-1|0|1|boolean|Observable<-1|0|1|boolean, any>>,
|
||||
classList: Record<string,-1|0|1|boolean|Signal<-1|0|1|boolean, any>>,
|
||||
/**
|
||||
* By default simiral to `className`, but also supports `string[]`
|
||||
* */
|
||||
className: string | (string|boolean|undefined|Observable<string|boolean|undefined, any>)[];
|
||||
className: string | (string|boolean|undefined|Signal<string|boolean|undefined, any>)[];
|
||||
/**
|
||||
* Sets `aria-*` simiraly to `dataset`
|
||||
* */
|
||||
ariaset: Record<string,string|Observable<string, any>>,
|
||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|Observable<string, any>> & Record<`.${string}`, any>
|
||||
ariaset: Record<string,string|Signal<string, any>>,
|
||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|Signal<string, any>> & Record<`.${string}`, any>
|
||||
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
|
||||
/**
|
||||
* Just element attributtes
|
||||
@ -103,13 +103,13 @@ type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModifi
|
||||
* There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
|
||||
* @private
|
||||
*/
|
||||
type ElementAttributes<T extends SupportedElement>= Partial<_fromElsInterfaces<T> & { [K in keyof _fromElsInterfaces<T>]: Observable<_fromElsInterfaces<T>[K], any> } & AttrsModified> & Record<string, any>;
|
||||
type ElementAttributes<T extends SupportedElement>= Partial<_fromElsInterfaces<T> & { [K in keyof _fromElsInterfaces<T>]: Signal<_fromElsInterfaces<T>[K], any> } & AttrsModified> & Record<string, any>;
|
||||
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
|
||||
export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
|
||||
export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
|
||||
|
||||
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
|
||||
type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Observable<string, any>` leads to `attrs?: any`
|
||||
type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Signal<string, any>` leads to `attrs?: any`
|
||||
export function el<
|
||||
TAG extends keyof ExtendedHTMLElementTagNameMap & string,
|
||||
EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
|
||||
@ -148,7 +148,7 @@ export function elNS(
|
||||
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
|
||||
>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | Observable<EL[key], any> | string | number | boolean }>,
|
||||
attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | Signal<EL[key], any> | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
)=> ddeMathMLElement
|
||||
export function elNS(
|
||||
|
||||
88
dist/esm.js
vendored
88
dist/esm.js
vendored
@ -1,6 +1,6 @@
|
||||
// src/observables-common.js
|
||||
// src/signals-common.js
|
||||
var C = {
|
||||
isObservable(t) {
|
||||
isSignal(t) {
|
||||
return !1;
|
||||
},
|
||||
processReactiveAttribute(t, e, n, r) {
|
||||
@ -55,18 +55,18 @@ function K(t, e, n) {
|
||||
return Reflect.set(t, e, "");
|
||||
}
|
||||
}
|
||||
var x = "__dde_lifecyclesToEvents", v = "dde:connected", y = "dde:disconnected", O = "dde:attributeChanged";
|
||||
var x = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged";
|
||||
|
||||
// src/dom.js
|
||||
var g = [{
|
||||
var v = [{
|
||||
get scope() {
|
||||
return a.D.body;
|
||||
},
|
||||
host: (t) => t ? t(a.D.body) : a.D.body,
|
||||
prevent: !0
|
||||
}], R = {
|
||||
}], S = {
|
||||
get current() {
|
||||
return g[g.length - 1];
|
||||
return v[v.length - 1];
|
||||
},
|
||||
get host() {
|
||||
return this.current.host;
|
||||
@ -76,17 +76,17 @@ var g = [{
|
||||
return t.prevent = !0, t;
|
||||
},
|
||||
get state() {
|
||||
return [...g];
|
||||
return [...v];
|
||||
},
|
||||
push(t = {}) {
|
||||
return g.push(Object.assign({}, this.current, { prevent: !1 }, t));
|
||||
return v.push(Object.assign({}, this.current, { prevent: !1 }, t));
|
||||
},
|
||||
pushRoot() {
|
||||
return g.push(g[0]);
|
||||
return v.push(v[0]);
|
||||
},
|
||||
pop() {
|
||||
if (g.length !== 1)
|
||||
return g.pop();
|
||||
if (v.length !== 1)
|
||||
return v.pop();
|
||||
}
|
||||
};
|
||||
function $(...t) {
|
||||
@ -98,9 +98,9 @@ function Q(t) {
|
||||
var T;
|
||||
function k(t, e, ...n) {
|
||||
let r = L(this), o = 0, c, f;
|
||||
switch ((Object(e) !== e || r.isObservable(e)) && (e = { textContent: e }), !0) {
|
||||
switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
|
||||
case typeof t == "function": {
|
||||
o = 1, R.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((l) => l(f)), void 0) : f }), c = t(e || void 0);
|
||||
o = 1, S.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((l) => l(f)), void 0) : f }), c = t(e || void 0);
|
||||
let d = c instanceof a.F;
|
||||
if (c.nodeName === "#comment")
|
||||
break;
|
||||
@ -113,18 +113,18 @@ function k(t, e, ...n) {
|
||||
break;
|
||||
}
|
||||
case t === "#text":
|
||||
c = D.call(this, a.D.createTextNode(""), e);
|
||||
c = O.call(this, a.D.createTextNode(""), e);
|
||||
break;
|
||||
case (t === "<>" || !t):
|
||||
c = D.call(this, a.D.createDocumentFragment(), e);
|
||||
c = O.call(this, a.D.createDocumentFragment(), e);
|
||||
break;
|
||||
case !!T:
|
||||
c = D.call(this, a.D.createElementNS(T, t), e);
|
||||
c = O.call(this, a.D.createElementNS(T, t), e);
|
||||
break;
|
||||
case !c:
|
||||
c = D.call(this, a.D.createElement(t), e);
|
||||
c = O.call(this, a.D.createElement(t), e);
|
||||
}
|
||||
return Q(c), f || (f = c), n.forEach((d) => d(f)), o && R.pop(), o = 2, c;
|
||||
return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c;
|
||||
}
|
||||
function bt(t, e = t, n = void 0) {
|
||||
let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((f, d) => Reflect.set(f, d.name || r, d) && f, {}), c = q(o, r);
|
||||
@ -152,7 +152,7 @@ function bt(t, e = t, n = void 0) {
|
||||
function X(t, e, n) {
|
||||
n && n(t, e);
|
||||
try {
|
||||
t.replaceWith(D(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
|
||||
t.replaceWith(O(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
|
||||
} catch {
|
||||
t.replaceWith(e);
|
||||
}
|
||||
@ -162,7 +162,7 @@ k.mark = function(t, e = !1) {
|
||||
let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
|
||||
return e && (r.end = a.D.createComment("</dde:mark>")), r;
|
||||
};
|
||||
function vt(t) {
|
||||
function gt(t) {
|
||||
let e = this;
|
||||
return function(...r) {
|
||||
T = t;
|
||||
@ -171,7 +171,7 @@ function vt(t) {
|
||||
};
|
||||
}
|
||||
var P = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: U } = a;
|
||||
function D(t, ...e) {
|
||||
function O(t, ...e) {
|
||||
if (!e.length)
|
||||
return t;
|
||||
P.set(t, B(t, this));
|
||||
@ -225,7 +225,7 @@ function Y(t, e) {
|
||||
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
|
||||
), t;
|
||||
}
|
||||
function gt(t) {
|
||||
function vt(t) {
|
||||
return Array.from(t.children).forEach((e) => e.remove()), t;
|
||||
}
|
||||
function tt(t, e, n, r) {
|
||||
@ -350,7 +350,7 @@ function ot() {
|
||||
if (u && b(h).then(l), !t.has(h))
|
||||
continue;
|
||||
let m = t.get(h);
|
||||
m.length_c && (h.dispatchEvent(new Event(v)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(h), s = !0);
|
||||
m.length_c && (h.dispatchEvent(new Event(g)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(h), s = !0);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
@ -368,26 +368,26 @@ function ot() {
|
||||
}
|
||||
|
||||
// src/customElement.js
|
||||
function Ot(t, e, n, r = it) {
|
||||
R.push({
|
||||
function Dt(t, e, n, r = it) {
|
||||
S.push({
|
||||
scope: t,
|
||||
host: (...f) => f.length ? f.forEach((d) => d(t)) : t
|
||||
}), typeof r == "function" && (r = r.call(t, t));
|
||||
let o = t[x];
|
||||
o || ct(t);
|
||||
let c = n.call(t, r);
|
||||
return o || t.dispatchEvent(new Event(v)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, w.observe(e), { once: !0 }), R.pop(), e.append(c);
|
||||
return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, w.observe(e), { once: !0 }), S.pop(), e.append(c);
|
||||
}
|
||||
function ct(t) {
|
||||
return W(t.prototype, "connectedCallback", function(e, n, r) {
|
||||
e.apply(n, r), n.dispatchEvent(new Event(v));
|
||||
e.apply(n, r), n.dispatchEvent(new Event(g));
|
||||
}), W(t.prototype, "disconnectedCallback", function(e, n, r) {
|
||||
e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
|
||||
() => !n.isConnected && n.dispatchEvent(new Event(y))
|
||||
);
|
||||
}), W(t.prototype, "attributeChangedCallback", function(e, n, r) {
|
||||
let [o, , c] = r;
|
||||
n.dispatchEvent(new CustomEvent(O, {
|
||||
n.dispatchEvent(new CustomEvent(D, {
|
||||
detail: [o, c]
|
||||
})), e.apply(n, r);
|
||||
}), t.prototype[x] = !0, t;
|
||||
@ -408,61 +408,61 @@ function _t(t, e, n) {
|
||||
return o.dispatchEvent(f);
|
||||
};
|
||||
}
|
||||
function S(t, e, n) {
|
||||
function R(t, e, n) {
|
||||
return function(o) {
|
||||
return o.addEventListener(t, e, n), o;
|
||||
};
|
||||
}
|
||||
var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
S.connected = function(t, e) {
|
||||
R.connected = function(t, e) {
|
||||
return e = G(e), function(r) {
|
||||
return r.addEventListener(v, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(v)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r);
|
||||
return r.addEventListener(g, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r);
|
||||
};
|
||||
};
|
||||
S.disconnected = function(t, e) {
|
||||
R.disconnected = function(t, e) {
|
||||
return e = G(e), function(r) {
|
||||
return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r;
|
||||
};
|
||||
};
|
||||
var j = /* @__PURE__ */ new WeakMap();
|
||||
S.disconnectedAsAbort = function(t) {
|
||||
R.disconnectedAsAbort = function(t) {
|
||||
if (j.has(t))
|
||||
return j.get(t);
|
||||
let e = new AbortController();
|
||||
return j.set(t, e), t(S.disconnected(() => e.abort())), e;
|
||||
return j.set(t, e), t(R.disconnected(() => e.abort())), e;
|
||||
};
|
||||
var st = /* @__PURE__ */ new WeakSet();
|
||||
S.attributeChanged = function(t, e) {
|
||||
R.attributeChanged = function(t, e) {
|
||||
return typeof e != "object" && (e = {}), function(r) {
|
||||
if (r.addEventListener(O, t, e), r[x] || st.has(r) || !a.M)
|
||||
if (r.addEventListener(D, t, e), r[x] || st.has(r) || !a.M)
|
||||
return r;
|
||||
let o = new a.M(function(f) {
|
||||
for (let { attributeName: d, target: p } of f)
|
||||
p.dispatchEvent(
|
||||
new CustomEvent(O, { detail: [d, p.getAttribute(d)] })
|
||||
new CustomEvent(D, { detail: [d, p.getAttribute(d)] })
|
||||
);
|
||||
});
|
||||
return N(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
|
||||
};
|
||||
};
|
||||
export {
|
||||
D as assign,
|
||||
O as assign,
|
||||
z as assignAttribute,
|
||||
Q as chainableAppend,
|
||||
Y as classListDeclarative,
|
||||
k as createElement,
|
||||
vt as createElementNS,
|
||||
Ot as customElementRender,
|
||||
gt as createElementNS,
|
||||
Dt as customElementRender,
|
||||
ct as customElementWithDDE,
|
||||
_t as dispatchEvent,
|
||||
k as el,
|
||||
vt as elNS,
|
||||
gt as elNS,
|
||||
tt as elementAttribute,
|
||||
gt as empty,
|
||||
vt as empty,
|
||||
ct as lifecyclesToEvents,
|
||||
it as observedAttributes,
|
||||
S as on,
|
||||
R as on,
|
||||
V as registerReactivity,
|
||||
R as scope,
|
||||
S as scope,
|
||||
bt as simulateSlots
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user