fix issues found in manual testing integration, modify README, prepar…

…e 0.10.0

README.md

@@ -106,14 +106,21 @@ index.js:
 ```javascript
 import React from 'react'
 import { render } from 'react-dom'
+import { createStore, applyMiddleware, combineReducers } from 'redux'
 import { Provider, connect } from 'react-redux' // new - import connect
-import createRouterStore from 'ion-router' // our router - new line
+import makeRouter, { makeRouterMiddleware } from 'ion-router' // our router - new line
+import routing from 'ion-router/reducer'
 
 import todoApp from './reducers'
 import App from './components/App'
 
 // set up the router and create the store
-const store = createRouterStore(connect)(todoApp)
+const routerMiddleware = makeRouterMiddleware()
+const store = createStore(combineReducers({
+  todoApp,
+  routing // router reducer here
+}), undefined, applyMiddleware(routerMiddleware)) // router middleware
+makeRouter(connect, store) // set up the router
 
 
 render(
@@ -662,7 +669,7 @@ so instead of:
 
 ```javascript
 // set up our router
-const store = createRouterStore(connect)(reducers)
+makeRouter(connect, store)
 
 exitParams = params => ({
   required: params.required,
@@ -692,14 +699,14 @@ exitParams = params => ({
 })
 
 // set up our router
-createRouterStore(connect, {
+makeRouter(connect, store, [{
   name: 'test',
   path: '/path/:required(/:optional)',
   stateToParams=...,
   paramsToState=...,
   updateState={...},
   exitParams={exitParams},
-})(reducers)
+}])
 
 ```
 

package.json

@@ -34,12 +34,13 @@
   "dependencies": {
     "history": "^4.5.1",
     "invariant": "^2.2.2",
-    "prop-types": "^15.5.8",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "redux": "^3.6.0",
     "route-parser": "0.0.5"
   },
+  "peerDependencies": {
+    "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0",
+    "prop-types": "^15.0.0",
+    "redux": "^2.0.0 || ^3.0.0"
+  },
   "devDependencies": {
     "@kadira/storybook": "^2.35.3",
     "babel-cli": "^6.18.0",

src/helpers.js

@@ -3,6 +3,7 @@ import { createPath } from 'history'
 import * as actions from './actions'
 import * as selectors from './selectors'
 import * as enhancers from './enhancers'
+import reducer from './reducer'
 
 export const filter = (enhancedRoutes, path) => name => enhancedRoutes[name]['@parser'].match(path)
 export const diff = (main, second) => main.filter(name => second.indexOf(name) === -1)
@@ -17,11 +18,12 @@ export function urlFromState(enhancedRoutes, state) {
   const toDispatch = []
   const updatedRoutes = {}
   let url = false
+  const currentUrl = createPath(state.routing.location)
   state.routing.matchedRoutes.forEach((route) => {
     const s = enhancedRoutes[route]
     const newParams = s.paramsFromState(state)
     const newState = s.stateFromParams(newParams)
-    if (changed(s.params, newParams)) {
+    if (changed(s.params, newParams).length) {
       updatedRoutes[route] = {
         ...enhancedRoutes[route],
         params: newParams,
@@ -54,9 +56,9 @@ export function urlFromState(enhancedRoutes, state) {
   const {
     toDispatch: t
   } = matchRoutes(enhancedRoutes, tempState, actions.route({ // eslint-disable-line
-    pathname: url
+    pathname: url || currentUrl
   }), false)
-  toDispatch.push(actions.push(url))
+  if (url && url !== currentUrl) toDispatch.push(actions.push(url))
   return {
     newEnhancedRoutes: { ...enhancedRoutes, ...updatedRoutes },
     toDispatch: [...toDispatch, ...t],
@@ -166,23 +168,36 @@ export function matchRoutes(enhancedRoutes, state, action, updateParams = true)
   }
 }
 
+function stateWithRoutes(state, action) {
+  return {
+    ...state,
+    routing: reducer(state.routing, action)
+  }
+}
+
 export function makeRoute(enhancedRoutes, state, action) {
+  const newEnhancedRoutes = enhancers.save(action.payload, enhancedRoutes)
+  const { toDispatch } = matchRoutes(newEnhancedRoutes, stateWithRoutes(state, action),
+    actions.route(state.routing.location))
   return {
-    newEnhancedRoutes: enhancers.save(action.payload, enhancedRoutes),
-    toDispatch: []
+    newEnhancedRoutes,
+    toDispatch
   }
 }
 
 export function batchRoutes(enhancedRoutes, state, action) {
+  const newEnhancedRoutes = {
+    ...enhancedRoutes,
+    ...action.payload.ids.reduce((routes, name) => ({
+      ...routes,
+      [name]: enhancers.enhanceRoute(action.payload.routes[name])
+    }), {})
+  }
+  const { toDispatch } = matchRoutes(newEnhancedRoutes, stateWithRoutes(state, action),
+    actions.route(state.routing.location))
   return {
-    newEnhancedRoutes: {
-      ...enhancedRoutes,
-      ...action.payload.ids.reduce((routes, name) => ({
-        ...routes,
-        [name]: enhancers.enhanceRoute(action.payload.routes[name])
-      }), {})
-    },
-    toDispatch: []
+    newEnhancedRoutes,
+    toDispatch
   }
 }
 

src/index.js

@@ -1,14 +1,14 @@
-import createBrowserHistory from 'history/createBrowserHistory'
 import { createPath } from 'history'
-import { createStore, applyMiddleware } from 'redux'
 
 import routerReducer from './reducer'
-import middleware, { actionHandlers } from './middleware'
 import * as actions from './actions'
 import * as enhancers from './enhancers'
 import { connectLink } from './Link'
 import { connectRoutes } from './Routes'
 import { connectToggle } from './Toggle'
+import middleware from './middleware'
+
+export { middleware as makeRouterMiddleware }
 
 export const options = {
   server: false,
@@ -17,6 +17,10 @@ export const options = {
   resolve: false,
 }
 
+
+export { actionHandlers } from './middleware'
+export reducer from './reducer'
+
 export const setServer = (val = true) => {
   options.server = val
 }
@@ -44,47 +48,13 @@ export function synchronousMakeRoutes(routes, opts = options) {
   return action
 }
 
-export function routingReducer(reducers = state => ({ ...(state || {}) })) {
-  return (state, action) => {
-    if (!state) {
-      return {
-        routing: routerReducer(),
-        ...(reducers() || {})
-      }
-    }
-    let newState = state
-    if (!newState.routing) {
-      newState = {
-        ...state,
-        routing: routerReducer()
-      }
-    } else {
-      const routing = routerReducer(newState.routing, action)
-      if (routing !== newState.routing) {
-        newState = {
-          ...newState,
-          routing
-        }
-      }
-    }
-    return reducers(newState, action)
+export default function makeRouter(connect, store, routeDefinitions,
+  isServer = false, opts = options) {
+  connectLink(connect)
+  connectRoutes(connect)
+  connectToggle(connect)
+  opts.isServer = isServer // eslint-disable-line
+  if (routeDefinitions) {
+    store.dispatch(synchronousMakeRoutes(routeDefinitions, opts))
   }
 }
-
-export default (
-  connect, routeDefinitions, history = createBrowserHistory(),
-  isServer = false, opts = options, handlers = actionHandlers) => (reducer, state, enhancer) => {
-    connectLink(connect)
-    connectRoutes(connect)
-    connectToggle(connect)
-    options.isServer = isServer
-    const routerMiddleware = applyMiddleware(middleware(history, opts, handlers))(createStore)
-    const store = routerMiddleware(routingReducer(reducer), state, enhancer)
-    if (routeDefinitions) {
-      store.dispatch(synchronousMakeRoutes(routeDefinitions, opts))
-    }
-    return {
-      ...store,
-      dispatch: store.dispatch
-    }
-  }

src/middleware.js

@@ -55,7 +55,7 @@ export function processHandler(handler, routes, state, action) {
 }
 
 export default function createMiddleware(history = createBrowserHistory(), opts = options,
-  handlers = actionHandlers) {
+  handlers = actionHandlers, debug = false) {
   let lastLocation = createPath(history.location)
   let activeListener = listen // eslint-disable-line
   const myHandlers = {
@@ -78,6 +78,10 @@ export default function createMiddleware(history = createBrowserHistory(), opts
       const ret = next(action)
       const info = processHandler(handler, opts.enhancedRoutes, store.getState(), action)
       setEnhancedRoutes(info.newEnhancedRoutes, opts)
+      if (debug && info.toDispatch.length) {
+        console.info(`ion-router PROCESSING: ${action.type}`)
+        console.info(`dispatching: `, info.toDispatch)
+      }
       info.toDispatch.forEach(act => store.dispatch(act))
       return ret
     } finally {
@@ -91,9 +95,13 @@ export default function createMiddleware(history = createBrowserHistory(), opts
       lastLocation = a
       store.dispatch(actions.route(location))
     })
+    store.dispatch(actions.route(history.location))
     return next => (action) => {
       const ret = activeListener(store, next, action)
       if (action.type === types.ACTION) {
+        if (!action.payload.route) {
+          throw new Error(`ion-router action ${action.payload.verb} must be a string or a location object`)
+        }
         history[action.payload.verb](action.payload.route, action.payload.state)
       }
       return ret

test/helpers.test.js

@@ -48,6 +48,15 @@ describe('helper functions', () => {
       hi: 'there',
       boo: 'boo'
     })).eqls(['hi', 'boo'])
+    expect(helpers.changed({
+      composer: undefined,
+      piece: undefined,
+      filter: ''
+    }, {
+      composer: undefined,
+      piece: undefined,
+      filter: ''
+    })).eqls([])
   })
   it('urlFromState', () => {
     const options = {}
@@ -100,7 +109,6 @@ describe('helper functions', () => {
       },
       toDispatch: [
         actions.setParamsAndState('hi', { a: 'foo', test: 'tenth' }, { a: 'foo', test: 'tenth' }),
-        actions.setParamsAndState('there', { }, { }),
         actions.setParamsAndState('three', { bar: 'barb', a: 't' }, { bar: 'barb', a: 't' }),
         actions.push('foo/bar/tenth'),
         actions.matchRoutes(['hi']),