Retour

gt-react@10.13.0

Ernest McCarter avatarErnest McCarter
gt-reactmacrotagged-templatedeveloper-experiencei18n

Aperçu

Dans le cadre de nos expérimentations continues visant à nous éloigner du contexte React, gt-react prend désormais en charge l’utilisation de t comme template tagué :

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

const greeting = t`Hello, ${name}!`;

Il s’agit d’une syntaxe alternative à l’appel de fonction t() existant. Au lieu d’écrire des espaces réservés au format ICU et de passer un objet d’options, vous écrivez un template literal JavaScript standard, et l’interpolation des variables est gérée automatiquement.

Avant / après

// Before — ICU placeholders + options object
t("Hello, {name}! You have {count} items.", { name, count })

// After — tagged template literal
t`Hello, ${name}! You have ${count} items.`

La forme en template tagué évite d’avoir à nommer les espaces réservés ou à dupliquer les références de variables. Vous écrivez votre chaîne comme vous écririez n’importe quel template literal JavaScript.

Aucun contexte React requis

Comme la fonction t() introduite dans gt-react@10.12.0, la forme avec template tagué ne dépend pas du contexte React. Elle fonctionne partout dans le code du navigateur :

  • Gestionnaires d’événements : onClick={() => alert(t`Saved!`)}
  • Fonctions utilitaires : function formatError(code) { return t`Error: ${code}` }
  • Constantes et configuration : const LABELS = { save: t`Save`, cancel: t`Cancel` }
  • Même complètement en dehors des composants React

Enregistrement global

Si vous ne voulez pas importer t dans chaque fichier, vous pouvez l’enregistrer globalement :

// Dans le point d'entrée de votre app (ex. : layout.tsx)
import "gt-react/macros";

Cela définit globalThis.t, ce qui rend le template tagué disponible partout sans import explicite.

Exemple

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

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

export function SaveButton() {
  return (
    <button onClick={() => alert(t`Changes saved!`)}>
      {t`Save`}
    </button>
  );
}

Ou via un enregistrement global :

// Aucun import nécessaire — t est sur globalThis
const LABELS = {
  save: t`Save`,
  cancel: t`Cancel`,
  delete: t`Delete`,
};

Liens