Documentación / Lit

Localización de Lit, automatizada

Localiza componentes web Lit: el texto en plantillas html`` se convierte en llamadas a t(), y un I18nController vuelve a renderizar componentes cuando cambia el idioma.

Cómo funciona

El texto y ${expressions} en plantillas html templates become ${t('key')}, and attributes placeholder=${t('key')}`. Las plantillas anidadas, estilos y comentarios se dejan solos.

Antes y después

La salida real del motor para este archivo. En una ejecución real, el modelo alojado nombra las claves a partir del contexto.

src/cart-panel.ts · antes

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 · despué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

{}

Lo que añade la configuración

La primera ejecución configura un módulo src/i18n generado si el proyecto aún no lo tiene:

src/i18n.ts con t(), setLanguage() y I18nController
Un I18nController en cada componente, para que se vuelva a renderizar al cambiar el idioma

Ejecutarlo

La CLI necesita Node.js 22 o posterior.

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

O añade la GitHub Action y obtén una pull request en cada push. Pruébalo primero en tu propio código en el playground.