Dev server и HMR

Atomico — это современная библиотека для создания веб-компонентов на JavaScript с реактивным подходом. Для комфортной разработки ключевую роль играют dev server и HMR (Hot Module Replacement), которые обеспечивают мгновенное обновление компонентов без полной перезагрузки страницы.

Dev server

Dev server — это локальный сервер, который автоматически обслуживает проект во время разработки. В Atomico он конфигурируется через @atomico/dev-server. Основные возможности:

  • Автообновление при изменениях файлов. Любые изменения в компонентах сразу отражаются в браузере.
  • Поддержка ES-модулей. Atomico строит проект как набор модулей, поэтому dev server умеет корректно отдавать их без сборки через Webpack или Rollup.
  • Интеграция с HMR. Dev server тесно связан с механизмом горячей замены модулей, позволяя менять код компонентов без перезагрузки состояния приложения.

Простейшая конфигурация dev server выглядит так:

// dev.server.js
import { createServer } from "@atomico/dev-server";

createServer({
    root: "./src",
    port: 3000,
    open: true,
});

Параметр root указывает на корневую папку проекта, port — порт локального сервера, open — автоматическое открытие браузера.

HMR (Hot Module Replacement)

HMR позволяет обновлять отдельные модули на лету, сохраняя состояние приложения. В Atomico это реализуется через API hmr и реактивные хуки.

Настройка HMR

HMR включается автоматически при запуске dev server в режиме разработки. Для явного контроля можно использовать следующий паттерн:

import { h, component, useState } from "atomico";

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

    return (
        <host>
            <button oncl ick={() => setCount(count + 1)}>
                {count}
            </button>
        </host>
    );
}

Counter.props = {};

export const counter = component(Counter);

if (import.meta.hot) {
    import.meta.hot.accept();
}

Ключевой момент — использование import.meta.hot.accept(), которое позволяет модулю обновляться без полной перезагрузки страницы. Состояние компонента (count) при этом сохраняется.

Ограничения и рекомендации
  • Сложные состояния (например, объекты с большим числом вложенных реактивных свойств) могут не полностью сохраняться. Для таких случаев рекомендуется использовать отдельное хранилище состояния или Context.
  • Стили. Если стили подключаются через CSS-модули или shadow DOM, Atomico корректно обновляет только соответствующий компонент, не трогая весь документ.
  • Композиция компонентов. При изменении вложенных компонентов родитель автоматически перерисовывается, сохраняя локальные состояния.

Реактивное обновление шаблонов

HMR в Atomico особенно эффективно работает с реактивными хуками, такими как useState, useEffect, useReducer. Изменение функции компонента автоматически триггерит перерисовку. Пример:

import { h, component, useState, useEffect } from "atomico";

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

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

    return <host>{seconds}</host>;
}

export const timer = component(Timer);

if (import.meta.hot) import.meta.hot.accept();

В этом примере таймер продолжает отсчет при изменении кода компонента благодаря HMR, так как состояние seconds сохраняется, а эффект корректно очищается и пересоздается.

Интеграция с другими инструментами

Dev server и HMR Atomico можно использовать совместно с:

  • Rollup или Vite для сборки production-версий.
  • TypeScript для типизации компонентов. HMR корректно обновляет TS-модули при изменениях.
  • PostCSS / CSS-in-JS. Любые стили, связанные с компонентами, автоматически перезагружаются без полной перезагрузки страницы.

Преимущества HMR в Atomico

  • Сокращение времени разработки: изменения отражаются мгновенно.
  • Сохранение состояния: локальные состояния компонентов остаются неизменными.
  • Изоляция обновлений: только измененные компоненты перерисовываются, остальная часть приложения остается стабильной.
  • Совместимость с реактивными хуками: полное сохранение реактивности при перезапуске модулей.

Использование dev server и HMR делает процесс разработки с Atomico максимально эффективным, позволяя быстро тестировать и отлаживать компоненты без лишних перезагрузок и потери состояния.

Оглавление