Nothing to pack yet.
`; } ``` `html` is a tagged template. It reads like a string of HTML, but nothing is parsed from strings at run time and nothing can inject markup into it: the browser parses the template once, and the values you put in `${}` slots are bound to exact places in it. The function returns a `View`, which is what `render`, the router, and other templates accept. ## The route Pages appear through the route table in `src/routes.ts`. Import the component next to the other imports: ```ts import { Packing } from "./components/packing.ts"; ``` Then add an entry to the table, next to `home`, `counter`, and `packages`: ```ts packing: route({ path: "/packing", view: () => Packing(), head: { title: "Packing list" } }) ``` The key, `packing`, is the route's name. The path is matched against the URL, the view renders when it matches, and `head` sets the document title while the page is open. ## The link Links are plain anchors. The router handles clicks on links to its own routes, so the page changes without a reload, and every other link works as a link always does. The starter's layout in `src/components/layout.ts` already builds its navigation from the route names, so add one more line to the `nav` there: `${Link({ href: router.href("packing"), label: "Packing", exact: false })}`. `router.href("packing")` builds the URL from the route's name. Since the route table is typed, a misspelled name or a missing parameter is a type error in your editor rather than a broken link in production. Save, click Packing in the header, and the new page appears with its title in the browser tab. ## What you learned - A component is a function that returns a view, written with the `html` tag. - A page is a route: a path, a view, and its head. - Links are anchors, and `router.href` builds them from route names. # State and lists The list needs items, and the items will change: you will add some, check some off, and remove some. In zerolith, a value that changes over time lives in a signal. ## A signal for the items Create `src/store.ts`, a module for the list's state: ```ts // The packing list's state: one signal holding every item. import { signal } from "zerolith"; export interface Item { id: number; name: string; packed: boolean; } export const items = signal${count} items
${count} items
${count} items
${packedCount} of ${total} packed
${Filters()}Nothing to show here.
`)} ${AddItem()}`; } ``` `each` now renders `shown` instead of `items`, so the rows follow the filter. `when` renders its view while the condition is true and removes it when the condition turns false; an optional third argument renders while it is false. Here it shows a note when the filter leaves no rows, such as choosing Left to pack once everything is packed. > [!NOTE] > `when` is zerolith's if and else, the place of a `? :` in React or `@if` and `@else` in Angular. Its condition is a signal, so `empty` is a computed value; a function there fails with `when_condition_function`, since it would always count as true. ## What you learned - Derived values are computed, never set, so they cannot drift from their sources. - Computed values are lazy and cached. - `when` shows a view while a condition holds; `each` is for lists that change, `map` for fixed ones. # Saving with effects Reload the page and the list resets, because it lives only in memory. The fix is to read the list from the browser's storage when the app starts and write it back whenever it changes. Writing to storage is a side effect: it reaches outside the page's own state. In zerolith, code that should run whenever some signals change is an `effect`. ## Load, then save Update `src/store.ts`: ```ts // The packing list's state, kept in the browser's storage between visits. import { computed, effect, signal } from "zerolith"; export interface Item { id: number; name: string; packed: boolean; } export type Filter = "all" | "left" | "packed"; const storageKey = "packing-list"; const firstItems: Item[] = [ { id: 1, name: "Passport", packed: true }, { id: 2, name: "Phone charger", packed: false }, { id: 3, name: "Rain jacket", packed: false } ]; function stored(): Item[] { try { const text = localStorage.getItem(storageKey); return text === null ? firstItems : (JSON.parse(text) as Item[]); } catch { return firstItems; } } export const items = signal${packedCount} of ${total} packed
${Filters()}Nothing to show here.
`)} ${AddItem()}