Svelte

FAST Element — это современная библиотека для создания Web Components с использованием чистого JavaScript. Она предоставляет инструменты для декларативного описания компонентов, реактивного обновления DOM и строгой типизации свойств.

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

Компонент создается через класс, наследующий FASTElement. Основные элементы структуры:

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

const template = html`
  <template>
    <h1>${x => x.title}</h1>
    <p>${x => x.content}</p>
  </template>
`;

const styles = css`
  h1 { color: #0078d4; }
  p { font-size: 16px; }
`;

export class MyComponent extends FASTElement {
  title = "Заголовок компонента";
  content = "Текст компонента";
}

MyComponent.define({
  name: "my-component",
  template,
  styles
});

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

  • FASTElement обеспечивает реактивность свойств.
  • html используется для декларативного описания шаблона.
  • css применяет стили локально к компоненту.
  • Метод define регистрирует компонент в браузере.

Реактивные свойства

Свойства компонентов автоматически отслеживаются библиотекой. Изменение значения свойства вызывает обновление DOM.

export class CounterComponent extends FASTElement {
  count = 0;

  increment() {
    this.count++;
  }
}
  • Использование ${x => x.count} в шаблоне позволяет динамически отображать значение.
  • Можно задавать свойства с типами и начальным значением через @observable.
import { observable } from "@microsoft/fast-element";

export class CounterComponent extends FASTElement {
  @observable count = 0;
}

Шаблоны и привязка данных

FAST Element поддерживает несколько видов привязки:

  1. Односторонняя привязка: от свойства к DOM. Пример: ${x => x.title}.

  2. Двусторонняя привязка: синхронизация значения между компонентом и элементом формы. Используется :value="${x => x.inputValue}" с событием input.

  3. Условная отрисовка: директива when.

import { when } from "@microsoft/fast-element";

const template = html`
  <template>
    ${when(x => x.showText, html`<p>Текст отображается</p>`)}
  </template>
`;
  1. Циклы: директива repeat.
import { repeat } from "@microsoft/fast-element";

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

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

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

const styles = css`
  :host {
    display: block;
    padding: 10px;
    background-color: var(--component-bg, #f0f0f0);
  }

  h1 { color: var(--component-title-color, #222); }
`;
  • :host применяется к корневому элементу компонента.
  • CSS-переменные позволяют внешне настраивать стили без изменения кода компонента.

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

Компоненты могут создавать и обрабатывать события:

export class ButtonComponent extends FASTElement {
  handleClick() {
    this.$emit("button-clicked", { timestamp: Date.now() });
  }
}

const template = html`
  <template>
    <button @click="${x => x.handleClick()}">Нажми меня</button>
  </template>
`;
  • $emit позволяет компоненту отправлять кастомные события.
  • Символ @ перед событием в шаблоне связывает обработчик с DOM-событием.

Жизненный цикл компонента

FAST Element предоставляет хуки жизненного цикла:

  • connectedCallback() — вызывается при добавлении компонента в DOM.
  • disconnectedCallback() — при удалении компонента.
  • propertyChanged(name, oldValue, newValue) — при изменении наблюдаемого свойства.

Пример:

export class LifecycleComponent extends FASTElement {
  connectedCallback() {
    super.connectedCallback();
    console.log("Компонент добавлен в DOM");
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    console.log("Компонент удален из DOM");
  }
}

Композиция компонентов

Компоненты FAST Element легко комбинируются между собой:

const template = html`
  <template>
    <my-component title="Первый" content="Описание 1"></my-component>
    <my-component title="Второй" content="Описание 2"></my-component>
  </template>
`;
  • Поддерживается вложенность и повторное использование шаблонов.
  • Каждое свойство дочернего компонента можно связывать с родителем.

Подключение к Svelte

FAST Element можно интегрировать с Svelte через обычное использование Web Components. Компоненты FAST объявляются как кастомные элементы и используются в Svelte-шаблоне напрямую:

<script>
  import "my-component.js";
</script>

<my-component title="Пример Svelte" content="Использование FAST Element"></my-component>
  • Взаимодействие через события и свойства стандартное.
  • Позволяет использовать FAST Element в экосистеме Svelte без адаптеров.

Директивы и расширяемость

FAST Element поддерживает расширение через директивы и контейнеры поведения:

  • attr, class, style — для динамического изменения атрибутов и классов.
  • Пользовательские директивы можно создавать для сложной логики шаблона.
  • Поведение компонентов легко расширяется через наследование и миксины.

FAST Element сочетает в себе реактивность, модульность и строгую типизацию, обеспечивая мощный инструмент для создания Web Components, совместимых с современными фреймворками, включая Svelte.

Оглавление