Dokumentation / Lit

Lit-Lokalisierung, automatisiert

Lokalisieren Sie Lit-Webkomponenten: Text in html``-Vorlagen wird zu t()-Aufrufen, und ein I18nController rendert Komponenten neu, wenn sich die Sprache ändert.

Funktionsweise

Text und ${expressions} in html templates become ${t('key')}, and attributes placeholder=${t('key')}`. Verschachtelte Templates, Stile und Kommentare bleiben unverändert.

Vorher und nachher

Die tatsächliche Ausgabe der Engine für diese Datei. Bei einer echten Ausführung benennt das gehostete Modell die Schlüssel anhand des Kontexts.

src/cart-panel.ts · vorher

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

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

{}

Was das Setup hinzufügt

Der erste Durchlauf richtet ein generiertes src/i18n-Modul ein, falls das Projekt es noch nicht hat:

src/i18n.ts mit t(), setLanguage() und I18nController
Ein I18nController in jeder Komponente, damit sie bei Sprachwechsel neu gerendert wird

Ausführen

Die CLI benötigt Node.js 22 oder neuer.

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

Oder fügen Sie die GitHub Action und erhalten Sie bei jedem Push einen Pull Request. Probieren Sie es zuerst mit Ihrem eigenen Code im Spielbereich.