Descripción general

En gt-next@6.8.0, introdujimos el componente <Static> para abordar la fragmentación de oraciones y la reutilización de código en contenido JSX. El componente permite llamadas a funciones estáticas directamente dentro de las traducciones, preservando la concordancia, 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 que usan gt() y msg(). Al igual que con JSX, muchas aplicaciones dependen en gran medida de la construcción de cadenas mediante funciones utilitarias, especialmente en bases de código maduras donde el contenido traducible está disperso 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 de soporte declareVar() y decodeVars().

Funcionalidad principal

declareStatic()

Funciona de manera similar a <Static>, pero para funciones que retornan cadenas de texto. La CLI analiza todas las posibles rutas de retorno y crea entradas de traducción independientes para cada resultado.

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

gt(`${declareStatic(getDisplayName(name))} dice hola.`);

declareVar()

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

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

decodeVars()

Debido a que declareVar() agrega marcadores compatibles con ICU en el texto de origen, usar declareVar() por sí solo puede generar problemas con la lógica de procesamiento de cadenas existente. Para extraer el valor original, solo necesitas envolver la cadena de origen en decodeVars().

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

Otras mejoras

Funciones de cadena mejoradas

Tanto gt() como msg() ahora permiten la concatenación solo para cadenas estáticas:

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

Compatibilidad ampliada de <Static>

Hasta ahora, el componente <Static> solo admitía invocaciones de funciones como hijos. Ahora puede admitir expresiones JSX arbitrarias que se puedan resolver 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 el número de entradas de traducción. Cada llamada a la función con múltiples resultados crea traducciones independientes, y múltiples llamadas a declareStatic() en la misma cadena multiplican el total de entradas de forma exponencial. Usa esta función con criterio y prefiere las sentencias select de ICU cuando el factor de multiplicación resulte excesivo.