mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-05 13:15:53 +02:00
⚡
This commit is contained in:
parent
104837500d
commit
97defc5884
2
dist/esm-with-signals.d.ts
vendored
2
dist/esm-with-signals.d.ts
vendored
@ -146,6 +146,7 @@ export namespace el {
|
||||
host?: "this" | "parentElement";
|
||||
}, is_open?: boolean): Comment;
|
||||
}
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL | ddeHTMLElement;
|
||||
export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => 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;
|
||||
@ -158,7 +159,6 @@ export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG exte
|
||||
[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
|
||||
}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
|
||||
export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
|
||||
/** Simulate slots for ddeComponents */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
|
||||
/**
|
||||
|
2
dist/esm-with-signals.min.d.ts
vendored
2
dist/esm-with-signals.min.d.ts
vendored
@ -146,6 +146,7 @@ export namespace el {
|
||||
host?: "this" | "parentElement";
|
||||
}, is_open?: boolean): Comment;
|
||||
}
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL | ddeHTMLElement;
|
||||
export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => 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;
|
||||
@ -158,7 +159,6 @@ export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG exte
|
||||
[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
|
||||
}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
|
||||
export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
|
||||
/** Simulate slots for ddeComponents */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
|
||||
/**
|
||||
|
2
dist/esm.d.ts
vendored
2
dist/esm.d.ts
vendored
@ -145,6 +145,7 @@ export namespace el {
|
||||
host?: "this" | "parentElement";
|
||||
}, is_open?: boolean): Comment;
|
||||
}
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL | ddeHTMLElement;
|
||||
export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => 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;
|
||||
@ -157,7 +158,6 @@ export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG exte
|
||||
[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
|
||||
}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
|
||||
export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
|
||||
/** Simulate slots for ddeComponents */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
|
||||
/**
|
||||
|
2
dist/esm.min.d.ts
vendored
2
dist/esm.min.d.ts
vendored
@ -145,6 +145,7 @@ export namespace el {
|
||||
host?: "this" | "parentElement";
|
||||
}, is_open?: boolean): Comment;
|
||||
}
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL | ddeHTMLElement;
|
||||
export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => 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;
|
||||
@ -157,7 +158,6 @@ export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG exte
|
||||
[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
|
||||
}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
|
||||
export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
|
||||
/** Simulate slots for ddeComponents */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
|
||||
/**
|
||||
|
2
dist/iife-with-signals.d.ts
vendored
2
dist/iife-with-signals.d.ts
vendored
@ -146,6 +146,7 @@ export namespace el {
|
||||
host?: "this" | "parentElement";
|
||||
}, is_open?: boolean): Comment;
|
||||
}
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL | ddeHTMLElement;
|
||||
export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => 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;
|
||||
@ -158,7 +159,6 @@ export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG exte
|
||||
[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
|
||||
}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
|
||||
export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
|
||||
/** Simulate slots for ddeComponents */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
|
||||
/**
|
||||
|
2
dist/iife-with-signals.min.d.ts
vendored
2
dist/iife-with-signals.min.d.ts
vendored
@ -146,6 +146,7 @@ export namespace el {
|
||||
host?: "this" | "parentElement";
|
||||
}, is_open?: boolean): Comment;
|
||||
}
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL | ddeHTMLElement;
|
||||
export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => 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;
|
||||
@ -158,7 +159,6 @@ export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG exte
|
||||
[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
|
||||
}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
|
||||
export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
|
||||
/** Simulate slots for ddeComponents */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
|
||||
/**
|
||||
|
2
dist/iife.d.ts
vendored
2
dist/iife.d.ts
vendored
@ -145,6 +145,7 @@ export namespace el {
|
||||
host?: "this" | "parentElement";
|
||||
}, is_open?: boolean): Comment;
|
||||
}
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL | ddeHTMLElement;
|
||||
export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => 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;
|
||||
@ -157,7 +158,6 @@ export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG exte
|
||||
[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
|
||||
}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
|
||||
export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
|
||||
/** Simulate slots for ddeComponents */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
|
||||
/**
|
||||
|
2
dist/iife.min.d.ts
vendored
2
dist/iife.min.d.ts
vendored
@ -145,6 +145,7 @@ export namespace el {
|
||||
host?: "this" | "parentElement";
|
||||
}, is_open?: boolean): Comment;
|
||||
}
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL | ddeHTMLElement;
|
||||
export function el<A extends ddeComponentAttributes, EL extends SupportedElement | ddeDocumentFragment>(component: (attr: A, ...rest: any[]) => 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;
|
||||
@ -157,7 +158,6 @@ export function elNS(namespace: "http://www.w3.org/1998/Math/MathML"): <TAG exte
|
||||
[key in keyof EL]: EL[key] | Signal<EL[key], {}> | string | number | boolean;
|
||||
}>, ...addons: ddeElementAddon<NoInfer<EL>>[]) => ddeMathMLElement;
|
||||
export function elNS(namespace: string): (tag_name: string, attrs?: string | ddeStringable | Record<string, any>, ...addons: ddeElementAddon<SupportedElement>[]) => SupportedElement;
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
|
||||
/** Simulate slots for ddeComponents */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL): EL;
|
||||
/**
|
||||
|
@ -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(
|
||||
|
@ -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: "🎉" }
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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();
|
||||
}
|
@ -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
|
||||
|
2
index.d.ts
vendored
2
index.d.ts
vendored
@ -85,6 +85,7 @@ export namespace el {
|
||||
is_open?: boolean
|
||||
): Comment;
|
||||
}
|
||||
export function chainableAppend<EL extends SupportedElement>(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 extends SupportedElement>(el: EL): EL;
|
||||
/** Simulate slots for ddeComponents */
|
||||
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
|
||||
root: EL,
|
||||
|
1
jsdom.d.ts
vendored
1
jsdom.d.ts
vendored
@ -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,
|
||||
|
Loading…
x
Reference in New Issue
Block a user