From c391c6549bdc54951222be15522242a1b8fb2e06 Mon Sep 17 00:00:00 2001
From: Jan Andrle <andrle.jan@centrum.cz>
Date: Fri, 13 Dec 2024 15:52:24 +0100
Subject: [PATCH] :zap: :abc: original helloWorld

---
 .../examples/introducing/helloWorld.js        | 45 +++++--------------
 1 file changed, 12 insertions(+), 33 deletions(-)

diff --git a/docs/components/examples/introducing/helloWorld.js b/docs/components/examples/introducing/helloWorld.js
index e476f35..47c0fe9 100644
--- a/docs/components/examples/introducing/helloWorld.js
+++ b/docs/components/examples/introducing/helloWorld.js
@@ -1,36 +1,15 @@
-import { el, on } from "deka-dom-el";
+import { el } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
+const clicks= S(0); // A
 document.body.append(
-	el(HelloWorldComponent, { initial: "🚀" })
+	el().append(
+		el("p", S(()=>
+			"Hello World "+"🎉".repeat(clicks()) // B
+		)),
+		el("button", {
+			type: "button",
+			onclick: ()=> clicks(clicks()+1), // C
+			textContent: "Fire",
+		})
+	)
 );
-/** @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 })
-}