jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-04-06 05:35:54 +02:00
Code Packages Releases Activity

⚡ 🐛 registerReactivity and types

Browse Source
This commit is contained in:
Jan Andrle 2025-03-10 15:46:49 +01:00
parent c0c7428938
commit 5073ac5b69
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
13 changed files with 58 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
dist/esm-with-signals.d.ts vendored
View File

@ -80,10 +80,11 @@ export type CustomElementTagNameMap = {
export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]; export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
declare global { declare global {
type ddeComponentAttributes = Record<any, any> | undefined; type ddeComponentAttributes = Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El, ...rest: any) => any;
type ddeString = string | Signal<string, {}>; type ddeString = string | Signal<string, {}>;
type ddeStringable = ddeString | number | Signal<number, {}>; type ddeStringable = ddeString | number | Signal<number, {}>;
} }
export type Host<EL extends SupportedElement> = (...addons: ddeElementAddon<EL>[]) => EL;
export type PascalCase = `${Capitalize<string>}${string}`; export type PascalCase = `${Capitalize<string>}${string}`;
export type AttrsModified = { export type AttrsModified = {
/** /**
@ -166,9 +167,9 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(ro
* @param body Body of the custom element * @param body Body of the custom element
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL; export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, host: Host<SupportedElement>): (data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
export interface On { export interface On {
/** Listens to the DOM event. See {@link Document.addEventListener} */ /** Listens to the DOM event. See {@link Document.addEventListener} */
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; <Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
@ -186,7 +187,7 @@ export interface On {
export const on: On; export const on: On;
export type Scope = { export type Scope = {
scope: Node | Function | Object; scope: Node | Function | Object;
host: ddeElementAddon<any>; host: Host<SupportedElement>;
custom_element: false | HTMLElement; custom_element: false | HTMLElement;
prevent: boolean; prevent: boolean;
}; };
@ -202,7 +203,7 @@ export const scope: {
* It can be also used to register Addon(s) (functions to be called when component is initized) * It can be also used to register Addon(s) (functions to be called when component is initized)
* — `scope.host(on.connected(console.log))`. * — `scope.host(on.connected(console.log))`.
* */ * */
host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement; host: Host<SupportedElement>;
/** /**
* Creates/gets an AbortController that triggers when the element disconnects * Creates/gets an AbortController that triggers when the element disconnects
* */ * */

11
dist/esm-with-signals.min.d.ts vendored
View File

@ -80,10 +80,11 @@ export type CustomElementTagNameMap = {
export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]; export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
declare global { declare global {
type ddeComponentAttributes = Record<any, any> | undefined; type ddeComponentAttributes = Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El, ...rest: any) => any;
type ddeString = string | Signal<string, {}>; type ddeString = string | Signal<string, {}>;
type ddeStringable = ddeString | number | Signal<number, {}>; type ddeStringable = ddeString | number | Signal<number, {}>;
} }
export type Host<EL extends SupportedElement> = (...addons: ddeElementAddon<EL>[]) => EL;
export type PascalCase = `${Capitalize<string>}${string}`; export type PascalCase = `${Capitalize<string>}${string}`;
export type AttrsModified = { export type AttrsModified = {
/** /**
@ -166,9 +167,9 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(ro
* @param body Body of the custom element * @param body Body of the custom element
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL; export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, host: Host<SupportedElement>): (data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
export interface On { export interface On {
/** Listens to the DOM event. See {@link Document.addEventListener} */ /** Listens to the DOM event. See {@link Document.addEventListener} */
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; <Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
@ -186,7 +187,7 @@ export interface On {
export const on: On; export const on: On;
export type Scope = { export type Scope = {
scope: Node | Function | Object; scope: Node | Function | Object;
host: ddeElementAddon<any>; host: Host<SupportedElement>;
custom_element: false | HTMLElement; custom_element: false | HTMLElement;
prevent: boolean; prevent: boolean;
}; };
@ -202,7 +203,7 @@ export const scope: {
* It can be also used to register Addon(s) (functions to be called when component is initized) * It can be also used to register Addon(s) (functions to be called when component is initized)
* — `scope.host(on.connected(console.log))`. * — `scope.host(on.connected(console.log))`.
* */ * */
host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement; host: Host<SupportedElement>;
/** /**
* Creates/gets an AbortController that triggers when the element disconnects * Creates/gets an AbortController that triggers when the element disconnects
* */ * */

4
dist/esm-with-signals.min.js vendored
View File

File diff suppressed because one or more lines are too long

11
dist/esm.d.ts vendored
View File

@ -79,10 +79,11 @@ export type CustomElementTagNameMap = {
export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]; export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
declare global { declare global {
type ddeComponentAttributes = Record<any, any> | undefined; type ddeComponentAttributes = Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El, ...rest: any) => any;
type ddeString = string | Signal<string, {}>; type ddeString = string | Signal<string, {}>;
type ddeStringable = ddeString | number | Signal<number, {}>; type ddeStringable = ddeString | number | Signal<number, {}>;
} }
export type Host<EL extends SupportedElement> = (...addons: ddeElementAddon<EL>[]) => EL;
export type PascalCase = `${Capitalize<string>}${string}`; export type PascalCase = `${Capitalize<string>}${string}`;
export type AttrsModified = { export type AttrsModified = {
/** /**
@ -165,9 +166,9 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(ro
* @param body Body of the custom element * @param body Body of the custom element
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL; export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, host: Host<SupportedElement>): (data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
export interface On { export interface On {
/** Listens to the DOM event. See {@link Document.addEventListener} */ /** Listens to the DOM event. See {@link Document.addEventListener} */
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; <Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
@ -185,7 +186,7 @@ export interface On {
export const on: On; export const on: On;
export type Scope = { export type Scope = {
scope: Node | Function | Object; scope: Node | Function | Object;
host: ddeElementAddon<any>; host: Host<SupportedElement>;
custom_element: false | HTMLElement; custom_element: false | HTMLElement;
prevent: boolean; prevent: boolean;
}; };
@ -201,7 +202,7 @@ export const scope: {
* It can be also used to register Addon(s) (functions to be called when component is initized) * It can be also used to register Addon(s) (functions to be called when component is initized)
* — `scope.host(on.connected(console.log))`. * — `scope.host(on.connected(console.log))`.
* */ * */
host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement; host: Host<SupportedElement>;
/** /**
* Creates/gets an AbortController that triggers when the element disconnects * Creates/gets an AbortController that triggers when the element disconnects
* */ * */

11
dist/esm.min.d.ts vendored
View File

@ -79,10 +79,11 @@ export type CustomElementTagNameMap = {
export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]; export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
declare global { declare global {
type ddeComponentAttributes = Record<any, any> | undefined; type ddeComponentAttributes = Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El, ...rest: any) => any;
type ddeString = string | Signal<string, {}>; type ddeString = string | Signal<string, {}>;
type ddeStringable = ddeString | number | Signal<number, {}>; type ddeStringable = ddeString | number | Signal<number, {}>;
} }
export type Host<EL extends SupportedElement> = (...addons: ddeElementAddon<EL>[]) => EL;
export type PascalCase = `${Capitalize<string>}${string}`; export type PascalCase = `${Capitalize<string>}${string}`;
export type AttrsModified = { export type AttrsModified = {
/** /**
@ -165,9 +166,9 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(ro
* @param body Body of the custom element * @param body Body of the custom element
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL; export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, host: Host<SupportedElement>): (data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
export interface On { export interface On {
/** Listens to the DOM event. See {@link Document.addEventListener} */ /** Listens to the DOM event. See {@link Document.addEventListener} */
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; <Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
@ -185,7 +186,7 @@ export interface On {
export const on: On; export const on: On;
export type Scope = { export type Scope = {
scope: Node | Function | Object; scope: Node | Function | Object;
host: ddeElementAddon<any>; host: Host<SupportedElement>;
custom_element: false | HTMLElement; custom_element: false | HTMLElement;
prevent: boolean; prevent: boolean;
}; };
@ -201,7 +202,7 @@ export const scope: {
* It can be also used to register Addon(s) (functions to be called when component is initized) * It can be also used to register Addon(s) (functions to be called when component is initized)
* — `scope.host(on.connected(console.log))`. * — `scope.host(on.connected(console.log))`.
* */ * */
host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement; host: Host<SupportedElement>;
/** /**
* Creates/gets an AbortController that triggers when the element disconnects * Creates/gets an AbortController that triggers when the element disconnects
* */ * */

2
dist/esm.min.js vendored
View File

File diff suppressed because one or more lines are too long

11
dist/iife-with-signals.d.ts vendored
View File

@ -80,10 +80,11 @@ export type CustomElementTagNameMap = {
export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]; export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
declare global { declare global {
type ddeComponentAttributes = Record<any, any> | undefined; type ddeComponentAttributes = Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El, ...rest: any) => any;
type ddeString = string | Signal<string, {}>; type ddeString = string | Signal<string, {}>;
type ddeStringable = ddeString | number | Signal<number, {}>; type ddeStringable = ddeString | number | Signal<number, {}>;
} }
export type Host<EL extends SupportedElement> = (...addons: ddeElementAddon<EL>[]) => EL;
export type PascalCase = `${Capitalize<string>}${string}`; export type PascalCase = `${Capitalize<string>}${string}`;
export type AttrsModified = { export type AttrsModified = {
/** /**
@ -166,9 +167,9 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(ro
* @param body Body of the custom element * @param body Body of the custom element
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL; export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, host: Host<SupportedElement>): (data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
export interface On { export interface On {
/** Listens to the DOM event. See {@link Document.addEventListener} */ /** Listens to the DOM event. See {@link Document.addEventListener} */
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; <Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
@ -186,7 +187,7 @@ export interface On {
export const on: On; export const on: On;
export type Scope = { export type Scope = {
scope: Node | Function | Object; scope: Node | Function | Object;
host: ddeElementAddon<any>; host: Host<SupportedElement>;
custom_element: false | HTMLElement; custom_element: false | HTMLElement;
prevent: boolean; prevent: boolean;
}; };
@ -202,7 +203,7 @@ export const scope: {
* It can be also used to register Addon(s) (functions to be called when component is initized) * It can be also used to register Addon(s) (functions to be called when component is initized)
* — `scope.host(on.connected(console.log))`. * — `scope.host(on.connected(console.log))`.
* */ * */
host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement; host: Host<SupportedElement>;
/** /**
* Creates/gets an AbortController that triggers when the element disconnects * Creates/gets an AbortController that triggers when the element disconnects
* */ * */

11
dist/iife-with-signals.min.d.ts vendored
View File

@ -80,10 +80,11 @@ export type CustomElementTagNameMap = {
export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]; export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
declare global { declare global {
type ddeComponentAttributes = Record<any, any> | undefined; type ddeComponentAttributes = Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El, ...rest: any) => any;
type ddeString = string | Signal<string, {}>; type ddeString = string | Signal<string, {}>;
type ddeStringable = ddeString | number | Signal<number, {}>; type ddeStringable = ddeString | number | Signal<number, {}>;
} }
export type Host<EL extends SupportedElement> = (...addons: ddeElementAddon<EL>[]) => EL;
export type PascalCase = `${Capitalize<string>}${string}`; export type PascalCase = `${Capitalize<string>}${string}`;
export type AttrsModified = { export type AttrsModified = {
/** /**
@ -166,9 +167,9 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(ro
* @param body Body of the custom element * @param body Body of the custom element
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL; export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, host: Host<SupportedElement>): (data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
export interface On { export interface On {
/** Listens to the DOM event. See {@link Document.addEventListener} */ /** Listens to the DOM event. See {@link Document.addEventListener} */
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; <Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
@ -186,7 +187,7 @@ export interface On {
export const on: On; export const on: On;
export type Scope = { export type Scope = {
scope: Node | Function | Object; scope: Node | Function | Object;
host: ddeElementAddon<any>; host: Host<SupportedElement>;
custom_element: false | HTMLElement; custom_element: false | HTMLElement;
prevent: boolean; prevent: boolean;
}; };
@ -202,7 +203,7 @@ export const scope: {
* It can be also used to register Addon(s) (functions to be called when component is initized) * It can be also used to register Addon(s) (functions to be called when component is initized)
* — `scope.host(on.connected(console.log))`. * — `scope.host(on.connected(console.log))`.
* */ * */
host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement; host: Host<SupportedElement>;
/** /**
* Creates/gets an AbortController that triggers when the element disconnects * Creates/gets an AbortController that triggers when the element disconnects
* */ * */

11
dist/iife.d.ts vendored
View File

@ -79,10 +79,11 @@ export type CustomElementTagNameMap = {
export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]; export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
declare global { declare global {
type ddeComponentAttributes = Record<any, any> | undefined; type ddeComponentAttributes = Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El, ...rest: any) => any;
type ddeString = string | Signal<string, {}>; type ddeString = string | Signal<string, {}>;
type ddeStringable = ddeString | number | Signal<number, {}>; type ddeStringable = ddeString | number | Signal<number, {}>;
} }
export type Host<EL extends SupportedElement> = (...addons: ddeElementAddon<EL>[]) => EL;
export type PascalCase = `${Capitalize<string>}${string}`; export type PascalCase = `${Capitalize<string>}${string}`;
export type AttrsModified = { export type AttrsModified = {
/** /**
@ -165,9 +166,9 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(ro
* @param body Body of the custom element * @param body Body of the custom element
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL; export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, host: Host<SupportedElement>): (data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
export interface On { export interface On {
/** Listens to the DOM event. See {@link Document.addEventListener} */ /** Listens to the DOM event. See {@link Document.addEventListener} */
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; <Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
@ -185,7 +186,7 @@ export interface On {
export const on: On; export const on: On;
export type Scope = { export type Scope = {
scope: Node | Function | Object; scope: Node | Function | Object;
host: ddeElementAddon<any>; host: Host<SupportedElement>;
custom_element: false | HTMLElement; custom_element: false | HTMLElement;
prevent: boolean; prevent: boolean;
}; };
@ -201,7 +202,7 @@ export const scope: {
* It can be also used to register Addon(s) (functions to be called when component is initized) * It can be also used to register Addon(s) (functions to be called when component is initized)
* — `scope.host(on.connected(console.log))`. * — `scope.host(on.connected(console.log))`.
* */ * */
host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement; host: Host<SupportedElement>;
/** /**
* Creates/gets an AbortController that triggers when the element disconnects * Creates/gets an AbortController that triggers when the element disconnects
* */ * */

11
dist/iife.min.d.ts vendored
View File

@ -79,10 +79,11 @@ export type CustomElementTagNameMap = {
export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]; export type SupportedElement = HTMLElementTagNameMap[keyof HTMLElementTagNameMap] | SVGElementTagNameMap[keyof SVGElementTagNameMap] | MathMLElementTagNameMap[keyof MathMLElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap];
declare global { declare global {
type ddeComponentAttributes = Record<any, any> | undefined; type ddeComponentAttributes = Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El) => any; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node> = (element: El, ...rest: any) => any;
type ddeString = string | Signal<string, {}>; type ddeString = string | Signal<string, {}>;
type ddeStringable = ddeString | number | Signal<number, {}>; type ddeStringable = ddeString | number | Signal<number, {}>;
} }
export type Host<EL extends SupportedElement> = (...addons: ddeElementAddon<EL>[]) => EL;
export type PascalCase = `${Capitalize<string>}${string}`; export type PascalCase = `${Capitalize<string>}${string}`;
export type AttrsModified = { export type AttrsModified = {
/** /**
@ -165,9 +166,9 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(ro
* @param body Body of the custom element * @param body Body of the custom element
* */ * */
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL; export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL): EL;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, element: SupportedElement): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, host: Host<SupportedElement>): (data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any) => void;
declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (() => SupportedElement)): (data?: any) => void; declare function dispatchEvent$1(name: keyof DocumentEventMap | string, options: EventInit | null, host: Host<SupportedElement>): (data?: any) => void;
export interface On { export interface On {
/** Listens to the DOM event. See {@link Document.addEventListener} */ /** Listens to the DOM event. See {@link Document.addEventListener} */
<Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE; <Event extends keyof DocumentEventMap, EE extends ddeElementAddon<SupportedElement> = ddeElementAddon<HTMLElement>>(type: Event, listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any, options?: AddEventListenerOptions): EE;
@ -185,7 +186,7 @@ export interface On {
export const on: On; export const on: On;
export type Scope = { export type Scope = {
scope: Node | Function | Object; scope: Node | Function | Object;
host: ddeElementAddon<any>; host: Host<SupportedElement>;
custom_element: false | HTMLElement; custom_element: false | HTMLElement;
prevent: boolean; prevent: boolean;
}; };
@ -201,7 +202,7 @@ export const scope: {
* It can be also used to register Addon(s) (functions to be called when component is initized) * It can be also used to register Addon(s) (functions to be called when component is initized)
* — `scope.host(on.connected(console.log))`. * — `scope.host(on.connected(console.log))`.
* */ * */
host: (...addons: ddeElementAddon<SupportedElement>[]) => HTMLElement; host: Host<SupportedElement>;
/** /**
* Creates/gets an AbortController that triggers when the element disconnects * Creates/gets an AbortController that triggers when the element disconnects
* */ * */

11
index.d.ts vendored
View File

@ -7,10 +7,11 @@ type SupportedElement=
| CustomElementTagNameMap[keyof CustomElementTagNameMap] | CustomElementTagNameMap[keyof CustomElementTagNameMap]
declare global { declare global {
type ddeComponentAttributes= Record<any, any> | undefined; type ddeComponentAttributes= Record<any, any> | undefined;
type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any; type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El, ...rest: any)=> any;
type ddeString= string | ddeSignal<string, {}> type ddeString= string | ddeSignal<string, {}>
type ddeStringable= ddeString | number | ddeSignal<number, {}> type ddeStringable= ddeString | number | ddeSignal<number, {}>
} }
type Host<EL extends SupportedElement>= (...addons: ddeElementAddon<EL>[])=> EL;
type PascalCase= `${Capitalize<string>}${string}`; type PascalCase= `${Capitalize<string>}${string}`;
type AttrsModified= { type AttrsModified= {
/** /**
@ -170,14 +171,14 @@ export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
body: EL, body: EL,
): EL ): EL
export function dispatchEvent(name: keyof DocumentEventMap | string, element: SupportedElement): export function dispatchEvent(name: keyof DocumentEventMap | string, host: Host<SupportedElement>):
(data?: any)=> void; (data?: any)=> void;
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
(element: SupportedElement, data?: any)=> void; (element: SupportedElement, data?: any)=> void;
export function dispatchEvent( export function dispatchEvent(
name: keyof DocumentEventMap | string, name: keyof DocumentEventMap | string,
options: EventInit | null, options: EventInit | null,
element: SupportedElement | (()=> SupportedElement) host: Host<SupportedElement>
): (data?: any)=> void; ): (data?: any)=> void;
interface On{ interface On{
/** Listens to the DOM event. See {@link Document.addEventListener} */ /** Listens to the DOM event. See {@link Document.addEventListener} */
@ -225,7 +226,7 @@ export const on: On;
type Scope= { type Scope= {
scope: Node | Function | Object, scope: Node | Function | Object,
host: ddeElementAddon<any>, host: Host<SupportedElement>,
custom_element: false | HTMLElement, custom_element: false | HTMLElement,
prevent: boolean prevent: boolean
}; };
@ -241,7 +242,7 @@ export const scope: {
* It can be also used to register Addon(s) (functions to be called when component is initized) * It can be also used to register Addon(s) (functions to be called when component is initized)
* — `scope.host(on.connected(console.log))`. * — `scope.host(on.connected(console.log))`.
* */ * */
host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement, host: Host<SupportedElement>,
/** /**
* Creates/gets an AbortController that triggers when the element disconnects * Creates/gets an AbortController that triggers when the element disconnects

1
index.js
View File

@ -1,3 +1,4 @@
export * from "./src/dom.js"; export * from "./src/dom.js";
export * from "./src/customElement.js"; export * from "./src/customElement.js";
export * from "./src/events.js"; export * from "./src/events.js";
export { registerReactivity } from "./src/signals-lib/common.js";

1
src/events.js
View File

@ -1,4 +1,3 @@
export { registerReactivity } from './signals-lib/common.js';
import { keyLTE, evc, evd } from './dom-common.js'; import { keyLTE, evc, evd } from './dom-common.js';
import { oAssign, onAbort } from './helpers.js'; import { oAssign, onAbort } from './helpers.js';