esbuild

FAST Element — это современная библиотека для создания веб-компонентов на основе стандартов Web Components с декларативным синтаксисом и мощной системой реактивности. Она обеспечивает легковесность, высокую производительность и простую интеграцию с существующими проектами на JavaScript и TypeScript. В основе лежат custom elements, shadow DOM и reactive properties, что позволяет создавать полностью изолированные и переиспользуемые компоненты.

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

Для объявления компонента используется функция FASTElement.define. Компонент создается на базе класса, наследующего FASTElement, и может содержать реактивные свойства и методы.

import { FASTElement, html, css, customElement, observable } from "@microsoft/fast-element";

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

const styles = css`
  div {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
  }
  h1 {
    font-size: 1.5em;
  }
`;

@customElement({ name: 'my-element', template, styles })
class MyElement extends FASTElement {
  @observable count = 0;
  title = "Пример FAST Element";

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

Ключевые моменты:

  • @observable создаёт реактивное свойство, изменение которого автоматически обновляет DOM.
  • События (@click) связываются с методами компонента напрямую.
  • template и styles обеспечивают изоляцию внешнего вида и структуры.

Шаблоны и реактивность

Шаблоны FAST Element используют выражения JavaScript для привязки данных. Поддерживаются:

  • Однонаправленная привязка: ${x => x.property}
  • Двусторонняя привязка: <input value="${x => x.text}" @input="${x => x.text = x.event.target.value}">

Также поддерживаются условные и циклические конструкции:

const template = html<MyElement>`
  <ul>
    ${x => x.items.map(item => html`<li>${item}</li>`)}
  </ul>
  ${x => x.items.length === 0 ? html`<p>Список пуст</p>` : null}
`;

Стиль и CSS

FAST Element позволяет использовать изолированные стили через Shadow DOM. Можно применять обычный CSS, а также специальные директивы FAST, такие как :host для корневого элемента компонента.

:host {
  display: block;
  background-color: #f9f9f9;
}

button {
  cursor: pointer;
  padding: 5px 10px;
}

События и обработчики

Обработка событий выполняется через атрибуты шаблона с синтаксисом @event, что позволяет напрямую связывать методы компонента с DOM-событиями:

<button @click=${x => x.handleClick()}>Нажать</button>

Для глобальных событий можно использовать стандартные методы addEventListener в методе connectedCallback.

Слоты и композиция компонентов

FAST Element поддерживает слоты для создания составных компонентов. Слоты позволяют внедрять контент внутрь компонента с сохранением структуры Shadow DOM.

const template = html`
  <div class="card">
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
`;

Использование компонента с слотами:

<my-card>
  <h1 slot="header">Заголовок</h1>
  <p>Основной контент</p>
  <footer slot="footer">Подвал</footer>
</my-card>

Директивы FAST

FAST предоставляет набор встроенных директив для управления рендерингом и динамическим поведением:

  • repeat — для генерации элементов на основе массива.
  • when — условное отображение элементов.
  • ref — получение ссылки на DOM-элемент для работы в коде.
  • attr — динамическая привязка атрибутов HTML.

Пример использования repeat:

<ul>
  ${repeat(x => x.items, html`<li>${item => item}</li>`)}
</ul>

Работа с Shadow DOM

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

  • :host — стили для корневого элемента.
  • :host([attr]) — стили при наличии атрибута.
  • ::slotted() — стили для контента в слотах.

Расширяемость и миксины

Компоненты FAST можно расширять через обычное наследование и миксины. Это позволяет создавать библиотеки переиспользуемых базовых компонентов с общим поведением.

class BaseElement extends FASTElement {
  log(message) {
    console.log(`[BaseElement] ${message}`);
  }
}

class CustomElement extends BaseElement {
  doSomething() {
    this.log("Действие выполнено");
  }
}

Интеграция с другими библиотеками

FAST Element совместим с любыми фреймворками и сборщиками. Компоненты можно использовать в проектах с React, Vue, Angular, либо напрямую в HTML. Они полностью поддерживают модульную структуру ES6 и TypeScript.

Производительность

Благодаря реактивной системе и минимальному числу обновлений DOM FAST Element обеспечивает высокую производительность даже при больших структурах. Обновления применяются только к изменившимся частям шаблона, что снижает нагрузку на рендеринг.

Типизация и TypeScript

FAST Element имеет встроенную поддержку TypeScript, что позволяет задавать типы свойств и методов, повышая безопасность кода. Пример:

@observable count: number = 0;
title: string = "Заголовок";

Это обеспечивает автодополнение, проверку типов и предотвращает ошибки на этапе компиляции.

Итоги

FAST Element предоставляет полный инструментарий для создания современных веб-компонентов с реактивными данными, стилями и событийной системой. Его преимущества — простота, скорость и гибкость в построении как небольших, так и масштабных интерфейсов.

Оглавление