Vanilla JS использование

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

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

В Atomico компонент создается через функцию c. Она принимает объект с определением компонента: свойства (props), состояние (state), жизненный цикл (hooks) и рендер-функцию.

import { c, useState, html } from 'atomico';

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

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

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

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

  • useState работает аналогично React, создавая реактивное состояние.
  • html используется для декларативного создания DOM через шаблонные строки.
  • c(Component) возвращает конструктор веб-компонента, который регистрируется через customElements.define.

Свойства компонентов (Props)

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

function Greeting({ name = 'Гость' }) {
    return html`<h1>Привет, ${name}!</h1>`;
}

Greeting.props = {
    name: String
};

customElements.define('my-greeting', c(Greeting));

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

  • Все свойства автоматически отслеживаются и вызывают повторный рендер при изменении.
  • Можно задавать кастомные события для взаимодействия с родителем.

Реактивное состояние и эффекты

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

import { useEffect } from 'atomico';

function Timer() {
    const [time, setTime] = useState(0);

    useEffect(() => {
        const id = setInterval(() => setTime(t => t + 1), 1000);
        return () => clearInterval(id);
    }, []);

    return html`<p>Время: ${time}s</p>`;
}

customElements.define('my-timer', c(Timer));

Принципы работы:

  • Эффекты выполняются после рендера.
  • Возвращаемая функция используется для очистки ресурсов (аналог componentWillUnmount).

События и коммуникация между компонентами

Atomico упрощает создание и использование кастомных событий через dispatch.

function Button() {
    return html`
        <button oncl ick=${() => dispatch(this, 'click', { detail: 'Привет' })}>
            Нажми меня
        </button>
    `;
}

customElements.define('my-button', c(Button));

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

  • dispatch(component, eventName, options) создает и отправляет событие от компонента.
  • Родительский компонент может слушать эти события через стандартные слушатели DOM.

Стилизация компонентов

Atomico поддерживает встроенные стили через тег <style> внутри шаблона или использование Shadow DOM.

function Card() {
    return html`
        <style>
            div { 
                border: 1px solid #ccc; 
                padding: 1rem; 
                border-radius: 8px; 
            }
        </style>
        <div>Контент карточки</div>
    `;
}

customElements.define('my-card', c(Card));

Важные моменты:

  • Стили из Shadow DOM инкапсулируются и не влияют на глобальные стили.
  • Можно использовать CSS-переменные для передачи динамических значений.

Композиция компонентов

Компоненты Atomico легко объединяются друг с другом, поддерживая вложенность и повторное использование.

function App() {
    return html`
        <div>
            <my-greeting name="Алексей"></my-greeting>
            <my-counter></my-counter>
        </div>
    `;
}

customElements.define('my-app', c(App));

Преимущества:

  • Компоненты остаются изолированными.
  • Вложенные компоненты полностью сохраняют реактивность и свойства.

Итоги по основам использования

Atomico в Vanilla JS предоставляет:

  • Декларативный синтаксис рендера через html.
  • Реактивное состояние через useState и эффекты через useEffect.
  • Простое определение и типизацию свойств (props).
  • Инкапсулированные стили и Shadow DOM.
  • Лёгкую композицию компонентов и обработку событий.

Эта библиотека идеально подходит для создания современных веб-приложений на чистом JavaScript без тяжёлых фреймворков, сохраняя гибкость и контроль над DOM.

Оглавление