type CustomElementTagNameMap= { '#text': Text, '#comment': Comment } declare global { interface ddePublicElementTagNameMap{ } } type SupportedElement= HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap] | ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap]; declare global { type ddeComponentAttributes= Record | undefined; type ddeElementAddon= (element: El)=> El | void; } type PascalCase= `${Capitalize}${string}`; 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, } & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string> & Record<`.${string}`, any> /** * 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 classListDeclarative(element: El, classList: AttrsModified["classList"]): El export function assign(element: El, ...attrs_array: Partial>[]): El export function assignAttribute>(element: El, attr: ATT, value: ElementAttributes[ATT]): ElementAttributes[ATT] type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap export function el( tag_name: TAG, attrs?: string | Partial>, ...addons: ddeElementAddon[] ): ExtendedHTMLElementTagNameMap[TAG] export function el( tag_name?: "<>", ): DocumentFragment export function el< A extends ddeComponentAttributes, C extends (attr: Partial)=> SupportedElement | DocumentFragment>( fComponent: C, attrs?: A | string, ...addons: ddeElementAddon>[] ): ReturnType export function el( tag_name: string, attrs?: string | Record, ...addons: ddeElementAddon[] ): HTMLElement 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 }>, ...addons: ddeElementAddon[] )=> SVGElementTagNameMap[TAG] 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 }>, ...addons: ddeElementAddon[] )=> MathMLElementTagNameMap[TAG] export function elNS( namespace: string ): ( tag_name: string, attrs?: string | Record, ...addons: ddeElementAddon[] )=> SupportedElement export function chainableAppend(el: EL): EL; export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any)=> void; export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)): (data?: any)=> void; interface On{ /** Listens to the DOM event. See {@link Document.addEventListener} */ < EE extends ddeElementAddon, El extends ( EE extends ddeElementAddon ? El : never ), Event extends keyof DocumentEventMap>( type: Event, listener: (this: El, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions ) : EE; < EE extends ddeElementAddon, El extends ( EE extends ddeElementAddon ? El : never )>( type: string, listener: (this: El, ev: Event | CustomEvent ) => any, options?: AddEventListenerOptions ) : EE; /** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ connected< EE extends ddeElementAddon, El extends ( EE extends ddeElementAddon ? El : never ) >( listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions ) : 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 */ disconnected< EE extends ddeElementAddon, El extends ( EE extends ddeElementAddon ? El : never ) >( listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions ) : EE; /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ attributeChanged< EE extends ddeElementAddon, El extends ( EE extends ddeElementAddon ? El : never ) >( listener: (this: El, event: CustomEvent<[ string, string ]>) => any, options?: AddEventListenerOptions ) : EE; } export const on: On; type Scope= { scope: Node | Function | Object, host: ddeElementAddon, custom_element: false | HTMLElement, prevent: boolean } /** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */ export const scope: { current: Scope, /** Stops all automatizations. E. g. signals used as attributes in current scope * registers removing these listeners (and clean signal if no other listeners are detected) * on `disconnected` event. */ preventDefault(prevent: T): T, /** * This represents reference to the current host element — `scope.host()`. * It can be also used to register Addon (function to be called when component is initized) * — `scope.host(on.connected(console.log))`. * */ host: ddeElementAddon, state: Scope[], /** Adds new child scope. All attributes are inherited by default. */ push(scope: Partial): ReturnType["push"]>, /** Adds root scope as a child of the current scope. */ pushRoot(): ReturnType["push"]>, /** Removes last/current child scope. */ pop(): ReturnType["pop"]>, }; type ddeAppend= (...nodes: (Node | string)[])=> el; declare global{ interface HTMLAnchorElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLAreaElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLAudioElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLBaseElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLQuoteElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLBodyElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLBRElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLButtonElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLCanvasElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTableCaptionElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTableColElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTableColElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLDataElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLDataListElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLModElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLDetailsElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLDialogElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLDivElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLDListElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLEmbedElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLFieldSetElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLFormElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLHeadingElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLHeadElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLHRElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLHtmlElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLIFrameElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLImageElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLInputElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLLabelElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLLegendElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLLIElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLLinkElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLMapElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLMenuElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLMetaElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLMeterElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLObjectElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLOListElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLOptGroupElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLOptionElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLOutputElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLParagraphElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLPictureElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLPreElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLProgressElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLScriptElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLSelectElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLSlotElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLSourceElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLSpanElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLStyleElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTableElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTableSectionElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTableCellElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTemplateElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTextAreaElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTableCellElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTimeElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTitleElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTableRowElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLTrackElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLUListElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface HTMLVideoElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface DocumentFragment{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } interface SVGElement{ /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ append: ddeAppend; } }