Documenti / Lit

Localizzazione Lit, automatizzata

Localizza i componenti web Lit: il testo nei template html`` diventa chiamate t(), e un I18nController ricarica i componenti quando cambia la lingua.

Come funziona

Testo e ${expressions} in html templates become ${t('key')}, and attributes placeholder=${t('key')}`. I template annidati, gli stili e i commenti vengono lasciati intatti.

Prima e dopo

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

src/cart-panel.ts · prima

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

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

{}

Cosa aggiunge la configurazione

La prima esecuzione imposta un modulo src/i18n generato se il progetto non lo ha ancora:

src/i18n.ts con t(), setLanguage() e I18nController
Un I18nController in ogni componente, così si ricarica al cambio di lingua

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.