Reactive props

Share mutable state between parent pages and child components with bind: and Aero.bindable().

The problem

Component props are build-time values. A parent counter and a child header that both edit the same number need either duplicated state, callback props, or an external store.

What this looks like without Aero

Parents pass initial values; children copy them into local variables. Keeping parent and child in sync means custom events or shared global state.

How Aero helps

Reactive props let a parent pass a state binding into a child with bind:<name>. The child declares the prop in <script is:state> and marks it mutable with Aero.bindable().

Reactive props are readonly by default. Only props declared with Aero.bindable() (or Aero.bindable(fallback)) accept writes from the child.

Parent: pass a binding

<!-- pages/counter.html -->
<script is:state>
	let count = 0
</script>

<header-component bind:count="{ count }" />
<button on:click="{ count++ }">{ count }</button>

Child: accept a bindable reactive prop

<!-- components/header.html -->
<script is:state>
	const { count = Aero.bindable(0) } = Aero.props
</script>

<div>
	<button on:click="{ count-- }">−</button>
	<span>{ count }</span>
	<button on:click="{ count++ }">+</button>
</div>

Aero.bindable() marks count as writable from the child. Parents must pass bindable props with bind:count — one-way count="{ count }" is an error. Aero.bindable(0) makes the prop optional when the parent omits bind:count.

Required vs optional

Destructuring defaults drive the contract:

Declaration	Required?	Bindable?
count	yes	no (readonly)
label = 'Counter'	no	no (readonly)
count = Aero.bindable(0)	no	yes
count = Aero.bindable()	yes	yes

Required bindable props must be passed with bind:<name>. aero check and the VS Code extension report missing or one-way bindings.

Readonly reactive props

Props destructured from Aero.props without bindable() are readonly in the child state script. Assigning to them is a compile-time diagnostic:

<script is:state>
	const { label } = Aero.props // readonly — display only
</script>

<p>{ label }</p>

Pass readonly reactive props with label="{ label }". To allow the child to mutate a prop, use Aero.bindable() on the child and bind:<name> on the parent.

Build-time props vs reactive props

Mechanism	When	Example
Build props	Static data at render time	title="{ site.title }"
Reactive props	Shared mutable client state	bind:count="{ count }"

Build scripts still use Aero.props for static attributes. State scripts use Aero.props with bindable() for reactive data.