Настройка проекта

Для начала работы с Atomico необходим современный инструмент сборки JavaScript, такой как Vite, который обеспечивает быструю перезагрузку модулей и поддержку современных стандартов ES. Создание проекта начинается с инициализации npm-пакета:

npm init vite@latest my-atomico-app --template vanilla
cd my-atomico-app
npm install

Установка самой библиотеки Atomico выполняется через npm или yarn:

npm install @atomico/core

После этого структура проекта обычно включает директорию src, где создаются компоненты, а также index.html для подключения основного скрипта.

Организация файловой структуры

Для удобства и масштабируемости рекомендуется использовать следующую структуру:

src/
├─ components/
│  ├─ button.js
│  ├─ card.js
├─ styles/
│  ├─ main.css
├─ index.js

Компоненты помещаются в отдельную папку components, каждый в свой файл, что облегчает поддержку и повторное использование. Стили можно хранить в отдельной директории, используя CSS-модули или обычные файлы CSS.

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

Atomico основан на функциональной модели компонентов, схожей с React, но с упором на стандартные веб-компоненты.

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

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

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

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

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

  • c(Component) создаёт класс веб-компонента на основе функции.
  • useState используется для управления локальным состоянием.
  • html позволяет писать разметку с использованием шаблонных литералов.

Подключение компонента на страницу

После создания компонента его можно использовать в HTML так же, как стандартный тег:

<body>
    <x-counter></x-counter>
    <script type="module" src="./src/index.js"></script>
</body>

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

Настройка сборки и интеграция с Vite

Чтобы Vite корректно работал с Atomico, достаточно указать ES-модули и включить поддержку JSX/TSX при необходимости. Пример vite.config.js:

import { defineConfig } from "vite";

export default defineConfig({
    build: {
        target: "esnext",
        rollupOptions: {
            output: {
                format: "es"
            }
        }
    }
});

Это позволяет использовать современные возможности JavaScript и минимизирует конфликты с веб-компонентами.

Работа с состоянием и свойствами компонента

Atomico поддерживает реактивные свойства через props и useState. Свойства задаются через функцию props:

function Button({ label }) {
    return html`<button>${label}</button>`;
}

Button.props = {
    label: String
};

customElements.define("x-button", c(Button));

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

  • Свойства автоматически конвертируются из HTML-атрибутов.
  • Использование useState обеспечивает внутреннюю реактивность без необходимости вручную манипулировать DOM.

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

Компоненты легко импортировать в другие модули:

import { c, html } from "@atomico/core";
import { Button } from "./components/button";

function App() {
    return html`
        <div>
            <x-button label="Нажми меня"></x-button>
        </div>
    `;
}

customElements.define("x-app", c(App));

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

Подключение стилей

Atomico позволяет использовать как глобальные стили, так и инкапсулированные CSS внутри компонента:

import { c, html } from "@atomico/core";
import styles from "./button.css";

function Button({ label }) {
    return html`
        <button class=${styles.button}>${label}</button>
    `;
}

customElements.define("x-button", c(Button));

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

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

  • Каждый компонент должен быть в отдельном файле для удобства тестирования и поддержки.
  • Использовать реактивные свойства и состояние через props и useState.
  • Подключать компоненты через стандартные теги в HTML.
  • Настраивать сборку под ES-модули и современные браузеры для оптимальной производительности.

Это обеспечивает удобное управление проектом на Atomico, поддержку масштабируемости и легкость интеграции новых компонентов.

Оглавление