Настройка окружения

Atomico — это современная библиотека для создания веб-компонентов на основе стандартов Web Components с реактивным подходом, похожим на React. Для начала работы необходимо подготовить окружение и установить необходимые зависимости.

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

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

npm init -y

Эта команда создаст файл package.json, в котором будут храниться все зависимости проекта. После этого можно установить Atomico и сопутствующие инструменты сборки:

npm install atomico vite

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

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

Рекомендуемая структура проекта:

project/
│
├─ src/
│  ├─ components/
│  │  └─ MyComponent.js
│  ├─ index.js
│
├─ index.html
├─ package.json
└─ vite.config.js
  • src/components/ — каталог для всех веб-компонентов;
  • src/index.js — точка входа приложения;
  • index.html — основной HTML-файл;
  • vite.config.js — конфигурация сборки.

Конфигурация Vite

Для поддержки Atomico в Vite создается минимальная конфигурация:

import { defineConfig } from "vite";

export default defineConfig({
  root: ".",
  build: {
    outDir: "dist"
  }
});

Эта конфигурация указывает директорию проекта как корневую и задает папку dist для сборки готового приложения.

Подключение компонентов

В index.js подключение компонентов выполняется через экспорт функций component из Atomico:

import { c, html } from "atomico";
import MyComponent from "./components/MyComponent";

customElements.define("my-component", MyComponent);

customElements.define регистрирует компонент в браузере под уникальным тегом, после чего его можно использовать в HTML:

<my-component></my-component>

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

Базовый компонент в Atomico создается с помощью функции c, которая принимает объект с методами жизненного цикла и функцией рендеринга:

import { c, html } from "atomico";

function MyComponent() {
  return html`
    <div>
      <h1>Hello, Atomico!</h1>
    </div>
  `;
}

export default c(MyComponent);

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

  • c — оборачивает компонент, превращая его в полноценный Web Component;
  • html — шаблонная функция для JSX-подобной разметки;
  • Компонент автоматически наследует реактивность через свойства и состояния.

Настройка локального сервера

Запуск локального сервера выполняется командой:

npx vite

После выполнения Vite открывает локальный сервер, обычно по адресу http://localhost:5173/, где можно наблюдать работу компонентов в реальном времени. Изменения в файлах src/ автоматически отражаются на странице без перезагрузки браузера.

Работа с зависимостями и модулями

Atomico поддерживает ES-модули, поэтому можно использовать импорт сторонних библиотек напрямую в компонентах:

import { useState } from "atomico";

Состояния и эффекты аналогичны подходу React, что упрощает интеграцию сложной логики и реактивного поведения.

Настройка сборки для продакшена

Для подготовки проекта к продакшен-сборке достаточно выполнить:

npx vite build

В результате создается оптимизированная версия приложения в папке dist, готовая к деплою на сервер. Vite автоматически минифицирует код, обрабатывает CSS и оптимизирует загрузку модулей.

Настройка TypeScript (опционально)

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

npm install --save-dev typescript @types/node

И добавить файл tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

После этого файлы компонентов можно писать с расширением .ts или .tsx, что позволяет использовать строгую типизацию и автодополнение в IDE.

Итоговая структура окружения

  • npm для управления пакетами;
  • Vite для сборки и разработки;
  • Atomico для создания веб-компонентов;
  • (Опционально) TypeScript для типизации;
  • Стандартная структура src/components, index.js, index.html.

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

Оглавление