Indietro

gt-react@10.13.0

Ernest McCarter avatarErnest McCarter
gt-reactmacrotagged-templatedeveloper-experiencei18n

Panoramica

Nell'ambito della nostra sperimentazione continua per ridurre la dipendenza dal contesto di React, gt-react ora supporta l'uso di t come tagged template literal:

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

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

Questa è una sintassi alternativa all'attuale chiamata di funzione t(). Invece di scrivere segnaposto in stile ICU e passare un oggetto di opzioni, scrivi un normale template literal JavaScript e l'interpolazione delle variabili viene gestita automaticamente.

Prima e dopo

// Prima — segnaposto ICU + oggetto opzioni
t("Hello, {name}! You have {count} items.", { name, count })

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

La sintassi tagged template literal elimina la necessità di assegnare nomi ai segnaposto o di duplicare i riferimenti alle variabili. Scrivi la stringa come scriveresti qualsiasi template literal JavaScript.

Non richiede il contesto React

Come la funzione t() introdotta in gt-react@10.12.0, la forma tagged template literal non dipende dal contesto React. Funziona ovunque nel codice eseguito nel browser:

  • Gestori di eventi: onClick={() => alert(t`Salvato!`)}
  • Funzioni di utilità: function formatError(code) { return t`Errore: ${code}` }
  • Costanti e configurazione: const LABELS = { save: t`Salva`, cancel: t`Annulla` }
  • Anche completamente al di fuori dei componenti React

Registrazione globale

Se non vuoi importare t in ogni file, puoi registrarlo a livello globale:

// Nel punto di ingresso della tua app (es. layout.tsx)
import "gt-react/macros";

Questo imposta globalThis.t, rendendo il tagged template literal disponibile ovunque senza doverlo importare esplicitamente.

Esempio

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>
  );
}

Oppure con una registrazione globale:

// Nessun import necessario — t è su globalThis
const LABELS = {
  save: t`Save`,
  cancel: t`Cancel`,
  delete: t`Delete`,
};