dev and prod seem to be the wrong way round

README.md

@@ -19,9 +19,7 @@ A live-editing time travel environment for [Redux](https://github.com/rackt/redu
 * If you change the reducer code, each “staged” action will be re-evaluted
 * If the reducers throw, you will see during which action this happened, and what the error was
 * With `persistState()` store enhancer, you can persist debug sessions across page reloads
-* To monitor a part of the state, you can set a `select` prop on the DevTools component: `<DevTools select={state => state.todos} store={store} monitor={LogMonitor} />`
 * Toggle visibility with Ctrl+H
-* To hide the devtools on load, set `visibleOnLoad` to false, e.g.: `<DevTools store={store} monitor={LogMonitor} visibleOnLoad={false} />`
 
 ### Installation
 
@@ -36,10 +34,12 @@ To install, firstly import `devTools` into your root React component:
 ```js
 // Redux utility functions
 import { compose, createStore, applyMiddleware } from 'redux';
+
 // Redux DevTools store enhancers
 import { devTools, persistState } from 'redux-devtools';
-// React components for Redux DevTools
-import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
+
+// A monitor component for Redux DevTools
+import LogMonitor from 'redux-devtools-log-monitor';
 ```
 
 Then, add `devTools` to your store enhancers, and create your store:
@@ -48,28 +48,29 @@ Then, add `devTools` to your store enhancers, and create your store:
 const finalCreateStore = compose(
   // Enables your middleware:
   applyMiddleware(m1, m2, m3), // any Redux middleware, e.g. redux-thunk
+
   // Provides support for DevTools:
   devTools(),
+
   // Lets you write ?debug_session=<name> in address bar to persist debug sessions
   persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
 )(createStore);
 
 const store = finalCreateStore(reducer);
 ```
 
-Finally, include the `DevTools` in your page. You may pass either `LogMonitor` (the default one) or any of the custom monitors described below. For convenience, you can use `DebugPanel` to dock `DevTools` to some part of the screen, but you can put it also somewhere else in the component tree.
+Finally, include the `DevTools` in your page. You may pass either `LogMonitor` (the default one) or any of the custom monitors described below.
 
 ```js
 export default class Root extends Component {
   render() {
     return (
       <div>
         <Provider store={store}>
-          {() => <CounterApp />}
+          <CounterApp />
         </Provider>
-        <DebugPanel top right bottom>
-          <DevTools store={store} monitor={LogMonitor} />
-        </DebugPanel>
+
+        <LogMonitor store={store.devToolsStore} />
       </div>
     );
   }

examples/counter/package.json

@@ -16,7 +16,8 @@
   },
   "homepage": "https://github.com/gaearon/redux-devtools#readme",
   "dependencies": {
-    "react": "^0.13.3",
+    "react": "^0.14.0-rc1",
+    "react-dom": "^0.14.0-rc1",
     "react-redux": "^3.0.0",
     "redux": "^3.0.0",
     "redux-thunk": "^1.0.0"
@@ -25,7 +26,10 @@
     "babel-core": "^5.6.18",
     "babel-loader": "^5.1.4",
     "node-libs-browser": "^0.5.2",
+    "react-dock": "^0.1.0",
     "react-hot-loader": "^1.3.0",
+    "redux-devtools": "^3.0.0-alpha-8",
+    "redux-devtools-log-monitor": "^1.0.0-alpha-8",
     "webpack": "^1.9.11",
     "webpack-dev-server": "^1.9.0"
   }

examples/counter/src/containers/DevTools.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from '../dock/DockMonitor';
+
+export default createDevTools(
+  <DockMonitor defaultPosition='bottom'>
+    <LogMonitor theme='ocean' />
+  </DockMonitor>
+);

examples/counter/src/containers/Root.dev.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+import CounterApp from './CounterApp';
+import DevTools from './DevTools';
+
+export default class Root extends Component {
+  render() {
+    const { store } = this.props;
+    return (
+      <Provider store={store}>
+        <div>
+          <CounterApp />
+          <DevTools />
+        </div>
+      </Provider>
+    );
+  }
+}

examples/counter/src/containers/Root.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./Root.prod');
+} else {
+  module.exports = require('./Root.dev');
+}

examples/counter/src/containers/Root.prod.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+import CounterApp from './CounterApp';
+
+export default class Root extends Component {
+  render() {
+    const { store } = this.props;
+    return (
+      <Provider store={store}>
+        <CounterApp />
+      </Provider>
+    );
+  }
+}

examples/counter/src/dock/DockMonitor.js

