Docs / Lit

Localisation Lit, automatisée

Localisez les composants web Lit : le texte dans les modèles html`` devient des appels à t(), et un I18nController rerend les composants lorsque la langue change.

Comment ça marche

Le texte et ${expressions} dans les modèles html templates become ${t('key')}, and attributes placeholder=${t('key')}`. Les modèles imbriqués, styles et commentaires sont laissés intacts.

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/cart-panel.ts · avant

import { LitElement, html } from 'lit';

export class CartPanel extends LitElement {
  name = 'Ada';
  render() {
    return html`<h2>Hi ${this.name}, your basket</h2><input placeholder="Search products" />`;
  }
}

src/cart-panel.ts · après

import { LitElement, html } from 'lit';

export class CartPanel extends LitElement {
  name = 'Ada';
  render() {
    return html`<h2>Hi ${this.name}, your basket</h2><input placeholder="Search products" />`;
  }
}

locales/en.json

{}

Ce que l'installation ajoute

La première exécution configure un module src/i18n généré si le projet ne l'a pas encore :

src/i18n.ts avec t(), setLanguage() et I18nController
Un I18nController dans chaque composant, pour qu'il se rerende lors d'un changement de langue

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.