Hyperapp Logger

A Hyperapp dispatch initializer that logs state updates and action information to the console.

Getting Started

This example shows a counter that can be incremented or decremented. Go ahead and try it online with your browser console open to see the log messages.

import { app } from "hyperapp";
import logger from "hyperapp-logger";

const Up = state => state + 1;
const Down = state => state - 1;

app({
  init: 0,
  view: state => (
    <main>
      <h1>{state.count}</h1>
      <button onclick={Down}>ー</button>
      <button onclick={Up}>＋</button>
    </main>
  ),
  node: document.getElementById("app"),
  dispatch: logger
});

Installation

Node.js

Install with npm / Yarn.

npm i hyperapp-logger

Then with a module bundler like rollup or webpack use as you would anything else.

import logger from "hyperapp-logger";

Browser

Download the minified library from the CDN.

<script src="https://unpkg.com/hyperapp-logger"></script>

You can find the library in window.hyperappLogger.

Usage

import logger from "hyperapp-logger";

app({
  init,
  view,
  node,
  dispatch: logger
});

// Or if you need to pass options
app({
  init,
  view,
  node,
  dispatch: logger(options)
});

Options

options.log

Use it to customize the log function.

app({
  init,
  view,
  node,
  dispatch: logger({
    log(state, action, props, actionResult) {
      // format and send your log messages anywhere you like
    }
  })
});

License

Hyperapp Logger is MIT licensed. See LICENSE.