A Hyperapp dispatch initializer that logs state updates and action information to the console.
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
});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";Download the minified library from the CDN.
<script src="https://unpkg.com/hyperapp-logger"></script>You can find the library in window.hyperappLogger.
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)
});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
}
})
});Hyperapp Logger is MIT licensed. See LICENSE.