<T> Wrapping Behavior
Specific behavior of how the CLI tool wraps the `<T>` component
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:
but the following will not:
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.
Please report any bugs or unexpected behavior to us on Github.
JSX expressions
The CLI will automatically wrap expressions {...}
in <Var>
components.
This is because expressions are typically dynamic.
Content contained within a <Var>
component will not be translated.
If you would like to translate dynamic content, you should use the <Tx>
component instead.
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:
Template literals in JSX expressions
The CLI will wrap template literals containing quasis (${}
) in a <Var>
component, since they can be dynamic.
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)
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)