update logger interface

examples/shopping-cart/vuex/index.js

@@ -15,5 +15,5 @@ export default new Vuex({
   },
   actions,
   mutations: [cartMutations, productsMutations],
-  middlewares: [logger]
+  middlewares: [logger({ collapsed: true })]
 })

examples/todomvc/vuex/middlewares.js

@@ -1,5 +1,5 @@
 import { STORAGE_KEY } from './index'
-import loggerMiddleware from '../../../src/middlewares/logger'
+import logger from '../../../src/middlewares/logger'
 
 const localStorageMiddleware = {
   onMutation (mutation, { todos }) {
@@ -7,4 +7,7 @@ const localStorageMiddleware = {
   }
 }
 
-export default [localStorageMiddleware, loggerMiddleware]
+export default [
+  localStorageMiddleware,
+  logger({ collapsed: true })
+]

package.json

@@ -8,9 +8,9 @@
     "src"
   ],
   "scripts": {
-    "dev-counter": "cd examples/counter && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
-    "dev-todomvc": "cd examples/todomvc && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
-    "dev-cart": "cd examples/shopping-cart && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
+    "counter": "cd examples/counter && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
+    "todomvc": "cd examples/todomvc && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
+    "cart": "cd examples/shopping-cart && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
     "prepublish": "babel src --out-dir lib --presets es2015 --plugins add-module-exports"
   },
   "repository": {

src/middlewares/logger.js

@@ -1,30 +1,40 @@
 // Credits: borrowed code from fcomb/redux-logger
 
-export default {
-  snapshot: true,
-  onMutation (mutation, nextState, prevState) {
-    if (typeof console === 'undefined') {
-      return
-    }
-    const time = new Date()
-    const formattedTime = ` @ ${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`
-    const message = `mutation ${mutation.type}${formattedTime}`
+export default function createLogger ({
+  collapsed = false,
+  transformer = state => state,
+  mutationTransformer = mut => mut
+} = {}) {
+  return {
+    snapshot: true,
+    onMutation (mutation, nextState, prevState) {
+      if (typeof console === 'undefined') {
+        return
+      }
+      const time = new Date()
+      const formattedTime = ` @ ${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`
+      const formattedMutation = mutationTransformer(mutation)
+      const message = `mutation ${mutation.type}${formattedTime}`
+      const startMessage = collapsed
+        ? console.groupCollapsed
+        : console.group
 
-    // render
-    try {
-      console.group(message)
-    } catch (e) {
-      console.log(message)
-    }
+      // render
+      try {
+        startMessage.call(console, message)
+      } catch (e) {
+        console.log(message)
+      }
 
-    console.log(`%c prev state`, `color: #9E9E9E; font-weight: bold`, prevState)
-    console.log(`%c mutation`, `color: #03A9F4; font-weight: bold`, mutation)
-    console.log(`%c next state`, `color: #4CAF50; font-weight: bold`, nextState)
+      console.log(`%c prev state`, `color: #9E9E9E; font-weight: bold`, prevState)
+      console.log(`%c mutation`, `color: #03A9F4; font-weight: bold`, formattedMutation)
+      console.log(`%c next state`, `color: #4CAF50; font-weight: bold`, nextState)
 
-    try {
-      console.groupEnd()
-    } catch (e) {
-      console.log(`—— log end ——`)
+      try {
+        console.groupEnd()
+      } catch (e) {
+        console.log(`—— log end ——`)
+      }
     }
   }
 }