Volver

compiler@1.3.0

Ernest McCarter avatarErnest McCarter
compilerauto-jsx-injectiongt-reacti18n

Descripción general

El compilador de GT ahora admite la inyección automática de JSX para SPA de React del lado del cliente. Envuelve automáticamente el texto JSX traducible en componentes <T> en tiempo de construcción, para que no tengas que hacerlo.

Antes, cada cadena traducible tenía que envolverse manualmente con <T>. Con enableAutoJsxInjection, el compilador se encarga de eso por ti. Escribe JSX normal; el compilador hace el resto.

PaqueteVersión
@generaltranslation/compiler1.3.0
gt-react10.17.0
gt-next6.15.2

Configuración

La inyección automática de JSX se basa en la arquitectura de SPA basada en bootstrap introducida con la función t(). Primero debes configurar el punto de entrada de bootstrap bootstrap() y luego agregar el plugin del compilador.

1. Punto de entrada de bootstrap

Crea un bootstrap.tsx para cargar las traducciones antes de renderizar tu aplicación:

// bootstrap.tsx (nuevo punto de entrada)
import gtConfig from '../gt.config.json';
import { bootstrap } from 'gt-react/browser';

async function loadTranslations(locale: string) {
  return (await import(`./_gt/${locale}.json`)).default;
}

await bootstrap({
  ...gtConfig,
  loadTranslations,
});

await import('./main.tsx');

Actualiza tu index.html para que apunte a bootstrap.tsx en vez de main.tsx.

2. Instala el compilador

npm install @generaltranslation/compiler

3. Vite

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import gtConfig from './gt.config.json'
import { vite as gtCompiler } from '@generaltranslation/compiler'

export default defineConfig({
  plugins: [react(), gtCompiler({gtConfig})],
})

4. gt.config.json

Activa la inyección automática de JSX en tu configuración:

{
  "files": {
    "gt": {
      "output": "public/_gt/[locale].json",
      "parsingFlags": {
        "enableAutoJsxInjection": true
      }
    }
  }
}

Qué hace

Antes, tenías que marcar manualmente cada cadena traducible:

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

export default function Hero() {
  return (
    <T>
      <h1>Welcome to our app</h1>
    </T>
  );
}

Luego — solo escribe JSX:

export default function Hero() {
  return <h1>Welcome to our app</h1>;
}

El compilador inserta los envoltorios <T> en tiempo de construcción. Sin importaciones, sin id, sin código repetitivo.

Inyección de variables

Las expresiones dinámicas también se encapsulan automáticamente en <Var>:

// Tú escribes:
export default function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

// El compilador produce:
import { T, Var } from "gt-react/browser";

export default function Greeting({ name }) {
  return (
    <T>
      <p>Hello, <Var>{name}</Var>!</p>
    </T>
  );
}

Enlaces