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= ddeHTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap export function el( tag_name: TAG, attrs?: string | Partial>, ...addons: ddeElementAddon[] ): ExtendedHTMLElementTagNameMap[TAG] export function el( tag_name?: "<>", ): ddeDocumentFragment 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[] ): ddeHTMLElement export function elNS( namespace: "http://www.w3.org/2000/svg" ): ( tag_name: TAG, attrs?: string | Partial<{ [key in KEYS]: EL[key] | string | number | boolean }>, ...addons: ddeElementAddon[] )=> EL 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[] )=> ddeMathMLElement export function elNS( namespace: string ): ( tag_name: string, attrs?: string | Record, ...addons: ddeElementAddon[] )=> SupportedElement export function chainableAppend(el: EL): EL; export function simulateSlots(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(s) (functions to be called when component is initized) * — `scope.host(on.connected(console.log))`. * */ host: (...addons: ddeElementAddon[])=> HTMLElement, 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"]>, }; /* TypeScript MEH // TODO for SVG */ type ddeAppend= (...nodes: (Node | string)[])=> el; declare global{ interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend; } interface ddeHTMLElement extends HTMLElement{ append: ddeAppend; } interface ddeSVGElement extends SVGElement{ append: ddeAppend; } interface ddeMathMLElement extends MathMLElement{ append: ddeAppend; } interface ddeHTMLElementTagNameMap { "a": ddeHTMLAnchorElement; "area": ddeHTMLAreaElement; "audio": ddeHTMLAudioElement; "base": ddeHTMLBaseElement; "blockquote": ddeHTMLQuoteElement; "body": ddeHTMLBodyElement; "br": ddeHTMLBRElement; "button": ddeHTMLButtonElement; "canvas": ddeHTMLCanvasElement; "caption": ddeHTMLTableCaptionElement; "col": ddeHTMLTableColElement; "colgroup": ddeHTMLTableColElement; "data": ddeHTMLDataElement; "datalist": ddeHTMLDataListElement; "del": ddeHTMLModElement; "details": ddeHTMLDetailsElement; "dialog": ddeHTMLDialogElement; "div": ddeHTMLDivElement; "dl": ddeHTMLDListElement; "embed": ddeHTMLEmbedElement; "fieldset": ddeHTMLFieldSetElement; "form": ddeHTMLFormElement; "h1": ddeHTMLHeadingElement; "h2": ddeHTMLHeadingElement; "h3": ddeHTMLHeadingElement; "h4": ddeHTMLHeadingElement; "h5": ddeHTMLHeadingElement; "h6": ddeHTMLHeadingElement; "head": ddeHTMLHeadElement; "hr": ddeHTMLHRElement; "html": ddeHTMLHtmlElement; "iframe": ddeHTMLIFrameElement; "img": ddeHTMLImageElement; "input": ddeHTMLInputElement; "ins": ddeHTMLModElement; "label": ddeHTMLLabelElement; "legend": ddeHTMLLegendElement; "li": ddeHTMLLIElement; "link": ddeHTMLLinkElement; "map": ddeHTMLMapElement; "menu": ddeHTMLMenuElement; "meta": ddeHTMLMetaElement; "meter": ddeHTMLMeterElement; "object": ddeHTMLObjectElement; "ol": ddeHTMLOListElement; "optgroup": ddeHTMLOptGroupElement; "option": ddeHTMLOptionElement; "output": ddeHTMLOutputElement; "p": ddeHTMLParagraphElement; "picture": ddeHTMLPictureElement; "pre": ddeHTMLPreElement; "progress": ddeHTMLProgressElement; "q": ddeHTMLQuoteElement; "script": ddeHTMLScriptElement; "select": ddeHTMLSelectElement; "slot": ddeHTMLSlotElement; "source": ddeHTMLSourceElement; "span": ddeHTMLSpanElement; "style": ddeHTMLStyleElement; "table": ddeHTMLTableElement; "tbody": ddeHTMLTableSectionElement; "td": ddeHTMLTableCellElement; "template": ddeHTMLTemplateElement; "textarea": ddeHTMLTextAreaElement; "tfoot": ddeHTMLTableSectionElement; "th": ddeHTMLTableCellElement; "thead": ddeHTMLTableSectionElement; "time": ddeHTMLTimeElement; "title": ddeHTMLTitleElement; "tr": ddeHTMLTableRowElement; "track": ddeHTMLTrackElement; "ul": ddeHTMLUListElement; "video": ddeHTMLVideoElement; } interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend; } interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend; } interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend; } interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend; } interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend; } interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend; } interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend; } interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend; } interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend; } interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend; } interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend; } interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend; } interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend; } interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend; } interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend; } interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend; } interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend; } interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend; } interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend; } interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend; } interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend; } interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend; } interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend; } interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend; } interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend; } interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend; } interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend; } interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend; } interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend; } interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend; } interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend; } interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend; } interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend; } interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend; } interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend; } interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend; } interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend; } interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend; } interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend; } interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend; } interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend; } interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend; } interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend; } interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend; } interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend; } interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend; } interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend; } interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend; } interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend; } interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend; } interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend; } interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend; } interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend; } interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend; } interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend; } interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend; } interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend; } interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend; } interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend; } interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend; } interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend; } interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend; } interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend; } interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend; } interface ddeSVGElementTagNameMap { "a": ddeSVGAElement; "animate": ddeSVGAnimateElement; "animateMotion": ddeSVGAnimateMotionElement; "animateTransform": ddeSVGAnimateTransformElement; "circle": ddeSVGCircleElement; "clipPath": ddeSVGClipPathElement; "defs": ddeSVGDefsElement; "desc": ddeSVGDescElement; "ellipse": ddeSVGEllipseElement; "feBlend": ddeSVGFEBlendElement; "feColorMatrix": ddeSVGFEColorMatrixElement; "feComponentTransfer": ddeSVGFEComponentTransferElement; "feComposite": ddeSVGFECompositeElement; "feConvolveMatrix": ddeSVGFEConvolveMatrixElement; "feDiffuseLighting": ddeSVGFEDiffuseLightingElement; "feDisplacementMap": ddeSVGFEDisplacementMapElement; "feDistantLight": ddeSVGFEDistantLightElement; "feDropShadow": ddeSVGFEDropShadowElement; "feFlood": ddeSVGFEFloodElement; "feFuncA": ddeSVGFEFuncAElement; "feFuncB": ddeSVGFEFuncBElement; "feFuncG": ddeSVGFEFuncGElement; "feFuncR": ddeSVGFEFuncRElement; "feGaussianBlur": ddeSVGFEGaussianBlurElement; "feImage": ddeSVGFEImageElement; "feMerge": ddeSVGFEMergeElement; "feMergeNode": ddeSVGFEMergeNodeElement; "feMorphology": ddeSVGFEMorphologyElement; "feOffset": ddeSVGFEOffsetElement; "fePointLight": ddeSVGFEPointLightElement; "feSpecularLighting": ddeSVGFESpecularLightingElement; "feSpotLight": ddeSVGFESpotLightElement; "feTile": ddeSVGFETileElement; "feTurbulence": ddeSVGFETurbulenceElement; "filter": ddeSVGFilterElement; "foreignObject": ddeSVGForeignObjectElement; "g": ddeSVGGElement; "image": ddeSVGImageElement; "line": ddeSVGLineElement; "linearGradient": ddeSVGLinearGradientElement; "marker": ddeSVGMarkerElement; "mask": ddeSVGMaskElement; "metadata": ddeSVGMetadataElement; "mpath": ddeSVGMPathElement; "path": ddeSVGPathElement; "pattern": ddeSVGPatternElement; "polygon": ddeSVGPolygonElement; "polyline": ddeSVGPolylineElement; "radialGradient": ddeSVGRadialGradientElement; "rect": ddeSVGRectElement; "script": ddeSVGScriptElement; "set": ddeSVGSetElement; "stop": ddeSVGStopElement; "style": ddeSVGStyleElement; "svg": ddeSVGSVGElement; "switch": ddeSVGSwitchElement; "symbol": ddeSVGSymbolElement; "text": ddeSVGTextElement; "textPath": ddeSVGTextPathElement; "title": ddeSVGTitleElement; "tspan": ddeSVGTSpanElement; "use": ddeSVGUseElement; "view": ddeSVGViewElement; } interface ddeSVGAElement extends SVGAElement{ append: ddeAppend; } interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend; } interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend; } interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend; } interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend; } interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend; } interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend; } interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend; } interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend; } interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend; } interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend; } interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend; } interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend; } interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend; } interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend; } interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend; } interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend; } interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend; } interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend; } interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend; } interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend; } interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend; } interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend; } interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend; } interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend; } interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend; } interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend; } interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend; } interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend; } interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend; } interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend; } interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend; } interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend; } interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend; } interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend; } interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend; } interface ddeSVGGElement extends SVGGElement{ append: ddeAppend; } interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend; } interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend; } interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend; } interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend; } interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend; } interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend; } interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend; } interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend; } interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend; } interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend; } interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend; } interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend; } interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend; } interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend; } interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend; } interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend; } interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend; } interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend; } interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend; } interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend; } interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend; } interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend; } interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend; } interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend; } interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend; } interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend; } }