mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-22 07:49:38 +01:00
🔤 ce wip
This commit is contained in:
parent
55860b99eb
commit
a60c2dd053
170
dist/esm-with-signals.d.ts
vendored
170
dist/esm-with-signals.d.ts
vendored
@ -1,69 +1,4 @@
|
|||||||
export type Signal<V, A>= (set?: V)=> V & A;
|
declare global{ /* ddeSignal */ }
|
||||||
type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
|
|
||||||
//type SymbolSignal= Symbol;
|
|
||||||
type SymbolOnclear= symbol;
|
|
||||||
type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
|
|
||||||
type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
|
|
||||||
interface signal{
|
|
||||||
_: Symbol
|
|
||||||
/**
|
|
||||||
* Simple example:
|
|
||||||
* ```js
|
|
||||||
* const hello= S("Hello Signal");
|
|
||||||
* ```
|
|
||||||
* …simple todo signal:
|
|
||||||
* ```js
|
|
||||||
* const todos= S([], {
|
|
||||||
* add(v){ this.value.push(S(v)); },
|
|
||||||
* remove(i){ this.value.splice(i, 1); },
|
|
||||||
* [S.symbols.onclear](){ S.clear(...this.value); },
|
|
||||||
* });
|
|
||||||
* ```
|
|
||||||
* …computed signal:
|
|
||||||
* ```js
|
|
||||||
* const name= S("Jan");
|
|
||||||
* const surname= S("Andrle");
|
|
||||||
* const fullname= S(()=> name()+" "+surname());
|
|
||||||
* ```
|
|
||||||
* @param value Initial signal value. Or function computing value from other signals.
|
|
||||||
* @param actions Use to define actions on the signal. Such as add item to the array.
|
|
||||||
* There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
|
|
||||||
* by `S.clear`.
|
|
||||||
* */
|
|
||||||
<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
|
|
||||||
/**
|
|
||||||
* Computations signal. This creates a signal which is computed from other signals.
|
|
||||||
* */
|
|
||||||
<V>(computation: ()=> V): Signal<V, {}>
|
|
||||||
action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
|
|
||||||
signal: S,
|
|
||||||
name: N,
|
|
||||||
...params: A[N] extends (...args: infer P)=> any ? P : never
|
|
||||||
): void;
|
|
||||||
clear(...signals: Signal<any, any>[]): void;
|
|
||||||
on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
|
|
||||||
symbols: {
|
|
||||||
//signal: SymbolSignal;
|
|
||||||
onclear: SymbolOnclear;
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* Reactive element, which is rendered based on the given signal.
|
|
||||||
* ```js
|
|
||||||
* S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
|
|
||||||
* S.el(listS, list=> list.map(li=> el("li", li)));
|
|
||||||
* ```
|
|
||||||
* */
|
|
||||||
el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
|
|
||||||
|
|
||||||
observedAttributes(custom_element: HTMLElement): Record<string, Signal<any, any>>;
|
|
||||||
}
|
|
||||||
export const signal: signal;
|
|
||||||
export const S: signal;
|
|
||||||
declare global {
|
|
||||||
type ddeSignal<T, A= {}>= Signal<T, A>;
|
|
||||||
type ddeAction<V>= Action<V>
|
|
||||||
type ddeActions<V>= Actions<V>
|
|
||||||
}
|
|
||||||
type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
|
type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
|
||||||
type SupportedElement=
|
type SupportedElement=
|
||||||
HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
|
HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
|
||||||
@ -80,20 +15,20 @@ type AttrsModified= {
|
|||||||
/**
|
/**
|
||||||
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
|
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
|
||||||
*/
|
*/
|
||||||
style: string | Partial<CSSStyleDeclaration> | Signal<string, any> | Partial<{ [K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], any> }>
|
style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
|
||||||
/**
|
/**
|
||||||
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
|
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
|
||||||
*/
|
*/
|
||||||
classList: Record<string,-1|0|1|boolean|Signal<-1|0|1|boolean, any>>,
|
classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
|
||||||
/**
|
/**
|
||||||
* By default simiral to `className`, but also supports `string[]`
|
* By default simiral to `className`, but also supports `string[]`
|
||||||
* */
|
* */
|
||||||
className: string | (string|boolean|undefined|Signal<string|boolean|undefined, any>)[];
|
className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
|
||||||
/**
|
/**
|
||||||
* Sets `aria-*` simiraly to `dataset`
|
* Sets `aria-*` simiraly to `dataset`
|
||||||
* */
|
* */
|
||||||
ariaset: Record<string,string|Signal<string, any>>,
|
ariaset: Record<string,string|ddeSignal<string>>,
|
||||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|Signal<string, any>> & Record<`.${string}`, any>
|
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any>
|
||||||
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
|
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
|
||||||
/**
|
/**
|
||||||
* Just element attributtes
|
* Just element attributtes
|
||||||
@ -103,15 +38,15 @@ type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModifi
|
|||||||
* There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
|
* There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
type ElementAttributes<T extends SupportedElement>= Partial<_fromElsInterfaces<T> & { [K in keyof _fromElsInterfaces<T>]: Signal<_fromElsInterfaces<T>[K], any> } & AttrsModified> & Record<string, any>;
|
type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & AttrsModified> & Record<string, any>;
|
||||||
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
|
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
|
||||||
export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
|
export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
|
||||||
export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
|
export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
|
||||||
|
|
||||||
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
|
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
|
||||||
type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Signal<string, any>` leads to `attrs?: any`
|
type textContent= string | ddeSignal<string>;
|
||||||
export function el<
|
export function el<
|
||||||
TAG extends keyof ExtendedHTMLElementTagNameMap & string,
|
TAG extends keyof ExtendedHTMLElementTagNameMap,
|
||||||
EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
|
EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
|
||||||
>(
|
>(
|
||||||
tag_name: TAG,
|
tag_name: TAG,
|
||||||
@ -121,6 +56,11 @@ export function el<
|
|||||||
export function el(
|
export function el(
|
||||||
tag_name?: "<>",
|
tag_name?: "<>",
|
||||||
): ddeDocumentFragment
|
): ddeDocumentFragment
|
||||||
|
export function el(
|
||||||
|
tag_name: string,
|
||||||
|
attrs?: ElementAttributes<HTMLElement>,
|
||||||
|
...addons: ddeElementAddon<HTMLElement>[]
|
||||||
|
): ddeHTMLElement
|
||||||
|
|
||||||
export function el<
|
export function el<
|
||||||
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
|
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
|
||||||
@ -148,7 +88,7 @@ export function elNS(
|
|||||||
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
|
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
|
||||||
>(
|
>(
|
||||||
tag_name: TAG,
|
tag_name: TAG,
|
||||||
attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | Signal<EL[key], any> | string | number | boolean }>,
|
attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean }>,
|
||||||
...addons: ddeElementAddon<EL>[]
|
...addons: ddeElementAddon<EL>[]
|
||||||
)=> ddeMathMLElement
|
)=> ddeMathMLElement
|
||||||
export function elNS(
|
export function elNS(
|
||||||
@ -189,7 +129,7 @@ interface On{
|
|||||||
EE extends ddeElementAddon<SupportedElement>,
|
EE extends ddeElementAddon<SupportedElement>,
|
||||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||||
>(
|
>(
|
||||||
listener: (this: El, event: CustomEvent<void>) => any,
|
listener: (this: El, event: CustomEvent<El>) => any,
|
||||||
options?: AddEventListenerOptions
|
options?: AddEventListenerOptions
|
||||||
) : EE;
|
) : EE;
|
||||||
/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||||
@ -224,7 +164,7 @@ export const scope: {
|
|||||||
* It can be also used to register Addon(s) (functions to be called when component is initized)
|
* It can be also used to register Addon(s) (functions to be called when component is initized)
|
||||||
* — `scope.host(on.connected(console.log))`.
|
* — `scope.host(on.connected(console.log))`.
|
||||||
* */
|
* */
|
||||||
host: (...addons: ddeElementAddon<any>[])=> HTMLElement,
|
host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
|
||||||
|
|
||||||
state: Scope[],
|
state: Scope[],
|
||||||
/** Adds new child scope. All attributes are inherited by default. */
|
/** Adds new child scope. All attributes are inherited by default. */
|
||||||
@ -237,15 +177,15 @@ export const scope: {
|
|||||||
|
|
||||||
export function customElementRender<
|
export function customElementRender<
|
||||||
EL extends HTMLElement,
|
EL extends HTMLElement,
|
||||||
P extends any = Record<string, any>
|
P extends any = Record<string, string | ddeSignal<string>>
|
||||||
>(
|
>(
|
||||||
custom_element: EL,
|
custom_element: EL,
|
||||||
target: ShadowRoot | EL,
|
target: ShadowRoot | EL,
|
||||||
render: (props: P)=> SupportedElement,
|
render: (props: P)=> SupportedElement | DocumentFragment,
|
||||||
props?: P | ((...args: any[])=> P)
|
props?: P | ((el: EL)=> P)
|
||||||
): EL
|
): EL
|
||||||
export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
|
export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
|
||||||
export function lifecyclesToEvents<EL extends HTMLElement>(custom_element: EL): EL
|
export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
|
||||||
export function observedAttributes(custom_element: HTMLElement): Record<string, string>
|
export function observedAttributes(custom_element: HTMLElement): Record<string, string>
|
||||||
|
|
||||||
/* TypeScript MEH */
|
/* TypeScript MEH */
|
||||||
@ -526,3 +466,69 @@ interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTi
|
|||||||
interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
|
interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
|
||||||
interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
|
interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
|
||||||
interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
|
interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
|
||||||
|
export type Signal<V, A>= (set?: V)=> V & A;
|
||||||
|
type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
|
||||||
|
//type SymbolSignal= Symbol;
|
||||||
|
type SymbolOnclear= symbol;
|
||||||
|
type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
|
||||||
|
type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
|
||||||
|
interface signal{
|
||||||
|
_: Symbol
|
||||||
|
/**
|
||||||
|
* Computations signal. This creates a signal which is computed from other signals.
|
||||||
|
* */
|
||||||
|
<V extends ()=> any>(computation: V): Signal<ReturnType<V>, {}>
|
||||||
|
/**
|
||||||
|
* Simple example:
|
||||||
|
* ```js
|
||||||
|
* const hello= S("Hello Signal");
|
||||||
|
* ```
|
||||||
|
* …simple todo signal:
|
||||||
|
* ```js
|
||||||
|
* const todos= S([], {
|
||||||
|
* add(v){ this.value.push(S(v)); },
|
||||||
|
* remove(i){ this.value.splice(i, 1); },
|
||||||
|
* [S.symbols.onclear](){ S.clear(...this.value); },
|
||||||
|
* });
|
||||||
|
* ```
|
||||||
|
* …computed signal:
|
||||||
|
* ```js
|
||||||
|
* const name= S("Jan");
|
||||||
|
* const surname= S("Andrle");
|
||||||
|
* const fullname= S(()=> name()+" "+surname());
|
||||||
|
* ```
|
||||||
|
* @param value Initial signal value. Or function computing value from other signals.
|
||||||
|
* @param actions Use to define actions on the signal. Such as add item to the array.
|
||||||
|
* There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
|
||||||
|
* by `S.clear`.
|
||||||
|
* */
|
||||||
|
<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
|
||||||
|
action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
|
||||||
|
signal: S,
|
||||||
|
name: N,
|
||||||
|
...params: A[N] extends (...args: infer P)=> any ? P : never
|
||||||
|
): void;
|
||||||
|
clear(...signals: Signal<any, any>[]): void;
|
||||||
|
on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
|
||||||
|
symbols: {
|
||||||
|
//signal: SymbolSignal;
|
||||||
|
onclear: SymbolOnclear;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Reactive element, which is rendered based on the given signal.
|
||||||
|
* ```js
|
||||||
|
* S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
|
||||||
|
* S.el(listS, list=> list.map(li=> el("li", li)));
|
||||||
|
* ```
|
||||||
|
* */
|
||||||
|
el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
|
||||||
|
|
||||||
|
observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
|
||||||
|
}
|
||||||
|
export const signal: signal;
|
||||||
|
export const S: signal;
|
||||||
|
declare global {
|
||||||
|
type ddeSignal<T, A= {}>= Signal<T, A>;
|
||||||
|
type ddeAction<V>= Action<V>
|
||||||
|
type ddeActions<V>= Actions<V>
|
||||||
|
}
|
104
dist/esm.d.ts
vendored
104
dist/esm.d.ts
vendored
@ -1,69 +1,4 @@
|
|||||||
export type Signal<V, A>= (set?: V)=> V & A;
|
declare global{ /* ddeSignal */ }
|
||||||
type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
|
|
||||||
//type SymbolSignal= Symbol;
|
|
||||||
type SymbolOnclear= symbol;
|
|
||||||
type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
|
|
||||||
type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
|
|
||||||
interface signal{
|
|
||||||
_: Symbol
|
|
||||||
/**
|
|
||||||
* Simple example:
|
|
||||||
* ```js
|
|
||||||
* const hello= S("Hello Signal");
|
|
||||||
* ```
|
|
||||||
* …simple todo signal:
|
|
||||||
* ```js
|
|
||||||
* const todos= S([], {
|
|
||||||
* add(v){ this.value.push(S(v)); },
|
|
||||||
* remove(i){ this.value.splice(i, 1); },
|
|
||||||
* [S.symbols.onclear](){ S.clear(...this.value); },
|
|
||||||
* });
|
|
||||||
* ```
|
|
||||||
* …computed signal:
|
|
||||||
* ```js
|
|
||||||
* const name= S("Jan");
|
|
||||||
* const surname= S("Andrle");
|
|
||||||
* const fullname= S(()=> name()+" "+surname());
|
|
||||||
* ```
|
|
||||||
* @param value Initial signal value. Or function computing value from other signals.
|
|
||||||
* @param actions Use to define actions on the signal. Such as add item to the array.
|
|
||||||
* There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
|
|
||||||
* by `S.clear`.
|
|
||||||
* */
|
|
||||||
<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
|
|
||||||
/**
|
|
||||||
* Computations signal. This creates a signal which is computed from other signals.
|
|
||||||
* */
|
|
||||||
<V>(computation: ()=> V): Signal<V, {}>
|
|
||||||
action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
|
|
||||||
signal: S,
|
|
||||||
name: N,
|
|
||||||
...params: A[N] extends (...args: infer P)=> any ? P : never
|
|
||||||
): void;
|
|
||||||
clear(...signals: Signal<any, any>[]): void;
|
|
||||||
on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
|
|
||||||
symbols: {
|
|
||||||
//signal: SymbolSignal;
|
|
||||||
onclear: SymbolOnclear;
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* Reactive element, which is rendered based on the given signal.
|
|
||||||
* ```js
|
|
||||||
* S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
|
|
||||||
* S.el(listS, list=> list.map(li=> el("li", li)));
|
|
||||||
* ```
|
|
||||||
* */
|
|
||||||
el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
|
|
||||||
|
|
||||||
observedAttributes(custom_element: HTMLElement): Record<string, Signal<any, any>>;
|
|
||||||
}
|
|
||||||
export const signal: signal;
|
|
||||||
export const S: signal;
|
|
||||||
declare global {
|
|
||||||
type ddeSignal<T, A= {}>= Signal<T, A>;
|
|
||||||
type ddeAction<V>= Action<V>
|
|
||||||
type ddeActions<V>= Actions<V>
|
|
||||||
}
|
|
||||||
type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
|
type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
|
||||||
type SupportedElement=
|
type SupportedElement=
|
||||||
HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
|
HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
|
||||||
@ -80,20 +15,20 @@ type AttrsModified= {
|
|||||||
/**
|
/**
|
||||||
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
|
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
|
||||||
*/
|
*/
|
||||||
style: string | Partial<CSSStyleDeclaration> | Signal<string, any> | Partial<{ [K in keyof CSSStyleDeclaration]: Signal<CSSStyleDeclaration[K], any> }>
|
style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
|
||||||
/**
|
/**
|
||||||
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
|
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
|
||||||
*/
|
*/
|
||||||
classList: Record<string,-1|0|1|boolean|Signal<-1|0|1|boolean, any>>,
|
classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
|
||||||
/**
|
/**
|
||||||
* By default simiral to `className`, but also supports `string[]`
|
* By default simiral to `className`, but also supports `string[]`
|
||||||
* */
|
* */
|
||||||
className: string | (string|boolean|undefined|Signal<string|boolean|undefined, any>)[];
|
className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
|
||||||
/**
|
/**
|
||||||
* Sets `aria-*` simiraly to `dataset`
|
* Sets `aria-*` simiraly to `dataset`
|
||||||
* */
|
* */
|
||||||
ariaset: Record<string,string|Signal<string, any>>,
|
ariaset: Record<string,string|ddeSignal<string>>,
|
||||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|Signal<string, any>> & Record<`.${string}`, any>
|
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any>
|
||||||
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
|
type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
|
||||||
/**
|
/**
|
||||||
* Just element attributtes
|
* Just element attributtes
|
||||||
@ -103,15 +38,15 @@ type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModifi
|
|||||||
* There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
|
* There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
type ElementAttributes<T extends SupportedElement>= Partial<_fromElsInterfaces<T> & { [K in keyof _fromElsInterfaces<T>]: Signal<_fromElsInterfaces<T>[K], any> } & AttrsModified> & Record<string, any>;
|
type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & AttrsModified> & Record<string, any>;
|
||||||
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
|
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
|
||||||
export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
|
export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
|
||||||
export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
|
export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
|
||||||
|
|
||||||
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
|
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
|
||||||
type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Signal<string, any>` leads to `attrs?: any`
|
type textContent= string | ddeSignal<string>;
|
||||||
export function el<
|
export function el<
|
||||||
TAG extends keyof ExtendedHTMLElementTagNameMap & string,
|
TAG extends keyof ExtendedHTMLElementTagNameMap,
|
||||||
EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
|
EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
|
||||||
>(
|
>(
|
||||||
tag_name: TAG,
|
tag_name: TAG,
|
||||||
@ -121,6 +56,11 @@ export function el<
|
|||||||
export function el(
|
export function el(
|
||||||
tag_name?: "<>",
|
tag_name?: "<>",
|
||||||
): ddeDocumentFragment
|
): ddeDocumentFragment
|
||||||
|
export function el(
|
||||||
|
tag_name: string,
|
||||||
|
attrs?: ElementAttributes<HTMLElement>,
|
||||||
|
...addons: ddeElementAddon<HTMLElement>[]
|
||||||
|
): ddeHTMLElement
|
||||||
|
|
||||||
export function el<
|
export function el<
|
||||||
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
|
C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
|
||||||
@ -148,7 +88,7 @@ export function elNS(
|
|||||||
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
|
EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
|
||||||
>(
|
>(
|
||||||
tag_name: TAG,
|
tag_name: TAG,
|
||||||
attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | Signal<EL[key], any> | string | number | boolean }>,
|
attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean }>,
|
||||||
...addons: ddeElementAddon<EL>[]
|
...addons: ddeElementAddon<EL>[]
|
||||||
)=> ddeMathMLElement
|
)=> ddeMathMLElement
|
||||||
export function elNS(
|
export function elNS(
|
||||||
@ -189,7 +129,7 @@ interface On{
|
|||||||
EE extends ddeElementAddon<SupportedElement>,
|
EE extends ddeElementAddon<SupportedElement>,
|
||||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||||
>(
|
>(
|
||||||
listener: (this: El, event: CustomEvent<void>) => any,
|
listener: (this: El, event: CustomEvent<El>) => any,
|
||||||
options?: AddEventListenerOptions
|
options?: AddEventListenerOptions
|
||||||
) : EE;
|
) : EE;
|
||||||
/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||||
@ -224,7 +164,7 @@ export const scope: {
|
|||||||
* It can be also used to register Addon(s) (functions to be called when component is initized)
|
* It can be also used to register Addon(s) (functions to be called when component is initized)
|
||||||
* — `scope.host(on.connected(console.log))`.
|
* — `scope.host(on.connected(console.log))`.
|
||||||
* */
|
* */
|
||||||
host: (...addons: ddeElementAddon<any>[])=> HTMLElement,
|
host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
|
||||||
|
|
||||||
state: Scope[],
|
state: Scope[],
|
||||||
/** Adds new child scope. All attributes are inherited by default. */
|
/** Adds new child scope. All attributes are inherited by default. */
|
||||||
@ -237,15 +177,15 @@ export const scope: {
|
|||||||
|
|
||||||
export function customElementRender<
|
export function customElementRender<
|
||||||
EL extends HTMLElement,
|
EL extends HTMLElement,
|
||||||
P extends any = Record<string, any>
|
P extends any = Record<string, string | ddeSignal<string>>
|
||||||
>(
|
>(
|
||||||
custom_element: EL,
|
custom_element: EL,
|
||||||
target: ShadowRoot | EL,
|
target: ShadowRoot | EL,
|
||||||
render: (props: P)=> SupportedElement,
|
render: (props: P)=> SupportedElement | DocumentFragment,
|
||||||
props?: P | ((...args: any[])=> P)
|
props?: P | ((el: EL)=> P)
|
||||||
): EL
|
): EL
|
||||||
export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
|
export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
|
||||||
export function lifecyclesToEvents<EL extends HTMLElement>(custom_element: EL): EL
|
export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
|
||||||
export function observedAttributes(custom_element: HTMLElement): Record<string, string>
|
export function observedAttributes(custom_element: HTMLElement): Record<string, string>
|
||||||
|
|
||||||
/* TypeScript MEH */
|
/* TypeScript MEH */
|
||||||
|
File diff suppressed because one or more lines are too long
@ -0,0 +1,42 @@
|
|||||||
|
import {
|
||||||
|
customElementRender,
|
||||||
|
customElementWithDDE,
|
||||||
|
observedAttributes,
|
||||||
|
el, on, scope
|
||||||
|
} from "deka-dom-el";
|
||||||
|
import { S } from "deka-dom-el/signals";
|
||||||
|
export class HTMLCustomElement extends HTMLElement{
|
||||||
|
static tagName= "custom-element";
|
||||||
|
static observedAttributes= [ "attr" ];
|
||||||
|
connectedCallback(){
|
||||||
|
console.log(observedAttributes(this));
|
||||||
|
customElementRender(
|
||||||
|
this,
|
||||||
|
this.attachShadow({ mode: "open" }),
|
||||||
|
ddeComponent,
|
||||||
|
S.observedAttributes
|
||||||
|
);
|
||||||
|
}
|
||||||
|
set attr(value){ this.setAttribute("attr", value); }
|
||||||
|
get attr(){ return this.getAttribute("attr"); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {{ attr: ddeSignal<string, {}> }} props */
|
||||||
|
function ddeComponent({ attr }){
|
||||||
|
scope.host(
|
||||||
|
on.connected(e=> console.log(e.target.outerHTML)),
|
||||||
|
);
|
||||||
|
return el().append(
|
||||||
|
el("p", S(()=> `Hello from Custom Element with attribute '${attr()}'`))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
customElementWithDDE(HTMLCustomElement);
|
||||||
|
customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
|
||||||
|
|
||||||
|
document.body.append(
|
||||||
|
el(HTMLCustomElement.tagName, { attr: "Attribute" })
|
||||||
|
);
|
||||||
|
setTimeout(
|
||||||
|
()=> document.querySelector(HTMLCustomElement.tagName).setAttribute("attr", "New Value"),
|
||||||
|
3*750
|
||||||
|
);
|
@ -81,6 +81,7 @@ export function page({ pkg, info }){
|
|||||||
and ${el("code", "observedAttributes")} (converts attributes to render function arguments —
|
and ${el("code", "observedAttributes")} (converts attributes to render function arguments —
|
||||||
${el("em", "default")}) or ${el("code", "S.observedAttributes")} (converts attributes to signals).
|
${el("em", "default")}) or ${el("code", "S.observedAttributes")} (converts attributes to signals).
|
||||||
`),
|
`),
|
||||||
|
el(example, { src: fileURL("./components/examples/customElement/observedAttributes.js"), page_id }),
|
||||||
|
|
||||||
|
|
||||||
el(mnemonic)
|
el(mnemonic)
|
||||||
|
4
index.d.ts
vendored
4
index.d.ts
vendored
@ -177,12 +177,12 @@ export const scope: {
|
|||||||
|
|
||||||
export function customElementRender<
|
export function customElementRender<
|
||||||
EL extends HTMLElement,
|
EL extends HTMLElement,
|
||||||
P extends any = Record<string, any>
|
P extends any = Record<string, string | ddeSignal<string>>
|
||||||
>(
|
>(
|
||||||
custom_element: EL,
|
custom_element: EL,
|
||||||
target: ShadowRoot | EL,
|
target: ShadowRoot | EL,
|
||||||
render: (props: P)=> SupportedElement | DocumentFragment,
|
render: (props: P)=> SupportedElement | DocumentFragment,
|
||||||
props?: P | ((...args: any[])=> P)
|
props?: P | ((el: EL)=> P)
|
||||||
): EL
|
): EL
|
||||||
export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
|
export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
|
||||||
export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
|
export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
|
||||||
|
2
signals.d.ts
vendored
2
signals.d.ts
vendored
@ -55,7 +55,7 @@ interface signal{
|
|||||||
* */
|
* */
|
||||||
el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
|
el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
|
||||||
|
|
||||||
observedAttributes(custom_element: HTMLElement): Record<string, Signal<any, any>>;
|
observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
|
||||||
}
|
}
|
||||||
export const signal: signal;
|
export const signal: signal;
|
||||||
export const S: signal;
|
export const S: signal;
|
||||||
|
Loading…
Reference in New Issue
Block a user