Introducción

Uno de los errores más comunes que veo en internacionalización es la tendencia a dividir expresiones ternarias simples en múltiples llamadas de traducción. A menudo se ve algo como esto:

const gt = useGT()

return (
  <>
    <span>
      <T> Modo oscuro: </T>
    </span>
    <Button>{enabled ? gt('Activado') : gt('Desactivado')}</Button>
  </>
)

En la mayoría de los casos, esto funciona como se pretende. Antes de implementar i18n, el código probablemente se veía algo así como { enabled ? 'On' : 'Off' }. Agregar la función gt() para i18n probablemente fue solo una extensión natural de la estructura de código existente.

Cada vez que veo esto, me da un poco de escalofríos. Esta no es en absoluto la forma en que la biblioteca fue diseñada para usarse. Hay dos argumentos de por qué esto es un error, especialmente en el contexto de usar 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 de regreso, probablemente signifique algo muy distinto que la palabra "back" en el currículum de un quiropráctico. Además, sin un contexto más amplio, los traductores (incluso los humanos) pueden tener dificultades para traducir la palabra correctamente. Hay una historia famosa del departamento de i18n de WhatsApp que tradujo la palabra "crop" en una herramienta de edición de imágenes como "cultivo", en el sentido de agricultura, en alemán.

Para evitar 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>Modo oscuro:</span>
  <Button>
    <Branch branch={enabled.toString()} true="Activado" false="Desactivado" />
  </Button>
</T>

Flexibilidad

Más allá del contexto, otra forma interesante de aprovechar la traducción con LLM es gracias a su comprensión del código. Veamos un ejemplo en el que el orden de los componentes podría cambiar según el idioma:

<T>
  Almuerzo en <Branch branch={atHome.toString()} true="casa" false="el trabajo" />.
</T>

Entonces tenemos dos oraciones posibles:

• "I eat lunch at home"
• "I eat lunch at work"

En mandarín tendríamos:

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

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

<T>
  Almuerzo en
  <Branch branch={atHome.toString()} true="casa" false="la oficina" />.
</T>

Conclusión

Si hay algo que deberías sacar de este artículo, es que 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.