type CustomElementTagNameMap= { '#text': Text, '#comment': Comment } type SupportedElement= HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]; declare global { type ddeComponentAttributes= Record | undefined | string; type ddeElementModifier= (element: El)=> El; } type AttrsModified= { /** * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API). */ style: string | Partial /** * 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, /** * By default simiral to `className`, but also supports `string[]` * */ className: string | (string|boolean|undefined)[]; /** * Sets `aria-*` simiraly to `dataset` * */ ariaset: Record, } /** * Just element attributtes * * In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)). * * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives. * @private */ type ElementAttributes= Omit & AttrsModified; export function assign(element: El, ...attrs_array: Partial>[]): El type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap interface element{ prototype: el; append(...els: (SupportedElement | DocumentFragment | string | element)[]): el } export function el( tag_name: TAG, attrs?: string | Partial>, ...modifiers: ddeElementModifier[] ): element export function el( tag_name?: "<>", ): element export function el< A extends ddeComponentAttributes, C extends (attr: A)=> SupportedElement | DocumentFragment>( fComponent: C, attrs?: A, ...modifiers: ddeElementModifier>[] ): element> export function el( tag_name: string, attrs?: string | Record, ...modifiers: ddeElementModifier[] ): element export function elNS( namespace: "http://www.w3.org/2000/svg" ): ( tag_name: TAG, attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>, ...modifiers: ddeElementModifier[] )=> element export function elNS( namespace: "http://www.w3.org/1998/Math/MathML" ): ( tag_name: TAG, attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>, ...modifiers: ddeElementModifier[] )=> element export function elNS( namespace: string ): ( tag_name: string, attrs?: string | Record, ...modifiers: ddeElementModifier[] )=> element export function dispatchEvent(element: SupportedElement, name: keyof DocumentEventMap): void; export function dispatchEvent(element: SupportedElement, name: string, data: any): void; interface On{ < EE extends ddeElementModifier, El extends ( EE extends ddeElementModifier ? El : never ), Event extends keyof DocumentEventMap>( type: Event, listener: (this: El, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions ) : EE; connected< EE extends ddeElementModifier, El extends ( EE extends ddeElementModifier ? El : never ) >( listener: (el: El) => any, options?: AddEventListenerOptions ) : EE; disconnected< EE extends ddeElementModifier, El extends ( EE extends ddeElementModifier ? El : never ) >( listener: (el: El) => any, options?: AddEventListenerOptions ) : EE; } export const on: On; export const scope: { host: ddeElementModifier, }; export type Signal= (set?: V)=> V & A; type Action= (this: { value: V }, ...a: any[])=> typeof S._ | void; type SymbolOnclear= Symbol; type SymbolSignal= Symbol; type Actions= Record>; interface S { _: 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`. * */ >(value: V, actions?: A): Signal; action>, A extends (S extends Signal ? A : never), N extends keyof A>( signal: S, name: N, ...params: A[N] extends (...args: infer P)=> any ? P : never ): void; clear(...signals: Signal[]): void; on(signal: Signal, onchange: (a: T)=> void, options?: AddEventListenerOptions): void; symbols: { signal: SymbolSignal; onclear: SymbolOnclear; } el(signal: Signal, el: (v: S)=> T): T; } export const S: S; declare global { type ddeSignal= Signal; type ddeActions= Actions }