-
-
Save tlvenn/d9623b4a7e7d78203c82b0a482c980da to your computer and use it in GitHub Desktop.
While waiting for React-Native MobX devtools...
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import mobx from 'mobx' | |
const DEFAULT_STYLE = 'color: #006d92; font-weight:bold;' | |
// Just call this function after MobX initialization | |
// As argument you can pass an object with: | |
// - collapsed: true -> shows the log collapsed | |
// - style -> the style applied to the action description | |
export const startLogging = ({ collapsed, style } = {}) => { | |
mobx.spy(event => { | |
if (event.type === 'action') { | |
if (collapsed) { | |
console.groupCollapsed(`Action @ ${formatTime(new Date())} ${event.name}`) | |
} else { | |
console.group(`Action @ ${formatTime(new Date())} ${event.name}`) | |
} | |
console.log('%cType: ', style || DEFAULT_STYLE, event.type) | |
console.log('%cName: ', style || DEFAULT_STYLE, event.name) | |
console.log('%cTarget: ', style || DEFAULT_STYLE, event.target) | |
console.log('%cArguments: ', style || DEFAULT_STYLE, event.arguments) | |
console.groupEnd() | |
} | |
}) | |
} | |
// Utilities | |
const repeat = (str, times) => (new Array(times + 1)).join(str) | |
const pad = (num, maxLength) => repeat('0', maxLength - num.toString().length) + num | |
const formatTime = (time) => `${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment