Mesa guide / Reactivity
const
A top-level const that reads reactive state is derived. It recomputes when
anything it reads changes, and you cannot assign to it.
<script>
let price = 20
let quantity = 1
const total = price * quantity
const label = total > 100 ? 'Bulk order' : 'Order'
</script>
<input type="number" bind:value={quantity} />
<p>{label}: {total}</p>
total has no wrapper and no dependency list. Mesa sees that it reads price and
quantity and wires it up. label reads total, so it follows along.
Static unless it can move
A const is derived only when it reaches something that can change: a let, a
prop, a $context read or an awaited value. Every other const is a plain
constant, with no signal behind it.
const MAX = 100 // static
const doubleMax = MAX * 2 // static: MAX cannot move
const page = items.length // derived: items is a let
Derived means lazy
A derived const computes when something reads it, not when it is declared. A
const whose initializer does work, such as subscribing to a channel, only does that
work if the page reads the value, and Mesa warns when a derived const that calls
something is never read. Work that must start at mount belongs in a
var or in $.onMount.
Imports are static
A value imported from another module is invisible to the compiler, so a const
built from one is computed once. To make it follow, see
Shared state.
Derived and writable
A const is authoritative: it recomputes and overwrites. For a derived value that
the user can also overwrite, such as a <select> that starts at the first city, use
writable derived.
Spec: VISION.md § 2.2 · RULE 2