Documentation / @zerotal/flow / index / FlowChain

Interface: FlowChain<T>

The fluent modifier chain returned by flow. Each accessor/method appends a directive modifier and returns the same chain, so calls compose left-to-right; the chain is a no-op transparent Proxy at runtime and is consumed by the JSX compiler, which reads __isFlow/__target/__modifiers/__key to emit the flow:* attributes.

Generic over T so the compiler preserves the wrapped target's type (a bound property, an @expose method, or a client arrow-function expression).

Example

// Binding modifiers on an input, and event modifiers on a form/button:
<input bind={flow(this.query).live} />                 // flow:model.live="query"
<form onSubmit={flow(this.save).prevent}>…</form>       // flow:submit.prevent="save"
<button onClick={flow(this.refresh).debounce(300)}>↻</button>

Binding modifiers (bind={flow(this.field)...}) .live sync on every keystroke (flow:model.live) .blur sync on blur (flow:model.blur) .lazy defer until explicit save (flow:model.lazy) .fill also fill sibling fields (flow:model.fill) .debounce(ms) debounce by ms (flow:model.debounce.300ms) .throttle(ms) throttle by ms (flow:model.throttle.300ms)

Server event modifiers (onClick={flow(this.method)...}) .prevent event.preventDefault() (flow:click.prevent) .stop event.stopPropagation() (flow:click.stop) .once remove after first fire (flow:click.once) .self target === currentTarget (flow:click.self) .window attach to window (flow:keydown.window) .document attach to document (flow:keydown.document) .outside click outside element (flow:click.outside) .passive addEventListener passive (flow:scroll.passive) .capture addEventListener capture (flow:click.capture) .camel camelCase event name (flow:custom-event.camel) .debounce(ms) debounce action (flow:click.debounce.300ms) .throttle(ms) throttle action (flow:click.throttle.300ms) .confirm(msg) confirm dialog first (flow:click.confirm)

Client expressions (onClick={flow(() => this.expr)}) An anonymous arrow function as target signals a client-side expression. this. is rewritten to $flow. so TypeScript checks the access against the Component class while the browser evaluates it via the reactive proxy. Emits flow:click (not x-on:click) — the bridge detects $flow and evaluates it in Alpine context instead of sending a WebSocket action. All event modifiers still apply.

<button onClick={flow(() => (this.ticks = 0))}>Reset → flow:click="($flow.ticks = 0)"

<button onClick={flow(() => this.increment()).stop}>+ → flow:click.stop="$flow.increment()" (calls server via $flow proxy)

Usage:

import { flow as _ } from '@zerotal/flow'; // shorthand alias