Le problème avec t("Hello, {name}", { name })

Si vous avez déjà internationalisé une application React, vous avez sûrement écrit quelque chose comme ça :

const gt = useGT();

return <p>{gt("Hello, {name}! You have {count} items.", { name, count })}</p>;

Ça fonctionne. Mais c'est lourd. Vous écrivez la syntaxe ICU MessageFormat à la main, dupliquez chaque nom de variable dans l’objet de paramètres et récupérez t depuis un Hook qui nécessite un contexte React. Pour quelque chose censé n’être qu’une fine surcouche sur vos chaînes de caractères existantes, ça fait beaucoup de formalisme.

Et ça se complique encore. Dès que vous avez besoin d’une traduction en dehors d’un composant React — dans une fonction utilitaire, un gestionnaire d’événements, une action serveur — vous devez bricoler des solutions de contournement, parce que les Hooks n’y fonctionnent pas.

Les littéraux de gabarit devraient fonctionner tels quels

Voici à quoi ressemble le même code avec la macro t :

import { t } from "gt-react/browser";

return <p>{t`Hello, ${name}! You have ${count} items.`}</p>;

C'est tout. La syntaxe standard des littéraux de gabarit JavaScript. Aucun placeholder ICU, aucun objet de paramètres, aucun Hook, aucun provider de contexte. Vous écrivez votre chaîne de caractères comme vous écririez n'importe quel littéral de gabarit, et le compilateur s'occupe du reste.

Lors du build, le compilateur GT transforme :

t`Hello, ${name}!`

en :

t("Hello, {0}!", { "0": name })

Le tagged template n’est qu’un sucre syntaxique — le comportement en exécution est identique à celui d’un appel à t() avec une chaîne de caractères. Mais l’expérience de développement est nettement meilleure.

Plus de dépendance au contexte React

Le changement majeur ici ne concerne pas la syntaxe — il concerne l’architecture. La fonction t exportée par gt-react/browser n’utilise pas le contexte React. Elle n’a pas besoin de hook. Elle n’a pas besoin d’être appelée à l’intérieur d’un composant.

Cela signifie que vous pouvez utiliser t dans :

• Les gestionnaires d’événements : onClick={() => alert(tSaved!)}
• Les fonctions utilitaires : function formatError(code) { return tError: $ }
• Les constantes et la configuration : const LABELS = { save: tSave, cancel: tCancel }
• Partout où JavaScript s’exécute côté client

L’ancienne approche — useGT() qui renvoie une fonction liée au contexte React — créait un goulot d’étranglement. Elle faisait de la traduction une préoccupation propre à React, alors qu’il s’agit en réalité d’une question de chaînes de caractères.

Enregistrement global

Si vous ne voulez pas importer t dans chaque fichier, vous pouvez l’enregistrer de manière globale :

// Dans le point d'entrée de votre application
import "gt-react/macros";

Cela définit globalThis.t, ce qui rend le tagged template disponible partout, sans import. Le compilateur est suffisamment intelligent pour le détecter : si t est déjà importé depuis une source GT, il n’injectera pas d’import en double. Si ce n’est pas le cas et que vous avez utilisé t comme tagged template, le compilateur injecte l’import pour vous.

La concaténation fonctionne aussi

L’expansion de la macro ne se limite pas aux tagged templates. Elle prend aussi en charge les littéraux de gabarit passés en argument ainsi que la concaténation de chaînes de caractères :

// Template littéral en argument — également transformé
t(`Welcome back, ${user}`)

// Concaténation de chaînes de caractères — également transformée
t("Hello, " + name + "! Welcome.")

Les deux sont normalisés en un même appel t("...", { ... }) au build.

Prise en main

1. Installez la dernière version de gt-react

npm install gt-react@latest

2. Utilisez la macro t

Importez-la directement :

import { t } from "gt-react/browser";

export function Greeting({ name }) {
  return <p>{t`Hello, ${name}!`}</p>;
}

Ou enregistrez-le globalement et évitez les imports :

// app/layout.tsx ou point d'entrée
import "gt-react/macros";

// N'importe où dans votre application
export function Greeting({ name }) {
  return <p>{t`Hello, ${name}!`}</p>;
}

3. C'est tout

Le compilateur GT gère automatiquement la transformation pendant votre build. Aucune configuration supplémentaire n'est nécessaire — l'expansion des macros est activée par défaut.

La macro t apporte une petite modification à la surface de l'API, mais elle reflète un changement plus profond : les traductions doivent s'intégrer naturellement à JavaScript, pas ressembler à une solution de contournement propre à un framework. Écrivez vos chaînes de caractères naturellement. Laissez la chaîne d'outils faire le reste.