sergey-shpak/hyperapp-middlewares

Frequently used hyperapp#2 middlewares

Hyperapp#2 Middlewares

Hyperapp#2 provides awesome middleware mechanics based on wrapping internal dispatch function, those allows creation of custom dispatch behavior and multiple useful helpers (middlewares). This package is a set of frequently used middlewares.

Install

To install package, please run:

npm install hyperapp-middlewares

List of middlewares

onState

Triggers callback when state object has been dispatched

import { app } from 'hyperapp'
import { onState } from 'hyperapp-middlewares'

app({
  // ... app initialization
  middleware: onState(state => console.log("State", state))
})

onAction (onTuple)

Triggers callback when action/tuple has been dispatched

import { app } from 'hyperapp'
import { onAction } from 'hyperapp-middlewares'

app({
  // ... app initialization
  middleware: onAction(action => console.log("Action", action))
})

onEffect

Triggers callback when effect has been dispatched

import { app } from 'hyperapp'
import { onEffect } from 'hyperapp-middlewares'

app({
  // ... app initialization
  middleware: onEffect(effect => console.log("Effect", effect))
})

Middlewares action/props propagation

For 'onState', 'onAction', 'onTuple' and 'onEffect' return new value from middleware callback to override propagated action, like

  middleware: onState(state => ({ prop: 'new state' }))

logger

Logs each dispatched action. Takes two arguments:

• custom output function ('console.debug' by default)
• and verbose option to log 'tuples' and 'effects'

import { app } from 'hyperapp'
import { logger } from 'hyperapp-middlewares'

app({
  // ... app initialization
  // log only when running in 'development' env
  middleware: process.env.NODE_ENV === 'development' && logger()
})

or with custom output and verbose option

import { app } from 'hyperapp'
import { logger } from 'hyperapp-middlewares'

// custom logger output
const output = (...logs) => {}

app({
  // ... app initialization
  middleware: logger(output, true)
})

immutable

Makes state object immutable, all state mutations fails. (When running in 'strict mode' environment, error is thrown on any state mutation, action triggered mutation is visible through error stack trace).

import { app } from 'hyperapp'
import { immutable } from 'hyperapp-middlewares'

app({
  // ... app initialization
  middleware: immutable
})

omitStateReturn

Omits required state return from action

import { app, h } from 'hyperapp'
import { omitStateReturn } from 'hyperapp-middlewares'

// no need to return 'state' by default
const onkeypress = (state, event) =>
  event.key === 'Enter' && { enter: true }

app({
  // ... app initialization
  middleware: omitStateReturn,
  view: state => h('input', { onkeypress })
})

compose

Creates middlewares composition

import { app } from 'hyperapp'
import { logger, immutable, compose } from 'hyperapp-middlewares'

app({
  // ... app initialization
  // compose(middleware, .., middlewareN)
  middleware: compose(immutable, logger())
})

License

hyperapp-middlewares is MIT licensed. See LICENSE.