JavaScript in TSX with braces

TSX lets you write markup in a JavaScript file, and braces let you reach back into JavaScript from the markup: to show a variable, call a function, or pick a class. In weft, braces do one more thing. An expression in braces is live: when something it reads changes, it is worked out again and only that spot in the page is written.

Passing strings with quotes

To pass a fixed string as an attribute, put it in single or double quotes, as in HTML:

export function Avatar() {  return <img class="avatar" src="https://i.imgur.com/7vQD0fPs.jpg" alt="Gregorio Y. Zara" />}

To pass a value from JavaScript instead, replace the quotes with braces:

export function Avatar() {  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'  const description = 'Gregorio Y. Zara'  return <img class="avatar" src={avatar} alt={description} />}

class="avatar" is the string "avatar". src={avatar} reads the variable avatar.

Using braces: a window into JavaScript

Inside braces you can write any JavaScript expression: a variable, a property, arithmetic, a call.

export function TodoList() {  const name = 'Gregorio Y. Zara'  return <h1>{name}'s To Do List</h1>}

A function call works too. Here the heading shows today's weekday:

const today = new Date()function formatDate(date: Date) {  return new Intl.DateTimeFormat('en-GB', { weekday: 'long' }).format(date)}export function Today() {  return <h1>To do on {formatDate(today)}</h1>}

Where to use braces

Braces can go in two places in TSX:

1. As text inside a tag: <h1>{name}'s To Do List</h1> works, and <{tag}>Gregorio</{tag}> doesn't. A tag name isn't an expression.
2. As an attribute value, straight after =: src={avatar} reads avatar, while src="{avatar}" passes the string "{avatar}" with the braces in it.

Expressions only, not statements: braces can hold a ? b : c, but not if (a) { … }. Ways to branch are on Conditional rendering.

Double braces: objects in markup

Objects in JavaScript are written with braces too, such as { name: 'Hedy Lamarr', inventions: 5 }. To pass an object in TSX, put it inside another pair of braces: person={{ name: 'Hedy Lamarr', inventions: 5 }}. The outer pair says "JavaScript here", and the inner pair is the object.

You'll see this most with style:

export function TodoList() {  return (    <ul style={{ background: 'var(--warp-color-surface-raised)', color: 'var(--warp-color-accent-text)' }}>      <li>Improve the videophone</li>      <li>Prepare aeronautics lectures</li>      <li>Work on the alcohol-fuelled engine</li>    </ul>  )}

There's nothing special about it: {{ and }} are an object inside braces. In weft, style also takes a plain string (style="padding: 0"), so you only need the object form when the values come from JavaScript.

More fun with objects and braces

You can keep several values in one object and read them from it in your markup:

const person = {  name: 'Gregorio Y. Zara',  theme: {    background: 'var(--warp-color-surface-raised)',    color: 'var(--warp-color-accent-text)',  },}export function TodoList() {  return (    <div style={person.theme}>      <h1>{person.name}'s Todos</h1>      <ul>        <li>Improve the videophone</li>        <li>Prepare aeronautics lectures</li>      </ul>    </div>  )}

style={person.theme} passes an object already made, so there's one pair of braces. {person.name} reads a string.

Braces are live

So far every value has been fixed. Here's the difference weft makes: when an expression in braces reads a piece of state (a box, read with .value) or a prop, the compiler turns that spot in the page into a binding. The binding remembers what it read, and runs again when one of those values changes.

import { state } from '@weft-js/core'export function Counter() {  const count = state(0)  return (    <button type="button" onClick={() => count.value++} title={`Clicked ${count.value} times`}>      Clicked {count.value} times    </button>  )}

The button's text and its title both read count.value. Each click changes count, and those two bindings run again: one writes the text node, the other the attribute. The Counter function doesn't run again, and nothing else on the page is touched. In the demo at the top of the page, dragging the slider writes the list's font-size and nothing more.

This is true of every brace in TSX: a text hole, an attribute, a style object, a class object, a prop you pass to a child. There is no list of dependencies to keep up to date: whatever an expression reads while it runs is what it follows, and that can differ from one run to the next. {loggedIn.value ? user.value.name : 'Guest'} follows user only while someone is logged in.

Recap

• Quotes pass a fixed string: class="avatar". Braces pass JavaScript: src={avatar}.
• Braces go inside a tag's content or straight after = in an attribute, and hold expressions, not statements.
• {{ … }} is an object inside braces, most often for style.
• An expression in braces that reads .value or a prop is live: it runs again when what it read changes, and only its own spot in the page is written.
• Read state inside the braces or in derived, not in the component body (W001), and don't forget .value (W015).

Try it