🐛 renamig issues

README.md

@@ -23,7 +23,7 @@ document.body.append(
 	
 );
 function component({ textContent, className }){
-	const value= S("onchange");
+	const value= O("onchange");
 	
 	return el().append(
 		el("p", { textContent, className }),
@@ -35,8 +35,8 @@ function component({ textContent, className }){
 }
 ```
 # Deka DOM Elements
-Creating reactive elements, components and Web components using [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)/JavaScript DOM API and signals
+Creating reactive elements, components and Web components using [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)/JavaScript DOM API and signals/observables
-([Signals — whats going on behind the scenes | by Ryan Hoffnan | ITNEXT](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63) or [The Evolution of Signals in JavaScript - DEV Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob)).
+([Signals — whats going on behind the scenes | by Ryan Hoffnan | ITNEXT](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63), [The Evolution of Signals in JavaScript - DEV Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob) or [Observer pattern - Wikipedia](https://en.wikipedia.org/wiki/Observer_pattern)).
 
 ## Inspiration and suggested alternatives
 - my previous library (mostly used internaly): [jaandrle/dollar_dom_component: Functional DOM components without JSX and virtual DOM.](https://github.com/jaandrle/dollar_dom_component)
@@ -53,13 +53,13 @@ Another goal is to proceed in the best spirit of functional programming. This in
 pure JavaScript (DOM API) and gradually adding auxiliary functions, ranging from “minor” improvements
 to the capability of writing complete declarative reactive UI templates.
 
-As a result, any “internal” function (`assign`, `classListDeclarative`, `on`, `dispatchEvent`, …, `S`, …)
+As a result, any “internal” function (`assign`, `classListDeclarative`, `on`, `dispatchEvent`, …, `O`, …)
 can be used independently, although they are primarily designed for use in combination.  This can also,
 hopefully, help in integrating the library into existing projects.
 
 To balance these requirements, numerous compromises have been made. To summarize:
 - [ ] Library size: 10–15kB minified (the original goal was a maximum of 10kB)
-- [x] Optional use of *signals* with the ability to register *your own signals implementation*
+- [x] Optional use of *observables* with the ability to register *your own signals/observables implementation*
 - [x] *No build step required*
 - [x] Preference for a *declarative/functional* approach
 - [x] Focus on zero/minimal dependencies

bs/build.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env -S npx nodejsscript
 import { bundle as bundleDTS } from "dts-bundler";
-const files= [ "index", "index-with-signals" ];
+const files= [ "index", "index-with-observables" ];
 const filesOut= (file, mark= "esm")=> "dist/"+file.replace("index", mark);
 const css= echo.css`
 	.info{ color: gray; }

dist/esm-with-observables.d.ts

@@ -0,0 +1,510 @@
+type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
+declare global {
+	interface ddePublicElementTagNameMap{
+	}
+}
+type SupportedElement=
+	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
+	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
+	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
+	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
+	| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
+declare global {
+	type ddeComponentAttributes= Record<any, any> | undefined;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
+}
+type PascalCase=
+`${Capitalize<string>}${string}`;
+type AttrsModified= {
+	/**
+	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
+	 */
+	style: string | Partial<CSSStyleDeclaration>
+	/**
+	 * 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|boolean>,
+	/**
+	 * By default simiral to `className`, but also supports `string[]`
+	 * */
+	className: string | (string|boolean|undefined)[];
+	/**
+	 * Sets `aria-*` simiraly to `dataset`
+	 * */
+	ariaset: Record<string,string>,
+} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string> & Record<`.${string}`, any>
+/**
+ * Just element attributtes
+ *
+ * In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
+ *
+ * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
+ * @private
+ */
+type ElementAttributes<T extends SupportedElement>= Omit<T,keyof AttrsModified> & AttrsModified;
+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
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
+
+type ExtendedHTMLElementTagNameMap= ddeHTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
+export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
+	tag_name: TAG,
+	attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
+	...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[TAG]>[]
+): ExtendedHTMLElementTagNameMap[TAG]
+export function el<T>(
+	tag_name?: "<>",
+): ddeDocumentFragment
+
+export function el<
+	A extends ddeComponentAttributes,
+	C extends (attr: Partial<A>)=> SupportedElement | DocumentFragment>(
+	fComponent: C,
+	attrs?: A | string,
+	...addons: ddeElementAddon<ReturnType<C>>[]
+): ReturnType<C>
+
+export function el(
+	tag_name: string,
+	attrs?: string | Record<string, any>,
+	...addons: ddeElementAddon<HTMLElement>[]
+): ddeHTMLElement
+
+export function elNS(
+	namespace: "http://www.w3.org/2000/svg"
+): <TAG, EL extends ( TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement ), KEYS extends keyof EL & { d: string }>(
+	tag_name: TAG,
+	attrs?: string | Partial<{ [key in KEYS]: EL[key] | string | number | boolean }>,
+	...addons: ddeElementAddon<EL>[]
+)=> EL
+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 }>,
+	...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[]
+)=> ddeMathMLElement
+export function elNS(
+	namespace: string
+): (
+	tag_name: string,
+	attrs?: string | Record<string, any>,
+	...addons: ddeElementAddon<SupportedElement>[]
+)=> SupportedElement
+
+export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: EL): EL
+
+export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
+	(element: SupportedElement, data?: any)=> void;
+export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)):
+	(data?: any)=> void;
+interface On{
+	/** Listens to the DOM event. See {@link Document.addEventListener} */
+	<
+		EE extends ddeElementAddon<SupportedElement>,
+		El extends ( EE extends ddeElementAddon<infer El> ? El : never ),
+		Event extends keyof DocumentEventMap>(
+			type: Event,
+			listener: (this: El, ev: DocumentEventMap[Event]) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	<
+		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 */
+	connected<
+		EE extends ddeElementAddon<SupportedElement>,
+		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
+		>(
+			listener: (this: El, event: CustomEvent<void>) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
+	disconnected<
+		EE extends ddeElementAddon<SupportedElement>,
+		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
+		>(
+			listener: (this: El, event: CustomEvent<void>) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
+	attributeChanged<
+		EE extends ddeElementAddon<SupportedElement>,
+		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
+		>(
+			listener: (this: El, event: CustomEvent<[ string, string ]>) => any,
+			options?: AddEventListenerOptions
+		) : EE;
+}
+export const on: On;
+
+type Scope= { scope: Node | Function | Object, host: ddeElementAddon<any>, custom_element: false | HTMLElement, prevent: boolean }
+/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
+export const scope: {
+	current: Scope,
+	/** Stops all automatizations. E. g. signals used as attributes in current scope
+	 * registers removing these listeners (and clean signal if no other listeners are detected)
+	 * on `disconnected` event. */
+	preventDefault<T extends boolean>(prevent: T): T,
+	/**
+	 * This represents reference to the current host element — `scope.host()`.
+	 * It can be also used to register Addon(s) (functions to be called when component is initized)
+	 * — `scope.host(on.connected(console.log))`.
+	 * */
+	host: (...addons: ddeElementAddon<any>[])=> HTMLElement,
+	
+	state: Scope[],
+	/** Adds new child scope. All attributes are inherited by default. */
+	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. */
+	pop(): ReturnType<Array<Scope>["pop"]>,
+};
+
+/* TypeScript MEH // TODO for SVG */
+type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+declare global{
+	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
+	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
+	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
+	interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
+	
+	interface ddeHTMLElementTagNameMap {
+		"a": ddeHTMLAnchorElement;
+		"area": ddeHTMLAreaElement;
+		"audio": ddeHTMLAudioElement;
+		"base": ddeHTMLBaseElement;
+		"blockquote": ddeHTMLQuoteElement;
+		"body": ddeHTMLBodyElement;
+		"br": ddeHTMLBRElement;
+		"button": ddeHTMLButtonElement;
+		"canvas": ddeHTMLCanvasElement;
+		"caption": ddeHTMLTableCaptionElement;
+		"col": ddeHTMLTableColElement;
+		"colgroup": ddeHTMLTableColElement;
+		"data": ddeHTMLDataElement;
+		"datalist": ddeHTMLDataListElement;
+		"del": ddeHTMLModElement;
+		"details": ddeHTMLDetailsElement;
+		"dialog": ddeHTMLDialogElement;
+		"div": ddeHTMLDivElement;
+		"dl": ddeHTMLDListElement;
+		"embed": ddeHTMLEmbedElement;
+		"fieldset": ddeHTMLFieldSetElement;
+		"form": ddeHTMLFormElement;
+		"h1": ddeHTMLHeadingElement;
+		"h2": ddeHTMLHeadingElement;
+		"h3": ddeHTMLHeadingElement;
+		"h4": ddeHTMLHeadingElement;
+		"h5": ddeHTMLHeadingElement;
+		"h6": ddeHTMLHeadingElement;
+		"head": ddeHTMLHeadElement;
+		"hr": ddeHTMLHRElement;
+		"html": ddeHTMLHtmlElement;
+		"iframe": ddeHTMLIFrameElement;
+		"img": ddeHTMLImageElement;
+		"input": ddeHTMLInputElement;
+		"ins": ddeHTMLModElement;
+		"label": ddeHTMLLabelElement;
+		"legend": ddeHTMLLegendElement;
+		"li": ddeHTMLLIElement;
+		"link": ddeHTMLLinkElement;
+		"map": ddeHTMLMapElement;
+		"menu": ddeHTMLMenuElement;
+		"meta": ddeHTMLMetaElement;
+		"meter": ddeHTMLMeterElement;
+		"object": ddeHTMLObjectElement;
+		"ol": ddeHTMLOListElement;
+		"optgroup": ddeHTMLOptGroupElement;
+		"option": ddeHTMLOptionElement;
+		"output": ddeHTMLOutputElement;
+		"p": ddeHTMLParagraphElement;
+		"picture": ddeHTMLPictureElement;
+		"pre": ddeHTMLPreElement;
+		"progress": ddeHTMLProgressElement;
+		"q": ddeHTMLQuoteElement;
+		"script": ddeHTMLScriptElement;
+		"select": ddeHTMLSelectElement;
+		"slot": ddeHTMLSlotElement;
+		"source": ddeHTMLSourceElement;
+		"span": ddeHTMLSpanElement;
+		"style": ddeHTMLStyleElement;
+		"table": ddeHTMLTableElement;
+		"tbody": ddeHTMLTableSectionElement;
+		"td": ddeHTMLTableCellElement;
+		"template": ddeHTMLTemplateElement;
+		"textarea": ddeHTMLTextAreaElement;
+		"tfoot": ddeHTMLTableSectionElement;
+		"th": ddeHTMLTableCellElement;
+		"thead": ddeHTMLTableSectionElement;
+		"time": ddeHTMLTimeElement;
+		"title": ddeHTMLTitleElement;
+		"tr": ddeHTMLTableRowElement;
+		"track": ddeHTMLTrackElement;
+		"ul": ddeHTMLUListElement;
+		"video": ddeHTMLVideoElement;
+	}
+	interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
+	interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
+	interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
+	interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend<ddeHTMLBaseElement>; }
+	interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend<ddeHTMLQuoteElement>; }
+	interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend<ddeHTMLBodyElement>; }
+	interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend<ddeHTMLBRElement>; }
+	interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend<ddeHTMLButtonElement>; }
+	interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend<ddeHTMLCanvasElement>; }
+	interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend<ddeHTMLTableCaptionElement>; }
+	interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
+	interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
+	interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend<ddeHTMLDataElement>; }
+	interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend<ddeHTMLDataListElement>; }
+	interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend<ddeHTMLModElement>; }
+	interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend<ddeHTMLDetailsElement>; }
+	interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend<ddeHTMLDialogElement>; }
+	interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend<ddeHTMLDivElement>; }
+	interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend<ddeHTMLDListElement>; }
+	interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend<ddeHTMLEmbedElement>; }
+	interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend<ddeHTMLFieldSetElement>; }
+	interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend<ddeHTMLFormElement>; }
+	interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend<ddeHTMLHeadingElement>; }
+	interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend<ddeHTMLHeadElement>; }
+	interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend<ddeHTMLHRElement>; }
+	interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend<ddeHTMLHtmlElement>; }
+	interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend<ddeHTMLIFrameElement>; }
+	interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend<ddeHTMLImageElement>; }
+	interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend<ddeHTMLInputElement>; }
+	interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend<ddeHTMLLabelElement>; }
+	interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend<ddeHTMLLegendElement>; }
+	interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend<ddeHTMLLIElement>; }
+	interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend<ddeHTMLLinkElement>; }
+	interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend<ddeHTMLMapElement>; }
+	interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend<ddeHTMLMenuElement>; }
+	interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend<ddeHTMLMetaElement>; }
+	interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend<ddeHTMLMeterElement>; }
+	interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend<ddeHTMLObjectElement>; }
+	interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend<ddeHTMLOListElement>; }
+	interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend<ddeHTMLOptGroupElement>; }
+	interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend<ddeHTMLOptionElement>; }
+	interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend<ddeHTMLOutputElement>; }
+	interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend<ddeHTMLParagraphElement>; }
+	interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend<ddeHTMLPictureElement>; }
+	interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend<ddeHTMLPreElement>; }
+	interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend<ddeHTMLProgressElement>; }
+	interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend<ddeHTMLScriptElement>; }
+	interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend<ddeHTMLSelectElement>; }
+	interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend<ddeHTMLSlotElement>; }
+	interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend<ddeHTMLSourceElement>; }
+	interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend<ddeHTMLSpanElement>; }
+	interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend<ddeHTMLStyleElement>; }
+	interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend<ddeHTMLTableElement>; }
+	interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend<ddeHTMLTableSectionElement>; }
+	interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
+	interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend<ddeHTMLTemplateElement>; }
+	interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend<ddeHTMLTextAreaElement>; }
+	interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
+	interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend<ddeHTMLTimeElement>; }
+	interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend<ddeHTMLTitleElement>; }
+	interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend<ddeHTMLTableRowElement>; }
+	interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend<ddeHTMLTrackElement>; }
+	interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend<ddeHTMLUListElement>; }
+	interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend<ddeHTMLVideoElement>; }
+	
+	interface ddeSVGElementTagNameMap {
+		"a": ddeSVGAElement;
+		"animate": ddeSVGAnimateElement;
+		"animateMotion": ddeSVGAnimateMotionElement;
+		"animateTransform": ddeSVGAnimateTransformElement;
+		"circle": ddeSVGCircleElement;
+		"clipPath": ddeSVGClipPathElement;
+		"defs": ddeSVGDefsElement;
+		"desc": ddeSVGDescElement;
+		"ellipse": ddeSVGEllipseElement;
+		"feBlend": ddeSVGFEBlendElement;
+		"feColorMatrix": ddeSVGFEColorMatrixElement;
+		"feComponentTransfer": ddeSVGFEComponentTransferElement;
+		"feComposite": ddeSVGFECompositeElement;
+		"feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
+		"feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
+		"feDisplacementMap": ddeSVGFEDisplacementMapElement;
+		"feDistantLight": ddeSVGFEDistantLightElement;
+		"feDropShadow": ddeSVGFEDropShadowElement;
+		"feFlood": ddeSVGFEFloodElement;
+		"feFuncA": ddeSVGFEFuncAElement;
+		"feFuncB": ddeSVGFEFuncBElement;
+		"feFuncG": ddeSVGFEFuncGElement;
+		"feFuncR": ddeSVGFEFuncRElement;
+		"feGaussianBlur": ddeSVGFEGaussianBlurElement;
+		"feImage": ddeSVGFEImageElement;
+		"feMerge": ddeSVGFEMergeElement;
+		"feMergeNode": ddeSVGFEMergeNodeElement;
+		"feMorphology": ddeSVGFEMorphologyElement;
+		"feOffset": ddeSVGFEOffsetElement;
+		"fePointLight": ddeSVGFEPointLightElement;
+		"feSpecularLighting": ddeSVGFESpecularLightingElement;
+		"feSpotLight": ddeSVGFESpotLightElement;
+		"feTile": ddeSVGFETileElement;
+		"feTurbulence": ddeSVGFETurbulenceElement;
+		"filter": ddeSVGFilterElement;
+		"foreignObject": ddeSVGForeignObjectElement;
+		"g": ddeSVGGElement;
+		"image": ddeSVGImageElement;
+		"line": ddeSVGLineElement;
+		"linearGradient": ddeSVGLinearGradientElement;
+		"marker": ddeSVGMarkerElement;
+		"mask": ddeSVGMaskElement;
+		"metadata": ddeSVGMetadataElement;
+		"mpath": ddeSVGMPathElement;
+		"path": ddeSVGPathElement;
+		"pattern": ddeSVGPatternElement;
+		"polygon": ddeSVGPolygonElement;
+		"polyline": ddeSVGPolylineElement;
+		"radialGradient": ddeSVGRadialGradientElement;
+		"rect": ddeSVGRectElement;
+		"script": ddeSVGScriptElement;
+		"set": ddeSVGSetElement;
+		"stop": ddeSVGStopElement;
+		"style": ddeSVGStyleElement;
+		"svg": ddeSVGSVGElement;
+		"switch": ddeSVGSwitchElement;
+		"symbol": ddeSVGSymbolElement;
+		"text": ddeSVGTextElement;
+		"textPath": ddeSVGTextPathElement;
+		"title": ddeSVGTitleElement;
+		"tspan": ddeSVGTSpanElement;
+		"use": ddeSVGUseElement;
+		"view": ddeSVGViewElement;
+	}
+	interface ddeSVGAElement extends SVGAElement{ append: ddeAppend<ddeSVGAElement>; }
+	interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend<ddeSVGAnimateElement>; }
+	interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend<ddeSVGAnimateMotionElement>; }
+	interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend<ddeSVGAnimateTransformElement>; }
+	interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend<ddeSVGCircleElement>; }
+	interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend<ddeSVGClipPathElement>; }
+	interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend<ddeSVGDefsElement>; }
+	interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend<ddeSVGDescElement>; }
+	interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend<ddeSVGEllipseElement>; }
+	interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend<ddeSVGFEBlendElement>; }
+	interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend<ddeSVGFEColorMatrixElement>; }
+	interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend<ddeSVGFEComponentTransferElement>; }
+	interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend<ddeSVGFECompositeElement>; }
+	interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend<ddeSVGFEConvolveMatrixElement>; }
+	interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend<ddeSVGFEDiffuseLightingElement>; }
+	interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend<ddeSVGFEDisplacementMapElement>; }
+	interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend<ddeSVGFEDistantLightElement>; }
+	interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend<ddeSVGFEDropShadowElement>; }
+	interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend<ddeSVGFEFloodElement>; }
+	interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend<ddeSVGFEFuncAElement>; }
+	interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend<ddeSVGFEFuncBElement>; }
+	interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend<ddeSVGFEFuncGElement>; }
+	interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend<ddeSVGFEFuncRElement>; }
+	interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend<ddeSVGFEGaussianBlurElement>; }
+	interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend<ddeSVGFEImageElement>; }
+	interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend<ddeSVGFEMergeElement>; }
+	interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend<ddeSVGFEMergeNodeElement>; }
+	interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend<ddeSVGFEMorphologyElement>; }
+	interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend<ddeSVGFEOffsetElement>; }
+	interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend<ddeSVGFEPointLightElement>; }
+	interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend<ddeSVGFESpecularLightingElement>; }
+	interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend<ddeSVGFESpotLightElement>; }
+	interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend<ddeSVGFETileElement>; }
+	interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend<ddeSVGFETurbulenceElement>; }
+	interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend<ddeSVGFilterElement>; }
+	interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend<ddeSVGForeignObjectElement>; }
+	interface ddeSVGGElement extends SVGGElement{ append: ddeAppend<ddeSVGGElement>; }
+	interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend<ddeSVGImageElement>; }
+	interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend<ddeSVGLineElement>; }
+	interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend<ddeSVGLinearGradientElement>; }
+	interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend<ddeSVGMarkerElement>; }
+	interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend<ddeSVGMaskElement>; }
+	interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend<ddeSVGMetadataElement>; }
+	interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend<ddeSVGMPathElement>; }
+	interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend<ddeSVGPathElement>; }
+	interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend<ddeSVGPatternElement>; }
+	interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend<ddeSVGPolygonElement>; }
+	interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend<ddeSVGPolylineElement>; }
+	interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend<ddeSVGRadialGradientElement>; }
+	interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend<ddeSVGRectElement>; }
+	interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend<ddeSVGScriptElement>; }
+	interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend<ddeSVGSetElement>; }
+	interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend<ddeSVGStopElement>; }
+	interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend<ddeSVGStyleElement>; }
+	interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend<ddeSVGSVGElement>; }
+	interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend<ddeSVGSwitchElement>; }
+	interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend<ddeSVGSymbolElement>; }
+	interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend<ddeSVGTextElement>; }
+	interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend<ddeSVGTextPathElement>; }
+	interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; }
+	interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
+	interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
+	interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
+}
+export type Observable<V, A>= (set?: V)=> V & A;
+type Action<V>= (this: { value: V }, ...a: any[])=> typeof observable._ | void;
+type SymbolOnclear= Symbol;
+type SymbolObservable= Symbol;
+type Actions<V>= Record<string, Action<V>>;
+interface observable{
+	_: Symbol
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Observable");
+	 * ```
+	 * …simple todo observable:
+	 * ```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 observable:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name()+" "+surname());
+	 * ```
+	 * @param value Initial observable value. Or function computing value from other observables.
+	 * @param actions Use to define actions on the observable. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the observable is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Observable<V, A>;
+	/**
+	 * Computations observable. This creates a observable which is computed from other observables.
+	 * */
+	<V>(computation: ()=> V): Observable<V, {}>
+	action<S extends Observable<any, Actions<any>>, A extends (S extends Observable<any, infer A> ? A : never), N extends keyof A>(
+		observable: S,
+		name: N,
+		...params: A[N] extends (...args: infer P)=> any ? P : never
+	): void;
+	clear(...observables: Observable<any, any>[]): void;
+	on<T>(observable: Observable<T, any>, onchange: (a: T)=> void, options?: AddEventListenerOptions): void;
+	symbols: {
+		observable: SymbolObservable;
+		onclear: SymbolOnclear;
+	}
+	/**
+	 * Reactive element, which is rendered based on the given observable.
+	 * ```js
+	 * S.el(observable, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(observable: Observable<S, any>, el: (v: S)=> Element | Element[]): DocumentFragment;
+
+    attribute(name: string, initial?: string): Observable<string, {}>;
+}
+export const observable: observable;
+export const O: observable;
+declare global {
+	type ddeObservable<T, A= {}>= Observable<T, A>;
+	type ddeActions<V>= Actions<V>
+}

