Comportement d'enveloppement <T>

Aperçu

Cette page décrit le comportement exact de la façon dont l'outil CLI enveloppe le composant <T>.

En règle générale, le CLI enveloppera le composant <T> autour de tout contenu statique et significatif. Il enveloppera également un composant <Var> autour de tout sous-contenu dynamique contenu dans un composant <T>.

Par exemple, ce qui suit sera enveloppé dans un composant <T> :

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

mais ce qui suit ne le sera pas :

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

L'outil CLI s'assurera toujours que le résultat final est un JSX valide et utilise correctement le composant <T>.

Dans certains cas, comme avec les opérateurs logiques, une intervention humaine pourrait être utile pour assurer de meilleures traductions avec plus de contexte.

Expressions JSX

Le CLI enveloppera automatiquement les expressions {...} dans des composants <Var>. C'est parce que les expressions sont généralement dynamiques.

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

Contenu statique dans les expressions JSX

L'exception à la règle d'enveloppement des expressions est lorsque l'expression contient du contenu statique.

Par exemple, ce qui suit ne sera pas enveloppé dans un composant <Var> :

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

Littéraux de modèle dans les expressions JSX

Le CLI enveloppera les littéraux de modèle contenant des quasis (${}) dans un composant <Var>ent, car ils peuvent être dynamiques.

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

Opérateurs logiques

Les expressions JSX contenant des opérateurs logiques tels que &&, ||, et ? seront enveloppées dans un composant <Var>, si un composant <T> est nécessaire au niveau supérieur. (c'est-à-dire s'il y a d'autre contenu significatif en dehors de l'expression)

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

Dans l'expression, le CLI traitera les éléments comme s'ils étaient complètement indépendants du reste de l'expression.

Cela signifie qu'ils seront enveloppés dans leurs propres composants <T> (pour s'assurer que tout le contenu est traduisible)

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

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