Vite

FAST Element — это библиотека для создания веб-компонентов с высокой производительностью и декларативной моделью. Для использования с современными сборщиками, такими как Vite, требуется корректная настройка проекта.

Создание проекта

Для начала необходимо инициализировать проект через npm или Yarn:

npm create vite@latest fast-vite-app -- --template vanilla
cd fast-vite-app
npm install

После этого устанавливается FAST Element:

npm install @microsoft/fast-element

Настройка Vite

Vite поддерживает работу с ES-модулями, поэтому достаточно убедиться, что проект использует современный синтаксис импорта. В vite.config.js можно добавить:

import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: {
    include: ['@microsoft/fast-element']
  }
});

Это гарантирует корректное предварительное сканирование FAST Element для ускорения сборки.

Создание компонентов FAST Element

Компоненты создаются с использованием функции FASTElement.define или через декоратор @customElement. Основные элементы:

  • Template — шаблон HTML для компонента.
  • Styles — стили компонента с поддержкой CSS Shadow DOM.
  • Reactive properties — реактивные свойства компонента.

Определение шаблона

Шаблон создается с помощью функции html:

import { FASTElement, html, css } from '@microsoft/fast-element';

const template = html<MyComponent>`
  <template>
    <h1>${x => x.title}</h1>
    <button @click=${x => x.increment()}>Нажми меня</button>
    <p>Счётчик: ${x => x.count}</p>
  </template>
`;

const styles = css`
  h1 {
    color: #005a9c;
    font-size: 24px;
  }
  button {
    padding: 8px 16px;
    margin-top: 10px;
    cursor: pointer;
  }
`;

Определение класса компонента

class MyComponent extends FASTElement {
  count = 0;
  title = 'Пример компонента FAST Element';

  increment() {
    this.count++;
  }
}

FASTElement.define({
  name: 'my-component',
  template,
  styles,
  observedAttributes: ['count', 'title']
}, MyComponent);

После этого компонент доступен в HTML через тег <my-component></my-component>.

Реактивные свойства и наблюдение

FAST Element использует реактивные свойства для автоматического обновления DOM при изменении состояния. Ключевые моменты:

  • Свойства, объявленные в классе, автоматически отслеживаются при их использовании в шаблоне.
  • Можно явно указать наблюдаемые свойства через observedAttributes или декораторы.
  • Изменение свойства через присвоение автоматически вызывает перерисовку связанных участков DOM.
class Counter extends FASTElement {
  count = 0;

  increment() {
    this.count++;
  }
}

Использование в шаблоне:

html<Counter>`
  <button @click=${x => x.increment()}>+</button>
  <span>${x => x.count}</span>
`

Shadow DOM и стилизация

FAST Element по умолчанию использует Shadow DOM, что обеспечивает изоляцию стилей:

  • css template — создание локальных стилей для компонента.
  • :host — селектор для контейнера компонента.
  • ::slotted() — стилизация переданных слотов.

Пример:

const styles = css`
  :host {
    display: block;
    border: 1px solid #ccc;
    padding: 16px;
  }
  ::slotted(p) {
    color: #ff6600;
  }
`;

Слоты позволяют передавать контент внутрь компонента:

<my-component>
  <p>Текст в слоте</p>
</my-component>

События и взаимодействие с DOM

FAST Element поддерживает нативные DOM-события и добавляет удобные директивы:

  • @event для привязки событий.
  • dispatchEvent для генерации кастомных событий.

Пример создания и обработки события:

class ToggleButton extends FASTElement {
  isOn = false;

  toggle() {
    this.isOn = !this.isOn;
    this.dispatchEvent(new CustomEvent('toggle', { detail: this.isOn }));
  }
}

const template = html<ToggleButton>`
  <button @click=${x => x.toggle()}>
    ${x => x.isOn ? 'Вкл' : 'Выкл'}
  </button>
`;

Сборка и разработка с Vite

Для запуска проекта используется стандартная команда Vite:

npm run dev

Vite обеспечивает горячую перезагрузку при изменении файлов. Для продакшн-сборки:

npm run build

FAST Element не требует дополнительных транспайлеров или плагинов, благодаря полной поддержке ES-модулей. Важно убедиться, что любые сторонние зависимости тоже совместимы с ES-модулями для корректной работы в Vite.

Директивы и привязки

FAST Element поддерживает декларативные директивы:

  • if — условное отображение элемента.
  • repeat — повторение элементов массива.
  • ref — ссылка на DOM-элемент.

Пример условного рендера:

const template = html<MyComponent>`
  <template>
    ${x => x.showMessage ? html`<p>Сообщение отображается</p>` : ''}
    <button @click=${x => x.showMessage = !x.showMessage}>Показать/Скрыть</button>
  </template>
`;

Пример повторения:

const template = html<MyComponent>`
  <template>
    <ul>
      ${x => x.items.map(item => html`<li>${item}</li>`)}
    </ul>
  </template>
`;

Интеграция с другими инструментами

FAST Element легко интегрируется с современными библиотеками и фреймворками:

  • Использование с TypeScript: реактивные свойства типизируются через class.
  • Интеграция с state management: свойства компонентов могут связываться с Redux, MobX или простым глобальным состоянием.
  • Совместимость с CSS-фреймворками: Tailwind или SCSS можно использовать через Vite-плагины, без конфликта с Shadow DOM.

Если требуется, могу подготовить следующий блок с продвинутыми приёмами FAST Element: слоты, композиция компонентов, динамическая загрузка и расширенные реактивные шаблоны.

Хотите, чтобы я продолжил этим разделом?

Оглавление