Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Promise support to async route functions #3719

Merged
merged 7 commits into from
Aug 15, 2016
Merged

Add Promise support to async route functions #3719

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b94ebf6
Add Promise support in getComponent(s).
timdorr Aug 10, 2016
e418beb
Add Promises to get(Child/Index)Routes.
timdorr Aug 10, 2016
3f0fa6e
Chain getComponents default export handling too.
timdorr Aug 10, 2016
07ef4b7
Point out that it's actually Babel 6 that's doing it.
timdorr Aug 10, 2016
a717634
Don't swallow exceptions.
timdorr Aug 10, 2016
8b26d30
Add babel-polyfill for Promises in tests.
timdorr Aug 10, 2016
1ebbf58
Remove .default convenience on Promise handlers.
timdorr Aug 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions modules/PromiseUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function isPromise(obj) {
return obj && typeof obj.then === 'function'
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dunno if this is worth throwing in a module. Maybe move it to AsyncUtils at least?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is okay for now I think.

17 changes: 17 additions & 0 deletions modules/__tests__/Router-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down
28 changes: 28 additions & 0 deletions modules/__tests__/matchRoutes-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
9 changes: 8 additions & 1 deletion modules/getComponents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { mapAsync } from './AsyncUtils'
import { isPromise } from './PromiseUtils'

function getComponentsForRoute(nextState, route, callback) {
if (route.component || route.components) {
Expand All @@ -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
// Try module.default first in case of System.import and Babel 6
.then(component => component.default || component)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it's Babel 6 – I think that's just what System.import does, no? What happens if there are non-default exports.

I wonder if we should handle this though. Presumably users can do

function asyncComponent(id) {
  return System.import(id).then(component => component.default);
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't followed the spec discussions closely enough to know what the standard implementation will do. But since Babel is the only way to consume exports at the moment, it's realistically how things are going to be for the next few years (at least). So this is more of a practical enhancement to be a little more friendly to users.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like that should live in user space though. We don't have anything like this in the callback-based path. I do agree that this is friendlier, but I think philosophically it's not right here.

Also, webpack 2 can handle these things natively now... users on webpack 2 actually are using that native ES module support now that we have the module entry point.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(but the API for them looks the same)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The other thing is that the spec doesn't really define how System.import works. Probably you'd using it with webpack 2, which takes a guess, but isn't actually going through Babel. It might make a lot of sense to change this down the road, but I think we should at least see how it plays initially in the simpler form, and reserve room to change up how it works as the spec for System.import comes into existence.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, not a huge deal to me, so I dropped them. But you get the blame if users complain :P

.then(component => callback(null, component))
.catch(callback)
Copy link
Contributor

@taion taion Aug 10, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be

.then(
  component => callback(null, component),
  callback
)

We don't want to catch exceptions thrown in running the callback.

} else {
callback()
}
Expand Down
19 changes: 17 additions & 2 deletions modules/matchRoutes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { loopAsync } from './AsyncUtils'
import { isPromise } from './PromiseUtils'
import { matchPattern } from './PatternUtils'
import warning from './routerWarning'
import { createRoutes } from './RouteUtils'
Expand All @@ -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 ]
Expand All @@ -28,6 +29,13 @@ function getChildRoutes(route, location, paramNames, paramValues, callback) {
callback(error, childRoutes)
})

if (isPromise(childRoutesReturn))
childRoutesReturn
// Try module.default first in case of System.import and Babel 6
.then(childRoutes => childRoutes.default || childRoutes)
.then(childRoutes => callback(null, createRoutes(childRoutes)))
.catch(callback)

sync = false
return result // Might be undefined.
}
Expand All @@ -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))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder what we should do in cases like this where the function returns a non-promise.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably what we do right now: Nothing. We can treat them as thunks, but why would anyone realistically do that?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've actually used that pattern to return a slightly different component resolved synchronously based on the query. I just invoked the cb synchronously though. Heh.

indexRoutesReturn
// Try module.default first in case of System.import and Babel 6
.then(indexRoute => indexRoute.default || indexRoute)
.then(indexRoute => callback(null, createRoutes(indexRoute)[0]))
.catch(callback)
} else if (route.childRoutes) {
const pathless = route.childRoutes.filter(childRoute => !childRoute.path)

Expand Down