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.

Esto se basa en la misma configuración de SPA basada en bootstrap introducida con la función t(): sigues necesitando el punto de entrada bootstrap() y la misma arquitectura del lado del cliente.

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

Configuración

Instalación

npm install @generaltranslation/compiler

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})],
})

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