dist/esm-with-signals.d.ts

@@ -1,530 +0,0 @@
-type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
-declare global {
-	interface ddePublicElementTagNameMap{
-	}
-}
-type SupportedElement=
-	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
-	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
-	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
-	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
-	| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
-declare global {
-	type ddeComponentAttributes= Record<any, any> | undefined;
-	type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
-}
-type PascalCase=
-`${Capitalize<string>}${string}`;
-type AttrsModified= {
-	/**
-	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
-	 */
-	style: string | Partial<CSSStyleDeclaration>
-	/**
-	 * 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|boolean>,
-	/**
-	 * By default simiral to `className`, but also supports `string[]`
-	 * */
-	className: string | (string|boolean|undefined)[];
-	/**
-	 * Sets `aria-*` simiraly to `dataset`
-	 * */
-	ariaset: Record<string,string>,
-} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string> & Record<`.${string}`, any>
-/**
- * Just element attributtes
- *
- * In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
- *
- * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
- * @private
- */
-type ElementAttributes<T extends SupportedElement>= Omit<T,keyof AttrsModified> & AttrsModified;
-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
-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>(
-	tag_name: TAG,
-	attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
-	...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[TAG]>[]
-): ExtendedHTMLElementTagNameMap[TAG]
-export function el<T>(
-	tag_name?: "<>",
-): DocumentFragment
-
-export function el<
-	A extends ddeComponentAttributes,
-	C extends (attr: Partial<A>)=> SupportedElement | DocumentFragment>(
-	fComponent: C,
-	attrs?: A | string,
-	...addons: ddeElementAddon<ReturnType<C>>[]
-): ReturnType<C>
-
-export function el(
-	tag_name: string,
-	attrs?: string | Record<string, any>,
-	...addons: ddeElementAddon<HTMLElement>[]
-): HTMLElement
-
-export function elNS(
-	namespace: "http://www.w3.org/2000/svg"
-): <TAG extends keyof SVGElementTagNameMap, KEYS extends keyof SVGElementTagNameMap[TAG] & { d: string }>(
-	tag_name: TAG,
-	attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>,
-	...addons: ddeElementAddon<SVGElementTagNameMap[TAG]>[]
-)=> 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 }>,
-	...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[]
-)=> MathMLElementTagNameMap[TAG]
-export function elNS(
-	namespace: string
-): (
-	tag_name: string,
-	attrs?: string | Record<string, any>,
-	...addons: ddeElementAddon<SupportedElement>[]
-)=> SupportedElement
-
-export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
-
-export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
-	(element: SupportedElement, data?: any)=> void;
-export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)):
-	(data?: any)=> void;
-interface On{
-	/** Listens to the DOM event. See {@link Document.addEventListener} */
-	<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never ),
-		Event extends keyof DocumentEventMap>(
-			type: Event,
-			listener: (this: El, ev: DocumentEventMap[Event]) => any,
-			options?: AddEventListenerOptions
-		) : EE;
-	<
-		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 */
-	connected<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
-		>(
-			listener: (this: El, event: CustomEvent<void>) => any,
-			options?: AddEventListenerOptions
-		) : EE;
-	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
-	disconnected<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
-		>(
-			listener: (this: El, event: CustomEvent<void>) => any,
-			options?: AddEventListenerOptions
-		) : EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
-	attributeChanged<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
-		>(
-			listener: (this: El, event: CustomEvent<[ string, string ]>) => any,
-			options?: AddEventListenerOptions
-		) : EE;
-}
-export const on: On;
-
-type Scope= { scope: Node | Function | Object, host: ddeElementAddon<any>, custom_element: false | HTMLElement, prevent: boolean }
-/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
-export const scope: {
-	current: Scope,
-	/** Stops all automatizations. E. g. signals used as attributes in current scope
-	 * registers removing these listeners (and clean signal if no other listeners are detected)
-	 * on `disconnected` event. */
-	preventDefault<T extends boolean>(prevent: T): T,
-	/**
-	 * This represents reference to the current host element — `scope.host()`.
-	 * It can be also used to register Addon (function to be called when component is initized)
-	 * — `scope.host(on.connected(console.log))`.
-	 * */
-	host: ddeElementAddon<any>,
-	
-	state: Scope[],
-	/** Adds new child scope. All attributes are inherited by default. */
-	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. */
-	pop(): ReturnType<Array<Scope>["pop"]>,
-};
-
-/*
- * TODO TypeScript HACK (better way?)
- * this doesnt works
- * ```ts
- * interface element<el> extends Node{
- * 	prototype: el;
- * 	append(...els: (SupportedElement | DocumentFragment | string | element<SupportedElement | DocumentFragment>)[]): el
- * }
- *
-export function el<T>(
- * 	tag_name?: "<>",
- * ): element<DocumentFragment>
-* ```
- * …as its complains here
- * ```
-ts
- *
-const d= el("div");
-*
-const f= (a: HTMLDivElement)=> a;
-* f(d);
-//←
- * document.head.append( //←
- * 	el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }),
- * );
-* ```
- * TODO for SVG
- * */
-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>;
-	}
-	interface SVGElement{
-		/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
-		append: ddeAppend<SVGElement>;
-	}
-}
-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>;
-	/**
-	 * Computations signal. This creates a signal which is computed from other signals.
-	 * */
-	<V>(computation: ()=> V): Signal<V, {}>
-	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;
-	}
-	/**
-	 * Reactive element, which is rendered based on the given signal.
-	 * ```js
-	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
-	 * S.el(listS, list=> list.map(li=> el("li", li)));
-	 * ```
-	 * */
-	el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[]): DocumentFragment;
-
-    attribute(name: string, initial?: string): Signal<string, {}>;
-}
-export const S: S;
-declare global {
-	type ddeSignal<T, A= {}>= Signal<T, A>;
-	type ddeActions<V>= Actions<V>
-}

dist/esm.d.ts

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

docs/global.css

@@ -119,6 +119,19 @@ main > *{
 	font-size: .9rem;
 	font-style: italic;
 }
