<T> Wrapping Behavior

Overview

This page describes the exact behavior of how the CLI tool wraps the <T> component.

As a rule of thumb, the CLI will wrap the <T> component around any static, meaningful content. It will also wrap a <Var> component around any dynamic subcontent contained within a <T> component.

For example, the following will be wrapped in a <T> component:

<div>Hello, World!</div> -> <T id="SOME_ID"><div>Hello, World!</div></T>

but the following will not:

<div><img src="logo.png" /></div> -> <div><img src="logo.png" /></div>

The CLI tool will always ensure that the final output is valid JSX and correctly uses the <T> component.

In some cases, such as with logical operators, some human intervention could be useful to ensure better translations with more context.

JSX expressions

The CLI will automatically wrap expressions {...} in <Var> components. This is because expressions are typically dynamic.

<div>Hello, {name}</div> -> <T id="SOME_ID"><div>Hello, <Var>{name}</Var></div></T>

Static content in JSX expressions

The exception to the expression-wrapping rule is when the expression contains static content.

For example, the following will not be wrapped in a <Var> component:

<p>{"Hello," + " World!"}</p> -> <T id="SOME_ID"><p>{"Hello," + " World!"}</p></T>

Template literals in JSX expressions

The CLI will wrap template literals containing quasis (${}) in a <Var> component, since they can be dynamic.

<p>{`${temp}`}</p> -> <T id="SOME_ID"><p><Var>{`${temp}`}</Var></p></T>

Logical operators

JSX expressions containing logical operators such as &&, ||, and ? will be wrapped in a <Var> component, if a <T> component is necessary at the top level. (i.e. if there is other meaningful content outside of the expression)

<div>Hello, {name && {name}} World!</div>

Within the expression, the CLI will treat elements as if they are completely independent of the rest of the expression.

This means that they will be wrapped in their own <T> components (to ensure all content is translatable)

<div>{name ? <>Hello, </> : <>Goodbye, </>}</div>

<T id="SOME_ID">
  <div>
    <Branch branch={name == null}
      true={<>Hello, </>}
      false={<>Goodbye, </>}
    />
    World!
  </div>
</T>