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

Haunted — это легковесная библиотека для создания веб-компонентов на базе Web Components и реактивного подхода, похожего на React Hooks. Ключевым аспектом работы с Haunted является определение свойств компонента, которые управляют его состоянием и взаимодействием с внешним окружением. Свойства позволяют компоненту быть настраиваемым и реактивным, обеспечивая синхронизацию между атрибутами HTML и внутренним состоянием компонента.

Основы определения свойств

В Haunted свойства компонента описываются с помощью функции props из пакета haunted. Свойства могут иметь:

  • Тип — определяет ожидаемый формат значения (String, Number, Boolean и т.д.).
  • Значение по умолчанию — используется, если свойство не передано.
  • Отслеживание изменений — позволяет реагировать на обновления свойства.

Пример базового определения:

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

function MyComponent({ title }) {
  return html`<h1>${title}</h1>`;
}

MyComponent.properties = {
  title: { type: String, default: 'Привет, Haunted!' }
};

customElements.define('my-component', component(MyComponent));

В этом примере title является свойством, которое может быть передано через атрибут HTML:

<my-component title="Новая строка"></my-component>

Типы свойств

Haunted поддерживает стандартные типы данных:

  • String — строковые значения.
  • Number — числовые значения.
  • Boolean — логические флаги.
  • Array / Object — сложные структуры данных.

Свойства типа Boolean автоматически интерпретируются через наличие атрибута:

MyComponent.properties = {
  active: { type: Boolean, default: false }
};

HTML:

<my-component active></my-component>

Если атрибут active присутствует, значение свойства станет true, иначе — false.

Свойства с геттерами и сеттерами

Для более сложной логики можно использовать геттеры и сеттеры, чтобы контролировать поведение при изменении значения:

MyComponent.properties = {
  count: {
    type: Number,
    default: 0,
    set(value) {
      console.log(`Новое значение: ${value}`);
      return value; // обязательно возвращать новое значение
    },
    get(value) {
      return value;
    }
  }
};

Сеттер вызывается при изменении свойства, что позволяет реализовать валидацию, трансформацию или побочные эффекты.

Свойства и реактивность

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

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

  return html`
    <div>
      <button @click=${() => setCount(count - 1)}>-</button>
      <span>${count}</span>
      <button @click=${() => setCount(count + 1)}>+</button>
    </div>
  `;
}

Counter.properties = {
  initial: { type: Number, default: 0 }
};

customElements.define('my-counter', component(Counter));

Здесь свойство initial задаёт начальное состояние счётчика. Любое последующее изменение через внутреннее состояние useState не затрагивает значение свойства, но сохраняет связь с реактивной моделью Haunted.

Связь атрибутов HTML и свойств

Haunted автоматически синхронизирует атрибуты HTML и свойства компонента. Это позволяет использовать стандартный HTML для настройки компонента, а внутренне работать с реактивным состоянием. Для сложных объектов требуется сериализация и десериализация через JSON:

MyComponent.properties = {
  items: {
    type: Object,
    default: () => [],
    attribute: 'items',
    deserialize: value => JSON.parse(value),
    serialize: value => JSON.stringify(value)
  }
};

HTML:

<my-component items='["яблоко","банан"]'></my-component>

Динамическое обновление свойств

Свойства можно обновлять из внешнего кода через Jav * aScript:

const component = document.querySelector('my-component');
component.title = 'Обновлённый заголовок';

Haunted автоматически отследит изменение и вызовет повторный рендер.

Ключевые особенности определения свойств

  • Свойства определяются через объект properties на функции компонента.
  • Поддерживаются стандартные типы данных и сложные структуры.
  • Реализуется реактивность: изменения свойств приводят к обновлению DOM.
  • Атрибуты HTML и свойства синхронизированы, с возможностью кастомной сериализации.
  • Сеттеры и геттеры позволяют контролировать изменения и выполнять побочные эффекты.

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

Оглавление