✏️ docs (🔨 examples, 🚧 events)

docs_src/components/example.html.js

@@ -24,7 +24,7 @@ import { code } from "./code.html.js";
 export function example({ src, language= "js", page_id }){
 	registerClientPart(page_id);
 	const content= s.cat(src).toString()
-		.replaceAll(' from "../../../index-with-signals.js";', ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";');
+		.replaceAll(/ from "deka-dom-el(\/signals)?";/g, ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";');
 	const id= "code-"+Math.random().toString(36).slice(2, 7);
 	return el().append(
 		el(code, { id, content, language, className: example.name }),

docs_src/components/examples/elements/dekaAppend.js

@@ -1,4 +1,4 @@
-import { el } from "../../../index-with-signals.js";
+import { el } from "deka-dom-el";
 document.head.append(
 	el("style").append(
 		"tr, td{ border: 1px solid red; padding: 1em; }",

docs_src/components/examples/elements/dekaAssign.js

@@ -1,4 +1,4 @@
-import { assignAttribute, classListDeclarative } from "../../../index-with-signals.js";
+import { assignAttribute, classListDeclarative } from "deka-dom-el";
 const paragraph= document.createElement("p");
 
 assignAttribute(paragraph, "textContent", "Hello, world!");

docs_src/components/examples/elements/dekaBasicComponent.js

@@ -1,4 +1,4 @@
-import { el } from "../../../index-with-signals.js";
+import { el } from "deka-dom-el";
 document.head.append(
 	el("style").append(
 		".class1{ font-weight: bold; }",

docs_src/components/examples/elements/dekaCreateElement.js

@@ -1,4 +1,4 @@
-import { el, assign } from "../../../index-with-signals.js";
+import { el, assign } from "deka-dom-el";
 const color= "lightcoral";
 document.body.append(
 	el("p", { textContent: "Hello (first time)", style: { color } })

docs_src/components/examples/elements/dekaElNS.js

@@ -1,4 +1,4 @@
-import { elNS, assign } from "../../../index-with-signals.js";
+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(

docs_src/components/examples/events/abortSignal.js

@@ -0,0 +1,13 @@
+import { el, on } from "deka-dom-el";
+const log= mark=> console.log.bind(console, mark);
+
+const abort_controller= new AbortController();
+const { signal }= abort_controller;
+
+const button= el("button", "Test click");
+button.addEventListener("click", log("`addEventListener`"), { signal });
+on("click", log("`on`"), { signal })(button);
+
+document.body.append(
+	button, " ", el("button", { textContent: "Off", onclick: ()=> abort_controller.abort() })
+);

docs_src/components/examples/events/compare.js

@@ -0,0 +1,10 @@
+import { el, on } from "deka-dom-el";
+const log= mark=> console.log.bind(console, mark);
+
+const button= el("button", "Test click");
+button.addEventListener("click", log("`addEventListener`"), { once: true });
+on("click", log("`on`"), { once: true })(button);
+
+document.body.append(
+	button
+);

docs_src/components/examples/events/templateWithListeners.js

@@ -0,0 +1,24 @@
+import { el, on } from "deka-dom-el";
+const abort_controller= new AbortController();
+const { signal }= abort_controller;
+/** @type {ddeElementModifier<HTMLButtonElement>} */
+const onclickOff= on("click", ()=> abort_controller.abort(), { signal });
+/** @type {(ref?: HTMLOutputElement)=> HTMLOutputElement | null} */
+const ref= (store=> ref=> ref ? (store= ref) : store)(null);
+
+document.body.append(
+	el("button", "Test `on`",
+		on("click", console.log, { signal }),
+		on("click", update, { signal }),
+		on("mouseup", update, { signal })),
+	" ",
+	el("button", "Off", onclickOff),
+	el("output", { style: { display: "block", whiteSpace: "pre" } }, ref)
+);
+/** @param {MouseEvent} event @this {HTMLButtonElement} */
+function update(event){
+	ref().append(
+		event.type,
+		"\n"
+	);
+}

docs_src/components/examples/helloWorld.js

@@ -1,4 +1,5 @@
-import { el, S } from "../../../index-with-signals.js";
+import { el } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
 const clicks= S(0);
 document.body.append(
 	el().append(