🐛 🔤 types 3ps

dist/esm-with-signals.d.min.ts

@@ -72,6 +72,26 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
 ): ElementAttributes<El>[ATT]
 
 type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
+export function el<
+	A extends ddeComponentAttributes,
+	EL extends SupportedElement | ddeDocumentFragment
+>(
+	component: (attr: A)=> EL,
+	attrs?: NoInfer<A>,
+	...addons: ddeElementAddon<EL>[]
+): 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<A>["textContent"],
+	...addons: ddeElementAddon<EL>[]
+): 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<HTMLElement> | ddeStringable,
 	...addons: ddeElementAddon<HTMLElement>[]
 ): ddeHTMLElement
-
-export function el<
-	C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
->(
-	component: C,
-	attrs?: Parameters<C>[0] | ddeStringable,
-	...addons: ddeElementAddon<ReturnType<C>>[]
-): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
-	? ReturnType<C>
-	: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
 export { el as createElement }
 
 export function elNS(

dist/esm-with-signals.d.ts

@@ -72,6 +72,26 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
 ): ElementAttributes<El>[ATT]
 
 type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
+export function el<
+	A extends ddeComponentAttributes,
+	EL extends SupportedElement | ddeDocumentFragment
+>(
+	component: (attr: A)=> EL,
+	attrs?: NoInfer<A>,
+	...addons: ddeElementAddon<EL>[]
+): 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<A>["textContent"],
+	...addons: ddeElementAddon<EL>[]
+): 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<HTMLElement> | ddeStringable,
 	...addons: ddeElementAddon<HTMLElement>[]
 ): ddeHTMLElement
-
-export function el<
-	C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
->(
-	component: C,
-	attrs?: Parameters<C>[0] | ddeStringable,
-	...addons: ddeElementAddon<ReturnType<C>>[]
-): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
-	? ReturnType<C>
-	: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
 export { el as createElement }
 
 export function elNS(

dist/esm.d.min.ts

@@ -72,6 +72,26 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
 ): ElementAttributes<El>[ATT]
 
 type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
+export function el<
+	A extends ddeComponentAttributes,
+	EL extends SupportedElement | ddeDocumentFragment
+>(
+	component: (attr: A)=> EL,
+	attrs?: NoInfer<A>,
+	...addons: ddeElementAddon<EL>[]
+): 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<A>["textContent"],
+	...addons: ddeElementAddon<EL>[]
+): 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<HTMLElement> | ddeStringable,
 	...addons: ddeElementAddon<HTMLElement>[]
 ): ddeHTMLElement
-
-export function el<
-	C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
->(
-	component: C,
-	attrs?: Parameters<C>[0] | ddeStringable,
-	...addons: ddeElementAddon<ReturnType<C>>[]
-): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
-	? ReturnType<C>
-	: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
 export { el as createElement }
 
 export function elNS(

dist/esm.d.ts

@@ -72,6 +72,26 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
 ): ElementAttributes<El>[ATT]
 
 type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
+export function el<
+	A extends ddeComponentAttributes,
+	EL extends SupportedElement | ddeDocumentFragment
+>(
+	component: (attr: A)=> EL,
+	attrs?: NoInfer<A>,
+	...addons: ddeElementAddon<EL>[]
+): 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<A>["textContent"],
+	...addons: ddeElementAddon<EL>[]
+): 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<HTMLElement> | ddeStringable,
 	...addons: ddeElementAddon<HTMLElement>[]
 ): ddeHTMLElement
-
-export function el<
-	C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
->(
-	component: C,
-	attrs?: Parameters<C>[0] | ddeStringable,
-	...addons: ddeElementAddon<ReturnType<C>>[]
-): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
-	? ReturnType<C>
-	: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
 export { el as createElement }
 
 export function elNS(

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();

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.

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`)
 			)

index.d.ts

@@ -77,7 +77,17 @@ export function el<
 	EL extends SupportedElement | ddeDocumentFragment
 >(
 	component: (attr: A)=> EL,
-	attrs?: A extends { textContent: any } ? ( NoInfer<A> | ddeStringable ) : NoInfer<A>,
+	attrs?: NoInfer<A>,
+	...addons: ddeElementAddon<EL>[]
+): 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<A>["textContent"],
 	...addons: ddeElementAddon<EL>[]
 ): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
 	? EL