Expressions

Using Expressions

Expressions let you access variables and methods from your data context as well as template helpers that can be used to output dynamic values in your html.

Expressions are a reactive context meaning they will automatically update when the underlying value changes.

Expression Syntax

Expressions support two separate syntaxes, spaced arguments or “semantic style” and regular javascript style arguments.

To play around with expressions try out the expression evaluation example.

Semantic Expressions (Lisp)

Spaced arguments do not require parenthesis or commas, simply include a space between arguments

{doSomething arg1 arg2}

If theres a preferred evaluation order you will need to add parenthesis

{doSomething arg1 (doSomethingElse arg1) }

Standard Expressions (JS)

You can also simply specify any valid javascript inside an expression

{ doSomething(arg1, arg2) }

Any valid javascript can be used inside an expression

{ doSomething(arg1 + 2, arg2 + 3)}

Including nested objects

{ doSomething({a: 1, b: 2}) }

Mixed Style

It’s okay to mix between Semantic and Javascript style expressions.

If the javascript is more complex than a simple object or array, you will need to wrap the expression in parenthesis.

{ doSomething (arg1 + 2) (arg2 + 3) {a: 1, b: 2} }

How Expressions are Evaluated

Finding Data

Template expressions are evaluated against the template’s data context which includes the values and functions that are invokable for a template.

Your data context includes settings, state, template helpers, values set on your component instance, and in the special case of subtemplates data passed in directly.

Expressions are evaluated right to left with variables being read from the component’s data context

{concat firstName ' ' lastName}

evaluates to

concat(firstName, ' ', lastName);

For an explanation of how a component’s data context is determined see component data context

Evaluation Order

If an intermediary function is found it will pass the result through

{titleCase concat firstName ' ' lastName}

evaluates to

titleCase(concat(firstName, ' ', lastName))

Parenthesis

If parenthesis are used it will respect the evaluation order

{formatDate (getDate now) 'h:mm'}

evaluates to

formatDate(getDate(now), 'h:mm'))

Expression Locations

Attributes

If an attribute expression includes quotes it will output as a string regardless of the expression value.

For instance

<a data-number="{getZero}">

will output as

<a data-number="0"></a>

Boolean Attribute

If an attribute expression omits quotes the entire attribute will be removed if the expression is falsey

Special attributes like checked will also behave this way meaning you can use false and 0 to remove the entire attribute value.

Special Attributes - The following attributes will reproduce this behavior allowfullscreen async autofocus autoplay checked controls default defer disabled formnovalidate inert ismap itemscope loop multiple muted nomodule novalidate open playsinline readonly required reversed selected.

<input type="checkbox" checked={isChecked} />

If isChecked == true will output

<input type="checkbox" checked />

and if isChecked == false it will omit the attribute altogether

<input type="checkbox" />

Reactivity

Template expressions are reactive contexts meaning that they will re-evaluate automatically if a Signal is updated.

Hello {getFullName}

const createComponent = ({ state }) => ({
  getFullName() => `${state.firstName.value} ${state.lastName.value}`;
});

Example

The following example shows various ways you can use expressions using both lisp-like syntax and javascript