Counter
Count up or down, and type a step size to change how far each click goes. The count and the step are TAB signals, and data-bind keeps the step input and its signal in sync.
Signals hold reactive state. The count and the step are signals, and their new values reach the page over the SSE stream.
data-bind creates two-way binding between an input and a signal. Type a new step value and it syncs to the server automatically.
Actions are server-side functions triggered by button clicks. Each action modifies the signal and pushes the new value to the browser.
No JavaScript authored: every interaction is a server round-trip. Datastar handles the SSE connection, the DOM patches and the signal store.
TAB scope (the default) means each browser tab has its own independent counter. Open two tabs: clicking in one will not affect the other.
No sync call: after an action, php-via sends the signals it changed down the SSE stream without rendering the view again.
Count: 0
Signals
count
int tab scope initial: 0 Current counter value. Updated by increment, decrement, and reset actions.
step
int tab scope initial: 1 Increment/decrement step size. Two-way bound to the input via data-bind.
Actions
increment
Adds step to count; the new value goes to the browser after the action.
decrement
Subtracts step from count.
reset
Resets count back to 0, ignoring the current step value.
Views
counter.html.twig
Uses data-text for reactive count display and data-bind for two-way step input.