Panoramica

Nell'ambito della nostra continua sperimentazione per allontanarci dal contesto React, gt-react ora supporta l'uso di t come template literal con tag:

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, si usa un template literal JavaScript standard e l’interpolazione delle variabili viene gestita automaticamente.

Prima e dopo

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

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

La forma template literal con tag elimina la necessità di assegnare nomi ai placeholder o di duplicare i riferimenti alle variabili. Scrivi la tua stringa nello stesso modo in cui scriveresti qualsiasi template literal JavaScript.

Nessun contesto React necessario

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

• Handler di eventi: onClick={() => alert(t`Saved!`)}
• Funzioni di utilità: function formatError(code) { return t`Error: ${code}` }
• Costanti e configurazione: const LABELS = { save: t`Save`, cancel: t`Cancel` }
• 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 template literal con tag 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 registrazione globale:

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

Link

• Dev log precedente: allontanarsi dal contesto React (gt-react@10.12.0)
• Riferimento dell'API t()
• PR #1118