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

SkateJS — это современная библиотека для создания веб-компонентов с использованием стандартов Custom Elements и Shadow DOM. Одной из ключевых возможностей является декларативное определение свойств компонента, которые управляют его состоянием, реактивностью и связью с DOM.

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

Свойства в SkateJS задаются через объект props внутри компонента. Каждый ключ этого объекта соответствует имени свойства, а значение определяет его тип, наблюдаемость и поведение.

Простейший пример:

import { define, props, Component } from 'skatejs';

class MyComponent extends Component {
  static props = {
    title: props.string,
    count: props.number
  };

  render() {
    return this.html`<h1>${this.title} (${this.count})</h1>`;
  }
}

define('my-component', MyComponent);

В этом примере определены два свойства: title и count. Типы задаются через предопределённые валидаторы props.string и props.number.

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

  • Свойства автоматически создают геттеры и сеттеры.
  • Изменение значения свойства инициирует перерисовку компонента.
  • SkateJS поддерживает синхронизацию свойств с атрибутами HTML.

Типы свойств

SkateJS предлагает несколько базовых типов для свойств:

  • props.string — строка
  • props.number — число
  • props.boolean — логический тип, синхронизируется с атрибутом
  • props.array — массив
  • props.object — объект
  • props.any — любой тип данных

Пример с булевым свойством:

static props = {
  visible: props.boolean
};

Булевое свойство автоматически конвертируется в атрибут: присутствие атрибута visible означает true, отсутствие — false.

Свойства с настройками

Каждое свойство можно детально настраивать через объект:

static props = {
  title: {
    ...props.string,
    attribute: true,  // синхронизация с атрибутом
    default: 'Заголовок',  // значение по умолчанию
    set: (el, value) => {
      console.log(`Новое значение: ${value}`);
      return value.toUpperCase();
    }
  }
};

Возможные параметры:

  • attribute — определяет, будет ли свойство связано с атрибутом HTML.
  • default — начальное значение свойства при создании компонента.
  • set — функция-перехватчик, вызывается при установке нового значения. Позволяет трансформировать данные или выполнять побочные эффекты.
  • get — функция-перехватчик для получения значения. Может использоваться для вычисляемых свойств.
  • deserialize — преобразует строку атрибута в значение свойства.
  • serialize — преобразует значение свойства обратно в строку атрибута.

Наблюдаемые свойства и реактивность

SkateJS автоматически отслеживает изменения свойств, вызывая обновление компонента через метод render. Любое изменение свойства запускает реактивный цикл:

this.count = this.count + 1; // автоматический ререндер

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

static props = {
  firstName: props.string,
  lastName: props.string,
  fullName: {
    ...props.string,
    get(el) {
      return `${el.firstName} ${el.lastName}`;
    }
  }
};

fullName не хранит отдельного значения, а вычисляется динамически на основе других свойств.

Свойства и атрибуты

SkateJS обеспечивает двунаправленную связь между свойствами и атрибутами:

static props = {
  enabled: { ...props.boolean, attribute: true }
};
  • При изменении свойства enabled обновляется атрибут <my-component enabled>.
  • При прямом изменении атрибута на элементе (el.setAttribute('enabled', '')) значение свойства синхронизируется автоматически.

Это позволяет компонента работать как с JavaScript API, так и с HTML-разметкой.

Дефолтные значения и инициализация

Свойства можно инициализировать при создании компонента:

static props = {
  counter: { ...props.number, default: 0 },
  status: { ...props.string, default: 'idle' }
};
  • Значения default присваиваются при первом создании экземпляра.
  • При отсутствии атрибута и явного задания свойства используются дефолтные значения.

Полезные методы работы с свойствами

  • this.getAttribute('attrName') и this.setAttribute('attrName', value) — низкоуровневое управление атрибутами.
  • this.propName — доступ к текущему значению свойства.
  • Сеттеры свойств вызывают реактивный ререндер компонента.

Расширенные возможности: наблюдатели и валидаторы

SkateJS позволяет добавлять пользовательскую валидацию и наблюдение за изменениями:

static props = {
  age: {
    ...props.number,
    set(el, value) {
      if (value < 0) throw new Error('Возраст не может быть отрицательным');
      return value;
    }
  }
};
  • Любое некорректное значение можно перехватывать.
  • Можно логировать изменения или вызывать сторонние эффекты.

Итог

Система свойств SkateJS обеспечивает мощный и гибкий способ управления состоянием компонентов:

  • декларативное определение свойств с типами;
  • синхронизация со стандартными атрибутами HTML;
  • реактивная перерисовка при изменении значений;
  • возможность вычисляемых и наблюдаемых свойств;
  • поддержка валидации и пользовательских трансформаций.

Эти возможности делают SkateJS удобным инструментом для построения сложных, реактивных веб-компонентов, полностью соответствующих стандартам Custom Elements.

Оглавление