diff --git a/.gitignore b/.gitignore index 7c4bc80..59dc9e2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ lib node_modules coverage +npm-debug.log \ No newline at end of file diff --git a/examples/basic/app.js b/examples/basic/app.js index a6213f8..8c72f40 100644 --- a/examples/basic/app.js +++ b/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( + + + + ); + 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( - - - + , document.getElementById('mount') diff --git a/examples/basic/package.json b/examples/basic/package.json index 4f74fb8..8ae4970 100644 --- a/examples/basic/package.json +++ b/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" diff --git a/package.json b/package.json index 93bbd07..6ecd3b7 100644 --- a/package.json +++ b/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": { diff --git a/src/index.js b/src/index.js index fc43a1d..f598759 100644 --- a/src/index.js +++ b/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}); } }); diff --git a/test/browser/index.js b/test/browser/index.js index 22222e5..72f6eed 100644 --- a/test/browser/index.js +++ b/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, '/')); diff --git a/test/createTests.js b/test/createTests.js index f52d4a6..3a2f7db 100644 --- a/test/createTests.js +++ b/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' });