Add Promise support to async route functions (#3719)

* Add Promise support in getComponent(s).

* Add Promises to get(Child/Index)Routes.

* Chain getComponents default export handling too.

* Point out that it's actually Babel 6 that's doing it.

* Don't swallow exceptions.

* Add babel-polyfill for Promises in tests.

* Remove .default convenience on Promise handlers.

Author: timdorr

modules/PromiseUtils.js

@@ -0,0 +1,3 @@
+export function isPromise(obj) {
+  return obj && typeof obj.then === 'function'
+}

modules/__tests__/Router-test.js

@@ -391,6 +391,23 @@ describe('Router', function () {
       })
     })
 
+    it('should support getComponent returning a Promise', function (done) {
+      const Component = () => <div />
+
+      const getComponent = () => new Promise(resolve => resolve(Component))
+
+      render((
+        <Router history={createHistory('/')} render={renderSpy}>
+          <Route path="/" getComponent={getComponent} />
+        </Router>
+      ), node, function () {
+        setTimeout(function () {
+          expect(componentSpy).toHaveBeenCalledWith([ Component ])
+          done()
+        })
+      })
+    })
+
   })
 
   describe('error handling', function () {

modules/__tests__/matchRoutes-test.js

@@ -290,6 +290,34 @@ describe('matchRoutes', function () {
     describeRoutes()
   })
 
+  describe('a Promise-based route config', function () {
+    function makeAsyncRouteConfig(routes) {
+      routes.forEach(function (route) {
+        const { childRoutes, indexRoute } = route
+
+        if (childRoutes) {
+          delete route.childRoutes
+
+          route.getChildRoutes = () => new Promise(resolve => resolve(childRoutes))
+
+          makeAsyncRouteConfig(childRoutes)
+        }
+
+        if (indexRoute) {
+          delete route.indexRoute
+
+          route.getIndexRoute = () => new Promise(resolve => resolve(indexRoute))
+        }
+      })
+    }
+
+    beforeEach(function () {
+      makeAsyncRouteConfig(routes)
+    })
+
+    describeRoutes()
+  })
+
   describe('an asynchronous JSX route config', function () {
     let getChildRoutes, getIndexRoute, jsxRoutes
 

modules/getComponents.js

@@ -1,4 +1,5 @@
 import { mapAsync } from './AsyncUtils'
+import { isPromise } from './PromiseUtils'
 
 function getComponentsForRoute(nextState, route, callback) {
   if (route.component || route.components) {
@@ -8,7 +9,13 @@ function getComponentsForRoute(nextState, route, callback) {
 
   const getComponent = route.getComponent || route.getComponents
   if (getComponent) {
-    getComponent.call(route, nextState, callback)
+    const componentReturn = getComponent.call(route, nextState, callback)
+    if (isPromise(componentReturn))
+      componentReturn
+        .then(
+          component => callback(null, component),
+          callback
+        )
   } else {
     callback()
   }

modules/matchRoutes.js

@@ -1,4 +1,5 @@
 import { loopAsync } from './AsyncUtils'
+import { isPromise } from './PromiseUtils'
 import { matchPattern } from './PatternUtils'
 import warning from './routerWarning'
 import { createRoutes } from './RouteUtils'
@@ -18,7 +19,7 @@ function getChildRoutes(route, location, paramNames, paramValues, callback) {
     params: createParams(paramNames, paramValues)
   }
 
-  route.getChildRoutes(partialNextState, (error, childRoutes) => {
+  const childRoutesReturn = route.getChildRoutes(partialNextState, (error, childRoutes) => {
     childRoutes = !error && createRoutes(childRoutes)
     if (sync) {
       result = [ error, childRoutes ]
@@ -28,6 +29,13 @@ function getChildRoutes(route, location, paramNames, paramValues, callback) {
     callback(error, childRoutes)
   })
 
+  if (isPromise(childRoutesReturn))
+    childRoutesReturn
+      .then(
+        childRoutes => callback(null, createRoutes(childRoutes)),
+        callback
+      )
+
   sync = false
   return result  // Might be undefined.
 }
@@ -41,9 +49,16 @@ function getIndexRoute(route, location, paramNames, paramValues, callback) {
       params: createParams(paramNames, paramValues)
     }
 
-    route.getIndexRoute(partialNextState, (error, indexRoute) => {
+    const indexRoutesReturn = route.getIndexRoute(partialNextState, (error, indexRoute) => {
       callback(error, !error && createRoutes(indexRoute)[0])
     })
+
+    if (isPromise(indexRoutesReturn))
+      indexRoutesReturn
+        .then(
+          indexRoute => callback(null, createRoutes(indexRoute)[0]),
+          callback
+        )
   } else if (route.childRoutes) {
     const pathless = route.childRoutes.filter(childRoute => !childRoute.path)
 

package.json

@@ -50,6 +50,7 @@
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-istanbul": "^1.0.3",
+    "babel-polyfill": "^6.13.0",
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-1": "^6.13.0",

tests.webpack.js

@@ -1,5 +1,6 @@
 /* eslint-env mocha */
 
+import 'babel-polyfill'
 import expect from 'expect'
 
 import { _resetWarned } from './modules/routerWarning'