Retour

gt-react@10.13.0

Ernest McCarter avatarErnest McCarter
gt-reactmacrotagged-templatedeveloper-experiencei18n

Vue d’ensemble

Dans le cadre de nos expérimentations continues pour nous éloigner du contexte React, gt-react prend désormais en charge l’utilisation de t comme littéral de gabarit étiqueté :

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’utiliser des espaces réservés au format ICU et de passer un objet d’options, vous écrivez un littéral de gabarit JavaScript standard, et l’interpolation des variables est gérée automatiquement.

Avant et après

// Avant — espaces réservés ICU + objet d'options
t("Hello, {name}! You have {count} items.", { name, count })

// Après — littéral de gabarit étiqueté
t`Hello, ${name}! You have ${count} items.`

La forme de littéral de gabarit étiqueté é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 nécessaire

Comme la fonction t() introduite dans gt-react@10.12.0, la forme de littéral de gabarit étiqueté ne dépend pas du contexte React. Elle fonctionne partout dans le code exécuté dans le 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 souhaitez pas importer t dans chaque fichier, vous pouvez l’enregistrer de façon globale :

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

Cela définit globalThis.t, ce qui rend le littéral de gabarit étiqueté 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 avec un enregistrement global :

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

Liens