Actions

Actions are prop values for callback props that traditionally take functions, defining what happens when an event fires. An action names a handler in $action and passes it arguments in $args:

{ "$action": "set", "$args": ["/email", { "$arg": "$0" }] }

Required

• $action (string): Name of the handler to dispatch. The available handlers and their argument signatures are defined by the engine and application (e.g. set, reset, focus, submit).

Optional

• $args (array): Arguments passed to the handler. Each entry is an expression: a literal, a data reference, a translation reference, an inline message, or a scoped argument.

Sequences

To dispatch several handlers in order, use an array of actions in the prop's value position, the same "one or many" shape as nested elements:

{
  "type": "button",
  "props": {
    "label": "Submit",
    "onPress": [
      { "$action": "set", "$args": ["/submitted", true] },
      { "$action": "focus", "$args": ["#confirmation"] }
    ]
  }
}

Behavior

Dispatches the named handler(s) with the resolved arguments when the callback fires; an array dispatches in order. When the callback fires it injects its positional arguments into scope as the scoped arguments $0, $1, … (typically $0 is the event value), readable in $args through $arg.

Arguments are resolved at dispatch time, against the data context as it is when the event fires, not as it was when the element rendered. Naming a handler the engine does not provide is an error raised at that entry: earlier actions of the sequence have already dispatched, and the remaining ones are not.

Example

Assign the callback value to a data field, pairing a plain read with a set dispatch (a $field binding does both implicitly, plus field state):

{
  "type": "input",
  "props": {
    "value": { "$data": "/email" },
    "onChange": { "$action": "set", "$args": ["/email", { "$arg": "$0" }] }
  }
}