⚡ dde and docs improvements (#27)

* ⚡ 🎉

* ⚡ wip

* 🔤

* ⚡ wip

* ⚡ wip

* ⚡ Refatc signals to .get/.set syntax #26

* 🐛 Better types for on*

* 🔤

* 🔤

* 🐛 coumputed signal

* 🔤 ⚡ Docs UI/UX

* ⚡ 🔤 UI enhancements

* ⚡ (bs) (un)min

* 🔤 adds debugging

* 🔤 ssr

* 🔤

* ⚡ bs/lint

* 🔤

* 🔤 UI

* 🔤 updates texts

* 🔤UI

* ⚡ dispatch

* 🔤 events

* 🔤 elements

* 🔤 intro

* 🐛 fixes completitions for el with components

* 🐛 wrong file(s) in git

* 🔤 logo

* 🐛 🔤 types 3ps

* 🔤 ui/ux

* 🔤

* 🔤

* 🔤 scopes

* 🔤

* 🔤 ui/ux

* 🔤

* ⚡ issignal

* 🔤 improvemens

* ⚡ irelands

* 🔤 UI/UX/wording

* 🐛 npx-hint

[Scrollable region must have keyboard access | Axe Rules | Deque University | Deque Systems](https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI)

* 🔤 logos

* ⚡ better? dts builds

* Update README.md

docs/components/examples/scopes/custom-scope.js

@@ -0,0 +1,14 @@
+import { scope } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+function customSignalLogic() {
+	// Create an isolated scope for a specific operation
+	scope.push(); // Start new scope
+
+	// These signals are in the new scope
+	const isolatedCount = S(0);
+	const isolatedDerived = S(() => isolatedCount.get() * 2);
+
+	// Clean up by returning to previous scope
+	scope.pop();
+}

docs/components/examples/scopes/declarative.js

@@ -1,35 +1,26 @@
-/* PSEUDO-CODE!!! */
 import { el } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
-function component(){
-	/* prepare changeable data */
-	const dataA= S("data");
-	const dataB= S("data");
-	/* define data flow (can be asynchronous) */
-	fetchAPI().then(data_new=> dataA(data_new));
-	setTimeout(()=> dataB("DATA"));
-	/* declarative UI */
-	return el().append(
-		el("h1", {
-			textContent: "Example",
-			/* declarative attribute(s) */
-			classList: { declarative: dataB }
-		}),
-		el("ul").append(
-			/* declarative element(s) */
-			S.el(dataA, data=> data.map(d=> el("li", d)))
-		),
-		el("ul").append(
-			/* declarative component(s) */
-			S.el(dataA, data=> data.map(d=> el(subcomponent, d)))
-		)
+function Counter() {
+	// Define state
+	const count = S(0);
+
+	// Define behavior
+	const increment = () => count.set(count.get() + 1);
+
+	// Define data flow
+	setTimeout(increment, 1000);
+	// or fetchAPI().then(increment);
+
+	// Declarative UI (how to render data/`count`)
+	// …automatically updates when changes
+	return el("div").append(
+		// declarative element(s)
+		el("p", S(() => "Count: " + count.get())),
+		el("button", {
+			onclick: increment,
+			textContent: "Increment",
+			// declarative attribute(s)
+			disabled: S(() => count.get() >= 10)
+		})
 	);
 }
-function subcomponent({ id }){
-	/* prepare changeable data */
-	const textContent= S("…");
-	/* define data flow (can be asynchronous) */
-	fetchAPI(id).then(text=> textContent(text));
-	/* declarative UI */
-	return el("li", { textContent, dataId: id });
-}

docs/components/examples/scopes/imperative.js

@@ -1,31 +1,25 @@
 /* PSEUDO-CODE!!! */
-import { el, on, scope } from "deka-dom-el";
-function component(){
-	const { host }= scope;
-	const ul= el("ul");
-	const ac= new AbortController();
-	fetchAPI({ signal: ac.signal }).then(data=> {
-		data.forEach(d=> ul.append(el("li", d)));
-	});
-	host(
-		/* element was remove before data fetched */
-		on.disconnected(()=> ac.abort())
+import { el, scope } from "deka-dom-el";
+function Counter() {
+	const { host } = scope;
+
+	let count = 0;
+	const counterText = el("p", "Count: 0");
+
+	// Manually update DOM element
+	const increment = () => {
+		count++;
+		counterText.textContent = "Count: " + count;
+		host().querySelector("button").disabled = count >= 10;
+	};
+	setTimeout(increment, 1000);
+	// or fetchAPI().then(increment);
+
+	return el("div").append(
+		counterText,
+		el("button", {
+			onclick: increment,
+			textContent: "Increment"
+		})
 	);
-	return ul;
-	/**
-	 * NEVER EVER!!
-	 * let data;
-	 * fetchAPI().then(d=> data= O(d));
-	 *
-	 * OR NEVER EVER!!
-	 * const ul= el("ul");
-	 * fetchAPI().then(d=> {
-	 *	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/scopes/mixed.js

@@ -0,0 +1,36 @@
+/* PSEUDO-CODE!!! */
+import { el, scope } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+function Counter() {
+	const { host } = scope;
+
+	let count = S(0);
+	const counterText = el("p", "Count: 0");
+	S.on(count, c=> counterText.textContent= "Count: " + c);
+
+	// Manually update DOM element
+	const increment = () => {
+		count.set(count.get() + 1);
+		// NEVER EVER
+		// count = S(count.get() + 1);
+		// THE HOST IS PROBABLY DIFFERENT THAN
+		// YOU EXPECT AND SIGNAL MAY BE
+		// UNEXPECTEDLY REMOVED!!!
+		host().querySelector("button").disabled = count.get() >= 10;
+	};
+	setTimeout(()=> {
+		// ok, BUT consider extract to separate function
+		// see section below for more info
+		const ok= S(0);
+		S.on(ok, console.log);
+		setInterval(()=> ok.set(ok.get() + 1), 100);
+	}, 100);
+
+	return el("div").append(
+		counterText,
+		el("button", {
+			onclick: increment,
+			textContent: "Increment"
+		})
+	);
+}

docs/components/examples/scopes/with-scope.js

@@ -0,0 +1,45 @@
+import { el, scope } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+function CounterWithIsolatedTimer() {
+	const { host } = scope;
+
+	// Main component state
+	const count = S(0);
+
+	// Create a timer in an isolated scope
+	scope.isolate(() => {
+	// These subscriptions won't be tied to the component lifecycle
+	// They would continue to run even if the component was removed
+	const timer = S(0);
+
+	// Not recommended for real applications!
+	// Just demonstrating scope isolation
+	setInterval(() => {
+		timer.set(timer.get() + 1);
+		console.log(`Timer: ${timer.get()}`);
+	}, 1000);
+	});
+
+	// Normal component functionality within main scope
+	function increment() {
+	count.set(count.get() + 1);
+	}
+
+	return el("div").append(
+	el("p").append(
+		"Count: ",
+		el("#text", S(() => count.get()))
+	),
+	el("button", {
+		textContent: "Increment",
+		onclick: increment
+	}),
+	el("p", "An isolated timer runs in console")
+	);
+}
+
+// Usage
+document.body.append(
+	el(CounterWithIsolatedTimer)
+);