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

Атрибуты компонентов в Atomico — это способ передачи данных внутрь веб-компонента через HTML-разметку. Они выступают интерфейсом между DOM и логикой компонента, обеспечивая реактивность и типизацию значений.

Определение атрибутов

В Atomico атрибуты задаются с помощью функции props внутри компонента. Каждое свойство может иметь:

  • Тип данных (String, Number, Boolean, Object, Array, Function)
  • Значение по умолчанию
  • Набор валидаторов

Пример объявления атрибутов:

import { c, useState, props } from "atomico";

function Counter({ count }) {
    const [value, setValue] = useState(count);

    return (
        <button oncl ick={() => setValue(value + 1)}>
            {value}
        </button>
    );
}

Counter.props = {
    count: {
        type: Number,
        default: 0
    }
};

export const counter = c(Counter);

Здесь count — атрибут типа Number с дефолтным значением 0. Передача через HTML:

<counter count="5"></counter>

Atomico автоматически преобразует строковое значение "5" в число.

Типизация атрибутов

Atomico поддерживает строгую типизацию. Основные правила:

  • String — любые текстовые значения.
  • Number — строки, содержащие число, автоматически конвертируются.
  • Boolean — наличие атрибута означает true, отсутствие — false.
  • Array / Object — передаются через JSON.

Пример Boolean-атрибута:

Toggle.props = {
    active: {
        type: Boolean,
        default: false
    }
};

HTML:

<toggle active></toggle> <!-- active === true -->
<toggle></toggle>        <!-- active === false -->

Реактивность атрибутов

Изменение атрибута на DOM-узле автоматически обновляет состояние компонента. Atomico связывает DOM с внутренними свойствами:

<counter id="myCounter" count="10"></counter>

<script>
  const counter = document.getElementById("myCounter");
  setTimeout(() => {
      counter.count = 20; // UI обновится автоматически
  }, 1000);
</script>

Внутри компонента count обновляется реактивно, вызывая повторный рендер.

Сложные типы и сериализация

Атрибуты объектов и массивов передаются через JSON:

List.props = {
    items: {
        type: Array,
        default: () => []
    }
};

HTML:

<list items='["яблоко","банан","груша"]'></list>

Atomico автоматически парсит JSON и превращает его в массив внутри компонента.

Валидация атрибутов

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

UserCard.props = {
    age: {
        type: Number,
        validate: value => value >= 0 && value <= 120,
        default: 18
    }
};

Если значение не проходит валидацию, Atomico использует значение по умолчанию.

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

Для всех типов можно задать дефолтные значения. Для объектов и массивов — через функцию:

Gallery.props = {
    images: {
        type: Array,
        default: () => []
    }
};

Использование функции предотвращает совместное использование ссылок на один объект между экземплярами компонентов.

Привязка событий через атрибуты

Свойства типа Function позволяют передавать обработчики событий:

Button.props = {
    onClick: Function
};

<Button onCl ick={() => console.log("Нажато")}></Button>

Внутри компонента можно вызвать переданную функцию напрямую:

<button oncl ick={onClick}>Клик</button>

Итоговое поведение

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

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

Оглавление