Стартовые наборы

Стартовые наборы Lit — это шаблоны проектов для переиспользуемых компонентов Lit, которые можно публиковать, чтобы ими могли пользоваться другие.

Чтобы начать локальную работу над компонентом, можно использовать один из этих стартовых проектов:

• Стартовый проект Lit на JavaScript
• Стартовый проект Lit на TypeScript

В обоих проектах определён компонент Lit. Кроме того, в них добавлен набор необязательных инструментов для разработки, проверки стиля и тестирования компонента:

• Node.js и npm для управления зависимостями. Требуется Node.js версии 10 или выше.
• Локальный сервер разработки — Web Dev Server.
• Проверка стиля с помощью ESLint и lit-analyzer.
• Тестирование с помощью Web Test Runner.
• Статический сайт документации, созданный с помощью web-component-analyzer и eleventy.

Ни один из этих инструментов не является обязательным для работы с Lit. Это лишь один из возможных наборов инструментов, обеспечивающих удобство разработки.

Быстрее всего попробовать проект локально можно, скачав один из стартовых проектов в виде ZIP-архива.

1. Скачайте стартовый проект с GitHub в виде ZIP-архива:

   • Стартовый проект на JavaScript
   • Стартовый проект на TypeScript

2. Распакуйте ZIP-архив.

3. Установите зависимости.

   cd <project folder>
   npm i

1. Если вы используете версию стартового проекта на TypeScript, соберите версию проекта на JavaScript:

   npm run build

   Чтобы отслеживать изменения файлов и пересобирать проект при их изменении, выполните следующую команду в отдельной оболочке:

   npm run build:watch

   Если вы используете версию стартового проекта на JavaScript, сборка не требуется.

2. Запустите сервер разработки:

   npm run serve

3. Откройте страницу демонстрации проекта во вкладке браузера. Например:

   http://localhost:8000/dev/

   Ваш сервер может использовать другой номер порта. Чтобы узнать правильный номер порта, проверьте URL в выводе терминала.

Измените определение компонента. Файл для редактирования зависит от используемого языка:

• JavaScript. Отредактируйте файл my-element.js в корневом каталоге проекта.
• TypeScript. Отредактируйте файл my-element.ts в каталоге src.

Обратите внимание на несколько моментов в коде:

• В коде определяется класс компонента (MyElement) и регистрируется в браузере как пользовательский элемент с именем <my-element>.

  @customElement('my-element')
  export class MyElement extends LitElement { /* ... */ }

  export class MyElement extends LitElement { /* ... */ }
  
  customElements.define('my-element', MyElement);

• Метод render компонента определяет шаблон, который будет отображаться как часть компонента. В данном случае он содержит текст, привязки данных и кнопку. Подробнее см. в разделе Шаблоны.

  export class MyElement extends LitElement {
    // ...
    render() {
      return html`
        <h1>Hello, ${this.name}!</h1>
        <button @click=${this._onClick}>
          Click Count: ${this.count}
        </button>
        <slot></slot>
      `;
    }
  }

• В компоненте определены некоторые свойства. Компонент реагирует на изменения этих свойств (например, при необходимости повторно отображает шаблон). Подробнее см. в разделе Свойства.

  export class MyElement extends LitElement {
    // ...
    @property({type: String})
    name = 'World';
    //...
  }

  export class MyElement extends LitElement {
    // ...
    static properties = {
      name: {type: String}
    };
  
    constructor() {
      super();
      this.name = 'World';
    }
    // ...
  }

Вероятно, вы захотите заменить имя компонента «my-element» на более подходящее. Проще всего это сделать с помощью IDE или другого текстового редактора, позволяющего выполнить глобальный поиск и замену во всём проекте.

1. Если вы используете версию на TypeScript, удалите сгенерированные файлы:

   npm run clean

2. Найдите и замените «my-element» на новое имя компонента во всех файлах проекта (кроме папки node_modules).

3. Найдите и замените «MyElement» на новое имя класса во всех файлах проекта (кроме папки node_modules).

4. Переименуйте исходные файлы и файлы тестов в соответствии с новым именем компонента:

   JavaScript:

   • src/my-element.js
   • src/test/my-element_test.js

   TypeScript:

   • src/my-element.ts
   • src/test/my-element_test.ts

5. Если вы используете версию на TypeScript, пересоберите проект:

   npm run build

6. Проверьте, что компонент по-прежнему работает:

   npm run serve

Готовы добавить возможности в свой компонент? Перейдите в раздел Компоненты, чтобы узнать, как создать свой первый компонент Lit, или в раздел Шаблоны, чтобы узнать, как писать шаблоны.

Подробнее о запуске тестов и использовании других инструментов см. в файле README стартового проекта:

• Файл README проекта на TypeScript
• Файл README проекта на JavaScript

Инструкции по публикации компонента в npm см. в разделе Публикация.

Изменить эту страницу