mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-23 09:09:38 +01:00
Jan Andrle
cd62782c7b
* ⚡ 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
36 lines
964 B
JavaScript
36 lines
964 B
JavaScript
/* PSEUDO-CODE!!! */
|
|
import { el } from "deka-dom-el";
|
|
import { S } from "deka-dom-el/signals";
|
|
function component(){
|
|
/* prepare changeable 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"));
|
|
/* declarative UI */
|
|
return el().append(
|
|
el("h1", {
|
|
textContent: "Example",
|
|
/* declarative attribute(s) */
|
|
classList: { declarative: dataB }
|
|
}),
|
|
el("ul").append(
|
|
/* declarative element(s) */
|
|
S.el(dataA, data=> data.map(d=> el("li", d)))
|
|
),
|
|
el("ul").append(
|
|
/* declarative component(s) */
|
|
S.el(dataA, data=> data.map(d=> el(subcomponent, d)))
|
|
)
|
|
);
|
|
}
|
|
function subcomponent({ id }){
|
|
/* prepare changeable data */
|
|
const textContent= S("…");
|
|
/* define data flow (can be asynchronous) */
|
|
fetchAPI(id).then(text=> textContent(text));
|
|
/* declarative UI */
|
|
return el("li", { textContent, dataId: id });
|
|
}
|