docs: document reactive state attributes

This commit is contained in:
2026-07-14 00:40:11 +05:30
parent 379553bdf7
commit 67c4ed5913
+7 -1
View File
@@ -364,12 +364,18 @@ wrnexus build</code></pre><h2>Where things live</h2><ul><li><code>app/pages</cod
view { <button @click="count++">{count}</button> }
style { button { padding: 12px; } }
}`)}</code></pre>
<h2 id="state">State and interpolation</h2><p>State is scoped to the nearest generated <code>data-scope</code>. Text expressions update reactively after hydration.</p><pre><code>${escape(`state count = 0
<h2 id="state">State and interpolation</h2><p>State is scoped to the nearest generated <code>data-scope</code>. Text and ordinary attribute expressions update reactively after hydration while retaining useful initial SSR values.</p><pre><code>${escape(`state count = 0
state user = { name: "Ada" }
state showPassword = false
view {
<p>Count: {count}</p>
<p>{user.name}</p>
<input type="{showPassword ? 'text' : 'password'}">
<button @click="showPassword = !showPassword"
aria-label="{showPassword ? 'Hide password' : 'Show password'}">
Toggle password
</button>
}`)}</code></pre>
<h2 id="events">Events</h2><p>Any DOM event can use <code>@event="statement"</code>. The compiler emits <code>data-on-event</code>. The expression receives <code>event</code> and can mutate state.</p><div class="table-wrap"><table><thead><tr><th>Syntax</th><th>Purpose</th></tr></thead><tbody><tr><td><code>@click</code></td><td>Pointer or keyboard activation.</td></tr><tr><td><code>@input</code></td><td>Read live field values.</td></tr><tr><td><code>@change</code></td><td>React to committed field changes.</td></tr><tr><td><code>@submit</code></td><td>Handle form submission behavior.</td></tr><tr><td><code>@browser-click</code></td><td>Run only in a browser target.</td></tr><tr><td><code>@mobile-click</code></td><td>Run only in a native/mobile target.</td></tr></tbody></table></div><pre><code>${escape(`<input @input="name = event.target.value">
<button @click="count++">Add</button>