Introducción

Uno de los errores más comunes que veo en internacionalización es la tendencia a dividir expresiones ternarias simples en varias llamadas de traducción. Suele verse algo así:

const gt = useGT()

return (
  <>
    <span>
      <T> Dark Mode: </T>
    </span>
    <Button>{enabled ? gt('On') : gt('Off')}</Button>
  </>
)

En su mayor parte, esto funciona como se pretende. Antes de implementar i18n, el código probablemente se veía más o menos así: { enabled ? 'On' : 'Off' }. Añadir la función gt() para i18n seguramente fue una extensión natural de la estructura de código existente.

Cada vez que veo esto, me da un pequeño escalofrío. No es en absoluto como se diseñó para usarse la biblioteca. Hay dos razones por las que esto es un error, especialmente en el contexto del uso de traducción automática: (1) Contexto y (2) Flexibilidad.

Contexto

El significado no solo está en las palabras, sino también en cómo se presentan. La palabra "back", si aparece en una flecha para volver atrás, probablemente signifique algo muy distinto de la palabra "back" en el currículum de un quiropráctico. Además, sin un contexto más amplio, los traductores (incluso los humanos) podrían tener dificultades para traducir correctamente la palabra. Hay una historia famosa sobre el equipo de i18n de WhatsApp que tradujo la palabra "crop" en una herramienta de edición de imágenes como "crop" en el sentido de cultivo agrícola en alemán.

Para resolver este problema de contexto, podemos pasar información sobre la presentación del contenido con los componentes <T> y <Branch>. En nuestro ejemplo, esto le daría a nuestro "traductor" una idea más clara de lo que significan "on" y "off".

<T>
  <span>Dark Mode:</span>
  <Button>
    <Branch branch={enabled.toString()} true="On" false="Off" />
  </Button>
</T>

Flexibilidad

Más allá de context, otra forma muy útil de aprovechar la traducción con LLM es su capacidad para entender código. Veamos un ejemplo en el que el orden de los componentes puede cambiar según el idioma:

<T>
  I eat lunch at <Branch branch={atHome.toString()} true="home" false="work" />.
</T>

Así que tenemos dos oraciones posibles:

• "Almuerzo en casa"
• "Almuerzo en el trabajo"

En mandarín tendríamos:

• "我在家吃午餐"
• "我在公司吃午餐"

El componente <T> reconoce que aquí el orden de la oración debe cambiar y reorganiza sus elementos hijos en consecuencia, algo que no es fácil de lograr al usar operadores ternarios con traducción de cadenas.

<T>
  我在
  <Branch branch={atHome.toString()} true="家" false="公司" />
  吃午餐。
</T>

Conclusión

Si te quedas con algo de este artículo, que sea esto: siempre debes buscar formas de aprovechar el contexto y la flexibilidad en tu código. Usar el componente <Branch /> es probablemente una de las formas más sencillas de hacerlo.

Consulta la documentación del componente <Branch /> para más detalles.