mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-03 20:35:53 +02:00
🔤
This commit is contained in:
parent
6d550a50ef
commit
90dfc56dc4
GPG Key ID:
B3A25AED155AFFAB
@ -13,18 +13,20 @@ import { S } from "deka-dom-el/signals";
|
||||
* @returns {HTMLElement} The root TodoMVC application element
|
||||
*/
|
||||
function Todos(){
|
||||
const pageS = routerSignal(S);
|
||||
const { signal } = scope;
|
||||
const pageS = routerSignal(S, signal);
|
||||
const todosS = todosSignal();
|
||||
/** Derived signal that filters todos based on current route */
|
||||
const filteredTodosS = S(()=> {
|
||||
const todosFilteredS = S(()=> {
|
||||
const todos = todosS.get();
|
||||
const filter = pageS.get();
|
||||
if (filter === "all") return todos;
|
||||
return todos.filter(todo => {
|
||||
if (filter === "active") return !todo.completed;
|
||||
if (filter === "completed") return todo.completed;
|
||||
return true; // "all"
|
||||
});
|
||||
});
|
||||
const todosRemainingS = S(()=> todosS.get().filter(todo => !todo.completed).length);
|
||||
|
||||
/** @type {ddeElementAddon<HTMLInputElement>} */
|
||||
const onToggleAll = on("change", event => {
|
||||
@ -73,7 +75,7 @@ function Todos(){
|
||||
}, onToggleAll),
|
||||
el("label", { htmlFor: "toggle-all", title: "Mark all as complete" }),
|
||||
el("ul", { className: "todo-list" }).append(
|
||||
S.el(filteredTodosS, filteredTodos => filteredTodos.map(todo =>
|
||||
S.el(todosFilteredS, filteredTodos => filteredTodos.map(todo =>
|
||||
memo(todo.id, ()=> el(TodoItem, todo, onDelete, onEdit)))
|
||||
)
|
||||
)
|
||||
@ -83,7 +85,7 @@ function Todos(){
|
||||
? el()
|
||||
: el("footer", { className: "footer" }).append(
|
||||
el("span", { className: "todo-count" }).append(
|
||||
noOfLeft(todos)
|
||||
noOfLeft()
|
||||
),
|
||||
memo("filters", ()=>
|
||||
el("ul", { className: "filters" }).append(
|
||||
@ -98,15 +100,18 @@ function Todos(){
|
||||
)
|
||||
),
|
||||
),
|
||||
!todos.some(todo => todo.completed)
|
||||
todos.length - todosRemainingS.get() === 0
|
||||
? el()
|
||||
: el("button", { textContent: "Clear completed", className: "clear-completed" }, onClearCompleted)
|
||||
: memo("delete", () =>
|
||||
el("button",
|
||||
{ textContent: "Clear completed", className: "clear-completed" },
|
||||
onClearCompleted)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
/** @param {Todo[]} todos */
|
||||
function noOfLeft(todos){
|
||||
const { length }= todos.filter(todo => !todo.completed);
|
||||
function noOfLeft(){
|
||||
const length = todosRemainingS.get();
|
||||
return el("strong").append(
|
||||
length + " ",
|
||||
length === 1 ? "item left" : "items left"
|
||||
@ -194,7 +199,7 @@ function TodoItem({ id, title, completed }) {
|
||||
checked: completed
|
||||
}, onToggleCompleted),
|
||||
el("label", { textContent: title }, onStartEdit),
|
||||
el("button", { className: "destroy" }, onDelete)
|
||||
el("button", { ariaLabel: "Delete todo", className: "destroy" }, onDelete)
|
||||
),
|
||||
S.el(isEditing, editing => !editing
|
||||
? el()
|
||||
@ -328,6 +333,7 @@ function todosSignal(){
|
||||
localStorage.setItem(store_key, JSON.stringify(value));
|
||||
} catch (e) {
|
||||
console.error("Failed to save todos to localStorage", e);
|
||||
// Optionally, provide user feedback
|
||||
}
|
||||
});
|
||||
return out;
|
||||
@ -336,9 +342,10 @@ function todosSignal(){
|
||||
/**
|
||||
* Creates a signal for managing route state
|
||||
*
|
||||
* @param {typeof S} signal - The signal constructor
|
||||
* @param {typeof S} signal - The signal constructor from a library
|
||||
* @param {AbortSignal} abortSignal
|
||||
*/
|
||||
function routerSignal(signal){
|
||||
function routerSignal(signal, abortSignal){
|
||||
const initial = location.hash.replace("#", "") || "all";
|
||||
const out = signal(initial, {
|
||||
/**
|
||||
@ -347,15 +354,16 @@ function routerSignal(signal){
|
||||
*/
|
||||
set(hash){
|
||||
location.hash = hash;
|
||||
this.value = hash;
|
||||
}
|
||||
//this.value = hash;
|
||||
},
|
||||
});
|
||||
|
||||
// Setup hash change listener
|
||||
window.addEventListener("hashchange", () => {
|
||||
const hash = location.hash.replace("#", "") || "all";
|
||||
S.action(out, "set", /** @type {"all"|"active"|"completed"} */(hash));
|
||||
});
|
||||
//S.action(out, "set", /** @type {"all"|"active"|"completed"} */(hash));
|
||||
out.set(hash);
|
||||
}, { signal: abortSignal });
|
||||
|
||||
return out;
|
||||
}
|
||||
|
||||
@ -101,21 +101,23 @@ export function page({ pkg, info }){
|
||||
`),
|
||||
el(code, { content: `
|
||||
// Signal for current route (all/active/completed)
|
||||
const pageS = routerSignal(S);
|
||||
const { signal } = scope;
|
||||
const pageS = routerSignal(S, signal);
|
||||
|
||||
// Signal for the todos collection with custom actions
|
||||
const todosS = todosSignal();
|
||||
|
||||
// Derived signal that filters todos based on current route
|
||||
const filteredTodosS = S(()=> {
|
||||
const todosFilteredS = S(()=> {
|
||||
const todos = todosS.get();
|
||||
const filter = pageS.get();
|
||||
if (filter === "all") return todos;
|
||||
return todos.filter(todo => {
|
||||
if (filter === "active") return !todo.completed;
|
||||
if (filter === "completed") return todo.completed;
|
||||
return true; // "all"
|
||||
});
|
||||
});
|
||||
const todosRemainingS = S(()=> todosS.get().filter(todo => !todo.completed).length);
|
||||
`, page_id }),
|
||||
|
||||
el("p").append(T`
|
||||
@ -200,6 +202,7 @@ export function page({ pkg, info }){
|
||||
localStorage.setItem(store_key, JSON.stringify(value));
|
||||
} catch (e) {
|
||||
console.error("Failed to save todos to localStorage", e);
|
||||
// Optionally, provide user feedback
|
||||
}
|
||||
});
|
||||
return out;
|
||||
@ -222,19 +225,19 @@ export function page({ pkg, info }){
|
||||
el("h4", t`1. Derived Signals for Filtering`),
|
||||
el(code, { content: `
|
||||
/** Derived signal that filters todos based on current route */
|
||||
const filteredTodosS = S(()=> {
|
||||
const todosFilteredS = S(()=> {
|
||||
const todos = todosS.get();
|
||||
const filter = pageS.get();
|
||||
if (filter === "all") return todos;
|
||||
return todos.filter(todo => {
|
||||
if (filter === "active") return !todo.completed;
|
||||
if (filter === "completed") return todo.completed;
|
||||
return true; // "all"
|
||||
});
|
||||
});
|
||||
|
||||
// Using the derived signal in the UI
|
||||
el("ul", { className: "todo-list" }).append(
|
||||
S.el(filteredTodosS, filteredTodos => filteredTodos.map(todo =>
|
||||
S.el(todosFilteredS, filteredTodos => filteredTodos.map(todo =>
|
||||
memo(todo.id, ()=> el(TodoItem, todo, onDelete, onEdit)))
|
||||
)
|
||||
)
|
||||
@ -334,7 +337,7 @@ export function page({ pkg, info }){
|
||||
el("h4", t`Memoizing Todo Items`),
|
||||
el(code, { content: `
|
||||
el("ul", { className: "todo-list" }).append(
|
||||
S.el(filteredTodosS, filteredTodos => filteredTodos.map(todo =>
|
||||
S.el(todosFilteredS, filteredTodos => filteredTodos.map(todo =>
|
||||
memo(todo.id, ()=> el(TodoItem, todo, onDelete, onEdit)))
|
||||
)
|
||||
)
|
||||
@ -543,11 +546,13 @@ export function page({ pkg, info }){
|
||||
|
||||
el("h4", t`Conditional Clear Completed Button`),
|
||||
el(code, { content: `
|
||||
S.el(S(() => todosS.get().some(todo => todo.completed)),
|
||||
hasTodosCompleted=> hasTodosCompleted
|
||||
? el("button", { textContent: "Clear completed", className: "clear-completed" }, onClearCompleted)
|
||||
: el()
|
||||
)
|
||||
todos.length - todosRemainingS.get() === 0
|
||||
? el()
|
||||
: memo("delete", () =>
|
||||
el("button",
|
||||
{ textContent: "Clear completed", className: "clear-completed" },
|
||||
onClearCompleted)
|
||||
)
|
||||
`, page_id }),
|
||||
|
||||
el("div", { className: "note" }).append(
|
||||
@ -625,7 +630,7 @@ export function page({ pkg, info }){
|
||||
${el("strong", "Declarative Class Management:")} Using the classList property for cleaner class handling
|
||||
`),
|
||||
el("li").append(T`
|
||||
${el("strong", "Focus Management:")} Reliable input focus with requestAnimationFrame
|
||||
${el("strong", "Focus Management:")} Reliable input focus with setTimeout
|
||||
`),
|
||||
el("li").append(T`
|
||||
${el("strong", "Persistent Storage:")} Automatically saving application state with signal listeners
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user