ReactotronSlowlog.js

/**
 * --------------------
 * ReactotronSlowlog.js
 * --------------------
 *
 * A Reactotron plugin for react-native-slowlog by Dotan J. Nahum.
 *
 *   https://github.com/jondot/react-native-slowlog
 *
 * --- PRE-REQUESTS ---
 *
 * Drop this file into a React Native project that already is configured with
 * `reactotron-react-native` and `react-native-slowlog`.
 *
 * --- INSTALLING ---
 *
 * In the file you configure Reactotron on startup, add to the top:
 *
 *   import slowlogPlugin from './ReactotronSlowlog'
 *
 * And then configure Reactotron to use this plugin:
 *
 *   Reactotron.use(slowlogPlugin())
 *
 * --- USAGE ---
 *
 * Find a React component that's being a jerk.  Put this in at the top:
 *
 *   import Reactotron from 'reactotron-react-native'
 *
 * And this in the constructor:
 *
 *   Reactotron.slowlog(this)
 *
 */
import theRealSlowlog from 'react-native-slowlog'

const COMMAND = 'SLOWLOG'
const DEFAULT_PLUGIN_CONFIG = {
  chatty: false // turn off non-slowness messages
}

// a reactotron slowlog plugin
export default (pluginConfig = DEFAULT_PLUGIN_CONFIG) => reactotron => {
  const { chatty } = pluginConfig

  // we'll feed this logger to the real slowlog
  const slowlogger = {
    // slowlog calls this on chatty things
    log: value =>
      chatty && reactotron.display({ name: COMMAND, value, preview: value }),

    // slowlog calls this we're actually slow!
    warn: value =>
      reactotron.display({ name: COMMAND, important: true, value, preview: value })
  }

  // meet the new boss... same as the old boss
  const slowlog = (victim, matcher = /.*/, slowopts = {}) =>
    theRealSlowlog(victim, matcher, { ...slowopts, log: slowlogger })

  // return the reactotron plugin object
  return {
    // decorate `Reactotron` with a `slowlog` function
    features: { slowlog }
  }
}