1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-22 07:49:38 +01:00
deka-dom-el/dist/esm.d.ts

437 lines
21 KiB
TypeScript
Raw Normal View History

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];
2023-10-19 15:01:54 +02:00
declare global {
2023-11-21 17:19:59 +01:00
type ddeComponentAttributes= Record<any, any> | undefined;
2023-11-21 14:37:57 +01:00
type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
2023-10-19 15:01:54 +02:00
}
2023-11-21 14:37:57 +01:00
type PascalCase=
`${Capitalize<string>}${string}`;
2023-10-19 15:01:54 +02:00
type AttrsModified= {
/**
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
2023-10-19 15:01:54 +02: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>,
2023-11-21 14:37:57 +01:00
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string> & Record<`.${string}`, any>
2023-10-19 15:01:54 +02:00
/**
* 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<T extends SupportedElement>= Omit<T,keyof AttrsModified> & AttrsModified;
2023-11-21 14:37:57 +01:00
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
export function assign<El extends SupportedElement>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
2023-11-21 14:37:57 +01:00
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 & ddePublicElementTagNameMap
export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
2023-10-19 15:01:54 +02:00
tag_name: TAG,
attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
2023-11-21 17:19:59 +01:00
...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[TAG]>[]
2023-11-08 14:53:18 +01:00
): ExtendedHTMLElementTagNameMap[TAG]
2023-10-19 15:01:54 +02:00
export function el<T>(
tag_name?: "<>",
2023-11-08 14:53:18 +01:00
): DocumentFragment
2023-11-21 14:37:57 +01:00
2023-10-19 15:01:54 +02:00
export function el<
A extends ddeComponentAttributes,
2023-11-21 17:19:59 +01:00
C extends (attr: Partial<A>)=> SupportedElement | DocumentFragment>(
2023-10-19 15:01:54 +02:00
fComponent: C,
2023-11-21 17:19:59 +01:00
attrs?: A | string,
...addons: ddeElementAddon<ReturnType<C>>[]
2023-11-08 14:53:18 +01:00
): ReturnType<C>
2023-11-21 14:37:57 +01:00
2023-11-07 21:58:48 +01:00
export function el(
tag_name: string,
attrs?: string | Record<string, any>,
2023-11-21 17:19:59 +01:00
...addons: ddeElementAddon<HTMLElement>[]
2023-11-08 14:53:18 +01:00
): HTMLElement
2023-11-21 14:37:57 +01:00
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 }>,
2023-11-21 17:19:59 +01:00
...addons: ddeElementAddon<SVGElementTagNameMap[TAG]>[]
2023-11-08 14:53:18 +01:00
)=> 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 }>,
2023-11-21 17:19:59 +01:00
...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[]
2023-11-08 14:53:18 +01:00
)=> MathMLElementTagNameMap[TAG]
export function elNS(
namespace: string
): (
tag_name: string,
attrs?: string | Record<string, any>,
2023-11-21 17:19:59 +01:00
...addons: ddeElementAddon<SupportedElement>[]
2023-11-08 14:53:18 +01:00
)=> SupportedElement
2023-11-21 14:37:57 +01:00
2023-11-19 11:07:23 +01:00
export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
2023-11-21 14:37:57 +01:00
2023-11-21 17:19:59 +01:00
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
(element: SupportedElement, data?: any)=> void;
2023-10-19 15:01:54 +02:00
interface On{
/** Listens to the DOM event. See {@link Document.addEventListener} */
2023-10-19 15:01:54 +02:00
<
2023-11-21 14:37:57 +01:00
EE extends ddeElementAddon<SupportedElement>,
El extends ( EE extends ddeElementAddon<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;
2023-11-21 17:19:59 +01:00
<
EE extends ddeElementAddon<SupportedElement>,
El extends ( EE extends ddeElementAddon<infer El> ? 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 */
2023-10-19 15:01:54 +02:00
connected<
2023-11-21 14:37:57 +01:00
EE extends ddeElementAddon<SupportedElement>,
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
2023-10-19 15:01:54 +02:00
>(
2023-11-21 17:19:59 +01:00
listener: (this: El, event: CustomEvent<void>) => any,
2023-10-19 15:01:54 +02:00
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 */
2023-10-19 15:01:54 +02:00
disconnected<
2023-11-21 14:37:57 +01:00
EE extends ddeElementAddon<SupportedElement>,
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
2023-10-19 15:01:54 +02:00
>(
2023-11-21 17:19:59 +01:00
listener: (this: El, event: CustomEvent<void>) => any,
2023-10-19 15:01:54 +02:00
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<
2023-11-21 14:37:57 +01:00
EE extends ddeElementAddon<SupportedElement>,
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
>(
2023-11-21 17:19:59 +01:00
listener: (this: El, event: CustomEvent<[ string, string ]>) => any,
options?: AddEventListenerOptions
) : EE;
2023-10-19 15:01:54 +02:00
}
export const on: On;
2023-11-21 14:37:57 +01:00
type Scope= { scope: Node | Function | Object, host: ddeElementAddon<any>, custom_element: false | HTMLElement, prevent: boolean }
/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
2023-11-07 21:58:48 +01:00
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<T extends boolean>(prevent: T): T,
/**
* This represents reference to the current host element `scope.host()`.
2023-11-21 14:37:57 +01:00
* It can be also used to register Addon (function to be called when component is initized)
* `scope.host(on.connected(console.log))`.
* */
2023-11-21 14:37:57 +01:00
host: ddeElementAddon<any>,
state: Scope[],
/** Adds new child scope. All attributes are inherited by default. */
2023-11-08 19:09:39 +01:00
push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
/** Adds root scope as a child of the current scope. */
pushRoot(): ReturnType<Array<Scope>["push"]>,
/** Removes last/current child scope. */
2023-11-08 19:09:39 +01:00
pop(): ReturnType<Array<Scope>["pop"]>,
2023-11-08 14:53:18 +01:00
};
2023-11-21 14:37:57 +01:00
2023-11-08 14:53:18 +01:00
type ddeAppend<el>= (...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<HTMLAnchorElement>;
}
interface HTMLElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLElement>;
}
interface HTMLAreaElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLAreaElement>;
}
interface HTMLAudioElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLAudioElement>;
}
interface HTMLBaseElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLBaseElement>;
}
interface HTMLQuoteElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLQuoteElement>;
}
interface HTMLBodyElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLBodyElement>;
}
interface HTMLBRElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLBRElement>;
}
interface HTMLButtonElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLButtonElement>;
}
interface HTMLCanvasElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLCanvasElement>;
}
interface HTMLTableCaptionElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTableCaptionElement>;
}
interface HTMLTableColElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTableColElement>;
}
interface HTMLTableColElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTableColElement>;
}
interface HTMLDataElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLDataElement>;
}
interface HTMLDataListElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLDataListElement>;
}
interface HTMLModElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLModElement>;
}
interface HTMLDetailsElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLDetailsElement>;
}
interface HTMLDialogElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLDialogElement>;
}
interface HTMLDivElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLDivElement>;
}
interface HTMLDListElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLDListElement>;
}
interface HTMLEmbedElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLEmbedElement>;
}
interface HTMLFieldSetElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLFieldSetElement>;
}
interface HTMLFormElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLFormElement>;
}
interface HTMLHeadingElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLHeadingElement>;
}
interface HTMLHeadElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLHeadElement>;
}
interface HTMLHRElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLHRElement>;
}
interface HTMLHtmlElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLHtmlElement>;
}
interface HTMLIFrameElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLIFrameElement>;
}
interface HTMLImageElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLImageElement>;
}
interface HTMLInputElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLInputElement>;
}
interface HTMLLabelElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLLabelElement>;
}
interface HTMLLegendElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLLegendElement>;
}
interface HTMLLIElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLLIElement>;
}
interface HTMLLinkElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLLinkElement>;
}
interface HTMLMapElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLMapElement>;
}
interface HTMLMenuElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLMenuElement>;
}
interface HTMLMetaElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLMetaElement>;
}
interface HTMLMeterElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLMeterElement>;
}
interface HTMLObjectElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLObjectElement>;
}
interface HTMLOListElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLOListElement>;
}
interface HTMLOptGroupElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLOptGroupElement>;
}
interface HTMLOptionElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLOptionElement>;
}
interface HTMLOutputElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLOutputElement>;
}
interface HTMLParagraphElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLParagraphElement>;
}
interface HTMLPictureElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLPictureElement>;
}
interface HTMLPreElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLPreElement>;
}
interface HTMLProgressElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLProgressElement>;
}
interface HTMLScriptElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLScriptElement>;
}
interface HTMLSelectElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLSelectElement>;
}
interface HTMLSlotElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLSlotElement>;
}
interface HTMLSourceElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLSourceElement>;
}
interface HTMLSpanElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLSpanElement>;
}
interface HTMLStyleElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLStyleElement>;
}
interface HTMLTableElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTableElement>;
}
interface HTMLTableSectionElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTableSectionElement>;
}
interface HTMLTableCellElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTableCellElement>;
}
interface HTMLTemplateElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTemplateElement>;
}
interface HTMLTextAreaElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTextAreaElement>;
}
interface HTMLTableCellElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTableCellElement>;
}
interface HTMLTimeElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTimeElement>;
}
interface HTMLTitleElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTitleElement>;
}
interface HTMLTableRowElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTableRowElement>;
}
interface HTMLTrackElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLTrackElement>;
}
interface HTMLUListElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLUListElement>;
}
interface HTMLVideoElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<HTMLVideoElement>;
}
interface DocumentFragment{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<DocumentFragment>;
}
2023-11-10 17:15:59 +01:00
interface SVGElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
append: ddeAppend<SVGElement>;
}
2023-11-08 14:53:18 +01:00
}