Expressions

Resolution and Scoping

Two rules govern how prop values are read across the whole language:

Everything that resolves to a value is an expression, and expressions compose anywhere a value is expected: as a prop value, in a conditional condition or branch, in a map source or template, and as an action argument. Expressions are also accepted deeply: every nested position inside a prop's objects and arrays may hold an expression in place of its literal value. These are called deep expressions:

{
  "type": "button",
  "props": {
    "label": "Submit",
    "layout": { "direction": "horizontal", "gap": { "$data": "/gap" } }
  }
}

An enclosing construct injects scoped arguments into the scope beneath it, read through $arg. A map injects $item and $index into its template; an action injects the callback's positional arguments $0, $1, …; a translation tag injects $content. A scoped argument is only valid within the scope of the construct that injects it. See Scoped Arguments.

Expression Types

An expression resolves to a single value: a literal, a data reference, a translation reference, or a scoped argument. A field binding also appears in value position but additionally registers form state.

Literal Values

Static values matching the prop's expected type:

{
  "type": "button",
  "props": { "label": "Click me", "disabled": false }
}

Data References

Data references resolve to a value from the data context using a JSON Pointer:

{ "$data": "/path/to/field" }

Required

• $data (string, JSON Pointer RFC 6901): Path to a field in the data. The empty pointer "" resolves to the whole data context.

Returns: The value at that pointer location.

Example

{
  "type": "text",
  "props": { "children": { "$data": "/name" } }
}

Translation References

Translation references resolve to a message from the active locale's catalog:

{ "$t": "form.greeting" }

Required

• $t (string): Catalog key of the ICU MessageFormat message to format.

Optional

• $params (object): Values interpolated into the message. Each value is itself resolved as an expression first, so data references, conditionals, and nested translation references are allowed.
• $tags (object): Elements rendering the message's tags, keyed by tag name. Each tag receives its formatted chunks as the $content scoped argument, injected into the mapped element's scope.

Returns: The formatted message string.

Example

{
  "type": "button",
  "props": {
    "label": {
      "$t": "form.greeting",
      "$params": { "name": { "$data": "/name" } },
      "$tags": {
        "strong": {
          "type": "text",
          "props": { "children": { "$arg": "$content" } }
        }
      }
    }
  }
}