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

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

Установка и подключение

Haunted распространяется через npm и поддерживает ES-модули. Основные шаги установки:

npm install haunted

После установки можно импортировать функции в проект:

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

Важный момент: Haunted ориентирован на работу с браузерами, поддерживающими ES-модули и Custom Elements. Для старых браузеров потребуется полифилл.

Для подключения через <script> можно использовать CDN:

<script type="module">
  import { html, component, useState } from 'https://unpkg.com/haunted?module';
</script>

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

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

/src
  /components
    my-component.js
  index.js
index.html
package.json
  • components/ — папка для всех веб-компонентов.
  • index.js — точка входа приложения.
  • index.html — HTML-файл с подключением скрипта ES-модуля.

Настройка сборки

Для удобной разработки и поддержки современных возможностей JavaScript используется сборщик модулей, например, Vite или Webpack. Пример настройки Vite:

  1. Установка Vite:
npm create vite@latest my-haunted-app
cd my-haunted-app
npm install
  1. Настройка проекта под Haunted:
  • Убедиться, что type="module" указан в скриптах.
  • Создать структуру компонентов в src/components.

Vite автоматически поддерживает ES-модули и полифиллы для старых браузеров, что упрощает настройку Haunted.

Полезные инструменты

  • Babel — для транспиляции кода и поддержки старых браузеров.
  • ESLint — проверка качества кода.
  • Prettier — автоформатирование для читаемого кода.

Пример конфигурации .eslintrc.json для Haunted:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": "warn",
    "semi": ["error", "always"]
  }
}

Настройка горячей перезагрузки

Vite обеспечивает быструю перезагрузку компонентов при изменениях кода. Для Haunted это особенно важно, так как компоненты автоматически рендерятся при изменении состояния.

Пример подключения компонента с поддержкой HMR:

import { component, html } from 'haunted';
import './components/my-component.js';

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

Полезные полифиллы

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

  • @webcomponents/webcomponentsjs — для поддержки Custom Elements, Shadow DOM и HTML Templates.
  • core-js — для полифиллов ES6+ функций (если используется старый браузер).

Подключение через npm:

npm install @webcomponents/webcomponentsjs core-js

Подключение через HTML:

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>

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

  • Использовать современные браузеры с поддержкой ES-модулей.
  • Разделять компоненты по папкам для удобного масштабирования.
  • Использовать сборщик модулей для автоматического управления зависимостями и полифиллами.
  • Подключать полифиллы только при необходимости, чтобы избежать лишней нагрузки.
  • Настраивать ESLint и Prettier для поддержания чистого и стандартизированного кода.

Правильная настройка окружения обеспечивает стабильную и эффективную работу с Haunted, минимизирует ошибки рендеринга и упрощает дальнейшую разработку сложных веб-компонентов.

Оглавление