Upgrade remotedev-app to v0.8 & New features

README.md

@@ -53,41 +53,58 @@ And run `adb reverse tcp:8097 tcp:8097` on your terminal. (For emulator, RN ^0.3
 
 We used [remotedev-app](https://github.com/zalmoxisus/remotedev-app) as a Redux DevTools UI, but it not need `remotedev-server`. That was great because it included multiple monitors and there are many powerful features.
 
-The debugger will inject `reduxNativeDevTools` enhancer to global, you can add it to store:
+The debugger will inject `reduxNativeDevTools`, `reduxNativeDevToolsCompose` enhancer to global, you can add it to store:
+
+#### Basic store
+
+```js
+import { createStore, applyMiddleware } from 'redux';
+
+const store = createStore(reducer, initialState, 
+  global.reduxNativeDevTools && global.reduxNativeDevTools({/* options */})
+);
+```
+
+#### Advanced store setup
+
+If you setup your store with [middleware and enhancers](http://redux.js.org/docs/api/applyMiddleware.html), just use `reduxNativeDevToolsCompose` instead of redux `compose`:
 
 ```js
 import { createStore, applyMiddleware, compose } from 'redux';
-import thunk from 'redux-thunk';
-import reducer from '../reducers';
-
-export default initialState => {
-  const enhancer = compose(
-    applyMiddleware(thunk),
-    global.reduxNativeDevTools ?
-      global.reduxNativeDevTools(/*options*/) :
-      noop => noop
-  );
-  const store = createStore(reducer, initialState, enhancer);
-  // If you have other enhancers & middlewares
-  // update the store after creating / changing to allow devTools to use them
-  if (global.reduxNativeDevTools) {
-    global.reduxNativeDevTools.updateStore(store);
-  }
-  return store;
-}
+
+const composeEnhancers = global.reduxNativeDevToolsCompose || compose;
+const store = createStore(reducer, preloadedState, composeEnhancers(
+  applyMiddleware(...middleware)
+));
+```
+
+With [options](#options):
+
+```js
+import { createStore, applyMiddleware, compose } from 'redux';
+
+const composeEnhancers = global.reduxNativeDevToolsCompose ?
+  global.reduxNativeDevToolsCompose({/* options */}) :
+  compose;
+const store = createStore(reducer, preloadedState, composeEnhancers(
+  applyMiddleware(...middleware)
+));
 ```
 
 #### Options
 
 Name                  | Description
 -------------         | -------------
+`name`                | *String* representing the instance name to be shown on the remote monitor. Default is `{platform os}-{hash id}`.
 `filters`             | *Map of arrays* named `whitelist` or `blacklist` to filter action types.
 `actionSanitizer`     | *Function* which takes action object and id number as arguments, and should return action object back. See the example bellow.
 `stateSanitizer`      | *Function* which takes state object and index as arguments, and should return state object back. See the example bellow.
 `maxAge`              | *Number* of maximum allowed actions to be stored on the history tree, the oldest actions are removed once maxAge is reached. Default is `30`.
 `actionCreators`      | *Array* or *Object* of action creators to dispatch remotely. See the [example](https://github.com/zalmoxisus/remote-redux-devtools/commit/b54652930dfd4e057991df8471c343957fd7bff7).
-
-These options are same with [remote-redux-devtools#parameters](https://github.com/zalmoxisus/remote-redux-devtools#parameters).
+`shouldHotReload`     | *Boolean* - if set to `false`, will not recompute the states on hot reloading (or on replacing the reducers). Default to `true`.
+`shouldRecordChanges` | *Boolean* - if specified as `false`, it will not record the changes till clicked on "Start recording" button on the monitor app. Default is `true`.
+`shouldStartLocked`   | *Boolean* - if specified as `true`, it will not allow any non-monitor actions to be dispatched till `lockChanges(false)` is dispatched. Default is `false`.
+`pauseActionType`     | *String*  - if specified, whenever clicking on `Pause recording` button and there are actions in the history log, will add this action type. If not specified, will commit when paused. Default is `@@PAUSED`.
 
 ## Debugging tips
 

app/containers/App.js

@@ -14,11 +14,6 @@ const styles = {
     width: '100%',
     heigth: '100%',
   },
-  reduxPanel: {
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-  },
   wrapReactPanel: {
     display: 'flex',
     position: 'fixed',
@@ -107,7 +102,7 @@ export default class App extends Component {
         dimMode="none"
         onSizeChange={this.onReudxDockResize}
       >
-        <ReduxDevTools style={styles.reduxPanel} />
+        <ReduxDevTools />
       </Dock>
     );
   }

app/containers/Debugger/debuggerWorker.js

@@ -13,7 +13,10 @@
 // NOTE: WebWorker not have `global`
 self.global = self;
 // redux store enhancer
-self.reduxNativeDevTools = require('../ReduxDevTools/reduxNativeDevTools').default;
+const devTools = require('../ReduxDevTools/reduxNativeDevTools');
+
+self.reduxNativeDevTools = devTools.default;
+self.reduxNativeDevToolsCompose = devTools.composeWithDevTools;
 
 const messageHandlers = {
   executeApplicationScript(message, sendReply) {

app/containers/ReduxDevTools/ButtonBar.js

@@ -0,0 +1,48 @@
+import React, { Component, PropTypes } from 'react';
+import DispatcherButton from 'remotedev-app/lib/components/buttons/DispatcherButton';
+import ImportButton from 'remotedev-app/lib/components/buttons/ImportButton';
+import ExportButton from 'remotedev-app/lib/components/buttons/ExportButton';
+import SliderButton from 'remotedev-app/lib/components/buttons/SliderButton';
+import LockButton from 'remotedev-app/lib/components/buttons/LockButton';
+import RecordButton from 'remotedev-app/lib/components/buttons/RecordButton';
+import PrintButton from 'remotedev-app/lib/components/buttons/PrintButton';
+import styles from 'remotedev-app/lib/styles';
+
+export default class ButtonBar extends Component {
+  static propTypes = {
+    liftedState: PropTypes.object.isRequired,
+    dispatcherIsOpen: PropTypes.bool,
+    sliderIsOpen: PropTypes.bool,
+    lib: PropTypes.string,
+  };
+
+  shouldComponentUpdate(nextProps) {
+    return nextProps.dispatcherIsOpen !== this.props.dispatcherIsOpen
+      || nextProps.sliderIsOpen !== this.props.sliderIsOpen
+      || nextProps.lib !== this.props.lib
+      || nextProps.liftedState.isLocked !== this.props.liftedState.isLocked
+      || nextProps.liftedState.isPaused !== this.props.liftedState.isPaused;
+  }
+
+  render() {
+    const isRedux = this.props.lib === 'redux';
+    return (
+      <div
+        className="redux-buttonbar"
+        style={styles.buttonBar}
+      >
+        {isRedux &&
+          <RecordButton paused={this.props.liftedState.isPaused} />
+        }
+        {isRedux &&
+          <LockButton locked={this.props.liftedState.isLocked} />
+        }
+        <DispatcherButton dispatcherIsOpen={this.props.dispatcherIsOpen} />
+        <SliderButton isOpen={this.props.sliderIsOpen} />
+        <ImportButton />
+        <ExportButton liftedState={this.props.liftedState} />
+        <PrintButton />
+      </div>
+    );
+  }
+}