jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-04-01 19:55: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) {
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);
@ -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 $;
@ -131,7 +131,7 @@ 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 && 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) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
@ -162,11 +162,14 @@ 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],
className: ht(e.className, t.className),
dataset: { ...t.dataset }
}));
} catch {
@ -251,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))
@ -410,14 +410,14 @@ function w(t, e, n) {
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) {
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);
};
};
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;
};
};
@ -453,11 +453,11 @@ 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);
@ -516,7 +516,7 @@ E.el = function(t, e) {
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() {
@ -530,7 +530,7 @@ 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;
};
}
@ -548,7 +548,7 @@ E.observedAttributes = function(t) {
E.clear(...Object.values(this[G]));
})(t), n;
};
var ut = {
var st = {
isSignal: z,
processReactiveAttribute(t, e, n, r) {
if (!z(n)) return n;
@ -557,10 +557,10 @@ 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) {
function ut(t, e, ...n) {
let { current: r } = x;
r.prevent || r.host(function(o) {
o[R] || (o[R] = [], w.disconnected(
@ -574,9 +574,9 @@ function ft(t, e, ...n) {
)(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() {
@ -590,7 +590,7 @@ 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;
@ -619,7 +619,7 @@ function K(t) {
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) {
function at(t, e, n) {
if (!t[l]) return;
let r = t[l];
if (!(!n && r.value === e))
@ -643,14 +643,15 @@ 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: Jt,

55
dist/dde.js vendored
View File

@ -9,7 +9,7 @@ var m = {
return n;
}
};
function V(t, e = !0) {
function G(t, e = !0) {
return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t);
}
function L(t) {
@ -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,7 +49,7 @@ var a = {
S: globalThis.SVGElement,
M: globalThis.MutationObserver
};
function K(t, 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);
@ -57,7 +57,7 @@ function K(t, e, n) {
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
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;
@ -127,7 +127,7 @@ 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(" ");
@ -158,11 +158,14 @@ 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],
className: Q(e.className, t.className),
dataset: { ...t.dataset }
}));
} catch {
@ -247,14 +250,11 @@ 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[(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) {
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) {
if (Reflect.set(t, e, n), !!x(n))
@ -355,7 +355,7 @@ function ot() {
}
function _(i) {
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,
host: (...f) => f.length ? f.forEach((d) => d(t)) : t
}), typeof r == "function" && (r = r.call(t, t));
let o = t[y];
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(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) {
return k(t.prototype, "connectedCallback", function(e, n, r) {
e.apply(n, r), n.dispatchEvent(new Event(g));
}), k(t.prototype, "disconnectedCallback", function(e, n, r) {
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) {
let [o, , c] = r;
n.dispatchEvent(new CustomEvent(D, {
detail: [o, c]
})), e.apply(n, r);
}), t.prototype[y] = !0, t;
}), t.prototype[w] = !0, t;
}
function k(t, e, n) {
t[e] = new Proxy(t[e] || (() => {
@ -406,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[y] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.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(w, t, e), r[y] || N(e.signal, () => A.offDisconnected(r, t)) && A.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();
@ -426,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[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) {
for (let { attributeName: d, target: p } of f)
p.dispatchEvent(
@ -440,8 +440,9 @@ R.attributeChanged = function(t, e) {
globalThis.dde= {
assign: O,
assignAttribute: z,
chainableAppend: Q,
chainableAppend: K,
classListDeclarative: Y,
cn: Q,
createElement: j,
createElementNS: gt,
customElementRender: mt,
@ -453,7 +454,7 @@ globalThis.dde= {
lifecyclesToEvents: ct,
observedAttributes: it,
on: R,
registerReactivity: V,
registerReactivity: G,
scope: S,
simulateSlots: bt
};

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

@ -8,6 +8,8 @@ type SupportedElement=
declare global {
type ddeComponentAttributes= Record<any, any> | undefined;
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,7 +17,7 @@ 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.
@ -23,24 +25,22 @@ type AttrsModified= {
* for others.
*/
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.
* Values are converted to string (see {@link 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`
* */
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
*
@ -52,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,
@ -66,20 +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,
>(
tag_name: TAG,
attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | textContent,
...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[], // TODO: for now addons must have the same element
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
@ -87,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>
@ -101,7 +104,7 @@ export function elNS(
EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
>(
tag_name: TAG,
attrs?: ElementAttributes<NoInfer<EL>> | textContent,
attrs?: ElementAttributes<NoInfer<EL>> | ddeString,
...addons: ddeElementAddon<NoInfer<EL>>[]
)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
export function elNS(
@ -111,7 +114,7 @@ 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<NoInfer<EL>>[]
@ -120,7 +123,7 @@ 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 }

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

@ -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);
@ -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 $;
@ -129,7 +129,7 @@ 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 && 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) {
t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
@ -160,11 +160,14 @@ 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],
className: ht(e.className, t.className),
dataset: { ...t.dataset }
}));
} catch {
@ -249,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))
@ -408,14 +408,14 @@ function w(t, e, n) {
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) {
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);
};
};
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;
};
};
@ -451,11 +451,11 @@ 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);
@ -514,7 +514,7 @@ E.el = function(t, e) {
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,7 +528,7 @@ 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;
};
}
@ -546,7 +546,7 @@ E.observedAttributes = function(t) {
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,10 +555,10 @@ 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) {
function ut(t, e, ...n) {
let { current: r } = x;
r.prevent || r.host(function(o) {
o[R] || (o[R] = [], w.disconnected(
@ -572,9 +572,9 @@ function ft(t, e, ...n) {
)(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,7 +588,7 @@ 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;
@ -617,7 +617,7 @@ function K(t) {
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) {
function at(t, e, n) {
if (!t[l]) return;
let r = t[l];
if (!(!n && r.value === e))
@ -641,13 +641,14 @@ 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,
Jt as customElementRender,

37
dist/esm.d.ts vendored
View File

@ -8,6 +8,8 @@ type SupportedElement=
declare global {
type ddeComponentAttributes= Record<any, any> | undefined;
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,7 +17,7 @@ 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.
@ -23,24 +25,22 @@ type AttrsModified= {
* for others.
*/
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.
* Values are converted to string (see {@link 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`
* */
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
*
@ -52,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,
@ -66,20 +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,
>(
tag_name: TAG,
attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | textContent,
...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[], // TODO: for now addons must have the same element
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
@ -87,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>
@ -101,7 +104,7 @@ export function elNS(
EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
>(
tag_name: TAG,
attrs?: ElementAttributes<NoInfer<EL>> | textContent,
attrs?: ElementAttributes<NoInfer<EL>> | ddeString,
...addons: ddeElementAddon<NoInfer<EL>>[]
)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
export function elNS(
@ -111,7 +114,7 @@ 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<NoInfer<EL>>[]
@ -120,7 +123,7 @@ 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 }

55
dist/esm.js vendored
View File

@ -7,7 +7,7 @@ var m = {
return n;
}
};
function V(t, e = !0) {
function G(t, e = !0) {
return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t);
}
function L(t) {
@ -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,7 +47,7 @@ var a = {
S: globalThis.SVGElement,
M: globalThis.MutationObserver
};
function K(t, 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);
@ -55,7 +55,7 @@ function K(t, e, n) {
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
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;
@ -125,7 +125,7 @@ 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(" ");
@ -156,11 +156,14 @@ 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],
className: Q(e.className, t.className),
dataset: { ...t.dataset }
}));
} catch {
@ -245,14 +248,11 @@ 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[(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) {
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) {
if (Reflect.set(t, e, n), !!x(n))
@ -353,7 +353,7 @@ function ot() {
}
function _(i) {
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,
host: (...f) => f.length ? f.forEach((d) => d(t)) : t
}), typeof r == "function" && (r = r.call(t, t));
let o = t[y];
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(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) {
return k(t.prototype, "connectedCallback", function(e, n, r) {
e.apply(n, r), n.dispatchEvent(new Event(g));
}), k(t.prototype, "disconnectedCallback", function(e, n, r) {
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) {
let [o, , c] = r;
n.dispatchEvent(new CustomEvent(D, {
detail: [o, c]
})), e.apply(n, r);
}), t.prototype[y] = !0, t;
}), t.prototype[w] = !0, t;
}
function k(t, e, n) {
t[e] = new Proxy(t[e] || (() => {
@ -404,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[y] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.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(w, t, e), r[y] || N(e.signal, () => A.offDisconnected(r, t)) && A.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 +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[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) {
for (let { attributeName: d, target: p } of f)
p.dispatchEvent(
@ -437,8 +437,9 @@ 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,
mt as customElementRender,
@ -450,7 +451,7 @@ export {
ct as lifecyclesToEvents,
it as observedAttributes,
R as on,
V as registerReactivity,
G as registerReactivity,
S as scope,
bt as simulateSlots
};

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

@ -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)
);
}

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`
${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

37
index.d.ts vendored
View File

@ -9,13 +9,15 @@ type SupportedElement=
declare global {
type ddeComponentAttributes= Record<any, any> | undefined;
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.
@ -23,24 +25,22 @@ type AttrsModified= {
* for others.
*/
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.
* Values are converted to string (see {@link 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`
* */
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
*
@ -52,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,
@ -66,20 +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,
>(
tag_name: TAG,
attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | textContent,
...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[], // TODO: for now addons must have the same element
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
@ -87,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>
@ -101,7 +104,7 @@ export function elNS(
EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
>(
tag_name: TAG,
attrs?: ElementAttributes<NoInfer<EL>> | textContent,
attrs?: ElementAttributes<NoInfer<EL>> | ddeString,
...addons: ddeElementAddon<NoInfer<EL>>[]
)=> TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
export function elNS(
@ -111,7 +114,7 @@ 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<NoInfer<EL>>[]
@ -120,7 +123,7 @@ 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 }

8
src/dom.js
View File

@ -123,10 +123,11 @@ 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); }
}
@ -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){
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); }