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:
@ -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())
|
||||
|
@ -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 */
|
||||
|
@ -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} */
|
||||
|
Reference in New Issue
Block a user