mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-01 19:55:53 +02:00
Compare commits
3 Commits
513c32eb37
...
2105776d2a
| Author | SHA1 | Date | |
|---|---|---|---|
2105776d2a
|
|||
|
4c2edcf58c
|
|||
|
bcddc75f56
|
238
dist/dde-with-signals.js
vendored
238
dist/dde-with-signals.js
vendored
@ -36,16 +36,16 @@ function q(t, e) {
|
||||
function F(t, e) {
|
||||
let { observedAttributes: n = [] } = t.constructor;
|
||||
return n.reduce(function(r, o) {
|
||||
return r[pt(o)] = e(t, o), r;
|
||||
return r[dt(o)] = e(t, o), r;
|
||||
}, {});
|
||||
}
|
||||
function pt(t) {
|
||||
function dt(t) {
|
||||
return t.replace(/-./g, (e) => e[1].toUpperCase());
|
||||
}
|
||||
|
||||
// src/dom-common.js
|
||||
var d = {
|
||||
setDeleteAttr: lt,
|
||||
setDeleteAttr: pt,
|
||||
ssr: "",
|
||||
D: globalThis.document,
|
||||
F: globalThis.DocumentFragment,
|
||||
@ -53,7 +53,7 @@ var d = {
|
||||
S: globalThis.SVGElement,
|
||||
M: globalThis.MutationObserver
|
||||
};
|
||||
function lt(t, e, n) {
|
||||
function pt(t, e, 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);
|
||||
@ -70,7 +70,7 @@ var A = [{
|
||||
},
|
||||
host: (t) => t ? t(d.D.body) : d.D.body,
|
||||
prevent: !0
|
||||
}], m = {
|
||||
}], x = {
|
||||
get current() {
|
||||
return A[A.length - 1];
|
||||
},
|
||||
@ -98,7 +98,7 @@ var A = [{
|
||||
function Y(...t) {
|
||||
return this.appendOriginal(...t), this;
|
||||
}
|
||||
function ht(t) {
|
||||
function lt(t) {
|
||||
return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;
|
||||
}
|
||||
var $;
|
||||
@ -106,15 +106,17 @@ function P(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: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((h) => h(i)), void 0) : i }), c = t(e || void 0);
|
||||
let a = c instanceof d.F;
|
||||
o = 1;
|
||||
let a = (...p) => p.length ? (o === 1 ? n.unshift(...p) : p.forEach((m) => m(i)), void 0) : i;
|
||||
x.push({ scope: t, host: a }), c = t(e || void 0);
|
||||
let h = c instanceof d.F;
|
||||
if (c.nodeName === "#comment") break;
|
||||
let l = P.mark({
|
||||
let v = P.mark({
|
||||
type: "component",
|
||||
name: t.name,
|
||||
host: a ? "this" : "parentElement"
|
||||
host: h ? "this" : "parentElement"
|
||||
});
|
||||
c.prepend(l), a && (i = l);
|
||||
c.prepend(v), h && (i = v);
|
||||
break;
|
||||
}
|
||||
case t === "#text":
|
||||
@ -129,23 +131,28 @@ function P(t, e, ...n) {
|
||||
case !c:
|
||||
c = j.call(this, d.D.createElement(t), e);
|
||||
}
|
||||
return ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;
|
||||
return lt(c), i || (i = c), n.forEach((a) => a(i)), o && x.pop(), o = 2, c;
|
||||
}
|
||||
P.mark = function(t, e = !1) {
|
||||
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
|
||||
let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
|
||||
return e && (r.end = d.D.createComment("</dde:mark>")), r;
|
||||
};
|
||||
function Wt(t, e, n) {
|
||||
typeof e != "object" && (n = e, e = t);
|
||||
let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);
|
||||
if (t.append = new Proxy(t.append, {
|
||||
apply(i, a, l) {
|
||||
if (l[0] === e) return i.apply(t, l);
|
||||
if (!l.length) return t;
|
||||
apply(i, a, h) {
|
||||
if (h[0] === e) return i.apply(t, h);
|
||||
if (!h.length) return t;
|
||||
let v = d.D.createDocumentFragment();
|
||||
for (let h of l) {
|
||||
if (!h || !h.slot) {
|
||||
c && v.append(h);
|
||||
for (let p of h) {
|
||||
if (!p || !p.slot) {
|
||||
c && v.append(p);
|
||||
continue;
|
||||
}
|
||||
let x = h.slot, w = o[x];
|
||||
vt(h, "remove", "slot"), w && (bt(w, h, n), Reflect.deleteProperty(o, x));
|
||||
let m = p.slot, y = o[m];
|
||||
vt(p, "remove", "slot"), y && (bt(y, p, n), Reflect.deleteProperty(o, m));
|
||||
}
|
||||
return c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;
|
||||
}
|
||||
@ -155,19 +162,20 @@ function Wt(t, e, n) {
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function ht(...t) {
|
||||
return t.filter(Boolean).join(" ");
|
||||
}
|
||||
function bt(t, e, n) {
|
||||
n && n(t, e);
|
||||
try {
|
||||
t.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
|
||||
t.replaceWith(j(e, {
|
||||
className: ht(e.className, t.className),
|
||||
dataset: { ...t.dataset }
|
||||
}));
|
||||
} catch {
|
||||
t.replaceWith(e);
|
||||
}
|
||||
}
|
||||
P.mark = function(t, e = !1) {
|
||||
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
|
||||
let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
|
||||
return e && (r.end = d.D.createComment("</dde:mark>")), r;
|
||||
};
|
||||
function qt(t) {
|
||||
let e = this;
|
||||
return function(...r) {
|
||||
@ -190,7 +198,7 @@ function nt(t, e, n) {
|
||||
t,
|
||||
e,
|
||||
n,
|
||||
(a, l) => nt.call(c, t, a, l)
|
||||
(a, h) => nt.call(c, t, a, h)
|
||||
);
|
||||
let [i] = e;
|
||||
if (i === "=") return r(e.slice(1), n);
|
||||
@ -208,7 +216,7 @@ function nt(t, e, n) {
|
||||
case "dataset":
|
||||
return I(o, n, et.bind(null, t[e]));
|
||||
case "ariaset":
|
||||
return I(o, n, (a, l) => r("aria-" + a, l));
|
||||
return I(o, n, (a, h) => r("aria-" + a, h));
|
||||
case "classList":
|
||||
return gt.call(c, t, n);
|
||||
}
|
||||
@ -227,9 +235,6 @@ function gt(t, e) {
|
||||
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
|
||||
), t;
|
||||
}
|
||||
function Ft(t) {
|
||||
return Array.from(t.children).forEach((e) => e.remove()), t;
|
||||
}
|
||||
function vt(t, e, n, r) {
|
||||
return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
|
||||
}
|
||||
@ -249,14 +254,11 @@ function I(t, e, n) {
|
||||
o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));
|
||||
});
|
||||
}
|
||||
function ct(t) {
|
||||
return Array.isArray(t) ? t.filter(Boolean).join(" ") : t;
|
||||
}
|
||||
function mt(t, e, n, r) {
|
||||
return t[(S(r) ? "remove" : "set") + e](n, ct(r));
|
||||
return t[(S(r) ? "remove" : "set") + e](n, r);
|
||||
}
|
||||
function xt(t, e, n, r, o = null) {
|
||||
return t[(S(r) ? "remove" : "set") + e + "NS"](o, n, ct(r));
|
||||
return t[(S(r) ? "remove" : "set") + e + "NS"](o, n, r);
|
||||
}
|
||||
function et(t, e, n) {
|
||||
if (Reflect.set(t, e, n), !!S(n))
|
||||
@ -264,21 +266,21 @@ function et(t, e, n) {
|
||||
}
|
||||
|
||||
// src/events-observer.js
|
||||
var D = d.M ? yt() : new Proxy({}, {
|
||||
var D = d.M ? wt() : new Proxy({}, {
|
||||
get() {
|
||||
return () => {
|
||||
};
|
||||
}
|
||||
});
|
||||
function yt() {
|
||||
function wt() {
|
||||
let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
|
||||
for (let f of u)
|
||||
if (f.type === "childList") {
|
||||
if (h(f.addedNodes, !0)) {
|
||||
if (p(f.addedNodes, !0)) {
|
||||
s();
|
||||
continue;
|
||||
}
|
||||
x(f.removedNodes, !0) && s();
|
||||
m(f.removedNodes, !0) && s();
|
||||
}
|
||||
}, r = new d.M(n(a));
|
||||
return {
|
||||
@ -327,35 +329,35 @@ function yt() {
|
||||
function a() {
|
||||
!e || t.size || (e = !1, r.disconnect());
|
||||
}
|
||||
function l() {
|
||||
function h() {
|
||||
return new Promise(function(s) {
|
||||
(requestIdleCallback || requestAnimationFrame)(s);
|
||||
});
|
||||
}
|
||||
async function v(s) {
|
||||
t.size > 30 && await l();
|
||||
t.size > 30 && await h();
|
||||
let u = [];
|
||||
if (!(s instanceof Node)) return u;
|
||||
for (let f of t.keys())
|
||||
f === s || !(f instanceof Node) || s.contains(f) && u.push(f);
|
||||
return u;
|
||||
}
|
||||
function h(s, u) {
|
||||
function p(s, u) {
|
||||
let f = !1;
|
||||
for (let b of s) {
|
||||
if (u && v(b).then(h), !t.has(b)) continue;
|
||||
if (u && v(b).then(p), !t.has(b)) continue;
|
||||
let N = t.get(b);
|
||||
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(s, u) {
|
||||
function m(s, u) {
|
||||
let f = !1;
|
||||
for (let b of s)
|
||||
u && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0);
|
||||
u && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);
|
||||
return f;
|
||||
}
|
||||
function w(s) {
|
||||
function y(s) {
|
||||
return () => {
|
||||
s.isConnected || (s.dispatchEvent(new Event(C)), t.delete(s));
|
||||
};
|
||||
@ -363,17 +365,17 @@ function yt() {
|
||||
}
|
||||
|
||||
// src/customElement.js
|
||||
function Zt(t, e, n, r = _t) {
|
||||
m.push({
|
||||
function Jt(t, e, n, r = _t) {
|
||||
x.push({
|
||||
scope: t,
|
||||
host: (...i) => i.length ? i.forEach((a) => a(t)) : t
|
||||
}), typeof r == "function" && (r = r.call(t, t));
|
||||
let o = t[O];
|
||||
o || wt(t);
|
||||
o || yt(t);
|
||||
let c = n.call(t, r);
|
||||
return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), m.pop(), e.append(c);
|
||||
return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), x.pop(), e.append(c);
|
||||
}
|
||||
function wt(t) {
|
||||
function yt(t) {
|
||||
return J(t.prototype, "connectedCallback", function(e, n, r) {
|
||||
e.apply(n, r), n.dispatchEvent(new Event(_));
|
||||
}), J(t.prototype, "disconnectedCallback", function(e, n, r) {
|
||||
@ -396,43 +398,43 @@ function _t(t) {
|
||||
}
|
||||
|
||||
// src/events.js
|
||||
function Qt(t, e, n) {
|
||||
function Kt(t, e, n) {
|
||||
return e || (e = {}), function(o, ...c) {
|
||||
n && (c.unshift(o), o = typeof n == "function" ? n() : n);
|
||||
let i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
|
||||
return o.dispatchEvent(i);
|
||||
};
|
||||
}
|
||||
function y(t, e, n) {
|
||||
function w(t, e, n) {
|
||||
return function(o) {
|
||||
return o.addEventListener(t, e, n), o;
|
||||
};
|
||||
}
|
||||
var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
y.connected = function(t, e) {
|
||||
return e = it(e), function(r) {
|
||||
var ct = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
w.connected = function(t, e) {
|
||||
return e = ct(e), function(r) {
|
||||
return r.addEventListener(_, t, e), r[O] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);
|
||||
};
|
||||
};
|
||||
y.disconnected = function(t, e) {
|
||||
return e = it(e), function(r) {
|
||||
w.disconnected = function(t, e) {
|
||||
return e = ct(e), function(r) {
|
||||
return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;
|
||||
};
|
||||
};
|
||||
var Z = /* @__PURE__ */ new WeakMap();
|
||||
y.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(y.disconnected(() => e.abort())), e;
|
||||
return Z.set(t, e), t(w.disconnected(() => e.abort())), e;
|
||||
};
|
||||
var At = /* @__PURE__ */ new WeakSet();
|
||||
y.attributeChanged = function(t, e) {
|
||||
w.attributeChanged = function(t, e) {
|
||||
return typeof e != "object" && (e = {}), function(r) {
|
||||
if (r.addEventListener(M, t, e), r[O] || At.has(r) || !d.M) return r;
|
||||
let o = new d.M(function(i) {
|
||||
for (let { attributeName: a, target: l } of i)
|
||||
l.dispatchEvent(
|
||||
new CustomEvent(M, { detail: [a, l.getAttribute(a)] })
|
||||
for (let { attributeName: a, target: h } of i)
|
||||
h.dispatchEvent(
|
||||
new CustomEvent(M, { detail: [a, h.getAttribute(a)] })
|
||||
);
|
||||
});
|
||||
return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
|
||||
@ -440,10 +442,10 @@ y.attributeChanged = function(t, e) {
|
||||
};
|
||||
|
||||
// src/signals-lib.js
|
||||
var p = "__dde_signal";
|
||||
var l = "__dde_signal";
|
||||
function z(t) {
|
||||
try {
|
||||
return T(t, p);
|
||||
return T(t, l);
|
||||
} catch {
|
||||
return !1;
|
||||
}
|
||||
@ -451,19 +453,19 @@ function z(t) {
|
||||
var H = [], g = /* @__PURE__ */ new WeakMap();
|
||||
function E(t, e) {
|
||||
if (typeof t != "function")
|
||||
return st(!1, t, e);
|
||||
return it(!1, t, e);
|
||||
if (z(t)) return t;
|
||||
let n = st(!0), r = function() {
|
||||
let n = it(!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;
|
||||
if (g.set(r, /* @__PURE__ */ new Set([o])), H.push(r), at(n, t()), H.pop(), !c.length) return;
|
||||
let i = g.get(r);
|
||||
for (let a of c)
|
||||
i.has(a) || L(a, r);
|
||||
};
|
||||
return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
|
||||
return g.set(n[l], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
|
||||
}
|
||||
E.action = function(t, e, ...n) {
|
||||
let r = t[p], { actions: o } = r;
|
||||
let r = t[l], { actions: o } = r;
|
||||
if (!o || !(e in o))
|
||||
throw new Error(`'${t}' has no action with name '${e}'!`);
|
||||
if (o[e].apply(r, n), r.skip) return delete r.skip;
|
||||
@ -482,8 +484,8 @@ E.symbols = {
|
||||
};
|
||||
E.clear = function(...t) {
|
||||
for (let n of t) {
|
||||
let r = n[p];
|
||||
r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]);
|
||||
let r = n[l];
|
||||
r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[l]);
|
||||
}
|
||||
function e(n, r) {
|
||||
r.listeners.forEach((o) => {
|
||||
@ -497,24 +499,24 @@ var R = "__dde_reactive";
|
||||
E.el = function(t, e) {
|
||||
let n = P.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment();
|
||||
o.append(n, r);
|
||||
let { current: c } = m, i = {}, a = (l) => {
|
||||
let { current: c } = x, i = {}, a = (h) => {
|
||||
if (!n.parentNode || !r.parentNode)
|
||||
return L(t, a);
|
||||
let v = i;
|
||||
i = {}, m.push(c);
|
||||
let h = e(l, function(u, f) {
|
||||
i = {}, x.push(c);
|
||||
let p = e(h, function(u, f) {
|
||||
let b;
|
||||
return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;
|
||||
});
|
||||
m.pop(), Array.isArray(h) || (h = [h]);
|
||||
let x = document.createComment("");
|
||||
h.push(x), n.after(...h);
|
||||
let w;
|
||||
for (; (w = x.nextSibling) && w !== r; )
|
||||
w.remove();
|
||||
x.remove(), n.isConnected && St(c.host());
|
||||
x.pop(), Array.isArray(p) || (p = [p]);
|
||||
let m = document.createComment("");
|
||||
p.push(m), n.after(...p);
|
||||
let y;
|
||||
for (; (y = m.nextSibling) && y !== r; )
|
||||
y.remove();
|
||||
m.remove(), n.isConnected && St(c.host());
|
||||
};
|
||||
return Q(t, a), ft(t, a, n, e), a(t()), o;
|
||||
return Q(t, a), ut(t, a, n, e), a(t()), o;
|
||||
};
|
||||
function St(t) {
|
||||
!t || !t[R] || (requestIdleCallback || setTimeout)(function() {
|
||||
@ -528,25 +530,25 @@ var Ot = {
|
||||
};
|
||||
function Ct(t) {
|
||||
return function(e, n) {
|
||||
let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = at(r, e.getAttribute(n), Ot);
|
||||
let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = ft(r, e.getAttribute(n), Ot);
|
||||
return t[n] = o, o;
|
||||
};
|
||||
}
|
||||
var G = "__dde_attributes";
|
||||
E.observedAttributes = function(t) {
|
||||
let e = t[G] = {}, n = F(t, Ct(e));
|
||||
return y.attributeChanged(function({ detail: o }) {
|
||||
return w.attributeChanged(function({ detail: o }) {
|
||||
/*! This maps attributes to signals (`S.observedAttributes`).
|
||||
* Investigate `__dde_attributes` key of the element.*/
|
||||
let [c, i] = o, a = this[G][c];
|
||||
if (a) return E.action(a, "_set", i);
|
||||
})(t), y.disconnected(function() {
|
||||
})(t), w.disconnected(function() {
|
||||
/*! This removes all signals mapped to attributes (`S.observedAttributes`).
|
||||
* Investigate `__dde_attributes` key of the element.*/
|
||||
E.clear(...Object.values(this[G]));
|
||||
})(t), n;
|
||||
};
|
||||
var ut = {
|
||||
var st = {
|
||||
isSignal: z,
|
||||
processReactiveAttribute(t, e, n, r) {
|
||||
if (!z(n)) return n;
|
||||
@ -555,26 +557,26 @@ var ut = {
|
||||
return L(n, o);
|
||||
r(e, c);
|
||||
};
|
||||
return Q(n, o), ft(n, o, t, e), n();
|
||||
return Q(n, o), ut(n, o, t, e), n();
|
||||
}
|
||||
};
|
||||
function ft(t, e, ...n) {
|
||||
let { current: r } = m;
|
||||
function ut(t, e, ...n) {
|
||||
let { current: r } = x;
|
||||
r.prevent || r.host(function(o) {
|
||||
o[R] || (o[R] = [], y.disconnected(
|
||||
o[R] || (o[R] = [], w.disconnected(
|
||||
() => (
|
||||
/*!
|
||||
* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
|
||||
* You can investigate the `__dde_reactive` key of the element.
|
||||
* */
|
||||
o[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o))
|
||||
o[R].forEach(([[c, i]]) => L(c, i, c[l] && c[l].host && c[l].host() === o))
|
||||
)
|
||||
)(o)), o[R].push([[t, e], ...n]);
|
||||
});
|
||||
}
|
||||
function st(t, e, n) {
|
||||
let r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r);
|
||||
return at(r, e, n, t);
|
||||
function it(t, e, n) {
|
||||
let r = t ? () => K(r) : (...o) => o.length ? at(r, ...o) : K(r);
|
||||
return ft(r, e, n, t);
|
||||
}
|
||||
var Dt = Object.assign(/* @__PURE__ */ Object.create(null), {
|
||||
stopPropagation() {
|
||||
@ -588,13 +590,13 @@ var Dt = Object.assign(/* @__PURE__ */ Object.create(null), {
|
||||
this.stack = n.find((o) => !o.includes(r));
|
||||
}
|
||||
};
|
||||
function at(t, e, n, r = !1) {
|
||||
function ft(t, e, n, r = !1) {
|
||||
let o = [];
|
||||
X(n) !== "[object Object]" && (n = {});
|
||||
let { onclear: c } = E.symbols;
|
||||
n[c] && (o.push(n[c]), delete n[c]);
|
||||
let { host: i } = m;
|
||||
return Reflect.defineProperty(t, p, {
|
||||
let { host: i } = x;
|
||||
return Reflect.defineProperty(t, l, {
|
||||
value: {
|
||||
value: e,
|
||||
actions: n,
|
||||
@ -607,28 +609,28 @@ function at(t, e, n, r = !1) {
|
||||
enumerable: !1,
|
||||
writable: !1,
|
||||
configurable: !0
|
||||
}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t;
|
||||
}), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], Dt), t;
|
||||
}
|
||||
function Rt() {
|
||||
return H[H.length - 1];
|
||||
}
|
||||
function K(t) {
|
||||
if (!t[p]) return;
|
||||
let { value: e, listeners: n } = t[p], r = Rt();
|
||||
if (!t[l]) return;
|
||||
let { value: e, listeners: n } = t[l], r = Rt();
|
||||
return r && n.add(r), g.has(r) && g.get(r).add(t), e;
|
||||
}
|
||||
function dt(t, e, n) {
|
||||
if (!t[p]) return;
|
||||
let r = t[p];
|
||||
function at(t, e, n) {
|
||||
if (!t[l]) return;
|
||||
let r = t[l];
|
||||
if (!(!n && r.value === e))
|
||||
return r.value = e, r.listeners.forEach((o) => o(e)), e;
|
||||
}
|
||||
function Q(t, e) {
|
||||
if (t[p])
|
||||
return t[p].listeners.add(e);
|
||||
if (t[l])
|
||||
return t[l].listeners.add(e);
|
||||
}
|
||||
function L(t, e, n) {
|
||||
let r = t[p];
|
||||
let r = t[l];
|
||||
if (!r) return;
|
||||
let o = r.listeners.delete(e);
|
||||
if (n && !r.listeners.size) {
|
||||
@ -641,29 +643,29 @@ function L(t, e, n) {
|
||||
}
|
||||
|
||||
// signals.js
|
||||
B(ut);
|
||||
B(st);
|
||||
|
||||
globalThis.dde= {
|
||||
S: E,
|
||||
assign: j,
|
||||
assignAttribute: nt,
|
||||
chainableAppend: ht,
|
||||
chainableAppend: lt,
|
||||
classListDeclarative: gt,
|
||||
cn: ht,
|
||||
createElement: P,
|
||||
createElementNS: qt,
|
||||
customElementRender: Zt,
|
||||
customElementWithDDE: wt,
|
||||
dispatchEvent: Qt,
|
||||
customElementRender: Jt,
|
||||
customElementWithDDE: yt,
|
||||
dispatchEvent: Kt,
|
||||
el: P,
|
||||
elNS: qt,
|
||||
elementAttribute: vt,
|
||||
empty: Ft,
|
||||
isSignal: z,
|
||||
lifecyclesToEvents: wt,
|
||||
lifecyclesToEvents: yt,
|
||||
observedAttributes: _t,
|
||||
on: y,
|
||||
on: w,
|
||||
registerReactivity: B,
|
||||
scope: m,
|
||||
scope: x,
|
||||
signal: E,
|
||||
simulateSlots: Wt
|
||||
};
|
||||
|
||||
134
dist/dde.js
vendored
134
dist/dde.js
vendored
@ -1,7 +1,7 @@
|
||||
//deka-dom-el library is available via global namespace `dde`
|
||||
(()=> {
|
||||
// src/signals-common.js
|
||||
var C = {
|
||||
var m = {
|
||||
isSignal(t) {
|
||||
return !1;
|
||||
},
|
||||
@ -9,16 +9,16 @@ var C = {
|
||||
return n;
|
||||
}
|
||||
};
|
||||
function V(t, e = !0) {
|
||||
return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t);
|
||||
function G(t, e = !0) {
|
||||
return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t);
|
||||
}
|
||||
function L(t) {
|
||||
return C.isPrototypeOf(t) && t !== C ? t : C;
|
||||
return m.isPrototypeOf(t) && t !== m ? t : m;
|
||||
}
|
||||
|
||||
// src/helpers.js
|
||||
var q = (...t) => Object.prototype.hasOwnProperty.call(...t);
|
||||
function E(t) {
|
||||
function x(t) {
|
||||
return typeof t > "u";
|
||||
}
|
||||
function N(t, e) {
|
||||
@ -32,16 +32,16 @@ function N(t, e) {
|
||||
function F(t, e) {
|
||||
let { observedAttributes: n = [] } = t.constructor;
|
||||
return n.reduce(function(r, o) {
|
||||
return r[J(o)] = e(t, o), r;
|
||||
return r[V(o)] = e(t, o), r;
|
||||
}, {});
|
||||
}
|
||||
function J(t) {
|
||||
function V(t) {
|
||||
return t.replace(/-./g, (e) => e[1].toUpperCase());
|
||||
}
|
||||
|
||||
// src/dom-common.js
|
||||
var a = {
|
||||
setDeleteAttr: K,
|
||||
setDeleteAttr: J,
|
||||
ssr: "",
|
||||
D: globalThis.document,
|
||||
F: globalThis.DocumentFragment,
|
||||
@ -49,15 +49,15 @@ var a = {
|
||||
S: globalThis.SVGElement,
|
||||
M: globalThis.MutationObserver
|
||||
};
|
||||
function K(t, e, n) {
|
||||
if (Reflect.set(t, e, n), !!E(n)) {
|
||||
function J(t, e, n) {
|
||||
if (Reflect.set(t, e, n), !!x(n)) {
|
||||
if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined")
|
||||
return t.removeAttribute(e);
|
||||
if (Reflect.get(t, e) === "undefined")
|
||||
return Reflect.set(t, e, "");
|
||||
}
|
||||
}
|
||||
var x = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged";
|
||||
var w = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged";
|
||||
|
||||
// src/dom.js
|
||||
var v = [{
|
||||
@ -94,7 +94,7 @@ var v = [{
|
||||
function $(...t) {
|
||||
return this.appendOriginal(...t), this;
|
||||
}
|
||||
function Q(t) {
|
||||
function K(t) {
|
||||
return t.append === $ || (t.appendOriginal = t.append, t.append = $), t;
|
||||
}
|
||||
var T;
|
||||
@ -102,15 +102,17 @@ function j(t, e, ...n) {
|
||||
let r = L(this), o = 0, c, f;
|
||||
switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
|
||||
case typeof t == "function": {
|
||||
o = 1, S.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((h) => h(f)), void 0) : f }), c = t(e || void 0);
|
||||
let d = c instanceof a.F;
|
||||
o = 1;
|
||||
let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(f)), void 0) : f;
|
||||
S.push({ scope: t, host: d }), c = t(e || void 0);
|
||||
let p = c instanceof a.F;
|
||||
if (c.nodeName === "#comment") break;
|
||||
let p = j.mark({
|
||||
let b = j.mark({
|
||||
type: "component",
|
||||
name: t.name,
|
||||
host: d ? "this" : "parentElement"
|
||||
host: p ? "this" : "parentElement"
|
||||
});
|
||||
c.prepend(p), d && (f = p);
|
||||
c.prepend(b), p && (f = b);
|
||||
break;
|
||||
}
|
||||
case t === "#text":
|
||||
@ -125,8 +127,13 @@ function j(t, e, ...n) {
|
||||
case !c:
|
||||
c = O.call(this, a.D.createElement(t), e);
|
||||
}
|
||||
return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c;
|
||||
return K(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c;
|
||||
}
|
||||
j.mark = function(t, e = !1) {
|
||||
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
|
||||
let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
|
||||
return e && (r.end = a.D.createComment("</dde:mark>")), r;
|
||||
};
|
||||
function bt(t, e, n) {
|
||||
typeof e != "object" && (n = e, e = t);
|
||||
let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((f, d) => Reflect.set(f, d.name || r, d) && f, {}), c = q(o, r);
|
||||
@ -135,13 +142,13 @@ function bt(t, e, n) {
|
||||
if (p[0] === e) return f.apply(t, p);
|
||||
if (!p.length) return t;
|
||||
let b = a.D.createDocumentFragment();
|
||||
for (let h of p) {
|
||||
if (!h || !h.slot) {
|
||||
c && b.append(h);
|
||||
for (let l of p) {
|
||||
if (!l || !l.slot) {
|
||||
c && b.append(l);
|
||||
continue;
|
||||
}
|
||||
let A = h.slot, _ = o[A];
|
||||
tt(h, "remove", "slot"), _ && (X(_, h, n), Reflect.deleteProperty(o, A));
|
||||
let E = l.slot, _ = o[E];
|
||||
tt(l, "remove", "slot"), _ && (X(_, l, n), Reflect.deleteProperty(o, E));
|
||||
}
|
||||
return c && (o[r].replaceWith(b), Reflect.deleteProperty(o, r)), t.append = f, t;
|
||||
}
|
||||
@ -151,19 +158,20 @@ function bt(t, e, n) {
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function Q(...t) {
|
||||
return t.filter(Boolean).join(" ");
|
||||
}
|
||||
function X(t, e, n) {
|
||||
n && n(t, e);
|
||||
try {
|
||||
t.replaceWith(O(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
|
||||
t.replaceWith(O(e, {
|
||||
className: Q(e.className, t.className),
|
||||
dataset: { ...t.dataset }
|
||||
}));
|
||||
} catch {
|
||||
t.replaceWith(e);
|
||||
}
|
||||
}
|
||||
j.mark = function(t, e = !1) {
|
||||
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
|
||||
let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
|
||||
return e && (r.end = a.D.createComment("</dde:mark>")), r;
|
||||
};
|
||||
function gt(t) {
|
||||
let e = this;
|
||||
return function(...r) {
|
||||
@ -223,16 +231,13 @@ function Y(t, e) {
|
||||
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
|
||||
), t;
|
||||
}
|
||||
function vt(t) {
|
||||
return Array.from(t.children).forEach((e) => e.remove()), t;
|
||||
}
|
||||
function tt(t, e, n, r) {
|
||||
return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
|
||||
}
|
||||
function et(t, e) {
|
||||
if (!(e in t)) return !1;
|
||||
let n = I(t, e);
|
||||
return !E(n.set);
|
||||
return !x(n.set);
|
||||
}
|
||||
function I(t, e) {
|
||||
if (t = Object.getPrototypeOf(t), !t) return {};
|
||||
@ -245,22 +250,19 @@ function M(t, e, n) {
|
||||
o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));
|
||||
});
|
||||
}
|
||||
function Z(t) {
|
||||
return Array.isArray(t) ? t.filter(Boolean).join(" ") : t;
|
||||
}
|
||||
function nt(t, e, n, r) {
|
||||
return t[(E(r) ? "remove" : "set") + e](n, Z(r));
|
||||
return t[(x(r) ? "remove" : "set") + e](n, r);
|
||||
}
|
||||
function rt(t, e, n, r, o = null) {
|
||||
return t[(E(r) ? "remove" : "set") + e + "NS"](o, n, Z(r));
|
||||
return t[(x(r) ? "remove" : "set") + e + "NS"](o, n, r);
|
||||
}
|
||||
function H(t, e, n) {
|
||||
if (Reflect.set(t, e, n), !!E(n))
|
||||
if (Reflect.set(t, e, n), !!x(n))
|
||||
return Reflect.deleteProperty(t, e);
|
||||
}
|
||||
|
||||
// src/events-observer.js
|
||||
var w = a.M ? ot() : new Proxy({}, {
|
||||
var A = a.M ? ot() : new Proxy({}, {
|
||||
get() {
|
||||
return () => {
|
||||
};
|
||||
@ -270,11 +272,11 @@ function ot() {
|
||||
let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) {
|
||||
for (let s of u)
|
||||
if (s.type === "childList") {
|
||||
if (h(s.addedNodes, !0)) {
|
||||
if (l(s.addedNodes, !0)) {
|
||||
i();
|
||||
continue;
|
||||
}
|
||||
A(s.removedNodes, !0) && i();
|
||||
E(s.removedNodes, !0) && i();
|
||||
}
|
||||
}, r = new a.M(n(d));
|
||||
return {
|
||||
@ -336,19 +338,19 @@ function ot() {
|
||||
s === i || !(s instanceof Node) || i.contains(s) && u.push(s);
|
||||
return u;
|
||||
}
|
||||
function h(i, u) {
|
||||
function l(i, u) {
|
||||
let s = !1;
|
||||
for (let l of i) {
|
||||
if (u && b(l).then(h), !t.has(l)) continue;
|
||||
let m = t.get(l);
|
||||
m.length_c && (l.dispatchEvent(new Event(g)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(l), s = !0);
|
||||
for (let h of i) {
|
||||
if (u && b(h).then(l), !t.has(h)) continue;
|
||||
let C = t.get(h);
|
||||
C.length_c && (h.dispatchEvent(new Event(g)), C.connected = /* @__PURE__ */ new WeakSet(), C.length_c = 0, C.length_d || t.delete(h), s = !0);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
function A(i, u) {
|
||||
function E(i, u) {
|
||||
let s = !1;
|
||||
for (let l of i)
|
||||
u && b(l).then(A), !(!t.has(l) || !t.get(l).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(l)), s = !0);
|
||||
for (let h of i)
|
||||
u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0);
|
||||
return s;
|
||||
}
|
||||
function _(i) {
|
||||
@ -359,15 +361,15 @@ function ot() {
|
||||
}
|
||||
|
||||
// src/customElement.js
|
||||
function Dt(t, e, n, r = it) {
|
||||
function mt(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];
|
||||
let o = t[w];
|
||||
o || ct(t);
|
||||
let c = n.call(t, r);
|
||||
return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, w.observe(e), { once: !0 }), S.pop(), e.append(c);
|
||||
return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, A.observe(e), { once: !0 }), S.pop(), e.append(c);
|
||||
}
|
||||
function ct(t) {
|
||||
return k(t.prototype, "connectedCallback", function(e, n, r) {
|
||||
@ -381,7 +383,7 @@ function ct(t) {
|
||||
n.dispatchEvent(new CustomEvent(D, {
|
||||
detail: [o, c]
|
||||
})), e.apply(n, r);
|
||||
}), t.prototype[x] = !0, t;
|
||||
}), t.prototype[w] = !0, t;
|
||||
}
|
||||
function k(t, e, n) {
|
||||
t[e] = new Proxy(t[e] || (() => {
|
||||
@ -392,7 +394,7 @@ function it(t) {
|
||||
}
|
||||
|
||||
// src/events.js
|
||||
function _t(t, e, n) {
|
||||
function Rt(t, e, n) {
|
||||
return e || (e = {}), function(o, ...c) {
|
||||
n && (c.unshift(o), o = typeof n == "function" ? n() : n);
|
||||
let f = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
|
||||
@ -404,15 +406,15 @@ function R(t, e, n) {
|
||||
return o.addEventListener(t, e, n), o;
|
||||
};
|
||||
}
|
||||
var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
var Z = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
R.connected = function(t, e) {
|
||||
return e = G(e), function(r) {
|
||||
return r.addEventListener(g, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r);
|
||||
return e = Z(e), function(r) {
|
||||
return r.addEventListener(g, t, e), r[w] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.onConnected(r, t), r);
|
||||
};
|
||||
};
|
||||
R.disconnected = function(t, e) {
|
||||
return e = G(e), function(r) {
|
||||
return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r;
|
||||
return e = Z(e), function(r) {
|
||||
return r.addEventListener(y, t, e), r[w] || N(e.signal, () => A.offDisconnected(r, t)) && A.onDisconnected(r, t), r;
|
||||
};
|
||||
};
|
||||
var W = /* @__PURE__ */ new WeakMap();
|
||||
@ -424,7 +426,7 @@ R.disconnectedAsAbort = function(t) {
|
||||
var st = /* @__PURE__ */ new WeakSet();
|
||||
R.attributeChanged = function(t, e) {
|
||||
return typeof e != "object" && (e = {}), function(r) {
|
||||
if (r.addEventListener(D, t, e), r[x] || st.has(r) || !a.M) return r;
|
||||
if (r.addEventListener(D, t, e), r[w] || st.has(r) || !a.M) return r;
|
||||
let o = new a.M(function(f) {
|
||||
for (let { attributeName: d, target: p } of f)
|
||||
p.dispatchEvent(
|
||||
@ -438,21 +440,21 @@ R.attributeChanged = function(t, e) {
|
||||
globalThis.dde= {
|
||||
assign: O,
|
||||
assignAttribute: z,
|
||||
chainableAppend: Q,
|
||||
chainableAppend: K,
|
||||
classListDeclarative: Y,
|
||||
cn: Q,
|
||||
createElement: j,
|
||||
createElementNS: gt,
|
||||
customElementRender: Dt,
|
||||
customElementRender: mt,
|
||||
customElementWithDDE: ct,
|
||||
dispatchEvent: _t,
|
||||
dispatchEvent: Rt,
|
||||
el: j,
|
||||
elNS: gt,
|
||||
elementAttribute: tt,
|
||||
empty: vt,
|
||||
lifecyclesToEvents: ct,
|
||||
observedAttributes: it,
|
||||
on: R,
|
||||
registerReactivity: V,
|
||||
registerReactivity: G,
|
||||
scope: S,
|
||||
simulateSlots: bt
|
||||
};
|
||||
|
||||
136
dist/esm-with-signals.d.ts
vendored
136
dist/esm-with-signals.d.ts
vendored
@ -1,13 +1,15 @@
|
||||
declare global{ /* ddeSignal */ }
|
||||
type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
|
||||
type SupportedElement=
|
||||
HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
|
||||
| SVGElementTagNameMap[keyof SVGElementTagNameMap]
|
||||
| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
|
||||
| CustomElementTagNameMap[keyof CustomElementTagNameMap]
|
||||
HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
|
||||
| SVGElementTagNameMap[keyof SVGElementTagNameMap]
|
||||
| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
|
||||
| CustomElementTagNameMap[keyof CustomElementTagNameMap]
|
||||
declare global {
|
||||
type ddeComponentAttributes= Record<any, any> | undefined;
|
||||
type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
|
||||
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
|
||||
type ddeString= string | ddeSignal<string>
|
||||
type ddeStringable= ddeString | number | ddeSignal<number>
|
||||
}
|
||||
type PascalCase=
|
||||
`${Capitalize<string>}${string}`;
|
||||
@ -15,50 +17,72 @@ type AttrsModified= {
|
||||
/**
|
||||
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
|
||||
*/
|
||||
style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
|
||||
style: Partial<CSSStyleDeclaration> | ddeString
|
||||
| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
|
||||
/**
|
||||
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
|
||||
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
|
||||
* In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
|
||||
* for others.
|
||||
*/
|
||||
classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
|
||||
/**
|
||||
* By default simiral to `className`, but also supports `string[]`
|
||||
* Used by the dataset HTML attribute to represent data for custom attributes added to elements.
|
||||
* Values are converted to string (see {@link DOMStringMap}).
|
||||
*
|
||||
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
|
||||
* */
|
||||
className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
|
||||
dataset: Record<string, ddeStringable>,
|
||||
/**
|
||||
* Sets `aria-*` simiraly to `dataset`
|
||||
* */
|
||||
ariaset: Record<string,string|ddeSignal<string>>,
|
||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any>
|
||||
ariaset: Record<string, ddeString>,
|
||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString>
|
||||
& Record<`.${string}`, any>
|
||||
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
|
||||
type IsReadonly<T, K extends keyof T> =
|
||||
T extends { readonly [P in K]: T[K] } ? true : false;
|
||||
/**
|
||||
* Just element attributtes
|
||||
*
|
||||
* In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
|
||||
* In most cases, you can use native propertie such as
|
||||
* [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
|
||||
* (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
|
||||
*
|
||||
* There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
|
||||
* @private
|
||||
*/
|
||||
type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & AttrsModified> & Record<string, any>;
|
||||
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
|
||||
type ElementAttributes<T extends SupportedElement>= Partial<{
|
||||
[K in keyof _fromElsInterfaces<T>]: IsReadonly<_fromElsInterfaces<T>, K> extends false
|
||||
? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
|
||||
: ddeStringable
|
||||
} & 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]
|
||||
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 | ddeSignal<string>;
|
||||
export function el<
|
||||
TAG extends keyof ExtendedHTMLElementTagNameMap,
|
||||
EL extends ExtendedHTMLElementTagNameMap[TAG]
|
||||
>(
|
||||
tag_name: TAG,
|
||||
attrs?: ElementAttributes<EL> | textContent,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeString,
|
||||
...addons: ddeElementAddon<
|
||||
ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
|
||||
>[], // TODO: for now addons must have the same element
|
||||
): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
|
||||
export function el(
|
||||
tag_name?: "<>",
|
||||
): ddeDocumentFragment
|
||||
export function el(
|
||||
tag_name: string,
|
||||
attrs?: ElementAttributes<HTMLElement> | textContent,
|
||||
attrs?: ElementAttributes<HTMLElement> | ddeString,
|
||||
...addons: ddeElementAddon<HTMLElement>[]
|
||||
): ddeHTMLElement
|
||||
|
||||
@ -66,9 +90,11 @@ export function el<
|
||||
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
|
||||
>(
|
||||
component: C,
|
||||
attrs?: Parameters<C>[0] | textContent,
|
||||
attrs?: Parameters<C>[0] | ddeString,
|
||||
...addons: ddeElementAddon<ReturnType<C>>[]
|
||||
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType<C> : ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
|
||||
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
|
||||
? ReturnType<C>
|
||||
: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
|
||||
export { el as createElement }
|
||||
|
||||
export function elNS(
|
||||
@ -78,8 +104,8 @@ export function elNS(
|
||||
EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
|
||||
>(
|
||||
tag_name: TAG,
|
||||
attrs?: ElementAttributes<EL> | textContent,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
attrs?: ElementAttributes<NoInfer<EL>> | ddeString,
|
||||
...addons: ddeElementAddon<NoInfer<EL>>[]
|
||||
)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
|
||||
export function elNS(
|
||||
namespace: "http://www.w3.org/1998/Math/MathML"
|
||||
@ -88,14 +114,16 @@ 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] | ddeSignal<EL[key]> | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
attrs?: ddeString | Partial<{
|
||||
[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
|
||||
}>,
|
||||
...addons: ddeElementAddon<NoInfer<EL>>[]
|
||||
)=> ddeMathMLElement
|
||||
export function elNS(
|
||||
namespace: string
|
||||
): (
|
||||
tag_name: string,
|
||||
attrs?: string | textContent | Record<string, any>,
|
||||
attrs?: string | ddeString | Record<string, any>,
|
||||
...addons: ddeElementAddon<SupportedElement>[]
|
||||
)=> SupportedElement
|
||||
export { elNS as createElementNS }
|
||||
@ -106,36 +134,45 @@ export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
|
||||
* */
|
||||
type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void;
|
||||
/** Simulate slots for ddeComponents */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL, mapper?: simulateSlotsMapper): EL
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
|
||||
root: EL,
|
||||
mapper?: simulateSlotsMapper
|
||||
): EL
|
||||
/**
|
||||
* Simulate slots in Custom Elements without using `shadowRoot`.
|
||||
* @param el Custom Element root element
|
||||
* @param body Body of the custom element
|
||||
* */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL, mapper?: simulateSlotsMapper): EL
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
|
||||
el: HTMLElement,
|
||||
body: EL, mapper?: simulateSlotsMapper
|
||||
): EL
|
||||
|
||||
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
|
||||
(element: SupportedElement, data?: any)=> void;
|
||||
export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)):
|
||||
(data?: any)=> void;
|
||||
export function dispatchEvent(
|
||||
name: keyof DocumentEventMap | string,
|
||||
options: EventInit | null,
|
||||
element: SupportedElement | (()=> SupportedElement)
|
||||
): (data?: any)=> void;
|
||||
interface On{
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never ),
|
||||
Event extends keyof DocumentEventMap>(
|
||||
Event extends keyof DocumentEventMap,
|
||||
EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
|
||||
>(
|
||||
type: Event,
|
||||
listener: (this: El, ev: DocumentEventMap[Event]) => any,
|
||||
listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )>(
|
||||
EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
|
||||
>(
|
||||
type: string,
|
||||
listener: (this: El, ev: Event | CustomEvent ) => any,
|
||||
listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||
/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
|
||||
connected<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
@ -143,7 +180,7 @@ interface On{
|
||||
listener: (this: El, event: CustomEvent<El>) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||
/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
|
||||
disconnected<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
@ -151,7 +188,7 @@ interface On{
|
||||
listener: (this: El, event: CustomEvent<void>) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||
/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
|
||||
attributeChanged<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
@ -162,7 +199,12 @@ interface On{
|
||||
}
|
||||
export const on: On;
|
||||
|
||||
type Scope= { scope: Node | Function | Object, host: ddeElementAddon<any>, custom_element: false | HTMLElement, prevent: boolean }
|
||||
type Scope= {
|
||||
scope: Node | Function | Object,
|
||||
host: ddeElementAddon<any>,
|
||||
custom_element: false | HTMLElement,
|
||||
prevent: boolean
|
||||
};
|
||||
/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
|
||||
export const scope: {
|
||||
current: Scope,
|
||||
@ -176,7 +218,7 @@ export const scope: {
|
||||
* — `scope.host(on.connected(console.log))`.
|
||||
* */
|
||||
host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
|
||||
|
||||
|
||||
state: Scope[],
|
||||
/** Adds new child scope. All attributes are inherited by default. */
|
||||
push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
|
||||
@ -202,12 +244,12 @@ export function observedAttributes(custom_element: HTMLElement): Record<string,
|
||||
/* TypeScript MEH */
|
||||
declare global{
|
||||
type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
|
||||
|
||||
|
||||
interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
|
||||
interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
|
||||
interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
|
||||
interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
|
||||
|
||||
|
||||
interface ddeHTMLElementTagNameMap {
|
||||
"a": ddeHTMLAnchorElement;
|
||||
"area": ddeHTMLAreaElement;
|
||||
@ -350,6 +392,7 @@ declare global{
|
||||
}
|
||||
}
|
||||
|
||||
// editorconfig-checker-disable
|
||||
interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
|
||||
interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
|
||||
interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
|
||||
@ -477,6 +520,7 @@ interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTi
|
||||
interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
|
||||
interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
|
||||
interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
|
||||
// editorconfig-checker-enable
|
||||
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;
|
||||
@ -534,7 +578,7 @@ interface signal{
|
||||
* */
|
||||
el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
|
||||
|
||||
observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
|
||||
observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
|
||||
}
|
||||
export const signal: signal;
|
||||
export const S: signal;
|
||||
|
||||
238
dist/esm-with-signals.js
vendored
238
dist/esm-with-signals.js
vendored
@ -34,16 +34,16 @@ function q(t, e) {
|
||||
function F(t, e) {
|
||||
let { observedAttributes: n = [] } = t.constructor;
|
||||
return n.reduce(function(r, o) {
|
||||
return r[pt(o)] = e(t, o), r;
|
||||
return r[dt(o)] = e(t, o), r;
|
||||
}, {});
|
||||
}
|
||||
function pt(t) {
|
||||
function dt(t) {
|
||||
return t.replace(/-./g, (e) => e[1].toUpperCase());
|
||||
}
|
||||
|
||||
// src/dom-common.js
|
||||
var d = {
|
||||
setDeleteAttr: lt,
|
||||
setDeleteAttr: pt,
|
||||
ssr: "",
|
||||
D: globalThis.document,
|
||||
F: globalThis.DocumentFragment,
|
||||
@ -51,7 +51,7 @@ var d = {
|
||||
S: globalThis.SVGElement,
|
||||
M: globalThis.MutationObserver
|
||||
};
|
||||
function lt(t, e, n) {
|
||||
function pt(t, e, 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);
|
||||
@ -68,7 +68,7 @@ var A = [{
|
||||
},
|
||||
host: (t) => t ? t(d.D.body) : d.D.body,
|
||||
prevent: !0
|
||||
}], m = {
|
||||
}], x = {
|
||||
get current() {
|
||||
return A[A.length - 1];
|
||||
},
|
||||
@ -96,7 +96,7 @@ var A = [{
|
||||
function Y(...t) {
|
||||
return this.appendOriginal(...t), this;
|
||||
}
|
||||
function ht(t) {
|
||||
function lt(t) {
|
||||
return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;
|
||||
}
|
||||
var $;
|
||||
@ -104,15 +104,17 @@ function P(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: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((h) => h(i)), void 0) : i }), c = t(e || void 0);
|
||||
let a = c instanceof d.F;
|
||||
o = 1;
|
||||
let a = (...p) => p.length ? (o === 1 ? n.unshift(...p) : p.forEach((m) => m(i)), void 0) : i;
|
||||
x.push({ scope: t, host: a }), c = t(e || void 0);
|
||||
let h = c instanceof d.F;
|
||||
if (c.nodeName === "#comment") break;
|
||||
let l = P.mark({
|
||||
let v = P.mark({
|
||||
type: "component",
|
||||
name: t.name,
|
||||
host: a ? "this" : "parentElement"
|
||||
host: h ? "this" : "parentElement"
|
||||
});
|
||||
c.prepend(l), a && (i = l);
|
||||
c.prepend(v), h && (i = v);
|
||||
break;
|
||||
}
|
||||
case t === "#text":
|
||||
@ -127,23 +129,28 @@ function P(t, e, ...n) {
|
||||
case !c:
|
||||
c = j.call(this, d.D.createElement(t), e);
|
||||
}
|
||||
return ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;
|
||||
return lt(c), i || (i = c), n.forEach((a) => a(i)), o && x.pop(), o = 2, c;
|
||||
}
|
||||
P.mark = function(t, e = !1) {
|
||||
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
|
||||
let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
|
||||
return e && (r.end = d.D.createComment("</dde:mark>")), r;
|
||||
};
|
||||
function Wt(t, e, n) {
|
||||
typeof e != "object" && (n = e, e = t);
|
||||
let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);
|
||||
if (t.append = new Proxy(t.append, {
|
||||
apply(i, a, l) {
|
||||
if (l[0] === e) return i.apply(t, l);
|
||||
if (!l.length) return t;
|
||||
apply(i, a, h) {
|
||||
if (h[0] === e) return i.apply(t, h);
|
||||
if (!h.length) return t;
|
||||
let v = d.D.createDocumentFragment();
|
||||
for (let h of l) {
|
||||
if (!h || !h.slot) {
|
||||
c && v.append(h);
|
||||
for (let p of h) {
|
||||
if (!p || !p.slot) {
|
||||
c && v.append(p);
|
||||
continue;
|
||||
}
|
||||
let x = h.slot, w = o[x];
|
||||
vt(h, "remove", "slot"), w && (bt(w, h, n), Reflect.deleteProperty(o, x));
|
||||
let m = p.slot, y = o[m];
|
||||
vt(p, "remove", "slot"), y && (bt(y, p, n), Reflect.deleteProperty(o, m));
|
||||
}
|
||||
return c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;
|
||||
}
|
||||
@ -153,19 +160,20 @@ function Wt(t, e, n) {
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function ht(...t) {
|
||||
return t.filter(Boolean).join(" ");
|
||||
}
|
||||
function bt(t, e, n) {
|
||||
n && n(t, e);
|
||||
try {
|
||||
t.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
|
||||
t.replaceWith(j(e, {
|
||||
className: ht(e.className, t.className),
|
||||
dataset: { ...t.dataset }
|
||||
}));
|
||||
} catch {
|
||||
t.replaceWith(e);
|
||||
}
|
||||
}
|
||||
P.mark = function(t, e = !1) {
|
||||
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
|
||||
let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
|
||||
return e && (r.end = d.D.createComment("</dde:mark>")), r;
|
||||
};
|
||||
function qt(t) {
|
||||
let e = this;
|
||||
return function(...r) {
|
||||
@ -188,7 +196,7 @@ function nt(t, e, n) {
|
||||
t,
|
||||
e,
|
||||
n,
|
||||
(a, l) => nt.call(c, t, a, l)
|
||||
(a, h) => nt.call(c, t, a, h)
|
||||
);
|
||||
let [i] = e;
|
||||
if (i === "=") return r(e.slice(1), n);
|
||||
@ -206,7 +214,7 @@ function nt(t, e, n) {
|
||||
case "dataset":
|
||||
return I(o, n, et.bind(null, t[e]));
|
||||
case "ariaset":
|
||||
return I(o, n, (a, l) => r("aria-" + a, l));
|
||||
return I(o, n, (a, h) => r("aria-" + a, h));
|
||||
case "classList":
|
||||
return gt.call(c, t, n);
|
||||
}
|
||||
@ -225,9 +233,6 @@ function gt(t, e) {
|
||||
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
|
||||
), t;
|
||||
}
|
||||
function Ft(t) {
|
||||
return Array.from(t.children).forEach((e) => e.remove()), t;
|
||||
}
|
||||
function vt(t, e, n, r) {
|
||||
return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
|
||||
}
|
||||
@ -247,14 +252,11 @@ function I(t, e, n) {
|
||||
o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));
|
||||
});
|
||||
}
|
||||
function ct(t) {
|
||||
return Array.isArray(t) ? t.filter(Boolean).join(" ") : t;
|
||||
}
|
||||
function mt(t, e, n, r) {
|
||||
return t[(S(r) ? "remove" : "set") + e](n, ct(r));
|
||||
return t[(S(r) ? "remove" : "set") + e](n, r);
|
||||
}
|
||||
function xt(t, e, n, r, o = null) {
|
||||
return t[(S(r) ? "remove" : "set") + e + "NS"](o, n, ct(r));
|
||||
return t[(S(r) ? "remove" : "set") + e + "NS"](o, n, r);
|
||||
}
|
||||
function et(t, e, n) {
|
||||
if (Reflect.set(t, e, n), !!S(n))
|
||||
@ -262,21 +264,21 @@ function et(t, e, n) {
|
||||
}
|
||||
|
||||
// src/events-observer.js
|
||||
var D = d.M ? yt() : new Proxy({}, {
|
||||
var D = d.M ? wt() : new Proxy({}, {
|
||||
get() {
|
||||
return () => {
|
||||
};
|
||||
}
|
||||
});
|
||||
function yt() {
|
||||
function wt() {
|
||||
let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
|
||||
for (let f of u)
|
||||
if (f.type === "childList") {
|
||||
if (h(f.addedNodes, !0)) {
|
||||
if (p(f.addedNodes, !0)) {
|
||||
s();
|
||||
continue;
|
||||
}
|
||||
x(f.removedNodes, !0) && s();
|
||||
m(f.removedNodes, !0) && s();
|
||||
}
|
||||
}, r = new d.M(n(a));
|
||||
return {
|
||||
@ -325,35 +327,35 @@ function yt() {
|
||||
function a() {
|
||||
!e || t.size || (e = !1, r.disconnect());
|
||||
}
|
||||
function l() {
|
||||
function h() {
|
||||
return new Promise(function(s) {
|
||||
(requestIdleCallback || requestAnimationFrame)(s);
|
||||
});
|
||||
}
|
||||
async function v(s) {
|
||||
t.size > 30 && await l();
|
||||
t.size > 30 && await h();
|
||||
let u = [];
|
||||
if (!(s instanceof Node)) return u;
|
||||
for (let f of t.keys())
|
||||
f === s || !(f instanceof Node) || s.contains(f) && u.push(f);
|
||||
return u;
|
||||
}
|
||||
function h(s, u) {
|
||||
function p(s, u) {
|
||||
let f = !1;
|
||||
for (let b of s) {
|
||||
if (u && v(b).then(h), !t.has(b)) continue;
|
||||
if (u && v(b).then(p), !t.has(b)) continue;
|
||||
let N = t.get(b);
|
||||
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(s, u) {
|
||||
function m(s, u) {
|
||||
let f = !1;
|
||||
for (let b of s)
|
||||
u && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0);
|
||||
u && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);
|
||||
return f;
|
||||
}
|
||||
function w(s) {
|
||||
function y(s) {
|
||||
return () => {
|
||||
s.isConnected || (s.dispatchEvent(new Event(C)), t.delete(s));
|
||||
};
|
||||
@ -361,17 +363,17 @@ function yt() {
|
||||
}
|
||||
|
||||
// src/customElement.js
|
||||
function Zt(t, e, n, r = _t) {
|
||||
m.push({
|
||||
function Jt(t, e, n, r = _t) {
|
||||
x.push({
|
||||
scope: t,
|
||||
host: (...i) => i.length ? i.forEach((a) => a(t)) : t
|
||||
}), typeof r == "function" && (r = r.call(t, t));
|
||||
let o = t[O];
|
||||
o || wt(t);
|
||||
o || yt(t);
|
||||
let c = n.call(t, r);
|
||||
return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), m.pop(), e.append(c);
|
||||
return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), x.pop(), e.append(c);
|
||||
}
|
||||
function wt(t) {
|
||||
function yt(t) {
|
||||
return J(t.prototype, "connectedCallback", function(e, n, r) {
|
||||
e.apply(n, r), n.dispatchEvent(new Event(_));
|
||||
}), J(t.prototype, "disconnectedCallback", function(e, n, r) {
|
||||
@ -394,43 +396,43 @@ function _t(t) {
|
||||
}
|
||||
|
||||
// src/events.js
|
||||
function Qt(t, e, n) {
|
||||
function Kt(t, e, n) {
|
||||
return e || (e = {}), function(o, ...c) {
|
||||
n && (c.unshift(o), o = typeof n == "function" ? n() : n);
|
||||
let i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
|
||||
return o.dispatchEvent(i);
|
||||
};
|
||||
}
|
||||
function y(t, e, n) {
|
||||
function w(t, e, n) {
|
||||
return function(o) {
|
||||
return o.addEventListener(t, e, n), o;
|
||||
};
|
||||
}
|
||||
var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
y.connected = function(t, e) {
|
||||
return e = it(e), function(r) {
|
||||
var ct = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
w.connected = function(t, e) {
|
||||
return e = ct(e), function(r) {
|
||||
return r.addEventListener(_, t, e), r[O] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);
|
||||
};
|
||||
};
|
||||
y.disconnected = function(t, e) {
|
||||
return e = it(e), function(r) {
|
||||
w.disconnected = function(t, e) {
|
||||
return e = ct(e), function(r) {
|
||||
return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;
|
||||
};
|
||||
};
|
||||
var Z = /* @__PURE__ */ new WeakMap();
|
||||
y.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(y.disconnected(() => e.abort())), e;
|
||||
return Z.set(t, e), t(w.disconnected(() => e.abort())), e;
|
||||
};
|
||||
var At = /* @__PURE__ */ new WeakSet();
|
||||
y.attributeChanged = function(t, e) {
|
||||
w.attributeChanged = function(t, e) {
|
||||
return typeof e != "object" && (e = {}), function(r) {
|
||||
if (r.addEventListener(M, t, e), r[O] || At.has(r) || !d.M) return r;
|
||||
let o = new d.M(function(i) {
|
||||
for (let { attributeName: a, target: l } of i)
|
||||
l.dispatchEvent(
|
||||
new CustomEvent(M, { detail: [a, l.getAttribute(a)] })
|
||||
for (let { attributeName: a, target: h } of i)
|
||||
h.dispatchEvent(
|
||||
new CustomEvent(M, { detail: [a, h.getAttribute(a)] })
|
||||
);
|
||||
});
|
||||
return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
|
||||
@ -438,10 +440,10 @@ y.attributeChanged = function(t, e) {
|
||||
};
|
||||
|
||||
// src/signals-lib.js
|
||||
var p = "__dde_signal";
|
||||
var l = "__dde_signal";
|
||||
function z(t) {
|
||||
try {
|
||||
return T(t, p);
|
||||
return T(t, l);
|
||||
} catch {
|
||||
return !1;
|
||||
}
|
||||
@ -449,19 +451,19 @@ function z(t) {
|
||||
var H = [], g = /* @__PURE__ */ new WeakMap();
|
||||
function E(t, e) {
|
||||
if (typeof t != "function")
|
||||
return st(!1, t, e);
|
||||
return it(!1, t, e);
|
||||
if (z(t)) return t;
|
||||
let n = st(!0), r = function() {
|
||||
let n = it(!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;
|
||||
if (g.set(r, /* @__PURE__ */ new Set([o])), H.push(r), at(n, t()), H.pop(), !c.length) return;
|
||||
let i = g.get(r);
|
||||
for (let a of c)
|
||||
i.has(a) || L(a, r);
|
||||
};
|
||||
return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
|
||||
return g.set(n[l], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
|
||||
}
|
||||
E.action = function(t, e, ...n) {
|
||||
let r = t[p], { actions: o } = r;
|
||||
let r = t[l], { actions: o } = r;
|
||||
if (!o || !(e in o))
|
||||
throw new Error(`'${t}' has no action with name '${e}'!`);
|
||||
if (o[e].apply(r, n), r.skip) return delete r.skip;
|
||||
@ -480,8 +482,8 @@ E.symbols = {
|
||||
};
|
||||
E.clear = function(...t) {
|
||||
for (let n of t) {
|
||||
let r = n[p];
|
||||
r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]);
|
||||
let r = n[l];
|
||||
r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[l]);
|
||||
}
|
||||
function e(n, r) {
|
||||
r.listeners.forEach((o) => {
|
||||
@ -495,24 +497,24 @@ var R = "__dde_reactive";
|
||||
E.el = function(t, e) {
|
||||
let n = P.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment();
|
||||
o.append(n, r);
|
||||
let { current: c } = m, i = {}, a = (l) => {
|
||||
let { current: c } = x, i = {}, a = (h) => {
|
||||
if (!n.parentNode || !r.parentNode)
|
||||
return L(t, a);
|
||||
let v = i;
|
||||
i = {}, m.push(c);
|
||||
let h = e(l, function(u, f) {
|
||||
i = {}, x.push(c);
|
||||
let p = e(h, function(u, f) {
|
||||
let b;
|
||||
return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;
|
||||
});
|
||||
m.pop(), Array.isArray(h) || (h = [h]);
|
||||
let x = document.createComment("");
|
||||
h.push(x), n.after(...h);
|
||||
let w;
|
||||
for (; (w = x.nextSibling) && w !== r; )
|
||||
w.remove();
|
||||
x.remove(), n.isConnected && St(c.host());
|
||||
x.pop(), Array.isArray(p) || (p = [p]);
|
||||
let m = document.createComment("");
|
||||
p.push(m), n.after(...p);
|
||||
let y;
|
||||
for (; (y = m.nextSibling) && y !== r; )
|
||||
y.remove();
|
||||
m.remove(), n.isConnected && St(c.host());
|
||||
};
|
||||
return Q(t, a), ft(t, a, n, e), a(t()), o;
|
||||
return Q(t, a), ut(t, a, n, e), a(t()), o;
|
||||
};
|
||||
function St(t) {
|
||||
!t || !t[R] || (requestIdleCallback || setTimeout)(function() {
|
||||
@ -526,25 +528,25 @@ var Ot = {
|
||||
};
|
||||
function Ct(t) {
|
||||
return function(e, n) {
|
||||
let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = at(r, e.getAttribute(n), Ot);
|
||||
let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = ft(r, e.getAttribute(n), Ot);
|
||||
return t[n] = o, o;
|
||||
};
|
||||
}
|
||||
var G = "__dde_attributes";
|
||||
E.observedAttributes = function(t) {
|
||||
let e = t[G] = {}, n = F(t, Ct(e));
|
||||
return y.attributeChanged(function({ detail: o }) {
|
||||
return w.attributeChanged(function({ detail: o }) {
|
||||
/*! This maps attributes to signals (`S.observedAttributes`).
|
||||
* Investigate `__dde_attributes` key of the element.*/
|
||||
let [c, i] = o, a = this[G][c];
|
||||
if (a) return E.action(a, "_set", i);
|
||||
})(t), y.disconnected(function() {
|
||||
})(t), w.disconnected(function() {
|
||||
/*! This removes all signals mapped to attributes (`S.observedAttributes`).
|
||||
* Investigate `__dde_attributes` key of the element.*/
|
||||
E.clear(...Object.values(this[G]));
|
||||
})(t), n;
|
||||
};
|
||||
var ut = {
|
||||
var st = {
|
||||
isSignal: z,
|
||||
processReactiveAttribute(t, e, n, r) {
|
||||
if (!z(n)) return n;
|
||||
@ -553,26 +555,26 @@ var ut = {
|
||||
return L(n, o);
|
||||
r(e, c);
|
||||
};
|
||||
return Q(n, o), ft(n, o, t, e), n();
|
||||
return Q(n, o), ut(n, o, t, e), n();
|
||||
}
|
||||
};
|
||||
function ft(t, e, ...n) {
|
||||
let { current: r } = m;
|
||||
function ut(t, e, ...n) {
|
||||
let { current: r } = x;
|
||||
r.prevent || r.host(function(o) {
|
||||
o[R] || (o[R] = [], y.disconnected(
|
||||
o[R] || (o[R] = [], w.disconnected(
|
||||
() => (
|
||||
/*!
|
||||
* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
|
||||
* You can investigate the `__dde_reactive` key of the element.
|
||||
* */
|
||||
o[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o))
|
||||
o[R].forEach(([[c, i]]) => L(c, i, c[l] && c[l].host && c[l].host() === o))
|
||||
)
|
||||
)(o)), o[R].push([[t, e], ...n]);
|
||||
});
|
||||
}
|
||||
function st(t, e, n) {
|
||||
let r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r);
|
||||
return at(r, e, n, t);
|
||||
function it(t, e, n) {
|
||||
let r = t ? () => K(r) : (...o) => o.length ? at(r, ...o) : K(r);
|
||||
return ft(r, e, n, t);
|
||||
}
|
||||
var Dt = Object.assign(/* @__PURE__ */ Object.create(null), {
|
||||
stopPropagation() {
|
||||
@ -586,13 +588,13 @@ var Dt = Object.assign(/* @__PURE__ */ Object.create(null), {
|
||||
this.stack = n.find((o) => !o.includes(r));
|
||||
}
|
||||
};
|
||||
function at(t, e, n, r = !1) {
|
||||
function ft(t, e, n, r = !1) {
|
||||
let o = [];
|
||||
X(n) !== "[object Object]" && (n = {});
|
||||
let { onclear: c } = E.symbols;
|
||||
n[c] && (o.push(n[c]), delete n[c]);
|
||||
let { host: i } = m;
|
||||
return Reflect.defineProperty(t, p, {
|
||||
let { host: i } = x;
|
||||
return Reflect.defineProperty(t, l, {
|
||||
value: {
|
||||
value: e,
|
||||
actions: n,
|
||||
@ -605,28 +607,28 @@ function at(t, e, n, r = !1) {
|
||||
enumerable: !1,
|
||||
writable: !1,
|
||||
configurable: !0
|
||||
}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t;
|
||||
}), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], Dt), t;
|
||||
}
|
||||
function Rt() {
|
||||
return H[H.length - 1];
|
||||
}
|
||||
function K(t) {
|
||||
if (!t[p]) return;
|
||||
let { value: e, listeners: n } = t[p], r = Rt();
|
||||
if (!t[l]) return;
|
||||
let { value: e, listeners: n } = t[l], r = Rt();
|
||||
return r && n.add(r), g.has(r) && g.get(r).add(t), e;
|
||||
}
|
||||
function dt(t, e, n) {
|
||||
if (!t[p]) return;
|
||||
let r = t[p];
|
||||
function at(t, e, n) {
|
||||
if (!t[l]) return;
|
||||
let r = t[l];
|
||||
if (!(!n && r.value === e))
|
||||
return r.value = e, r.listeners.forEach((o) => o(e)), e;
|
||||
}
|
||||
function Q(t, e) {
|
||||
if (t[p])
|
||||
return t[p].listeners.add(e);
|
||||
if (t[l])
|
||||
return t[l].listeners.add(e);
|
||||
}
|
||||
function L(t, e, n) {
|
||||
let r = t[p];
|
||||
let r = t[l];
|
||||
if (!r) return;
|
||||
let o = r.listeners.delete(e);
|
||||
if (n && !r.listeners.size) {
|
||||
@ -639,28 +641,28 @@ function L(t, e, n) {
|
||||
}
|
||||
|
||||
// signals.js
|
||||
B(ut);
|
||||
B(st);
|
||||
export {
|
||||
E as S,
|
||||
j as assign,
|
||||
nt as assignAttribute,
|
||||
ht as chainableAppend,
|
||||
lt as chainableAppend,
|
||||
gt as classListDeclarative,
|
||||
ht as cn,
|
||||
P as createElement,
|
||||
qt as createElementNS,
|
||||
Zt as customElementRender,
|
||||
wt as customElementWithDDE,
|
||||
Qt as dispatchEvent,
|
||||
Jt as customElementRender,
|
||||
yt as customElementWithDDE,
|
||||
Kt as dispatchEvent,
|
||||
P as el,
|
||||
qt as elNS,
|
||||
vt as elementAttribute,
|
||||
Ft as empty,
|
||||
z as isSignal,
|
||||
wt as lifecyclesToEvents,
|
||||
yt as lifecyclesToEvents,
|
||||
_t as observedAttributes,
|
||||
y as on,
|
||||
w as on,
|
||||
B as registerReactivity,
|
||||
m as scope,
|
||||
x as scope,
|
||||
E as signal,
|
||||
Wt as simulateSlots
|
||||
};
|
||||
|
||||
136
dist/esm.d.ts
vendored
136
dist/esm.d.ts
vendored
@ -1,13 +1,15 @@
|
||||
declare global{ /* ddeSignal */ }
|
||||
type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
|
||||
type SupportedElement=
|
||||
HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
|
||||
| SVGElementTagNameMap[keyof SVGElementTagNameMap]
|
||||
| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
|
||||
| CustomElementTagNameMap[keyof CustomElementTagNameMap]
|
||||
HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
|
||||
| SVGElementTagNameMap[keyof SVGElementTagNameMap]
|
||||
| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
|
||||
| CustomElementTagNameMap[keyof CustomElementTagNameMap]
|
||||
declare global {
|
||||
type ddeComponentAttributes= Record<any, any> | undefined;
|
||||
type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
|
||||
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
|
||||
type ddeString= string | ddeSignal<string>
|
||||
type ddeStringable= ddeString | number | ddeSignal<number>
|
||||
}
|
||||
type PascalCase=
|
||||
`${Capitalize<string>}${string}`;
|
||||
@ -15,50 +17,72 @@ type AttrsModified= {
|
||||
/**
|
||||
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
|
||||
*/
|
||||
style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
|
||||
style: Partial<CSSStyleDeclaration> | ddeString
|
||||
| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
|
||||
/**
|
||||
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
|
||||
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
|
||||
* In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
|
||||
* for others.
|
||||
*/
|
||||
classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
|
||||
/**
|
||||
* By default simiral to `className`, but also supports `string[]`
|
||||
* Used by the dataset HTML attribute to represent data for custom attributes added to elements.
|
||||
* Values are converted to string (see {@link DOMStringMap}).
|
||||
*
|
||||
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
|
||||
* */
|
||||
className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
|
||||
dataset: Record<string, ddeStringable>,
|
||||
/**
|
||||
* Sets `aria-*` simiraly to `dataset`
|
||||
* */
|
||||
ariaset: Record<string,string|ddeSignal<string>>,
|
||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any>
|
||||
ariaset: Record<string, ddeString>,
|
||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString>
|
||||
& Record<`.${string}`, any>
|
||||
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
|
||||
type IsReadonly<T, K extends keyof T> =
|
||||
T extends { readonly [P in K]: T[K] } ? true : false;
|
||||
/**
|
||||
* Just element attributtes
|
||||
*
|
||||
* In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
|
||||
* In most cases, you can use native propertie such as
|
||||
* [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
|
||||
* (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
|
||||
*
|
||||
* There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
|
||||
* @private
|
||||
*/
|
||||
type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & AttrsModified> & Record<string, any>;
|
||||
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
|
||||
type ElementAttributes<T extends SupportedElement>= Partial<{
|
||||
[K in keyof _fromElsInterfaces<T>]: IsReadonly<_fromElsInterfaces<T>, K> extends false
|
||||
? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
|
||||
: ddeStringable
|
||||
} & 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]
|
||||
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 | ddeSignal<string>;
|
||||
export function el<
|
||||
TAG extends keyof ExtendedHTMLElementTagNameMap,
|
||||
EL extends ExtendedHTMLElementTagNameMap[TAG]
|
||||
>(
|
||||
tag_name: TAG,
|
||||
attrs?: ElementAttributes<EL> | textContent,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeString,
|
||||
...addons: ddeElementAddon<
|
||||
ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
|
||||
>[], // TODO: for now addons must have the same element
|
||||
): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
|
||||
export function el(
|
||||
tag_name?: "<>",
|
||||
): ddeDocumentFragment
|
||||
export function el(
|
||||
tag_name: string,
|
||||
attrs?: ElementAttributes<HTMLElement> | textContent,
|
||||
attrs?: ElementAttributes<HTMLElement> | ddeString,
|
||||
...addons: ddeElementAddon<HTMLElement>[]
|
||||
): ddeHTMLElement
|
||||
|
||||
@ -66,9 +90,11 @@ export function el<
|
||||
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
|
||||
>(
|
||||
component: C,
|
||||
attrs?: Parameters<C>[0] | textContent,
|
||||
attrs?: Parameters<C>[0] | ddeString,
|
||||
...addons: ddeElementAddon<ReturnType<C>>[]
|
||||
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType<C> : ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
|
||||
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
|
||||
? ReturnType<C>
|
||||
: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
|
||||
export { el as createElement }
|
||||
|
||||
export function elNS(
|
||||
@ -78,8 +104,8 @@ export function elNS(
|
||||
EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
|
||||
>(
|
||||
tag_name: TAG,
|
||||
attrs?: ElementAttributes<EL> | textContent,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
attrs?: ElementAttributes<NoInfer<EL>> | ddeString,
|
||||
...addons: ddeElementAddon<NoInfer<EL>>[]
|
||||
)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
|
||||
export function elNS(
|
||||
namespace: "http://www.w3.org/1998/Math/MathML"
|
||||
@ -88,14 +114,16 @@ 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] | ddeSignal<EL[key]> | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
attrs?: ddeString | Partial<{
|
||||
[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
|
||||
}>,
|
||||
...addons: ddeElementAddon<NoInfer<EL>>[]
|
||||
)=> ddeMathMLElement
|
||||
export function elNS(
|
||||
namespace: string
|
||||
): (
|
||||
tag_name: string,
|
||||
attrs?: string | textContent | Record<string, any>,
|
||||
attrs?: string | ddeString | Record<string, any>,
|
||||
...addons: ddeElementAddon<SupportedElement>[]
|
||||
)=> SupportedElement
|
||||
export { elNS as createElementNS }
|
||||
@ -106,36 +134,45 @@ export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
|
||||
* */
|
||||
type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void;
|
||||
/** Simulate slots for ddeComponents */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL, mapper?: simulateSlotsMapper): EL
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
|
||||
root: EL,
|
||||
mapper?: simulateSlotsMapper
|
||||
): EL
|
||||
/**
|
||||
* Simulate slots in Custom Elements without using `shadowRoot`.
|
||||
* @param el Custom Element root element
|
||||
* @param body Body of the custom element
|
||||
* */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL, mapper?: simulateSlotsMapper): EL
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
|
||||
el: HTMLElement,
|
||||
body: EL, mapper?: simulateSlotsMapper
|
||||
): EL
|
||||
|
||||
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
|
||||
(element: SupportedElement, data?: any)=> void;
|
||||
export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)):
|
||||
(data?: any)=> void;
|
||||
export function dispatchEvent(
|
||||
name: keyof DocumentEventMap | string,
|
||||
options: EventInit | null,
|
||||
element: SupportedElement | (()=> SupportedElement)
|
||||
): (data?: any)=> void;
|
||||
interface On{
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never ),
|
||||
Event extends keyof DocumentEventMap>(
|
||||
Event extends keyof DocumentEventMap,
|
||||
EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
|
||||
>(
|
||||
type: Event,
|
||||
listener: (this: El, ev: DocumentEventMap[Event]) => any,
|
||||
listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )>(
|
||||
EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
|
||||
>(
|
||||
type: string,
|
||||
listener: (this: El, ev: Event | CustomEvent ) => any,
|
||||
listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||
/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
|
||||
connected<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
@ -143,7 +180,7 @@ interface On{
|
||||
listener: (this: El, event: CustomEvent<El>) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||
/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
|
||||
disconnected<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
@ -151,7 +188,7 @@ interface On{
|
||||
listener: (this: El, event: CustomEvent<void>) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||
/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
|
||||
attributeChanged<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
@ -162,7 +199,12 @@ interface On{
|
||||
}
|
||||
export const on: On;
|
||||
|
||||
type Scope= { scope: Node | Function | Object, host: ddeElementAddon<any>, custom_element: false | HTMLElement, prevent: boolean }
|
||||
type Scope= {
|
||||
scope: Node | Function | Object,
|
||||
host: ddeElementAddon<any>,
|
||||
custom_element: false | HTMLElement,
|
||||
prevent: boolean
|
||||
};
|
||||
/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
|
||||
export const scope: {
|
||||
current: Scope,
|
||||
@ -176,7 +218,7 @@ export const scope: {
|
||||
* — `scope.host(on.connected(console.log))`.
|
||||
* */
|
||||
host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
|
||||
|
||||
|
||||
state: Scope[],
|
||||
/** Adds new child scope. All attributes are inherited by default. */
|
||||
push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
|
||||
@ -202,12 +244,12 @@ export function observedAttributes(custom_element: HTMLElement): Record<string,
|
||||
/* TypeScript MEH */
|
||||
declare global{
|
||||
type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
|
||||
|
||||
|
||||
interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
|
||||
interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
|
||||
interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
|
||||
interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
|
||||
|
||||
|
||||
interface ddeHTMLElementTagNameMap {
|
||||
"a": ddeHTMLAnchorElement;
|
||||
"area": ddeHTMLAreaElement;
|
||||
@ -350,6 +392,7 @@ declare global{
|
||||
}
|
||||
}
|
||||
|
||||
// editorconfig-checker-disable
|
||||
interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
|
||||
interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
|
||||
interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
|
||||
@ -476,4 +519,5 @@ interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend<dd
|
||||
interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; }
|
||||
interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
|
||||
interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
|
||||
interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
|
||||
interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
|
||||
// editorconfig-checker-enable
|
||||
134
dist/esm.js
vendored
134
dist/esm.js
vendored
@ -1,5 +1,5 @@
|
||||
// src/signals-common.js
|
||||
var C = {
|
||||
var m = {
|
||||
isSignal(t) {
|
||||
return !1;
|
||||
},
|
||||
@ -7,16 +7,16 @@ var C = {
|
||||
return n;
|
||||
}
|
||||
};
|
||||
function V(t, e = !0) {
|
||||
return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t);
|
||||
function G(t, e = !0) {
|
||||
return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t);
|
||||
}
|
||||
function L(t) {
|
||||
return C.isPrototypeOf(t) && t !== C ? t : C;
|
||||
return m.isPrototypeOf(t) && t !== m ? t : m;
|
||||
}
|
||||
|
||||
// src/helpers.js
|
||||
var q = (...t) => Object.prototype.hasOwnProperty.call(...t);
|
||||
function E(t) {
|
||||
function x(t) {
|
||||
return typeof t > "u";
|
||||
}
|
||||
function N(t, e) {
|
||||
@ -30,16 +30,16 @@ function N(t, e) {
|
||||
function F(t, e) {
|
||||
let { observedAttributes: n = [] } = t.constructor;
|
||||
return n.reduce(function(r, o) {
|
||||
return r[J(o)] = e(t, o), r;
|
||||
return r[V(o)] = e(t, o), r;
|
||||
}, {});
|
||||
}
|
||||
function J(t) {
|
||||
function V(t) {
|
||||
return t.replace(/-./g, (e) => e[1].toUpperCase());
|
||||
}
|
||||
|
||||
// src/dom-common.js
|
||||
var a = {
|
||||
setDeleteAttr: K,
|
||||
setDeleteAttr: J,
|
||||
ssr: "",
|
||||
D: globalThis.document,
|
||||
F: globalThis.DocumentFragment,
|
||||
@ -47,15 +47,15 @@ var a = {
|
||||
S: globalThis.SVGElement,
|
||||
M: globalThis.MutationObserver
|
||||
};
|
||||
function K(t, e, n) {
|
||||
if (Reflect.set(t, e, n), !!E(n)) {
|
||||
function J(t, e, n) {
|
||||
if (Reflect.set(t, e, n), !!x(n)) {
|
||||
if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined")
|
||||
return t.removeAttribute(e);
|
||||
if (Reflect.get(t, e) === "undefined")
|
||||
return Reflect.set(t, e, "");
|
||||
}
|
||||
}
|
||||
var x = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged";
|
||||
var w = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged";
|
||||
|
||||
// src/dom.js
|
||||
var v = [{
|
||||
@ -92,7 +92,7 @@ var v = [{
|
||||
function $(...t) {
|
||||
return this.appendOriginal(...t), this;
|
||||
}
|
||||
function Q(t) {
|
||||
function K(t) {
|
||||
return t.append === $ || (t.appendOriginal = t.append, t.append = $), t;
|
||||
}
|
||||
var T;
|
||||
@ -100,15 +100,17 @@ function j(t, e, ...n) {
|
||||
let r = L(this), o = 0, c, f;
|
||||
switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
|
||||
case typeof t == "function": {
|
||||
o = 1, S.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((h) => h(f)), void 0) : f }), c = t(e || void 0);
|
||||
let d = c instanceof a.F;
|
||||
o = 1;
|
||||
let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(f)), void 0) : f;
|
||||
S.push({ scope: t, host: d }), c = t(e || void 0);
|
||||
let p = c instanceof a.F;
|
||||
if (c.nodeName === "#comment") break;
|
||||
let p = j.mark({
|
||||
let b = j.mark({
|
||||
type: "component",
|
||||
name: t.name,
|
||||
host: d ? "this" : "parentElement"
|
||||
host: p ? "this" : "parentElement"
|
||||
});
|
||||
c.prepend(p), d && (f = p);
|
||||
c.prepend(b), p && (f = b);
|
||||
break;
|
||||
}
|
||||
case t === "#text":
|
||||
@ -123,8 +125,13 @@ function j(t, e, ...n) {
|
||||
case !c:
|
||||
c = O.call(this, a.D.createElement(t), e);
|
||||
}
|
||||
return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c;
|
||||
return K(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c;
|
||||
}
|
||||
j.mark = function(t, e = !1) {
|
||||
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
|
||||
let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
|
||||
return e && (r.end = a.D.createComment("</dde:mark>")), r;
|
||||
};
|
||||
function bt(t, e, n) {
|
||||
typeof e != "object" && (n = e, e = t);
|
||||
let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((f, d) => Reflect.set(f, d.name || r, d) && f, {}), c = q(o, r);
|
||||
@ -133,13 +140,13 @@ function bt(t, e, n) {
|
||||
if (p[0] === e) return f.apply(t, p);
|
||||
if (!p.length) return t;
|
||||
let b = a.D.createDocumentFragment();
|
||||
for (let h of p) {
|
||||
if (!h || !h.slot) {
|
||||
c && b.append(h);
|
||||
for (let l of p) {
|
||||
if (!l || !l.slot) {
|
||||
c && b.append(l);
|
||||
continue;
|
||||
}
|
||||
let A = h.slot, _ = o[A];
|
||||
tt(h, "remove", "slot"), _ && (X(_, h, n), Reflect.deleteProperty(o, A));
|
||||
let E = l.slot, _ = o[E];
|
||||
tt(l, "remove", "slot"), _ && (X(_, l, n), Reflect.deleteProperty(o, E));
|
||||
}
|
||||
return c && (o[r].replaceWith(b), Reflect.deleteProperty(o, r)), t.append = f, t;
|
||||
}
|
||||
@ -149,19 +156,20 @@ function bt(t, e, n) {
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function Q(...t) {
|
||||
return t.filter(Boolean).join(" ");
|
||||
}
|
||||
function X(t, e, n) {
|
||||
n && n(t, e);
|
||||
try {
|
||||
t.replaceWith(O(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
|
||||
t.replaceWith(O(e, {
|
||||
className: Q(e.className, t.className),
|
||||
dataset: { ...t.dataset }
|
||||
}));
|
||||
} catch {
|
||||
t.replaceWith(e);
|
||||
}
|
||||
}
|
||||
j.mark = function(t, e = !1) {
|
||||
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
|
||||
let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
|
||||
return e && (r.end = a.D.createComment("</dde:mark>")), r;
|
||||
};
|
||||
function gt(t) {
|
||||
let e = this;
|
||||
return function(...r) {
|
||||
@ -221,16 +229,13 @@ function Y(t, e) {
|
||||
(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
|
||||
), t;
|
||||
}
|
||||
function vt(t) {
|
||||
return Array.from(t.children).forEach((e) => e.remove()), t;
|
||||
}
|
||||
function tt(t, e, n, r) {
|
||||
return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
|
||||
}
|
||||
function et(t, e) {
|
||||
if (!(e in t)) return !1;
|
||||
let n = I(t, e);
|
||||
return !E(n.set);
|
||||
return !x(n.set);
|
||||
}
|
||||
function I(t, e) {
|
||||
if (t = Object.getPrototypeOf(t), !t) return {};
|
||||
@ -243,22 +248,19 @@ function M(t, e, n) {
|
||||
o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));
|
||||
});
|
||||
}
|
||||
function Z(t) {
|
||||
return Array.isArray(t) ? t.filter(Boolean).join(" ") : t;
|
||||
}
|
||||
function nt(t, e, n, r) {
|
||||
return t[(E(r) ? "remove" : "set") + e](n, Z(r));
|
||||
return t[(x(r) ? "remove" : "set") + e](n, r);
|
||||
}
|
||||
function rt(t, e, n, r, o = null) {
|
||||
return t[(E(r) ? "remove" : "set") + e + "NS"](o, n, Z(r));
|
||||
return t[(x(r) ? "remove" : "set") + e + "NS"](o, n, r);
|
||||
}
|
||||
function H(t, e, n) {
|
||||
if (Reflect.set(t, e, n), !!E(n))
|
||||
if (Reflect.set(t, e, n), !!x(n))
|
||||
return Reflect.deleteProperty(t, e);
|
||||
}
|
||||
|
||||
// src/events-observer.js
|
||||
var w = a.M ? ot() : new Proxy({}, {
|
||||
var A = a.M ? ot() : new Proxy({}, {
|
||||
get() {
|
||||
return () => {
|
||||
};
|
||||
@ -268,11 +270,11 @@ function ot() {
|
||||
let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) {
|
||||
for (let s of u)
|
||||
if (s.type === "childList") {
|
||||
if (h(s.addedNodes, !0)) {
|
||||
if (l(s.addedNodes, !0)) {
|
||||
i();
|
||||
continue;
|
||||
}
|
||||
A(s.removedNodes, !0) && i();
|
||||
E(s.removedNodes, !0) && i();
|
||||
}
|
||||
}, r = new a.M(n(d));
|
||||
return {
|
||||
@ -334,19 +336,19 @@ function ot() {
|
||||
s === i || !(s instanceof Node) || i.contains(s) && u.push(s);
|
||||
return u;
|
||||
}
|
||||
function h(i, u) {
|
||||
function l(i, u) {
|
||||
let s = !1;
|
||||
for (let l of i) {
|
||||
if (u && b(l).then(h), !t.has(l)) continue;
|
||||
let m = t.get(l);
|
||||
m.length_c && (l.dispatchEvent(new Event(g)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(l), s = !0);
|
||||
for (let h of i) {
|
||||
if (u && b(h).then(l), !t.has(h)) continue;
|
||||
let C = t.get(h);
|
||||
C.length_c && (h.dispatchEvent(new Event(g)), C.connected = /* @__PURE__ */ new WeakSet(), C.length_c = 0, C.length_d || t.delete(h), s = !0);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
function A(i, u) {
|
||||
function E(i, u) {
|
||||
let s = !1;
|
||||
for (let l of i)
|
||||
u && b(l).then(A), !(!t.has(l) || !t.get(l).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(l)), s = !0);
|
||||
for (let h of i)
|
||||
u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0);
|
||||
return s;
|
||||
}
|
||||
function _(i) {
|
||||
@ -357,15 +359,15 @@ function ot() {
|
||||
}
|
||||
|
||||
// src/customElement.js
|
||||
function Dt(t, e, n, r = it) {
|
||||
function mt(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];
|
||||
let o = t[w];
|
||||
o || ct(t);
|
||||
let c = n.call(t, r);
|
||||
return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, w.observe(e), { once: !0 }), S.pop(), e.append(c);
|
||||
return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, A.observe(e), { once: !0 }), S.pop(), e.append(c);
|
||||
}
|
||||
function ct(t) {
|
||||
return k(t.prototype, "connectedCallback", function(e, n, r) {
|
||||
@ -379,7 +381,7 @@ function ct(t) {
|
||||
n.dispatchEvent(new CustomEvent(D, {
|
||||
detail: [o, c]
|
||||
})), e.apply(n, r);
|
||||
}), t.prototype[x] = !0, t;
|
||||
}), t.prototype[w] = !0, t;
|
||||
}
|
||||
function k(t, e, n) {
|
||||
t[e] = new Proxy(t[e] || (() => {
|
||||
@ -390,7 +392,7 @@ function it(t) {
|
||||
}
|
||||
|
||||
// src/events.js
|
||||
function _t(t, e, n) {
|
||||
function Rt(t, e, n) {
|
||||
return e || (e = {}), function(o, ...c) {
|
||||
n && (c.unshift(o), o = typeof n == "function" ? n() : n);
|
||||
let f = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
|
||||
@ -402,15 +404,15 @@ function R(t, e, n) {
|
||||
return o.addEventListener(t, e, n), o;
|
||||
};
|
||||
}
|
||||
var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
var Z = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
|
||||
R.connected = function(t, e) {
|
||||
return e = G(e), function(r) {
|
||||
return r.addEventListener(g, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r);
|
||||
return e = Z(e), function(r) {
|
||||
return r.addEventListener(g, t, e), r[w] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.onConnected(r, t), r);
|
||||
};
|
||||
};
|
||||
R.disconnected = function(t, e) {
|
||||
return e = G(e), function(r) {
|
||||
return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r;
|
||||
return e = Z(e), function(r) {
|
||||
return r.addEventListener(y, t, e), r[w] || N(e.signal, () => A.offDisconnected(r, t)) && A.onDisconnected(r, t), r;
|
||||
};
|
||||
};
|
||||
var W = /* @__PURE__ */ new WeakMap();
|
||||
@ -422,7 +424,7 @@ R.disconnectedAsAbort = function(t) {
|
||||
var st = /* @__PURE__ */ new WeakSet();
|
||||
R.attributeChanged = function(t, e) {
|
||||
return typeof e != "object" && (e = {}), function(r) {
|
||||
if (r.addEventListener(D, t, e), r[x] || st.has(r) || !a.M) return r;
|
||||
if (r.addEventListener(D, t, e), r[w] || st.has(r) || !a.M) return r;
|
||||
let o = new a.M(function(f) {
|
||||
for (let { attributeName: d, target: p } of f)
|
||||
p.dispatchEvent(
|
||||
@ -435,21 +437,21 @@ R.attributeChanged = function(t, e) {
|
||||
export {
|
||||
O as assign,
|
||||
z as assignAttribute,
|
||||
Q as chainableAppend,
|
||||
K as chainableAppend,
|
||||
Y as classListDeclarative,
|
||||
Q as cn,
|
||||
j as createElement,
|
||||
gt as createElementNS,
|
||||
Dt as customElementRender,
|
||||
mt as customElementRender,
|
||||
ct as customElementWithDDE,
|
||||
_t as dispatchEvent,
|
||||
Rt as dispatchEvent,
|
||||
j as el,
|
||||
gt as elNS,
|
||||
tt as elementAttribute,
|
||||
vt as empty,
|
||||
ct as lifecyclesToEvents,
|
||||
it as observedAttributes,
|
||||
R as on,
|
||||
V as registerReactivity,
|
||||
G as registerReactivity,
|
||||
S as scope,
|
||||
bt as simulateSlots
|
||||
};
|
||||
|
||||
@ -11,7 +11,7 @@ document.body.append(
|
||||
);
|
||||
|
||||
function component({ className, textContent }){
|
||||
return el("div", { className: [ "class1", className ] }).append(
|
||||
return el("div", { className: [ "class1", className ].join(" ") }).append(
|
||||
el("p", textContent)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
import { el } from "deka-dom-el";
|
||||
import { S } from "deka-dom-el/signals";
|
||||
const clicks= S(0); // A
|
||||
document.body.append(
|
||||
el().append(
|
||||
el(HelloWorldComponent)
|
||||
);
|
||||
function HelloWorldComponent(){
|
||||
const clicksS= S(0); // A
|
||||
return el().append(
|
||||
el("p", S(()=>
|
||||
"Hello World "+"🎉".repeat(clicks()) // B
|
||||
"Hello World "+"🎉".repeat(clicksS()) // B
|
||||
)),
|
||||
el("button", {
|
||||
type: "button",
|
||||
onclick: ()=> clicks(clicks()+1), // C
|
||||
onclick: ()=> clicksS(clicksS()+1), // C
|
||||
textContent: "Fire",
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { el, empty, on } from "deka-dom-el";
|
||||
import { el, on } from "deka-dom-el";
|
||||
/** @param {HTMLElement} el */
|
||||
const empty= el=> Array.from(el.children).forEach(c=> c.remove());
|
||||
document.body.append(
|
||||
el(component),
|
||||
el("button", {
|
||||
|
||||
@ -4,7 +4,7 @@ const count= S(0);
|
||||
import { el } from "deka-dom-el";
|
||||
document.body.append(
|
||||
el("p", S(()=> "Currently: "+count())),
|
||||
el("p", { classList: { red: S(()=> count()%2) }, dataset: { count }, textContent: "Attributes example" })
|
||||
el("p", { classList: { red: S(()=> count()%2 === 0) }, dataset: { count }, textContent: "Attributes example" })
|
||||
);
|
||||
document.head.append(
|
||||
el("style", ".red { color: red; }")
|
||||
|
||||
@ -4,24 +4,24 @@ import { mnemonicUl } from "../mnemonicUl.html.js";
|
||||
export function mnemonic(){
|
||||
return mnemonicUl().append(
|
||||
el("li").append(
|
||||
el("code", "assign(<element>, ...<idl-objects>): <element>"),
|
||||
" — assign properties to the element",
|
||||
el("code", "assign(<element>, ...<objects>): <element>"),
|
||||
" — assign properties (prefered, or attributes) to the element",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "el(<tag-name>, <primitive>)[.append(...)]: <element-from-tag-name>"),
|
||||
" — simple element containing only text",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "el(<tag-name>, <idl-object>)[.append(...)]: <element-from-tag-name>"),
|
||||
" — element with more properties",
|
||||
el("code", "el(<tag-name>, <object>)[.append(...)]: <element-from-tag-name>"),
|
||||
" — element with more properties (prefered, or attributes)",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function>"),
|
||||
" — using component represented by function",
|
||||
" — using component represented by function (must accept object like for <tag-name>)",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "el(<...>, <...>, ...<addons>)"),
|
||||
" — see following page"
|
||||
" — see following section of documentation",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "elNS(<namespace>)(<as-el-see-above>)[.append(...)]: <element-based-on-arguments>"),
|
||||
|
||||
@ -92,8 +92,7 @@ export function page({ pkg, info }){
|
||||
el("li").append(...T`You can use string or object as a value for ${el("code", "style")} property.`),
|
||||
el("li").append(...T`
|
||||
${el("code", "className")} (IDL – preffered)/${el("code", "class")} are ways to add CSS classes
|
||||
to the element. You can use string (similarly to ${el("code", "class=\"…\"")} syntax in HTML) or
|
||||
array of strings. This is handy to concat conditional classes.
|
||||
to the element. You can use string (similarly to ${el("code", "class=\"…\"")} syntax in HTML).
|
||||
`),
|
||||
el("li").append(...T`
|
||||
Use ${el("code", "classList")} to toggle specific classes. This will be handy later when
|
||||
|
||||
59
index.d.ts
vendored
59
index.d.ts
vendored
@ -8,14 +8,16 @@ type SupportedElement=
|
||||
| CustomElementTagNameMap[keyof CustomElementTagNameMap]
|
||||
declare global {
|
||||
type ddeComponentAttributes= Record<any, any> | undefined;
|
||||
type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
|
||||
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
|
||||
type ddeString= string | ddeSignal<string>
|
||||
type ddeStringable= ddeString | number | ddeSignal<number>
|
||||
}
|
||||
type PascalCase= `${Capitalize<string>}${string}`;
|
||||
type AttrsModified= {
|
||||
/**
|
||||
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
|
||||
*/
|
||||
style: string | Partial<CSSStyleDeclaration> | ddeSignal<string>
|
||||
style: Partial<CSSStyleDeclaration> | ddeString
|
||||
| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
|
||||
/**
|
||||
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
|
||||
@ -24,16 +26,21 @@ type AttrsModified= {
|
||||
*/
|
||||
classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
|
||||
/**
|
||||
* By default simiral to `className`, but also supports `string[]`
|
||||
* Used by the dataset HTML attribute to represent data for custom attributes added to elements.
|
||||
* Values are converted to string (see {@link DOMStringMap}).
|
||||
*
|
||||
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
|
||||
* */
|
||||
className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
|
||||
dataset: Record<string, ddeStringable>,
|
||||
/**
|
||||
* Sets `aria-*` simiraly to `dataset`
|
||||
* */
|
||||
ariaset: Record<string,string|ddeSignal<string>>,
|
||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>>
|
||||
ariaset: Record<string, ddeString>,
|
||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString>
|
||||
& Record<`.${string}`, any>
|
||||
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
|
||||
type IsReadonly<T, K extends keyof T> =
|
||||
T extends { readonly [P in K]: T[K] } ? true : false;
|
||||
/**
|
||||
* Just element attributtes
|
||||
*
|
||||
@ -45,7 +52,9 @@ type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModifi
|
||||
* @private
|
||||
*/
|
||||
type ElementAttributes<T extends SupportedElement>= Partial<{
|
||||
[K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
|
||||
[K in keyof _fromElsInterfaces<T>]: IsReadonly<_fromElsInterfaces<T>, K> extends false
|
||||
? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
|
||||
: ddeStringable
|
||||
} & AttrsModified> & Record<string, any>;
|
||||
export function classListDeclarative<El extends SupportedElement>(
|
||||
element: El,
|
||||
@ -59,21 +68,21 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
|
||||
): ElementAttributes<El>[ATT]
|
||||
|
||||
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
|
||||
type textContent= string | ddeSignal<string>;
|
||||
export function el<
|
||||
TAG extends keyof ExtendedHTMLElementTagNameMap,
|
||||
EL extends ExtendedHTMLElementTagNameMap[TAG]
|
||||
>(
|
||||
tag_name: TAG,
|
||||
attrs?: ElementAttributes<EL> | textContent,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeString,
|
||||
...addons: ddeElementAddon<
|
||||
ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
|
||||
>[], // TODO: for now addons must have the same element
|
||||
): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
|
||||
export function el(
|
||||
tag_name?: "<>",
|
||||
): ddeDocumentFragment
|
||||
export function el(
|
||||
tag_name: string,
|
||||
attrs?: ElementAttributes<HTMLElement> | textContent,
|
||||
attrs?: ElementAttributes<HTMLElement> | ddeString,
|
||||
...addons: ddeElementAddon<HTMLElement>[]
|
||||
): ddeHTMLElement
|
||||
|
||||
@ -81,7 +90,7 @@ export function el<
|
||||
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
|
||||
>(
|
||||
component: C,
|
||||
attrs?: Parameters<C>[0] | textContent,
|
||||
attrs?: Parameters<C>[0] | ddeString,
|
||||
...addons: ddeElementAddon<ReturnType<C>>[]
|
||||
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
|
||||
? ReturnType<C>
|
||||
@ -95,8 +104,8 @@ export function elNS(
|
||||
EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
|
||||
>(
|
||||
tag_name: TAG,
|
||||
attrs?: ElementAttributes<EL> | textContent,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
attrs?: ElementAttributes<NoInfer<EL>> | ddeString,
|
||||
...addons: ddeElementAddon<NoInfer<EL>>[]
|
||||
)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
|
||||
export function elNS(
|
||||
namespace: "http://www.w3.org/1998/Math/MathML"
|
||||
@ -105,16 +114,16 @@ export function elNS(
|
||||
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
|
||||
>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | textContent | Partial<{
|
||||
attrs?: ddeString | Partial<{
|
||||
[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
|
||||
}>,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
...addons: ddeElementAddon<NoInfer<EL>>[]
|
||||
)=> ddeMathMLElement
|
||||
export function elNS(
|
||||
namespace: string
|
||||
): (
|
||||
tag_name: string,
|
||||
attrs?: string | textContent | Record<string, any>,
|
||||
attrs?: string | ddeString | Record<string, any>,
|
||||
...addons: ddeElementAddon<SupportedElement>[]
|
||||
)=> SupportedElement
|
||||
export { elNS as createElementNS }
|
||||
@ -149,18 +158,18 @@ export function dispatchEvent(
|
||||
interface On{
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never ),
|
||||
Event extends keyof DocumentEventMap>(
|
||||
Event extends keyof DocumentEventMap,
|
||||
EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
|
||||
>(
|
||||
type: Event,
|
||||
listener: (this: El, ev: DocumentEventMap[Event]) => any,
|
||||
listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )>(
|
||||
EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
|
||||
>(
|
||||
type: string,
|
||||
listener: (this: El, ev: Event | CustomEvent ) => any,
|
||||
listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
|
||||
|
||||
37
src/dom.js
37
src/dom.js
@ -69,6 +69,19 @@ export function createElement(tag, attributes, ...addons){
|
||||
scoped= 2;
|
||||
return el;
|
||||
}
|
||||
/**
|
||||
* @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs
|
||||
* @param {boolean} [is_open=false]
|
||||
* */
|
||||
createElement.mark= function(attrs, is_open= false){
|
||||
attrs= Object.entries(attrs).map(([ n, v ])=> n+`="${v}"`).join(" ");
|
||||
const end= is_open ? "" : "/";
|
||||
const out= env.D.createComment(`<dde:mark ${attrs}${env.ssr}${end}>`);
|
||||
if(is_open) out.end= env.D.createComment("</dde:mark>");
|
||||
return out;
|
||||
};
|
||||
export { createElement as el };
|
||||
|
||||
import { hasOwn } from "./helpers.js";
|
||||
/** @param {HTMLElement} element @param {HTMLElement} [root] */
|
||||
export function simulateSlots(element, root, mapper){
|
||||
@ -110,25 +123,14 @@ export function simulateSlots(element, root, mapper){
|
||||
}
|
||||
return root;
|
||||
}
|
||||
export function cn(...s){ return s.filter(Boolean).join(" "); }
|
||||
function simulateSlotReplace(slot, element, mapper){
|
||||
if(mapper) mapper(slot, element);
|
||||
try{ slot.replaceWith(assign(element, {
|
||||
className: [ element.className, slot.className ],
|
||||
className: cn(element.className, slot.className),
|
||||
dataset: { ...slot.dataset } })); }
|
||||
catch(_){ slot.replaceWith(element); }
|
||||
}
|
||||
/**
|
||||
* @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs
|
||||
* @param {boolean} [is_open=false]
|
||||
* */
|
||||
createElement.mark= function(attrs, is_open= false){
|
||||
attrs= Object.entries(attrs).map(([ n, v ])=> n+`="${v}"`).join(" ");
|
||||
const end= is_open ? "" : "/";
|
||||
const out= env.D.createComment(`<dde:mark ${attrs}${env.ssr}${end}>`);
|
||||
if(is_open) out.end= env.D.createComment("</dde:mark>");
|
||||
return out;
|
||||
};
|
||||
export { createElement as el };
|
||||
|
||||
//const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns;
|
||||
export function createElementNS(ns){
|
||||
@ -198,10 +200,6 @@ export function classListDeclarative(element, toggle){
|
||||
element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val)));
|
||||
return element;
|
||||
}
|
||||
export function empty(el){
|
||||
Array.from(el.children).forEach(el=> el.remove());
|
||||
return el;
|
||||
}
|
||||
export function elementAttribute(element, op, key, value){
|
||||
if(element instanceof env.H)
|
||||
return element[op+"Attribute"](key, value);
|
||||
@ -234,10 +232,9 @@ function forEachEntries(s, obj, cb){
|
||||
});
|
||||
}
|
||||
|
||||
function attrArrToStr(attr){ return Array.isArray(attr) ? attr.filter(Boolean).join(" ") : attr; }
|
||||
function setRemove(obj, prop, key, val){
|
||||
return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, attrArrToStr(val)); }
|
||||
return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, val); }
|
||||
function setRemoveNS(obj, prop, key, val, ns= null){
|
||||
return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, attrArrToStr(val)); }
|
||||
return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, val); }
|
||||
function setDelete(obj, key, val){
|
||||
Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key); }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user