Keyed list · forEach
2 left
- learn zap
- ship it
Usage
import { signal, html, forEach } from "./index.js";
const mk = (id, text) => ({ id, text, done: signal(false) });
const todos = signal([mk(1, "learn zap"), mk(2, "ship it")]);
// forEach keys rows by identity and reuses DOM nodes across updates —
// only added/removed/moved items touch the DOM. 3rd arg = empty state.
forEach(todos,
(t) => html`<li onclick=${() => t.done.update((d) => !d)}>${t.text}</li>`,
() => html`<li>no todos yet</li>`,
)