diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts index d09b15d..fed94e8 100644 --- a/dist/esm-with-signals.d.ts +++ b/dist/esm-with-signals.d.ts @@ -146,6 +146,7 @@ export namespace el { host?: "this" | "parentElement"; }, is_open?: boolean): Comment; } +export function chainableAppend(el: EL): EL | ddeHTMLElement; export function el(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer, ...addons: ddeElementAddon[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement); export function el | string | number | boolean; }>, ...addons: ddeElementAddon>[]) => ddeMathMLElement; export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record, ...addons: ddeElementAddon[]) => SupportedElement; -export function chainableAppend(el: EL): EL; /** Simulate slots for ddeComponents */ export function simulateSlots(root: EL): EL; /** diff --git a/dist/esm-with-signals.min.d.ts b/dist/esm-with-signals.min.d.ts index d09b15d..fed94e8 100644 --- a/dist/esm-with-signals.min.d.ts +++ b/dist/esm-with-signals.min.d.ts @@ -146,6 +146,7 @@ export namespace el { host?: "this" | "parentElement"; }, is_open?: boolean): Comment; } +export function chainableAppend(el: EL): EL | ddeHTMLElement; export function el(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer, ...addons: ddeElementAddon[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement); export function el | string | number | boolean; }>, ...addons: ddeElementAddon>[]) => ddeMathMLElement; export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record, ...addons: ddeElementAddon[]) => SupportedElement; -export function chainableAppend(el: EL): EL; /** Simulate slots for ddeComponents */ export function simulateSlots(root: EL): EL; /** diff --git a/dist/esm.d.ts b/dist/esm.d.ts index 7d364f3..6bc6f56 100644 --- a/dist/esm.d.ts +++ b/dist/esm.d.ts @@ -145,6 +145,7 @@ export namespace el { host?: "this" | "parentElement"; }, is_open?: boolean): Comment; } +export function chainableAppend(el: EL): EL | ddeHTMLElement; export function el(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer, ...addons: ddeElementAddon[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement); export function el | string | number | boolean; }>, ...addons: ddeElementAddon>[]) => ddeMathMLElement; export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record, ...addons: ddeElementAddon[]) => SupportedElement; -export function chainableAppend(el: EL): EL; /** Simulate slots for ddeComponents */ export function simulateSlots(root: EL): EL; /** diff --git a/dist/esm.min.d.ts b/dist/esm.min.d.ts index 7d364f3..6bc6f56 100644 --- a/dist/esm.min.d.ts +++ b/dist/esm.min.d.ts @@ -145,6 +145,7 @@ export namespace el { host?: "this" | "parentElement"; }, is_open?: boolean): Comment; } +export function chainableAppend(el: EL): EL | ddeHTMLElement; export function el(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer, ...addons: ddeElementAddon[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement); export function el | string | number | boolean; }>, ...addons: ddeElementAddon>[]) => ddeMathMLElement; export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record, ...addons: ddeElementAddon[]) => SupportedElement; -export function chainableAppend(el: EL): EL; /** Simulate slots for ddeComponents */ export function simulateSlots(root: EL): EL; /** diff --git a/dist/iife-with-signals.d.ts b/dist/iife-with-signals.d.ts index ebc9e32..8a06d28 100644 --- a/dist/iife-with-signals.d.ts +++ b/dist/iife-with-signals.d.ts @@ -146,6 +146,7 @@ export namespace el { host?: "this" | "parentElement"; }, is_open?: boolean): Comment; } +export function chainableAppend(el: EL): EL | ddeHTMLElement; export function el(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer, ...addons: ddeElementAddon[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement); export function el | string | number | boolean; }>, ...addons: ddeElementAddon>[]) => ddeMathMLElement; export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record, ...addons: ddeElementAddon[]) => SupportedElement; -export function chainableAppend(el: EL): EL; /** Simulate slots for ddeComponents */ export function simulateSlots(root: EL): EL; /** diff --git a/dist/iife-with-signals.min.d.ts b/dist/iife-with-signals.min.d.ts index ebc9e32..8a06d28 100644 --- a/dist/iife-with-signals.min.d.ts +++ b/dist/iife-with-signals.min.d.ts @@ -146,6 +146,7 @@ export namespace el { host?: "this" | "parentElement"; }, is_open?: boolean): Comment; } +export function chainableAppend(el: EL): EL | ddeHTMLElement; export function el(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer, ...addons: ddeElementAddon[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement); export function el | string | number | boolean; }>, ...addons: ddeElementAddon>[]) => ddeMathMLElement; export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record, ...addons: ddeElementAddon[]) => SupportedElement; -export function chainableAppend(el: EL): EL; /** Simulate slots for ddeComponents */ export function simulateSlots(root: EL): EL; /** diff --git a/dist/iife.d.ts b/dist/iife.d.ts index 02cd8d5..593d211 100644 --- a/dist/iife.d.ts +++ b/dist/iife.d.ts @@ -145,6 +145,7 @@ export namespace el { host?: "this" | "parentElement"; }, is_open?: boolean): Comment; } +export function chainableAppend(el: EL): EL | ddeHTMLElement; export function el(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer, ...addons: ddeElementAddon[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement); export function el | string | number | boolean; }>, ...addons: ddeElementAddon>[]) => ddeMathMLElement; export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record, ...addons: ddeElementAddon[]) => SupportedElement; -export function chainableAppend(el: EL): EL; /** Simulate slots for ddeComponents */ export function simulateSlots(root: EL): EL; /** diff --git a/dist/iife.min.d.ts b/dist/iife.min.d.ts index 02cd8d5..593d211 100644 --- a/dist/iife.min.d.ts +++ b/dist/iife.min.d.ts @@ -145,6 +145,7 @@ export namespace el { host?: "this" | "parentElement"; }, is_open?: boolean): Comment; } +export function chainableAppend(el: EL): EL | ddeHTMLElement; export function el(component: (attr: A, ...rest: any[]) => EL, attrs?: NoInfer, ...addons: ddeElementAddon[]): EL extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? EL : (EL extends ddeDocumentFragment ? EL : ddeHTMLElement); export function el | string | number | boolean; }>, ...addons: ddeElementAddon>[]) => ddeMathMLElement; export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record, ...addons: ddeElementAddon[]) => SupportedElement; -export function chainableAppend(el: EL): EL; /** Simulate slots for ddeComponents */ export function simulateSlots(root: EL): EL; /** diff --git a/docs/components/examples/debugging/dom-reactive-mark.js b/docs/components/examples/debugging/dom-reactive-mark.html similarity index 100% rename from docs/components/examples/debugging/dom-reactive-mark.js rename to docs/components/examples/debugging/dom-reactive-mark.html diff --git a/docs/components/examples/elements/dekaAppend.js b/docs/components/examples/elements/dekaAppend.js index 24c44b4..f84c834 100644 --- a/docs/components/examples/elements/dekaAppend.js +++ b/docs/components/examples/elements/dekaAppend.js @@ -24,7 +24,11 @@ document.body.append( ); import { chainableAppend } from "deka-dom-el"; -/** @param {keyof HTMLElementTagNameMap} tag */ +/** + * @template {keyof HTMLElementTagNameMap} TAG + * @param {TAG} tag + * @returns {ddeHTMLElementTagNameMap[TAG] extends HTMLElement ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement} + * */ const createElement= tag=> chainableAppend(document.createElement(tag)); document.body.append( createElement("p").append( diff --git a/docs/components/examples/introducing/motivation.js b/docs/components/examples/introducing/motivation.js index e476f35..a107f77 100644 --- a/docs/components/examples/introducing/motivation.js +++ b/docs/components/examples/introducing/motivation.js @@ -15,15 +15,15 @@ function HelloWorldComponent({ initial }){ return el().append( el("p", { - textContent: S(() => `Hello World ${emoji().repeat(clicks())}`), + textContent: S(() => `Hello World ${emoji.get().repeat(clicks.get())}`), className: "example", ariaLive: "polite", //OR ariaset: { live: "polite" }, dataset: { example: "Example" }, //OR dataExample: "Example", }), el("button", { textContent: "Fire", type: "button" }, - on("click", ()=> clicks(clicks() + 1)), - on("keyup", ()=> clicks(clicks() - 2)), + on("click", ()=> clicks.set(clicks.get() + 1)), + on("keyup", ()=> clicks.set(clicks.get() - 2)), ), el("select", null, onChange).append( el(OptionComponent, "🎉", isSelected),//OR { textContent: "🎉" } diff --git a/docs/components/examples/scopes/cleaning.js b/docs/components/examples/scopes/cleaning.js index f648322..243ee17 100644 --- a/docs/components/examples/scopes/cleaning.js +++ b/docs/components/examples/scopes/cleaning.js @@ -14,7 +14,7 @@ function component(){ const textContent= S("Click to change text."); const onclickChange= on("click", function redispatch(){ - textContent("Text changed! "+(new Date()).toString()) + textContent.set("Text changed! "+(new Date()).toString()) }); return el("p", textContent, onclickChange); } diff --git a/docs/components/examples/scopes/custom-scope.js b/docs/components/examples/scopes/custom-scope.js deleted file mode 100644 index d1c74f8..0000000 --- a/docs/components/examples/scopes/custom-scope.js +++ /dev/null @@ -1,14 +0,0 @@ -import { scope } from "deka-dom-el"; -import { S } from "deka-dom-el/signals"; - -function customSignalLogic() { - // Create an isolated scope for a specific operation - scope.push(); // Start new scope - - // These signals are in the new scope - const isolatedCount = S(0); - const isolatedDerived = S(() => isolatedCount.get() * 2); - - // Clean up by returning to previous scope - scope.pop(); -} diff --git a/docs/p07-debugging.html.js b/docs/p07-debugging.html.js index 1508c73..daf1cf1 100644 --- a/docs/p07-debugging.html.js +++ b/docs/p07-debugging.html.js @@ -111,7 +111,7 @@ console.log('Current value:', signal.valueOf()); that are automatically updated when signal values change. These elements are wrapped in special comment nodes for debugging (to be true they are also used internally, so please do not edit them by hand): `), - el(code, { src: fileURL("./components/examples/debugging/dom-reactive-mark.js"), page_id }), + el(code, { src: fileURL("./components/examples/debugging/dom-reactive-mark.html"), page_id }), el("p").append(...T` This is particularly useful when debugging why a reactive section isn't updating as expected. You can inspect the elements between the comment nodes to see their current state and the diff --git a/index.d.ts b/index.d.ts index f3a1ba0..c27fa0d 100644 --- a/index.d.ts +++ b/index.d.ts @@ -85,6 +85,7 @@ export namespace el { is_open?: boolean ): Comment; } +export function chainableAppend(el: EL): EL | ddeHTMLElement export function el< A extends ddeComponentAttributes, @@ -156,7 +157,6 @@ export function elNS( )=> SupportedElement export { elNS as createElementNS } -export function chainableAppend(el: EL): EL; /** Simulate slots for ddeComponents */ export function simulateSlots( root: EL, diff --git a/jsdom.d.ts b/jsdom.d.ts index 95172b3..d157ce8 100644 --- a/jsdom.d.ts +++ b/jsdom.d.ts @@ -3,6 +3,7 @@ export * from "./index.d"; type JSDOM= { window: Window, document: Document, + Node: typeof Node, HTMLElement: typeof HTMLElement, SVGElement: typeof SVGElement, DocumentFragment: typeof DocumentFragment,