@@ -0,0 +1,133 @@
+//
+// TODO: extract to a separate project.
+//
+
+import React, { cloneElement, Children, Component, PropTypes } from 'react';
+import Dock from 'react-dock';
+import { combineReducers } from 'redux';
+
+const POSITIONS = ['left', 'top', 'right', 'bottom'];
+
+export default class DockMonitor extends Component {
+  static propTypes = {
+    defaultPosition: PropTypes.oneOf(POSITIONS).isRequired,
+    defaultIsVisible: PropTypes.bool.isRequired,
+    toggleVisibilityShortcut: PropTypes.string.isRequired,
+    changePositionShortcut: PropTypes.string.isRequired,
+
+    monitorState: PropTypes.shape({
+      position: PropTypes.oneOf(POSITIONS).isRequired,
+      isVisible: PropTypes.bool.isRequired,
+      child: PropTypes.any
+    }),
+
+    monitorActions: PropTypes.shape({
+      toggleVisibility: PropTypes.func.isRequired,
+      changePosition: PropTypes.func.isRequired
+    })
+  };
+
+  static defaultProps = {
+    defaultIsVisible: true,
+    defaultPosition: 'right',
+    toggleVisibilityShortcut: 'H',
+    changePositionShortcut: 'Q'
+  };
+
+  componentDidMount() {
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    window.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleKeyDown(e) {
+    if (!e.ctrlKey) {
+      return;
+    }
+    e.preventDefault();
+
+    const key = event.keyCode || event.which;
+    const char = String.fromCharCode(key);
+    switch (char.toUpperCase()) {
+    case this.props.toggleVisibilityShortcut.toUpperCase():
+      this.props.monitorActions.toggleVisibility();
+      break;
+    case this.props.changePositionShortcut.toUpperCase():
+      this.props.monitorActions.changePosition();
+      break;
+    default:
+      break;
+    }
+  }
+
+  render() {
+    const {
+      monitorState,
+      monitorActions,
+      historyState,
+      historyActions,
+      children
+    } = this.props;
+
+    const {
+      position,
+      isVisible
+    } = monitorState;
+
+    return (
+      <Dock position={position}
+            isVisible={isVisible}
+            dimMode='none'>
+        {cloneElement(Children.only(children), {
+          monitorState: monitorState.child,
+          monitorActions: monitorActions.child,
+          historyState,
+          historyActions
+        })}
+      </Dock>
+    );
+  }
+}
+
+const TOGGLE_VISIBILITY = '@@redux-devtools/dock/TOGGLE_VISIBILITY';
+function toggleVisibility() {
+  return { type: TOGGLE_VISIBILITY };
+}
+
+const CHANGE_POSITION = '@@redux-devtools/dock/CHANGE_POSITION';
+function changePosition() {
+  return { type: CHANGE_POSITION };
+}
+
+DockMonitor.setup = function setup(props) {
+  function position(state = props.defaultPosition, action) {
+    return (action.type === CHANGE_POSITION) ?
+      POSITIONS[(POSITIONS.indexOf(state) + 1) % POSITIONS.length] :
+      state;
+  }
+
+  function isVisible(state = props.defaultIsVisible, action) {
+    return (action.type === TOGGLE_VISIBILITY) ?
+      !state :
+      state;
+  }
+
+  const child = Children.only(props.children);
+  const childSetupResult = child.type.setup(child.props);
+
+  return {
+    reducer: combineReducers({
+      position,
+      isVisible,
+      child: childSetupResult.reducer
+    }),
+    actionCreators: {
+      toggleVisibility,
+      changePosition,
+      child: childSetupResult.actionCreators
+    }
+  };
+}

examples/counter/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from 'react-dom';
+import configureStore from './store/configureStore';
+import Root from './containers/Root';
+
+const store = configureStore();
+
+render(
+  <Root store={store} />,
+  document.getElementById('root')
+);

examples/counter/src/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import counter from './counter';
+
+const rootReducer = combineReducers({
+  counter
+});
+
+export default rootReducer;

examples/counter/src/store/configureStore.dev.js

@@ -0,0 +1,27 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import { persistState } from 'redux-devtools';
+import thunk from 'redux-thunk';
+import rootReducer from '../reducers';
+import DevTools from '../containers/DevTools';
+
+const finalCreateStore = compose(
+  applyMiddleware(thunk),
+  DevTools.instrument(),
+  persistState(
+    window.location.href.match(
+      /[?&]debug_session=([^&]+)\b/
+    )
+  )
+)(createStore);
+
+export default function configureStore(initialState) {
+  const store = finalCreateStore(rootReducer, initialState);
+
+  if (module.hot) {
+    module.hot.accept('../reducers', () =>
+      store.replaceReducer(require('../reducers'))
+    );
+  }
+
+  return store;
+}

examples/counter/src/store/configureStore.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./configureStore.prod');
+} else {
+  module.exports = require('./configureStore.dev');
+}

examples/counter/src/store/configureStore.prod.js

@@ -0,0 +1,11 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from '../reducers';
+
+const finalCreateStore = compose(
+  applyMiddleware(thunk)
+)(createStore);
+
+export default function configureStore(initialState) {
+  return finalCreateStore(rootReducer, initialState);
+}