Создание плагинов и расширений

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

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

Структура плагина

Плагин обычно реализуется как функция с единственным параметром app:

const loggerPlugin = (app) => {
  const originalDispatch = app.dispatch;

  app.dispatch = (action, data) => {
    console.log('Action dispatched:', action, data);
    return originalDispatch(action, data);
  };

  return app;
};

В этом примере плагин перехватывает вызовы dispatch, логируя каждое действие. Такой подход позволяет внедрять middleware-подобную функциональность, сохраняя оригинальное поведение приложения.

Подключение плагинов

Hyperapp предоставляет гибкость в инициализации приложения. Плагины можно применять сразу после создания app:

import { app } from "hyperapp";

const mainApp = app({
  init: { count: 0 },
  view: state => <h1>{state.count}</h1>,
  node: document.getElementById("app")
});

loggerPlugin(mainApp);

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

const enhancedApp = loggerPlugin(analyticsPlugin(mainApp));

Расширение состояния и действий

Плагины часто используются для добавления новых методов к объекту state или actions без изменения исходного кода приложения. Например, можно добавить метод для работы с локальным хранилищем:

const storagePlugin = (app) => {
  app.actions.saveToStorage = (key, value) => {
    localStorage.setItem(key, JSON.stringify(value));
    app.dispatch({ type: 'STORAGE_SAVED', payload: value });
  };

  return app;
};

После применения плагина в любом месте приложения можно использовать:

mainApp.actions.saveToStorage('user', { name: 'Alice' });

Взаимодействие с внешними сервисами

Плагины позволяют интегрировать сторонние API и сервисы. Например, подключение WebSocket:

const websocketPlugin = (app, url) => {
  const socket = new WebSocket(url);

  socket.onmess age = (event) => {
    app.dispatch({ type: 'RECEIVE_MESSAGE', payload: event.data });
  };

  app.actions.sendMessage = (msg) => {
    socket.send(msg);
  };

  return app;
};

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

Обработка побочных эффектов

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

const timerPlugin = (app) => {
  app.actions.startTimer = (interval) => {
    setInterval(() => app.dispatch({ type: 'TICK' }), interval);
  };

  return app;
};

Паттерны проектирования плагинов

Перехват dispatch — позволяет реализовать глобальные обработчики действий (логирование, валидация, аналитика).
Расширение actions — добавление новых методов без изменения исходного приложения.
Расширение state — внедрение новых полей и их инициализация.
Интеграция внешних сервисов — подключение API, WebSocket, LocalStorage.
Композиция плагинов — последовательное применение нескольких расширений через цепочку функций.