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, 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.

Example

Assign the callback value to a data field:

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