Comportement d'encapsulation de <T>

Aperçu

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

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

Par exemple, ce qui suit sera encapsulé 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 peut être utile pour garantir de meilleures traductions avec plus de contexte.

Expressions JSX

Le CLI encapsulera automatiquement les expressions {...} dans des composants <Var>. Cela s'explique par le fait 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'encapsulation des expressions concerne les expressions qui contiennent du contenu statique.

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

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

Littéraux de gabarit dans les expressions JSX

Le CLI encapsulera les littéraux de gabarit contenant des quasis (${}) dans un composant <Var>, 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 encapsulées dans un composant <Var>, si un composant <T> est nécessaire au niveau supérieur (c'est-à-dire s'il y a un autre contenu significatif en dehors de l'expression).

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

<T id="SOME_ID">
  <div>Hello, <Var>{name && {name}}</Var> World!</div>
</T>

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>
    <Var>
      {name ? <T id="HELLO"><>Hello, </></T> : <T id="GOODBYE"><>Goodbye, </></T>}
    </Var> World!
  </div>
</T>

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