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

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

Browse Source 
* ⚡ 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:
Jan Andrle
2024-05-22 21:43:49 +02:00
committed by GitHub
parent 4014e79740
commit cd62782c7b
65 changed files with 1426 additions and 978 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
examples/components/3rd-party.js
View File

@ -1,4 +1,4 @@
import { style, el, O, isObservable } from '../exports.js';
import { style, el, S, isSignal } from '../exports.js';
const className= style.host(thirdParty).css`
:host {
color: green;
@ -10,22 +10,22 @@ const store_adapter= {
write(data){ console.log(data); history.replaceState("", "", "?"+(new URLSearchParams(data)).toString()); }
};
export function thirdParty(){
const store= O({
value: O("initial")
const store= S({
value: S("initial")
}, {
set(key, value){
const p= this.value[key] || O();
const p= this.value[key] || S();
p(value);
this.value[key]= p;
}
});
// Array.from((new URL(location)).searchParams.entries())
// .forEach(([ key, value ])=> O.action(store, "set", key, value));
// O.on(store, data=> history.replaceState("", "", "?"+(new URLSearchParams(JSON.parse(JSON.stringify(data)))).toString()));
// .forEach(([ key, value ])=> S.action(store, "set", key, value));
// S.on(store, data=> history.replaceState("", "", "?"+(new URLSearchParams(JSON.parse(JSON.stringify(data)))).toString()));
useStore(store_adapter, {
onread(data){
Array.from(data.entries())
.forEach(([ key, value ])=> O.action(store, "set", key, value));
.forEach(([ key, value ])=> S.action(store, "set", key, value));
return store;
}
})();
@ -33,18 +33,18 @@ export function thirdParty(){
className,
value: store().value(),
type: "text",
onchange: ev=> O.action(store, "set", "value", ev.target.value)
onchange: ev=> S.action(store, "set", "value", ev.target.value)
});
}
function useStore(adapter_in, { onread, onbeforewrite }= {}){
const adapter= typeof adapter_in === "function" ? { read: adapter_in } : adapter_in;
if(!onread) onread= O;
if(!onread) onread= S;
if(!onbeforewrite) onbeforewrite= data=> JSON.parse(JSON.stringify(data));
return function useStoreInner(data_read){
const observable= onread(adapter.read(data_read)); //TODO OK as synchronous
if(adapter.write && isObservable(observable))
O.on(observable, data=> adapter.write(onbeforewrite(data)));
return observable;
const signal= onread(adapter.read(data_read)); //TODO OK as synchronous
if(adapter.write && isSignal(signal))
S.on(signal, data=> adapter.write(onbeforewrite(data)));
return signal;
};
}

6
examples/components/fullNameComponent.js
View File

@ -1,4 +1,4 @@
import { style, el, elNS, on, O, scope } from '../exports.js';
import { style, el, elNS, on, S, scope } from '../exports.js';
const className= style.host(fullNameComponent).css`
:host form{
display: flex;
@ -7,8 +7,8 @@ const className= style.host(fullNameComponent).css`
`;
export function fullNameComponent(){
const labels= [ "Name", "Surname" ];
const name= labels.map(_=> O(""));
const full_name= O(()=>
const name= labels.map(_=> S(""));
const full_name= S(()=>
name.map(l=> l()).filter(Boolean).join(" ") || "-");
scope.host(
on.connected(()=> console.log(fullNameComponent)),

22
examples/components/todosComponent.js
View File

@ -1,4 +1,4 @@
import { style, el, dispatchEvent, on, O, scope } from '../exports.js';
import { style, el, dispatchEvent, on, S, scope } from '../exports.js';
const className= style.host(todosComponent).css`
:host{
display: flex;
@ -17,27 +17,27 @@ const className= style.host(todosComponent).css`
/** @param {{ todos: string[] }} */
export function todosComponent({ todos= [ "Task A" ] }= {}){
let key= 0;
const todosO= O(new Map(), {
add(v){ this.value.set(key++, O(v)); },
remove(key){ O.clear(this.value.get(key)); this.value.delete(key); }
const todosO= S(new Map(), {
add(v){ this.value.set(key++, S(v)); },
remove(key){ S.clear(this.value.get(key)); this.value.delete(key); }
});
todos.forEach(text=> O.action(todosO, "add", text));
todos.forEach(text=> S.action(todosO, "add", text));
const name= "todoName";
const onsubmitAdd= on("submit", event=> {
const el= event.target.elements[name];
event.preventDefault();
O.action(todosO, "add", el.value);
S.action(todosO, "add", el.value);
el.value= "";
});
const onremove= on("remove", event=>
O.action(todosO, "remove", event.detail));
S.action(todosO, "remove", event.detail));
return el("div", { className }).append(
el("div").append(
el("h2", "Todos:"),
el("h3", "List of todos:"),
O.el(todosO, (ts, memo)=> !ts.size
S.el(todosO, (ts, memo)=> !ts.size
? el("p", "No todos yet")
: el("ul").append(
...Array.from(ts).map(([ value, textContent ])=>
@ -55,7 +55,7 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
),
el("div").append(
el("h3", "Output (JSON):"),
el("output", O(()=> JSON.stringify(Array.from(todosO()), null, "\t")))
el("output", S(()=> JSON.stringify(Array.from(todosO()), null, "\t")))
)
)
}
@ -70,13 +70,13 @@ function todoComponent({ textContent, value }){
event.stopPropagation();
dispatchEvent("remove")(host(), value);
});
const is_editable= O(false);
const is_editable= S(false);
const onedited= on("change", ev=> {
textContent(ev.target.value);
is_editable(false);
});
return el("li").append(
O.el(is_editable, is=> is
S.el(is_editable, is=> is
? el("input", { value: textContent(), type: "text" }, onedited)
: el("span", { textContent, onclick: is_editable.bind(null, true) })
),

4
examples/components/webComponent.js
View File

@ -1,5 +1,5 @@
import { el, on, customElementRender, customElementWithDDE, scope, simulateSlots } from "../../index.js";
import { O } from "../../observables.js";
import { S } from "../../signals.js";
/**
* Compatible with `npx -y web-component-analyzer examples/components/webComponent.js`
@ -16,7 +16,7 @@ export class CustomHTMLTestElement extends HTMLElement{
}
attributes(element){
const observed= O.observedAttributes(element);
const observed= S.observedAttributes(element);
return Object.assign({ test: element.test }, observed);
}
render({ name, preName, test }){