decl

Declarations: a template's own state, derived values and handlers.

state count = start ?? 0
let left = todos |> count(t -> !t.done)
on add = todos <- todos + [{ title: draft, done: false }], draft <- ""
on remove(id) = todos <- todos |> filter(t -> t.id != id), emit("removed", id)
load posts = get("/api/posts?tag=" + tag)
on save = post("/api/todos", { title: draft }, saved, failed)
every 1 when running = elapsed <- elapsed + 1
after 0.9 when mismatched = tiles <- hide(tiles)
every frame when playing = angle <- angle + event.delta * 0.05
fn label(n) = if n == 1 then "1 item" else "{n} items"
use "shared.weft"
static params = posts |> map(p -> p.slug)
provide cart, add
@resize: width <- event.innerWidth
@keydown: press(event.key)

A fn is a function of values. A use brings in another file's fn, let and data declarations. static params lists a page's route parameters for the pages built ahead of time. provide lets the pages and components inside a layout read its names and call its handlers.

A handler is a pure transition: each state <- expr says what the state becomes in terms of what it is (and event, and the parameters). Every right-hand side reads the state as it was, and the new values are set together. Commands (emit, navigate, requests, reload) run afterwards. A request's answer comes back later, to the handler it names.

A load is data that follows what its request reads, and a timer runs its steps (as a handler's) while its condition holds. @event: … runs steps, or calls a handler, for each window event of that kind while the component is on the page.