From 83c2c9f598b13e64812f5f5aae94f8aadc51923e Mon Sep 17 00:00:00 2001 From: Yamakaky Date: Sat, 25 Mar 2017 15:28:43 -0400 Subject: [PATCH 1/2] Add filtering of the mutations logging Fixes #710 --- dist/logger.d.ts | 1 + docs/en/plugins.md | 5 +++++ docs/fr/plugins.md | 5 +++++ docs/ja/plugins.md | 5 +++++ docs/kr/plugins.md | 5 +++++ docs/ru/plugins.md | 5 +++++ docs/zh-cn/plugins.md | 5 +++++ src/plugins/logger.js | 48 +++++++++++++++++++++++-------------------- 8 files changed, 57 insertions(+), 22 deletions(-) diff --git a/dist/logger.d.ts b/dist/logger.d.ts index d9dcccb2b..9863e850a 100644 --- a/dist/logger.d.ts +++ b/dist/logger.d.ts @@ -7,6 +7,7 @@ import { Payload, Plugin } from "../types/index"; export interface LoggerOption { collapsed?: boolean; + filter?:

(mutation: P, stateBefore: S, stateAfter: S) => boolean; transformer?: (state: S) => any; mutationTransformer?:

(mutation: P) => any; } diff --git a/docs/en/plugins.md b/docs/en/plugins.md index 3dfa04299..7bc6183c0 100644 --- a/docs/en/plugins.md +++ b/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 diff --git a/docs/fr/plugins.md b/docs/fr/plugins.md index cba2c94f8..5648f2d67 100644 --- a/docs/fr/plugins.md +++ b/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 diff --git a/docs/ja/plugins.md b/docs/ja/plugins.md index d1b9b0627..453746177 100644 --- a/docs/ja/plugins.md +++ b/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) { // ロギングの前に、状態を変換します // 例えば、特定のサブツリーのみを返します diff --git a/docs/kr/plugins.md b/docs/kr/plugins.md index 495112e8f..15d9c2800 100644 --- a/docs/kr/plugins.md +++ b/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) { // 로깅하기전 상태를 변이 하십시오. // 예를 들어 특정 하위 트리만 반환합니다. diff --git a/docs/ru/plugins.md b/docs/ru/plugins.md index 37fbae0fd..3c2f301dc 100644 --- a/docs/ru/plugins.md +++ b/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) { // обработать состояние перед логированием // например, позволяет рассматривать только конкретное поддерево diff --git a/docs/zh-cn/plugins.md b/docs/zh-cn/plugins.md index df1611239..a80295cc1 100644 --- a/docs/zh-cn/plugins.md +++ b/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) { // 在开始记录之前转换状态 // 例如，只返回指定的子树 diff --git a/src/plugins/logger.js b/src/plugins/logger.js index 1bef55cc7..4dcc003c1 100644 --- a/src/plugins/logger.js +++ b/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 From d718d7e4beb881c4d63dcb095907f1caa09227c5 Mon Sep 17 00:00:00 2001 From: Yamakaky Date: Sun, 26 Mar 2017 11:25:44 -0400 Subject: [PATCH 2/2] Taste and colours --- docs/en/plugins.md | 2 +- docs/fr/plugins.md | 2 +- docs/ja/plugins.md | 2 +- docs/kr/plugins.md | 2 +- docs/ru/plugins.md | 2 +- docs/zh-cn/plugins.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/en/plugins.md b/docs/en/plugins.md index 7bc6183c0..4d7e64a37 100644 --- a/docs/en/plugins.md +++ b/docs/en/plugins.md @@ -102,7 +102,7 @@ The `createLogger` function takes a few options: ``` js const logger = createLogger({ collapsed: false, // auto-expand logged mutations - filter(mutation, stateBefore, stateAfter) { + filter (mutation, stateBefore, stateAfter) { // returns true if a mutation should be logged // `mutation` is a { type, payload } return mutation.type !== "aBlacklistedMutation" diff --git a/docs/fr/plugins.md b/docs/fr/plugins.md index 5648f2d67..ace4b21dc 100644 --- a/docs/fr/plugins.md +++ b/docs/fr/plugins.md @@ -102,7 +102,7 @@ La fonction `createLogger` prend quelques options : ``` js const logger = createLogger({ collapsed: false, // auto-expand logged mutations - filter(mutation, stateBefore, stateAfter) { + filter (mutation, stateBefore, stateAfter) { // returns true if a mutation should be logged // `mutation` is a { type, payload } return mutation.type !== "aBlacklistedMutation" diff --git a/docs/ja/plugins.md b/docs/ja/plugins.md index 453746177..f1dfa9137 100644 --- a/docs/ja/plugins.md +++ b/docs/ja/plugins.md @@ -102,7 +102,7 @@ const store = new Vuex.Store({ ``` js const logger = createLogger({ collapsed: false, // ログ出力されたミューテーションを自動で展開します - filter(mutation, stateBefore, stateAfter) { + filter (mutation, stateBefore, stateAfter) { // returns true if a mutation should be logged // `mutation` is a { type, payload } return mutation.type !== "aBlacklistedMutation" diff --git a/docs/kr/plugins.md b/docs/kr/plugins.md index 15d9c2800..9f083dfe5 100644 --- a/docs/kr/plugins.md +++ b/docs/kr/plugins.md @@ -103,7 +103,7 @@ const store = new Vuex.Store({ ``` js const logger = createLogger({ collapsed: false, // 로그를 가지는 변이 자동 확장 - filter(mutation, stateBefore, stateAfter) { + filter (mutation, stateBefore, stateAfter) { // returns true if a mutation should be logged // `mutation` is a { type, payload } return mutation.type !== "aBlacklistedMutation" diff --git a/docs/ru/plugins.md b/docs/ru/plugins.md index 3c2f301dc..df8ef7456 100644 --- a/docs/ru/plugins.md +++ b/docs/ru/plugins.md @@ -102,7 +102,7 @@ const store = new Vuex.Store({ ``` js const logger = createLogger({ collapsed: false, // автоматически раскрывать залогированные мутации - filter(mutation, stateBefore, stateAfter) { + filter (mutation, stateBefore, stateAfter) { // returns true if a mutation should be logged // `mutation` is a { type, payload } return mutation.type !== "aBlacklistedMutation" diff --git a/docs/zh-cn/plugins.md b/docs/zh-cn/plugins.md index a80295cc1..3a261ff27 100644 --- a/docs/zh-cn/plugins.md +++ b/docs/zh-cn/plugins.md @@ -102,7 +102,7 @@ const store = new Vuex.Store({ ``` js const logger = createLogger({ collapsed: false, // 自动展开记录的 mutation - filter(mutation, stateBefore, stateAfter) { + filter (mutation, stateBefore, stateAfter) { // returns true if a mutation should be logged // `mutation` is a { type, payload } return mutation.type !== "aBlacklistedMutation"