⚡ Docs

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

@@ -0,0 +1,18 @@
+import { S } from "deka-dom-el/signals";
+const signal= S(0, {
+	increaseOnlyOdd(add){
+		console.info(add);
+		if(add%2 === 0) return this.stopPropagation();
+		this.value+= add;
+	}
+});
+S.on(signal, console.log);
+const oninterval= ()=>
+	S.action(signal, "increaseOnlyOdd", Math.floor(Math.random()*100));
+
+const interval= 5*1000;
+setTimeout(
+	clearInterval,
+	10*interval,
+	setInterval(oninterval, interval)
+);

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

@@ -0,0 +1,56 @@
+import { S } from "deka-dom-el/signals";
+const todos= S([], {
+	push(item){
+		this.value.push(S(item));
+	},
+	pop(){
+		const removed= this.value.pop();
+		if(removed) S.clear(removed);
+	},
+	[S.symbols.onclear](){ // this covers `O.clear(todos)`
+		S.clear(...this.value);
+	}
+});
+
+import { el, on } from "deka-dom-el";
+/** @type {ddeElementAddon<HTMLFormElement>} */
+const onsubmit= on("submit", function(event){
+	event.preventDefault();
+	const data= new FormData(this);
+	switch (data.get("op")){
+		case "A"/*dd*/:
+			S.action(todos, "push", data.get("todo"));
+			break;
+		case "E"/*dit*/: {
+			const last= todos().at(-1);
+			if(!last) break;
+			last(data.get("todo"));
+			break;
+		}
+		case "R"/*emove*/:
+			S.action(todos, "pop");
+			break;
+	}
+});
+document.body.append(
+	el("ul").append(
+		S.el(todos, todos=>
+			todos.map(textContent=> el("li", textContent)))
+	),
+	el("form", null, onsubmit).append(
+		el("input", { type: "text", name: "todo", placeholder: "Todo’s text" }),
+		el(radio, { textContent: "Add", checked: true }),
+		el(radio, { textContent: "Edit last" }),
+		el(radio, { textContent: "Remove" }),
+		el("button", "Submit")
+	)
+);
+document.head.append(
+	el("style", "form{ display: flex; flex-flow: column nowrap; }")
+);
+function radio({ textContent, checked= false }){
+	return el("label").append(
+		el("input", { type: "radio", name: "op", value: textContent[0], checked }),
+		" ",textContent
+	)
+}

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

@@ -0,0 +1,16 @@
+import { S } from "deka-dom-el/signals";
+const signal= S(0);
+// computation pattern
+const double= S(()=> 2*signal());
+
+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);
+const interval= 5 * 1000;
+const id= setInterval(()=> signal(signal()+1), interval);
+ac.signal.addEventListener("abort",
+	()=> setTimeout(()=> clearInterval(id), 2*interval));
+
+setTimeout(()=> ac.abort(), 3*interval)

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

@@ -0,0 +1,15 @@
+import { S } from "deka-dom-el/signals";
+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) }, dataset: { count }, textContent: "Attributes example" })
+);
+document.head.append(
+	el("style", ".red { color: red; }")
+);
+
+const interval= 5 * 1000;
+setTimeout(clearInterval, 10*interval,
+	setInterval(()=> count(count()+1), interval));

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

@@ -0,0 +1,26 @@
+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() ], {
+	push(next){ this.value.push(next); }
+});
+
+import { el } from "deka-dom-el";
+document.body.append(
+	S.el(count, count=> count%2
+		? el("p", "Last number is odd.")
+		: el()
+	),
+	el("p", "Lucky numbers:"),
+	el("ul").append(
+		S.el(numbers, numbers=> numbers.toReversed()
+			.map(n=> el("li", n)))
+	)
+);
+
+const interval= 5*1000;
+setTimeout(clearInterval, 10*interval, setInterval(function(){
+	S.action(count, "add");
+	S.action(numbers, "push", count());
+}, interval));

docs/components/examples/signals/intro.js

@@ -0,0 +1,6 @@
+// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
+import { S, signal } from "deka-dom-el/signals";
+S===signal
+/** @type {ddeSignal} */
+/** @type {ddeAction} */
+/** @type {ddeActions} */

docs/components/examples/signals/signals.js

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