Documenti / Solid

Internazionalizzazione SolidJS, automatizzata

Localizza un'app SolidJS: il JSX riceve useTranslation() da un modulo generato i18next la cui lingua è un segnale, quindi il testo viene aggiornato in loco quando cambia la lingua.

Come funziona

Il JSX viene riscritto come in React, con useTranslation() che proviene da un modulo generato. Il suo t() legge un segnale linguistico, quindi il JSX viene aggiornato quando setLanguage() viene chiamato.

Una frase intorno a un link rimane un unico messaggio (Read the <a>terms</a> first), resa da rich() con gli elementi originali.

Prima e dopo

L'output effettivo del motore per questo file. In un'esecuzione reale, il modello ospitato nomina le chiavi dal contesto.

src/components/Cart.tsx · prima

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 · dopo

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"
  }
}

Cosa aggiunge la configurazione

La prima esecuzione imposta i18next se il progetto non lo ha ancora:

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

Eseguilo

La CLI richiede Node.js 22 o versioni successive.

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

Oppure aggiungi la GitHub Action e ottieni una pull request a ogni push. Provalo prima sul tuo codice nel playground.