⚡ Replace “observable” term with “signal” (#19)

* ⚡ refact docs

to make editing (now renaming observables to signal) easier

* ⚡ ⚡ use signal(s) term isntead of observable(s)

* ⚡ 🔤 version + typo

* 🐛 customElement example (0→S)

* 📺 version in package-lock.json

docs_src/components/examples/customElement/intro.js

@@ -1,12 +1,12 @@
-// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
+// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
 import {
 	customElementRender,
 	customElementWithDDE,
 	observedAttributes,
 } from "deka-dom-el";
 /** @type {ddePublicElementTagNameMap} */
-import { O } from "deka-dom-el/observables";
-O.observedAttributes;
+import { S } from "deka-dom-el/signals";
+S.observedAttributes;
 
 // “internal” utils
 import { lifecyclesToEvents } from "deka-dom-el";

docs_src/components/examples/helloWorld.js

@@ -1,9 +1,9 @@
 import { el } from "deka-dom-el";
-import { O } from "deka-dom-el/observables";
-const clicks= O(0);
+import { S } from "deka-dom-el/signals";
+const clicks= S(0);
 document.body.append(
 	el().append(
-		el("p", O(()=>
+		el("p", S(()=>
 			"Hello World "+"🎉".repeat(clicks())
 		)),
 		el("button", {

docs_src/components/examples/observables/computations-abort.js

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

docs_src/components/examples/observables/intro.js

@@ -1,6 +0,0 @@
-// 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

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

docs_src/components/examples/scopes/cleaning.js

@@ -7,9 +7,9 @@ document.body.append(
 		type: "button"
 	})
 );
-import { O } from "deka-dom-el/observables";
+import { S } from "deka-dom-el/signals";
 function component(){
-	const textContent= O("Click to change text.");
+	const textContent= S("Click to change text.");
 
 	const onclickChange= on("click", function redispatch(){
 		textContent("Text changed! "+(new Date()).toString())

docs_src/components/examples/scopes/declarative.js

@@ -1,10 +1,10 @@
 /* PSEUDO-CODE!!! */
 import { el } from "deka-dom-el";
-import { O } from "deka-dom-el/observables";
+import { S } from "deka-dom-el/signals";
 function component(){
 	/* prepare changeable data */
-	const dataA= O("data");
-	const dataB= O("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"));
@@ -17,17 +17,17 @@ function component(){
 		}),
 		el("ul").append(
 			/* declarative element(s) */
-			O.el(dataA, data=> data.map(d=> el("li", d)))
+			S.el(dataA, data=> data.map(d=> el("li", d)))
 		),
 		el("ul").append(
 			/* declarative component(s) */
-			O.el(dataA, data=> data.map(d=> el(subcomponent, d)))
+			S.el(dataA, data=> data.map(d=> el(subcomponent, d)))
 		)
 	);
 }
 function subcomponent({ id }){
 	/* prepare changeable data */
-	const textContent= O("…");
+	const textContent= S("…");
 	/* define data flow (can be asynchronous) */
 	fetchAPI(id).then(text=> textContent(text));
 	/* declarative UI */

docs_src/components/examples/scopes/intro.js

@@ -1,3 +1,3 @@
-// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
+// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
 import { scope, el } from "deka-dom-el";
 /** @type {ddeElementAddon} */

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

@@ -1,14 +1,14 @@
-import { O } from "deka-dom-el/observables";
-const observable= O(0, {
+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;
 	}
 });
-O.on(observable, console.log);
+S.on(signal, console.log);
 const oninterval= ()=>
-	O.action(observable, "increaseOnlyOdd", Math.floor(Math.random()*100));
+	S.action(signal, "increaseOnlyOdd", Math.floor(Math.random()*100));
 
 const interval= 5*1000;
 setTimeout(

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

@@ -1,14 +1,14 @@
-import { O } from "deka-dom-el/observables";
-const todos= O([], {
+import { S } from "deka-dom-el/signals";
+const todos= S([], {
 	push(item){
-		this.value.push(O(item));
+		this.value.push(S(item));
 	},
 	pop(){
 		const removed= this.value.pop();
-		if(removed) O.clear(removed);
+		if(removed) S.clear(removed);
 	},
-	[O.symbols.onclear](){ // this covers `O.clear(todos)`
-		O.clear(...this.value);
+	[S.symbols.onclear](){ // this covers `O.clear(todos)`
+		S.clear(...this.value);
 	}
 });
 
@@ -19,7 +19,7 @@ const onsubmit= on("submit", function(event){
 	const data= new FormData(this);
 	switch (data.get("op")){
 		case "A"/*dd*/:
-			O.action(todos, "push", data.get("todo"));
+			S.action(todos, "push", data.get("todo"));
 			break;
 		case "E"/*dit*/: {
 			const last= todos().at(-1);
@@ -28,13 +28,13 @@ const onsubmit= on("submit", function(event){
 			break;
 		}
 		case "R"/*emove*/:
-			O.action(todos, "pop");
+			S.action(todos, "pop");
 			break;
 	}
 });
 document.body.append(
 	el("ul").append(
-		O.el(todos, todos=>
+		S.el(todos, todos=>
 			todos.map(textContent=> el("li", textContent)))
 	),
 	el("form", null, onsubmit).append(

docs_src/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_src/components/examples/signals/dom-attrs.js

@@ -1,10 +1,10 @@
-import { O } from "deka-dom-el/observables";
-const count= O(0);
+import { S } from "deka-dom-el/signals";
+const count= S(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" })
+	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; }")

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

@@ -1,26 +1,26 @@
-import { O } from "deka-dom-el/observables";
-const count= O(0, {
+import { S } from "deka-dom-el/signals";
+const count= S(0, {
 	add(){ this.value= this.value + Math.round(Math.random()*10); }
 });
-const numbers= O([ count() ], {
+const numbers= S([ count() ], {
 	push(next){ this.value.push(next); }
 });
 
 import { el } from "deka-dom-el";
 document.body.append(
-	O.el(count, count=> count%2
+	S.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()
+		S.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());
+	S.action(count, "add");
+	S.action(numbers, "push", count());
 }, interval));

docs_src/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_src/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));