⚡ 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/signals/actions-demo.js

@@ -15,4 +15,4 @@ setTimeout(
 	clearInterval,
 	10*interval,
 	setInterval(oninterval, interval)
-);
+);

docs/components/examples/signals/actions-todos.js

@@ -22,9 +22,9 @@ const onsubmit= on("submit", function(event){
 			S.action(todos, "push", data.get("todo"));
 			break;
 		case "E"/*dit*/: {
-			const last= todos().at(-1);
+			const last= todos.get().at(-1);
 			if(!last) break;
-			last(data.get("todo"));
+			last.set(data.get("todo"));
 			break;
 		}
 		case "R"/*emove*/:

docs/components/examples/signals/computations-abort.js

@@ -1,16 +1,16 @@
 import { S } from "deka-dom-el/signals";
 const signal= S(0);
 // computation pattern
-const double= S(()=> 2*signal());
+const double= S(()=> 2*signal.get());
 
 const ac= new AbortController();
 S.on(signal, v=> console.log("signal", v), { signal: ac.signal });
 S.on(double, v=> console.log("double", v), { signal: ac.signal });
 
-signal(signal()+1);
+signal.set(signal.get()+1);
 const interval= 5 * 1000;
-const id= setInterval(()=> signal(signal()+1), interval);
+const id= setInterval(()=> signal.set(signal.get()+1), interval);
 ac.signal.addEventListener("abort",
 	()=> setTimeout(()=> clearInterval(id), 2*interval));
 
-setTimeout(()=> ac.abort(), 3*interval)
+setTimeout(()=> ac.abort(), 3*interval)

docs/components/examples/signals/debugging-console.js

@@ -0,0 +1,20 @@
+import { S } from "deka-dom-el/signals";
+
+// Debugging a derived signal
+const name = S('Alice');
+const greeting = S(() => {
+	console.log('Computing greeting...');
+	return 'Hello, ' + name.get();
+});
+
+// Monitor the derived signal
+S.on(greeting, value => console.log('Greeting changed to:', value));
+
+// Later update the dependency
+name.set('Bob'); // Should trigger computation and listener
+
+// Console output:
+// Computing greeting...
+// Greeting changed to: Hello, Alice
+// Computing greeting...
+// Greeting changed to: Hello, Bob

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

@@ -0,0 +1,38 @@
+import { el, on, scope } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+// Create a component with reactive elements
+function ReactiveCounter() {
+	const count = S(0);
+		scope.host(on.connected(ev=>
+				console.log(ev.target.__dde_reactive)
+		));
+
+	const counter = el('div', {
+		// This element will be added into the __dde_reactive property
+		textContent: count,
+	});
+
+	const incrementBtn = el('button', {
+		textContent: 'Increment',
+		onclick: () => count.set(count.get() + 1)
+	});
+
+	// Dynamic section will be added into __dde_signal property
+	const counterInfo = S.el(count, value =>
+		el('p', `Current count is ${value}`)
+	);
+
+	return el('div', { id: 'counter' }).append(
+		counter,
+		incrementBtn,
+		counterInfo
+	);
+}
+document.body.append(
+	el(ReactiveCounter),
+);
+
+// In DevTools console:
+const counter = document.querySelector('#counter');
+setTimeout(()=> console.log(counter.__dde_reactive), 1000); // See reactive bindings

docs/components/examples/signals/derived.js

@@ -0,0 +1,13 @@
+import { S } from "deka-dom-el/signals";
+
+// Create base signals
+const firstName = S("John");
+const lastName = S("Doe");
+
+// Create a derived signal
+const fullName = S(() => firstName.get() + " " + lastName.get());
+
+// The fullName signal updates automatically when either dependency changes
+S.on(fullName, name => console.log("Name changed to:", name));
+
+firstName.set("Jane"); // logs: "Name changed to: Jane Doe"

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

@@ -3,8 +3,8 @@ 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 === 0) }, dataset: { count }, textContent: "Attributes example" }),
+	el("p", S(()=> "Currently: "+count.get())),
+	el("p", { classList: { red: S(()=> count.get()%2 === 0) }, dataset: { count }, textContent: "Attributes example" }),
 );
 document.head.append(
 	el("style", ".red { color: red; }")
@@ -12,4 +12,4 @@ document.head.append(
 
 const interval= 5 * 1000;
 setTimeout(clearInterval, 10*interval,
-	setInterval(()=> count(count()+1), interval));
+	setInterval(()=> count.set(count.get()+1), interval));

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

@@ -2,7 +2,7 @@ import { S } from "deka-dom-el/signals";
 const count= S(0, {
 	add(){ this.value= this.value + Math.round(Math.random()*10); }
 });
-const numbers= S([ count() ], {
+const numbers= S([ count.get() ], {
 	push(next){ this.value.push(next); }
 });
 
@@ -22,5 +22,5 @@ document.body.append(
 const interval= 5*1000;
 setTimeout(clearInterval, 10*interval, setInterval(function(){
 	S.action(count, "add");
-	S.action(numbers, "push", count());
-}, interval));
+	S.action(numbers, "push", count.get());
+}, interval));

docs/components/examples/signals/signals.js

@@ -1,10 +1,10 @@
 import { S } from "deka-dom-el/signals";
-// α — `signal` represents a reactive value
+// PART 1 — `signal` represents a reactive value
 const signal= S(0);
-// β — just reacts on signal changes
+// PART 2 — just reacts on signal changes
 S.on(signal, console.log);
-// γ — just updates the value
-const update= ()=> signal(signal()+1);
+// PART 3 — just updates the value
+const update= ()=> signal.set(signal.get()+1);
 
 update();
 const interval= 5*1000;