Vue d’ensemble

Nous constatons souvent que plus une base de code est mature, plus le contenu est fragmenté. Les phrases finissent par être disséminées entre les fonctions, les utilitaires, la logique et les services.

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}
function getObject(toy, gender) { 
  return toy === "ball" ? "ball" : getSubject(gender)
}

function Component({ gender, toy }) {
  return (
    <>
      <p>
        The beautiful {getSubject(gender)} plays with the {getObject(toy, gender)}.
      </p>
    </>
  )
}

Quand le moment d’internationaliser devient inévitable, les développeurs se rendent compte qu’ils se sont enfermés dans une impasse. Gérer des éléments comme l’accord, la conjugaison et les changements d’ordre des mots dans plusieurs fichiers devient ingérable sans refonte majeure. Traditionnellement, cela signifiait extraire manuellement toutes les permutations possibles de chaque phrase et les ajouter à un dictionnaire de traduction.

Dans gt-next 6.8.0, nous renforçons notre conviction qu’une bonne bibliothèque d’i18n doit s’adapter à une base de code, et non l’inverse. Bien que gt-next traduise déjà le contenu en ligne, il lui manque deux fonctionnalités fondamentales pour ce type de bibliothèque : (1) la prise en charge de la fragmentation des phrases et (2) du contenu réutilisable, tout en préservant l’accord, la conjugaison et les changements d’ordre des mots.

Nous introduisons le composant <Static> pour permettre des appels de fonction statiques directement dans les traductions.

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}
function getObject(type, gender) { 
  return type === "ball" ? "ball" : getSubject(gender)
}

function Component({ gender, toy }) {
  return (
    <T>
      <p>
        The beautiful <Static>{getSubject(gender)}</Static> plays with the <Static>{getObject(toy, gender)}</Static>.
      </p>
    </T>
  )
}

Considérations importantes

Cela dit, nous vous recommandons vivement d’utiliser le composant <Static> avec prudence et discernement. Bien que puissant, le composant <Static> peut aussi entraîner une forte augmentation du nombre d’entrées de traduction. S’il est mal utilisé, cela peut avoir un impact négatif sur les temps de chargement d’une application.

Comment utiliser <Static>

Tout comme les composants <T> et <Var>, le composant <Static> sert d’indicateur pour dire à l’outil CLI où chercher — et où ne pas chercher — du contenu traduisible. Il indique à l’outil CLI de déréférencer un appel de fonction à l’intérieur des balises <Static> et de recenser tous les contenus possibles renvoyés par cette fonction. Considérez chaque instruction return comme si elle était enveloppée dans un composant <T>.

Une fois que l’outil CLI a trouvé toutes les sorties possibles d’un appel de fonction, il crée une entrée de traduction distincte pour chacune d’elles. Par exemple, le code suivant crée deux entrées de traduction distinctes : "The boy is beautiful" et "The girl is beautiful". Comme une entrée de traduction différente existe pour chaque sortie possible, on peut prendre en charge l’accord, la conjugaison et l’ordre des mots dans une phrase fragmentée : "El niño es hermoso" et "La niña es hermosa".

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}
function Component({ gender }) {
  return (
    <T>
      The <Static>{getSubject(gender)}</Static> is beautiful.
    </T>
  )
}

Limites et améliorations à venir

Multiplication

Comme indiqué précédemment, le composant <Static>, s’il est utilisé de manière trop large, peut générer un grand nombre d’entrées de traduction, ce qui risque d’avoir un impact négatif sur les temps de chargement. Par exemple, prenons un composant contenant deux composants <Static>, chacun encapsulant un appel de fonction avec deux résultats possibles. Dans ce cas, quatre entrées de traduction sont créées. Chaque composant <Static> supplémentaire multiplie le nombre de traductions par le nombre de résultats possibles pour chaque appel de fonction.

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}
function getObject(toy) { 
  return toy === "ball" ? "ball" : "crayon"
}
function Component({ gender, toy }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static> plays with the <Static>{getObject(toy)}</Static>.
    </T>
  )
}

Syntaxe

Il est important de traiter chaque instruction return comme si elle était encapsulée dans un composant <T>. Les variables ou appels de fonction dynamiques doivent toujours être encapsulés dans des composants <Var>.

Actuellement, <Static> ne prend en charge que les appels de fonction comme enfants, mais il pourra à l’avenir prendre en charge des expressions plus complexes. Depuis gt-next 6.8.0, la syntaxe suivante est prise en charge pour les fonctions statiques :

function getExamples(key) {
  switch (key) {
    case "string, number, and boolean literals":
      if (condition1) {
        return "The boy"
      } else if (condition2) {
        return 22
      } else {
        return true
      }
    case "jsx expressions":
      return (
        <>
          Hello, <Static>{getTitle(title)}</Static>. How are you, <Var>{name}</Var>?
        </>
      );
    case "ternary operators":
      return condition ? "The boy" : "The girl"      
    case "function calls":
      return otherStaticFunction();
  }
}

Conclusion

gt-next 6.8.0 introduit le composant <Static> comme solution à la fragmentation des phrases, sans sacrifier la couverture des traductions ni la justesse des accords grammaticaux.