Структура проекта

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

Организация файлов

Стандартная структура проекта в Atomico обычно выглядит следующим образом:

src/
 ├─ components/
 │   ├─ button/
 │   │   ├─ button.js
 │   │   └─ button.css
 │   ├─ card/
 │   │   ├─ card.js
 │   │   └─ card.css
 ├─ pages/
 │   ├─ home.js
 │   └─ about.js
 ├─ utils/
 │   └─ fetch.js
 ├─ index.js
 └─ index.css

components/ — директория для повторно используемых компонентов. Каждый компонент содержит отдельный JS-файл и CSS, если стили не инлайн.
pages/ — страницы приложения, которые комбинируют компоненты для формирования конкретного интерфейса.
utils/ — вспомогательные функции и модули, которые не привязаны к конкретному компоненту.
index.js — точка входа приложения.
index.css — глобальные стили.

Такое разделение позволяет легко масштабировать проект, добавлять новые компоненты и управлять зависимостями.

Основной компонент

В Atomico компонент создается с помощью функции c(). Основные элементы компонента включают:

props — свойства компонента.
state — локальное состояние.
hooks — функции жизненного цикла и реактивного управления.
render — возвращает JSX-разметку.

Пример базового компонента:

import { c, useState } from "atomico";

function Button({ label }) {
    const [clicked, setClicked] = useState(false);

    return (
        <button
            className={clicked ? "active" : ""}
            oncl ick={() => setClicked(!clicked)}
        >
            {label}
        </button>
    );
}

Button.props = {
    label: String,
};

export const button = c(Button);

useState обеспечивает реактивность компонента.
Button.props задает типы и значения по умолчанию для свойств.
c(Button) регистрирует компонент и позволяет использовать его как стандартный HTML-тег.

Вложенные и композиционные компоненты

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

import { c } from "atomico";
import { button } from "./button";

function Card({ title }) {
    return (
        <div class="card">
            <h2>{title}</h2>
            <button label="Нажать" />
        </div>
    );
}

Card.props = {
    title: String,
};

export const card = c(Card);

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

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

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

Инлайн-стили через атрибут style.
CSS-файлы, импортируемые в JS-файл компонента.
Scoped CSS через специальные утилиты Atomico для изоляции стилей.

Пример инкапсуляции стилей:

import { c, css } from "atomico";

const style = css`
    button {
        background-color: #3498db;
        color: white;
        border: none;
        padding: 0.5em 1em;
        cursor: pointer;
    }
    button.active {
        background-color: #2c80b4;
    }
`;

function Button({ label }) {
    return <button part="button">{label}</button>;
}

Button.props = { label: String };

export const button = c(Button, style);

Использование css гарантирует, что стили будут применяться только к данному компоненту, исключая утечки в глобальный контекст.

Структура состояния и реактивность

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

useState — локальное состояние компонента.
useEffect — побочные эффекты, аналог React.
useRef — ссылка на DOM-элемент.
useContext — контекст для передачи данных между компонентами.

Пример состояния:

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

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

    useEffect(() => {
        console.log("Счётчик обновлён:", count);
    }, [count]);

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

export const counter = c(Counter);

Состояние автоматически вызывает повторный рендер при изменении значения, обеспечивая реактивность интерфейса.

Управление страницами и маршрутизация

В больших проектах рекомендуется разделять страницы и компоненты, чтобы минимизировать зависимости. Для маршрутизации можно использовать сторонние библиотеки, интегрированные с Atomico, например atomico-router, что позволяет поддерживать SPA-архитектуру.

Импорт и экспорт компонентов

Atomico использует стандартный ES-модульный синтаксис. Все компоненты экспортируются и импортируются явно, что повышает читаемость и управляемость проекта:

import { button } from "./components/button";
import { card } from "./components/card";