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

⚡ 🐛 removed #23, fixed readonly & ddeStringable

Browse Source
This commit is contained in:
Jan Andrle 2024-12-11 17:05:03 +01:00
parent 4c2edcf58c
commit 2105776d2a
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
10 changed files with 184 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,16 +36,16 @@ function q(t, e) {
function F(t, e) { function F(t, e) {
let { observedAttributes: n = [] } = t.constructor; let { observedAttributes: n = [] } = t.constructor;
return n.reduce(function(r, o) { 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()); return t.replace(/-./g, (e) => e[1].toUpperCase());
} }
// src/dom-common.js // src/dom-common.js
var d = { var d = {
setDeleteAttr: lt, setDeleteAttr: pt,
ssr: "", ssr: "",
D: globalThis.document, D: globalThis.document,
F: globalThis.DocumentFragment, F: globalThis.DocumentFragment,
@ -53,7 +53,7 @@ var d = {
S: globalThis.SVGElement, S: globalThis.SVGElement,
M: globalThis.MutationObserver M: globalThis.MutationObserver
}; };
function lt(t, e, n) { function pt(t, e, n) {
if (Reflect.set(t, e, n), !!S(n)) { if (Reflect.set(t, e, n), !!S(n)) {
if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined") if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined")
return t.removeAttribute(e); return t.removeAttribute(e);
@ -98,7 +98,7 @@ var A = [{
function Y(...t) { function Y(...t) {
return this.appendOriginal(...t), this; return this.appendOriginal(...t), this;
} }
function ht(t) { function lt(t) {
return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t; return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;
} }
var $; var $;
@ -131,7 +131,7 @@ function P(t, e, ...n) {
case !c: case !c:
c = j.call(this, d.D.createElement(t), e); c = j.call(this, d.D.createElement(t), e);
} }
return ht(c), i || (i = c), n.forEach((a) => a(i)), o && x.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) { P.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
@ -162,11 +162,14 @@ function Wt(t, e, n) {
} }
return e; return e;
} }
function ht(...t) {
return t.filter(Boolean).join(" ");
}
function bt(t, e, n) { function bt(t, e, n) {
n && n(t, e); n && n(t, e);
try { try {
t.replaceWith(j(e, { t.replaceWith(j(e, {
className: [e.className, t.className], className: ht(e.className, t.className),
dataset: { ...t.dataset } dataset: { ...t.dataset }
})); }));
} catch { } catch {
@ -251,14 +254,11 @@ function I(t, e, n) {
o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); 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) { 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) { 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) { function et(t, e, n) {
if (Reflect.set(t, e, n), !!S(n)) if (Reflect.set(t, e, n), !!S(n))
@ -410,14 +410,14 @@ function w(t, e, n) {
return o.addEventListener(t, e, n), o; return o.addEventListener(t, e, n), o;
}; };
} }
var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); var ct = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
w.connected = function(t, e) { w.connected = function(t, e) {
return e = it(e), function(r) { 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); 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);
}; };
}; };
w.disconnected = function(t, e) { w.disconnected = function(t, e) {
return e = it(e), function(r) { 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; return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;
}; };
}; };
@ -453,11 +453,11 @@ function z(t) {
var H = [], g = /* @__PURE__ */ new WeakMap(); var H = [], g = /* @__PURE__ */ new WeakMap();
function E(t, e) { function E(t, e) {
if (typeof t != "function") if (typeof t != "function")
return st(!1, t, e); return it(!1, t, e);
if (z(t)) return t; if (z(t)) return t;
let n = st(!0), r = function() { let n = it(!0), r = function() {
let [o, ...c] = g.get(r); 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); let i = g.get(r);
for (let a of c) for (let a of c)
i.has(a) || L(a, r); i.has(a) || L(a, r);
@ -516,7 +516,7 @@ E.el = function(t, e) {
y.remove(); y.remove();
m.remove(), n.isConnected && St(c.host()); m.remove(), n.isConnected && St(c.host());
}; };
return Q(t, a), ft(t, a, n, e), a(t()), o; return Q(t, a), ut(t, a, n, e), a(t()), o;
}; };
function St(t) { function St(t) {
!t || !t[R] || (requestIdleCallback || setTimeout)(function() { !t || !t[R] || (requestIdleCallback || setTimeout)(function() {
@ -530,7 +530,7 @@ var Ot = {
}; };
function Ct(t) { function Ct(t) {
return function(e, n) { 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; return t[n] = o, o;
}; };
} }
@ -548,7 +548,7 @@ E.observedAttributes = function(t) {
E.clear(...Object.values(this[G])); E.clear(...Object.values(this[G]));
})(t), n; })(t), n;
}; };
var ut = { var st = {
isSignal: z, isSignal: z,
processReactiveAttribute(t, e, n, r) { processReactiveAttribute(t, e, n, r) {
if (!z(n)) return n; if (!z(n)) return n;
@ -557,10 +557,10 @@ var ut = {
return L(n, o); return L(n, o);
r(e, c); 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) { function ut(t, e, ...n) {
let { current: r } = x; let { current: r } = x;
r.prevent || r.host(function(o) { r.prevent || r.host(function(o) {
o[R] || (o[R] = [], w.disconnected( o[R] || (o[R] = [], w.disconnected(
@ -574,9 +574,9 @@ function ft(t, e, ...n) {
)(o)), o[R].push([[t, e], ...n]); )(o)), o[R].push([[t, e], ...n]);
}); });
} }
function st(t, e, n) { function it(t, e, n) {
let r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r); let r = t ? () => K(r) : (...o) => o.length ? at(r, ...o) : K(r);
return at(r, e, n, t); return ft(r, e, n, t);
} }
var Dt = Object.assign(/* @__PURE__ */ Object.create(null), { var Dt = Object.assign(/* @__PURE__ */ Object.create(null), {
stopPropagation() { stopPropagation() {
@ -590,7 +590,7 @@ var Dt = Object.assign(/* @__PURE__ */ Object.create(null), {
this.stack = n.find((o) => !o.includes(r)); this.stack = n.find((o) => !o.includes(r));
} }
}; };
function at(t, e, n, r = !1) { function ft(t, e, n, r = !1) {
let o = []; let o = [];
X(n) !== "[object Object]" && (n = {}); X(n) !== "[object Object]" && (n = {});
let { onclear: c } = E.symbols; let { onclear: c } = E.symbols;
@ -619,7 +619,7 @@ function K(t) {
let { value: e, listeners: n } = t[l], r = Rt(); let { value: e, listeners: n } = t[l], r = Rt();
return r && n.add(r), g.has(r) && g.get(r).add(t), e; return r && n.add(r), g.has(r) && g.get(r).add(t), e;
} }
function dt(t, e, n) { function at(t, e, n) {
if (!t[l]) return; if (!t[l]) return;
let r = t[l]; let r = t[l];
if (!(!n && r.value === e)) if (!(!n && r.value === e))
@ -643,14 +643,15 @@ function L(t, e, n) {
} }
// signals.js // signals.js
B(ut); B(st);
globalThis.dde= { globalThis.dde= {
S: E, S: E,
assign: j, assign: j,
assignAttribute: nt, assignAttribute: nt,
chainableAppend: ht, chainableAppend: lt,
classListDeclarative: gt, classListDeclarative: gt,
cn: ht,
createElement: P, createElement: P,
createElementNS: qt, createElementNS: qt,
customElementRender: Jt, customElementRender: Jt,

55
dist/dde.js vendored
View File

@ -9,7 +9,7 @@ var m = {
return n; return n;
} }
}; };
function V(t, e = !0) { function G(t, e = !0) {
return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t); return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t);
} }
function L(t) { function L(t) {
@ -32,16 +32,16 @@ function N(t, e) {
function F(t, e) { function F(t, e) {
let { observedAttributes: n = [] } = t.constructor; let { observedAttributes: n = [] } = t.constructor;
return n.reduce(function(r, o) { 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()); return t.replace(/-./g, (e) => e[1].toUpperCase());
} }
// src/dom-common.js // src/dom-common.js
var a = { var a = {
setDeleteAttr: K, setDeleteAttr: J,
ssr: "", ssr: "",
D: globalThis.document, D: globalThis.document,
F: globalThis.DocumentFragment, F: globalThis.DocumentFragment,
@ -49,7 +49,7 @@ var a = {
S: globalThis.SVGElement, S: globalThis.SVGElement,
M: globalThis.MutationObserver M: globalThis.MutationObserver
}; };
function K(t, e, n) { function J(t, e, n) {
if (Reflect.set(t, e, n), !!x(n)) { if (Reflect.set(t, e, n), !!x(n)) {
if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined") if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined")
return t.removeAttribute(e); return t.removeAttribute(e);
@ -57,7 +57,7 @@ function K(t, e, n) {
return Reflect.set(t, e, ""); return Reflect.set(t, e, "");
} }
} }
var y = "__dde_lifecyclesToEvents", g = "dde:connected", w = "dde:disconnected", D = "dde:attributeChanged"; var w = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged";
// src/dom.js // src/dom.js
var v = [{ var v = [{
@ -94,7 +94,7 @@ var v = [{
function $(...t) { function $(...t) {
return this.appendOriginal(...t), this; return this.appendOriginal(...t), this;
} }
function Q(t) { function K(t) {
return t.append === $ || (t.appendOriginal = t.append, t.append = $), t; return t.append === $ || (t.appendOriginal = t.append, t.append = $), t;
} }
var T; var T;
@ -127,7 +127,7 @@ function j(t, e, ...n) {
case !c: case !c:
c = O.call(this, a.D.createElement(t), e); c = O.call(this, a.D.createElement(t), e);
} }
return Q(c), f || (f = c), n.forEach((d) => d(f)), o && 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) { j.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
@ -158,11 +158,14 @@ function bt(t, e, n) {
} }
return e; return e;
} }
function Q(...t) {
return t.filter(Boolean).join(" ");
}
function X(t, e, n) { function X(t, e, n) {
n && n(t, e); n && n(t, e);
try { try {
t.replaceWith(O(e, { t.replaceWith(O(e, {
className: [e.className, t.className], className: Q(e.className, t.className),
dataset: { ...t.dataset } dataset: { ...t.dataset }
})); }));
} catch { } catch {
@ -247,14 +250,11 @@ function M(t, e, n) {
o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); 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) { function nt(t, e, n, r) {
return t[(x(r) ? "remove" : "set") + e](n, Z(r)); return t[(x(r) ? "remove" : "set") + e](n, r);
} }
function rt(t, e, n, r, o = null) { function rt(t, e, n, r, o = null) {
return t[(x(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) { function H(t, e, n) {
if (Reflect.set(t, e, n), !!x(n)) if (Reflect.set(t, e, n), !!x(n))
@ -355,7 +355,7 @@ function ot() {
} }
function _(i) { function _(i) {
return () => { return () => {
i.isConnected || (i.dispatchEvent(new Event(w)), t.delete(i)); i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i));
}; };
} }
} }
@ -366,24 +366,24 @@ function mt(t, e, n, r = it) {
scope: t, scope: t,
host: (...f) => f.length ? f.forEach((d) => d(t)) : t host: (...f) => f.length ? f.forEach((d) => d(t)) : t
}), typeof r == "function" && (r = r.call(t, t)); }), typeof r == "function" && (r = r.call(t, t));
let o = t[y]; let o = t[w];
o || ct(t); o || ct(t);
let c = n.call(t, r); let c = n.call(t, r);
return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(w, A.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) { function ct(t) {
return k(t.prototype, "connectedCallback", function(e, n, r) { return k(t.prototype, "connectedCallback", function(e, n, r) {
e.apply(n, r), n.dispatchEvent(new Event(g)); e.apply(n, r), n.dispatchEvent(new Event(g));
}), k(t.prototype, "disconnectedCallback", function(e, n, r) { }), k(t.prototype, "disconnectedCallback", function(e, n, r) {
e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
() => !n.isConnected && n.dispatchEvent(new Event(w)) () => !n.isConnected && n.dispatchEvent(new Event(y))
); );
}), k(t.prototype, "attributeChangedCallback", function(e, n, r) { }), k(t.prototype, "attributeChangedCallback", function(e, n, r) {
let [o, , c] = r; let [o, , c] = r;
n.dispatchEvent(new CustomEvent(D, { n.dispatchEvent(new CustomEvent(D, {
detail: [o, c] detail: [o, c]
})), e.apply(n, r); })), e.apply(n, r);
}), t.prototype[y] = !0, t; }), t.prototype[w] = !0, t;
} }
function k(t, e, n) { function k(t, e, n) {
t[e] = new Proxy(t[e] || (() => { t[e] = new Proxy(t[e] || (() => {
@ -406,15 +406,15 @@ function R(t, e, n) {
return o.addEventListener(t, e, n), o; 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) { R.connected = function(t, e) {
return e = G(e), function(r) { return e = Z(e), function(r) {
return r.addEventListener(g, t, e), r[y] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.onConnected(r, t), r); 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) { R.disconnected = function(t, e) {
return e = G(e), function(r) { return e = Z(e), function(r) {
return r.addEventListener(w, t, e), r[y] || N(e.signal, () => A.offDisconnected(r, t)) && A.onDisconnected(r, t), 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(); var W = /* @__PURE__ */ new WeakMap();
@ -426,7 +426,7 @@ R.disconnectedAsAbort = function(t) {
var st = /* @__PURE__ */ new WeakSet(); var st = /* @__PURE__ */ new WeakSet();
R.attributeChanged = function(t, e) { R.attributeChanged = function(t, e) {
return typeof e != "object" && (e = {}), function(r) { return typeof e != "object" && (e = {}), function(r) {
if (r.addEventListener(D, t, e), r[y] || 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) { let o = new a.M(function(f) {
for (let { attributeName: d, target: p } of f) for (let { attributeName: d, target: p } of f)
p.dispatchEvent( p.dispatchEvent(
@ -440,8 +440,9 @@ R.attributeChanged = function(t, e) {
globalThis.dde= { globalThis.dde= {
assign: O, assign: O,
assignAttribute: z, assignAttribute: z,
chainableAppend: Q, chainableAppend: K,
classListDeclarative: Y, classListDeclarative: Y,
cn: Q,
createElement: j, createElement: j,
createElementNS: gt, createElementNS: gt,
customElementRender: mt, customElementRender: mt,
@ -453,7 +454,7 @@ globalThis.dde= {
lifecyclesToEvents: ct, lifecyclesToEvents: ct,
observedAttributes: it, observedAttributes: it,
on: R, on: R,
registerReactivity: V, registerReactivity: G,
scope: S, scope: S,
simulateSlots: bt simulateSlots: bt
}; };

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

@ -8,6 +8,8 @@ type SupportedElement=
declare global { declare global {
type ddeComponentAttributes= Record<any, any> | undefined; type ddeComponentAttributes= Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
type ddeString= string | ddeSignal<string>
type ddeStringable= ddeString | number | ddeSignal<number>
} }
type PascalCase= type PascalCase=
`${Capitalize<string>}${string}`; `${Capitalize<string>}${string}`;
@ -15,7 +17,7 @@ type AttrsModified= {
/** /**
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API). * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
*/ */
style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> style: Partial<CSSStyleDeclaration> | ddeString
| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
/** /**
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
@ -23,24 +25,22 @@ type AttrsModified= {
* for others. * for others.
*/ */
classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>, classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
/**
* By default simiral to `className`, but also supports `string[]`
* */
className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
/** /**
* Used by the dataset HTML attribute to represent data for custom attributes added to elements. * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
* Values are converted to string (see {@link DOMStringMap}). * Values are converted to string (see {@link DOMStringMap}).
* *
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap) * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
* */ * */
dataset: Record<string,string|number|ddeSignal<string|number>>, dataset: Record<string, ddeStringable>,
/** /**
* Sets `aria-*` simiraly to `dataset` * Sets `aria-*` simiraly to `dataset`
* */ * */
ariaset: Record<string,string|ddeSignal<string>>, ariaset: Record<string, ddeString>,
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> } & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString>
& Record<`.${string}`, any> & Record<`.${string}`, any>
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>; 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 * Just element attributtes
* *
@ -52,7 +52,9 @@ type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModifi
* @private * @private
*/ */
type ElementAttributes<T extends SupportedElement>= Partial<{ 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>; } & AttrsModified> & Record<string, any>;
export function classListDeclarative<El extends SupportedElement>( export function classListDeclarative<El extends SupportedElement>(
element: El, element: El,
@ -66,20 +68,21 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
): ElementAttributes<El>[ATT] ): ElementAttributes<El>[ATT]
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
type textContent= string | ddeSignal<string>;
export function el< export function el<
TAG extends keyof ExtendedHTMLElementTagNameMap, TAG extends keyof ExtendedHTMLElementTagNameMap,
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | textContent, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeString,
...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[], // TODO: for now addons must have the same element ...addons: ddeElementAddon<
ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
>[], // TODO: for now addons must have the same element
): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement ): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
export function el( export function el(
tag_name?: "<>", tag_name?: "<>",
): ddeDocumentFragment ): ddeDocumentFragment
export function el( export function el(
tag_name: string, tag_name: string,
attrs?: ElementAttributes<HTMLElement> | textContent, attrs?: ElementAttributes<HTMLElement> | ddeString,
...addons: ddeElementAddon<HTMLElement>[] ...addons: ddeElementAddon<HTMLElement>[]
): ddeHTMLElement ): ddeHTMLElement
@ -87,7 +90,7 @@ export function el<
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
>( >(
component: C, component: C,
attrs?: Parameters<C>[0] | textContent, attrs?: Parameters<C>[0] | ddeString,
...addons: ddeElementAddon<ReturnType<C>>[] ...addons: ddeElementAddon<ReturnType<C>>[]
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
? ReturnType<C> ? ReturnType<C>
@ -101,7 +104,7 @@ export function elNS(
EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<NoInfer<EL>> | textContent, attrs?: ElementAttributes<NoInfer<EL>> | ddeString,
...addons: ddeElementAddon<NoInfer<EL>>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement )=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
export function elNS( export function elNS(
@ -111,7 +114,7 @@ export function elNS(
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ), EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: string | textContent | Partial<{ attrs?: ddeString | Partial<{
[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
}>, }>,
...addons: ddeElementAddon<NoInfer<EL>>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
@ -120,7 +123,7 @@ export function elNS(
namespace: string namespace: string
): ( ): (
tag_name: string, tag_name: string,
attrs?: string | textContent | Record<string, any>, attrs?: string | ddeString | Record<string, any>,
...addons: ddeElementAddon<SupportedElement>[] ...addons: ddeElementAddon<SupportedElement>[]
)=> SupportedElement )=> SupportedElement
export { elNS as createElementNS } export { elNS as createElementNS }

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

@ -34,16 +34,16 @@ function q(t, e) {
function F(t, e) { function F(t, e) {
let { observedAttributes: n = [] } = t.constructor; let { observedAttributes: n = [] } = t.constructor;
return n.reduce(function(r, o) { 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()); return t.replace(/-./g, (e) => e[1].toUpperCase());
} }
// src/dom-common.js // src/dom-common.js
var d = { var d = {
setDeleteAttr: lt, setDeleteAttr: pt,
ssr: "", ssr: "",
D: globalThis.document, D: globalThis.document,
F: globalThis.DocumentFragment, F: globalThis.DocumentFragment,
@ -51,7 +51,7 @@ var d = {
S: globalThis.SVGElement, S: globalThis.SVGElement,
M: globalThis.MutationObserver M: globalThis.MutationObserver
}; };
function lt(t, e, n) { function pt(t, e, n) {
if (Reflect.set(t, e, n), !!S(n)) { if (Reflect.set(t, e, n), !!S(n)) {
if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined") if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined")
return t.removeAttribute(e); return t.removeAttribute(e);
@ -96,7 +96,7 @@ var A = [{
function Y(...t) { function Y(...t) {
return this.appendOriginal(...t), this; return this.appendOriginal(...t), this;
} }
function ht(t) { function lt(t) {
return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t; return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;
} }
var $; var $;
@ -129,7 +129,7 @@ function P(t, e, ...n) {
case !c: case !c:
c = j.call(this, d.D.createElement(t), e); c = j.call(this, d.D.createElement(t), e);
} }
return ht(c), i || (i = c), n.forEach((a) => a(i)), o && x.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) { P.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
@ -160,11 +160,14 @@ function Wt(t, e, n) {
} }
return e; return e;
} }
function ht(...t) {
return t.filter(Boolean).join(" ");
}
function bt(t, e, n) { function bt(t, e, n) {
n && n(t, e); n && n(t, e);
try { try {
t.replaceWith(j(e, { t.replaceWith(j(e, {
className: [e.className, t.className], className: ht(e.className, t.className),
dataset: { ...t.dataset } dataset: { ...t.dataset }
})); }));
} catch { } catch {
@ -249,14 +252,11 @@ function I(t, e, n) {
o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); 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) { 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) { 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) { function et(t, e, n) {
if (Reflect.set(t, e, n), !!S(n)) if (Reflect.set(t, e, n), !!S(n))
@ -408,14 +408,14 @@ function w(t, e, n) {
return o.addEventListener(t, e, n), o; return o.addEventListener(t, e, n), o;
}; };
} }
var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); var ct = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
w.connected = function(t, e) { w.connected = function(t, e) {
return e = it(e), function(r) { 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); 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);
}; };
}; };
w.disconnected = function(t, e) { w.disconnected = function(t, e) {
return e = it(e), function(r) { 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; return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;
}; };
}; };
@ -451,11 +451,11 @@ function z(t) {
var H = [], g = /* @__PURE__ */ new WeakMap(); var H = [], g = /* @__PURE__ */ new WeakMap();
function E(t, e) { function E(t, e) {
if (typeof t != "function") if (typeof t != "function")
return st(!1, t, e); return it(!1, t, e);
if (z(t)) return t; if (z(t)) return t;
let n = st(!0), r = function() { let n = it(!0), r = function() {
let [o, ...c] = g.get(r); 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); let i = g.get(r);
for (let a of c) for (let a of c)
i.has(a) || L(a, r); i.has(a) || L(a, r);
@ -514,7 +514,7 @@ E.el = function(t, e) {
y.remove(); y.remove();
m.remove(), n.isConnected && St(c.host()); m.remove(), n.isConnected && St(c.host());
}; };
return Q(t, a), ft(t, a, n, e), a(t()), o; return Q(t, a), ut(t, a, n, e), a(t()), o;
}; };
function St(t) { function St(t) {
!t || !t[R] || (requestIdleCallback || setTimeout)(function() { !t || !t[R] || (requestIdleCallback || setTimeout)(function() {
@ -528,7 +528,7 @@ var Ot = {
}; };
function Ct(t) { function Ct(t) {
return function(e, n) { 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; return t[n] = o, o;
}; };
} }
@ -546,7 +546,7 @@ E.observedAttributes = function(t) {
E.clear(...Object.values(this[G])); E.clear(...Object.values(this[G]));
})(t), n; })(t), n;
}; };
var ut = { var st = {
isSignal: z, isSignal: z,
processReactiveAttribute(t, e, n, r) { processReactiveAttribute(t, e, n, r) {
if (!z(n)) return n; if (!z(n)) return n;
@ -555,10 +555,10 @@ var ut = {
return L(n, o); return L(n, o);
r(e, c); 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) { function ut(t, e, ...n) {
let { current: r } = x; let { current: r } = x;
r.prevent || r.host(function(o) { r.prevent || r.host(function(o) {
o[R] || (o[R] = [], w.disconnected( o[R] || (o[R] = [], w.disconnected(
@ -572,9 +572,9 @@ function ft(t, e, ...n) {
)(o)), o[R].push([[t, e], ...n]); )(o)), o[R].push([[t, e], ...n]);
}); });
} }
function st(t, e, n) { function it(t, e, n) {
let r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r); let r = t ? () => K(r) : (...o) => o.length ? at(r, ...o) : K(r);
return at(r, e, n, t); return ft(r, e, n, t);
} }
var Dt = Object.assign(/* @__PURE__ */ Object.create(null), { var Dt = Object.assign(/* @__PURE__ */ Object.create(null), {
stopPropagation() { stopPropagation() {
@ -588,7 +588,7 @@ var Dt = Object.assign(/* @__PURE__ */ Object.create(null), {
this.stack = n.find((o) => !o.includes(r)); this.stack = n.find((o) => !o.includes(r));
} }
}; };
function at(t, e, n, r = !1) { function ft(t, e, n, r = !1) {
let o = []; let o = [];
X(n) !== "[object Object]" && (n = {}); X(n) !== "[object Object]" && (n = {});
let { onclear: c } = E.symbols; let { onclear: c } = E.symbols;
@ -617,7 +617,7 @@ function K(t) {
let { value: e, listeners: n } = t[l], r = Rt(); let { value: e, listeners: n } = t[l], r = Rt();
return r && n.add(r), g.has(r) && g.get(r).add(t), e; return r && n.add(r), g.has(r) && g.get(r).add(t), e;
} }
function dt(t, e, n) { function at(t, e, n) {
if (!t[l]) return; if (!t[l]) return;
let r = t[l]; let r = t[l];
if (!(!n && r.value === e)) if (!(!n && r.value === e))
@ -641,13 +641,14 @@ function L(t, e, n) {
} }
// signals.js // signals.js
B(ut); B(st);
export { export {
E as S, E as S,
j as assign, j as assign,
nt as assignAttribute, nt as assignAttribute,
ht as chainableAppend, lt as chainableAppend,
gt as classListDeclarative, gt as classListDeclarative,
ht as cn,
P as createElement, P as createElement,
qt as createElementNS, qt as createElementNS,
Jt as customElementRender, Jt as customElementRender,

37
dist/esm.d.ts vendored
View File

@ -8,6 +8,8 @@ type SupportedElement=
declare global { declare global {
type ddeComponentAttributes= Record<any, any> | undefined; type ddeComponentAttributes= Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
type ddeString= string | ddeSignal<string>
type ddeStringable= ddeString | number | ddeSignal<number>
} }
type PascalCase= type PascalCase=
`${Capitalize<string>}${string}`; `${Capitalize<string>}${string}`;
@ -15,7 +17,7 @@ type AttrsModified= {
/** /**
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API). * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
*/ */
style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> style: Partial<CSSStyleDeclaration> | ddeString
| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
/** /**
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
@ -23,24 +25,22 @@ type AttrsModified= {
* for others. * for others.
*/ */
classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>, classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
/**
* By default simiral to `className`, but also supports `string[]`
* */
className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
/** /**
* Used by the dataset HTML attribute to represent data for custom attributes added to elements. * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
* Values are converted to string (see {@link DOMStringMap}). * Values are converted to string (see {@link DOMStringMap}).
* *
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap) * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
* */ * */
dataset: Record<string,string|number|ddeSignal<string|number>>, dataset: Record<string, ddeStringable>,
/** /**
* Sets `aria-*` simiraly to `dataset` * Sets `aria-*` simiraly to `dataset`
* */ * */
ariaset: Record<string,string|ddeSignal<string>>, ariaset: Record<string, ddeString>,
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> } & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString>
& Record<`.${string}`, any> & Record<`.${string}`, any>
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>; 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 * Just element attributtes
* *
@ -52,7 +52,9 @@ type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModifi
* @private * @private
*/ */
type ElementAttributes<T extends SupportedElement>= Partial<{ 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>; } & AttrsModified> & Record<string, any>;
export function classListDeclarative<El extends SupportedElement>( export function classListDeclarative<El extends SupportedElement>(
element: El, element: El,
@ -66,20 +68,21 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
): ElementAttributes<El>[ATT] ): ElementAttributes<El>[ATT]
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
type textContent= string | ddeSignal<string>;
export function el< export function el<
TAG extends keyof ExtendedHTMLElementTagNameMap, TAG extends keyof ExtendedHTMLElementTagNameMap,
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | textContent, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeString,
...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[], // TODO: for now addons must have the same element ...addons: ddeElementAddon<
ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
>[], // TODO: for now addons must have the same element
): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement ): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
export function el( export function el(
tag_name?: "<>", tag_name?: "<>",
): ddeDocumentFragment ): ddeDocumentFragment
export function el( export function el(
tag_name: string, tag_name: string,
attrs?: ElementAttributes<HTMLElement> | textContent, attrs?: ElementAttributes<HTMLElement> | ddeString,
...addons: ddeElementAddon<HTMLElement>[] ...addons: ddeElementAddon<HTMLElement>[]
): ddeHTMLElement ): ddeHTMLElement
@ -87,7 +90,7 @@ export function el<
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
>( >(
component: C, component: C,
attrs?: Parameters<C>[0] | textContent, attrs?: Parameters<C>[0] | ddeString,
...addons: ddeElementAddon<ReturnType<C>>[] ...addons: ddeElementAddon<ReturnType<C>>[]
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
? ReturnType<C> ? ReturnType<C>
@ -101,7 +104,7 @@ export function elNS(
EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<NoInfer<EL>> | textContent, attrs?: ElementAttributes<NoInfer<EL>> | ddeString,
...addons: ddeElementAddon<NoInfer<EL>>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement )=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
export function elNS( export function elNS(
@ -111,7 +114,7 @@ export function elNS(
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ), EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: string | textContent | Partial<{ attrs?: ddeString | Partial<{
[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
}>, }>,
...addons: ddeElementAddon<NoInfer<EL>>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
@ -120,7 +123,7 @@ export function elNS(
namespace: string namespace: string
): ( ): (
tag_name: string, tag_name: string,
attrs?: string | textContent | Record<string, any>, attrs?: string | ddeString | Record<string, any>,
...addons: ddeElementAddon<SupportedElement>[] ...addons: ddeElementAddon<SupportedElement>[]
)=> SupportedElement )=> SupportedElement
export { elNS as createElementNS } export { elNS as createElementNS }

55
dist/esm.js vendored
View File

@ -7,7 +7,7 @@ var m = {
return n; return n;
} }
}; };
function V(t, e = !0) { function G(t, e = !0) {
return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t); return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t);
} }
function L(t) { function L(t) {
@ -30,16 +30,16 @@ function N(t, e) {
function F(t, e) { function F(t, e) {
let { observedAttributes: n = [] } = t.constructor; let { observedAttributes: n = [] } = t.constructor;
return n.reduce(function(r, o) { 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()); return t.replace(/-./g, (e) => e[1].toUpperCase());
} }
// src/dom-common.js // src/dom-common.js
var a = { var a = {
setDeleteAttr: K, setDeleteAttr: J,
ssr: "", ssr: "",
D: globalThis.document, D: globalThis.document,
F: globalThis.DocumentFragment, F: globalThis.DocumentFragment,
@ -47,7 +47,7 @@ var a = {
S: globalThis.SVGElement, S: globalThis.SVGElement,
M: globalThis.MutationObserver M: globalThis.MutationObserver
}; };
function K(t, e, n) { function J(t, e, n) {
if (Reflect.set(t, e, n), !!x(n)) { if (Reflect.set(t, e, n), !!x(n)) {
if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined") if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined")
return t.removeAttribute(e); return t.removeAttribute(e);
@ -55,7 +55,7 @@ function K(t, e, n) {
return Reflect.set(t, e, ""); return Reflect.set(t, e, "");
} }
} }
var y = "__dde_lifecyclesToEvents", g = "dde:connected", w = "dde:disconnected", D = "dde:attributeChanged"; var w = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged";
// src/dom.js // src/dom.js
var v = [{ var v = [{
@ -92,7 +92,7 @@ var v = [{
function $(...t) { function $(...t) {
return this.appendOriginal(...t), this; return this.appendOriginal(...t), this;
} }
function Q(t) { function K(t) {
return t.append === $ || (t.appendOriginal = t.append, t.append = $), t; return t.append === $ || (t.appendOriginal = t.append, t.append = $), t;
} }
var T; var T;
@ -125,7 +125,7 @@ function j(t, e, ...n) {
case !c: case !c:
c = O.call(this, a.D.createElement(t), e); c = O.call(this, a.D.createElement(t), e);
} }
return Q(c), f || (f = c), n.forEach((d) => d(f)), o && 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) { j.mark = function(t, e = !1) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
@ -156,11 +156,14 @@ function bt(t, e, n) {
} }
return e; return e;
} }
function Q(...t) {
return t.filter(Boolean).join(" ");
}
function X(t, e, n) { function X(t, e, n) {
n && n(t, e); n && n(t, e);
try { try {
t.replaceWith(O(e, { t.replaceWith(O(e, {
className: [e.className, t.className], className: Q(e.className, t.className),
dataset: { ...t.dataset } dataset: { ...t.dataset }
})); }));
} catch { } catch {
@ -245,14 +248,11 @@ function M(t, e, n) {
o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); 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) { function nt(t, e, n, r) {
return t[(x(r) ? "remove" : "set") + e](n, Z(r)); return t[(x(r) ? "remove" : "set") + e](n, r);
} }
function rt(t, e, n, r, o = null) { function rt(t, e, n, r, o = null) {
return t[(x(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) { function H(t, e, n) {
if (Reflect.set(t, e, n), !!x(n)) if (Reflect.set(t, e, n), !!x(n))
@ -353,7 +353,7 @@ function ot() {
} }
function _(i) { function _(i) {
return () => { return () => {
i.isConnected || (i.dispatchEvent(new Event(w)), t.delete(i)); i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i));
}; };
} }
} }
@ -364,24 +364,24 @@ function mt(t, e, n, r = it) {
scope: t, scope: t,
host: (...f) => f.length ? f.forEach((d) => d(t)) : t host: (...f) => f.length ? f.forEach((d) => d(t)) : t
}), typeof r == "function" && (r = r.call(t, t)); }), typeof r == "function" && (r = r.call(t, t));
let o = t[y]; let o = t[w];
o || ct(t); o || ct(t);
let c = n.call(t, r); let c = n.call(t, r);
return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(w, A.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) { function ct(t) {
return k(t.prototype, "connectedCallback", function(e, n, r) { return k(t.prototype, "connectedCallback", function(e, n, r) {
e.apply(n, r), n.dispatchEvent(new Event(g)); e.apply(n, r), n.dispatchEvent(new Event(g));
}), k(t.prototype, "disconnectedCallback", function(e, n, r) { }), k(t.prototype, "disconnectedCallback", function(e, n, r) {
e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
() => !n.isConnected && n.dispatchEvent(new Event(w)) () => !n.isConnected && n.dispatchEvent(new Event(y))
); );
}), k(t.prototype, "attributeChangedCallback", function(e, n, r) { }), k(t.prototype, "attributeChangedCallback", function(e, n, r) {
let [o, , c] = r; let [o, , c] = r;
n.dispatchEvent(new CustomEvent(D, { n.dispatchEvent(new CustomEvent(D, {
detail: [o, c] detail: [o, c]
})), e.apply(n, r); })), e.apply(n, r);
}), t.prototype[y] = !0, t; }), t.prototype[w] = !0, t;
} }
function k(t, e, n) { function k(t, e, n) {
t[e] = new Proxy(t[e] || (() => { t[e] = new Proxy(t[e] || (() => {
@ -404,15 +404,15 @@ function R(t, e, n) {
return o.addEventListener(t, e, n), o; 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) { R.connected = function(t, e) {
return e = G(e), function(r) { return e = Z(e), function(r) {
return r.addEventListener(g, t, e), r[y] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.onConnected(r, t), r); 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) { R.disconnected = function(t, e) {
return e = G(e), function(r) { return e = Z(e), function(r) {
return r.addEventListener(w, t, e), r[y] || N(e.signal, () => A.offDisconnected(r, t)) && A.onDisconnected(r, t), 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(); var W = /* @__PURE__ */ new WeakMap();
@ -424,7 +424,7 @@ R.disconnectedAsAbort = function(t) {
var st = /* @__PURE__ */ new WeakSet(); var st = /* @__PURE__ */ new WeakSet();
R.attributeChanged = function(t, e) { R.attributeChanged = function(t, e) {
return typeof e != "object" && (e = {}), function(r) { return typeof e != "object" && (e = {}), function(r) {
if (r.addEventListener(D, t, e), r[y] || 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) { let o = new a.M(function(f) {
for (let { attributeName: d, target: p } of f) for (let { attributeName: d, target: p } of f)
p.dispatchEvent( p.dispatchEvent(
@ -437,8 +437,9 @@ R.attributeChanged = function(t, e) {
export { export {
O as assign, O as assign,
z as assignAttribute, z as assignAttribute,
Q as chainableAppend, K as chainableAppend,
Y as classListDeclarative, Y as classListDeclarative,
Q as cn,
j as createElement, j as createElement,
gt as createElementNS, gt as createElementNS,
mt as customElementRender, mt as customElementRender,
@ -450,7 +451,7 @@ export {
ct as lifecyclesToEvents, ct as lifecyclesToEvents,
it as observedAttributes, it as observedAttributes,
R as on, R as on,
V as registerReactivity, G as registerReactivity,
S as scope, S as scope,
bt as simulateSlots bt as simulateSlots
}; };

2
docs/components/examples/elements/dekaBasicComponent.js
View File

@ -11,7 +11,7 @@ document.body.append(
); );
function component({ className, textContent }){ function component({ className, textContent }){
return el("div", { className: [ "class1", className ] }).append( return el("div", { className: [ "class1", className ].join(" ") }).append(
el("p", textContent) el("p", textContent)
); );
} }

3
docs/p02-elements.html.js
View File

@ -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`You can use string or object as a value for ${el("code", "style")} property.`),
el("li").append(...T` el("li").append(...T`
${el("code", "className")} (IDL – preffered)/${el("code", "class")} are ways to add CSS classes ${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 to the element. You can use string (similarly to ${el("code", "class=\"…\"")} syntax in HTML).
array of strings. This is handy to concat conditional classes.
`), `),
el("li").append(...T` el("li").append(...T`
Use ${el("code", "classList")} to toggle specific classes. This will be handy later when Use ${el("code", "classList")} to toggle specific classes. This will be handy later when

37
index.d.ts vendored
View File

@ -9,13 +9,15 @@ type SupportedElement=
declare global { declare global {
type ddeComponentAttributes= Record<any, any> | undefined; type ddeComponentAttributes= Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any; 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 PascalCase= `${Capitalize<string>}${string}`;
type AttrsModified= { type AttrsModified= {
/** /**
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API). * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
*/ */
style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> style: Partial<CSSStyleDeclaration> | ddeString
| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
/** /**
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
@ -23,24 +25,22 @@ type AttrsModified= {
* for others. * for others.
*/ */
classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>, classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
/**
* By default simiral to `className`, but also supports `string[]`
* */
className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
/** /**
* Used by the dataset HTML attribute to represent data for custom attributes added to elements. * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
* Values are converted to string (see {@link DOMStringMap}). * Values are converted to string (see {@link DOMStringMap}).
* *
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap) * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
* */ * */
dataset: Record<string,string|number|ddeSignal<string|number>>, dataset: Record<string, ddeStringable>,
/** /**
* Sets `aria-*` simiraly to `dataset` * Sets `aria-*` simiraly to `dataset`
* */ * */
ariaset: Record<string,string|ddeSignal<string>>, ariaset: Record<string, ddeString>,
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> } & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString>
& Record<`.${string}`, any> & Record<`.${string}`, any>
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>; 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 * Just element attributtes
* *
@ -52,7 +52,9 @@ type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModifi
* @private * @private
*/ */
type ElementAttributes<T extends SupportedElement>= Partial<{ 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>; } & AttrsModified> & Record<string, any>;
export function classListDeclarative<El extends SupportedElement>( export function classListDeclarative<El extends SupportedElement>(
element: El, element: El,
@ -66,20 +68,21 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
): ElementAttributes<El>[ATT] ): ElementAttributes<El>[ATT]
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
type textContent= string | ddeSignal<string>;
export function el< export function el<
TAG extends keyof ExtendedHTMLElementTagNameMap, TAG extends keyof ExtendedHTMLElementTagNameMap,
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | textContent, attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeString,
...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[], // TODO: for now addons must have the same element ...addons: ddeElementAddon<
ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
>[], // TODO: for now addons must have the same element
): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement ): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
export function el( export function el(
tag_name?: "<>", tag_name?: "<>",
): ddeDocumentFragment ): ddeDocumentFragment
export function el( export function el(
tag_name: string, tag_name: string,
attrs?: ElementAttributes<HTMLElement> | textContent, attrs?: ElementAttributes<HTMLElement> | ddeString,
...addons: ddeElementAddon<HTMLElement>[] ...addons: ddeElementAddon<HTMLElement>[]
): ddeHTMLElement ): ddeHTMLElement
@ -87,7 +90,7 @@ export function el<
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
>( >(
component: C, component: C,
attrs?: Parameters<C>[0] | textContent, attrs?: Parameters<C>[0] | ddeString,
...addons: ddeElementAddon<ReturnType<C>>[] ...addons: ddeElementAddon<ReturnType<C>>[]
): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
? ReturnType<C> ? ReturnType<C>
@ -101,7 +104,7 @@ export function elNS(
EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: ElementAttributes<NoInfer<EL>> | textContent, attrs?: ElementAttributes<NoInfer<EL>> | ddeString,
...addons: ddeElementAddon<NoInfer<EL>>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement )=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
export function elNS( export function elNS(
@ -111,7 +114,7 @@ export function elNS(
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ), EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
>( >(
tag_name: TAG, tag_name: TAG,
attrs?: string | textContent | Partial<{ attrs?: ddeString | Partial<{
[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
}>, }>,
...addons: ddeElementAddon<NoInfer<EL>>[] ...addons: ddeElementAddon<NoInfer<EL>>[]
@ -120,7 +123,7 @@ export function elNS(
namespace: string namespace: string
): ( ): (
tag_name: string, tag_name: string,
attrs?: string | textContent | Record<string, any>, attrs?: string | ddeString | Record<string, any>,
...addons: ddeElementAddon<SupportedElement>[] ...addons: ddeElementAddon<SupportedElement>[]
)=> SupportedElement )=> SupportedElement
export { elNS as createElementNS } export { elNS as createElementNS }

8
src/dom.js
View File

@ -123,10 +123,11 @@ export function simulateSlots(element, root, mapper){
} }
return root; return root;
} }
export function cn(...s){ return s.filter(Boolean).join(" "); }
function simulateSlotReplace(slot, element, mapper){ function simulateSlotReplace(slot, element, mapper){
if(mapper) mapper(slot, element); if(mapper) mapper(slot, element);
try{ slot.replaceWith(assign(element, { try{ slot.replaceWith(assign(element, {
className: [ element.className, slot.className ], className: cn(element.className, slot.className),
dataset: { ...slot.dataset } })); } dataset: { ...slot.dataset } })); }
catch(_){ slot.replaceWith(element); } catch(_){ slot.replaceWith(element); }
} }
@ -231,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){ 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){ 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){ function setDelete(obj, key, val){
Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key); } Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key); }