Retour

gt-react@10.19.0

Ernest McCarter avatarErnest McCarter
gt-reactbrowserhot-reloaddev-experiencei18n

Vue d’ensemble

gt-react/browser prend désormais en charge le rechargement à chaud des traductions en développement. Auparavant, chaque fois que vous modifiiez du code dans une application GT côté navigateur, vous deviez relancer la commande de traduction pour voir les traductions mises à jour. Avec cette mise à jour, les traductions sont pré-calculées à l’exécution pendant le développement — aucune étape manuelle de retraduction n’est nécessaire.

gt-react/browser est ainsi aligné sur le workflow de traduction standard de gt-react. Notez que gt-react/browser est réservé aux applications monopage (SPA) uniquement — si vous utilisez un framework avec rendu côté serveur, utilisez gt-react (et non gt-react/browser). Cette fonctionnalité est également réservée au développement — les builds de production continuent d’utiliser des traductions pré-calculées comme auparavant.

Fonctionnement

Le plugin du compilateur injecte des appels de traduction à l’exécution au niveau du module. Le rendu est suspendu jusqu’à leur résolution.

Lorsque devHotReload est activé, le compilateur ajoute des appels à GtInternalRuntimeTranslateString et GtInternalRuntimeTranslateJsx qui préchargent le cache de traduction au chargement de votre module. Pour le JSX, les traductions peuvent aussi être résolues via un appel à Suspense dans le composant <T> lui-même, au lieu d’être chargées au niveau du module.

Comme les traductions ont lieu à l’exécution, seule la langue vers laquelle l’utilisateur navigue réellement est traduite — contrairement aux approches au build, qui doivent générer des traductions pour chaque langue configurée à chaque build de développement, même si vous ne les consultez jamais.

Les traductions récupérées à l’exécution sont mises en cache dans localStorage, ce qui les conserve entre les actualisations de page.

Configuration

1. Ajouter le plugin du compilateur

Le rechargement à chaud en développement nécessite le plugin du compilateur GT. Si ce n’est pas déjà fait, ajoutez-le à la configuration de votre bundler — par exemple, le plugin Vite :

// vite.config.ts
import { vite as gtCompiler } from "@generaltranslation/compiler"
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import gtConfig from "./gt.config.json"

export default defineConfig({
  plugins: [react(), gtCompiler({ gtConfig })]
})

Consultez les docs de configuration de gt-react pour les autres bundlers.

2. Activez le rechargement à chaud en mode développement dans gt.config.json

{
  "files": {
    "gt": {
      "parsingFlags": {
        "devHotReload": true
      }
    }
  }
}

Par défaut, devHotReload: true active le rechargement à chaud pour les chaînes de caractères, mais pas pour le JSX. Le rechargement du JSX reste désactivé, car le composant <T> gère déjà sa traduction à l’exécution via Suspense. Il n’est donc pas nécessaire de bloquer le chargement du module en attendant leur résolution. Vous pouvez les configurer séparément si nécessaire :

{
  "files": {
    "gt": {
      "parsingFlags": {
        "devHotReload": {
          "strings": true,
          "jsx": false
        }
      }
    }
  }
}

3. Passez les identifiants à bootstrap()

Vous devez également passer directement votre ID du projet et votre clé API de développement à l’appel bootstrap(), ainsi qu’une fonction loadTranslations. C’est une particularité de l’implémentation actuelle que nous prévoyons de simplifier dans une prochaine version.

await bootstrap({
  ...gtConfig,
  loadTranslations,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY
})

Liens