✨ Bundle DTS files

2024-11-24 01:29:36 +01:00 · 2023-10-19 15:01:54 +02:00 · 2023-10-19 15:01:54 +02:00 · 97da5441ee
commit 97da5441ee
parent 19fd857dac
8 changed files with 489 additions and 5 deletions
--- a/bs/build.js
+++ b/bs/build.js
@ -1,11 +1,13 @@
 #!/usr/bin/env -S npx nodejsscript
-const files= [ "index.js", "index-with-signals.js" ];
+import { bundle as bundleDTS } from "dts-bundler";
+const files= [ "index", "index-with-signals" ];
 const filesOut= (file, mark= "esm")=> "dist/"+file.replace("index", mark);

 $.api("", true)
 .option("--minify", "Level of minification [ full (default), partial ]")
 .action(function main({ minify= "full" }){
-	for(const file of files){
+	for(const file_root of files){
+		const file= file_root+".js";
 		const out= filesOut(file);
 		s.run([
 			"npx esbuild '::file::'",
@ -20,6 +22,8 @@ $.api("", true)
 			f=> f.replace(/^ +/gm, m=> "\t".repeat(m.length/2)),
 			f=> s.echo(f).to(out)
 		)(s.cat(out));
+		const file_dts= file_root+".d.ts";
+		s.echo(bundleDTS(file_dts)).to(filesOut(file_dts));
 		toDDE(out, filesOut(file, "dde"));
 	}
 	$.exit(0);
--- a/dist/esm-with-signals.d.ts
+++ b/dist/esm-with-signals.d.ts
@ -0,0 +1,248 @@
+declare global {
+	type ddeComponentAttributes= Record<any, any> | undefined | string;
+	type ddeElementExtender<El extends Element>= (element: El)=> El;
+}
+type ElementTagNameMap= HTMLElementTagNameMap & SVGElementTagNameMap & {
+	'#text': Text
+}
+type Element= ElementTagNameMap[keyof ElementTagNameMap];
+type AttrsModified= {
+	/**
+	 * In fact argumen for `*.setAttribute("style", *)`.
+	 */
+	style: string
+	/**
+	 * 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<string,-1|0|1>,
+	/**
+	 * 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
+ */
+type ElementAttributes<T extends keyof ElementTagNameMap | ElementTagNameMap[keyof ElementTagNameMap]>=
+	T extends keyof ElementTagNameMap ?
+	Omit<ElementTagNameMap[T],"classList"|"className"> & AttrsModified :
+	Omit<T,"classList"|"className"> & AttrsModified;
+export function assign<El extends Element>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
+type TagNameFragment= "<>";
+export function el<TAG extends keyof ElementTagNameMap>(
+	tag_name: TAG,
+	attrs?: Partial<ElementAttributes<ElementTagNameMap[TAG]>>,
+	...extenders: ddeElementExtender<ElementTagNameMap[TAG]>[]
+): ElementTagNameMap[TAG]
+export function el<T>(
+	tag_name: TagNameFragment,
+): DocumentFragment
+export function el<
+	A extends ddeComponentAttributes,
+	C extends (attr: A)=> Element>(
+	fComponent: C,
+	attrs?: A,
+	...extenders: ddeElementExtender<ReturnType<C>>[]
+): ReturnType<C>
+export function dispatchEvent(element: HTMLElement, name: keyof DocumentEventMap): void;
+export function dispatchEvent(element: HTMLElement, name: string, data: any): void;
+interface On{
+	<
+		EE extends ddeElementExtender<Element>,
+		El extends ( EE extends ddeElementExtender<infer El> ? El : never ),
+		Event extends keyof DocumentEventMap>(
+			type: Event,
+			listener: (this: El, ev: DocumentEventMap[Event]) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	connected<
+		EE extends ddeElementExtender<Element>,
+		El extends ( EE extends ddeElementExtender<infer El> ? El : never )
+		>(
+			listener: (el: El) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	disconnected<
+		EE extends ddeElementExtender<Element>,
+		El extends ( EE extends ddeElementExtender<infer El> ? El : never )
+		>(
+			listener: (el: El) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+}
+export const on: On;
+//TODO for SVG
+declare global{
+	interface HTMLDivElement{ append(...nodes: (Node | string)[]): HTMLDivElement; }
+	interface HTMLAnchorElement{ append(...nodes: (Node | string)[]): HTMLAnchorElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLAreaElement{ append(...nodes: (Node | string)[]): HTMLAreaElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLAudioElement{ append(...nodes: (Node | string)[]): HTMLAudioElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLBaseElement{ append(...nodes: (Node | string)[]): HTMLBaseElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLQuoteElement{ append(...nodes: (Node | string)[]): HTMLQuoteElement; }
+	interface HTMLBodyElement{ append(...nodes: (Node | string)[]): HTMLBodyElement; }
+	interface HTMLBRElement{ append(...nodes: (Node | string)[]): HTMLBRElement; }
+	interface HTMLButtonElement{ append(...nodes: (Node | string)[]): HTMLButtonElement; }
+	interface HTMLCanvasElement{ append(...nodes: (Node | string)[]): HTMLCanvasElement; }
+	interface HTMLTableCaptionElement{ append(...nodes: (Node | string)[]): HTMLTableCaptionElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLTableColElement{ append(...nodes: (Node | string)[]): HTMLTableColElement; }
+	interface HTMLTableColElement{ append(...nodes: (Node | string)[]): HTMLTableColElement; }
+	interface HTMLDataElement{ append(...nodes: (Node | string)[]): HTMLDataElement; }
+	interface HTMLDataListElement{ append(...nodes: (Node | string)[]): HTMLDataListElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLModElement{ append(...nodes: (Node | string)[]): HTMLModElement; }
+	interface HTMLDetailsElement{ append(...nodes: (Node | string)[]): HTMLDetailsElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLDialogElement{ append(...nodes: (Node | string)[]): HTMLDialogElement; }
+	interface HTMLDivElement{ append(...nodes: (Node | string)[]): HTMLDivElement; }
+	interface HTMLDListElement{ append(...nodes: (Node | string)[]): HTMLDListElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLEmbedElement{ append(...nodes: (Node | string)[]): HTMLEmbedElement; }
+	interface HTMLFieldSetElement{ append(...nodes: (Node | string)[]): HTMLFieldSetElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLFormElement{ append(...nodes: (Node | string)[]): HTMLFormElement; }
+	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
+	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
+	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
+	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
+	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
+	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
+	interface HTMLHeadElement{ append(...nodes: (Node | string)[]): HTMLHeadElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLHRElement{ append(...nodes: (Node | string)[]): HTMLHRElement; }
+	interface HTMLHtmlElement{ append(...nodes: (Node | string)[]): HTMLHtmlElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLIFrameElement{ append(...nodes: (Node | string)[]): HTMLIFrameElement; }
+	interface HTMLImageElement{ append(...nodes: (Node | string)[]): HTMLImageElement; }
+	interface HTMLInputElement{ append(...nodes: (Node | string)[]): HTMLInputElement; }
+	interface HTMLModElement{ append(...nodes: (Node | string)[]): HTMLModElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLLabelElement{ append(...nodes: (Node | string)[]): HTMLLabelElement; }
+	interface HTMLLegendElement{ append(...nodes: (Node | string)[]): HTMLLegendElement; }
+	interface HTMLLIElement{ append(...nodes: (Node | string)[]): HTMLLIElement; }
+	interface HTMLLinkElement{ append(...nodes: (Node | string)[]): HTMLLinkElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLMapElement{ append(...nodes: (Node | string)[]): HTMLMapElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLMenuElement{ append(...nodes: (Node | string)[]): HTMLMenuElement; }
+	interface HTMLMetaElement{ append(...nodes: (Node | string)[]): HTMLMetaElement; }
+	interface HTMLMeterElement{ append(...nodes: (Node | string)[]): HTMLMeterElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLObjectElement{ append(...nodes: (Node | string)[]): HTMLObjectElement; }
+	interface HTMLOListElement{ append(...nodes: (Node | string)[]): HTMLOListElement; }
+	interface HTMLOptGroupElement{ append(...nodes: (Node | string)[]): HTMLOptGroupElement; }
+	interface HTMLOptionElement{ append(...nodes: (Node | string)[]): HTMLOptionElement; }
+	interface HTMLOutputElement{ append(...nodes: (Node | string)[]): HTMLOutputElement; }
+	interface HTMLParagraphElement{ append(...nodes: (Node | string)[]): HTMLParagraphElement; }
+	interface HTMLPictureElement{ append(...nodes: (Node | string)[]): HTMLPictureElement; }
+	interface HTMLPreElement{ append(...nodes: (Node | string)[]): HTMLPreElement; }
+	interface HTMLProgressElement{ append(...nodes: (Node | string)[]): HTMLProgressElement; }
+	interface HTMLQuoteElement{ append(...nodes: (Node | string)[]): HTMLQuoteElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLScriptElement{ append(...nodes: (Node | string)[]): HTMLScriptElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLSelectElement{ append(...nodes: (Node | string)[]): HTMLSelectElement; }
+	interface HTMLSlotElement{ append(...nodes: (Node | string)[]): HTMLSlotElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLSourceElement{ append(...nodes: (Node | string)[]): HTMLSourceElement; }
+	interface HTMLSpanElement{ append(...nodes: (Node | string)[]): HTMLSpanElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLStyleElement{ append(...nodes: (Node | string)[]): HTMLStyleElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLTableElement{ append(...nodes: (Node | string)[]): HTMLTableElement; }
+	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
+	interface HTMLTableCellElement{ append(...nodes: (Node | string)[]): HTMLTableCellElement; }
+	interface HTMLTemplateElement{ append(...nodes: (Node | string)[]): HTMLTemplateElement; }
+	interface HTMLTextAreaElement{ append(...nodes: (Node | string)[]): HTMLTextAreaElement; }
+	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
+	interface HTMLTableCellElement{ append(...nodes: (Node | string)[]): HTMLTableCellElement; }
+	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
+	interface HTMLTimeElement{ append(...nodes: (Node | string)[]): HTMLTimeElement; }
+	interface HTMLTitleElement{ append(...nodes: (Node | string)[]): HTMLTitleElement; }
+	interface HTMLTableRowElement{ append(...nodes: (Node | string)[]): HTMLTableRowElement; }
+	interface HTMLTrackElement{ append(...nodes: (Node | string)[]): HTMLTrackElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLUListElement{ append(...nodes: (Node | string)[]): HTMLUListElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLVideoElement{ append(...nodes: (Node | string)[]): HTMLVideoElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface DocumentFragment{ append(...nodes: (Node | string)[]): DocumentFragment; }
+}
+export type Signal<V, A>= (set?: V)=> V & A;
+type Action<V>= (this: { value: V }, ...a: any[])=> typeof S._ | void;
+type SymbolOnclear= Symbol;
+type SymbolSignal= Symbol;
+type Actions<V>= Record<string, Action<V>>;
+interface S {
+	_: Symbol
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Signal");
+	 * ```
+	 * …simple todo signal:
+	 * ```js
+	 * const todos= S([], {
+	 * 	add(v){ this.value.push(S(v)); },
+	 * 	remove(i){ this.value.splice(i, 1); },
+	 * 	[S.symbols.onclear](){ S.clear(...this.value); },
+	 * });
+	 * ```
+	 * …computed signal:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name()+" "+surname());
+	 * ```
+	 * @param value Initial signal value. Or function computing value from other signals.
+	 * @param actions Use to define actions on the signal. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
+	action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
+		signal: S,
+		name: N,
+		...params: A[N] extends (...args: infer P)=> any ? P : never
+	): void;
+	clear(...signals: Signal<any, any>[]): void;
+	on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: AddEventListenerOptions): void;
+	symbols: {
+		signal: SymbolSignal;
+		onclear: SymbolOnclear;
+	}
+	el<S extends any, T extends HTMLElement>(signal: Signal<S, any>, el: (v: S)=> T): T;
+}
+export const S: S;
+declare global {
+	type ddeSignal<T, A= {}>= Signal<T, A>;
+	type ddeActions<V>= Actions<V>
+}
--- a/dist/esm.d.ts
+++ b/dist/esm.d.ts
@ -0,0 +1,198 @@
+declare global {
+	type ddeComponentAttributes= Record<any, any> | undefined | string;
+	type ddeElementExtender<El extends Element>= (element: El)=> El;
+}
+type ElementTagNameMap= HTMLElementTagNameMap & SVGElementTagNameMap & {
+	'#text': Text
+}
+type Element= ElementTagNameMap[keyof ElementTagNameMap];
+type AttrsModified= {
+	/**
+	 * In fact argumen for `*.setAttribute("style", *)`.
+	 */
+	style: string
+	/**
+	 * 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<string,-1|0|1>,
+	/**
+	 * 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
+ */
+type ElementAttributes<T extends keyof ElementTagNameMap | ElementTagNameMap[keyof ElementTagNameMap]>=
+	T extends keyof ElementTagNameMap ?
+	Omit<ElementTagNameMap[T],"classList"|"className"> & AttrsModified :
+	Omit<T,"classList"|"className"> & AttrsModified;
+export function assign<El extends Element>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
+type TagNameFragment= "<>";
+export function el<TAG extends keyof ElementTagNameMap>(
+	tag_name: TAG,
+	attrs?: Partial<ElementAttributes<ElementTagNameMap[TAG]>>,
+	...extenders: ddeElementExtender<ElementTagNameMap[TAG]>[]
+): ElementTagNameMap[TAG]
+export function el<T>(
+	tag_name: TagNameFragment,
+): DocumentFragment
+export function el<
+	A extends ddeComponentAttributes,
+	C extends (attr: A)=> Element>(
+	fComponent: C,
+	attrs?: A,
+	...extenders: ddeElementExtender<ReturnType<C>>[]
+): ReturnType<C>
+export function dispatchEvent(element: HTMLElement, name: keyof DocumentEventMap): void;
+export function dispatchEvent(element: HTMLElement, name: string, data: any): void;
+interface On{
+	<
+		EE extends ddeElementExtender<Element>,
+		El extends ( EE extends ddeElementExtender<infer El> ? El : never ),
+		Event extends keyof DocumentEventMap>(
+			type: Event,
+			listener: (this: El, ev: DocumentEventMap[Event]) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	connected<
+		EE extends ddeElementExtender<Element>,
+		El extends ( EE extends ddeElementExtender<infer El> ? El : never )
+		>(
+			listener: (el: El) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	disconnected<
+		EE extends ddeElementExtender<Element>,
+		El extends ( EE extends ddeElementExtender<infer El> ? El : never )
+		>(
+			listener: (el: El) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+}
+export const on: On;
+//TODO for SVG
+declare global{
+	interface HTMLDivElement{ append(...nodes: (Node | string)[]): HTMLDivElement; }
+	interface HTMLAnchorElement{ append(...nodes: (Node | string)[]): HTMLAnchorElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLAreaElement{ append(...nodes: (Node | string)[]): HTMLAreaElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLAudioElement{ append(...nodes: (Node | string)[]): HTMLAudioElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLBaseElement{ append(...nodes: (Node | string)[]): HTMLBaseElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLQuoteElement{ append(...nodes: (Node | string)[]): HTMLQuoteElement; }
+	interface HTMLBodyElement{ append(...nodes: (Node | string)[]): HTMLBodyElement; }
+	interface HTMLBRElement{ append(...nodes: (Node | string)[]): HTMLBRElement; }
+	interface HTMLButtonElement{ append(...nodes: (Node | string)[]): HTMLButtonElement; }
+	interface HTMLCanvasElement{ append(...nodes: (Node | string)[]): HTMLCanvasElement; }
+	interface HTMLTableCaptionElement{ append(...nodes: (Node | string)[]): HTMLTableCaptionElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLTableColElement{ append(...nodes: (Node | string)[]): HTMLTableColElement; }
+	interface HTMLTableColElement{ append(...nodes: (Node | string)[]): HTMLTableColElement; }
+	interface HTMLDataElement{ append(...nodes: (Node | string)[]): HTMLDataElement; }
+	interface HTMLDataListElement{ append(...nodes: (Node | string)[]): HTMLDataListElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLModElement{ append(...nodes: (Node | string)[]): HTMLModElement; }
+	interface HTMLDetailsElement{ append(...nodes: (Node | string)[]): HTMLDetailsElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLDialogElement{ append(...nodes: (Node | string)[]): HTMLDialogElement; }
+	interface HTMLDivElement{ append(...nodes: (Node | string)[]): HTMLDivElement; }
+	interface HTMLDListElement{ append(...nodes: (Node | string)[]): HTMLDListElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLEmbedElement{ append(...nodes: (Node | string)[]): HTMLEmbedElement; }
+	interface HTMLFieldSetElement{ append(...nodes: (Node | string)[]): HTMLFieldSetElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLFormElement{ append(...nodes: (Node | string)[]): HTMLFormElement; }
+	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
+	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
+	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
+	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
+	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
+	interface HTMLHeadingElement{ append(...nodes: (Node | string)[]): HTMLHeadingElement; }
+	interface HTMLHeadElement{ append(...nodes: (Node | string)[]): HTMLHeadElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLHRElement{ append(...nodes: (Node | string)[]): HTMLHRElement; }
+	interface HTMLHtmlElement{ append(...nodes: (Node | string)[]): HTMLHtmlElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLIFrameElement{ append(...nodes: (Node | string)[]): HTMLIFrameElement; }
+	interface HTMLImageElement{ append(...nodes: (Node | string)[]): HTMLImageElement; }
+	interface HTMLInputElement{ append(...nodes: (Node | string)[]): HTMLInputElement; }
+	interface HTMLModElement{ append(...nodes: (Node | string)[]): HTMLModElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLLabelElement{ append(...nodes: (Node | string)[]): HTMLLabelElement; }
+	interface HTMLLegendElement{ append(...nodes: (Node | string)[]): HTMLLegendElement; }
+	interface HTMLLIElement{ append(...nodes: (Node | string)[]): HTMLLIElement; }
+	interface HTMLLinkElement{ append(...nodes: (Node | string)[]): HTMLLinkElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLMapElement{ append(...nodes: (Node | string)[]): HTMLMapElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLMenuElement{ append(...nodes: (Node | string)[]): HTMLMenuElement; }
+	interface HTMLMetaElement{ append(...nodes: (Node | string)[]): HTMLMetaElement; }
+	interface HTMLMeterElement{ append(...nodes: (Node | string)[]): HTMLMeterElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLObjectElement{ append(...nodes: (Node | string)[]): HTMLObjectElement; }
+	interface HTMLOListElement{ append(...nodes: (Node | string)[]): HTMLOListElement; }
+	interface HTMLOptGroupElement{ append(...nodes: (Node | string)[]): HTMLOptGroupElement; }
+	interface HTMLOptionElement{ append(...nodes: (Node | string)[]): HTMLOptionElement; }
+	interface HTMLOutputElement{ append(...nodes: (Node | string)[]): HTMLOutputElement; }
+	interface HTMLParagraphElement{ append(...nodes: (Node | string)[]): HTMLParagraphElement; }
+	interface HTMLPictureElement{ append(...nodes: (Node | string)[]): HTMLPictureElement; }
+	interface HTMLPreElement{ append(...nodes: (Node | string)[]): HTMLPreElement; }
+	interface HTMLProgressElement{ append(...nodes: (Node | string)[]): HTMLProgressElement; }
+	interface HTMLQuoteElement{ append(...nodes: (Node | string)[]): HTMLQuoteElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLScriptElement{ append(...nodes: (Node | string)[]): HTMLScriptElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLSelectElement{ append(...nodes: (Node | string)[]): HTMLSelectElement; }
+	interface HTMLSlotElement{ append(...nodes: (Node | string)[]): HTMLSlotElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLSourceElement{ append(...nodes: (Node | string)[]): HTMLSourceElement; }
+	interface HTMLSpanElement{ append(...nodes: (Node | string)[]): HTMLSpanElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLStyleElement{ append(...nodes: (Node | string)[]): HTMLStyleElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLTableElement{ append(...nodes: (Node | string)[]): HTMLTableElement; }
+	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
+	interface HTMLTableCellElement{ append(...nodes: (Node | string)[]): HTMLTableCellElement; }
+	interface HTMLTemplateElement{ append(...nodes: (Node | string)[]): HTMLTemplateElement; }
+	interface HTMLTextAreaElement{ append(...nodes: (Node | string)[]): HTMLTextAreaElement; }
+	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
+	interface HTMLTableCellElement{ append(...nodes: (Node | string)[]): HTMLTableCellElement; }
+	interface HTMLTableSectionElement{ append(...nodes: (Node | string)[]): HTMLTableSectionElement; }
+	interface HTMLTimeElement{ append(...nodes: (Node | string)[]): HTMLTimeElement; }
+	interface HTMLTitleElement{ append(...nodes: (Node | string)[]): HTMLTitleElement; }
+	interface HTMLTableRowElement{ append(...nodes: (Node | string)[]): HTMLTableRowElement; }
+	interface HTMLTrackElement{ append(...nodes: (Node | string)[]): HTMLTrackElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLUListElement{ append(...nodes: (Node | string)[]): HTMLUListElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface HTMLVideoElement{ append(...nodes: (Node | string)[]): HTMLVideoElement; }
+	interface HTMLElement{ append(...nodes: (Node | string)[]): HTMLElement; }
+	interface DocumentFragment{ append(...nodes: (Node | string)[]): DocumentFragment; }
+}
--- a/index-with-signals.d.ts
+++ b/index-with-signals.d.ts
@ -0,0 +1,2 @@
+export * from "./index";
+export * from "./signals";
--- a/package-lock.json
+++ b/package-lock.json
@ -1,15 +1,16 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.4.0",
+	"version": "0.5.3",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "deka-dom-el",
-			"version": "0.4.0",
+			"version": "0.5.3",
 			"license": "MIT",
 			"devDependencies": {
 				"@size-limit/preset-small-lib": "^8.2.6",
+				"dts-bundler": "^0.1.0",
 				"esbuild": "^0.19.2",
 				"jshint": "^2.13.6",
 				"nodejsscript": "github:jaandrle/nodejsscript#dev-v1",
@ -1192,6 +1193,15 @@
 				"domelementtype": "1"
 			}
 		},
+		"node_modules/dts-bundler": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/dts-bundler/-/dts-bundler-0.1.0.tgz",
+			"integrity": "sha512-h0llx8DbWDMLJoB/jT5+YghYse1RA7SKDDPG3h0E+ecgkRDFMsr1aa8vaPTmrv6Qta79mme78tIyFStXBxijCg==",
+			"dev": true,
+			"peerDependencies": {
+				"typescript": "^2.4.0"
+			}
+		},
 		"node_modules/emoji-regex": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@ -2130,6 +2140,20 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/typescript": {
+			"version": "2.9.2",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
+			"integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
+			"dev": true,
+			"peer": true,
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=4.2.0"
+			}
+		},
 		"node_modules/web-streams-polyfill": {
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
--- a/package.json
+++ b/package.json
@ -91,6 +91,7 @@
 	],
 	"devDependencies": {
 		"@size-limit/preset-small-lib": "^8.2.6",
+		"dts-bundler": "^0.1.0",
 		"esbuild": "^0.19.2",
 		"jshint": "^2.13.6",
 		"nodejsscript": "github:jaandrle/nodejsscript#dev-v1",
--- a/signals.d.ts
+++ b/signals.d.ts
@ -35,7 +35,7 @@ interface S {
 		name: N,
 		...params: A[N] extends (...args: infer P)=> any ? P : never
 	): void;
-	clear(...signals: Signal<any, any>): void;
+	clear(...signals: Signal<any, any>[]): void;
 	on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: AddEventListenerOptions): void;
 	symbols: {
 		signal: SymbolSignal;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "emitDeclarationOnly": true,
+    "declaration": true,
+	"declarationDir": "dist"
+  }
+}