From 2105776d2ace97eab735b32bc57b185e2ab469c8 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Wed, 11 Dec 2024 17:05:03 +0100 Subject: [PATCH] :zap: :bug: removed #23, fixed readonly & ddeStringable --- dist/dde-with-signals.js | 61 ++++++++++--------- dist/dde.js | 55 +++++++++-------- dist/esm-with-signals.d.ts | 37 +++++------ dist/esm-with-signals.js | 61 ++++++++++--------- dist/esm.d.ts | 37 +++++------ dist/esm.js | 55 +++++++++-------- .../examples/elements/dekaBasicComponent.js | 2 +- docs/p02-elements.html.js | 3 +- index.d.ts | 37 +++++------ src/dom.js | 8 +-- 10 files changed, 184 insertions(+), 172 deletions(-) diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js index 38fde21..8a34d6d 100644 --- a/dist/dde-with-signals.js +++ b/dist/dde-with-signals.js @@ -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, diff --git a/dist/dde.js b/dist/dde.js index c6a64cc..7def816 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -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 }; diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts index 38df36e..8c1a050 100644 --- a/dist/esm-with-signals.d.ts +++ b/dist/esm-with-signals.d.ts @@ -8,6 +8,8 @@ type SupportedElement= declare global { type ddeComponentAttributes= Record | undefined; type ddeElementAddon= (element: El)=> any; + type ddeString= string | ddeSignal + type ddeStringable= ddeString | number | ddeSignal } type PascalCase= `${Capitalize}${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 | ddeSignal + style: Partial | ddeString | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal }> /** * 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>, - /** - * By default simiral to `className`, but also supports `string[]` - * */ - className: string | (string|boolean|undefined|ddeSignal)[]; /** * 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>, + dataset: Record, /** * Sets `aria-*` simiraly to `dataset` * */ - ariaset: Record>, -} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal> + ariaset: Record, +} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> & Record<`.${string}`, any> type _fromElsInterfaces= Omit; +type IsReadonly = + T extends { readonly [P in K]: T[K] } ? true : false; /** * Just element attributtes * @@ -52,7 +52,9 @@ type _fromElsInterfaces= Omit= Partial<{ - [K in keyof _fromElsInterfaces]: _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> + [K in keyof _fromElsInterfaces]: IsReadonly<_fromElsInterfaces, K> extends false + ? _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> + : ddeStringable } & AttrsModified> & Record; export function classListDeclarative( element: El, @@ -66,20 +68,21 @@ export function assignAttribute[ATT] type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; -type textContent= string | ddeSignal; export function el< TAG extends keyof ExtendedHTMLElementTagNameMap, >( tag_name: TAG, - attrs?: ElementAttributes]> | textContent, - ...addons: ddeElementAddon]>[], // TODO: for now addons must have the same element + attrs?: ElementAttributes]> | ddeString, + ...addons: ddeElementAddon< + ExtendedHTMLElementTagNameMap[NoInfer] + >[], // 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 | textContent, + attrs?: ElementAttributes | ddeString, ...addons: ddeElementAddon[] ): ddeHTMLElement @@ -87,7 +90,7 @@ export function el< C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment >( component: C, - attrs?: Parameters[0] | textContent, + attrs?: Parameters[0] | ddeString, ...addons: ddeElementAddon>[] ): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType @@ -101,7 +104,7 @@ export function elNS( EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), >( tag_name: TAG, - attrs?: ElementAttributes> | textContent, + attrs?: ElementAttributes> | ddeString, ...addons: ddeElementAddon>[] )=> 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 | string | number | boolean }>, ...addons: ddeElementAddon>[] @@ -120,7 +123,7 @@ export function elNS( namespace: string ): ( tag_name: string, - attrs?: string | textContent | Record, + attrs?: string | ddeString | Record, ...addons: ddeElementAddon[] )=> SupportedElement export { elNS as createElementNS } diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index 53a9282..4fd845d 100644 --- a/dist/esm-with-signals.js +++ b/dist/esm-with-signals.js @@ -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, diff --git a/dist/esm.d.ts b/dist/esm.d.ts index c035e27..451dab9 100644 --- a/dist/esm.d.ts +++ b/dist/esm.d.ts @@ -8,6 +8,8 @@ type SupportedElement= declare global { type ddeComponentAttributes= Record | undefined; type ddeElementAddon= (element: El)=> any; + type ddeString= string | ddeSignal + type ddeStringable= ddeString | number | ddeSignal } type PascalCase= `${Capitalize}${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 | ddeSignal + style: Partial | ddeString | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal }> /** * 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>, - /** - * By default simiral to `className`, but also supports `string[]` - * */ - className: string | (string|boolean|undefined|ddeSignal)[]; /** * 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>, + dataset: Record, /** * Sets `aria-*` simiraly to `dataset` * */ - ariaset: Record>, -} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal> + ariaset: Record, +} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> & Record<`.${string}`, any> type _fromElsInterfaces= Omit; +type IsReadonly = + T extends { readonly [P in K]: T[K] } ? true : false; /** * Just element attributtes * @@ -52,7 +52,9 @@ type _fromElsInterfaces= Omit= Partial<{ - [K in keyof _fromElsInterfaces]: _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> + [K in keyof _fromElsInterfaces]: IsReadonly<_fromElsInterfaces, K> extends false + ? _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> + : ddeStringable } & AttrsModified> & Record; export function classListDeclarative( element: El, @@ -66,20 +68,21 @@ export function assignAttribute[ATT] type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; -type textContent= string | ddeSignal; export function el< TAG extends keyof ExtendedHTMLElementTagNameMap, >( tag_name: TAG, - attrs?: ElementAttributes]> | textContent, - ...addons: ddeElementAddon]>[], // TODO: for now addons must have the same element + attrs?: ElementAttributes]> | ddeString, + ...addons: ddeElementAddon< + ExtendedHTMLElementTagNameMap[NoInfer] + >[], // 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 | textContent, + attrs?: ElementAttributes | ddeString, ...addons: ddeElementAddon[] ): ddeHTMLElement @@ -87,7 +90,7 @@ export function el< C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment >( component: C, - attrs?: Parameters[0] | textContent, + attrs?: Parameters[0] | ddeString, ...addons: ddeElementAddon>[] ): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType @@ -101,7 +104,7 @@ export function elNS( EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), >( tag_name: TAG, - attrs?: ElementAttributes> | textContent, + attrs?: ElementAttributes> | ddeString, ...addons: ddeElementAddon>[] )=> 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 | string | number | boolean }>, ...addons: ddeElementAddon>[] @@ -120,7 +123,7 @@ export function elNS( namespace: string ): ( tag_name: string, - attrs?: string | textContent | Record, + attrs?: string | ddeString | Record, ...addons: ddeElementAddon[] )=> SupportedElement export { elNS as createElementNS } diff --git a/dist/esm.js b/dist/esm.js index 72391e8..4427d6d 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -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 }; diff --git a/docs/components/examples/elements/dekaBasicComponent.js b/docs/components/examples/elements/dekaBasicComponent.js index 50870c1..02f0b8e 100644 --- a/docs/components/examples/elements/dekaBasicComponent.js +++ b/docs/components/examples/elements/dekaBasicComponent.js @@ -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) ); } diff --git a/docs/p02-elements.html.js b/docs/p02-elements.html.js index 2c9367f..34043a8 100644 --- a/docs/p02-elements.html.js +++ b/docs/p02-elements.html.js @@ -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 diff --git a/index.d.ts b/index.d.ts index d3ec563..46b06f3 100644 --- a/index.d.ts +++ b/index.d.ts @@ -9,13 +9,15 @@ type SupportedElement= declare global { type ddeComponentAttributes= Record | undefined; type ddeElementAddon= (element: El)=> any; + type ddeString= string | ddeSignal + type ddeStringable= ddeString | number | ddeSignal } type PascalCase= `${Capitalize}${string}`; type AttrsModified= { /** * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API). */ - style: string | Partial | ddeSignal + style: Partial | ddeString | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal }> /** * 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>, - /** - * By default simiral to `className`, but also supports `string[]` - * */ - className: string | (string|boolean|undefined|ddeSignal)[]; /** * 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>, + dataset: Record, /** * Sets `aria-*` simiraly to `dataset` * */ - ariaset: Record>, -} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal> + ariaset: Record, +} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, ddeString> & Record<`.${string}`, any> type _fromElsInterfaces= Omit; +type IsReadonly = + T extends { readonly [P in K]: T[K] } ? true : false; /** * Just element attributtes * @@ -52,7 +52,9 @@ type _fromElsInterfaces= Omit= Partial<{ - [K in keyof _fromElsInterfaces]: _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> + [K in keyof _fromElsInterfaces]: IsReadonly<_fromElsInterfaces, K> extends false + ? _fromElsInterfaces[K] | ddeSignal<_fromElsInterfaces[K]> + : ddeStringable } & AttrsModified> & Record; export function classListDeclarative( element: El, @@ -66,20 +68,21 @@ export function assignAttribute[ATT] type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; -type textContent= string | ddeSignal; export function el< TAG extends keyof ExtendedHTMLElementTagNameMap, >( tag_name: TAG, - attrs?: ElementAttributes]> | textContent, - ...addons: ddeElementAddon]>[], // TODO: for now addons must have the same element + attrs?: ElementAttributes]> | ddeString, + ...addons: ddeElementAddon< + ExtendedHTMLElementTagNameMap[NoInfer] + >[], // 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 | textContent, + attrs?: ElementAttributes | ddeString, ...addons: ddeElementAddon[] ): ddeHTMLElement @@ -87,7 +90,7 @@ export function el< C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment >( component: C, - attrs?: Parameters[0] | textContent, + attrs?: Parameters[0] | ddeString, ...addons: ddeElementAddon>[] ): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType @@ -101,7 +104,7 @@ export function elNS( EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ), >( tag_name: TAG, - attrs?: ElementAttributes> | textContent, + attrs?: ElementAttributes> | ddeString, ...addons: ddeElementAddon>[] )=> 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 | string | number | boolean }>, ...addons: ddeElementAddon>[] @@ -120,7 +123,7 @@ export function elNS( namespace: string ): ( tag_name: string, - attrs?: string | textContent | Record, + attrs?: string | ddeString | Record, ...addons: ddeElementAddon[] )=> SupportedElement export { elNS as createElementNS } diff --git a/src/dom.js b/src/dom.js index 28c4c64..714e6a7 100644 --- a/src/dom.js +++ b/src/dom.js @@ -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); }