From 091546aaab98b7a1da9fa50763c1356a04d691e4 Mon Sep 17 00:00:00 2001
From: Jan Andrle <andrle.jan@centrum.cz>
Date: Fri, 13 Dec 2024 15:49:54 +0100
Subject: [PATCH] :abc: introduction example (#24)

---
 .../examples/introducing/motivation.js        | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 docs/components/examples/introducing/motivation.js

diff --git a/docs/components/examples/introducing/motivation.js b/docs/components/examples/introducing/motivation.js
new file mode 100644
index 0000000..e476f35
--- /dev/null
+++ b/docs/components/examples/introducing/motivation.js
@@ -0,0 +1,36 @@
+import { el, on } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+document.body.append(
+	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 })
+}