TodoMVC

▶ Run live · View source on GitHub

The classic TodoMVC, implemented in kerf. ~150 lines. Persists across reloads via localStorage. Editing a todo by double-click; Esc cancels, Enter or blur commits. The new-todo input keeps focus and cursor position even when the list reorders around it.

What to look at:

• One store holds items, filter, and the in-edit id. All state changes go through named actions.
• attr() action map — ACTIONS.toggle etc. is defined once; JSX spreads {...ACTIONS.toggle.attrs} (rename-safe, no hardcoded attribute name) and the delegate calls pass the pre-escaped ACTIONS.toggle.selector. Renaming the action in one place updates JSX + delegate together.
• effect() round-trips to localStorage — read on startup, write on every state change. No middleware, no plugin.
• Memo key includes the edit state — \${todo.id}-${editingId === todo.id ? ‘edit’ : ‘view’}“ — so the row’s HTML is recomputed when it flips between view and edit modes, but cached otherwise.
• delegateCapture('blur', ...) for the edit input commits on blur. blur doesn’t bubble, so capture-phase is required.
• Focus survival is automatic — typing into the new-todo while items are added/toggled never disturbs the cursor.

View source on GitHub →

site/src/examples/complete/todomvc/main.tsx

import { defineStore, mount, each, delegate, delegateCapture, effect, attr, type AttrSpec } from 'kerfjs';

const ACTIONS = {
  toggle:    attr('data-action', 'toggle'),
  remove:    attr('data-action', 'remove'),
  edit:      attr('data-action', 'edit'),
  filter:    attr('data-action', 'filter'),
  clearDone: attr('data-action', 'clear-done'),
} as const satisfies Record<string, AttrSpec<'data-action'>>;

const ITEM = { id: attr('data-id') } as const;

interface Todo { id: string; text: string; done: boolean }
type Filter = 'all' | 'active' | 'done';

const STORAGE_KEY = 'kerf-todomvc';

function load(): Todo[] {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    return raw ? (JSON.parse(raw) as Todo[]) : [];
  } catch {
    return [];
  }
}

const todos = defineStore({
  initial: () => ({
    items: load(),
    filter: 'all' as Filter,
    editingId: null as string | null,
  }),
  actions: (set, get) => ({
    add: (text: string) => {
      const t = text.trim();
      if (!t) return;
      set({ ...get(), items: [...get().items, { id: crypto.randomUUID(), text: t, done: false }] });
    },
    toggle: (id: string) => set({
      ...get(),
      items: get().items.map((it) => (it.id === id ? { ...it, done: !it.done } : it)),
    }),
    remove: (id: string) => set({ ...get(), items: get().items.filter((it) => it.id !== id) }),
    clearDone: () => set({ ...get(), items: get().items.filter((it) => !it.done) }),
    setFilter: (filter: Filter) => set({ ...get(), filter }),
    startEdit: (id: string) => set({ ...get(), editingId: id }),
    commitEdit: (id: string, text: string) => {
      const t = text.trim();
      if (!t) {
        set({ ...get(), items: get().items.filter((it) => it.id !== id), editingId: null });
        return;
      }
      set({
        ...get(),
        items: get().items.map((it) => (it.id === id ? { ...it, text: t } : it)),
        editingId: null,
      });
    },
    cancelEdit: () => set({ ...get(), editingId: null }),
  }),
});

effect(() => {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos.state.value.items));
});

const root = document.getElementById('app')!;

mount(root, () => {
  const { items, filter, editingId } = todos.state.value;
  const visible = items.filter((it) =>
    filter === 'active' ? !it.done : filter === 'done' ? it.done : true,
  );
  const remaining = items.filter((it) => !it.done).length;

  return (
    <div class="todoapp">
      <ul class="todo-list">
        {each(
          visible,
          (todo) => (
            <li data-key={todo.id} class={editingId === todo.id ? 'editing' : ''}>
              <input type="checkbox" {...ACTIONS.toggle.attrs} {...ITEM.id(todo.id)} checked={todo.done} />
              <label {...ACTIONS.edit.attrs} {...ITEM.id(todo.id)}>{todo.text}</label>
              <button {...ACTIONS.remove.attrs} {...ITEM.id(todo.id)}>×</button>
            </li>
          ),
          (todo) => `${todo.id}-${editingId === todo.id ? 'edit' : 'view'}`,
        )}
      </ul>
      <span>{remaining} left</span>
      <button {...ACTIONS.clearDone.attrs}>Clear completed</button>
    </div>
  );
});

// Tier 1 click delegations — `.selector` is pre-computed and CSS-escaped:
delegate(root, 'click', ACTIONS.toggle.selector, (_e, el) => todos.actions.toggle((el as HTMLElement).dataset.id!));
delegate(root, 'click', ACTIONS.remove.selector, (_e, el) => todos.actions.remove((el as HTMLElement).dataset.id!));
delegate(root, 'click', ACTIONS.edit.selector,   (_e, el) => todos.actions.startEdit((el as HTMLElement).dataset.id!));
delegate(root, 'click', ACTIONS.filter.selector, (_e, el) => todos.actions.setFilter((el as HTMLElement).dataset.value as Filter));
delegate(root, 'click', ACTIONS.clearDone.selector, () => todos.actions.clearDone());

// Enter on the new-todo input.
delegate(root, 'keydown', '[data-new]', (e, el) => {
  if ((e as KeyboardEvent).key !== 'Enter') return;
  const input = el as HTMLInputElement;
  todos.actions.add(input.value);
  input.value = '';
});

// Enter / Esc on the edit input.
delegate(root, 'keydown', '[data-edit]', (e, el) => {
  const ev = e as KeyboardEvent;
  const input = el as HTMLInputElement;
  if (ev.key === 'Enter') todos.actions.commitEdit(input.dataset.id!, input.value);
  else if (ev.key === 'Escape') todos.actions.cancelEdit();
});

// Tier 2 (capture): blur doesn't bubble.
delegateCapture(root, 'blur', '[data-edit]', (_e, el) => {
  const input = el as HTMLInputElement;
  if (todos.state.value.editingId === input.dataset.id) {
    todos.actions.commitEdit(input.dataset.id!, input.value);
  }
});