Простейший функциональный компонент

Haunted — это библиотека для создания веб-компонентов на базе стандарта Custom Elements с использованием реактивного подхода, вдохновлённого библиотекой React, но с минимальным накладным кодом. В основе Haunted лежат функциональные компоненты, которые позволяют описывать логику и разметку компонентов через функции.

Создание простого функционального компонента

Функциональный компонент в Haunted — это обычная JavaScript-функция, которая возвращает шаблон разметки с помощью html из Haunted:

import { html, component } from 'haunted';

function MyComponent() {
  return html`<p>Привет, Haunted!</p>`;
}

customElements.define('my-component', component(MyComponent));
  • html — это шаблонная функция, похожая на lit-html, которая преобразует шаблон в DOM-узлы.
  • component — обёртка, которая превращает обычную функцию в полноценный веб-компонент.
  • customElements.define — регистрирует компонент в браузере под указанным именем.

В данном примере компонент my-component будет просто отображать текст на странице.

Работа с пропсами

Haunted позволяет передавать свойства (props) компоненту через атрибуты HTML:

function Greeting({ name }) {
  return html`<p>Привет, ${name}!</p>`;
}

customElements.define('greeting-component', component(Greeting));

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

<greeting-component name="Мария"></greeting-component>
  • Атрибуты автоматически преобразуются в свойства объекта, передаваемого в компонент.
  • Свойства можно переопределять и обновлять динамически через JavaScript.

Состояние с использованием хуков

Haunted поддерживает хуки, аналогичные React. Основной хук — useState, позволяющий хранить внутреннее состояние компонента:

import { html, component, useState } from 'haunted';

function Counter() {
  const [count, setCount] = useState(0);

  return html`
    <p>Счёт: ${count}</p>
    <button @click=${() => setCount(count + 1)}>Увеличить</button>
  `;
}

customElements.define('counter-component', component(Counter));
  • useState возвращает массив из текущего значения состояния и функции для его обновления.
  • Обновление состояния через setCount автоматически вызывает повторный рендер компонента.

Обработчики событий

Haunted позволяет легко привязывать события к элементам внутри компонента с использованием синтаксиса @event:

function ClickLogger() {
  const handleClick = () => console.log('Кнопка нажата');

  return html`<button @click=${handleClick}>Нажми меня</button>`;
}

customElements.define('click-logger', component(ClickLogger));
  • События работают напрямую через стандартные DOM-события.
  • Любой обработчик может обновлять состояние компонента, вызывать функции и взаимодействовать с другими компонентами.

Динамическая разметка и условные выражения

Haunted позволяет использовать стандартные JavaScript-выражения внутри шаблонов для условной и динамической разметки:

function Toggle({ show }) {
  return html`
    <div>
      ${show ? html`<p>Содержимое отображается</p>` : html`<p>Содержимое скрыто</p>`}
    </div>
  `;
}

customElements.define('toggle-component', component(Toggle));
  • Любое JavaScript-выражение внутри ${} вычисляется при рендере.
  • Это обеспечивает гибкость и минимизирует необходимость в дополнительной логике для отображения элементов.

Комбинирование компонентов

Функциональные компоненты можно использовать внутри других компонентов, создавая вложенные структуры:

function Parent() {
  return html`
    <h2>Родительский компонент</h2>
    <child-component></child-component>
  `;
}

function Child() {
  return html`<p>Дочерний компонент</p>`;
}

customElements.define('child-component', component(Child));
customElements.define('parent-component', component(Parent));
  • Вложенные компоненты ведут себя как обычные HTML-элементы.
  • Можно передавать данные через атрибуты, что делает композицию гибкой и модульной.

Основные рекомендации

  • Использовать функции без состояния, если компонент не требует динамики.
  • Для динамических компонентов применять useState и хуки.
  • Держать компоненты маленькими и переиспользуемыми.
  • События и пропсы использовать для взаимодействия между компонентами.

Haunted позволяет создавать функциональные компоненты с минимальным синтаксисом, сохраняя реактивность и модульность. Этот подход облегчает построение сложных интерфейсов на базе стандартных веб-компонентов без громоздких библиотек.

Оглавление