Установка и начальная настройка

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

Установка

Для работы с Atomico требуется современная среда Node.js (рекомендуется версия 16 и выше). Установка производится через npm или yarn:

npm install @atomico/core
# или
yarn add @atomico/core

При необходимости интеграции с инструментами сборки, такими как Vite, Webpack или Rollup, достаточно подключить библиотеку как обычный npm-пакет. Atomico не требует дополнительной конфигурации для работы с современными сборщиками, так как поставляется в виде ES-модулей.

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

В Atomico компонент создаётся через функцию c, которая возвращает Web Component. Компоненты пишутся в функциональном стиле, с использованием JSX:

import { c, useState } from "@atomico/core";

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

    return (
        <host shadowDom>
            <button oncl ick={() => setCount(count + 1)}>
                Счётчик: {count}
            </button>
        </host>
    );
}

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

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

host — специальный JSX-элемент, обозначающий корень компонента. Можно включить shadowDom для изоляции стилей.
useState — реактивное состояние, аналог хука из React.
Объявление компонента через customElements.define регистрирует его как нативный Web Component.

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

Atomico поддерживает реактивные свойства компонента, которые можно связывать с атрибутами HTML:

import { c, useProp } from "@atomico/core";

function Greeting({ name }) {
    const greeting = useProp("name", "Гость");

    return <host>Привет, {greeting}!</host>;
}

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

useProp позволяет задать значение свойства по умолчанию и отслеживать изменения, происходящие через атрибуты HTML.
Все свойства автоматически становятся реактивными: изменение значения вызывает повторный рендер компонента.

Пример использования в HTML:

<my-greeting name="Алексей"></my-greeting>

Работа с эффектами

Для выполнения побочных эффектов и подписок используется хук useEffect:

import { c, useState, useEffect } from "@atomico/core";

function Timer() {
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => setSeconds(s => s + 1), 1000);
        return () => clearInterval(interval);
    }, []);

    return <host>Прошло секунд: {seconds}</host>;
}

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

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

useEffect вызывается после каждого рендера компонента.
Возвращаемая функция используется для очистки эффектов при удалении компонента или изменении зависимостей.
Второй параметр — массив зависимостей — позволяет контролировать, когда должен выполняться эффект.

Работа со стилями

Atomico поддерживает CSS через тег <style> внутри компонента. При использовании shadowDom стили автоматически изолируются:

function StyledBox() {
    return (
        <host shadowDom>
            <style>
                {`
                    div {
                        width: 100px;
                        height: 100px;
                        background: teal;
                    }
                `}
            </style>
            <div></div>
        </host>
    );
}

customElements.define("my-box", c(StyledBox));

CSS можно писать прямо внутри JSX.
Shadow DOM обеспечивает полную изоляцию стилей, предотвращая конфликт с внешними стилями.

Организация проекта

Рекомендуемая структура проекта при использовании Atomico:

src/
 ├─ components/
 │   ├─ counter.js
 │   └─ greeting.js
 ├─ index.js
 └─ styles/
     └─ global.css

Каждый компонент находится в отдельном файле.
Основной файл (index.js) импортирует и регистрирует все компоненты.
Глобальные стили можно хранить отдельно, чтобы их подключение не зависело от Shadow DOM.

Интеграция с Vite

Простейшая настройка Vite для Atomico выглядит следующим образом:

// vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
    build: {
        target: "esnext",
        minify: false
    }
});

Atomico оптимизирован для работы с ES-модулями, поэтому поддержка современных сборщиков идеальна.
Минификация и транспиляция не обязательны, но могут быть использованы для продакшн-сборки.