Descripción general

En gt-next@6.8.0, introdujimos el componente <Static> para solucionar la fragmentación de frases y la reutilización de código en contenido JSX. El componente permite hacer llamadas a funciones estáticas directamente dentro de las traducciones, a la vez que preserva la concordanza, la conjugación y los cambios en el orden de las palabras entre idiomas. Sin embargo, esto dejaba un vacío para las traducciones basadas en cadenas de texto que usan gt() y msg(). Al igual que con JSX, muchas aplicaciones dependen en gran medida de construir cadenas mediante funciones utilitarias, especialmente en bases de código maduras donde el contenido traducible está repartido entre servicios, utilidades y lógica de negocio.

gt-next 6.12.0 cierra esta brecha al introducir declareStatic() —el equivalente para cadenas del componente <Static>— junto con las funciones complementarias declareVar() y decodeVars().

Funcionalidad principal

declareStatic()

Funciona de forma similar a <Static>, pero para funciones de cadena. La CLI analiza todas las rutas de retorno posibles y crea entradas de traducción independientes para cada caso.

const getDisplayName = (name) => {
  return name ? declareVar(name) : 'Someone';
};

gt(`${declareStatic(getDisplayName(name))} says hello.`);

declareVar()

El equivalente en cadena de <Var>: marca el contenido dinámico dentro de las funciones declareStatic() que debe excluirse de los cálculos de hash y tratarse como variables en tiempo de ejecución. Para ello, envuelve el contenido dinámico en una instrucción select compatible con ICU que, durante la interpolación, se resuelve en el contenido dinámico original.

const greeting = "Hello, " + declareVar(name);
// "Hola, {_gt_, select, other {name}}"

decodeVars()

Como declareVar() añade marcadores compatibles con ICU al texto fuente, usar declareVar() por sí solo puede causar problemas en la lógica existente de procesamiento de cadenas. Para extraer el valor original, solo tienes que envolver la cadena fuente con decodeVars().

const greeting = "Hello, " + declareVar("Brian");
// "Hello, {_gt_, select, other {Brian}}"
const decodedGreeting = decodeVars(greeting);
// "Hello, Brian"

Mejoras adicionales

Funciones de cadena mejoradas

Tanto gt() como msg() ahora admiten la concatenación de cadenas, pero solo para cadenas estáticas:

gt("Hello " + "world");
msg("Welcome, " + "Brian");

Soporte ampliado para <Static>

Hasta ahora, el componente <Static> solo admitía invocaciones de funciones como elementos secundarios. Ahora también puede admitir expresiones JSX arbitrarias que puedan resolverse en tiempo de compilación, como texto JSX anidado, operadores ternarios, sentencias condicionales y llamadas a funciones.

function getDisplayName(name) {
  return name ? <Var>{name}</Var> : 'Someone';
};
...
<T>
  <Static>
    Hello {getDisplayName("Brian")}!
    {
      isFriend ? " How are you?" : " What's up?"
    }
  </Static>
</T>

Consideraciones de rendimiento

Al igual que <Static>, declareStatic() multiplica las entradas de traducción. Cada llamada a función con múltiples resultados crea traducciones independientes, y varias llamadas a declareStatic() en la misma cadena multiplican exponencialmente el número total de entradas. Usa esta función con criterio y prioriza las instrucciones select de ICU cuando el factor de multiplicación sea excesivo.