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>`,
)