2023-11-08 13:44:37 +01:00
type CustomElementTagNameMap = { '#text' : Text , '#comment' : Comment }
type SupportedElement =
HTMLElementTagNameMap [ keyof HTMLElementTagNameMap ]
| SVGElementTagNameMap [ keyof SVGElementTagNameMap ]
| MathMLElementTagNameMap [ keyof MathMLElementTagNameMap ]
| CustomElementTagNameMap [ keyof CustomElementTagNameMap ] ;
2023-10-19 15:01:54 +02:00
declare global {
type ddeComponentAttributes = Record < any , any > | undefined | string ;
2023-11-08 13:44:37 +01:00
type ddeElementModifier < El extends SupportedElement | DocumentFragment > = ( element : El ) = > El ;
2023-10-19 15:01:54 +02:00
}
type AttrsModified = {
/ * *
2023-11-08 13:44:37 +01:00
* Use string like in HTML ( internally uses ` *.setAttribute("style", *) ` ) , or object representation ( like DOM API ) .
2023-10-19 15:01:54 +02:00
* /
2023-11-08 13:44:37 +01:00
style : string | Partial < CSSStyleDeclaration >
2023-10-19 15:01:54 +02:00
/ * *
* 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 .
* /
2023-11-07 21:58:48 +01:00
classList : Record < string , - 1 | 0 | 1 | boolean > ,
2023-10-19 15:01:54 +02:00
/ * *
* By default simiral to ` className ` , but also supports ` string[] `
* * /
className : string | ( string | boolean | undefined ) [ ] ;
/ * *
* Sets ` aria-* ` simiraly to ` dataset `
* * /
ariaset : Record < string , string > ,
}
/ * *
* 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
* /
2023-11-08 13:44:37 +01:00
type ElementAttributes < T extends SupportedElement > = Omit < T , keyof AttrsModified > & AttrsModified ;
export function assign < El extends SupportedElement > ( element : El , . . . attrs_array : Partial < ElementAttributes < El > > [ ] ) : El
type ExtendedHTMLElementTagNameMap = HTMLElementTagNameMap & CustomElementTagNameMap
interface element < el > {
prototype : el ;
append ( . . . els : ( SupportedElement | DocumentFragment | string | element < SupportedElement | DocumentFragment > ) [ ] ) : el
}
export function el < TAG extends keyof ExtendedHTMLElementTagNameMap > (
2023-10-19 15:01:54 +02:00
tag_name : TAG ,
2023-11-08 13:44:37 +01:00
attrs? : string | Partial < ElementAttributes < ExtendedHTMLElementTagNameMap [ TAG ] > > ,
. . . modifiers : ddeElementModifier < ExtendedHTMLElementTagNameMap [ TAG ] > [ ]
) : element < ExtendedHTMLElementTagNameMap [ TAG ] >
2023-10-19 15:01:54 +02:00
export function el < T > (
2023-11-06 14:04:27 +01:00
tag_name ? : "<>" ,
2023-11-08 13:44:37 +01:00
) : element < DocumentFragment >
2023-10-19 15:01:54 +02:00
export function el <
A extends ddeComponentAttributes ,
2023-11-08 13:44:37 +01:00
C extends ( attr : A ) = > SupportedElement | DocumentFragment > (
2023-10-19 15:01:54 +02:00
fComponent : C ,
attrs? : A ,
2023-11-07 21:58:48 +01:00
. . . modifiers : ddeElementModifier < ReturnType < C > > [ ]
2023-11-08 13:44:37 +01:00
) : element < ReturnType < C > >
2023-11-07 21:58:48 +01:00
export function el (
tag_name : string ,
2023-11-08 13:44:37 +01:00
attrs? : string | Record < string , any > ,
. . . modifiers : ddeElementModifier < HTMLElement > [ ]
) : element < HTMLElement >
export function elNS (
namespace : "http://www.w3.org/2000/svg"
) : < TAG extends keyof SVGElementTagNameMap , KEYS extends keyof SVGElementTagNameMap [ TAG ] & { d : string } > (
tag_name : TAG ,
attrs? : string | Partial < { [ key in KEYS ] : SVGElementTagNameMap [ TAG ] [ key ] | string | number | boolean } > ,
. . . modifiers : ddeElementModifier < SVGElementTagNameMap [ TAG ] > [ ]
) = > element < SVGElementTagNameMap [ TAG ] >
export function elNS (
namespace : "http://www.w3.org/1998/Math/MathML"
) : < TAG extends keyof MathMLElementTagNameMap , KEYS extends keyof MathMLElementTagNameMap [ TAG ] & { d : string } > (
tag_name : TAG ,
attrs? : string | Partial < { [ key in KEYS ] : MathMLElementTagNameMap [ TAG ] [ key ] | string | number | boolean } > ,
. . . modifiers : ddeElementModifier < MathMLElementTagNameMap [ TAG ] > [ ]
) = > element < MathMLElementTagNameMap [ TAG ] >
export function elNS (
namespace : string
) : (
tag_name : string ,
attrs? : string | Record < string , any > ,
. . . modifiers : ddeElementModifier < SupportedElement > [ ]
) = > element < SupportedElement >
export function dispatchEvent ( element : SupportedElement , name : keyof DocumentEventMap ) : void ;
export function dispatchEvent ( element : SupportedElement , name : string , data : any ) : void ;
2023-10-19 15:01:54 +02:00
interface On {
<
2023-11-08 13:44:37 +01:00
EE extends ddeElementModifier < SupportedElement > ,
2023-11-07 21:58:48 +01:00
El extends ( EE extends ddeElementModifier < infer El > ? El : never ) ,
2023-10-19 15:01:54 +02:00
Event extends keyof DocumentEventMap > (
type : Event ,
listener : ( this : El , ev : DocumentEventMap [ Event ] ) = > any ,
options? : AddEventListenerOptions
) : EE ;
connected <
2023-11-08 13:44:37 +01:00
EE extends ddeElementModifier < SupportedElement > ,
2023-11-07 21:58:48 +01:00
El extends ( EE extends ddeElementModifier < infer El > ? El : never )
2023-10-19 15:01:54 +02:00
> (
listener : ( el : El ) = > any ,
options? : AddEventListenerOptions
) : EE ;
disconnected <
2023-11-08 13:44:37 +01:00
EE extends ddeElementModifier < SupportedElement > ,
2023-11-07 21:58:48 +01:00
El extends ( EE extends ddeElementModifier < infer El > ? El : never )
2023-10-19 15:01:54 +02:00
> (
listener : ( el : El ) = > any ,
options? : AddEventListenerOptions
) : EE ;
}
export const on : On ;
2023-11-07 21:58:48 +01:00
export const scope : {
host : ddeElementModifier < any > ,
2023-11-08 13:44:37 +01:00
} ;