Vue d’ensemble

Dans gt-next@6.8.0, nous avons introduit le composant <Static> pour résoudre la fragmentation des phrases et améliorer la réutilisation du code dans le contenu JSX. Le composant permet d’appeler des fonctions statiques directement à l’intérieur des traductions tout en préservant l’accord, la conjugaison et les changements d’ordre des mots entre les langues. Cependant, cela laissait un vide pour les traductions basées sur des chaînes utilisant gt() et msg(). Comme avec JSX, de nombreuses applications s’appuient fortement sur la construction de chaînes via des fonctions utilitaires, en particulier dans des bases de code matures où le contenu traduisible est disséminé entre les services, les utilitaires et la logique métier.

gt-next 6.12.0 comble ce vide en introduisant declareStatic() – l’équivalent, pour les chaînes, du composant <Static> – ainsi que les fonctions associées declareVar() et decodeVars().

Fonctionnalités de base

declareStatic()

Fonctionne de manière similaire à <Static>, mais pour les fonctions de chaînes de caractères. La CLI analyse tous les chemins de retour possibles et crée des entrées de traduction distinctes pour chaque résultat.

const getDisplayName = (name) => {
  return name ? declareVar(name) : 'Quelqu\'un';
};

gt(`${declareStatic(getDisplayName(name))} dit bonjour.`);

declareVar()

L’équivalent sous forme de chaîne de caractères de <Var> : marque le contenu dynamique à l’intérieur des fonctions declareStatic() qui doit être exclu des calculs de hachage et traité comme une variable à l’exécution. Pour cela, il encapsule le contenu dynamique dans une instruction select compatible ICU qui est évaluée en le 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 ICU dans le texte source, l’utiliser seul peut créer des problèmes pour la logique de traitement de chaînes existante. Pour récupérer 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înes de caractères améliorées

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

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. Désormais, il peut prendre en charge des expressions JSX arbitraires résolubles au moment du build, telles que du texte JSX imbriqué, des opérateurs ternaires, des instructions conditionnelles et des appels de fonction.

function getDisplayName(name) {
  return name ? <Var>{name}</Var> : 'Quelqu\'un';
};
...
<T>
  <Static>
    Bonjour {getDisplayName("Brian")} !
    {
      isFriend ? " Comment allez-vous ?" : " Quoi de neuf ?"
    }
  </Static>
</T>

Considérations relatives aux performances

Comme <Static>, declareStatic() multiplie les entrées de traduction. Chaque appel de fonction avec plusieurs résultats possibles crée des traductions distinctes, et plusieurs appels à declareStatic() dans la même chaîne multiplient le nombre total d’entrées de manière exponentielle. Utilisez cette fonctionnalité avec parcimonie et privilégiez les expressions select d’ICU lorsque le facteur de multiplication devient excessif.