Отладка событий

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

Слушатели событий

В Haunted события обрабатываются через стандартные DOM-события или кастомные события, отправляемые с помощью dispatchEvent. Для добавления слушателя обычно используется стандартная привязка через addEventListener или обработчики в шаблоне:

import { html, component } from 'haunted';

function ButtonComponent({ onClick }) {
  return html`<button @click=${onClick}>Нажми меня</button>`;
}

customElements.define('button-component', component(ButtonComponent));

Важно понимать, что Haunted использует синтаксис @event, который обеспечивает автоматическое удаление слушателей при размонтировании компонента. Это предотвращает утечки памяти и нежелательные побочные эффекты.

Кастомные события

Кастомные события создаются с помощью CustomEvent и могут содержать полезные данные в поле detail:

function Counter({ count }) {
  const increment = () => {
    const event = new CustomEvent('increment', { detail: { value: 1 }, bubbles: true });
    dispatchEvent(event);
  };

  return html`<button @click=${increment}>+1</button>`;
}

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

Особенности отладки:

  1. Проверка всплытия событий: убедиться, что bubbles: true установлен, если событие должно достигать родительских компонентов.
  2. Слежение за detail: использовать console.log(event.detail) для проверки передаваемых данных.
  3. Подписка на событие: добавлять слушатели на соответствующем уровне DOM, чтобы события не терялись.

Инструменты отладки

  • Консоль браузера: самый простой способ — логирование внутри обработчика события. Например:
<button @click=${e => console.log('Клик произошёл', e)}>Нажми</button>
  • DevTools Event Listeners: Chrome и Firefox позволяют просматривать все активные слушатели на элементе. Это помогает убедиться, что события действительно привязаны и не удалены преждевременно.
  • Breakpoint в обработчике: установка точки останова непосредственно в функции-обработчике позволяет пошагово проследить логику.

Состояния и события

Haunted активно использует хуки useState и useEffect. При отладке событий важно понимать, как изменения состояния влияют на обработчики:

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

function Toggle() {
  const [active, setActive] = useState(false);

  const toggle = () => {
    setActive(!active);
    console.log('Состояние переключено', !active);
  };

  return html`<button @click=${toggle}>${active ? 'Вкл' : 'Выкл'}</button>`;
}

customElements.define('toggle-button', component(Toggle));

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

Отслеживание и предотвращение утечек

  • Автоматическое удаление слушателей: синтаксис @event в Haunted освобождает от необходимости вручную удалять обработчики, но если слушатель добавлен через addEventListener в useEffect, нужно возвращать функцию очистки:
import { useEffect } from 'haunted';

useEffect(() => {
  const handler = () => console.log('Событие');
  window.addEventListener('resize', handler);

  return () => window.removeEventListener('resize', handler);
}, []);
  • Избегать вложенных функций в JSX без мемоизации, если это вызывает перерендеры и пересоздание слушателей.

Логирование событий

Для комплексной отладки рекомендуется структурированное логирование:

function logEvent(event) {
  console.group(`Событие: ${event.type}`);
  console.log('Цель:', event.target);
  console.log('Текущий элемент:', event.currentTarget);
  console.log('Детали:', event.detail);
  console.groupEnd();
}

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

Общие рекомендации

  • Всегда проверять, что событие действительно привязано к элементу.
  • Проверять порядок всплытия и перехвата, чтобы убедиться, что родительский компонент получает событие.
  • Логировать состояние при каждом событии, если оно изменяет UI, чтобы выявить рассинхрон.
  • Для комплексных компонентов с большим числом событий использовать утилиты для визуализации событийного потока, такие как Event Inspector в DevTools.

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

Оглавление