Dokumentation / Solid

SolidJS i18n, automatisiert

Lokalisieren Sie eine SolidJS-App: JSX erhält useTranslation() aus einem generierten i18next-Modul, dessen Sprache ein Signal ist, sodass sich der Text bei Sprachwechsel aktualisiert.

Funktionsweise

JSX wird wie React umgeschrieben, mit useTranslation() aus einem generierten Modul. Sein t() liest eine Sprachsignal, sodass JSX aktualisiert wird, wenn setLanguage() aufgerufen wird.

Ein Satz um einen Link bleibt eine Nachricht (Read the <a>terms</a> first), gerendert durch rich() mit den ursprünglichen Elementen.

Vorher und nachher

Die tatsächliche Ausgabe der Engine für diese Datei. Bei einer echten Ausführung benennt das gehostete Modell die Schlüssel anhand des Kontexts.

src/components/Cart.tsx · vorher

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

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

Was das Setup hinzufügt

Der erste Durchlauf richtet i18next ein, falls das Projekt es noch nicht hat:

i18next
src/i18n.ts mit useTranslation() und setLanguage()

Ausführen

Die CLI benötigt Node.js 22 oder neuer.

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

Oder fügen Sie die GitHub Action und erhalten Sie bei jedem Push einen Pull Request. Probieren Sie es zuerst mit Ihrem eigenen Code im Spielbereich.