💥 docs observables

docs_src/components/examples/observables/actions-demo.js

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

docs_src/components/examples/observables/actions-todos.js

@@ -0,0 +1,56 @@
+import { O } from "deka-dom-el/observables";
+const todos= O([], {
+	push(item){
+		this.value.push(O(item));
+	},
+	pop(){
+		const removed= this.value.pop();
+		if(removed) O.clear(removed);
+	},
+	[O.symbols.onclear](){ // this covers `O.clear(todos)`
+		O.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*/:
+			O.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*/:
+			O.action(todos, "pop");
+			break;
+	}
+});
+document.body.append(
+	el("ul").append(
+		O.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_src/components/examples/observables/computations-abort.js

@@ -8,7 +8,7 @@ O.on(observable, v=> console.log("observable", v), { signal: ac.signal });
 O.on(double, v=> console.log("double", v), { signal: ac.signal });
 
 observable(observable()+1);
-const interval= 5000;
+const interval= 5 * 1000;
 const id= setInterval(()=> observable(observable()+1), interval);
 ac.signal.addEventListener("abort",
 	()=> setTimeout(()=> clearInterval(id), 2*interval));

docs_src/components/examples/observables/dom-attrs.js

@@ -0,0 +1,15 @@
+import { O } from "deka-dom-el/observables";
+const count= O(0);
+
+import { el } from "deka-dom-el";
+document.body.append(
+	el("p", O(()=> "Currently: "+count())),
+	el("p", { classList: { red: O(()=> 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_src/components/examples/observables/dom-el.js

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

docs_src/components/examples/observables/intro.js

@@ -1,10 +1,6 @@
-// when NPM
-import { O } from "deka-dom-el/observables";
-// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
-
-/**
- * @type {ddeObservable}
- * */
-/**
- * @type {ddeActions}
- * */
+// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
+import { O, observable } from "deka-dom-el/observables";
+O===observable
+/** @type {ddeObservable} */
+/** @type {ddeAction} */
+/** @type {ddeActions} */

docs_src/components/examples/observables/observables.js

@@ -4,5 +4,9 @@ const observable= O(0);
 // β — just reacts on observable changes
 O.on(observable, console.log);
 // γ — just updates the value
-observable(observable()+1);
-setInterval(()=> observable(observable()+1), 5000);
+const update= ()=> observable(observable()+1);
+
+update();
+const interval= 5*1000;
+setTimeout(clearInterval, 10*interval,
+	setInterval(update, interval));