Update History and DevTools

.gitignore

@@ -1,3 +1,4 @@
 lib
 node_modules
 coverage
+npm-debug.log

examples/basic/app.js

@@ -1,21 +1,32 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
-const { compose, createStore, combineReducers } = require('redux');
 const { Provider } = require('react-redux');
 const { Router, Route, IndexRoute } = require('react-router');
-const createHistory = require('history/lib/createHashHistory');
+const createHistory = require('history/lib/createBrowserHistory');
 const { syncReduxAndRouter, routeReducer } = require('redux-simple-router');
-import { devTools } from 'redux-devtools';
-const { DevTools, DebugPanel, LogMonitor } = require('redux-devtools/lib/react');
+const { compose, createStore, combineReducers, applyMiddleware } = require('redux');
+const { createDevTools, persistState } = require('redux-devtools');
+const LogMonitor = require('redux-devtools-log-monitor');
+const DockMonitor = require('redux-devtools-dock-monitor');
 
 const reducers = require('./reducers');
 const { App, Home, Foo, Bar } = require('./components');
 
+const DevTools = createDevTools(
+    <DockMonitor 
+      position='right'
+      toggleVisibilityKey='H'
+      changePositionKey='Q'>
+      <LogMonitor />
+    </DockMonitor>
+  );
+
 const reducer = combineReducers(Object.assign({}, reducers, {
   routing: routeReducer
 }));
 const finalCreateStore = compose(
-  devTools()
+  DevTools.instrument(),
+  persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
 )(createStore);
 const store = finalCreateStore(reducer);
 const history = createHistory();
