تعديل Lit للغة، تلقائي

تعديل مكونات Lit على الويب: النص في نماذج html`` يصبح استدعاءات t(), وI18nController يعيد عرض المكونات عند تغيير اللغة.

كيف يعمل

النص و `${expressions} داخل html templates become {t('key')}, and attributes placeholder={t('key')}. يتم ترك نماذج المضمنة، الأسلوب، والمعلقات كما هي.

قبل وبعد

المخرجات الحقيقية للمحرك لهذا الملف. في تشغيل حقيقي، يقوم النموذج المستضاف بتسمية المفاتيح من السياق.

src/cart-panel.ts · قبل

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 · بعد

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

{}

ما يضيفه الإعداد

الإعداد الأول يقوم بإعداد مودول i18n مُولد في src/i18n إذا لم يكن المشروع يحتوي عليه بعد:

src/i18n.ts مع t()، setLanguage() و I18nController
كائن `I18nController` في كل مكون، مما يؤدي إلى إعادة رسمه عند تغيير اللغة

قم بتشغيله

يتطلب CLI إصدار Node.js 22 أو أحدث.

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

أو أضف إجراء GitHub واحصل على طلب سحب عند كل دفعة. جربه على الكود الخاص بك أولاً في ملعب.