Vue d’ensemble

Dans gt-next 6.6.0, nous adoptons une nouvelle approche pour l’internationalisation des applications « brownfield ». Nous introduisons la fonction t.obj(), qui peut renvoyer des structures de dictionnaire traduites.

Motivation

Les termes « brown field » et « green field » sont empruntés au secteur de l’immobilier. Un « green field » est un terrain sans constructions existantes, tandis qu’un « brown field » comporte déjà des bâtiments. En i18n, cela correspond à des applications sans infrastructure i18n (green field) par opposition à des applications qui disposent déjà d’une infrastructure i18n (brown field).

Jusqu’à présent, notre bibliothèque s’est surtout concentrée sur l’internationalisation des applications « green field ». Prenez par exemple le composant <T> ou le hook useGT().

La seule infrastructure que nous avons construite spécifiquement pour les applications « brown field » se limite aux hooks const t = useTranslations() et const t = getTranslations(), inspirés du pattern de dictionnaire de next-intl. Cependant, notre fonction t() était limitée : elle ne renvoyait que des chaînes de caractères, et non des sous-arborescences du dictionnaire.

Nous avons constaté que les développeurs s’attendent souvent à ce que leur bibliothèque i18n renvoie des sous-arborescences de dictionnaire, et pas seulement des chaînes. Il est donc essentiel que gt-next prenne en charge cette fonctionnalité lorsque les développeurs migrent depuis d’autres bibliothèques i18n.

Utilisation

Considérez la structure de dictionnaire suivante, où vous disposez d’une liste d’éléments sur lesquels vous souhaitez itérer :

{
  "cards": [
    {
      "title": "Carte 1",
      "description": "Description de la carte 1"
    },
    {
      "title": "Carte 2",
      "description": "Description de la carte 2"
    },
    {
      "title": "Carte 3",
      "description": "Description de la carte 3"
    }
  ]
}

Avec notre approche précédente, vous deviez accéder à chaque élément individuellement en utilisant sa clé exacte :

import { useTranslations } from 'gt-next'

export default function Page() {
  const t = useTranslations()

  return (
    <>
      <div>
        {t('cards.0.title')}
        {t('cards.0.description')}
      </div>
      <div>
        {t('cards.1.title')}
        {t('cards.1.description')}
      </div>
      <div>
        {t('cards.2.title')}
        {t('cards.2.description')}
      </div>
    </>
  )
}

Cette approche n’est clairement ni scalable ni maintenable.

La nouvelle fonction t.obj() offre un moyen puissant d’accéder aux structures de dictionnaire sous forme de sous-arbres :

import { useTranslations } from 'gt-next'

export default function Page() {
  const t = useTranslations()

  return (
    <>
      <div>
        {t.obj('cards').map((card) => (
          <div key={card.title}>
            {card.title}
            {card.description}
          </div>
        ))}
      </div>
    </>
  )
}

Conclusion

La fonction t.obj() représente une avancée importante pour rendre gt-next plus polyvalent, aussi bien pour les nouvelles applications que pour les applications existantes. En permettant aux développeurs de travailler directement avec des sous-arbres de dictionnaire, nous supprimons un point de friction majeur dans l’internationalisation d’applications déjà en place.

Cette amélioration rapproche gt-next de l’expérience développeur que les équipes attendent des bibliothèques i18n modernes, en facilitant l’itération sur le contenu traduit et la création d’applications internationalisées plus dynamiques et plus faciles à maintenir.