@@ -32,9 +43,7 @@ ReactDOM.render(
           <Route path="bar" component={Bar}/>
         </Route>
       </Router>
-      <DebugPanel top right bottom>
-        <DevTools store={store} monitor={LogMonitor} />
-      </DebugPanel>
+      <DevTools/>
     </div>
   </Provider>,
   document.getElementById('mount')

examples/basic/package.json

@@ -2,21 +2,24 @@
   "name": "rsr-basic-example",
   "version": "0.0.0",
   "dependencies": {
-    "history": "^1.13.1",
+    "history": "^1.14.0",
     "react": "^0.14.2",
     "react-dom": "^0.14.2",
     "react-redux": "^4.0.0",
-    "react-router": "^1.0.0",
+    "react-router": "^1.0.1",
     "redux": "^3.0.4",
+    "redux-devtools-dock-monitor": "^1.0.0-beta-3",
+    "redux-devtools-log-monitor": "^1.0.0-beta-3",
     "redux-simple-router": "0.0.8"
   },
   "devDependencies": {
-    "babel-core": "^6.1.21",
+    "babel-core": "^6.3.15",
     "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.1.18",
-    "babel-preset-react": "^6.1.18",
-    "redux-devtools": "^2.1.5",
-    "webpack": "^1.12.6"
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-register": "^6.3.13",
+    "redux-devtools": "^3.0.0-beta-3",
+    "webpack": "^1.12.9"
   },
   "scripts": {
     "start": "webpack --watch"

package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "build": "mkdir -p lib && babel ./src/index.js --out-file ./lib/index.js",
     "test": "npm run test:node && npm run test:browser",
-    "test:node": "mocha --compilers js:babel-core/register --recursive ./test/node",
+    "test:node": "mocha --compilers js:babel-register ./test/node",
     "test:browser": "karma start",
     "test:cov": "npm run test:cov:browser && npm run test:cov:node && npm run test:cov:report",
     "test:cov:node": "babel-node $(npm bin)/isparta cover $(npm bin)/_mocha report --dir ./coverage/node-coverage -- --recursive ./test/node",
@@ -32,16 +32,16 @@
     "router"
   ],
   "devDependencies": {
-    "babel-cli": "^6.1.2",
-    "babel-core": "^6.2.1",
+    "babel-cli": "^6.3.15",
+    "babel-core": "^6.3.15",
     "babel-loader": "^6.2.0",
     "babel-plugin-transform-object-assign": "^6.0.14",
-    "babel-preset-es2015": "^6.1.2",
+    "babel-preset-es2015": "^6.3.13",
     "expect": "^1.13.0",
-    "history": "^1.13.1",
+    "history": "^1.14.0",
     "isparta": "^4.0.0",
     "isparta-loader": "^2.0.0",
-    "karma": "^0.13.3",
+    "karma": "^0.13.15",
     "karma-chrome-launcher": "^0.2.0",
     "karma-coverage": "^0.5.3",
     "karma-firefox-launcher": "^0.1.7",
@@ -52,8 +52,9 @@
     "karma-sourcemap-loader": "^0.3.5",
     "karma-webpack": "^1.7.0",
     "mocha": "^2.3.4",
+    "react": "^0.14.3",
     "redux": "^3.0.4",
-    "redux-devtools": "^2.1.5",
+    "redux-devtools": "^3.0.0-beta-3",
     "webpack": "^1.12.9"
   },
   "dependencies": {

src/index.js

@@ -12,8 +12,8 @@ function initPath(path, state) {
   return {
     type: INIT_PATH,
     payload: {
-      path: path,
-      state: state,
+      path,
+      state,
       replace: false,
       avoidRouterUpdate: true
     }
@@ -24,8 +24,8 @@ function pushPath(path, state, { avoidRouterUpdate = false } = {}) {
   return {
     type: UPDATE_PATH,
     payload: {
-      path: path,
-      state: state,
+      path,
+      state,
       replace: false,
       avoidRouterUpdate: !!avoidRouterUpdate
     }
@@ -36,8 +36,8 @@ function replacePath(path, state, { avoidRouterUpdate = false } = {}) {
   return {
     type: UPDATE_PATH,
     payload: {
-      path: path,
-      state: state,
+      path,
+      state,
       replace: true,
       avoidRouterUpdate: !!avoidRouterUpdate
     }
@@ -53,13 +53,13 @@ let initialState = {
   replace: false
 };
 
-function update(state=initialState, { type, payload }) {
+function update(state = initialState, { type, payload }) {
   if(type === INIT_PATH || type === UPDATE_PATH) {
-    return Object.assign({}, state, {
-      path: payload.path,
-      changeId: state.changeId + (payload.avoidRouterUpdate ? 0 : 1),
-      state: payload.state,
-      replace: payload.replace
+    return Object.assign({}, state, { 
+      path: payload.path, 
+      state: payload.state, 
+      replace: payload.replace, 
+      changeId: state.changeId + (payload.avoidRouterUpdate ? 0 : 1)
     });
   }
   return state;
@@ -136,8 +136,9 @@ function syncReduxAndRouter(history, store, selectRouterState = SELECT_STATE) {
        !locationsAreEqual(lastRoute, routing)) {
 
       lastRoute = routing;
-      const method = routing.replace ? 'replaceState' : 'pushState';
-      history[method](routing.state, routing.path);
+
+      const method = routing.replace ? 'replace' : 'push';
+      history[method]({ state: routing.state, pathname: routing.path});
     }
 
   });

test/browser/index.js

@@ -2,4 +2,4 @@ const { createHashHistory, createHistory } = require('history');
 const createTests = require('../createTests.js');
 
 createTests(createHashHistory, 'Hash History', () => window.location = '#/');
-createTests(createHistory, 'Browser History', () => window.history.replaceState(null, null, '/'));
+createTests(createHistory, 'Browser History', () => window.history.pushState(null, null, '/'));

test/createTests.js

@@ -1,8 +1,7 @@
 const expect = require('expect');
 const { pushPath, replacePath, UPDATE_PATH, routeReducer, syncReduxAndRouter } = require('../src/index');
 const { createStore, combineReducers, compose } = require('redux');
-const { devTools } = require('redux-devtools');
-const { ActionCreators } = require('redux-devtools/lib/devTools');
+const { instrument, ActionCreators } = require('redux-devtools');
 
 expect.extend({
   toContainRoute({
@@ -160,14 +159,15 @@ module.exports = function createTests(createHistory, name, reset = defaultReset)
 
       beforeEach(() => {
         history = createHistory();
-        const finalCreateStore = compose(devTools())(createStore);
+
+        const finalCreateStore = compose(instrument())(createStore);
         store = finalCreateStore(combineReducers({
           routing: routeReducer
         }));
-        devToolsStore = store.devToolsStore;
+        devToolsStore = store.liftedStore;
 
         // Set initial URL before syncing
-        history.pushState(null, '/foo');
+        history.push('/foo');
 
         unsubscribe = syncReduxAndRouter(history, store);
       });
@@ -182,7 +182,7 @@ module.exports = function createTests(createHistory, name, reset = defaultReset)
           currentPath = location.pathname;
         });
 
-        history.pushState(null, '/bar');
+        history.push('/bar');
         store.dispatch(pushPath('/baz'));
 
         // By calling reset we expect DevTools to re-play the initial state
@@ -202,9 +202,9 @@ module.exports = function createTests(createHistory, name, reset = defaultReset)
         });
 
         // DevTools action #2
-        history.pushState(null, '/foo2');
+        history.push('/foo2');
         // DevTools action #3
-        history.pushState(null, '/foo3');
+        history.push('/foo3');
 
         // When we toggle an action, the devtools will revert the action
         // and we therefore expect the history to update to the previous path
@@ -253,49 +253,49 @@ module.exports = function createTests(createHistory, name, reset = defaultReset)
           path: '/'
         });
 
-        history.pushState(null, '/foo');
+        history.push('/foo');
         expect(store).toContainRoute({
           path: '/foo',
           replace: false,
           state: null
         });
 
-        history.pushState({ bar: 'baz' }, '/foo');
+        history.replace({state: { bar: 'baz' }, pathname: '/foo'});
         expect(store).toContainRoute({
           path: '/foo',
           replace: true,
           state: { bar: 'baz' }
         });
 
-        history.replaceState(null, '/bar');
+        history.replace('/bar');
         expect(store).toContainRoute({
           path: '/bar',
           replace: true,
           state: null
         });
 
-        history.pushState(null, '/bar');
+        history.replace('/bar');
         expect(store).toContainRoute({
           path: '/bar',
           replace: true,
           state: null
         });
 
-        history.pushState(null, '/bar?query=1');
+        history.push('/bar?query=1');
         expect(store).toContainRoute({
           path: '/bar?query=1',
           replace: false,
           state: null
         });
 
-        history.replaceState({ bar: 'baz' }, '/bar?query=1');
+        history.replace({ state: { bar: 'baz' }, pathname: '/bar?query=1' });
         expect(store).toContainRoute({
           path: '/bar?query=1',
           replace: true,
           state: { bar: 'baz' }
         });
 
-        history.pushState({ bar: 'baz' }, '/bar?query=1#hash=2');
+        history.replace({state: { bar: 'baz' }, pathname: '/bar?query=1#hash=2'});
         expect(store).toContainRoute({
           path: '/bar?query=1#hash=2',
           replace: true,
@@ -443,7 +443,7 @@ module.exports = function createTests(createHistory, name, reset = defaultReset)
         store.dispatch(pushPath('/foo'));
         store.dispatch(pushPath('/foo'));
         store.dispatch(pushPath('/foo', { bar: 'baz' }));
-        history.pushState({ foo: 'bar' }, '/foo');
+        history.push({state: { foo: 'bar' }, pathname: '/foo'});
         store.dispatch(replacePath('/bar'));
         store.dispatch(replacePath('/bar', { bar: 'foo' }));
 
@@ -561,7 +561,7 @@ module.exports = function createTests(createHistory, name, reset = defaultReset)
         }));
         const history = createHistory();
         syncReduxAndRouter(history, store, state => state.notRouting)
-        history.pushState(null, '/bar');
+        history.push('/bar');
         expect(store.getState().notRouting.path).toEqual('/bar');
       });
 
@@ -572,7 +572,7 @@ module.exports = function createTests(createHistory, name, reset = defaultReset)
         const history = createHistory();
         const unsubscribe = syncReduxAndRouter(history, store)
 
-        history.pushState(null, '/foo');
+        history.push('/foo');
         expect(store).toContainRoute({
           path: '/foo'
         });
@@ -587,7 +587,7 @@ module.exports = function createTests(createHistory, name, reset = defaultReset)
 
         unsubscribe();
 
-        history.pushState(null, '/foo');
+        history.push('/foo');
         expect(store).toContainRoute({
           path: '/bar'
         });