withLogger (#20)

window.logger => window.hyperappLogger.withLogger

Author: okwolf

README.md

@@ -1,4 +1,4 @@
-# <img height=24 src=https://cdn.rawgit.com/JorgeBucaran/f53d2c00bafcf36e84ffd862f0dc2950/raw/882f20c970ff7d61aa04d44b92fc3530fa758bc0/Hyperapp.svg> Hyperapp Logger
+# <img height=24 src=https://cdn.rawgit.com/jorgebucaran/f53d2c00bafcf36e84ffd862f0dc2950/raw/882f20c970ff7d61aa04d44b92fc3530fa758bc0/Hyperapp.svg> Hyperapp Logger
 
 [![Travis CI](https://img.shields.io/travis/hyperapp/logger/master.svg)](https://travis-ci.org/hyperapp/logger)
 [![Codecov](https://img.shields.io/codecov/c/github/hyperapp/logger/master.svg)](https://codecov.io/gh/hyperapp/logger)
@@ -7,9 +7,37 @@
 
 A [Hyperapp](https://github.com/hyperapp/hyperapp) higher-order `app` that logs state updates and action information to the console.
 
-[Try it Online](https://codepen.io/okwolf/pen/xLQmvW?editors=0010)
+## Getting Started
 
-![Screenshot](https://user-images.githubusercontent.com/3735164/34082934-657f864c-e31c-11e7-93d2-d70f190aa928.png)
+This example shows a counter that can be incremented or decremented. Go ahead and [try it online](https://codepen.io/okwolf/pen/xLQmvW?editors=0010) with your browser console open to see the log messages.
+
+```js
+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](https://user-images.githubusercontent.com/3735164/36941306-d7233132-1f0c-11e8-9b97-335f7957a685.png)
 
 ## Installation
 
@@ -23,8 +51,8 @@ npm i <a href="https://www.npmjs.com/package/@hyperapp/logger">@hyperapp/logger<
 
 Then with a module bundler like [rollup](https://github.com/rollup/rollup) or [webpack](https://github.com/webpack/webpack) use as you would anything else.
 
-```jsx
-import logger from "@hyperapp/logger"
+```js
+import { withLogger } from "@hyperapp/logger"
 ```
 
 ### Browser
@@ -35,12 +63,23 @@ Download the minified library from the [CDN](https://unpkg.com/@hyperapp/logger)
 <script src="https://unpkg.com/@hyperapp/logger"></script>
 ```
 
-You can find the library in `window.logger`.
+You can find the library in `window.hyperappLogger`.
+
+```js
+const { withLogger } = hyperappLogger
+```
 
 ## Usage
 
+Compose the `withLogger` function with your `app` before calling it with the usual arguments.
+
 ```js
-logger(options)(app)(state, actions, view, document.body)
+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
@@ -50,7 +89,7 @@ logger(options)(app)(state, actions, view, document.body)
 Use it to customize the log function.
 
 ```js
-logger({
+withLogger({
   log(prevState, action, nextState) {
     // format and send your log messages anywhere you like
   }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@hyperapp/logger",
-  "version": "0.4.2",
-  "description": "Logger for Hyperapp",
-  "main": "dist/logger.js",
+  "version": "0.5.0",
+  "description": "Log Hyperapp state updates and action information to the console",
+  "main": "dist/hyperappLogger.js",
   "jsnext:main": "src/index.js",
   "module": "src/index.js",
   "repository": {
@@ -16,8 +16,8 @@
   "scripts": {
     "test": "jest --coverage --no-cache",
     "build": "npm run bundle && npm run minify",
-    "bundle": "rollup -i src/index.js -o dist/logger.js -m -f umd -n logger",
-    "minify": "uglifyjs dist/logger.js -o dist/logger.js -mc pure_funcs=['Object.defineProperty'] --source-map includeSources,url=logger.js.map",
+    "bundle": "rollup -i src/index.js -o dist/hyperappLogger.js -m -f umd -n hyperappLogger",
+    "minify": "uglifyjs dist/hyperappLogger.js -o dist/hyperappLogger.js -mc pure_funcs=['Object.defineProperty'] --source-map includeSources,url=hyperappLogger.js.map",
     "prepare": "npm run build",
     "format": "prettier --semi false --write '{src,test}/**/*.js'"
   },

src/index.js

@@ -1,42 +1,48 @@
 import defaultLog from "./defaultLog"
 
-export default function(options) {
-  options = options || {}
-  options.log = typeof options.log === "function" ? options.log : defaultLog
+var isFn = function(value) {
+  return typeof value === "function"
+}
 
-  return function(app) {
-    return function(initialState, actionsTemplate, view, container) {
-      function enhanceActions(actions, prefix) {
-        var namespace = prefix ? prefix + "." : ""
-        return Object.keys(actions || {}).reduce(function(otherActions, name) {
-          var namedspacedName = namespace + name
-          var action = actions[name]
-          otherActions[name] =
-            typeof action === "function"
-              ? function(data) {
-                  return function(state, actions) {
-                    var result = action(data)
-                    result =
-                      typeof result === "function"
-                        ? result(state, actions)
-                        : result
-                    options.log(
-                      state,
-                      { name: namedspacedName, data: data },
-                      result
-                    )
-                    return result
-                  }
+function makeLoggerApp(log, nextApp) {
+  return function(initialState, actionsTemplate, view, container) {
+    function enhanceActions(actions, prefix) {
+      var namespace = prefix ? prefix + "." : ""
+      return Object.keys(actions || {}).reduce(function(otherActions, name) {
+        var namedspacedName = namespace + name
+        var action = actions[name]
+        otherActions[name] =
+          typeof action === "function"
+            ? function(data) {
+                return function(state, actions) {
+                  var result = action(data)
+                  result =
+                    typeof result === "function"
+                      ? result(state, actions)
+                      : result
+                  log(state, { name: namedspacedName, data: data }, result)
+                  return result
                 }
-              : enhanceActions(action, namedspacedName)
-          return otherActions
-        }, {})
-      }
+              }
+            : enhanceActions(action, namedspacedName)
+        return otherActions
+      }, {})
+    }
+
+    var enhancedActions = enhanceActions(actionsTemplate)
 
-      var enhancedActions = enhanceActions(actionsTemplate)
+    var appActions = nextApp(initialState, enhancedActions, view, container)
+    return appActions
+  }
+}
 
-      var appActions = app(initialState, enhancedActions, view, container)
-      return appActions
+export function withLogger(optionsOrApp) {
+  if (isFn(optionsOrApp)) {
+    return makeLoggerApp(defaultLog, optionsOrApp)
+  } else {
+    var log = isFn(optionsOrApp.log) ? optionsOrApp.log : defaultLog
+    return function(nextApp) {
+      return makeLoggerApp(log, nextApp)
     }
   }
 }

test/logger.test.js

@@ -1,5 +1,5 @@
 import { h, app } from "hyperapp"
-import logger from "../src"
+import { withLogger } from "../src"
 
 const defaultConsole = console
 
@@ -8,7 +8,7 @@ afterEach(() => {
 })
 
 test("without actions", done =>
-  logger()(app)(undefined, undefined, () => done()))
+  withLogger(app)(undefined, undefined, () => done()))
 
 test("log", done => {
   console = {
@@ -19,7 +19,24 @@ test("log", done => {
     }
   }
 
-  logger()(app)(
+  withLogger(app)(
+    {},
+    {
+      foo: () => state => state
+    }
+  ).foo()
+})
+
+test("options without custom log", done => {
+  console = {
+    log() {},
+    group() {},
+    groupEnd() {
+      done()
+    }
+  }
+
+  withLogger({})(app)(
     {},
     {
       foo: () => state => state
@@ -28,7 +45,7 @@ test("log", done => {
 })
 
 test("custom log function", done =>
-  logger({
+  withLogger({
     log(state, action, nextState) {
       expect(state).toEqual({ value: 0 })
       expect(action).toEqual({ name: "inc", data: 2 })
@@ -45,7 +62,7 @@ test("custom log function", done =>
   ).inc(2))
 
 test("state slices", done => {
-  const actions = logger({
+  const actions = withLogger({
     log(state, action, nextState) {
       switch (action.name) {
         case "hello":
@@ -80,7 +97,7 @@ test("state slices", done => {
 })
 
 test("doesn't interfere with state updates", done => {
-  const actions = logger({
+  const actions = withLogger({
     log(state, action, nextState) {}
   })(app)(
     {
@@ -117,7 +134,7 @@ test("doesn't interfere with state updates", done => {
 
 test("doesn't interfere with custom container", done => {
   document.body.innerHTML = "<main></main>"
-  logger({
+  withLogger({
     log(state, action, nextState) {}
   })(app)(
     {},