Back

compiler@1.3.0

Ernest McCarter avatarErnest McCarter
compilerauto-jsx-injectiongt-reacti18n

Overview

The GT compiler now supports auto JSX injection for client-side React SPAs. It automatically wraps translatable JSX text in <T> components at build time, so you don't have to.

Previously, every translatable string needed a manual <T> wrapper. With enableAutoJsxInjection, the compiler handles this for you. Write plain JSX; the compiler does the rest.

This builds on the same bootstrap-based SPA setup introduced with the t() function — you still need the bootstrap() entry point and the same client-side architecture.

PackageVersion
@generaltranslation/compiler1.3.0
gt-react10.17.0
gt-next6.15.2

Setup

Install

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

Enable auto JSX injection in your config:

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

What it does

Before — you had to wrap every translatable string manually:

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

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

After — just write JSX:

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

The compiler injects the <T> wrappers at build time. No imports, no IDs, no boilerplate.

Variable injection

Dynamic expressions are automatically wrapped in <Var> too:

// You write:
export default function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

// The compiler produces:
import { T, Var } from "gt-react/browser";

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