Comportamiento de envoltura de <T>

Descripción general

Esta página describe el comportamiento exacto de cómo la herramienta CLI envuelve el componente <T>.

Como regla general, la CLI envolverá el componente <T> alrededor de cualquier contenido estático y significativo. También envolverá un componente <Var> alrededor de cualquier subcontenido dinámico contenido dentro de un componente <T>.

Por ejemplo, lo siguiente será envuelto en un componente <T>:

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

pero lo siguiente no lo será:

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

La herramienta CLI siempre se asegurará de que el resultado final sea JSX válido y utilice correctamente el componente <T>.

En algunos casos, como con los operadores lógicos, podría ser útil alguna intervención humana para garantizar mejores traducciones con más contexto.

Expresiones JSX

La CLI envolverá automáticamente las expresiones {...} en componentes <Var>. Esto se debe a que las expresiones son típicamente dinámicas.

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

Contenido estático en expresiones JSX

La excepción a la regla de envoltura de expresiones es cuando la expresión contiene contenido estático.

Por ejemplo, lo siguiente no será envuelto en un componente <Var>:

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

Literales de plantilla en expresiones JSX

La CLI envolverá literales de plantilla que contengan cuasis (${}) en un componente <Var>ent, ya que pueden ser dinámicos.

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

Operadores lógicos

Las expresiones JSX que contienen operadores lógicos como &&, || y ? serán envueltas en un componente <Var>, si es necesario un componente <T> en el nivel superior. (es decir, si hay otro contenido significativo fuera de la expresión)

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

Dentro de la expresión, la CLI tratará los elementos como si fueran completamente independientes del resto de la expresión.

Esto significa que serán envueltos en sus propios componentes <T> (para asegurar que todo el contenido sea traducible)

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

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