Vite и dev-сервер

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

npm init vite@latest haunted-app --template vanilla
cd haunted-app
npm install

Использование шаблона vanilla позволяет работать напрямую с JavaScript и ES-модулями, без лишней конфигурации. После установки необходимо добавить библиотеку Haunted:

npm install haunted

В результате структура проекта будет включать каталог src с точкой входа main.js или main.ts, а также index.html с подключением скрипта через <script type="module" src="/src/main.js"></script>.

Конфигурация dev-сервера Vite

Dev-сервер Vite предоставляет мгновенный HMR (Hot Module Replacement), что особенно полезно при разработке компонентов Haunted, где часто меняются шаблоны и состояния. Основные параметры настраиваются в файле vite.config.js:

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    open: true,
    strictPort: true
  },
  build: {
    target: 'esnext'
  }
});
  • port — порт, на котором запускается сервер.
  • open — автоматическое открытие браузера при старте.
  • strictPort — предотвращает выбор другого порта, если указанный занят.
  • build.target — ES-модульная сборка, оптимизированная под современные браузеры.

Использование этих настроек позволяет максимально ускорить цикл разработки компонентов Haunted.

Подключение Haunted и создание компонентов

Haunted построен на основе стандартных Web Components и Hooks, аналогичных React. Компоненты создаются с помощью функции component и кастомных хуков для управления состоянием. Пример базового компонента:

import { component, html, useState } from 'haunted';

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

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

customElements.define('my-counter', component(Counter));

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

  • html используется для шаблонной строки с реактивными выражениями.
  • useState создаёт реактивное состояние, которое автоматически обновляет DOM при изменении.
  • @click — синтаксис Haunted для привязки событий, аналогичный addEventListener.

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

Vite обеспечивает динамическую замену модулей без полной перезагрузки страницы. Это критично для разработки Haunted-компонентов, где сохранение состояния между перезагрузками ускоряет отладку. HMR автоматически обновляет только изменённый компонент, сохраняя состояние других элементов на странице.

Для корректной работы рекомендуется экспортировать все компоненты как отдельные ES-модули, например:

// src/components/Counter.js
import { component, html, useState } from 'haunted';

export function Counter() {
  const [count, setCount] = useState(0);
  return html`
    <div>
      <p>Счетчик: ${count}</p>
      <button @click=${() => setCount(count + 1)}>Увеличить</button>
    </div>
  `;
}

customElements.define('my-counter', component(Counter));

И подключать их в main.js:

import './components/Counter.js';

Оптимизация сборки для Haunted

Vite позволяет тонко настроить сборку, минимизируя размер и ускоряя загрузку компонентов. Рекомендуется:

  • Использовать build.target = 'esnext' для современных браузеров.
  • Включать minify: 'esbuild' для быстрой минификации.
  • Делить проект на отдельные модули для ленивой загрузки (dynamic import) компонентов:
const module = await import('./components/LazyComponent.js');
document.body.appendChild(document.createElement('lazy-component'));

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

Интеграция CSS и стилей

Haunted поддерживает любые способы подключения стилей. Vite умеет обрабатывать CSS и PostCSS. Рекомендуется:

import './styles/main.css';

Для компонентов с Shadow DOM можно инлайнить стили:

function StyledComponent() {
  return html`
    <style>
      p { color: blue; font-weight: bold; }
    </style>
    <p>Текст с кастомным стилем</p>
  `;
}
customElements.define('styled-component', component(StyledComponent));

Такой подход изолирует стили компонента, предотвращая их утечку на другие элементы.

Заключение по использованию Vite с Haunted

Dev-сервер Vite обеспечивает мгновенную реактивность при разработке Web Components с Haunted, автоматическую перезагрузку, поддержку ES-модулей и модульной структуры проекта. Корректная конфигурация ускоряет цикл разработки, упрощает работу с состоянием и событиями, а также позволяет легко интегрировать стили и оптимизировать сборку для продакшн.

Оглавление