Регистрация компонента

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

Создание компонента

Компонент в Atomico создаётся с помощью функции c(). Она принимает на вход функцию, которая возвращает виртуальный DOM, аналогичный JSX в React.

import { c, html } from "atomico";

function MyButton({ label, onClick }) {
    return html`
        <button oncl ick=${onClick}>${label}</button>
    `;
}

const Button = c(MyButton);

Здесь MyButton — это обычная функция, а c(MyButton) превращает её в полноценный веб-компонент.

Объявление свойств (props)

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

MyButton.props = {
    label: String,
    onClick: Function
};

Особенности:

  • Свойства автоматически конвертируются в атрибуты HTML.
  • Любые изменения атрибутов обновляют компонент реактивно.
  • Типы свойств помогают отлавливать ошибки при передаче данных.

Регистрация компонента в DOM

Для того чтобы компонент стал доступен в HTML, необходимо зарегистрировать его с помощью функции customElements.define. Atomico упрощает этот процесс через вызов c() — он возвращает класс компонента, который можно использовать напрямую:

customElements.define("my-button", Button);

После этого можно использовать компонент в HTML как обычный тег:

<my-button label="Нажми меня"></my-button>

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

Atomico поддерживает слоты для вставки произвольного содержимого внутрь компонента. Слоты описываются через JSX-подобный синтаксис html:

function Card({ title }) {
    return html`
        <div class="card">
            <h2>${title}</h2>
            <slot></slot>
        </div>
    `;
}

const CardComponent = c(Card);
customElements.define("my-card", CardComponent);

Содержимое между тегами <my-card> автоматически попадёт в <slot>.

<my-card title="Пример карточки">
    <p>Это содержимое слота.</p>
</my-card>

Реактивное состояние

Atomico позволяет добавлять реактивное состояние через useState. Любые изменения состояния автоматически вызывают повторный рендер компонента.

import { useState } from "atomico";

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

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

const CounterComponent = c(Counter);
customElements.define("my-counter", CounterComponent);

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

  • useState работает аналогично React, создавая реактивные переменные.
  • Обновление состояния триггерит рендеринг только для изменившихся частей DOM.

Наблюдение за изменением свойств

Atomico позволяет наблюдать за изменениями свойств через хук useProp. Это полезно для вычисления зависимых значений или побочных эффектов.

import { useProp } from "atomico";

function Welcome({ name }) {
    const userName = useProp("name", name);

    return html`<h1>Привет, ${userName}!</h1>`;
}

const WelcomeComponent = c(Welcome);
customElements.define("welcome-message", WelcomeComponent);

События

Компоненты в Atomico могут испускать события через метод emit. Это позволяет взаимодействовать с внешним кодом.

import { emit } from "atomico";

function NotifyButton() {
    const handleClick = () => emit("notify", { message: "Кнопка нажата" });
    
    return html`<button oncl ick=${handleClick}>Сообщить</button>`;
}

const NotifyButtonComponent = c(NotifyButton);
customElements.define("notify-button", NotifyButtonComponent);

Особенности:

  • События создаются с CustomEvent.
  • Можно передавать данные через объект detail.
  • Внешний код может подписываться через addEventListener.

Итоговые принципы регистрации компонента

  1. Компонент создаётся функцией и оборачивается c().
  2. Свойства определяются через статическое поле props.
  3. Регистрация в DOM выполняется через customElements.define.
  4. Поддерживаются слоты, реактивное состояние и события.
  5. Изменения свойств и состояния автоматически обновляют DOM без ручного управления.

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

Оглавление