+.prevNext{
+	display: grid;
+	grid-template-columns: 1fr 2fr 1fr;
+	margin-top: 1rem;
+	border-top: 1px solid var(--border);
+}
+.prevNext [rel=prev]{
+	grid-column: 1;
+}
+.prevNext [rel=next]{
+	grid-column: 3;
+	text-align: right;
+}
 .code{
 	--shiki-color-text: #e9eded;
 	--shiki-color-background: #212121;
@@ -132,6 +145,7 @@ main > *{
 	--shiki-token-punctuation: var(--code);
 	--shiki-token-link: #EE0000;
 	white-space: pre;
+	overflow: scroll;
 }
 .code[data-js=todo]{
 	border: 1px solid var(--border);
@@ -152,16 +166,6 @@ main > *{
 	background: #212121 !important;
 	border: 1px solid white;
 }
-.prevNext{
+.notice h3{
-	display: grid;
+	margin-top: 0;
-	grid-template-columns: 1fr 2fr 1fr;
-	margin-top: 1rem;
-	border-top: 1px solid var(--border);
-}
-.prevNext [rel=prev]{
-	grid-column: 1;
-}
-.prevNext [rel=next]{
-	grid-column: 3;
-	text-align: right;
 }

docs/index.html

@@ -1,9 +1,9 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Introducing a&nbsp;library."><title>`deka-dom-el` — Introduction</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Introduction</h1><p>Introducing a&nbsp;library.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library." class="current">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals.">4. Signals and reactivity</a></nav><main><p>The library tries to provide pure JavaScript tool(s) to create reactive interfaces.</p><p>We start with creating and modifying a&nbsp;static elements and end up with UI templates. <i>From <code>document.createElement</code> to <code>el</code>.</i> Then we go through the native events system and the way to include it declaratively in UI templates. <i>From <code>element.addEventListener</code> to <code>on</code>.</i></p><p>Next step is providing interactivity not only for our UI templates. We introduce signals (<code>S</code>) and how them incorporate to UI templates.</p><p>Now we will clarify how the signals are incorporated into our templates with regard to application performance. This is not the only reason the library uses <code>scope</code>s. We will look at how they work in components represented in JavaScript by functions.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-exquzbx4inc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Introducing a&nbsp;library."><title>`deka-dom-el` — Introduction</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Introduction</h1><p>Introducing a&nbsp;library.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library." class="current">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables.">4. Observables and reactivity</a></nav><main><p>The library tries to provide pure JavaScript tool(s) to create reactive interfaces.</p><p>We start with creating and modifying a&nbsp;static elements and end up with UI templates. <i>From <code>document.createElement</code> to <code>el</code>.</i> Then we go through the native events system and the way to include it declaratively in UI templates. <i>From <code>element.addEventListener</code> to <code>on</code>.</i></p><p>Next step is providing interactivity not only for our UI templates. We introduce observables (<code>O</code>) and how them incorporate to UI templates.</p><p>Now we will clarify how the observables are incorporated into our templates with regard to application performance. This is not the only reason the library uses <code>scope</code>s. We will look at how they work in components represented in JavaScript by functions.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-exquzbx4inc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
-import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
-const clicks= S(0);
+const clicks= O(0);
 document.body.append(
 	el().append(
-		el("p", S(()=&gt;
+		el("p", O(()=&gt;
 			"Hello World "+"🎉".repeat(clicks())
 		)),
 		el("button", {
@@ -13,4 +13,4 @@ document.body.append(
 		})
 	)
 );
-</code></div><script>Flems(document.getElementById("code-example-1-exquzbx4inc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nimport { S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst clicks= S(0);\\ndocument.body.append(\\n\\tel().append(\\n\\t\\tel(\\\"p\\\", S(()=>\\n\\t\\t\\t\\\"Hello World \\\"+\\\"🎉\\\".repeat(clicks())\\n\\t\\t)),\\n\\t\\tel(\\\"button\\\", {\\n\\t\\t\\ttype: \\\"button\\\",\\n\\t\\t\\tonclick: ()=> clicks(clicks()+1),\\n\\t\\t\\ttextContent: \\\"Fire\\\"\\n\\t\\t})\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--><a rel="next" href="p02-elements" title="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Elements</a></div></main></body></html>
+</code></div><script>Flems(document.getElementById("code-example-1-exquzbx4inc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nimport { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst clicks= O(0);\\ndocument.body.append(\\n\\tel().append(\\n\\t\\tel(\\\"p\\\", O(()=>\\n\\t\\t\\t\\\"Hello World \\\"+\\\"🎉\\\".repeat(clicks())\\n\\t\\t)),\\n\\t\\tel(\\\"button\\\", {\\n\\t\\t\\ttype: \\\"button\\\",\\n\\t\\t\\tonclick: ()=> clicks(clicks()+1),\\n\\t\\t\\ttextContent: \\\"Fire\\\"\\n\\t\\t})\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--><a rel="next" href="p02-elements" title="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Elements</a></div></main></body></html>

docs/p02-elements.html

@@ -1,4 +1,14 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Basic concepts of elements modifications and creations."><title>`deka-dom-el` — Elements</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Elements</h1><p>Basic concepts of elements modifications and creations.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations." class="current">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals.">4. Signals and reactivity</a></nav><main><h2>Native JavaScript DOM elements creations</h2><p>Let’s go through all patterns we would like to use and what needs to be improved for better experience.</p><h3 id="h-creating-elements-with-custom-attributes"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-creating-elements-with-custom-attributes" tabindex="-1">#</a> Creating element(s) (with custom attributes)</h3><p>You can create a native DOM element by using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement" title="MDN documentation for document.createElement()"><code>document.createElement()</code></a>. It is also possible to provide a&nbsp;some attribute(s) declaratively using <code>Object.assign()</code>. More precisely, this way you can sets some <a href="https://developer.mozilla.org/en-US/docs/Glossary/IDL" title="MDN page about Interface Description Language"><abbr title="Interface Description Language">IDL</abbr></a> also known as a JavaScript property.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-nkz9lcdhykg" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">document.body.append(
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Basic concepts of elements modifications and creations."><title>`deka-dom-el` — Elements</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Elements</h1><p>Basic concepts of elements modifications and creations.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations." class="current">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables.">4. Observables and reactivity</a></nav><main><h2>Native JavaScript DOM elements creations</h2><p>Let’s go through all patterns we would like to use and what needs to be improved for better experience.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// when NPM
+import { assign, el, elNS } from "deka-dom-el";
+// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
+
+// “internal” utils
+import {
+	assignAttribute,
+	classListDeclarative,
+	chainableAppend
+} from "deka-dom-el";
+</code></div><h3 id="h-creating-elements-with-custom-attributes"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-creating-elements-with-custom-attributes" tabindex="-1">#</a> Creating element(s) (with custom attributes)</h3><p>You can create a native DOM element by using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement" title="MDN documentation for document.createElement()"><code>document.createElement()</code></a>. It is also possible to provide a&nbsp;some attribute(s) declaratively using <code>Object.assign()</code>. More precisely, this way you can sets some <a href="https://developer.mozilla.org/en-US/docs/Glossary/IDL" title="MDN page about Interface Description Language"><abbr title="Interface Description Language">IDL</abbr></a> also known as a JavaScript property.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-nkz9lcdhykg" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">document.body.append(
 	document.createElement("div")
 );
 console.log(
@@ -12,7 +22,7 @@ document.body.append(
 		{ textContent: "Element’s text content.", style: "color: coral;" }
 	)
 );
-</code></div><script>Flems(document.getElementById("code-example-1-nkz9lcdhykg"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"document.body.append(\\n\\tdocument.createElement(\\\"div\\\")\\n);\\nconsole.log(\\n\\t\\\"Emty div is generated inside <body>:\\\",\\n\\tdocument.body.innerHTML.includes(\\\"<div></div>\\\")\\n);\\n\\ndocument.body.append(\\n\\tObject.assign(\\n\\t\\tdocument.createElement(\\\"p\\\"),\\n\\t\\t{ textContent: \\\"Element’s text content.\\\", style: \\\"color: coral;\\\" }\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><p>To make this easier, you can use the <code>el</code> function. Internally in basic examples, it is wrapper around <code>assign(document.createElement(…), { … })</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-13lyjukvr0yk" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, assign } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></div><script>Flems(document.getElementById("code-example-1-nkz9lcdhykg"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"document.body.append(\\n\\tdocument.createElement(\\\"div\\\")\\n);\\nconsole.log(\\n\\t\\\"Emty div is generated inside <body>:\\\",\\n\\tdocument.body.innerHTML.includes(\\\"<div></div>\\\")\\n);\\n\\ndocument.body.append(\\n\\tObject.assign(\\n\\t\\tdocument.createElement(\\\"p\\\"),\\n\\t\\t{ textContent: \\\"Element’s text content.\\\", style: \\\"color: coral;\\\" }\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><p>To make this easier, you can use the <code>el</code> function. Internally in basic examples, it is wrapper around <code>assign(document.createElement(…), { … })</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-13lyjukvr0yk" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, assign } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 const color= "lightcoral";
 document.body.append(
 	el("p", { textContent: "Hello (first time)", style: { color } })
@@ -23,7 +33,7 @@ document.body.append(
 		{ textContent: "Hello (second time)", style: { color } }
 	)
 );
-</code></div><script>Flems(document.getElementById("code-example-1-13lyjukvr0yk"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, assign } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst color= \\\"lightcoral\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", { textContent: \\\"Hello (first time)\\\", style: { color } })\\n);\\ndocument.body.append(\\n\\tassign(\\n\\t\\tdocument.createElement(\\\"p\\\"),\\n\\t\\t{ textContent: \\\"Hello (second time)\\\", style: { color } }\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><p>The <code>assign</code> function provides improved behaviour of <code>Object.assign()</code>. You can declaratively sets any IDL and attribute of the given element. Function prefers IDL and fallback to the <code>element.setAttribute</code> if there is no writable property in the element prototype.</p><p>You can study all JavaScript elements interfaces to the corresponding HTML elements. All HTML elements inherits from <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</a>. To see all available IDLs for example for paragraphs, see <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement">HTMLParagraphElement</a>. Moreover, the <code>assign</code> provides a&nbsp;way to sets declaratively some convenient properties:</p><ul><li>It is possible to sets <code>data-*</code>/<code>aria-*</code> attributes using object notation.</li><li>In opposite, it is also possible to sets <code>data-*</code>/<code>aria-*</code> attribute using camelCase notation.</li><li>You can use string or object as a&nbsp;value for <code>style</code> property.</li><li><code>className</code> (IDL – preffered)/<code>class</code> are ways to add CSS class to the element. You can use string (similarly to <code>class="…"</code> syntax in  HTML) or array of strings. This is handy to concat conditional classes.</li><li>Use <code>classList</code> to toggle specific classes. This will be handy later when the reactivity via signals is beeing introduced.</li><li>The <code>assign</code> also accepts the <code>undefined</code> as a&nbsp;value for any property to remove it from the element declaratively. Also for some IDL the corresponding attribute is removed as it can be confusing. <em>For example, natievly the element’s <code>id</code> is removed by setting the IDL to an empty string.</em></li><li>You can use <code>=</code> or <code>.</code> to force processing given key as attribute/property of the element.</li></ul><p>For processing, the <code>assign</code> internally uses <code>assignAttribute</code> and <code>classListDeclarative</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-iro9ncxa4bc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { assign, assignAttribute, classListDeclarative } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></div><script>Flems(document.getElementById("code-example-1-13lyjukvr0yk"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, assign } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst color= \\\"lightcoral\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", { textContent: \\\"Hello (first time)\\\", style: { color } })\\n);\\ndocument.body.append(\\n\\tassign(\\n\\t\\tdocument.createElement(\\\"p\\\"),\\n\\t\\t{ textContent: \\\"Hello (second time)\\\", style: { color } }\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><p>The <code>assign</code> function provides improved behaviour of <code>Object.assign()</code>. You can declaratively sets any IDL and attribute of the given element. Function prefers IDL and fallback to the <code>element.setAttribute</code> if there is no writable property in the element prototype.</p><p>You can study all JavaScript elements interfaces to the corresponding HTML elements. All HTML elements inherits from <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</a>. To see all available IDLs for example for paragraphs, see <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement">HTMLParagraphElement</a>. Moreover, the <code>assign</code> provides a&nbsp;way to sets declaratively some convenient properties:</p><ul><li>It is possible to sets <code>data-*</code>/<code>aria-*</code> attributes using object notation.</li><li>In opposite, it is also possible to sets <code>data-*</code>/<code>aria-*</code> attribute using camelCase notation.</li><li>You can use string or object as a&nbsp;value for <code>style</code> property.</li><li><code>className</code> (IDL – preffered)/<code>class</code> are ways to add CSS class to the element. You can use string (similarly to <code>class="…"</code> syntax in  HTML) or array of strings. This is handy to concat conditional classes.</li><li>Use <code>classList</code> to toggle specific classes. This will be handy later when the reactivity via observables is beeing introduced.</li><li>The <code>assign</code> also accepts the <code>undefined</code> as a&nbsp;value for any property to remove it from the element declaratively. Also for some IDL the corresponding attribute is removed as it can be confusing. <em>For example, natievly the element’s <code>id</code> is removed by setting the IDL to an empty string.</em></li><li>You can use <code>=</code> or <code>.</code> to force processing given key as attribute/property of the element.</li></ul><p>For processing, the <code>assign</code> internally uses <code>assignAttribute</code> and <code>classListDeclarative</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-iro9ncxa4bc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { assign, assignAttribute, classListDeclarative } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 const paragraph= document.createElement("p");
 
 assignAttribute(paragraph, "textContent", "Hello, world!");
@@ -56,7 +66,7 @@ console.log("paragraph.something=", paragraph.something);
 document.body.append(
 	paragraph
 );
-</code></div><script>Flems(document.getElementById("code-example-1-iro9ncxa4bc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { assign, assignAttribute, classListDeclarative } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst paragraph= document.createElement(\\\"p\\\");\\n\\nassignAttribute(paragraph, \\\"textContent\\\", \\\"Hello, world!\\\");\\n\\nassignAttribute(paragraph, \\\"style\\\", \\\"color: red; font-weight: bold;\\\");\\nassignAttribute(paragraph, \\\"style\\\", { color: \\\"navy\\\" });\\n\\nassignAttribute(paragraph, \\\"dataTest1\\\", \\\"v1\\\");\\nassignAttribute(paragraph, \\\"dataset\\\", { test2: \\\"v2\\\" });\\n\\nassign(paragraph, { //textContent and style see above\\n\\tariaLabel: \\\"v1\\\", //data* see above\\n\\tariaset: { role: \\\"none\\\" }, // dataset see above\\n\\t\\\"=onclick\\\": \\\"console.log(event)\\\",\\n\\tonmouseout: console.info,\\n\\t\\\".something\\\": \\\"something\\\",\\n\\tclassList: {} //see below\\n});\\n\\nclassListDeclarative(paragraph, {\\n\\tclassAdd: true,\\n\\tclassRemove: false,\\n\\tclassAdd1: 1,\\n\\tclassRemove1: 0,\\n\\tclassToggle: -1\\n});\\n\\nconsole.log(paragraph.outerHTML);\\nconsole.log(\\\"paragraph.something=\\\", paragraph.something);\\ndocument.body.append(\\n\\tparagraph\\n);\\n\"}],\"toolbar\":false}"));</script><h3 id="h-native-javascript-templating"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-native-javascript-templating" tabindex="-1">#</a> Native JavaScript templating</h3><p>By default, the native JS has no good way to define HTML template using DOM API:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">document.body.append(
+</code></div><script>Flems(document.getElementById("code-example-1-iro9ncxa4bc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { assign, assignAttribute, classListDeclarative } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst paragraph= document.createElement(\\\"p\\\");\\n\\nassignAttribute(paragraph, \\\"textContent\\\", \\\"Hello, world!\\\");\\n\\nassignAttribute(paragraph, \\\"style\\\", \\\"color: red; font-weight: bold;\\\");\\nassignAttribute(paragraph, \\\"style\\\", { color: \\\"navy\\\" });\\n\\nassignAttribute(paragraph, \\\"dataTest1\\\", \\\"v1\\\");\\nassignAttribute(paragraph, \\\"dataset\\\", { test2: \\\"v2\\\" });\\n\\nassign(paragraph, { //textContent and style see above\\n\\tariaLabel: \\\"v1\\\", //data* see above\\n\\tariaset: { role: \\\"none\\\" }, // dataset see above\\n\\t\\\"=onclick\\\": \\\"console.log(event)\\\",\\n\\tonmouseout: console.info,\\n\\t\\\".something\\\": \\\"something\\\",\\n\\tclassList: {} //see below\\n});\\n\\nclassListDeclarative(paragraph, {\\n\\tclassAdd: true,\\n\\tclassRemove: false,\\n\\tclassAdd1: 1,\\n\\tclassRemove1: 0,\\n\\tclassToggle: -1\\n});\\n\\nconsole.log(paragraph.outerHTML);\\nconsole.log(\\\"paragraph.something=\\\", paragraph.something);\\ndocument.body.append(\\n\\tparagraph\\n);\\n\"}],\"toolbar\":false}"));</script><h3 id="h-native-javascript-templating"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-native-javascript-templating" tabindex="-1">#</a> Native JavaScript templating</h3><p>By default, the native JS has no good way to define HTML template using DOM API:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">document.body.append(
 	document.createElement("div"),
 	document.createElement("span"),
 	document.createElement("main")
@@ -67,7 +77,7 @@ const template= document.createElement("main").append(
 	document.createElement("span"),
 );
 console.log(typeof template==="undefined");
-</code></div><script>Flems(document.getElementById("code-example-1-b6a1hbrxh7s"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"document.body.append(\\n\\tdocument.createElement(\\\"div\\\"),\\n\\tdocument.createElement(\\\"span\\\"),\\n\\tdocument.createElement(\\\"main\\\")\\n);\\nconsole.log(document.body.innerHTML.includes(\\\"<div></div><span></span><main></main>\\\"));\\nconst template= document.createElement(\\\"main\\\").append(\\n\\tdocument.createElement(\\\"div\\\"),\\n\\tdocument.createElement(\\\"span\\\"),\\n);\\nconsole.log(typeof template===\\\"undefined\\\");\\n\"}],\"toolbar\":false}"));</script><p>This library therefore overwrites the <code>append</code> method of created elements to always return parent element.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-iro9ncxa4bc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></div><script>Flems(document.getElementById("code-example-1-b6a1hbrxh7s"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"document.body.append(\\n\\tdocument.createElement(\\\"div\\\"),\\n\\tdocument.createElement(\\\"span\\\"),\\n\\tdocument.createElement(\\\"main\\\")\\n);\\nconsole.log(document.body.innerHTML.includes(\\\"<div></div><span></span><main></main>\\\"));\\nconst template= document.createElement(\\\"main\\\").append(\\n\\tdocument.createElement(\\\"div\\\"),\\n\\tdocument.createElement(\\\"span\\\"),\\n);\\nconsole.log(typeof template===\\\"undefined\\\");\\n\"}],\"toolbar\":false}"));</script><p>This library therefore overwrites the <code>append</code> method of created elements to always return parent element.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-iro9ncxa4bc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 document.head.append(
 	el("style").append(
 		"tr, td{ border: 1px solid red; padding: 1em; }",
@@ -92,7 +102,7 @@ document.body.append(
 	)
 );
 
-import { chainableAppend } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+import { chainableAppend } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 /** @param {keyof HTMLElementTagNameMap} tag */
 const createElement= tag=&gt; chainableAppend(document.createElement(tag));
 document.body.append(
@@ -102,7 +112,7 @@ document.body.append(
 		)
 	)
 );
-</code></div><script>Flems(document.getElementById("code-example-2-iro9ncxa4bc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\ndocument.head.append(\\n\\tel(\\\"style\\\").append(\\n\\t\\t\\\"tr, td{ border: 1px solid red; padding: 1em; }\\\",\\n\\t\\t\\\"table{ border-collapse: collapse; }\\\"\\n\\t)\\n);\\ndocument.body.append(\\n\\tel(\\\"p\\\", \\\"Example of a complex template. Using for example nesting lists:\\\"),\\n\\tel(\\\"ul\\\").append(\\n\\t\\tel(\\\"li\\\", \\\"List item 1\\\"),\\n\\t\\tel(\\\"li\\\").append(\\n\\t\\t\\tel(\\\"ul\\\").append(\\n\\t\\t\\t\\tel(\\\"li\\\", \\\"Nested list item 1\\\"),\\n\\t\\t\\t)\\n\\t\\t)\\n\\t),\\n\\tel(\\\"table\\\").append(\\n\\t\\tel(\\\"tr\\\").append(\\n\\t\\t\\tel(\\\"td\\\", \\\"Row 1 – Col 1\\\"),\\n\\t\\t\\tel(\\\"td\\\", \\\"Row 1 – Col 2\\\")\\n\\t\\t)\\n\\t)\\n);\\n\\nimport { chainableAppend } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\n/** @param {keyof HTMLElementTagNameMap} tag */\\nconst createElement= tag=> chainableAppend(document.createElement(tag));\\ndocument.body.append(\\n\\tcreateElement(\\\"p\\\").append(\\n\\t\\tcreateElement(\\\"em\\\").append(\\n\\t\\t\\t\\\"You can also use `chainableAppend`!\\\"\\n\\t\\t)\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><h3 id="h-basic-state-less-components"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-basic-state-less-components" tabindex="-1">#</a> Basic (state-less) components</h3><p>You can use functions for encapsulation (repeating) logic. The <code>el</code> accepts function as first argument. In that case, the function should return dom elements and the second argument for <code>el</code> is argument for given element.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-320zz4y072o" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></div><script>Flems(document.getElementById("code-example-2-iro9ncxa4bc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\ndocument.head.append(\\n\\tel(\\\"style\\\").append(\\n\\t\\t\\\"tr, td{ border: 1px solid red; padding: 1em; }\\\",\\n\\t\\t\\\"table{ border-collapse: collapse; }\\\"\\n\\t)\\n);\\ndocument.body.append(\\n\\tel(\\\"p\\\", \\\"Example of a complex template. Using for example nesting lists:\\\"),\\n\\tel(\\\"ul\\\").append(\\n\\t\\tel(\\\"li\\\", \\\"List item 1\\\"),\\n\\t\\tel(\\\"li\\\").append(\\n\\t\\t\\tel(\\\"ul\\\").append(\\n\\t\\t\\t\\tel(\\\"li\\\", \\\"Nested list item 1\\\"),\\n\\t\\t\\t)\\n\\t\\t)\\n\\t),\\n\\tel(\\\"table\\\").append(\\n\\t\\tel(\\\"tr\\\").append(\\n\\t\\t\\tel(\\\"td\\\", \\\"Row 1 – Col 1\\\"),\\n\\t\\t\\tel(\\\"td\\\", \\\"Row 1 – Col 2\\\")\\n\\t\\t)\\n\\t)\\n);\\n\\nimport { chainableAppend } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\n/** @param {keyof HTMLElementTagNameMap} tag */\\nconst createElement= tag=> chainableAppend(document.createElement(tag));\\ndocument.body.append(\\n\\tcreateElement(\\\"p\\\").append(\\n\\t\\tcreateElement(\\\"em\\\").append(\\n\\t\\t\\t\\\"You can also use `chainableAppend`!\\\"\\n\\t\\t)\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><h3 id="h-basic-state-less-components"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-basic-state-less-components" tabindex="-1">#</a> Basic (state-less) components</h3><p>You can use functions for encapsulation (repeating) logic. The <code>el</code> accepts function as first argument. In that case, the function should return dom elements and the second argument for <code>el</code> is argument for given element.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-320zz4y072o" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 document.head.append(
 	el("style").append(
 		".class1{ font-weight: bold; }",
@@ -119,7 +129,7 @@ function component({ className, textContent }){
 		el("p", textContent)
 	);
 }
-</code></div><script>Flems(document.getElementById("code-example-1-320zz4y072o"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\ndocument.head.append(\\n\\tel(\\\"style\\\").append(\\n\\t\\t\\\".class1{ font-weight: bold; }\\\",\\n\\t\\t\\\".class2{ color: purple; }\\\"\\n\\t)\\n);\\ndocument.body.append(\\n\\tel(component, { className: \\\"class2\\\", textContent: \\\"Hello World!\\\" }),\\n\\tcomponent({ className: \\\"class2\\\", textContent: \\\"Hello World!\\\" })\\n);\\n\\nfunction component({ className, textContent }){\\n\\treturn el(\\\"div\\\", { className: [ \\\"class1\\\", className ] }).append(\\n\\t\\tel(\\\"p\\\", textContent)\\n\\t);\\n}\\n\"}],\"toolbar\":false}"));</script><p>As you can see, in case of state-less/basic components there is no difference between calling component function directly or using <code>el</code> function.</p><p class="notice">It is nice to use similar naming convention as native DOM API. This allows us to use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="Destructuring assignment | MDN">the destructuring assignment syntax</a> and keep track of the native API (things are best remembered through regular use).</p><h3 id="h-creating-non-html-elements"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-creating-non-html-elements" tabindex="-1">#</a> Creating non-HTML elements</h3><p>Similarly to the native DOM API (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS" title="MDN"><code>document.createElementNS</code></a>) for non-HTML elements we need to tell JavaScript which kind of the element to create. We can use the <code>elNS</code> function:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-bcjydb50gdc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { elNS, assign } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></div><script>Flems(document.getElementById("code-example-1-320zz4y072o"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\ndocument.head.append(\\n\\tel(\\\"style\\\").append(\\n\\t\\t\\\".class1{ font-weight: bold; }\\\",\\n\\t\\t\\\".class2{ color: purple; }\\\"\\n\\t)\\n);\\ndocument.body.append(\\n\\tel(component, { className: \\\"class2\\\", textContent: \\\"Hello World!\\\" }),\\n\\tcomponent({ className: \\\"class2\\\", textContent: \\\"Hello World!\\\" })\\n);\\n\\nfunction component({ className, textContent }){\\n\\treturn el(\\\"div\\\", { className: [ \\\"class1\\\", className ] }).append(\\n\\t\\tel(\\\"p\\\", textContent)\\n\\t);\\n}\\n\"}],\"toolbar\":false}"));</script><p>As you can see, in case of state-less/basic components there is no difference between calling component function directly or using <code>el</code> function.</p><p class="notice">It is nice to use similar naming convention as native DOM API. This allows us to use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="Destructuring assignment | MDN">the destructuring assignment syntax</a> and keep track of the native API (things are best remembered through regular use).</p><h3 id="h-creating-non-html-elements"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-creating-non-html-elements" tabindex="-1">#</a> Creating non-HTML elements</h3><p>Similarly to the native DOM API (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS" title="MDN"><code>document.createElementNS</code></a>) for non-HTML elements we need to tell JavaScript which kind of the element to create. We can use the <code>elNS</code> function:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-bcjydb50gdc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { elNS, assign } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 const elSVG= elNS("http://www.w3.org/2000/svg");
 const elMath= elNS("http://www.w3.org/1998/Math/MathML");
 document.body.append(
@@ -130,4 +140,4 @@ document.body.append(
 console.log(
 	document.body.innerHTML.includes("&lt;svg&gt;&lt;/svg&gt;&lt;math&gt;&lt;/math&gt;")
 )
-</code></div><script>Flems(document.getElementById("code-example-1-bcjydb50gdc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { elNS, assign } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst elSVG= elNS(\\\"http://www.w3.org/2000/svg\\\");\\nconst elMath= elNS(\\\"http://www.w3.org/1998/Math/MathML\\\");\\ndocument.body.append(\\n\\telSVG(\\\"svg\\\"), // see https://developer.mozilla.org/en-US/docs/Web/SVG and https://developer.mozilla.org/en-US/docs/Web/API/SVGElement\\n\\telMath(\\\"math\\\") // see https://developer.mozilla.org/en-US/docs/Web/MathML and https://developer.mozilla.org/en-US/docs/Web/MathML/Global_attributes\\n);\\n\\nconsole.log(\\n\\tdocument.body.innerHTML.includes(\\\"<svg></svg><math></math>\\\")\\n)\\n\"}],\"toolbar\":false}"));</script><div class="notice"><p>Mnemonic</p><ul><li><code>assign(&lt;element&gt;, ...&lt;idl-objects&gt;): &lt;element&gt;</code> — assign properties to the element</li><li><code>el(&lt;tag-name&gt;, &lt;primitive&gt;)[.append(...)]: &lt;element-from-tag-name&gt;</code> — simple element containing only text</li><li><code>el(&lt;tag-name&gt;, &lt;idl-object&gt;)[.append(...)]: &lt;element-from-tag-name&gt;</code> — element with more properties</li><li><code>el(&lt;function&gt;, &lt;function-argument(s)&gt;)[.append(...)]: &lt;element-returned-by-function&gt;</code> — using component represented by function</li><li><code>el(&lt;...&gt;, &lt;...&gt;, ...&lt;addons&gt;)</code> — see following page</li><li><code>elNS(&lt;namespace&gt;)(&lt;as-el-see-above&gt;)[.append(...)]: &lt;element-based-on-arguments&gt;</code> — typically SVG elements</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="./" title="Introducing a&nbsp;library."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Introduction (previous)</a><a rel="next" href="p03-events" title="Using not only events in UI declaratively."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Events and Addons</a></div></main></body></html>
+</code></div><script>Flems(document.getElementById("code-example-1-bcjydb50gdc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { elNS, assign } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst elSVG= elNS(\\\"http://www.w3.org/2000/svg\\\");\\nconst elMath= elNS(\\\"http://www.w3.org/1998/Math/MathML\\\");\\ndocument.body.append(\\n\\telSVG(\\\"svg\\\"), // see https://developer.mozilla.org/en-US/docs/Web/SVG and https://developer.mozilla.org/en-US/docs/Web/API/SVGElement\\n\\telMath(\\\"math\\\") // see https://developer.mozilla.org/en-US/docs/Web/MathML and https://developer.mozilla.org/en-US/docs/Web/MathML/Global_attributes\\n);\\n\\nconsole.log(\\n\\tdocument.body.innerHTML.includes(\\\"<svg></svg><math></math>\\\")\\n)\\n\"}],\"toolbar\":false}"));</script><div class="notice"><!--<dde:mark type="component" name="mnemonicUl" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>assign(&lt;element&gt;, ...&lt;idl-objects&gt;): &lt;element&gt;</code> — assign properties to the element</li><li><code>el(&lt;tag-name&gt;, &lt;primitive&gt;)[.append(...)]: &lt;element-from-tag-name&gt;</code> — simple element containing only text</li><li><code>el(&lt;tag-name&gt;, &lt;idl-object&gt;)[.append(...)]: &lt;element-from-tag-name&gt;</code> — element with more properties</li><li><code>el(&lt;function&gt;, &lt;function-argument(s)&gt;)[.append(...)]: &lt;element-returned-by-function&gt;</code> — using component represented by function</li><li><code>el(&lt;...&gt;, &lt;...&gt;, ...&lt;addons&gt;)</code> — see following page</li><li><code>elNS(&lt;namespace&gt;)(&lt;as-el-see-above&gt;)[.append(...)]: &lt;element-based-on-arguments&gt;</code> — typically SVG elements</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="./" title="Introducing a&nbsp;library."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Introduction (previous)</a><a rel="next" href="p03-events" title="Using not only events in UI declaratively."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Events and Addons</a></div></main></body></html>

docs/p03-events.html

@@ -1,4 +1,11 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Using not only events in UI declaratively."><title>`deka-dom-el` — Events and Addons</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Events and Addons</h1><p>Using not only events in UI declaratively.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively." class="current">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals.">4. Signals and reactivity</a></nav><main><h2>Listenning to the native DOM events and other Addons</h2><p>We quickly introduce helper to listening to the native DOM events. And library syntax/pattern so-called <em>Addon</em> to incorporate not only this in UI templates declaratively.</p><h3 id="h-events-and-listenners"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-events-and-listenners" tabindex="-1">#</a> Events and listenners</h3><p>In JavaScript you can listen to the native DOM events of the given element by using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" title="addEventListener on MDN"><code>element.addEventListener(type, listener, options)</code></a>. The library provides an alternative (<code>on</code>) accepting the differen order of the arguments:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1wmddlo83w68" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Using not only events in UI declaratively."><title>`deka-dom-el` — Events and Addons</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Events and Addons</h1><p>Using not only events in UI declaratively.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively." class="current">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables.">4. Observables and reactivity</a></nav><main><h2>Listenning to the native DOM events and other Addons</h2><p>We quickly introduce helper to listening to the native DOM events. And library syntax/pattern so-called <em>Addon</em> to incorporate not only this in UI templates declaratively.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// when NPM
+import { on, dispatchEvent } from "deka-dom-el";
+// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
+
+/**
+ * @type {ddeElementAddon}
+ * */
+</code></div><h3 id="h-events-and-listenners"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-events-and-listenners" tabindex="-1">#</a> Events and listenners</h3><p>In JavaScript you can listen to the native DOM events of the given element by using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" title="addEventListener on MDN"><code>element.addEventListener(type, listener, options)</code></a>. The library provides an alternative (<code>on</code>) accepting the differen order of the arguments:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1wmddlo83w68" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 const log= mark=&gt; console.log.bind(console, mark);
 
 const button= el("button", "Test click");
@@ -8,7 +15,7 @@ on("click", log("`on`"), { once: true })(button);
 document.body.append(
 	button
 );
-</code></div><script>Flems(document.getElementById("code-example-1-1wmddlo83w68"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst log= mark=> console.log.bind(console, mark);\\n\\nconst button= el(\\\"button\\\", \\\"Test click\\\");\\nbutton.addEventListener(\\\"click\\\", log(\\\"`addEventListener`\\\"), { once: true });\\non(\\\"click\\\", log(\\\"`on`\\\"), { once: true })(button);\\n\\ndocument.body.append(\\n\\tbutton\\n);\\n\"}],\"toolbar\":false}"));</script><p>…this is actually one of the two differences. The another one is that <code>on</code> accepts only object as the <code>options</code> (but it is still optional).</p><p class="notice">The other difference is that there is <strong>no</strong> <code>off</code> function. You can remove listener declaratively using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal" title="part of addEventListener on MDN">AbortSignal</a>:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-8r8qappf8mo" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></div><script>Flems(document.getElementById("code-example-1-1wmddlo83w68"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst log= mark=> console.log.bind(console, mark);\\n\\nconst button= el(\\\"button\\\", \\\"Test click\\\");\\nbutton.addEventListener(\\\"click\\\", log(\\\"`addEventListener`\\\"), { once: true });\\non(\\\"click\\\", log(\\\"`on`\\\"), { once: true })(button);\\n\\ndocument.body.append(\\n\\tbutton\\n);\\n\"}],\"toolbar\":false}"));</script><p>…this is actually one of the two differences. The another one is that <code>on</code> accepts only object as the <code>options</code> (but it is still optional).</p><p class="notice">The other difference is that there is <strong>no</strong> <code>off</code> function. You can remove listener declaratively using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal" title="part of addEventListener on MDN">AbortSignal</a>:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-8r8qappf8mo" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 const log= mark=&gt; console.log.bind(console, mark);
 
 const abort_controller= new AbortController();
@@ -21,7 +28,7 @@ on("click", log("`on`"), { signal })(button);
 document.body.append(
 	button, " ", el("button", { textContent: "Off", onclick: ()=&gt; abort_controller.abort() })
 );
-</code></div><script>Flems(document.getElementById("code-example-1-8r8qappf8mo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst log= mark=> console.log.bind(console, mark);\\n\\nconst abort_controller= new AbortController();\\nconst { signal }= abort_controller;\\n\\nconst button= el(\\\"button\\\", \\\"Test click\\\");\\nbutton.addEventListener(\\\"click\\\", log(\\\"`addEventListener`\\\"), { signal });\\non(\\\"click\\\", log(\\\"`on`\\\"), { signal })(button);\\n\\ndocument.body.append(\\n\\tbutton, \\\" \\\", el(\\\"button\\\", { textContent: \\\"Off\\\", onclick: ()=> abort_controller.abort() })\\n);\\n\"}],\"toolbar\":false}"));</script><div class="notice"><p>So, there are (typically) three ways to handle events. You can use:</p><ul><li><code>el("button", { textContent: "click me", "=onclick": "console.log(event)" })</code></li><li><code>el("button", { textContent: "click me", onclick: console.log })</code></li><li><code>el("button", { textContent: "click me" }, on("click", console.log))</code></li></ul><p>In the first example we force to use HTML attribute (it corresponds to <code>&lt;button onclick="console.log(event)"&gt;click me&lt;/button&gt;</code>). <em>Side note: this can be useful in case of SSR.</em> To study difference, you can read a nice summary here: <a href="https://gist.github.com/WebReflection/b404c36f46371e3b1173bf5492acc944">GIST @WebReflection/web_events.md</a>.</p></div><h3 id="h-addons"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-addons" tabindex="-1">#</a> Addons</h3><p>From practical point of view, <em>Addons</em> are just functions that accept any html element as their first parameter. You can see that the <code>on(…)</code> fullfills this requirement.</p><p>You can use Addons as ≥3rd argument of <code>el</code> function. This way is possible to extends you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-6jtsnxfqzm4" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></div><script>Flems(document.getElementById("code-example-1-8r8qappf8mo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst log= mark=> console.log.bind(console, mark);\\n\\nconst abort_controller= new AbortController();\\nconst { signal }= abort_controller;\\n\\nconst button= el(\\\"button\\\", \\\"Test click\\\");\\nbutton.addEventListener(\\\"click\\\", log(\\\"`addEventListener`\\\"), { signal });\\non(\\\"click\\\", log(\\\"`on`\\\"), { signal })(button);\\n\\ndocument.body.append(\\n\\tbutton, \\\" \\\", el(\\\"button\\\", { textContent: \\\"Off\\\", onclick: ()=> abort_controller.abort() })\\n);\\n\"}],\"toolbar\":false}"));</script><div class="notice"><p>So, there are (typically) three ways to handle events. You can use:</p><ul><li><code>el("button", { textContent: "click me", "=onclick": "console.log(event)" })</code></li><li><code>el("button", { textContent: "click me", onclick: console.log })</code></li><li><code>el("button", { textContent: "click me" }, on("click", console.log))</code></li></ul><p>In the first example we force to use HTML attribute (it corresponds to <code>&lt;button onclick="console.log(event)"&gt;click me&lt;/button&gt;</code>). <em>Side note: this can be useful in case of SSR.</em> To study difference, you can read a nice summary here: <a href="https://gist.github.com/WebReflection/b404c36f46371e3b1173bf5492acc944">GIST @WebReflection/web_events.md</a>.</p></div><h3 id="h-addons"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-addons" tabindex="-1">#</a> Addons</h3><p>From practical point of view, <em>Addons</em> are just functions that accept any html element as their first parameter. You can see that the <code>on(…)</code> fullfills this requirement.</p><p>You can use Addons as ≥3rd argument of <code>el</code> function. This way is possible to extends you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-6jtsnxfqzm4" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 const abort_controller= new AbortController();
 const { signal }= abort_controller;
 /** @type {ddeElementAddon&lt;HTMLButtonElement&gt;} */
@@ -45,7 +52,7 @@ function update(event){
 		"\n"
 	);
 }
-</code></div><script>Flems(document.getElementById("code-example-1-6jtsnxfqzm4"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst abort_controller= new AbortController();\\nconst { signal }= abort_controller;\\n/** @type {ddeElementAddon<HTMLButtonElement>} */\\nconst onclickOff= on(\\\"click\\\", ()=> abort_controller.abort(), { signal });\\n/** @type {(ref?: HTMLOutputElement)=> HTMLOutputElement | null} */\\nconst ref= (store=> ref=> ref ? (store= ref) : store)(null);\\n\\ndocument.body.append(\\n\\tel(\\\"button\\\", \\\"Test `on`\\\",\\n\\t\\ton(\\\"click\\\", console.log, { signal }),\\n\\t\\ton(\\\"click\\\", update, { signal }),\\n\\t\\ton(\\\"mouseup\\\", update, { signal })),\\n\\t\\\" \\\",\\n\\tel(\\\"button\\\", \\\"Off\\\", onclickOff),\\n\\tel(\\\"output\\\", { style: { display: \\\"block\\\", whiteSpace: \\\"pre\\\" } }, ref)\\n);\\n/** @param {MouseEvent} event @this {HTMLButtonElement} */\\nfunction update(event){\\n\\tref().append(\\n\\t\\tevent.type,\\n\\t\\t\\\"\\\\n\\\"\\n\\t);\\n}\\n\"}],\"toolbar\":false}"));</script><p>As the example shows, you can also provide types in JSDoc+TypeScript by using global type <code>ddeElementAddon</code>. Also notice, you can use Addons to get element reference.</p><h3 id="h-life-cycle-events"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-life-cycle-events" tabindex="-1">#</a> Life-cycle events</h3><p>Addons are called immediately when the element is created, even it is not connected to live DOM yet. Therefore, you can understand the Addon to be “oncreate” event.</p><p>The library provide three additional live-cycle events corresponding to how they are named in a case of custom elements: <code>on.connected</code>, <code>on.disconnected</code> and <code>on.attributeChanged</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-35hjjp3e4js" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></div><script>Flems(document.getElementById("code-example-1-6jtsnxfqzm4"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst abort_controller= new AbortController();\\nconst { signal }= abort_controller;\\n/** @type {ddeElementAddon<HTMLButtonElement>} */\\nconst onclickOff= on(\\\"click\\\", ()=> abort_controller.abort(), { signal });\\n/** @type {(ref?: HTMLOutputElement)=> HTMLOutputElement | null} */\\nconst ref= (store=> ref=> ref ? (store= ref) : store)(null);\\n\\ndocument.body.append(\\n\\tel(\\\"button\\\", \\\"Test `on`\\\",\\n\\t\\ton(\\\"click\\\", console.log, { signal }),\\n\\t\\ton(\\\"click\\\", update, { signal }),\\n\\t\\ton(\\\"mouseup\\\", update, { signal })),\\n\\t\\\" \\\",\\n\\tel(\\\"button\\\", \\\"Off\\\", onclickOff),\\n\\tel(\\\"output\\\", { style: { display: \\\"block\\\", whiteSpace: \\\"pre\\\" } }, ref)\\n);\\n/** @param {MouseEvent} event @this {HTMLButtonElement} */\\nfunction update(event){\\n\\tref().append(\\n\\t\\tevent.type,\\n\\t\\t\\\"\\\\n\\\"\\n\\t);\\n}\\n\"}],\"toolbar\":false}"));</script><p>As the example shows, you can also provide types in JSDoc+TypeScript by using global type <code>ddeElementAddon</code>. Also notice, you can use Addons to get element reference.</p><h3 id="h-life-cycle-events"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-life-cycle-events" tabindex="-1">#</a> Life-cycle events</h3><p>Addons are called immediately when the element is created, even it is not connected to live DOM yet. Therefore, you can understand the Addon to be “oncreate” event.</p><p>The library provide three additional live-cycle events corresponding to how they are named in a case of custom elements: <code>on.connected</code>, <code>on.disconnected</code> and <code>on.attributeChanged</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-35hjjp3e4js" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 const paragraph= el("p", "See live-cycle events in console.",
 	el=&gt; log({ type: "dde:created", detail: el }),
 	on.connected(log),
@@ -63,7 +70,7 @@ document.body.append(
 function log({ type, detail }){
 	console.log({ _this: this, type, detail });
 }
-</code></div><script>Flems(document.getElementById("code-example-1-35hjjp3e4js"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst paragraph= el(\\\"p\\\", \\\"See live-cycle events in console.\\\",\\n\\tel=> log({ type: \\\"dde:created\\\", detail: el }),\\n\\ton.connected(log),\\n\\ton.disconnected(log),\\n\\ton.attributeChanged(log));\\n\\ndocument.body.append(\\n\\tparagraph,\\n\\tel(\\\"button\\\", \\\"Update attribute\\\", on(\\\"click\\\", ()=> paragraph.setAttribute(\\\"test\\\", Math.random().toString()))),\\n\\t\\\" \\\",\\n\\tel(\\\"button\\\", \\\"Remove\\\", on(\\\"click\\\", ()=> paragraph.remove()))\\n);\\n\\n/** @param {Partial<CustomEvent>} event */\\nfunction log({ type, detail }){\\n\\tconsole.log({ _this: this, type, detail });\\n}\\n\"}],\"toolbar\":false}"));</script><p>For Custom elements, we will later introduce a way to replace <code>*Callback</code> syntax with <code>dde:*</code> events. The <code>on.*</code> functions then listen to the appropriate Custom Elements events (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks">Custom element lifecycle callbacks | MDN</a>).</p><p>But, in case of regular elemnets the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code> | MDN</a> is internaly used to track these events. Therefore, there are some drawbacks:</p><ul><li>To proper listener registration, you need to use <code>on.*</code> not `on("dde:*", …)`!</li><li>Use sparingly! Internally, library must loop of all registered events and fires event properly. <strong>It is good practice to use the fact that if an element is removed, its children are also removed!</strong> In this spirit, we will introduce later the <strong>host</strong> syntax to register clean up procedures when the component is removed from the app.</li></ul><h3 id="h-final-notes"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-final-notes" tabindex="-1">#</a> Final notes</h3><p>The library also provides a&nbsp;method to dispatch the events.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on, dispatchEvent } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></div><script>Flems(document.getElementById("code-example-1-35hjjp3e4js"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst paragraph= el(\\\"p\\\", \\\"See live-cycle events in console.\\\",\\n\\tel=> log({ type: \\\"dde:created\\\", detail: el }),\\n\\ton.connected(log),\\n\\ton.disconnected(log),\\n\\ton.attributeChanged(log));\\n\\ndocument.body.append(\\n\\tparagraph,\\n\\tel(\\\"button\\\", \\\"Update attribute\\\", on(\\\"click\\\", ()=> paragraph.setAttribute(\\\"test\\\", Math.random().toString()))),\\n\\t\\\" \\\",\\n\\tel(\\\"button\\\", \\\"Remove\\\", on(\\\"click\\\", ()=> paragraph.remove()))\\n);\\n\\n/** @param {Partial<CustomEvent>} event */\\nfunction log({ type, detail }){\\n\\tconsole.log({ _this: this, type, detail });\\n}\\n\"}],\"toolbar\":false}"));</script><p>For Custom elements, we will later introduce a way to replace <code>*Callback</code> syntax with <code>dde:*</code> events. The <code>on.*</code> functions then listen to the appropriate Custom Elements events (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks">Custom element lifecycle callbacks | MDN</a>).</p><p>But, in case of regular elemnets the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code> | MDN</a> is internaly used to track these events. Therefore, there are some drawbacks:</p><ul><li>To proper listener registration, you need to use <code>on.*</code> not `on("dde:*", …)`!</li><li>Use sparingly! Internally, library must loop of all registered events and fires event properly. <strong>It is good practice to use the fact that if an element is removed, its children are also removed!</strong> In this spirit, we will introduce later the <strong>host</strong> syntax to register clean up procedures when the component is removed from the app.</li></ul><h3 id="h-final-notes"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-final-notes" tabindex="-1">#</a> Final notes</h3><p>The library also provides a&nbsp;method to dispatch the events.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on, dispatchEvent } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 document.body.append(
 	el("p", "Listenning to `test` event.", on("test", console.log)).append(
 		el("br"),
@@ -87,4 +94,4 @@ function dde(){
 function ddeOptions(){
 	dispatchEvent("test", { bubbles: true })(this, "hi");
 }
-</code></div><script>Flems(document.getElementById("code-example-2-b6a1hbrxh7s"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on, dispatchEvent } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", \\\"Listenning to `test` event.\\\", on(\\\"test\\\", console.log)).append(\\n\\t\\tel(\\\"br\\\"),\\n\\t\\tel(\\\"button\\\", \\\"native\\\", on(\\\"click\\\", native)),\\n\\t\\t\\\" \\\",\\n\\t\\tel(\\\"button\\\", \\\"dde\\\", on(\\\"click\\\", dde)),\\n\\t\\t\\\" \\\",\\n\\t\\tel(\\\"button\\\", \\\"dde with options\\\", on(\\\"click\\\", ddeOptions))\\n\\t)\\n);\\nfunction native(){\\n\\tthis.dispatchEvent(\\n\\t\\tnew CustomEvent(\\\"test\\\",\\n\\t\\t\\t{ bubbles: true, detail: \\\"hi\\\" }\\n\\t\\t)\\n\\t);\\n}\\nfunction dde(){\\n\\tdispatchEvent(\\\"test\\\")(this.parentElement, \\\"hi\\\");\\n}\\nfunction ddeOptions(){\\n\\tdispatchEvent(\\\"test\\\", { bubbles: true })(this, \\\"hi\\\");\\n}\\n\"}],\"toolbar\":false}"));</script><div class="notice"><p>Mnemonic</p><ul><li><code>on(&lt;event&gt;, &lt;listener&gt;[, &lt;options&gt;])(&lt;element&gt;)</code> — just <code>&lt;element&gt;.addEventListener(&lt;event&gt;, &lt;listener&gt;[, &lt;options&gt;])</code></li><li><code>on.&lt;live-cycle&gt;(&lt;event&gt;, &lt;listener&gt;[, &lt;options&gt;])(&lt;element&gt;)</code> — corresponds to custom elemnets callbacks <code>&lt;live-cycle&gt;Callback(...){...}</code>. To connect to custom element see following page, else it is simulated by MutationObserver.</li><li><code>dispatchEvent(&lt;event&gt;[, &lt;options&gt;])(element)</code> — just <code>&lt;element&gt;.dispatchEvent(new Event(&lt;event&gt;[, &lt;options&gt;]))</code></li><li><code>dispatchEvent(&lt;event&gt;[, &lt;options&gt;])(element, detail)</code> — just <code>&lt;element&gt;.dispatchEvent(new CustomEvent(&lt;event&gt;, { detail, ...&lt;options&gt; }))</code></li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p02-elements" title="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Elements (previous)</a><a rel="next" href="p04-signals" title="Handling reactivity in UI via signals."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Signals and reactivity</a></div></main></body></html>
+</code></div><script>Flems(document.getElementById("code-example-2-b6a1hbrxh7s"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on, dispatchEvent } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", \\\"Listenning to `test` event.\\\", on(\\\"test\\\", console.log)).append(\\n\\t\\tel(\\\"br\\\"),\\n\\t\\tel(\\\"button\\\", \\\"native\\\", on(\\\"click\\\", native)),\\n\\t\\t\\\" \\\",\\n\\t\\tel(\\\"button\\\", \\\"dde\\\", on(\\\"click\\\", dde)),\\n\\t\\t\\\" \\\",\\n\\t\\tel(\\\"button\\\", \\\"dde with options\\\", on(\\\"click\\\", ddeOptions))\\n\\t)\\n);\\nfunction native(){\\n\\tthis.dispatchEvent(\\n\\t\\tnew CustomEvent(\\\"test\\\",\\n\\t\\t\\t{ bubbles: true, detail: \\\"hi\\\" }\\n\\t\\t)\\n\\t);\\n}\\nfunction dde(){\\n\\tdispatchEvent(\\\"test\\\")(this.parentElement, \\\"hi\\\");\\n}\\nfunction ddeOptions(){\\n\\tdispatchEvent(\\\"test\\\", { bubbles: true })(this, \\\"hi\\\");\\n}\\n\"}],\"toolbar\":false}"));</script><div class="notice"><!--<dde:mark type="component" name="mnemonicUl" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>on(&lt;event&gt;, &lt;listener&gt;[, &lt;options&gt;])(&lt;element&gt;)</code> — just <code>&lt;element&gt;.addEventListener(&lt;event&gt;, &lt;listener&gt;[, &lt;options&gt;])</code></li><li><code>on.&lt;live-cycle&gt;(&lt;event&gt;, &lt;listener&gt;[, &lt;options&gt;])(&lt;element&gt;)</code> — corresponds to custom elemnets callbacks <code>&lt;live-cycle&gt;Callback(...){...}</code>. To connect to custom element see following page, else it is simulated by MutationObserver.</li><li><code>dispatchEvent(&lt;event&gt;[, &lt;options&gt;])(element)</code> — just <code>&lt;element&gt;.dispatchEvent(new Event(&lt;event&gt;[, &lt;options&gt;]))</code></li><li><code>dispatchEvent(&lt;event&gt;[, &lt;options&gt;])(element, detail)</code> — just <code>&lt;element&gt;.dispatchEvent(new CustomEvent(&lt;event&gt;, { detail, ...&lt;options&gt; }))</code></li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p02-elements" title="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Elements (previous)</a><a rel="next" href="p04-observables" title="Handling reactivity in UI via observables."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Observables and reactivity</a></div></main></body></html>

docs/p04-observables.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Handling reactivity in UI via observables."><title>`deka-dom-el` — Observables and reactivity</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Observables and reactivity</h1><p>Handling reactivity in UI via observables.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables." class="current">4. Observables and reactivity</a></nav><main><h2>Using observables to manage reactivity</h2><p>How a program responds to variable data or user interactions is one of the fundamental problems of programming. If we desire to solve the issue in a declarative manner, observables may be a viable approach.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// when NPM
+import { O } from "deka-dom-el/observables";
+// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
+
+/**
+ * @type {ddeObservable}
+ * */
+/**
+ * @type {ddeActions}
+ * */
+</code></div><h3 id="h-introducing-observables"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-observables" tabindex="-1">#</a> Introducing observables</h3><p>Using observables, we split program logic into the three parts. Firstly (α), we create a&nbsp;variable (constant) representing reactive value. Somewhere later, we can register (β) a&nbsp;logic reacting to the observable value changes. Similarly, in a&nbsp;remaining part (γ), we can update the observable value.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-v1fw44pkzuo" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
+// α — `observable` represents a&nbsp;reactive value
+const observable= O(0);
+// β — just reacts on observable changes
+O.on(observable, console.log);
+// γ — just updates the value
+observable(observable()+1);
+setInterval(()=&gt; observable(observable()+1), 5000);
+</code></div><script>Flems(document.getElementById("code-example-1-v1fw44pkzuo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\n// α — `observable` represents a reactive value\\nconst observable= O(0);\\n// β — just reacts on observable changes\\nO.on(observable, console.log);\\n// γ — just updates the value\\nobservable(observable()+1);\\nsetInterval(()=> observable(observable()+1), 5000);\\n\"}],\"toolbar\":false}"));</script><p>All this is just an&nbsp;example of <a href="https://en.wikipedia.org/wiki/Event-driven_programming" title="Wikipedia: Event-driven programming">Event-driven programming</a> and <a href="https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern" title="Wikipedia: Publish–subscribe pattern">Publish–subscribe pattern</a> (compare for example with <a href="https://www.npmjs.com/package/fpubsub" title="NPM package: fpubsub">fpubsub library</a>). All three parts can be in some manner independent and still connected to the same reactive entity.</p><p>Observables are implemented in the library as functions. To see current value of observable, just call it without any arguments <code>console.log(observable())</code>. To update the observable value, pass any argument <code>observable('a new value')</code>. For listenning the observable value changes, use <code>O.on(observable, console.log)</code>.</p><p>Similarly to the <code>on</code> function to register DOM events listener. You can use <code>AbortController</code>/<code>AbortSignal</code> to <em>off</em>/stop listenning. For representing “live” piece of code computation pattern:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1ti9ynadhw5c" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
+const observable= O(0);
+// computation pattern
+const double= O(()=&gt; 2*observable());
+
+const ac= new AbortController();
+O.on(observable, v=&gt; console.log("observable", v), { signal: ac.signal });
+O.on(double, v=&gt; console.log("double", v), { signal: ac.signal });
+
+observable(observable()+1);
+const interval= 5000;
+const id= setInterval(()=&gt; observable(observable()+1), interval);
+ac.signal.addEventListener("abort",
+	()=&gt; setTimeout(()=&gt; clearInterval(id), 2*interval));
+
+setTimeout(()=&gt; ac.abort(), 3*interval)
+</code></div><script>Flems(document.getElementById("code-example-1-1ti9ynadhw5c"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst observable= O(0);\\n// computation pattern\\nconst double= O(()=> 2*observable());\\n\\nconst ac= new AbortController();\\nO.on(observable, v=> console.log(\\\"observable\\\", v), { signal: ac.signal });\\nO.on(double, v=> console.log(\\\"double\\\", v), { signal: ac.signal });\\n\\nobservable(observable()+1);\\nconst interval= 5000;\\nconst id= setInterval(()=> observable(observable()+1), interval);\\nac.signal.addEventListener(\\\"abort\\\",\\n\\t()=> setTimeout(()=> clearInterval(id), 2*interval));\\n\\nsetTimeout(()=> ac.abort(), 3*interval)\\n\"}],\"toolbar\":false}"));</script><div class="notice"><!--<dde:mark type="component" name="mnemonicUl" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>O(&lt;value&gt;)</code> — observable: reactive value</li><li><code>O(()=&gt; &lt;computation&gt;)</code> — observable: reactive value dependent on calculation using other observables</li><li><code>O.on(&lt;observable&gt;, &lt;listener&gt;[, &lt;options&gt;])</code> — listen to the observable value changes</li><li><code>O.clear(...&lt;observables&gt;)</code> — off and clear observables</li><li><code>O(&lt;value&gt;, &lt;actions&gt;)</code> — observable: pattern to create complex reactive objects/arrays</li><li><code>O.action(&lt;observable&gt;, &lt;action-name&gt;, ...&lt;action-arguments&gt;)</code> — invoke an&nbsp;action for given observable</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p03-events" title="Using not only events in UI declaratively."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Events and Addons (previous)</a><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--></div></main></body></html>

docs/p04-signals.html

@@ -1,4 +1,14 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Handling reactivity in UI via signals."><title>`deka-dom-el` — Signals and reactivity</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Signals and reactivity</h1><p>Handling reactivity in UI via signals.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals." class="current">4. Signals and reactivity</a></nav><main><h2>Using signals to manage reactivity</h2><p>How a program responds to variable data or user interactions is one of the fundamental problems of programming. If we desire to solve the issue in a declarative manner, signals may be a viable approach.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-opc0krfvn3k" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Handling reactivity in UI via signals."><title>`deka-dom-el` — Signals and reactivity</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Signals and reactivity</h1><p>Handling reactivity in UI via signals.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals." class="current">4. Signals and reactivity</a></nav><main><h2>Using signals to manage reactivity</h2><p>How a program responds to variable data or user interactions is one of the fundamental problems of programming. If we desire to solve the issue in a declarative manner, signals may be a viable approach.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// when NPM
+import { S } from "deka-dom-el/signals";
+// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
+
+/**
+ * @type {ddeSignal}
+ * */
+/**
+ * @type {ddeActions}
+ * */
+</code></div><h3 id="h-introducing-signals"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-signals" tabindex="-1">#</a> Introducing signals</h3><p>Using signals, we split program logic into the three parts. Firstly (α), we create a&nbsp;variable (constant) representing reactive value. Somewhere later, we can register (β) a&nbsp;logic reacting to the signal value changes. Similarly, in a&nbsp;remaining part (γ), we can update the signal value.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1gy5flu0x85c" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 // α — `signal` represents a&nbsp;reactive value
 const signal= S(0);
 // β — just reacts on signal changes
@@ -6,7 +16,7 @@ S.on(signal, console.log);
 // γ — just updates the value
 signal(signal()+1);
 setInterval(()=&gt; signal(signal()+1), 5000);
-</code></div><script>Flems(document.getElementById("code-example-1-opc0krfvn3k"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\n// α — `signal` represents a reactive value\\nconst signal= S(0);\\n// β — just reacts on signal changes\\nS.on(signal, console.log);\\n// γ — just updates the value\\nsignal(signal()+1);\\nsetInterval(()=> signal(signal()+1), 5000);\\n\"}],\"toolbar\":false}"));</script><h3 id="h-introducing-signals"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-signals" tabindex="-1">#</a> Introducing signals</h3><p>Using signals, we split program logic into the three parts. Firstly (α), we create a&nbsp;variable (constant) representing reactive value. Somewhere later, we can register (β) a&nbsp;logic reacting to the signal value changes. Similarly, in a&nbsp;remaining part (γ), we can update the signal value.</p><p>All this is just an&nbsp;example of <a href="https://en.wikipedia.org/wiki/Event-driven_programming" title="Wikipedia: Event-driven programming">Event-driven programming</a> and <a href="https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern" title="Wikipedia: Publish–subscribe pattern">Publish–subscribe pattern</a> (compare for example with <a href="https://www.npmjs.com/package/fpubsub" title="NPM package: fpubsub">fpubsub library</a>). All three parts can be in some manner independent and still connected to the same reactive entity.</p><p>Signals are implemented in the library as functions. To see current value of signal, just call it without any arguments <code>console.log(signal())</code>. To update the signal value, pass any argument <code>signal('a new value')</code>. For listenning the signal value changes, use <code>S.on(signal, console.log)</code>.</p><p>Similarly to the <code>on</code> function to register DOM events listener. You can use <code>AbortController</code>/<code>AbortSignal</code> to <em>off</em>/stop listenning. For representing “live” piece of code computation pattern:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-e9cfsaeb64o" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+</code></div><script>Flems(document.getElementById("code-example-1-1gy5flu0x85c"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\n// α — `signal` represents a reactive value\\nconst signal= S(0);\\n// β — just reacts on signal changes\\nS.on(signal, console.log);\\n// γ — just updates the value\\nsignal(signal()+1);\\nsetInterval(()=> signal(signal()+1), 5000);\\n\"}],\"toolbar\":false}"));</script><p>All this is just an&nbsp;example of <a href="https://en.wikipedia.org/wiki/Event-driven_programming" title="Wikipedia: Event-driven programming">Event-driven programming</a> and <a href="https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern" title="Wikipedia: Publish–subscribe pattern">Publish–subscribe pattern</a> (compare for example with <a href="https://www.npmjs.com/package/fpubsub" title="NPM package: fpubsub">fpubsub library</a>). All three parts can be in some manner independent and still connected to the same reactive entity.</p><p>Signals are implemented in the library as functions. To see current value of signal, just call it without any arguments <code>console.log(signal())</code>. To update the signal value, pass any argument <code>signal('a new value')</code>. For listenning the signal value changes, use <code>S.on(signal, console.log)</code>.</p><p>Similarly to the <code>on</code> function to register DOM events listener. You can use <code>AbortController</code>/<code>AbortSignal</code> to <em>off</em>/stop listenning. For representing “live” piece of code computation pattern:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-e9cfsaeb64o" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 const signal= S(0);
 // computation pattern
 const double= S(()=&gt; 2*signal());
@@ -22,4 +32,4 @@ ac.signal.addEventListener("abort",
 	()=&gt; setTimeout(()=&gt; clearInterval(id), 2*interval));
 
 setTimeout(()=&gt; ac.abort(), 3*interval)
-</code></div><script>Flems(document.getElementById("code-example-1-e9cfsaeb64o"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst signal= S(0);\\n// computation pattern\\nconst double= S(()=> 2*signal());\\n\\nconst ac= new AbortController();\\nS.on(signal, v=> console.log(\\\"signal\\\", v), { signal: ac.signal });\\nS.on(double, v=> console.log(\\\"double\\\", v), { signal: ac.signal });\\n\\nsignal(signal()+1);\\nconst interval= 5000;\\nconst id= setInterval(()=> signal(signal()+1), interval);\\nac.signal.addEventListener(\\\"abort\\\",\\n\\t()=> setTimeout(()=> clearInterval(id), 2*interval));\\n\\nsetTimeout(()=> ac.abort(), 3*interval)\\n\"}],\"toolbar\":false}"));</script><div class="notice"><p>Mnemonic</p><ul><li><code>S(&lt;value&gt;)</code> — signal: reactive value</li><li><code>S(()=&gt; &lt;computation&gt;)</code> — signal: reactive value dependent on calculation using other signals</li><li><code>S.on(&lt;signal&gt;, &lt;listener&gt;[, &lt;options&gt;])</code> — listen to the signal value changes</li><li><code>S.clear(...&lt;signals&gt;)</code> — off and clear signals</li><li><code>S(&lt;value&gt;, &lt;actions&gt;)</code> — signal: pattern to create complex reactive objects/arrays</li><li><code>S.action(&lt;signal&gt;, &lt;action-name&gt;, ...&lt;action-arguments&gt;)</code> — invoke an&nbsp;action for given signal</li></ul></div></main></body></html>
+</code></div><script>Flems(document.getElementById("code-example-1-e9cfsaeb64o"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst signal= S(0);\\n// computation pattern\\nconst double= S(()=> 2*signal());\\n\\nconst ac= new AbortController();\\nS.on(signal, v=> console.log(\\\"signal\\\", v), { signal: ac.signal });\\nS.on(double, v=> console.log(\\\"double\\\", v), { signal: ac.signal });\\n\\nsignal(signal()+1);\\nconst interval= 5000;\\nconst id= setInterval(()=> signal(signal()+1), interval);\\nac.signal.addEventListener(\\\"abort\\\",\\n\\t()=> setTimeout(()=> clearInterval(id), 2*interval));\\n\\nsetTimeout(()=> ac.abort(), 3*interval)\\n\"}],\"toolbar\":false}"));</script><div class="notice"><!--<dde:mark type="component" name="mnemonicUl" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>S(&lt;value&gt;)</code> — signal: reactive value</li><li><code>S(()=&gt; &lt;computation&gt;)</code> — signal: reactive value dependent on calculation using other signals</li><li><code>S.on(&lt;signal&gt;, &lt;listener&gt;[, &lt;options&gt;])</code> — listen to the signal value changes</li><li><code>S.clear(...&lt;signals&gt;)</code> — off and clear signals</li><li><code>S(&lt;value&gt;, &lt;actions&gt;)</code> — signal: pattern to create complex reactive objects/arrays</li><li><code>S.action(&lt;signal&gt;, &lt;action-name&gt;, ...&lt;action-arguments&gt;)</code> — invoke an&nbsp;action for given signal</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p03-events" title="Using not only events in UI declaratively."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Events and Addons (previous)</a><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--></div></main></body></html>

docs_src/components/code.html.js

@@ -14,6 +14,7 @@ ${host}{
 	--shiki-token-punctuation: var(--code);
 	--shiki-token-link: #EE0000;
 	white-space: pre;
+	overflow: scroll;
 }
 ${host}[data-js=todo]{
 	border: 1px solid var(--border);
@@ -30,11 +31,13 @@ import { el } from "deka-dom-el";
  * @param {object} attrs
  * @param {string} [attrs.id]
  * @param {string} [attrs.className]
- * @param {string} attrs.content Example code file path
+ * @param {URL} [attrs.src] Example code file path
+ * @param {string} [attrs.content] Example code
  * @param {"js"|"ts"|"html"|"css"} [attrs.language="js"] Language of the code
  * @param {string} [attrs.page_id] ID of the page, if setted it registers shiki
  * */
-export function code({ id, content, language= "js", className= "code", page_id }){
+export function code({ id, src, content, language= "js", className= host.slice(1), page_id }){
+	if(src) content= s.cat(src);
 	let dataJS;
 	if(page_id){
 		registerClientPart(page_id);

docs_src/components/example.html.js

@@ -26,7 +26,7 @@ import { relative } from "node:path";
 export function example({ src, language= "js", page_id }){
 	registerClientPart(page_id);
 	const content= s.cat(src).toString()
-		.replaceAll(/ from "deka-dom-el(\/signals)?";/g, ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";');
+		.replaceAll(/ from "deka-dom-el(\/observables)?";/g, ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";');
 	const id= "code-example-"+generateCodeId(src);
 	return el().append(
 		el(code, { id, content, language, className: example.name }),

docs_src/components/examples/elements/intro.js

@@ -0,0 +1,10 @@
+// when NPM
+import { assign, el, elNS } from "deka-dom-el";
+// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
+
+// “internal” utils
+import {
+	assignAttribute,
+	classListDeclarative,
+	chainableAppend
+} from "deka-dom-el";

docs_src/components/examples/events/intro.js

@@ -0,0 +1,7 @@
+// when NPM
+import { on, dispatchEvent } from "deka-dom-el";
+// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
+
+/**
+ * @type {ddeElementAddon}
+ * */

docs_src/components/examples/helloWorld.js

@@ -1,9 +1,9 @@
 import { el } from "deka-dom-el";
-import { S } from "deka-dom-el/signals";
+import { O } from "deka-dom-el/observables";
-const clicks= S(0);
+const clicks= O(0);
 document.body.append(
 	el().append(
-		el("p", S(()=>
+		el("p", O(()=>
 			"Hello World "+"🎉".repeat(clicks())
 		)),
 		el("button", {

docs_src/components/examples/observables/computations-abort.js

@@ -0,0 +1,16 @@
+import { O } from "deka-dom-el/observables";
+const observable= O(0);
+// computation pattern
+const double= O(()=> 2*observable());
+
+const ac= new AbortController();
+O.on(observable, v=> console.log("observable", v), { signal: ac.signal });
+O.on(double, v=> console.log("double", v), { signal: ac.signal });
+
+observable(observable()+1);
+const interval= 5000;
+const id= setInterval(()=> observable(observable()+1), interval);
+ac.signal.addEventListener("abort",
+	()=> setTimeout(()=> clearInterval(id), 2*interval));
+
+setTimeout(()=> ac.abort(), 3*interval)

docs_src/components/examples/observables/intro.js

@@ -0,0 +1,10 @@
+// when NPM
+import { O } from "deka-dom-el/observables";
+// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
+
+/**
+ * @type {ddeObservable}
+ * */
+/**
+ * @type {ddeActions}
+ * */

docs_src/components/examples/observables/observables.js

@@ -0,0 +1,8 @@
+import { O } from "deka-dom-el/observables";
+// α — `observable` represents a reactive value
+const observable= O(0);
+// β — just reacts on observable changes
+O.on(observable, console.log);
+// γ — just updates the value
+observable(observable()+1);
+setInterval(()=> observable(observable()+1), 5000);

docs_src/components/examples/signals/computations-abort.js

@@ -1,16 +0,0 @@
-import { S } from "deka-dom-el/signals";
-const signal= S(0);
-// computation pattern
-const double= S(()=> 2*signal());
-
-const ac= new AbortController();
-S.on(signal, v=> console.log("signal", v), { signal: ac.signal });
-S.on(double, v=> console.log("double", v), { signal: ac.signal });
-
-signal(signal()+1);
-const interval= 5000;
-const id= setInterval(()=> signal(signal()+1), interval);
-ac.signal.addEventListener("abort",
-	()=> setTimeout(()=> clearInterval(id), 2*interval));
-
-setTimeout(()=> ac.abort(), 3*interval)

docs_src/components/examples/signals/intro.js

@@ -1,8 +0,0 @@
-import { S } from "deka-dom-el/signals";
-// α — `signal` represents a reactive value
-const signal= S(0);
-// β — just reacts on signal changes
-S.on(signal, console.log);
-// γ — just updates the value
-signal(signal()+1);
-setInterval(()=> signal(signal()+1), 5000);

docs_src/components/mnemonicUl.html.js

@@ -0,0 +1,19 @@
+import { styles } from "../ssr.js";
+import { h3 } from "./pageUtils.html.js";
+const host= ".notice";
+styles.css`
+${host} h3{
+	margin-top: 0;
+}
+`;
+import { el, simulateSlots } from "deka-dom-el";
+/** @param {Object} props @param {string} props.textContent */
+export function mnemonicUl({ textContent= "" }){
+	if(textContent) textContent= " – "+textContent
+	return simulateSlots(el("div", { className: "notice" }).append(
+		el(h3, "Mnemonic"+textContent),
+		el("ul").append(
+			el("slot")
+		)
+	));
+}

docs_src/index.html.js

@@ -1,43 +1,36 @@
-import "./global.css.js";
+import { simplePage } from "./layout/simplePage.html.js";
+
 import { el } from "deka-dom-el";
-
-import { header } from "./layout/head.html.js";
 import { example } from "./components/example.html.js";
-import { prevNext } from "./components/pageUtils.html.js";
-
 /** @param {import("./types.d.ts").PageAttrs} attrs */
 export function page({ pkg, info }){
 	const page_id= info.id;
-	return el().append(
+	return el(simplePage, { info, pkg }).append(
-		el(header, { info, pkg }),
+		el("p", "The library tries to provide pure JavaScript tool(s) to create reactive interfaces."),
-		el("main").append(
+		el("p").append(
-			el("p", "The library tries to provide pure JavaScript tool(s) to create reactive interfaces."),
+			"We start with creating and modifying a static elements and end up with UI templates.",
-			el("p").append(
+			" ",
-				"We start with creating and modifying a static elements and end up with UI templates.",
+			el("i").append(
-				" ",
+				"From ", el("code", "document.createElement"), " to ", el("code", "el"), "."
-				el("i").append(
-					"From ", el("code", "document.createElement"), " to ", el("code", "el"), "."
-				),
-				" ",
-				"Then we go through the native events system and the way to include it declaratively in UI templates.",
-				" ",
-				el("i").append(
-					"From ", el("code", "element.addEventListener"), " to ", el("code", "on"), "."
-				),
 			),
-			el("p").append(
+			" ",
-				"Next step is providing interactivity not only for our UI templates.",
+			"Then we go through the native events system and the way to include it declaratively in UI templates.",
-				" ",
+			" ",
-				"We introduce signals (", el("code", "S"), ") and how them incorporate to UI templates.",
+			el("i").append(
+				"From ", el("code", "element.addEventListener"), " to ", el("code", "on"), "."
 			),
-			el("p").append(
+		),
-				"Now we will clarify how the signals are incorporated into our templates with regard ",
+		el("p").append(
-				"to application performance. This is not the only reason the library uses ",
+			"Next step is providing interactivity not only for our UI templates.",
-				el("code", "scope"), "s. We will look at how they work in components represented ",
+			" ",
-				"in JavaScript by functions."
+			"We introduce observables (", el("code", "O"), ") and how them incorporate to UI templates.",
-			),
+		),
-			el(example, { src: new URL("./components/examples/helloWorld.js", import.meta.url), page_id }),
+		el("p").append(
-			el(prevNext, info)
+			"Now we will clarify how the observables are incorporated into our templates with regard ",
-		)
+			"to application performance. This is not the only reason the library uses ",
+			el("code", "scope"), "s. We will look at how they work in components represented ",
+			"in JavaScript by functions."
+		),
+		el(example, { src: new URL("./components/examples/helloWorld.js", import.meta.url), page_id }),
 	);
 }

docs_src/layout/simplePage.html.js

@@ -0,0 +1,16 @@
+import "../global.css.js";
+import { el, simulateSlots } from "deka-dom-el";
+
+import { header } from "./head.html.js";
+import { prevNext } from "../components/pageUtils.html.js";
+
+/** @param {import("../types.d.ts").PageAttrs} attrs */
+export function simplePage({ pkg, info }){
+	return simulateSlots(el().append(
+		el(header, { info, pkg }),
+		el("main").append(
+			el("slot"),
+			el(prevNext, info)
+		)
+	));
+}

docs_src/p02-elements.html.js

@@ -1,147 +1,140 @@
-import "./global.css.js";
+import { simplePage } from "./layout/simplePage.html.js";
+
 import { el } from "deka-dom-el";
-
-import { header } from "./layout/head.html.js";
 import { example } from "./components/example.html.js";
-import { h3, prevNext } from "./components/pageUtils.html.js";
+import { h3 } from "./components/pageUtils.html.js";
-
+import { mnemonicUl } from "./components/mnemonicUl.html.js";
+import { code } from "./components/code.html.js";
 /** @param {string} url */
 const fileURL= url=> new URL(url, import.meta.url);
-
 /** @param {import("./types.d.ts").PageAttrs} attrs */
 export function page({ pkg, info }){
 	const page_id= info.id;
-	return el().append(
+	return el(simplePage, { info, pkg }).append(
-		el(header, { info, pkg }),
+		el("h2", "Native JavaScript DOM elements creations"),
-		el("main").append(
+		el("p", "Let’s go through all patterns we would like to use and what needs to be improved for better experience."),
-			el("h2", "Native JavaScript DOM elements creations"),
-			el("p", "Let’s go through all patterns we would like to use and what needs to be improved for better experience."),
 
-			el(h3, "Creating element(s) (with custom attributes)"),
+		el(code, { src: fileURL("./components/examples/elements/intro.js"), page_id }),
-			el("p").append(
+		
-				"You can create a native DOM element by using the ",
+		el(h3, "Creating element(s) (with custom attributes)"),
-				el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement", title: "MDN documentation for document.createElement()" }).append(
+		el("p").append(
-					el("code", "document.createElement()")
+			"You can create a native DOM element by using the ",
-				), ". ",
+			el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement", title: "MDN documentation for document.createElement()" }).append(
-				"It is also possible to provide a some attribute(s) declaratively using ", el("code", "Object.assign()"), ". ",
+				el("code", "document.createElement()")
-				"More precisely, this way you can sets some ",
+			), ". ",
-				el("a", {
+			"It is also possible to provide a some attribute(s) declaratively using ", el("code", "Object.assign()"), ". ",
-					href: "https://developer.mozilla.org/en-US/docs/Glossary/IDL",
+			"More precisely, this way you can sets some ",
-					title: "MDN page about Interface Description Language"
+			el("a", {
-				}).append(
+				href: "https://developer.mozilla.org/en-US/docs/Glossary/IDL",
-					el("abbr", { textContent: "IDL", title: "Interface Description Language" })
+				title: "MDN page about Interface Description Language"
-				), " also known as a JavaScript property."
+			}).append(
+				el("abbr", { textContent: "IDL", title: "Interface Description Language" })
+			), " also known as a JavaScript property."
+		),
+		el(example, { src: fileURL("./components/examples/elements/nativeCreateElement.js"), page_id }),
+		el("p").append(
+			"To make this easier, you can use the ", el("code", "el"), " function. ",
+			"Internally in basic examples, it is wrapper around ", el("code", "assign(document.createElement(…), { … })"), "."
+		),
+		el(example, { src: fileURL("./components/examples/elements/dekaCreateElement.js"), page_id }),
+		el("p").append(
+			"The ", el("code", "assign"), " function provides improved behaviour of ", el("code", "Object.assign()"), ". ",
+			"You can declaratively sets any IDL and attribute of the given element. ",
+			"Function prefers IDL and fallback to the ", el("code", "element.setAttribute"), " if there is no writable property in the element prototype."
+		),
+		el("p").append(
+			"You can study all JavaScript elements interfaces to the corresponding HTML elements. ",
+			"All HTML elements inherits from ", el("a", { textContent: "HTMLElement", href: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" }), ". ",
+			"To see all available IDLs for example for paragraphs, see ", el("a", { textContent: "HTMLParagraphElement", href: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement" }), ". ",
+			"Moreover, the ", el("code", "assign"), " provides a way to sets declaratively some convenient properties:"
+		),
+		el("ul").append(
+			el("li").append(
+				"It is possible to sets ", el("code", "data-*"), "/", el("code", "aria-*"), " attributes using object notation."
 			),
-			el(example, { src: fileURL("./components/examples/elements/nativeCreateElement.js"), page_id }),
+			el("li").append(
-			el("p").append(
+				"In opposite, it is also possible to sets ", el("code", "data-*"), "/", el("code", "aria-*"), " attribute using camelCase notation."
-				"To make this easier, you can use the ", el("code", "el"), " function. ",
-				"Internally in basic examples, it is wrapper around ", el("code", "assign(document.createElement(…), { … })"), "."
 			),
-			el(example, { src: fileURL("./components/examples/elements/dekaCreateElement.js"), page_id }),
+			el("li").append(
-			el("p").append(
+				"You can use string or object as a value for ", el("code", "style"), " property."
-				"The ", el("code", "assign"), " function provides improved behaviour of ", el("code", "Object.assign()"), ". ",
-				"You can declaratively sets any IDL and attribute of the given element. ",
-				"Function prefers IDL and fallback to the ", el("code", "element.setAttribute"), " if there is no writable property in the element prototype."
 			),
-			el("p").append(
+			el("li").append(
-				"You can study all JavaScript elements interfaces to the corresponding HTML elements. ",
+				el("code", "className"), " (IDL – preffered)/", el("code", "class"), " are ways to add CSS class to the element. ",
-				"All HTML elements inherits from ", el("a", { textContent: "HTMLElement", href: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" }), ". ",
+				"You can use string (similarly to ", el("code", "class=\"…\"") ," syntax in  HTML) or array of strings. ",
-				"To see all available IDLs for example for paragraphs, see ", el("a", { textContent: "HTMLParagraphElement", href: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement" }), ". ",
+				"This is handy to concat conditional classes."
-				"Moreover, the ", el("code", "assign"), " provides a way to sets declaratively some convenient properties:"
 			),
-			el("ul").append(
+			el("li").append(
-				el("li").append(
+				"Use ", el("code", "classList"), " to toggle specific classes. This will be handy later when the reactivity via observables is beeing introduced.",
-					"It is possible to sets ", el("code", "data-*"), "/", el("code", "aria-*"), " attributes using object notation."
+			),
-				),
+			el("li").append(
-				el("li").append(
+				"The ", el("code", "assign"), " also accepts the ", el("code", "undefined"), " as a value for any property to remove it from the element declaratively. ",
-					"In opposite, it is also possible to sets ", el("code", "data-*"), "/", el("code", "aria-*"), " attribute using camelCase notation."
+				"Also for some IDL the corresponding attribute is removed as it can be confusing. ",
-				),
+				el("em").append(
-				el("li").append(
+					"For example, natievly the element’s ", el("code", "id"), " is removed by setting the IDL to an empty string."
-					"You can use string or object as a value for ", el("code", "style"), " property."
-				),
-				el("li").append(
-					el("code", "className"), " (IDL – preffered)/", el("code", "class"), " are ways to add CSS class to the element. ",
-					"You can use string (similarly to ", el("code", "class=\"…\"") ," syntax in  HTML) or array of strings. ",
-					"This is handy to concat conditional classes."
-				),
-				el("li").append(
-					"Use ", el("code", "classList"), " to toggle specific classes. This will be handy later when the reactivity via signals is beeing introduced.",
-				),
-				el("li").append(
-					"The ", el("code", "assign"), " also accepts the ", el("code", "undefined"), " as a value for any property to remove it from the element declaratively. ",
-					"Also for some IDL the corresponding attribute is removed as it can be confusing. ",
-					el("em").append(
-						"For example, natievly the element’s ", el("code", "id"), " is removed by setting the IDL to an empty string."
-					)
-				),
-				el("li").append(
-					"You can use ", el("code", "="), " or ", el("code", "."), " to force processing given key as attribute/property of the element."
 				)
 			),
-			el("p").append(
+			el("li").append(
-				"For processing, the ", el("code", "assign"), " internally uses ", el("code", "assignAttribute"), " and ", el("code", "classListDeclarative"), "."
+				"You can use ", el("code", "="), " or ", el("code", "."), " to force processing given key as attribute/property of the element."
-			),
+			)
-			el(example, { src: fileURL("./components/examples/elements/dekaAssign.js"), page_id }),
+		),
+		el("p").append(
+			"For processing, the ", el("code", "assign"), " internally uses ", el("code", "assignAttribute"), " and ", el("code", "classListDeclarative"), "."
+		),
+		el(example, { src: fileURL("./components/examples/elements/dekaAssign.js"), page_id }),
 		
-			el(h3, "Native JavaScript templating"),
+		el(h3, "Native JavaScript templating"),
-			el("p", "By default, the native JS has no good way to define HTML template using DOM API:"),
+		el("p", "By default, the native JS has no good way to define HTML template using DOM API:"),
-			el(example, { src: fileURL("./components/examples/elements/nativeAppend.js"), page_id }),
+		el(example, { src: fileURL("./components/examples/elements/nativeAppend.js"), page_id }),
-			el("p").append(
+		el("p").append(
-				"This library therefore overwrites the ", el("code", "append"), " method of created elements to always return parent element."
+			"This library therefore overwrites the ", el("code", "append"), " method of created elements to always return parent element."
-			),
+		),
-			el(example, { src: fileURL("./components/examples/elements/dekaAppend.js"), page_id }),
+		el(example, { src: fileURL("./components/examples/elements/dekaAppend.js"), page_id }),
 		
 		
-			el(h3, "Basic (state-less) components"),
+		el(h3, "Basic (state-less) components"),
-			el("p").append(
+		el("p").append(
-				"You can use functions for encapsulation (repeating) logic. ",
+			"You can use functions for encapsulation (repeating) logic. ",
-				"The ", el("code", "el"), " accepts function as first argument. ",
+			"The ", el("code", "el"), " accepts function as first argument. ",
-				"In that case, the function should return dom elements and the second argument for ", el("code", "el"), " is argument for given element."
+			"In that case, the function should return dom elements and the second argument for ", el("code", "el"), " is argument for given element."
-			),
+		),
-			el(example, { src: fileURL("./components/examples/elements/dekaBasicComponent.js"), page_id }),
+		el(example, { src: fileURL("./components/examples/elements/dekaBasicComponent.js"), page_id }),
-			el("p").append(
+		el("p").append(
-				"As you can see, in case of state-less/basic components there is no difference",
+			"As you can see, in case of state-less/basic components there is no difference",
-				" between calling component function directly or using ", el("code", "el"), " function.",
+			" between calling component function directly or using ", el("code", "el"), " function.",
-			),
+		),
-			el("p", { className: "notice" }).append(
+		el("p", { className: "notice" }).append(
-				"It is nice to use similar naming convention as native DOM API. ",
+			"It is nice to use similar naming convention as native DOM API. ",
-				"This allows us to use ", el("a", { textContent: "the destructuring assignment syntax", href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment", title: "Destructuring assignment | MDN" }),
+			"This allows us to use ", el("a", { textContent: "the destructuring assignment syntax", href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment", title: "Destructuring assignment | MDN" }),
-				" and keep track of the native API (things are best remembered through regular use).",
+			" and keep track of the native API (things are best remembered through regular use).",
-			),
+		),
 
-			el(h3, "Creating non-HTML elements"),
+		el(h3, "Creating non-HTML elements"),
-			el("p").append(
+		el("p").append(
-				"Similarly to the native DOM API (", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS", title: "MDN" }).append(el("code", "document.createElementNS")), ") for non-HTML elements",
+			"Similarly to the native DOM API (", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS", title: "MDN" }).append(el("code", "document.createElementNS")), ") for non-HTML elements",
-				" we need to tell JavaScript which kind of the element to create.",
+			" we need to tell JavaScript which kind of the element to create.",
-				" We can use the ", el("code", "elNS"), " function:"
+			" We can use the ", el("code", "elNS"), " function:"
-			),
+		),
-			el(example, { src: fileURL("./components/examples/elements/dekaElNS.js"), page_id }),
+		el(example, { src: fileURL("./components/examples/elements/dekaElNS.js"), page_id }),
 		
-			el("div", { className: "notice" }).append(
+		el(mnemonicUl).append(
-				el("p", "Mnemonic"),
+			el("li").append(
-				el("ul").append(
+				el("code", "assign(<element>, ...<idl-objects>): <element>"), " — assign properties to the element",
-					el("li").append(
-						el("code", "assign(<element>, ...<idl-objects>): <element>"), " — assign properties to the element",
-					),
-					el("li").append(
-						el("code", "el(<tag-name>, <primitive>)[.append(...)]: <element-from-tag-name>"), " — simple element containing only text",
-					),
-					el("li").append(
-						el("code", "el(<tag-name>, <idl-object>)[.append(...)]: <element-from-tag-name>"), " — element with more properties",
-					),
-					el("li").append(
-						el("code", "el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function>"), " — using component represented by function",
-					),
-					el("li").append(
-						el("code", "el(<...>, <...>, ...<addons>)"), " — see following page"
-					),
-					el("li").append(
-						el("code", "elNS(<namespace>)(<as-el-see-above>)[.append(...)]: <element-based-on-arguments>"), " — typically SVG elements",
-					)
-				)
 			),
-
+			el("li").append(
-			el(prevNext, info)
+				el("code", "el(<tag-name>, <primitive>)[.append(...)]: <element-from-tag-name>"), " — simple element containing only text",
+			),
+			el("li").append(
+				el("code", "el(<tag-name>, <idl-object>)[.append(...)]: <element-from-tag-name>"), " — element with more properties",
+			),
+			el("li").append(
+				el("code", "el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function>"), " — using component represented by function",
+			),
+			el("li").append(
+				el("code", "el(<...>, <...>, ...<addons>)"), " — see following page"
+			),
+			el("li").append(
+				el("code", "elNS(<namespace>)(<as-el-see-above>)[.append(...)]: <element-based-on-arguments>"), " — typically SVG elements",
+			)
 		)
 	);
 }

docs_src/p03-events.html.js

@@ -1,139 +1,132 @@
-import "./global.css.js";
+import { simplePage } from "./layout/simplePage.html.js";
+
 import { el } from "deka-dom-el";
-
-import { header } from "./layout/head.html.js";
 import { example } from "./components/example.html.js";
-import { h3, prevNext } from "./components/pageUtils.html.js";
+import { h3 } from "./components/pageUtils.html.js";
-
+import { mnemonicUl } from "./components/mnemonicUl.html.js";
+import { code } from "./components/code.html.js";
 /** @param {string} url */
 const fileURL= url=> new URL(url, import.meta.url);
-
 /** @param {import("./types.d.ts").PageAttrs} attrs */
 export function page({ pkg, info }){
 	const page_id= info.id;
-	return el().append(
+	return el(simplePage, { info, pkg }).append(
-		el(header, { info, pkg }),
+		el("h2", "Listenning to the native DOM events and other Addons"),
-		el("main").append(
+		el("p").append(
-			el("h2", "Listenning to the native DOM events and other Addons"),
+			"We quickly introduce helper to listening to the native DOM events.",
-			el("p").append(
+			" ",
-				"We quickly introduce helper to listening to the native DOM events.",
+			"And library syntax/pattern so-called ", el("em", "Addon"), " to",
-				" ",
+			" incorporate not only this in UI templates declaratively."
-				"And library syntax/pattern so-called ", el("em", "Addon"), " to",
+		),
-				" incorporate not only this in UI templates declaratively."
-			),
 		
-			el(h3, "Events and listenners"),
+		el(code, { src: fileURL("./components/examples/events/intro.js"), page_id }),
-			el("p").append(
-				"In JavaScript you can listen to the native DOM events of the given element by using ",
-				el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener", title: "addEventListener on MDN" }).append(
-					el("code", "element.addEventListener(type, listener, options)")
-				), ".",
-				" ",
-				"The library provides an alternative (", el("code", "on"), ") accepting the differen order",
-				" of the arguments:"
-			),
-			el(example, { src: fileURL("./components/examples/events/compare.js"), page_id }),
-			el("p").append(
-				"…this is actually one of the two differences. The another one is that ", el("code", "on"),
-				" accepts only object as the ", el("code", "options"), " (but it is still optional)."
-			),
-			el("p", { className: "notice" }).append(
-				"The other difference is that there is ", el("strong", "no"), " ", el("code", "off"), " function.",
-				" ",
-				"You can remove listener declaratively using ", el("a", { textContent: "AbortSignal", href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal", title: "part of addEventListener on MDN" }),
-				":"
-			),
-			el(example, { src: fileURL("./components/examples/events/abortSignal.js"), page_id }),
-			el("div", { className: "notice" }).append(
-				el("p", "So, there are (typically) three ways to handle events. You can use:"),
-				el("ul").append(
-					el("li").append( el("code", `el("button", { textContent: "click me", "=onclick": "console.log(event)" })`)),
-					el("li").append( el("code", `el("button", { textContent: "click me", onclick: console.log })`)),
-					el("li").append( el("code", `el("button", { textContent: "click me" }, on("click", console.log))`))
-				),
-				el("p").append(
-					"In the first example we force to use HTML attribute (it corresponds to ", el("code", `<button onclick="console.log(event)">click me</button>`), ").",
-					" ",
-					el("em", "Side note: this can be useful in case of SSR."),
-					" ",
-					"To study difference, you can read a nice summary here: ", el("a", { href: "https://gist.github.com/WebReflection/b404c36f46371e3b1173bf5492acc944", textContent: "GIST @WebReflection/web_events.md" }), "."
-				)
-			),
 		
-			el(h3, "Addons"),
+		el(h3, "Events and listenners"),
-			el("p").append(
+		el("p").append(
-				"From practical point of view, ", el("em", "Addons"), " are just functions that accept any html element",
+			"In JavaScript you can listen to the native DOM events of the given element by using ",
-				" as their first parameter. You can see that the ", el("code", "on(…)"), " fullfills this requirement."
+			el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener", title: "addEventListener on MDN" }).append(
-			),
+				el("code", "element.addEventListener(type, listener, options)")
-			el("p").append(
+			), ".",
-				"You can use Addons as ≥3rd argument of ", el("code", "el"), " function. This way is possible to extends",
+			" ",
-				" you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:"
+			"The library provides an alternative (", el("code", "on"), ") accepting the differen order",
-			),
+			" of the arguments:"
-			el(example, { src: fileURL("./components/examples/events/templateWithListeners.js"), page_id }),
+		),
-			el("p").append(
+		el(example, { src: fileURL("./components/examples/events/compare.js"), page_id }),
-				"As the example shows, you can also provide types in JSDoc+TypeScript by using global type ", el("code", "ddeElementAddon"), ".",
+		el("p").append(
-				" ",
+			"…this is actually one of the two differences. The another one is that ", el("code", "on"),
-				"Also notice, you can use Addons to get element reference.",
+			" accepts only object as the ", el("code", "options"), " (but it is still optional)."
-			),
+		),
-			el(h3, "Life-cycle events"),
+		el("p", { className: "notice" }).append(
-			el("p").append(
+			"The other difference is that there is ", el("strong", "no"), " ", el("code", "off"), " function.",
-				"Addons are called immediately when the element is created, even it is not connected to live DOM yet.",
+			" ",
-				" ",
+			"You can remove listener declaratively using ", el("a", { textContent: "AbortSignal", href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal", title: "part of addEventListener on MDN" }),
-				"Therefore, you can understand the Addon to be “oncreate” event."
+			":"
-			),
+		),
-			el("p").append(
+		el(example, { src: fileURL("./components/examples/events/abortSignal.js"), page_id }),
-				"The library provide three additional live-cycle events corresponding to how they are named in",
+		el("div", { className: "notice" }).append(
-				" a case of custom elements: ", el("code", "on.connected"), ", ", el("code", "on.disconnected"),
+			el("p", "So, there are (typically) three ways to handle events. You can use:"),
-				" and ", el("code", "on.attributeChanged"), "."
-			),
-			el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }),
-			el("p").append(
-				"For Custom elements, we will later introduce a way to replace ", el("code", "*Callback"),
-				" syntax with ", el("code", "dde:*"), " events. The ", el("code", "on.*"), " functions then",
-				" listen to the appropriate Custom Elements events (see ", el("a", { textContent: "Custom element lifecycle callbacks | MDN", href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks" }), ")."
-			),
-			el("p").append(
-				"But, in case of regular elemnets the ", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" }).append(el("code", "MutationObserver"), " | MDN"),
-				" is internaly used to track these events. Therefore, there are some drawbacks:",
-			),
 			el("ul").append(
-				el("li").append(
+				el("li").append( el("code", `el("button", { textContent: "click me", "=onclick": "console.log(event)" })`)),
-					"To proper listener registration, you need to use ", el("code", "on.*"), " not `on(\"dde:*\", …)`!"
+				el("li").append( el("code", `el("button", { textContent: "click me", onclick: console.log })`)),
-				),
+				el("li").append( el("code", `el("button", { textContent: "click me" }, on("click", console.log))`))
-				el("li").append(
-					"Use sparingly! Internally, library must loop of all registered events and fires event properly.",
-					" ",
-					el("strong", "It is good practice to use the fact that if an element is removed, its children are also removed!"),
-					" ",
-					"In this spirit, we will introduce later the ", el("strong", "host"), " syntax to register",
-					" clean up procedures when the component is removed from the app."
-				),
 			),
+			el("p").append(
+				"In the first example we force to use HTML attribute (it corresponds to ", el("code", `<button onclick="console.log(event)">click me</button>`), ").",
+				" ",
+				el("em", "Side note: this can be useful in case of SSR."),
+				" ",
+				"To study difference, you can read a nice summary here: ", el("a", { href: "https://gist.github.com/WebReflection/b404c36f46371e3b1173bf5492acc944", textContent: "GIST @WebReflection/web_events.md" }), "."
+			)
+		),
 
-			el(h3, "Final notes"),
+		el(h3, "Addons"),
-			el("p", "The library also provides a method to dispatch the events."),
+		el("p").append(
-			el(example, { src: fileURL("./components/examples/events/compareDispatch.js"), page_id }),
+			"From practical point of view, ", el("em", "Addons"), " are just functions that accept any html element",
-			
+			" as their first parameter. You can see that the ", el("code", "on(…)"), " fullfills this requirement."
-			el("div", { className: "notice" }).append(
+		),
-				el("p", "Mnemonic"),
+		el("p").append(
-				el("ul").append(
+			"You can use Addons as ≥3rd argument of ", el("code", "el"), " function. This way is possible to extends",
-					el("li").append(
+			" you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:"
-						el("code", "on(<event>, <listener>[, <options>])(<element>)"), " — just ", el("code", "<element>.addEventListener(<event>, <listener>[, <options>])")
+		),
-					),
+		el(example, { src: fileURL("./components/examples/events/templateWithListeners.js"), page_id }),
-					el("li").append(
+		el("p").append(
-						el("code", "on.<live-cycle>(<event>, <listener>[, <options>])(<element>)"), " — corresponds to custom elemnets callbacks ", el("code", "<live-cycle>Callback(...){...}"),
+			"As the example shows, you can also provide types in JSDoc+TypeScript by using global type ", el("code", "ddeElementAddon"), ".",
-						". To connect to custom element see following page, else it is simulated by MutationObserver."
+			" ",
-					),
+			"Also notice, you can use Addons to get element reference.",
-					el("li").append(
+		),
-						el("code", "dispatchEvent(<event>[, <options>])(element)"), " — just ", el("code", "<element>.dispatchEvent(new Event(<event>[, <options>]))")
+		el(h3, "Life-cycle events"),
-					),
+		el("p").append(
-					el("li").append(
+			"Addons are called immediately when the element is created, even it is not connected to live DOM yet.",
-						el("code", "dispatchEvent(<event>[, <options>])(element, detail)"), " — just ", el("code", "<element>.dispatchEvent(new CustomEvent(<event>, { detail, ...<options> }))")
+			" ",
-					),
+			"Therefore, you can understand the Addon to be “oncreate” event."
-				)
+		),
+		el("p").append(
+			"The library provide three additional live-cycle events corresponding to how they are named in",
+			" a case of custom elements: ", el("code", "on.connected"), ", ", el("code", "on.disconnected"),
+			" and ", el("code", "on.attributeChanged"), "."
+		),
+		el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }),
+		el("p").append(
+			"For Custom elements, we will later introduce a way to replace ", el("code", "*Callback"),
+			" syntax with ", el("code", "dde:*"), " events. The ", el("code", "on.*"), " functions then",
+			" listen to the appropriate Custom Elements events (see ", el("a", { textContent: "Custom element lifecycle callbacks | MDN", href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks" }), ")."
+		),
+		el("p").append(
+			"But, in case of regular elemnets the ", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" }).append(el("code", "MutationObserver"), " | MDN"),
+			" is internaly used to track these events. Therefore, there are some drawbacks:",
+		),
+		el("ul").append(
+			el("li").append(
+				"To proper listener registration, you need to use ", el("code", "on.*"), " not `on(\"dde:*\", …)`!"
 			),
+			el("li").append(
+				"Use sparingly! Internally, library must loop of all registered events and fires event properly.",
+				" ",
+				el("strong", "It is good practice to use the fact that if an element is removed, its children are also removed!"),
+				" ",
+				"In this spirit, we will introduce later the ", el("strong", "host"), " syntax to register",
+				" clean up procedures when the component is removed from the app."
+			),
+		),
 
-			el(prevNext, info)
+		el(h3, "Final notes"),
-		)
+		el("p", "The library also provides a method to dispatch the events."),
+		el(example, { src: fileURL("./components/examples/events/compareDispatch.js"), page_id }),
+		
+		el(mnemonicUl).append(
+			el("li").append(
+				el("code", "on(<event>, <listener>[, <options>])(<element>)"), " — just ", el("code", "<element>.addEventListener(<event>, <listener>[, <options>])")
+			),
+			el("li").append(
+				el("code", "on.<live-cycle>(<event>, <listener>[, <options>])(<element>)"), " — corresponds to custom elemnets callbacks ", el("code", "<live-cycle>Callback(...){...}"),
+				". To connect to custom element see following page, else it is simulated by MutationObserver."
+			),
+			el("li").append(
+				el("code", "dispatchEvent(<event>[, <options>])(element)"), " — just ", el("code", "<element>.dispatchEvent(new Event(<event>[, <options>]))")
+			),
+			el("li").append(
+				el("code", "dispatchEvent(<event>[, <options>])(element, detail)"), " — just ", el("code", "<element>.dispatchEvent(new CustomEvent(<event>, { detail, ...<options> }))")
+			),
+		),
 	);
 }

docs_src/p04-observables.html.js

@@ -0,0 +1,75 @@
+import { simplePage } from "./layout/simplePage.html.js";
+
+import { el } from "deka-dom-el";
+import { example } from "./components/example.html.js";
+import { h3 } from "./components/pageUtils.html.js";
+import { mnemonicUl } from "./components/mnemonicUl.html.js";
+import { code } from "./components/code.html.js";
+/** @param {string} url */
+const fileURL= url=> new URL(url, import.meta.url);
+
+/** @param {import("./types.d.ts").PageAttrs} attrs */
+export function page({ pkg, info }){
+	const page_id= info.id;
+	return el(simplePage, { info, pkg }).append(
+		el("h2", "Using observables to manage reactivity"),
+		el("p").append(
+			"How a program responds to variable data or user",
+			" interactions is one of the fundamental problems of programming.",
+			" If we desire to solve the issue in a declarative manner,",
+			" observables may be a viable approach.",
+		),
+		el(code, { src: fileURL("./components/examples/observables/intro.js"), page_id }),
+		
+		el(h3, "Introducing observables"),
+		el("p").append(
+			"Using observables, we split program logic into the three parts.",
+			" Firstly (α), we create a variable (constant) representing reactive",
+			" value. Somewhere later, we can register (β) a logic reacting",
+			" to the observable value changes. Similarly, in a remaining part (γ), we",
+			" can update the observable value."
+		),
+		el(example, { src: fileURL("./components/examples/observables/observables.js"), page_id }),
+		el("p").append(
+			"All this is just an example of ",
+			el("a", { textContent: "Event-driven programming", href: "https://en.wikipedia.org/wiki/Event-driven_programming", title: "Wikipedia: Event-driven programming" }),
+			" and ",
+			el("a", { textContent: "Publish–subscribe pattern", href: "https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern", title: "Wikipedia: Publish–subscribe pattern" }),
+			" (compare for example with ", el("a", { textContent: "fpubsub library", href: "https://www.npmjs.com/package/fpubsub", title: "NPM package: fpubsub" }), ").",
+			" All three parts can be in some manner independent and still connected",
+			" to the same reactive entity."
+		),
+		el("p").append(
+			"Observables are implemented in the library as functions. To see current value",
+			" of observable, just call it without any arguments ", el("code", "console.log(observable())"), ".",
+			" To update the observable value, pass any argument ", el("code", "observable('a new value')"), ".",
+			" For listenning the observable value changes, use ", el("code", "O.on(observable, console.log)"), "."
+		),
+		el("p").append(
+			"Similarly to the ", el("code", "on"), " function to register DOM events listener.",
+			" You can use ", el("code", "AbortController"), "/", el("code", "AbortSignal"), " to",
+			" ", el("em", "off"), "/stop listenning. For representing “live” piece of code computation pattern:"
+		),
+		el(example, { src: fileURL("./components/examples/observables/computations-abort.js"), page_id }),
+		el(mnemonicUl).append(
+			el("li").append(
+				el("code", "O(<value>)"), " — observable: reactive value",
+			),
+			el("li").append(
+				el("code", "O(()=> <computation>)"), " — observable: reactive value dependent on calculation using other observables",
+			),
+			el("li").append(
+				el("code", "O.on(<observable>, <listener>[, <options>])"), " — listen to the observable value changes",
+			),
+			el("li").append(
+				el("code", "O.clear(...<observables>)"), " — off and clear observables",
+			),
+			el("li").append(
+				el("code", "O(<value>, <actions>)"), " — observable: pattern to create complex reactive objects/arrays",
+			),
+			el("li").append(
+				el("code", "O.action(<observable>, <action-name>, ...<action-arguments>)"), " — invoke an action for given observable"
+			)
+		),
+	);
+}

docs_src/p04-signals.html.js

@@ -1,80 +0,0 @@
-import "./global.css.js";
-import { el } from "deka-dom-el";
-
-import { header } from "./layout/head.html.js";
-import { example } from "./components/example.html.js";
-import { h3, prevNext } from "./components/pageUtils.html.js";
-
-/** @param {string} url */
-const fileURL= url=> new URL(url, import.meta.url);
-
-/** @param {import("./types.d.ts").PageAttrs} attrs */
-export function page({ pkg, info }){
-	const page_id= info.id;
-	return el().append(
-		el(header, { info, pkg }),
-		el("main").append(
-			el("h2", "Using signals to manage reactivity"),
-			el("p").append(
-				"How a program responds to variable data or user",
-				" interactions is one of the fundamental problems of programming.",
-				" If we desire to solve the issue in a declarative manner,",
-				" signals may be a viable approach.",
-			),
-			el(example, { src: fileURL("./components/examples/signals/intro.js"), page_id }),
-			
-			el(h3, "Introducing signals"),
-			el("p").append(
-				"Using signals, we split program logic into the three parts.",
-				" Firstly (α), we create a variable (constant) representing reactive",
-				" value. Somewhere later, we can register (β) a logic reacting",
-				" to the signal value changes. Similarly, in a remaining part (γ), we",
-				" can update the signal value."
-			),
-			el("p").append(
-				"All this is just an example of ",
-				el("a", { textContent: "Event-driven programming", href: "https://en.wikipedia.org/wiki/Event-driven_programming", title: "Wikipedia: Event-driven programming" }),
-				" and ",
-				el("a", { textContent: "Publish–subscribe pattern", href: "https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern", title: "Wikipedia: Publish–subscribe pattern" }),
-				" (compare for example with ", el("a", { textContent: "fpubsub library", href: "https://www.npmjs.com/package/fpubsub", title: "NPM package: fpubsub" }), ").",
-				" All three parts can be in some manner independent and still connected",
-				" to the same reactive entity."
-			),
-			el("p").append(
-				"Signals are implemented in the library as functions. To see current value",
-				" of signal, just call it without any arguments ", el("code", "console.log(signal())"), ".",
-				" To update the signal value, pass any argument ", el("code", "signal('a new value')"), ".",
-				" For listenning the signal value changes, use ", el("code", "S.on(signal, console.log)"), "."
-			),
-			el("p").append(
-				"Similarly to the ", el("code", "on"), " function to register DOM events listener.",
-				" You can use ", el("code", "AbortController"), "/", el("code", "AbortSignal"), " to",
-				" ", el("em", "off"), "/stop listenning. For representing “live” piece of code computation pattern:"
-			),
-			el(example, { src: fileURL("./components/examples/signals/computations-abort.js"), page_id }),
-			el("div", { className: "notice" }).append(
-				el("p", "Mnemonic"),
-				el("ul").append(
-					el("li").append(
-						el("code", "S(<value>)"), " — signal: reactive value",
-					),
-					el("li").append(
-						el("code", "S(()=> <computation>)"), " — signal: reactive value dependent on calculation using other signals",
-					),
-					el("li").append(
-						el("code", "S.on(<signal>, <listener>[, <options>])"), " — listen to the signal value changes",
-					),
-					el("li").append(
-						el("code", "S.clear(...<signals>)"), " — off and clear signals",
-					),
-					el("li").append(
-						el("code", "S(<value>, <actions>)"), " — signal: pattern to create complex reactive objects/arrays",
-					),
-					el("li").append(
-						el("code", "S.action(<signal>, <action-name>, ...<action-arguments>)"), " — invoke an action for given signal"
-					)
-				)
-			),
-		)
-	);
-}

docs_src/ssr.js

@@ -6,7 +6,7 @@ export const pages= [
 	{ id: "index", href: "./", title: "Introduction", description: "Introducing a library." },
 	{ id: "p02-elements", href: "p02-elements", title: "Elements", description: "Basic concepts of elements modifications and creations." },
 	{ id: "p03-events", href: "p03-events", title: "Events and Addons", description: "Using not only events in UI declaratively." },
-	{ id: "p04-signals", href: "p04-signals", title: "Signals and reactivity", description: "Handling reactivity in UI via signals." },
+	{ id: "p04-observables", href: "p04-observables", title: "Observables and reactivity", description: "Handling reactivity in UI via observables." },
 ];
 /**
  * @typedef registerClientFile

docs_src/types.d.ts

@@ -25,4 +25,5 @@ declare global{
 	interface ddePublicElementTagNameMap{
 		["custom-test"]: CustomHTMLTestElement;
 	}
+	function test(): ddeHTMLParagraphElement
 }

examples/components/fullNameComponent.js

@@ -1,4 +1,4 @@
-import { style, el, elNS, on, S, scope } from '../exports.js';
+import { style, el, elNS, on, O, scope } from '../exports.js';
 const className= style.host(fullNameComponent).css`
 	:host form{
 		display: flex;
@@ -7,8 +7,8 @@ const className= style.host(fullNameComponent).css`
 `;
 export function fullNameComponent(){
 	const labels= [ "Name", "Surname" ];
-	const name= labels.map(_=> S(""));
+	const name= labels.map(_=> O(""));
-	const full_name= S(()=>
+	const full_name= O(()=>
 		name.map(l=> l()).filter(Boolean).join(" ") || "-");
 	scope.host(
 		on.connected(()=> console.log(fullNameComponent)),

examples/components/todosComponent.js

@@ -1,4 +1,4 @@
-import { style, el, dispatchEvent, on, S, scope } from '../exports.js';
+import { style, el, dispatchEvent, on, O, scope } from '../exports.js';
 const className= style.host(todosComponent).css`
 	:host{
 		display: flex;
@@ -16,23 +16,23 @@ const className= style.host(todosComponent).css`
 `;
 /** @param {{ todos: string[] }} */
 export function todosComponent({ todos= [ "Task A" ] }= {}){
-	const todosS= S(todos.map(t=> S(t)), {
+	const todosS= O(todos.map(t=> O(t)), {
-		add(v){ this.value.push(S(v)); },
+		add(v){ this.value.push(O(v)); },
-		remove(i){ S.clear(this.value.splice(i, 1)[0]); }
+		remove(i){ O.clear(this.value.splice(i, 1)[0]); }
 	});
 
 	const name= "todoName";
 	const onsubmitAdd= on("submit", event=> {
 		const el= event.target.elements[name];
 		event.preventDefault();
-		S.action(todosS, "add", el.value);
+		O.action(todosS, "add", el.value);
 		el.value= "";
 	});
 	const onremove= on("remove", event=>
-		S.action(todosS, "remove", event.detail));
+		O.action(todosS, "remove", event.detail));
 	
 	const ul_todos= el("ul").append(
-		S.el(todosS, ts=> ts
+		O.el(todosS, ts=> ts
 			.map((textContent, value)=>
 				el(todoComponent, { textContent, value, className }, onremove))
 	));
@@ -40,7 +40,7 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
 		el("div").append(
 			el("h2", "Todos:"),
 			el("h3", "List of todos:"),
-			S.el(todosS, ts=> !ts.length
+			O.el(todosS, ts=> !ts.length
 				? el("p", "No todos yet")
 				: ul_todos),
 			el("p", "Click to the text to edit it.")
@@ -54,7 +54,7 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
 		),
 		el("div").append(
 			el("h3", "Output (JSON):"),
-			el("output", S(()=> JSON.stringify(todosS, null, "\t")))
+			el("output", O(()=> JSON.stringify(todosS, null, "\t")))
 		)
 	)
 }
@@ -69,13 +69,13 @@ function todoComponent({ textContent, value }){
 		event.stopPropagation();
 		dispatchEvent("remove")(host(), value);
 	});
-	const is_editable= S(false);
+	const is_editable= O(false);
 	const onedited= on("change", ev=> {
 		textContent(ev.target.value);
 		is_editable(false);
 	});
 	return el("li").append(
-		S.el(is_editable, is=> is
+		O.el(is_editable, is=> is
 			? el("input", { value: textContent(), type: "text" }, onedited)
 			: el("span", { textContent, onclick: is_editable.bind(null, true) }),
 		),

examples/components/webComponent.js

@@ -1,5 +1,5 @@
 import { el, on, scope } from "../../index.js";
-import { S } from "../../signals.js";
+import { O } from "../../observables.js";
 
 /**
  * Compatible with `npx -y web-component-analyzer examples/components/webComponent.js`
@@ -24,8 +24,8 @@ export class CustomHTMLTestElement extends HTMLElement{
 			on.attributeChanged(e=> console.log(e)),
 			on.disconnected(()=> console.log(CustomHTMLTestElement))
 		);
-		const name= S.attribute("name");
+		const name= O.attribute("name");
-		const preName= S.attribute("pre-name");
+		const preName= O.attribute("pre-name");
 		
 		console.log({ name, test, preName});
 		return el("p").append(

examples/exports.js

@@ -1,10 +1,10 @@
 import * as dde_dom from "../index.js";
 export * from "../index.js";
-import * as dde_s from "../signals.js";
+import * as dde_s from "../observables.js";
-export * from "../signals.js";
+export * from "../observables.js";
 Object.assign(globalThis, dde_dom, dde_s);
-//import * as dde_dom from "../dist/esm-with-signals.js";
+//import * as dde_dom from "../dist/esm-with-observables.js";
-//export * from "../dist/esm-with-signals.js";
+//export * from "../dist/esm-with-observables.js";
 //Object.assign(globalThis, dde_dom);
 export const style= createStyle();
 

index-with-observables.d.ts

@@ -0,0 +1,2 @@
+export * from "./index";
+export * from "./observables";

index-with-observables.js

@@ -0,0 +1,2 @@
+export * from "./index.js";
+export * from "./observables.js";

index-with-signals.d.ts

@@ -1,2 +0,0 @@
-export * from "./index";
-export * from "./signals";

index-with-signals.js

@@ -1,2 +0,0 @@
-export * from "./index.js";
-export * from "./signals.js";

index.d.ts

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

observables.d.ts

@@ -0,0 +1,64 @@
+export type Observable<V, A>= (set?: V)=> V & A;
+type Action<V>= (this: { value: V }, ...a: any[])=> typeof observable._ | void;
+type SymbolOnclear= Symbol;
+type SymbolObservable= Symbol;
+type Actions<V>= Record<string, Action<V>>;
+interface observable{
+	_: Symbol
+	/**
+	 * Simple example:
+	 * ```js
+	 * const hello= S("Hello Observable");
+	 * ```
+	 * …simple todo observable:
+	 * ```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 observable:
+	 * ```js
+	 * const name= S("Jan");
+	 * const surname= S("Andrle");
+	 * const fullname= S(()=> name()+" "+surname());
+	 * ```
+	 * @param value Initial observable value. Or function computing value from other observables.
+	 * @param actions Use to define actions on the observable. Such as add item to the array.
+	 *		There is also a reserved function `S.symbol.onclear` which is called when the observable is cleared
+	 *		by `S.clear`.
+	 * */
+	<V, A extends Actions<V>>(value: V, actions?: A): Observable<V, A>;
+	/**
+	 * Computations observable. This creates a observable which is computed from other observables.
+	 * */
+	<V>(computation: ()=> V): Observable<V, {}>
+	action<S extends Observable<any, Actions<any>>, A extends (S extends Observable<any, infer A> ? A : never), N extends keyof A>(
+		observable: S,
+		name: N,
+		...params: A[N] extends (...args: infer P)=> any ? P : never
+	): void;
+	clear(...observables: Observable<any, any>[]): void;
+	on<T>(observable: Observable<T, any>, onchange: (a: T)=> void, options?: AddEventListenerOptions): void;
+	symbols: {
+		observable: SymbolObservable;
+		onclear: SymbolOnclear;
+	}
+	/**
+	 * Reactive element, which is rendered based on the given observable.
+	 * ```js
+	 * S.el(observable, value=> value ? el("b", "True") : el("i", "False"));
+	 * S.el(listS, list=> list.map(li=> el("li", li)));
+	 * ```
+	 * */
+	el<S extends any>(observable: Observable<S, any>, el: (v: S)=> Element | Element[]): DocumentFragment;
+
+    attribute(name: string, initial?: string): Observable<string, {}>;
+}
+export const observable: observable;
+export const O: observable;
+declare global {
+	type ddeObservable<T, A= {}>= Observable<T, A>;
+	type ddeActions<V>= Actions<V>
+}

observables.js

@@ -0,0 +1,4 @@
+export { observable, O, isObservable } from "./src/observables-lib.js";
+import { observables_config } from "./src/observables-lib.js";
+import { registerReactivity } from "./src/observables-common.js";
+registerReactivity(observables_config);

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.7.1",
+	"version": "0.7.2",
 	"description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.",
 	"author": "Jan Andrle <andrle.jan@centrum.cz>",
 	"license": "MIT",
@@ -24,13 +24,13 @@
 			"import": "./jsdom.js",
 			"types": "./jsdom.d.ts"
 		},
-		"./signals": {
+		"./observables": {
-			"import": "./signals.js",
+			"import": "./observables.js",
-			"types": "./signals.d.ts"
+			"types": "./observables.d.ts"
 		},
-		"./src/signals-lib": {
+		"./src/observables-lib": {
-			"import": "./src/signals-lib.js",
+			"import": "./src/observables-lib.js",
-			"types": "./src/signals.d.ts"
+			"types": "./src/observables.d.ts"
 		}
 	},
 	"files": [
@@ -58,11 +58,11 @@
 	"size-limit": [
 		{
 			"path": "./index.js",
-			"limit": "8.5 kB",
+			"limit": "9 kB",
 			"gzip": false
 		},
 		{
-			"path": "./signals.js",
+			"path": "./observables.js",
 			"limit": "11.5 kB",
 			"gzip": false
 		},

signals.d.ts

@@ -1,63 +0,0 @@
-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>;
-	/**
-	 * Computations signal. This creates a signal which is computed from other signals.
-	 * */
-	<V>(computation: ()=> V): Signal<V, {}>
-	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;
-	}
-	/**
-	 * Reactive element, which is rendered based on the given signal.
-	 * ```js
-	 * S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
-	 * S.el(listS, list=> list.map(li=> el("li", li)));
-	 * ```
-	 * */
-	el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[]): DocumentFragment;
-
-    attribute(name: string, initial?: string): Signal<string, {}>;
-}
-export const S: S;
-declare global {
-	type ddeSignal<T, A= {}>= Signal<T, A>;
-	type ddeActions<V>= Actions<V>
-}

signals.js

@@ -1,4 +0,0 @@
-export { S, isSignal } from "./src/signals-lib.js";
-import { signals_config } from "./src/signals-lib.js";
-import { registerReactivity } from "./src/signals-common.js";
-registerReactivity(signals_config);

src/dom.js

@@ -1,4 +1,4 @@
-import { signals } from "./signals-common.js";
+import { observables } from "./observables-common.js";
 import { enviroment } from './dom-common.js';
 
 /** @type {{ scope: object, prevent: boolean, host: function }[]} */
@@ -32,11 +32,11 @@ export function chainableAppend(el){ if(el.append===append) return el; el.append
 let namespace;
 export function createElement(tag, attributes, ...addons){
 	/* jshint maxcomplexity: 15 */
-	const s= signals(this);
+	const s= observables(this);
 	let scoped= 0;
 	let el, el_host;
 	//TODO Array.isArray(tag) ⇒ set key (cache els)
-	if(Object(attributes)!==attributes || s.isSignal(attributes))
+	if(Object(attributes)!==attributes || s.isObservable(attributes))
 		attributes= { textContent: attributes };
 	switch(true){
 		case typeof tag==="function": {
@@ -66,6 +66,37 @@ export function createElement(tag, attributes, ...addons){
 	scoped= 2;
 	return el;
 }
+/** @param {HTMLElement} element */
+export function simulateSlots(element){
+	const _default= Symbol.for("default");
+	const slots= Array.from(element.querySelectorAll("slot"))
+		.reduce((out, curr)=> Reflect.set(out, curr.name || _default, curr) && out, {});
+	const has_d= Reflect.has(slots, _default);
+	element.append= new Proxy(element.append, {
+		apply(_1, _2, els){
+			if(!els.length) return element;
+
+			const d= document.createDocumentFragment();
+			for(const el of els){
+				if(!el || !el.slot){ if(has_d) d.appendChild(el); continue; }
+				const name= el.slot;
+				const slot= slots[name];
+				elementAttribute(el, "remove", "slot");
+				if(!slot) continue;
+				slot.replaceWith(el);
+				Reflect.deleteProperty(slots, name);
+			}
+			if(has_d){
+				slots[_default].replaceWith(d);
+				Reflect.deleteProperty(slots, _default);
+			}
+			Object.values(slots)
+				.forEach(slot=> slot.replaceWith(createElement().append(...Array.from(slot.childNodes))));
+			return element;
+		}
+	});
+	return element;
+}
 /**
  * @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs
  * @param {boolean} [is_open=false]
@@ -137,11 +168,11 @@ function assignContext(element, _this){
 	if(assign_context.has(element)) return assign_context.get(element);
 	const is_svg= element instanceof SVGElement;
 	const setRemoveAttr= (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
-	const s= signals(_this);
+	const s= observables(_this);
 	return { setRemoveAttr, s };
 }
 export function classListDeclarative(element, toggle){
-	const s= signals(this);
+	const s= observables(this);
 	forEachEntries(s, toggle,
 		(class_name, val)=>
 			element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val)));

src/events.js

@@ -1,4 +1,4 @@
-export { registerReactivity } from './signals-common.js';
+export { registerReactivity } from './observables-common.js';
 
 export function dispatchEvent(name, options, host){
 	if(!options) options= {};

src/observables-common.js

@@ -0,0 +1,13 @@
+export const observables_global= {
+	isObservable(attributes){ return false; },
+	processReactiveAttribute(obj, key, attr, set){ return attr; },
+};
+export function registerReactivity(def, global= true){
+	if(global) return Object.assign(observables_global, def);
+	Object.setPrototypeOf(def, observables_global);
+	return def;
+}
+/** @param {unknown} _this @returns {typeof observables_global} */
+export function observables(_this){
+	return observables_global.isPrototypeOf(_this) && _this!==observables_global ? _this : observables_global;
+}

src/observables-lib.js

@@ -1,25 +1,25 @@
-export const mark= Symbol.for("Signal");
+export const mark= Symbol.for("observable");
 
-export function isSignal(candidate){
+export function isObservable(candidate){
 	try{ return Reflect.has(candidate, mark); }
 	catch(e){ return false; }
 }
 /** @type {function[]} */
 const stack_watch= [];
 /**
- * ### `WeakMap<function, Set<ddeSignal<any, any>>>`
+ * ### `WeakMap<function, Set<ddeObservable<any, any>>>`
- * The `Set` is in the form of `[ source, ...depended signals (DSs) ]`.
+ * The `Set` is in the form of `[ source, ...depended observables (DSs) ]`.
  * When the DS is cleaned (`S.clear`) it is removed from DSs,
  * if remains only one (`source`) it is cleared too.
  * ### `WeakMap<object, function>`
  * This is used for revesed deps, the `function` is also key for `deps`.
- * @type {WeakMap<function|object,Set<ddeSignal<any, any>>|function>}
+ * @type {WeakMap<function|object,Set<ddeObservable<any, any>>|function>}
  * */
 const deps= new WeakMap();
-export function S(value, actions){
+export function observable(value, actions){
 	if(typeof value!=="function")
 		return create(value, actions);
-	if(isSignal(value)) return value;
+	if(isObservable(value)) return value;
 	
 	const out= create();
 	const contextReWatch= function(){
@@ -32,9 +32,9 @@ export function S(value, actions){
 
 		if(!deps_old.length) return;
 		const deps_curr= deps.get(contextReWatch);
-		for (const dep_signal of deps_old){
+		for (const dep_observable of deps_old){
-			if(deps_curr.has(dep_signal)) continue;
+			if(deps_curr.has(dep_observable)) continue;
-			removeSignalListener(dep_signal, contextReWatch);
+			removeObservableListener(dep_observable, contextReWatch);
 		}
 	};
 	deps.set(out[mark], contextReWatch);
@@ -42,44 +42,45 @@ export function S(value, actions){
 	contextReWatch();
 	return out;
 }
-S.action= function(signal, name, ...a){
+export { observable as O };
-	const s= signal[mark], { actions }= s;
+observable.action= function(o, name, ...a){
+	const s= o[mark], { actions }= s;
 	if(!actions || !Reflect.has(actions, name))
-		throw new Error(`'${signal}' has no action with name '${name}'!`);
+		throw new Error(`'${o}' has no action with name '${name}'!`);
 	actions[name].apply(s, a);
 	if(s.skip) return Reflect.deleteProperty(s, "skip");
 	s.listeners.forEach(l=> l(s.value));
 };
-S.on= function on(signals, listener, options= {}){
+observable.on= function on(o, listener, options= {}){
 	const { signal: as }= options;
 	if(as && as.aborted) return;
-	if(Array.isArray(signals)) return signals.forEach(s=> on(s, listener, options));
+	if(Array.isArray(o)) return o.forEach(s=> on(s, listener, options));
-	addSignalListener(signals, listener);
+	addObservableListener(o, listener);
-	if(as) as.addEventListener("abort", ()=> removeSignalListener(signals, listener));
+	if(as) as.addEventListener("abort", ()=> removeObservableListener(o, listener));
-	//TODO cleanup when signal removed
+	//TODO cleanup when observable removed
 };
-S.symbols= {
+observable.symbols= {
-	signal: mark,
+	observable: mark,
-	onclear: Symbol.for("Signal.onclear")
+	onclear: Symbol.for("Observable.onclear")
 };
-S.clear= function(...signals){
+observable.clear= function(...observables){
-	for(const signal of signals){
+	for(const o of observables){
-		Reflect.deleteProperty(signal, "toJSON");
+		Reflect.deleteProperty(o, "toJSON");
-		const s= signal[mark];
+		const s= o[mark];
 		s.onclear.forEach(f=> f.call(s));
-		clearListDeps(signal, s);
+		clearListDeps(o, s);
-		Reflect.deleteProperty(signal, mark);
+		Reflect.deleteProperty(o, mark);
 	}
-	function clearListDeps(signal, s){
+	function clearListDeps(o, s){
 		s.listeners.forEach(l=> {
 			s.listeners.delete(l);
 			if(!deps.has(l)) return;
 			
 			const ls= deps.get(l);
-			ls.delete(signal);
+			ls.delete(o);
 			if(ls.size>1) return;
 			
-			S.clear(...ls);
+			o.clear(...ls);
 			deps.delete(l);
 		});
 	}
@@ -87,7 +88,7 @@ S.clear= function(...signals){
 const key_reactive= "__dde_reactive";
 import { el, elementAttribute } from "./dom.js";
 import { scope } from "./dom.js";
-S.el= function(signal, map){
+observable.el= function(o, map){
 	const mark_start= el.mark({ type: "reactive" }, false);
 	const mark_end= mark_start.end;
 	const out= document.createDocumentFragment();
@@ -95,7 +96,7 @@ S.el= function(signal, map){
 	const { current }= scope;
 	const reRenderReactiveElement= v=> {
 		if(!mark_start.parentNode || !mark_end.parentNode)
-			return removeSignalListener(signal, reRenderReactiveElement);
+			return removeObservableListener(o, reRenderReactiveElement);
 		scope.push(current);
 		let els= map(v);
 		scope.pop();
@@ -106,16 +107,16 @@ S.el= function(signal, map){
 			el_r.remove();
 		mark_start.after(...els);
 	};
-	addSignalListener(signal, reRenderReactiveElement);
+	addObservableListener(o, reRenderReactiveElement);
-	removeSignalsFromElements(signal, reRenderReactiveElement, mark_start, map);
+	removeObservablesFromElements(o, reRenderReactiveElement, mark_start, map);
-	reRenderReactiveElement(signal());
+	reRenderReactiveElement(o());
 	return out;
 };
 import { on } from "./events.js";
 const key_attributes= "__dde_attributes";
-S.attribute= function(name, initial= null){
+observable.attribute= function(name, initial= null){
 	//TODO host=element & reuse existing
-	const out= S(initial);
+	const out= observable(initial);
 	let element;
 	scope.host(el=> {
 		element= el;
@@ -127,17 +128,17 @@ S.attribute= function(name, initial= null){
 			return;
 		}
 		element[key_attributes]= { [name]: out };
-		on.attributeChanged(function attributeChangeToSignal({ detail }){
+		on.attributeChanged(function attributeChangeToObservable({ detail }){
-			/*! This maps attributes to signals (`S.attribute`).
+			/*! This maps attributes to observables (`S.attribute`).
 			 * Investigate `__dde_attributes` key of the element.*/
 			const [ name, value ]= detail;
 			const curr= element[key_attributes][name];
 			if(curr) return curr(value);
 		})(element);
 		on.disconnected(function(){
-			/*! This removes all signals mapped to attributes (`S.attribute`).
+			/*! This removes all observables mapped to attributes (`S.attribute`).
 			 * Investigate `__dde_attributes` key of the element.*/
-			S.clear(...Object.values(element[key_attributes]));
+			observable.clear(...Object.values(element[key_attributes]));
 		})(element);
 	});
 	return new Proxy(out, {
@@ -150,17 +151,17 @@ S.attribute= function(name, initial= null){
 };
 
 import { typeOf } from './helpers.js';
-export const signals_config= {
+export const observables_config= {
-	isSignal,
+	isObservable,
 	processReactiveAttribute(element, key, attrs, set){
-		if(!isSignal(attrs)) return attrs;
+		if(!isObservable(attrs)) return attrs;
 		const l= attr=> set(key, attr);
-		addSignalListener(attrs, l);
+		addObservableListener(attrs, l);
-		removeSignalsFromElements(attrs, l, element, key);
+		removeObservablesFromElements(attrs, l, element, key);
 		return attrs();
 	}
 };
-function removeSignalsFromElements(signal, listener, ...notes){
+function removeObservablesFromElements(o, listener, ...notes){
 	const { current }= scope;
 	if(current.prevent) return;
 	current.host(function(element){
@@ -168,28 +169,28 @@ function removeSignalsFromElements(signal, listener, ...notes){
 			element[key_reactive]= [];
 			on.disconnected(()=>
 				/*!
-				 * Clears all signals listeners added in the current scope/host (`S.el`, `assign`, …?).
+				 * Clears all Observables listeners added in the current scope/host (`S.el`, `assign`, …?).
 				 * You can investigate the `__dde_reactive` key of the element.
 				 * */
-				element[key_reactive].forEach(([ [ signal, listener ] ])=>
+				element[key_reactive].forEach(([ [ o, listener ] ])=>
-					removeSignalListener(signal, listener, signal[mark]?.host() === element))
+					removeObservableListener(o, listener, o[mark]?.host() === element))
 			)(element);
 		}
-		element[key_reactive].push([ [ signal, listener ], ...notes ]);
+		element[key_reactive].push([ [ o, listener ], ...notes ]);
 	});
 }
 
 function create(value, actions){
-	const signal=  (...value)=>
+	const o=  (...value)=>
-		value.length ? write(signal, ...value) : read(signal);
+		value.length ? write(o, ...value) : read(o);
-	return toSignal(signal, value, actions);
+	return toObservable(o, value, actions);
 }
 const protoSigal= Object.assign(Object.create(null), {
 	stopPropagation(){
 		this.skip= true;
 	}
 });
-class SignalDefined extends Error{
+class ObservableDefined extends Error{
 	constructor(){
 		super();
 		const [ curr, ...rest ]= this.stack.split("\n");
@@ -197,64 +198,64 @@ class SignalDefined extends Error{
 		this.stack= rest.find(l=> !l.includes(curr_file));
 	}
 }
-function toSignal(signal, value, actions){
+function toObservable(o, value, actions){
 	const onclear= [];
 	if(typeOf(actions)!=="[object Object]")
 		actions= {};
-	const { onclear: ocs }= S.symbols;
+	const { onclear: ocs }= observable.symbols;
 	if(actions[ocs]){
 		onclear.push(actions[ocs]);
 		Reflect.deleteProperty(actions, ocs);
 	}
 	const { host }= scope;
-	Reflect.defineProperty(signal, mark, {
+	Reflect.defineProperty(o, mark, {
 		value: {
 			value, actions, onclear, host,
 			listeners: new Set(),
-			defined: new SignalDefined()
+			defined: new ObservableDefined()
 		},
 		enumerable: false,
 		writable: false,
 		configurable: true
 	});
-	signal.toJSON= ()=> signal();
+	o.toJSON= ()=> o();
-	Object.setPrototypeOf(signal[mark], protoSigal);
+	Object.setPrototypeOf(o[mark], protoSigal);
-	return signal;
+	return o;
 }
 function currentContext(){
 	return stack_watch[stack_watch.length - 1];
 }
-function read(signal){
+function read(o){
-	if(!signal[mark]) return;
+	if(!o[mark]) return;
-	const { value, listeners }= signal[mark];
+	const { value, listeners }= o[mark];
 	const context= currentContext();
 	if(context) listeners.add(context);
-	if(deps.has(context)) deps.get(context).add(signal);
+	if(deps.has(context)) deps.get(context).add(o);
 	return value;
 }
-function write(signal, value, force){
+function write(o, value, force){
-	if(!signal[mark]) return;
+	if(!o[mark]) return;
-	const s= signal[mark];
+	const s= o[mark];
 	if(!force && s.value===value) return;
 	s.value= value;
 	s.listeners.forEach(l=> l(value));
 	return value;
 }
 
-function addSignalListener(signal, listener){
+function addObservableListener(o, listener){
-	if(!signal[mark]) return;
+	if(!o[mark]) return;
-	return signal[mark].listeners.add(listener);
+	return o[mark].listeners.add(listener);
 }
-function removeSignalListener(signal, listener, clear_when_empty){
+function removeObservableListener(o, listener, clear_when_empty){
-	const s= signal[mark];
+	const s= o[mark];
 	if(!s) return;
 	const out= s.listeners.delete(listener);
 	if(clear_when_empty && !s.listeners.size){
-		S.clear(signal);
+		o.clear(o);
 		if(!deps.has(s)) return out;
 		const c= deps.get(s);
 		if(!deps.has(c)) return out;
-		deps.get(c).forEach(sig=> removeSignalListener(sig, c, true));
+		deps.get(c).forEach(sig=> removeObservableListener(sig, c, true));
 	}
 	return out;
 }

src/signals-common.js

@@ -1,13 +0,0 @@
-export const signals_global= {
-	isSignal(attributes){ return false; },
-	processReactiveAttribute(obj, key, attr, set){ return attr; },
-};
-export function registerReactivity(def, global= true){
-	if(global) return Object.assign(signals_global, def);
-	Object.setPrototypeOf(def, signals_global);
-	return def;
-}
-/** @param {unknown} _this @returns {typeof signals_global} */
-export function signals(_this){
-	return signals_global.isPrototypeOf(_this) && _this!==signals_global ? _this : signals_global;
-}