React i18n, automatisé

Comment ça marche

localize.dev lit chaque fichier .tsx et .jsx, trouve le texte que les gens voient (texte, attributs tels que placeholder et aria-label, chaînes rendues à partir de ternaires) et le réécrit en appels t() avec des clés nommées d'après ce que fait le texte.

Les pluriels deviennent un seul message avec chaque forme dont chaque langue a besoin, et les phrases autour des liens restent entières avec <Trans>. Une phrase avec deux comptes (« 3 fichiers dans 2 dossiers ») obtient un pluriel par compte, et les ordinaux (ordinal(place) → « 1st », « 2nd ») deviennent des pluriels ordinaux i18next dans les formes propres à chaque langue.

Les dates, nombres et prix codés en dur pour une seule locale (toLocaleDateString('en-US'), ` $${price} `) sont réécrits pour suivre également la langue de l'application.

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.

export function Inbox({ user, count }) {
  return (
    <section>
      <h1>Welcome back, {user.name}</h1>
      <p>{count} {count === 1 ? 'message' : 'messages'} waiting</p>
      <input placeholder="Search messages" />
      <p>Read the <a href="/help">help center</a> first.</p>
    </section>
  );
}

import { useTranslation, Trans } from 'react-i18next';

export function Inbox({ user, count }) {
  const { t } = useTranslation();
  return (
    <section>
      <h1>{t('inbox.welcome_back', { name: user.name })}</h1>
      <p>{t('inbox.messages_waiting', { count })}</p>
      <input placeholder={t('inbox.search_messages')} />
      <p><Trans i18nKey="inbox.read_the_help_center_first" components={{ a: <a href="/help" /> }} /></p>
    </section>
  );
}

{
  "inbox": {
    "welcome_back": "Welcome back, {{name}}",
    "messages_waiting_one": "{{count}} message waiting",
    "messages_waiting_other": "{{count}} messages waiting",
    "search_messages": "Search messages",
    "read_the_help_center_first": "Read the <a>help center</a> first."
  }
}

Ce que l'installation ajoute

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

• i18next et react-i18next ajoutés à package.json (l'action GitHub met également à jour le lockfile)
• src/i18n.ts, qui charge chaque fichier de locale et choisit la langue à partir d'un choix enregistré, puis le navigateur
• Une importation dans votre fichier d'entrée, et un <LanguageSwitcher /> que vous pouvez placer dans votre en-tête

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.