Vue d’ensemble

Dans gt-next@6.8.0, nous avons introduit le composant <Static> pour remédier à la fragmentation des phrases et favoriser la réutilisation du code dans le contenu JSX. Ce composant permet d’appeler directement des fonctions statiques dans les traductions tout en préservant la concordance, la conjugaison et les changements d’ordre des mots selon la langue. Cependant, il restait un manque pour les traductions basées sur des chaînes utilisant gt() et msg(). Comme avec JSX, de nombreuses applications s’appuient largement sur la construction de chaînes via des fonctions utilitaires, surtout dans les bases de code matures où le contenu traduisible est réparti entre services, utilitaires et logique métier.

gt-next 6.12.0 comble ce manque en introduisant declareStatic() - l’équivalent textuel du composant <Static> - ainsi que les fonctions associées declareVar() et decodeVars().

Fonctionnalités principales

declareStatic()

Fonctionne de manière similaire à <Static>, mais pour les fonctions de chaîne. La CLI analyse tous les chemins de retour possibles et crée une entrée de traduction distincte pour chaque résultat.

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

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

declareVar()

L’équivalent sous forme de chaîne de caractères de <Var> : marque le contenu dynamique dans les fonctions declareStatic() qui doit être exclu des calculs de hash et traité comme variable au runtime. Pour cela, il encapsule le contenu dynamique dans une instruction select compatible ICU, qui est résolue en contenu dynamique d’origine lors de l’interpolation.

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

decodeVars()

Comme declareVar() ajoute des marqueurs compatibles avec l’ICU dans le texte source, l’utilisation de declareVar() seule peut poser des problèmes avec la logique existante de traitement des chaînes. Pour extraire la valeur d’origine, il suffit d’envelopper la chaîne source dans decodeVars().

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

Autres améliorations

Fonctions de chaîne étendues

gt() et msg() prennent désormais en charge la concaténation de chaînes, uniquement pour les chaînes statiques :

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

Prise en charge étendue de <Static>

Jusqu'à présent, le composant <Static> ne prenait en charge que les appels de fonction comme enfants. Il peut désormais prendre en charge des expressions JSX arbitraires pouvant être résolues au moment du build, comme du texte JSX imbriqué, des opérateurs ternaires, des instructions conditionnelles et des appels de fonction.

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

Considérations relatives aux performances

Comme <Static>, declareStatic() multiplie les entrées de traduction. Chaque appel de fonction avec plusieurs issues crée des traductions distinctes, et plusieurs appels à declareStatic() dans la même chaîne multiplient exponentiellement le nombre total d'entrées. Utilisez cette fonctionnalité avec parcimonie et préférez les instructions ICU select lorsque le facteur de multiplication devient trop important.