⚡ 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

examples/components/3rd-party.js

@@ -15,7 +15,7 @@ export function thirdParty(){
 	}, {
 		set(key, value){
 			const p=  this.value[key] || S();
-			p(value);
+			p.set(value);
 			this.value[key]= p;
 		}
 	});
@@ -32,7 +32,7 @@ export function thirdParty(){
 	})();
 	return el("input", {
 		className,
-		value: store().value(),
+		value: store.get().value.get(),
 		type: "text",
 		onchange: ev=> S.action(store, "set", "value", ev.target.value)
 	});

examples/components/fullNameComponent.js

@@ -9,24 +9,24 @@ export function fullNameComponent(){
 	const labels= [ "Name", "Surname" ];
 	const name= labels.map(_=> S(""));
 	const full_name= S(()=>
-		name.map(l=> l()).filter(Boolean).join(" ") || "-");
+		name.map(l=> l.get()).filter(Boolean).join(" ") || "-");
 	scope.host(
 		on.connected(()=> console.log(fullNameComponent)),
 		on.disconnected(()=> console.log(fullNameComponent))
 	);
 
 	const count= S(0);
-	setInterval(()=> count(count()+1), 5000);
+	setInterval(()=> count.set(count.get()+1), 5000);
 	const style= { height: "80px", display: "block", fill: "currentColor" };
 	const elSVG= elNS("http://www.w3.org/2000/svg");
 	return el("div", { className }).append(
 		el("h2", "Simple form:"),
-		el("p", { textContent: S(()=> "Count: "+count()),
-			dataset: { count }, classList: { count: S(() => count()%2 === 0) } }),
+		el("p", { textContent: S(()=> "Count: "+count.get()),
+			dataset: { count }, classList: { count: S(() => count.get()%2 === 0) } }),
 		el("form", { onsubmit: ev=> ev.preventDefault() }).append(
 			...name.map((v, i)=>
 				el("label", labels[i]).append(
-					el("input", { type: "text", name: labels[i], value: v() }, on("change", ev=> v(ev.target.value)))
+					el("input", { type: "text", name: labels[i], value: v.get() }, on("change", ev=> v.set(ev.target.value)))
 				))
 		),
 		el("p").append(

examples/components/todosComponent.js

@@ -45,7 +45,7 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
 				: el("ul").append(
 					...Array.from(ts).map(([ value, textContent ])=>
 						memo(value, ()=> el(todoComponent, { textContent, value, className }, onremove)))
-				)
+				),
 			),
 			el("p", "Click to the text to edit it.")
 		),
@@ -54,11 +54,11 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
 			el("label", "New todo: ").append(
 				el("input", { name, type: "text", required: true }),
 			),
-			el("button", "+")
+			el("button", "+"),
 		),
 		el("div").append(
 			el("h3", "Output (JSON):"),
-			el("output", S(()=> JSON.stringify(Array.from(todosO()), null, "\t")))
+			el("output", S(()=> JSON.stringify(Array.from(todosO.get()), null, "\t")))
 		)
 	)
 }
@@ -80,13 +80,13 @@ function todoComponent({ textContent, value }){
 	const is_editable= S(false);
 	const onedited= on("change", ev=> {
 		const el= /** @type {HTMLInputElement} */ (ev.target);
-		textContent(el.value);
-		is_editable(false);
+		textContent.set(el.value);
+		is_editable.set(false);
 	});
 	return el("li").append(
 		S.el(is_editable, is=> is
-			? el("input", { value: textContent(), type: "text" }, onedited)
-			: el("span", { textContent, onclick: is_editable.bind(null, true) })
+			? el("input", { value: textContent.get(), type: "text" }, onedited)
+			: el("span", { textContent, onclick: ()=> is_editable.set(true) })
 		),
 		el("button", { type: "button", value, textContent: "-" }, onclick)
 	);

examples/components/webComponent.js

@@ -34,7 +34,7 @@ export class CustomHTMLTestElement extends HTMLElement{
 			text(test),
 			text(name),
 			text(preName),
-			el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName("Ahoj") }),
+			el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName.set("Ahoj") }),
 			" | ",
 			el("slot", { className: "test", name: "test" }),
 		);

examples/index.js

@@ -20,7 +20,7 @@ document.body.append(
 		el("span", { textContent: "test", slot: "test" }),
 	),
 	el(thirdParty),
-	el(CustomSlottingHTMLElement.tagName, { onclick: ()=> toggle(!toggle()) }).append(
+	el(CustomSlottingHTMLElement.tagName, { onclick: ()=> toggle.set(!toggle.get()) }).append(
 		el("strong", { slot: "name", textContent: "Honzo" }),
 		S.el(toggle, is=> is
 			? el("span", "…default slot")