⚡ Refact docs and examples (linting) (#22)

docs/components/code.html.js

@@ -51,9 +51,9 @@ let is_registered= {};
 /** @param {string} page_id */
 function registerClientPart(page_id){
 	if(is_registered[page_id]) return;
-	
+
 	document.head.append(
-		 el("script", { src: "https://cdn.jsdelivr.net/npm/shiki@0.9", defer: true }),
+		el("script", { src: "https://cdn.jsdelivr.net/npm/shiki@0.9", defer: true }),
 	);
 	registerClientFile(
 		new URL("./code.js.js", import.meta.url),

docs/components/example.html.js

@@ -47,7 +47,7 @@ let is_registered= {};
 /** @param {string} page_id */
 function registerClientPart(page_id){
 	if(is_registered[page_id]) return;
-	
+
 	document.head.append(
 		el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }),
 	);
@@ -64,5 +64,5 @@ function generateCodeId(src){
 		.replace(/000+/g, "");
 	const count= 1 + ( store_prev.get(candidate) || 0 );
 	store_prev.set(candidate, count);
-	return count.toString()+"-"+candidate; 
+	return count.toString()+"-"+candidate;
 }

docs/components/examples/customElement/dde.js

@@ -7,7 +7,6 @@ export class HTMLCustomElement extends HTMLElement{
 	static observedAttributes= [ "attr" ];
 	connectedCallback(){
 		customElementRender(
-			this,
 			this.attachShadow({ mode: "open" }),
 			ddeComponent
 		);

docs/components/examples/customElement/observedAttributes.js

@@ -2,7 +2,7 @@ import {
 	customElementRender,
 	customElementWithDDE,
 	observedAttributes,
-	el, on, scope 
+	el, on, scope,
 } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
 export class HTMLCustomElement extends HTMLElement{
@@ -11,7 +11,6 @@ export class HTMLCustomElement extends HTMLElement{
 	connectedCallback(){
 		console.log(observedAttributes(this));
 		customElementRender(
-			this,
 			this.attachShadow({ mode: "open" }),
 			ddeComponent,
 			S.observedAttributes
@@ -24,7 +23,7 @@ export class HTMLCustomElement extends HTMLElement{
 /** @param {{ attr: ddeSignal<string, {}> }} props */
 function ddeComponent({ attr }){
 	scope.host(
-		on.connected(e=> console.log(e.target.outerHTML)),
+		on.connected(e=> console.log(( /** @type {HTMLParagraphElement} */ (e.target)).outerHTML)),
 	);
 	return el().append(
 		el("p", S(()=> `Hello from Custom Element with attribute '${attr()}'`))

docs/components/examples/customElement/shadowRoot.js

@@ -17,11 +17,7 @@ function ddeComponent(){
 export class A extends HTMLElement{
 	static tagName= "custom-element-without";
 	connectedCallback(){
-		customElementRender(
-			this,
-			this,
-			ddeComponent
-		);
+		customElementRender(this, ddeComponent);
 	}
 }
 customElementWithDDE(A);
@@ -30,7 +26,6 @@ export class B extends HTMLElement{
 	static tagName= "custom-element-open";
 	connectedCallback(){
 		customElementRender(
-			this,
 			this.attachShadow({ mode: "open" }),
 			ddeComponent
 		);
@@ -42,7 +37,6 @@ export class C extends HTMLElement{
 	static tagName= "custom-element-closed";
 	connectedCallback(){
 		customElementRender(
-			this,
 			this.attachShadow({ mode: "closed" }),
 			ddeComponent
 		);

docs/components/examples/customElement/simulateSlots.js

@@ -8,7 +8,7 @@ export class HTMLCustomElement extends HTMLElement{
 	static tagName= "custom-slotting";
 	connectedCallback(){
 		const c= ()=> simulateSlots(this, ddeComponent());
-		customElementRender(this, this, c);
+		customElementRender(this, c);
 	}
 }
 customElementWithDDE(HTMLCustomElement);

docs/components/examples/elements/dekaBasicComponent.js

@@ -11,7 +11,7 @@ document.body.append(
 );
 
 function component({ className, textContent }){
-	return el("div", { className: [ "class1", className ] }).append(
+	return el("div", { className: [ "class1", className ].join(" ") }).append(
 		el("p", textContent)
 	);
 }

docs/components/examples/elements/dekaElNS.js

@@ -2,8 +2,8 @@ import { elNS, assign } from "deka-dom-el";
 const elSVG= elNS("http://www.w3.org/2000/svg");
 const elMath= elNS("http://www.w3.org/1998/Math/MathML");
 document.body.append(
-	elSVG("svg"), // see https://developer.mozilla.org/en-US/docs/Web/SVG and https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
-	elMath("math") // see https://developer.mozilla.org/en-US/docs/Web/MathML and https://developer.mozilla.org/en-US/docs/Web/MathML/Global_attributes
+	elSVG("svg"), // see https://developer.mozilla.org/en-US/docs/Web/SVG and https://developer.mozilla.org/en-US/docs/Web/API/SVGElement // editorconfig-checker-disable-line
+	elMath("math") // see https://developer.mozilla.org/en-US/docs/Web/MathML and https://developer.mozilla.org/en-US/docs/Web/MathML/Global_attributes // editorconfig-checker-disable-line
 );
 
 console.log(

docs/components/examples/introducing/helloWorld.js

@@ -1,15 +1,36 @@
-import { el } from "deka-dom-el";
+import { el, on } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
-const clicks= S(0); // A
 document.body.append(
-	el().append(
-		el("p", S(()=>
-			"Hello World "+"🎉".repeat(clicks()) // B
-		)),
-		el("button", {
-			type: "button",
-			onclick: ()=> clicks(clicks()+1), // C
-			textContent: "Fire",
-		})
-	)
+	el(HelloWorldComponent, { initial: "🚀" })
 );
+/** @typedef {"🎉" | "🚀"} Emoji */
+/** @param {{ initial: Emoji }} attrs */
+function HelloWorldComponent({ initial }){
+	const clicks= S(0);
+	const emoji= S(initial);
+	/** @param {HTMLOptionElement} el */
+	const isSelected= el=> (el.selected= el.value===initial);
+	// @ts-expect-error 2339: The <select> has only two options with {@link Emoji}
+	const onChange= on("change", event=> emoji(event.target.value));
+
+	return el().append(
+		el("p", {
+			textContent: S(() => `Hello World ${emoji().repeat(clicks())}`),
+			className: "example",
+			ariaLive: "polite", //OR ariaset: { live: "polite" },
+			dataset: { example: "Example" }, //OR dataExample: "Example",
+		}),
+		el("button",
+			{ textContent: "Fire", type: "button" },
+			on("click", ()=> clicks(clicks() + 1)),
+			on("keyup", ()=> clicks(clicks() - 2)),
+		),
+		el("select", null, onChange).append(
+			el(OptionComponent, "🎉", isSelected),//OR { textContent: "🎉" }
+			el(OptionComponent, "🚀", isSelected),//OR { textContent: "🚀" }
+		)
+	);
+}
+function OptionComponent({ textContent }){
+	return el("option", { value: textContent, textContent })
+}

docs/components/examples/scopes/class-component.js

@@ -36,7 +36,7 @@ function elClass(_class, attributes, ...addons){
 	});
 	element.prepend(el_mark);
 	if(is_fragment) element_host= el_mark;
-	
+
 	chainableAppend(element);
 	addons.forEach(c=> c(element_host));
 	scope.pop();

docs/components/examples/scopes/cleaning.js

@@ -1,4 +1,6 @@
-import { el, empty, on } from "deka-dom-el";
+import { el, on } from "deka-dom-el";
+/** @param {HTMLElement} el */
+const empty= el=> Array.from(el.children).forEach(c=> c.remove());
 document.body.append(
 	el(component),
 	el("button", {

docs/components/examples/scopes/imperative.js

@@ -23,7 +23,7 @@ function component(){
 	 *	const data= O("data");
 	 *	ul.append(el("li", data));
 	 * });
-	 * 
+	 *
 	 * // THE HOST IS PROBABLY DIFFERENT THAN
 	 * // YOU EXPECT AND OBSERVABLES MAY BE
 	 * // UNEXPECTEDLY REMOVED!!!

docs/components/examples/signals/dom-attrs.js

@@ -4,7 +4,7 @@ const count= S(0);
 import { el } from "deka-dom-el";
 document.body.append(
 	el("p", S(()=> "Currently: "+count())),
-	el("p", { classList: { red: S(()=> count()%2) }, dataset: { count }, textContent: "Attributes example" })
+	el("p", { classList: { red: S(()=> count()%2 === 0) }, dataset: { count }, textContent: "Attributes example" }),
 );
 document.head.append(
 	el("style", ".red { color: red; }")

docs/components/mnemonic/customElement-init.js

@@ -4,25 +4,32 @@ import { mnemonicUl } from "../mnemonicUl.html.js";
 export function mnemonic(){
 	return mnemonicUl().append(
 		el("li").append(
-			el("code", "customElementRender(<custom-element>, <connect-target>, <render-function>[, <properties>])"), " — use function to render DOM structure for given <custom-element>",
+			el("code", "customElementRender(<connect-target>, <render-function>[, <properties>])"),
+			" — use function to render DOM structure for given custom element (or its Shadow DOM)",
 		),
 		el("li").append(
-			el("code", "customElementWithDDE(<custom-element>)"), " — register <custom-element> to DDE library, see also `lifecyclesToEvents`, can be also used as decorator",
+			el("code", "customElementWithDDE(<custom-element>)"),
+			" — register <custom-element> to DDE library, see also `lifecyclesToEvents`, can be also used as decorator",
 		),
 		el("li").append(
-			el("code", "observedAttributes(<custom-element>)"), " — returns record of observed attributes (keys uses camelCase)",
+			el("code", "observedAttributes(<custom-element>)"),
+			" — returns record of observed attributes (keys uses camelCase)",
 		),
 		el("li").append(
-			el("code", "S.observedAttributes(<custom-element>)"), " — returns record of observed attributes (keys uses camelCase and values are signals)",
+			el("code", "S.observedAttributes(<custom-element>)"),
+			" — returns record of observed attributes (keys uses camelCase and values are signals)",
 		),
 		el("li").append(
-			el("code", "lifecyclesToEvents(<class-declaration>)"), " — convert lifecycle methods to events, can be also used as decorator",
+			el("code", "lifecyclesToEvents(<class-declaration>)"),
+			" — convert lifecycle methods to events, can be also used as decorator",
 		),
 		el("li").append(
-			el("code", "simulateSlots(<class-instance>, <body>[, <mapper>])"), " — simulate slots for Custom Elements without shadow DOM",
+			el("code", "simulateSlots(<class-instance>, <body>)"),
+			" — simulate slots for Custom Elements without shadow DOM",
 		),
 		el("li").append(
-			el("code", "simulateSlots(<dde-component>[, <mapper>])"), " — simulate slots for “dde”/functional components",
+			el("code", "simulateSlots(<dde-component>[, <mapper>])"),
+			" — simulate slots for “dde”/functional components",
 		),
 	);
 }

docs/components/mnemonic/elements-init.js

@@ -4,22 +4,28 @@ import { mnemonicUl } from "../mnemonicUl.html.js";
 export function mnemonic(){
 	return mnemonicUl().append(
 		el("li").append(
-			el("code", "assign(<element>, ...<idl-objects>): <element>"), " — assign properties to the element",
+			el("code", "assign(<element>, ...<objects>): <element>"),
+			" — assign properties (prefered, or attributes) to the element",
 		),
 		el("li").append(
-			el("code", "el(<tag-name>, <primitive>)[.append(...)]: <element-from-tag-name>"), " — simple element containing only text",
+			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("code", "el(<tag-name>, <object>)[.append(...)]: <element-from-tag-name>"),
+			" — element with more properties (prefered, or attributes)",
 		),
 		el("li").append(
-			el("code", "el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function>"), " — using component represented by function",
+			el("code", "el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function>"),
+			" — using component represented by function (must accept object like for <tag-name>)",
 		),
 		el("li").append(
-			el("code", "el(<...>, <...>, ...<addons>)"), " — see following page"
+			el("code", "el(<...>, <...>, ...<addons>)"),
+			" — see following section of documentation",
 		),
 		el("li").append(
-			el("code", "elNS(<namespace>)(<as-el-see-above>)[.append(...)]: <element-based-on-arguments>"), " — typically SVG elements",
+			el("code", "elNS(<namespace>)(<as-el-see-above>)[.append(...)]: <element-based-on-arguments>"),
+			" — typically SVG elements",
 		)
 	);
 }

docs/components/mnemonic/events-init.js

@@ -4,17 +4,21 @@ import { mnemonicUl } from "../mnemonicUl.html.js";
 export function mnemonic(){
 	return mnemonicUl().append(
 		el("li").append(
-			el("code", "on(<event>, <listener>[, <options>])(<element>)"), " — just ", el("code", "<element>.addEventListener(<event>, <listener>[, <options>])")
+			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(...){...}"),
+			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("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> }))")
+			el("code", "dispatchEvent(<event>[, <options>])(element, detail)"),
+			" — just ", el("code", "<element>.dispatchEvent(new CustomEvent(<event>, { detail, ...<options> }))")
 		),
 	);
 }

docs/components/mnemonic/scopes-init.js

@@ -4,13 +4,16 @@ import { mnemonicUl } from "../mnemonicUl.html.js";
 export function mnemonic(){
 	return mnemonicUl().append(
 		el("li").append(
-			el("code", "el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function>"), " — using component represented by function",
+			el("code", "el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function>"),
+			" — using component represented by function",
 		),
 		el("li").append(
-			el("code", "scope.host()"), " — get current component reference"
+			el("code", "scope.host()"),
+			" — get current component reference"
 		),
 		el("li").append(
-			el("code", "scope.host(...<addons>)"), " — use addons to current component",
+			el("code", "scope.host(...<addons>)"),
+			" — use addons to current component",
 		)
 	);
 }

docs/components/mnemonic/signals-init.js

@@ -7,22 +7,28 @@ export function mnemonic(){
 			el("code", "S(<value>)"), " — signal: reactive value",
 		),
 		el("li").append(
-			el("code", "S(()=> <computation>)"), " — read-only signal: reactive value dependent on calculation using other signals",
+			el("code", "S(()=> <computation>)"),
+			" — read-only 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("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("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("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"
+			el("code", "S.action(<signal>, <action-name>, ...<action-arguments>)"),
+			" — invoke an action for given signal"
 		),
 		el("li").append(
-			el("code", "S.el(<signal>, <function-returning-dom>)"), " — render partial dom structure (template) based on the current signal value",
+			el("code", "S.el(<signal>, <function-returning-dom>)"),
+			" — render partial dom structure (template) based on the current signal value",
 		)
 	);
 }