Валидация и трансформация значений

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

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

Каждое свойство компонента в SkateJS определяется через объект props:

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

class MyComponent extends Component {
  static props = {
    age: props.number({ default: 18 }),
    name: props.string({ default: 'Anonymous' }),
    isActive: props.boolean()
  };
}
define(MyComponent);

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

  • props.number, props.string, props.boolean автоматически приводят значения к нужному типу.
  • default задаёт значение свойства по умолчанию при отсутствии присвоенного значения.
  • SkateJS проверяет корректность типов при присвоении, генерируя предупреждения в консоли при нарушении.

Пользовательские валидаторы

Помимо встроенных типов, возможна реализация кастомной валидации через функцию validate:

static props = {
  score: props.number({
    validate: value => value >= 0 && value <= 100
  })
};
  • Функция validate получает текущее присваиваемое значение.
  • Если функция возвращает false, SkateJS не обновляет свойство и выводит предупреждение в консоль.
  • Это удобно для ограничения диапазонов чисел, проверки форматов строк и других правил.

Трансформация значений через coerce

Иногда требуется автоматически преобразовывать данные перед сохранением в свойстве. Для этого используется coerce:

static props = {
  tags: props.array({
    coerce: value => Array.isArray(value) ? value : String(value).split(',')
  })
};
  • coerce вызывается каждый раз перед обновлением значения свойства.
  • Позволяет преобразовывать строки в массивы, числа из строк, даты из ISO-строк и другие форматы.
  • Работает совместно с validate, обеспечивая сначала корректное преобразование, затем проверку.

Взаимодействие default, coerce и validate

Порядок обработки свойства SkateJS следующий:

  1. Присвоение нового значения.
  2. Преобразование через coerce (если указано).
  3. Проверка через validate (если указано).
  4. Обновление внутреннего состояния компонента.
  5. Рендер или вызов updated callback.

Пример:

static props = {
  quantity: props.number({
    default: 1,
    coerce: value => Math.floor(value),
    validate: value => value > 0
  })
};
  • Любое присвоенное значение сначала округляется вниз (coerce), затем проверяется на положительность (validate), и только после этого сохраняется.

Валидация объектов и сложных структур

SkateJS поддерживает работу с объектами и массивами через типы props.object и props.array. Для сложных структур можно использовать coerce и кастомные валидаторы:

static props = {
  config: props.object({
    coerce: value => ({
      enabled: !!value.enabled,
      threshold: value.threshold || 0
    }),
    validate: value => typeof value.enabled === 'boolean' && value.threshold >= 0
  })
};
  • coerce гарантирует наличие всех необходимых ключей с корректными типами.
  • validate обеспечивает бизнес-логику проверки значений.
  • Такой подход позволяет легко интегрировать компоненты с внешними данными, не боясь некорректных структур.

Реактивное обновление и синхронизация с DOM

Свойства, определённые через props, автоматически синхронизируются с атрибутами HTML, если они имеют соответствующие типы. SkateJS обеспечивает:

  • Автоматическую конвертацию атрибутов в нужный тип при инициализации компонента.
  • Обратную запись свойства в атрибут при его обновлении (для string, number, boolean).
  • Вызов lifecycle-хуков (updated) только после успешной проверки и трансформации.

Пример:

class ToggleButton extends Component {
  static props = {
    checked: props.boolean({ default: false })
  };

  updated(prevProps) {
    if (prevProps.checked !== this.checked) {
      this.renderCheckedState();
    }
  }

  renderCheckedState() {
    this.setAttribute('aria-pressed', String(this.checked));
  }
}
define(ToggleButton);
  • Любое обновление свойства checked сначала проходит через встроенный coerce для Boolean, затем обновляется DOM через метод updated.

Практические рекомендации

  • Использовать coerce для приведения типов, особенно при работе с данными из атрибутов или внешних источников.
  • Валидаторы (validate) должны проверять бизнес-логику, диапазоны или обязательные условия.
  • Для массивов и объектов применять комбинацию coerce и validate, чтобы предотвратить ошибки при работе с динамическими данными.
  • Всегда задавать default значения для ключевых свойств, чтобы избежать неопределённых состояний компонента.

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

Оглавление