@hyperapp/logger

Log Hyperapp state updates and action information to the console

Stats

StarsIssuesVersionUpdatedCreatedSize
@hyperapp/logger
4660.5.04 years ago4 years agoMinified + gzip package size for @hyperapp/logger in KB

Readme

Hyperapp Logger

Travis CI Codecov npm Slack

A Hyperapp higher-order app 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 { h, app } from "hyperapp"
import { withLogger } from "@hyperapp/logger"

const state = {
  count: 0
}

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
}

const view = (state, actions) => (
  <main>
    <h1>{state.count}</h1>
    <button onclick={actions.down} disabled={state.count <= 0}>
      ー
    </button>
    <button onclick={actions.up}>+</button>
  </main>
)

withLogger(app)(state, actions, view, document.body)

Screenshot

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 { withLogger } 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.

const { withLogger } = hyperappLogger

Usage

Compose the withLogger function with your app before calling it with the usual arguments.

import { withLogger } from "@hyperapp/logger"

withLogger(app)(state, actions, view, document.body)

// Or if you need to pass options
withLogger(options)(app)(state, actions, view, document.body)

Options

options.log

Use it to customize the log function.

withLogger({
  log(prevState, action, nextState) {
    // format and send your log messages anywhere you like
  }
})(app)(state, actions, view, document.body)

License

Hyperapp Logger is MIT licensed. See LICENSE.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.