Documentación / Solid

SolidJS i18n, automatizado

Localiza una app de SolidJS: JSX obtiene useTranslation() de un módulo i18next generado, cuya lengua es una señal, por lo que el texto se actualiza cuando cambia el idioma.

Cómo funciona

JSX se reescribe como React, con useTranslation() proveniente de un módulo generado. Su t() lee una señal de idioma, por lo que JSX se actualiza cuando se llama a setLanguage().

Una oración alrededor de un enlace permanece como un mensaje (Read the <a>terms</a> first), renderizado por rich() con los elementos originales.

Antes y después

La salida real del motor para este archivo. En una ejecución real, el modelo alojado nombra las claves a partir del contexto.

src/components/Cart.tsx · antes

export function Cart(props) {
  return (
    <section>
      <h2>Hi {props.name}, your cart</h2>
      <p>Read the <a href="/terms">terms</a> before paying.</p>
      <button title="Pay now">Checkout</button>
    </section>
  );
}

src/components/Cart.tsx · después

import { useTranslation, rich } from '../i18n';

export function Cart(props) {
  const { t } = useTranslation();
  return (
    <section>
      <h2>{t('cart.hi_your_cart', { name: props.name })}</h2>
      <p>{rich(t('cart.read_the_terms_before_paying'), { a: (c) => <a href="/terms">{c}</a> })}</p>
      <button title={t('cart.pay_now')}>{t('cart.checkout')}</button>
    </section>
  );
}

locales/en.json

{
  "cart": {
    "hi_your_cart": "Hi {{name}}, your cart",
    "read_the_terms_before_paying": "Read the <a>terms</a> before paying.",
    "pay_now": "Pay now",
    "checkout": "Checkout"
  }
}

Lo que añade la configuración

La primera ejecución configura i18next si el proyecto aún no lo tiene:

i18next
src/i18n.ts con useTranslation() y setLanguage()

Ejecutarlo

La CLI necesita Node.js 22 o posterior.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

O añade la GitHub Action y obtén una pull request en cada push. Pruébalo primero en tu propio código en el playground.