jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-25 01:39:37 +01:00
Code Packages Releases Activity

♻️ Update todosComponent to use types properly

Browse Source
This commit is contained in:
Jan Andrle 2023-09-12 15:25:13 +02:00
parent 1dd05518b8
commit ff22eed991
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/signals.d.ts vendored
View File

@ -41,6 +41,7 @@ interface S {
signal: SymbolSignal; signal: SymbolSignal;
onclear: SymbolOnclear; onclear: SymbolOnclear;
} }
el<S extends any, T extends HTMLElement>(signal: Signal<S, any>, el: (v: S)=> T): T;
} }
export const S: S; export const S: S;
declare global { declare global {

5
test/components/todosComponent.js
View File

@ -16,12 +16,11 @@ const className= style.host(todosComponent).css`
`; `;
/** @param {{ todos: string[] }} */ /** @param {{ todos: string[] }} */
export function todosComponent({ todos= [ "Task A" ] }= {}){ export function todosComponent({ todos= [ "Task A" ] }= {}){
const todosS= S([], { const todosS= S(todos.map(t=> S(t)), {
add(v){ this.value.push(S(v)); }, add(v){ this.value.push(S(v)); },
remove(i){ this.value.splice(i, 1); }, remove(i){ this.value.splice(i, 1); },
[S.symbols.onclear](){ S.clear(...this.value); }, [S.symbols.onclear](){ S.clear(...this.value); },
}); });
todos.forEach(v=> S.action(todosS, "add", v));
const name= "todoName"; const name= "todoName";
const onsubmitAdd= on("submit", event=> { const onsubmitAdd= on("submit", event=> {
const el= event.target.elements[name]; const el= event.target.elements[name];
@ -81,7 +80,7 @@ function todoComponent({ textContent, value }, host){
return el("li").append( return el("li").append(
S.el(is_editable, is=> is S.el(is_editable, is=> is
? el("input", { value: textContent(), type: "text" }, onedited) ? el("input", { value: textContent(), type: "text" }, onedited)
: el("span", textContent, on("click", ()=> is_editable(true))), : el("span", { textContent, onclick: is_editable.bind(null, true) }),
), ),
el("button", { type: "button", value, textContent: "-" }, onclick) el("button", { type: "button", value, textContent: "-" }, onclick)
); );