Adds reactotron-redux plugin with action tracking.

packages/demo-react-native/App/Store/Store.js

@@ -6,6 +6,8 @@ import createSagaMiddleware from 'redux-saga'
 import rootSaga from '../Sagas/'
 import R from 'ramda'
 import Reactotron from 'reactotron-react-native'
+import createTrackingEnhancer from 'reactotron-redux'
+import Types from '../Actions/Types'
 
 // the logger master switch
 const USE_LOGGING = Config.sagas.logging
@@ -20,9 +22,12 @@ const logger = createLogger({
 // a function which can create our store and auto-persist the data
 export default () => {
   const sagaMiddleware = createSagaMiddleware()
+  const tracker = createTrackingEnhancer(Reactotron, {
+    except: [Types.STARTUP]
+  })
   const enhancers = compose(
-    applyMiddleware( logger, sagaMiddleware )
-    // Reactotron.storeEnhancer()
+    applyMiddleware(logger, sagaMiddleware),
+    tracker
   )
 
   const store = createStore(rootReducer, enhancers)

packages/demo-react-native/copy-internal-deps.sh

@@ -2,3 +2,4 @@
 cp ../reactotron-react-native/src/*.js node_modules/reactotron-react-native/
 cp ../reactotron-core-client/src/*.js node_modules/reactotron-core-client/
 cp -r ../reactotron-core-client/src/plugins node_modules/reactotron-core-client/
+cp ../reactotron-redux/dist/*.js node_modules/reactotron-redux/

packages/demo-react-native/package.json

@@ -19,6 +19,7 @@
     "seamless-immutable": "^6.0.1",
     "socket.io": "^1.4.8",
     "reactotron-core-client": "^0.0.1",
-    "reactotron-react-native": "^0.0.1"
+    "reactotron-react-native": "^0.0.1",
+    "reactotron-redux": "^0.0.1"
   }
 }

packages/reactotron-cli/src/commands/redux/reduxActionDone.js

@@ -1,14 +1,14 @@
-const COMMAND = 'redux.action.done'
+const COMMAND = 'state.action.complete'
 
 /**
  Received when a redux action is complete.
  */
-const process = (context, action) => {
-  const {type, ms} = action.message
+const process = (context, command) => {
+  const {name, ms, action} = command.payload
   const time = context.timeStamp()
-  context.ui.reduxActionBox.log(`${time} {cyan-fg}${type}{/}{|}{white-fg}${ms}{/}ms`)
+  context.ui.reduxActionBox.log(`${time} {cyan-fg}${name}{/}{|}{white-fg}${ms}{/}ms`)
   if (context.reduxActionLoggingStyle === 'full') {
-    context.ui.reduxActionBox.log(action.message.action)
+    context.ui.reduxActionBox.log(action)
     context.ui.reduxActionBox.log('')
   }
 }

packages/reactotron-cli/src/context.js

@@ -12,7 +12,7 @@ export default class Context {
     this.menuStack = []
     this.clients = {}
     this.lastRepeatableMessage = null
-    this.reduxActionLoggingStyle = 'short'
+    this.reduxActionLoggingStyle = 'full'
     this.apiLoggingStyle = 'short'
     this.config = {}
   }

packages/reactotron-core-client/src/index.js

@@ -3,6 +3,7 @@ import validate from './validate'
 import logger from './plugins/logger'
 import benchmark from './plugins/benchmark'
 import { start } from './stopwatch'
+export { start } from './stopwatch'
 
 const DEFAULTS = {
   io: null, // the socket.io function to create a socket
@@ -101,7 +102,7 @@ export class Client {
    * Sends a command to the server
    */
   send (type, payload) {
-    this.socket.emit('command', { type, payload })
+    this.socket && this.socket.emit('command', { type, payload })
   }
 
   /**

packages/reactotron-redux/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [ "es2015", "stage-1" ]
+}

packages/reactotron-redux/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+npm-debug.log
+coverage
+.nyc_output
+dist

packages/reactotron-redux/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Steve Kellock
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/reactotron-redux/README.md

@@ -0,0 +1,61 @@
+# reactotron-redux
+
+Let's plug Redux into Reactotron!
+
+Ships with middleware ready to plug into your Redux store.
+
+* Track your actions with performance metrics
+* Query your state tree
+* Subscribe to paths within your state tree watching for changes
+* Execute arbitrary actions
+
+# Installing
+
+`npm i --save-dev reactotron-redux`
+
+
+# Configuring
+
+In the file that you create your Redux store, add these two imports at the top:
+
+```js
+import Reactotron from 'reactotron-react-native'
+import createReactotronTrackingEnhancer from 'reactotron-redux'
+```
+
+Then you either add it as the 2nd parameter to Redux's `createStore` or
+you add it the list of enhancers you're composing.
+
+Here's a bigger example:
+
+```js
+
+// Here we're composing our enhancers, this example is already using the
+// `applyMiddleware` enhancer which typical in Redux apps.
+// So we just put our call to `createReactotronTrackingEnhancer` here.
+//
+// Also, we have to pass it the Reactotron we're using for our app which
+// came in up in the import section.
+const enhancers = compose(
+  applyMiddleware(logger),
+  createReactotronTrackingEnhancer(Reactotron)
+)
+
+// This creates our store (rootReducer is just from a sample app, you've
+// probably got something similar).
+const store = createStore(rootReducer, enhancers)
+```
+
+
+# Options
+
+`createReactotronTrackingEnhancer()` has a 2nd parameter.  It's an object.
+
+`except` is an array of strings that match actions flowing through Redux.
+
+If you have some actions you'd rather just not see (for example, `redux-saga`)
+triggers a little bit of noise, you can suppress them:
+
+`createReactotronTrackingEnhancer(Reactotron, {
+  except: ['EFFECT_TRIGGERED', 'EFFECT_RESOLVED', 'EFFECT_REJECTED']
+})`

packages/reactotron-redux/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "reactotron-redux",
+  "version": "0.0.1",
+  "description": "A Reactotron plugin for Redux.",
+  "main": "dist/index.js",
+  "scripts": {
+    "test": "ava",
+    "watch": "ava --watch",
+    "coverage": "nyc ava",
+    "build": "rollup -c rollup.config.js"
+  },
+  "repository": "https://github.com/skellock/reactotron/tree/master/packages/reactotron-redux",
+  "author": "Steve Kellock",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/skellock/reactotron/issues"
+  },
+  "homepage": "https://reactotron.com",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "redux": "^3.5.2"
+  },
+  "devDependencies": {
+    "ava": "^0.15.2",
+    "babel-core": "^6.11.4",
+    "babel-eslint": "^6.1.2",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-es2015-rollup": "^1.1.1",
+    "babel-preset-stage-1": "^6.5.0",
+    "mockery": "^1.7.0",
+    "nyc": "^7.1.0",
+    "rollup": "^0.34.1",
+    "rollup-plugin-babel": "^2.6.1",
+    "standard": "^7.1.2",
+    "redux": "^3.5.2"
+  },
+  "ava": {
+    "require": [
+      "babel-core/register"
+    ],
+    "babel": {
+      "babelrc": false,
+      "presets": [
+        "es2015",
+        "stage-1"
+      ]
+    }
+  },
+  "standard": {
+    "parser": "babel-eslint"
+  },
+  "dependencies": {
+    "ramda": "^0.21.0",
+    "ramdasauce": "^1.1.0",
+    "reactotron-core-client": "^0.0.1"
+  }
+}

packages/reactotron-redux/rollup.config.js

@@ -0,0 +1,14 @@
+import babel from 'rollup-plugin-babel'
+
+export default {
+  entry: 'src/index.js',
+  format: 'cjs',
+  plugins: [
+    babel({
+      babelrc: false,
+      runtimeHelpers: true,
+      presets: ['es2015-rollup', 'stage-1']
+    })
+  ],
+  dest: 'dist/index.js'
+}

packages/reactotron-redux/src/index.js

@@ -0,0 +1 @@
+export default from './store-enhancer'

packages/reactotron-redux/src/plugin.js

@@ -0,0 +1,31 @@
+const createPlugin = store => {
+  // hold onto the send
+  let capturedSend
+
+  // here's the plugin
+  const plugin = config => {
+    // remember the plugin
+    capturedSend = config.send
+    return {}
+  }
+
+  // attach a function that we can call from the enhancer
+  plugin.report = (action, ms) => {
+    if (!capturedSend) return
+
+    // let's call the type, name because that's "generic" name in Reactotron
+    let { type: name } = action
+
+    // convert from symbol to type if necessary
+    if (typeof name === 'symbol') {
+      name = name.toString().replace(/^Symbol\(/, '').replace(/\)$/, '')
+    }
+
+    // off ya go!
+    capturedSend('state.action.complete', { name, action, ms })
+  }
+
+  return plugin
+}
+
+export default createPlugin

packages/reactotron-redux/src/store-enhancer.js

@@ -0,0 +1,60 @@
+import R from 'ramda'
+import createPlugin from './plugin'
+
+const DEFAULTS = {
+  // except: [] // which actions
+}
+
+/**
+ * Create the enhancer.
+ *
+ * @params {Object} reactotron - The Reactotron instance to which we're attaching.
+ * @params {Object} enhancerOptions - The options for the enhancer.
+ */
+const createReactotronStoreEnhancer = (reactotron, enhancerOptions = {}) => {
+  // verify reactotron
+  if (!(R.is(Object, reactotron) && typeof reactotron.addPlugin === 'function')) {
+    throw new Error('invalid reactotron passed')
+  }
+
+  // assemble a crack team of options to use
+  const options = R.merge(DEFAULTS, enhancerOptions)
+
+  // an enhancer is a function that returns a store
+  const reactotronEnhancer = createStore => (reducer, initialState, enhancer) => {
+    // the store to create
+    const store = createStore(reducer, initialState, enhancer)
+    const plugin = createPlugin(store)
+    reactotron.addPlugin(plugin)
+
+    // swizzle the current dispatch
+    const originalDispatch = store.dispatch
+
+    // create our dispatch
+    const dispatch = action => {
+      // start a timer
+      const elapsed = reactotron.startTimer()
+
+      // call the original dispatch that actually does the real work
+      const result = originalDispatch(action)
+
+      // stop the timer
+      const ms = elapsed()
+
+      // action not blacklisted?
+      if (!R.contains(action.type, options.except || [])) {
+        plugin.report(action, ms)
+      }
+
+      // return the real work's result
+      return result
+    }
+
+    // send the store back, but with our our dispatch
+    return R.merge(store, { dispatch })
+  }
+
+  return reactotronEnhancer
+}
+
+export default createReactotronStoreEnhancer

packages/reactotron-redux/test/_fake-io.js

@@ -0,0 +1,6 @@
+export default (x) => {
+  return {
+    on: (command, callback) => true,
+    emit: () => true
+  }
+}