Atrás

gt-react@10.13.0

Ernest McCarter avatarErnest McCarter
gt-reactmacrotagged-templatedeveloper-experiencei18n

Resumen

Como parte de nuestra experimentación continua para alejarnos del contexto de React, gt-react ahora admite el uso de t como una plantilla etiquetada:

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

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

Esta es una sintaxis alternativa a la llamada existente a la función t(). En lugar de escribir marcadores de posición de estilo ICU y pasar un objeto de opciones, escribes un literal de plantilla de JavaScript estándar y la interpolación de variables se gestiona automáticamente.

Antes y despué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 forma de plantilla etiquetada elimina la necesidad de nombrar marcadores de posición o duplicar referencias de variables. Escribes tu cadena como escribirías cualquier literal de plantilla de JavaScript.

No se requiere contexto de React

Al igual que la función t() introducida en gt-react@10.12.0, la sintaxis de plantilla etiquetada no depende del contexto de React. Funciona en cualquier parte del código del navegador:

  • Manejadores de eventos: onClick={() => alert(t`Saved!`)}
  • Funciones de utilidad: function formatError(code) { return t`Error: ${code}` }
  • Constantes y configuración: const LABELS = { save: t`Save`, cancel: t`Cancel` }
  • Incluso fuera de los componentes de React

Registro global

Si no quieres importar t en cada archivo, puedes registrarlo globalmente:

// En el punto de entrada de tu aplicación (p. ej., layout.tsx)
import "gt-react/macros";

Esto configura globalThis.t, lo que hace que la plantilla etiquetada esté disponible en todas partes sin necesidad de una importación explícita.

Ejemplo

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

O con registro global:

// No se necesita importación — t está en globalThis
const LABELS = {
  save: t`Save`,
  cancel: t`Cancel`,
  delete: t`Delete`,
};

Enlaces