From 49243b978a40e17bd8909252658b9455b10d4531 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Wed, 5 Mar 2025 18:00:04 +0100 Subject: [PATCH] :bug: :abc: types 3ps --- dist/esm-with-signals.d.min.ts | 30 ++++++++++++++------- dist/esm-with-signals.d.ts | 30 ++++++++++++++------- dist/esm.d.min.ts | 30 ++++++++++++++------- dist/esm.d.ts | 30 ++++++++++++++------- docs/components/examples/signals/signals.js | 6 ++--- docs/index.html.js | 2 +- docs/p04-signals.html.js | 8 +++--- index.d.ts | 12 ++++++++- 8 files changed, 99 insertions(+), 49 deletions(-) diff --git a/dist/esm-with-signals.d.min.ts b/dist/esm-with-signals.d.min.ts index c0295cd..7f79ceb 100644 --- a/dist/esm-with-signals.d.min.ts +++ b/dist/esm-with-signals.d.min.ts @@ -72,6 +72,26 @@ export function assignAttribute[ATT] type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; +export function el< + A extends ddeComponentAttributes, + EL extends SupportedElement | ddeDocumentFragment +>( + component: (attr: A)=> EL, + attrs?: NoInfer, + ...addons: ddeElementAddon[] +): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] + ? EL + : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) +export function el< + A extends { textContent: ddeStringable }, + EL extends SupportedElement | ddeDocumentFragment +>( + component: (attr: A)=> EL, + attrs?: NoInfer["textContent"], + ...addons: ddeElementAddon[] +): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] + ? EL + : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) export function el< TAG extends keyof ExtendedHTMLElementTagNameMap, >( @@ -89,16 +109,6 @@ export function el( attrs?: ElementAttributes | ddeStringable, ...addons: ddeElementAddon[] ): ddeHTMLElement - -export function el< - C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment ->( - component: C, - attrs?: Parameters[0] | ddeStringable, - ...addons: ddeElementAddon>[] -): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] - ? ReturnType - : ( ReturnType extends ddeDocumentFragment ? ReturnType : ddeHTMLElement ) export { el as createElement } export function elNS( diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts index c0295cd..7f79ceb 100644 --- a/dist/esm-with-signals.d.ts +++ b/dist/esm-with-signals.d.ts @@ -72,6 +72,26 @@ export function assignAttribute[ATT] type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; +export function el< + A extends ddeComponentAttributes, + EL extends SupportedElement | ddeDocumentFragment +>( + component: (attr: A)=> EL, + attrs?: NoInfer, + ...addons: ddeElementAddon[] +): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] + ? EL + : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) +export function el< + A extends { textContent: ddeStringable }, + EL extends SupportedElement | ddeDocumentFragment +>( + component: (attr: A)=> EL, + attrs?: NoInfer["textContent"], + ...addons: ddeElementAddon[] +): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] + ? EL + : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) export function el< TAG extends keyof ExtendedHTMLElementTagNameMap, >( @@ -89,16 +109,6 @@ export function el( attrs?: ElementAttributes | ddeStringable, ...addons: ddeElementAddon[] ): ddeHTMLElement - -export function el< - C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment ->( - component: C, - attrs?: Parameters[0] | ddeStringable, - ...addons: ddeElementAddon>[] -): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] - ? ReturnType - : ( ReturnType extends ddeDocumentFragment ? ReturnType : ddeHTMLElement ) export { el as createElement } export function elNS( diff --git a/dist/esm.d.min.ts b/dist/esm.d.min.ts index 1e6a662..29f8078 100644 --- a/dist/esm.d.min.ts +++ b/dist/esm.d.min.ts @@ -72,6 +72,26 @@ export function assignAttribute[ATT] type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; +export function el< + A extends ddeComponentAttributes, + EL extends SupportedElement | ddeDocumentFragment +>( + component: (attr: A)=> EL, + attrs?: NoInfer, + ...addons: ddeElementAddon[] +): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] + ? EL + : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) +export function el< + A extends { textContent: ddeStringable }, + EL extends SupportedElement | ddeDocumentFragment +>( + component: (attr: A)=> EL, + attrs?: NoInfer["textContent"], + ...addons: ddeElementAddon[] +): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] + ? EL + : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) export function el< TAG extends keyof ExtendedHTMLElementTagNameMap, >( @@ -89,16 +109,6 @@ export function el( attrs?: ElementAttributes | ddeStringable, ...addons: ddeElementAddon[] ): ddeHTMLElement - -export function el< - C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment ->( - component: C, - attrs?: Parameters[0] | ddeStringable, - ...addons: ddeElementAddon>[] -): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] - ? ReturnType - : ( ReturnType extends ddeDocumentFragment ? ReturnType : ddeHTMLElement ) export { el as createElement } export function elNS( diff --git a/dist/esm.d.ts b/dist/esm.d.ts index 1e6a662..29f8078 100644 --- a/dist/esm.d.ts +++ b/dist/esm.d.ts @@ -72,6 +72,26 @@ export function assignAttribute[ATT] type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; +export function el< + A extends ddeComponentAttributes, + EL extends SupportedElement | ddeDocumentFragment +>( + component: (attr: A)=> EL, + attrs?: NoInfer, + ...addons: ddeElementAddon[] +): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] + ? EL + : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) +export function el< + A extends { textContent: ddeStringable }, + EL extends SupportedElement | ddeDocumentFragment +>( + component: (attr: A)=> EL, + attrs?: NoInfer["textContent"], + ...addons: ddeElementAddon[] +): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] + ? EL + : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) export function el< TAG extends keyof ExtendedHTMLElementTagNameMap, >( @@ -89,16 +109,6 @@ export function el( attrs?: ElementAttributes | ddeStringable, ...addons: ddeElementAddon[] ): ddeHTMLElement - -export function el< - C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment ->( - component: C, - attrs?: Parameters[0] | ddeStringable, - ...addons: ddeElementAddon>[] -): ReturnType extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] - ? ReturnType - : ( ReturnType extends ddeDocumentFragment ? ReturnType : ddeHTMLElement ) export { el as createElement } export function elNS( diff --git a/docs/components/examples/signals/signals.js b/docs/components/examples/signals/signals.js index 172b3a0..199edfd 100644 --- a/docs/components/examples/signals/signals.js +++ b/docs/components/examples/signals/signals.js @@ -1,9 +1,9 @@ import { S } from "deka-dom-el/signals"; -// A — `signal` represents a reactive value +// PART 1 — `signal` represents a reactive value const signal= S(0); -// B — just reacts on signal changes +// PART 2 — just reacts on signal changes S.on(signal, console.log); -// C — just updates the value +// PART 3 — just updates the value const update= ()=> signal.set(signal.get()+1); update(); diff --git a/docs/index.html.js b/docs/index.html.js index 475840b..7c4953e 100644 --- a/docs/index.html.js +++ b/docs/index.html.js @@ -44,7 +44,7 @@ export function page({ pkg, info }){ ), el(example, { src: fileURL("./components/examples/introducing/helloWorld.js"), page_id }), - el(h3, t`The 3PS Pattern: A Better Way to Build UIs`), + el(h3, { textContent: t`The 3PS Pattern: A Better Way to Build UIs`, id: "h-3ps" }), el("p").append(...T` At the heart of DDE is the 3PS (3-Part Separation) pattern. This simple yet powerful approach helps you organize your UI code into three distinct areas, making your applications more maintainable and easier to reason about. diff --git a/docs/p04-signals.html.js b/docs/p04-signals.html.js index 90b6f60..4707a34 100644 --- a/docs/p04-signals.html.js +++ b/docs/p04-signals.html.js @@ -63,21 +63,21 @@ export function page({ pkg, info }){ el(h3, t`The 3-Part Structure of Signals`), el("p").append(...T` Signals organize your code into three distinct parts, following the - ${el("a", { textContent: t`3PS principle`, href: "./#h-event-driven-programming--parts-separation--ps" })}: + ${el("a", { textContent: t`3PS principle`, href: "./#h-3ps" })}: `), el("div", { class: "signal-diagram" }).append( el("div", { class: "signal-part" }).append( - el("h4", t`A: Create Signal`), + el("h4", t`PART 1: Create Signal`), el(code, { content: "const count = S(0);", page_id }), el("p", t`Define a reactive value that can be observed and changed`) ), el("div", { class: "signal-part" }).append( - el("h4", t`B: React to Changes`), + el("h4", t`PART 2: React to Changes`), el(code, { content: "S.on(count, value => updateUI(value));", page_id }), el("p", t`Subscribe to signal changes with callbacks or effects`) ), el("div", { class: "signal-part" }).append( - el("h4", t`C: Update Signal`), + el("h4", t`PART 3: Update Signal`), el(code, { content: "count.set(count.get() + 1);", page_id }), el("p", t`Modify the signal value, which automatically triggers updates`) ) diff --git a/index.d.ts b/index.d.ts index f527b33..5344bbb 100644 --- a/index.d.ts +++ b/index.d.ts @@ -77,7 +77,17 @@ export function el< EL extends SupportedElement | ddeDocumentFragment >( component: (attr: A)=> EL, - attrs?: A extends { textContent: any } ? ( NoInfer | ddeStringable ) : NoInfer, + attrs?: NoInfer, + ...addons: ddeElementAddon[] +): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] + ? EL + : ( EL extends ddeDocumentFragment ? EL : ddeHTMLElement ) +export function el< + A extends { textContent: ddeStringable }, + EL extends SupportedElement | ddeDocumentFragment +>( + component: (attr: A)=> EL, + attrs?: NoInfer["textContent"], ...addons: ddeElementAddon[] ): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL