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

Стартовые наборы 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» на более подходящее. Проще всего это сделать в среде разработки или другом текстовом редакторе, позволяющем выполнить глобальный поиск и замену во всём проекте.

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 см. в разделе Публикация.

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