Add filtering of the mutations logging (#711)

* Add filtering of the mutations logging

Fixes #710

* Taste and colours

dist/logger.d.ts

@@ -7,6 +7,7 @@ import { Payload, Plugin } from "../types/index";
 
 export interface LoggerOption<S> {
   collapsed?: boolean;
+  filter?: <P extends Payload>(mutation: P, stateBefore: S, stateAfter: S) => boolean;
   transformer?: (state: S) => any;
   mutationTransformer?: <P extends Payload>(mutation: P) => any;
 }

docs/en/plugins.md

@@ -102,6 +102,11 @@ The `createLogger` function takes a few options:
 ``` js
 const logger = createLogger({
   collapsed: false, // auto-expand logged mutations
+  filter (mutation, stateBefore, stateAfter) {
+    // returns true if a mutation should be logged
+    // `mutation` is a { type, payload }
+    return mutation.type !== "aBlacklistedMutation"
+  },
   transformer (state) {
     // transform the state before logging it.
     // for example return only a specific sub-tree

docs/fr/plugins.md

@@ -102,6 +102,11 @@ La fonction `createLogger` prend quelques options :
 ``` js
 const logger = createLogger({
   collapsed: false, // auto-expand logged mutations
+  filter (mutation, stateBefore, stateAfter) {
+    // returns true if a mutation should be logged
+    // `mutation` is a { type, payload }
+    return mutation.type !== "aBlacklistedMutation"
+  },
   transformer (state) {
     // transform the state before logging it.
     // for example return only a specific sub-tree

docs/ja/plugins.md

@@ -102,6 +102,11 @@ const store = new Vuex.Store({
 ``` js
 const logger = createLogger({
   collapsed: false, // ログ出力されたミューテーションを自動で展開します
+  filter (mutation, stateBefore, stateAfter) {
+    // returns true if a mutation should be logged
+    // `mutation` is a { type, payload }
+    return mutation.type !== "aBlacklistedMutation"
+  },
   transformer (state) {
     // ロギングの前に、状態を変換します
     // 例えば、特定のサブツリーのみを返します

docs/kr/plugins.md

@@ -103,6 +103,11 @@ const store = new Vuex.Store({
 ``` js
 const logger = createLogger({
   collapsed: false, // 로그를 가지는 변이 자동 확장
+  filter (mutation, stateBefore, stateAfter) {
+    // returns true if a mutation should be logged
+    // `mutation` is a { type, payload }
+    return mutation.type !== "aBlacklistedMutation"
+  },
   transformer (state) {
     // 로깅하기전 상태를 변이 하십시오.
     // 예를 들어 특정 하위 트리만 반환합니다.

docs/ru/plugins.md

@@ -102,6 +102,11 @@ const store = new Vuex.Store({
 ``` js
 const logger = createLogger({
   collapsed: false, // автоматически раскрывать залогированные мутации
+  filter (mutation, stateBefore, stateAfter) {
+    // returns true if a mutation should be logged
+    // `mutation` is a { type, payload }
+    return mutation.type !== "aBlacklistedMutation"
+  },
   transformer (state) {
     // обработать состояние перед логированием
     // например, позволяет рассматривать только конкретное поддерево

docs/zh-cn/plugins.md

@@ -102,6 +102,11 @@ const store = new Vuex.Store({
 ``` js
 const logger = createLogger({
   collapsed: false, // 自动展开记录的 mutation
+  filter (mutation, stateBefore, stateAfter) {
+    // returns true if a mutation should be logged
+    // `mutation` is a { type, payload }
+    return mutation.type !== "aBlacklistedMutation"
+  },
   transformer (state) {
     // 在开始记录之前转换状态
     // 例如，只返回指定的子树

src/plugins/logger.js

@@ -4,6 +4,7 @@ import { deepCopy } from '../util'
 
 export default function createLogger ({
   collapsed = true,
+  filter = (mutation, stateBefore, stateAfter) => true,
   transformer = state => state,
   mutationTransformer = mut => mut
 } = {}) {
@@ -15,29 +16,32 @@ export default function createLogger ({
         return
       }
       const nextState = deepCopy(state)
-      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 {
-        startMessage.call(console, message)
-      } catch (e) {
-        console.log(message)
-      }
-
-      console.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState))
-      console.log('%c mutation', 'color: #03A9F4; font-weight: bold', formattedMutation)
-      console.log('%c next state', 'color: #4CAF50; font-weight: bold', transformer(nextState))
 
-      try {
-        console.groupEnd()
-      } catch (e) {
-        console.log('—— log end ——')
+      if (filter(mutation, prevState, nextState)) {
+        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 {
+          startMessage.call(console, message)
+        } catch (e) {
+          console.log(message)
+        }
+
+        console.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState))
+        console.log('%c mutation', 'color: #03A9F4; font-weight: bold', formattedMutation)
+        console.log('%c next state', 'color: #4CAF50; font-weight: bold', transformer(nextState))
+
+        try {
+          console.groupEnd()
+        } catch (e) {
+          console.log('—— log end ——')
+        }
       }
 
       prevState = nextState