Docs / Solid

SolidJS i18n, automatisé

Localisez une application SolidJS : JSX utilise useTranslation() d'un module i18next généré dont la langue est une signal, donc le texte se met à jour lorsque la langue change.

Comment ça marche

JSX est réécrit comme React, avec useTranslation() provenant d'un module généré. Son t() lit une signal de langue, donc JSX se met à jour lorsque setLanguage() est appelé.

Une phrase autour d'un lien reste un message (Read the <a>terms</a> first en premier), rendu par rich() avec les éléments originaux.

Avant et après

La sortie réelle du moteur pour ce fichier. Lors d'une exécution réelle, le modèle hébergé nomme les clés à partir du contexte.

src/components/Cart.tsx · avant

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 · aprè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"
  }
}

Ce que l'installation ajoute

La première exécution configure i18next si le projet ne l'a pas encore :

i18next
src/i18n.ts avec useTranslation() et setLanguage()

Exécutez-le

L'interface CLI nécessite Node.js 22 ou une version ultérieure.

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

Ou ajoutez le Action GitHub et recevez une pull request à chaque push. Essayez-le d'abord sur votre propre code dans le playground.