i18n di React, automatizzato

Come funziona

localize.dev legge ogni file .tsx e .jsx, trova il testo che le persone vedono (testo, attributi come placeholder e aria-label, stringhe renderizzate da ternari) e lo riscrive in chiamate t() con chiavi nominate in base a ciò che fa il testo.

I plural diventano un unico messaggio con ogni forma necessaria a ciascuna lingua, e le frasi attorno ai link rimangono intere con <Trans>. Una frase con due conteggi (“3 file in 2 cartelle”) ottiene un plurale per conteggio, e gli ordinali (ordinal(place) → “1°”, “2°”) diventano plurali ordinali i18next nelle forme proprie di ciascuna lingua.

Date, numeri e prezzi codificati in un'unica locale (toLocaleDateString('en-US'), ` $${price} `) vengono riscritti per seguire anche la lingua dell'app.

Prima e dopo

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

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

Cosa aggiunge la configurazione

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

• i18next e react-i18next aggiunti a package.json (l'azione GitHub aggiorna anche il lockfile)
• src/i18n.ts, che carica ogni file di localizzazione e sceglie la lingua da una preferenza salvata, poi il browser
• Un'importazione di esso nel tuo file di ingresso e un <LanguageSwitcher /> che puoi inserire nel tuo header

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.