diff --git a/README.md b/README.md index 2574f79..ebf774a 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,59 @@ Unlike MobX DevTools you can simply configure which particular information shoul } ``` +## Logger Config + +You can disable logging for actions and computed properties by providing a static `mobxLoggerConfig`. This is useful to keep the console log clean, e.g. when using a large amount of Mobx models which would result in alot of console logs. + +Here's an example of how to disable logging for all actions and computed properties for a given class: + +```js +class MyModel { + static mobxLoggerConfig: { + enabled: false + }; + + // ... +} +``` + +Alternatively you can disable logging for particular class methods: + +```js +class MyStore { + static mobxLoggerConfig: { + methods: { + myAction: false + } + }; + + @action myAction() { + // calls to this method won't be logged + } +} +``` + +You can combine the above examples to whitelist certain actions for being logged: + +```js +class MyStore { + static mobxLoggerConfig: { + enabled: false, + methods: { + myAction: true + } + }; + + @action myAction() { + // only calls to this method are being logged + } + + // other methods won't be logged ... +} +``` + +> Please keep in mind that at this point `mobxLoggerConfig` is only available for actions (`@action`) and computed properties (`@computed`). + #### ReactNative For ReactNative development use this predicate to only enable logging in dev mode with JS debugging enabled: diff --git a/package.json b/package.json index fca545a..675c4f7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mobx-logger", - "version": "0.5.0", + "version": "0.6.0", "description": "Mobx Logger", "main": "lib/index.js", "scripts": { diff --git a/src/log.js b/src/log.js index 20d29fa..27abf05 100644 --- a/src/log.js +++ b/src/log.js @@ -4,8 +4,51 @@ const style = (color, bold = true) => { return `color:${color};font-weight:${bold ? '600' : '300'};font-size:11px`; }; +const defaultLoggerConfig = { + disable: false, + functions: {} +}; + +const getLoggerConfig = (ev) => { + if (ev.object == null) { + return defaultLoggerConfig; + } + const loggerConfig = ev.object.constructor.mobxLoggerConfig; + return loggerConfig == null + ? defaultLoggerConfig + : loggerConfig; +}; + +const isLoggingEnabled = (ev) => { + if (ev.object == null) { + return false; + } + const loggerConfig = getLoggerConfig(ev); + if (loggerConfig == null) { + return true; + } + const enabled = loggerConfig.enabled === true || loggerConfig.enabled == null; + if (loggerConfig.methods == null) { + return enabled; + } + const propertyName = getPropName(ev); + const methodLoggerConfig = loggerConfig.methods[propertyName]; + if (methodLoggerConfig == null) { + return enabled; + } + if (methodLoggerConfig === true) { + return true; + } + if (methodLoggerConfig === false) { + return false; + } + return methodLoggerConfig.enabled !== false; +}; + const logAction = (ev) => { - if (!ev.object) return; + if (!isLoggingEnabled(ev)) { + return; + } console.groupCollapsed('%c%s %s %s.%s()', style('#000'), now(), padStart('ACTION', 8), ev.object.name || ev.object, ev.name); console.log('%cFunction %o', style('#777'), ev.fn); @@ -36,17 +79,30 @@ const logTransaction = (ev) => { }; const logCompute = (ev) => { + if (!isLoggingEnabled(ev)) { + return; + } const name = ev.object; - let propName = ev.name || Object.keys(ev.object.$mobx.values) - .filter(key => ev.object.$mobx.values[key].derivation === ev.fn)[0] || ''; - - if (propName) propName = `.${propName}`; - + let propName = getPropName(ev); + if (propName) { + propName = `.${propName}`; + } console.groupCollapsed('%c%s %s %s%s', style('#9E9E9E'), now(), padStart('COMPUTE', 8), name, propName); console.log('%cEvent %o', style('#777'), ev); console.groupEnd(); }; +const getPropName = (ev) => { + if (ev.name != null) { + return ev.name; + } + return Object + .keys(ev.object.$mobx.values) + .filter( + key => ev.object.$mobx.values[key].derivation === ev.fn + )[0] || ''; +}; + export default (ev, options) => { if (options[ev.type] !== true) { return;