1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-07-01 12:22:15 +02:00

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
This commit is contained in:
2024-05-22 21:43:49 +02:00
committed by GitHub
parent 4014e79740
commit cd62782c7b
65 changed files with 1426 additions and 978 deletions

View File

@ -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())

View File

@ -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 */

View File

@ -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} */