-
-
Save gaearon/fbd581089255cd529e62 to your computer and use it in GitHub Desktop.
'use strict'; | |
var React = require('react'); | |
function createAsyncHandler(getHandlerAsync, displayName) { | |
var Handler = null; | |
return React.createClass({ | |
displayName: displayName, | |
statics: { | |
willTransitionTo(transition, params, query, callback) { | |
getHandlerAsync().then(resolvedHandler => { | |
Handler = resolvedHandler; | |
if (!Handler.willTransitionTo) { | |
return callback(); | |
} | |
Handler.willTransitionTo(transition, params, query, callback); | |
if (Handler.willTransitionTo.length < 4) { | |
callback(); | |
} | |
}); | |
}, | |
willTransitionFrom(transition, component, callback) { | |
if (!Handler || !Handler.willTransitionFrom) { | |
callback(); | |
} | |
Handler.willTransitionFrom(transition, component, callback); | |
if (Handler.willTransitionFrom.length < 3) { | |
callback(); | |
} | |
} | |
}, | |
render() { | |
return <Handler {...this.props} />; | |
} | |
}); | |
} | |
module.exports = createAsyncHandler; |
@Schniz, thank you! Apologies for the delayed response but that seemed to have solved the problem. I guess those unfamiliar constructs in gaearon's gist belong to the ES6 spec.
@gaearon Thanks for sharing the code. Line 29 is missing return
.
@gaearon this is awesome, thank you!
This is pretty neat, but does have some unfortunate side-effects.
For example the component
param that will be passed to willTransitionFrom
will reference the component returned from createAsyncHandler
— not Handler
. This isn’t a deal-breaker but does mean that this isn’t fool-proof.
Which I guess you can hack around if you’re happy to reach in and grab a reference to the component when it renders. Pretty shady though. :/
componentDidMount: {
if (Handler) {
HandlerComponent = this.refs.component;
}
}
Handler.willTransitionFrom(transition, HandlerComponent, callback)
Is it possible to use this example with es6 harmony modules?
Have you tried with isomorphic ensure? : https://github.com/tomekwi/isomorphic-ensure
@strangeworks check this out: https://github.com/webpack/webpack/tree/060ba5eab7d1c0785a47d0591b4808dbfec59777/examples/code-splitting-harmony
note the branch
Any chance this gist can be updated for latest RR? Tried doing it myself but wasn't able to do it...The willTransitionTo/From hooks aren't a thing anymore, I think.
+1, can you update the code?)
I just researched a bunch of this, and settled on https://github.com/luqin/react-router-loader. It has considered several other forks of loaders and appears to be maintained.
Here's a gist of the dynamic auth-flow example using jsx syntax:
https://gist.github.com/rosskevin/de55079e0d48f046fb518e45bb4f12b1
@Retired, try run the
jsx
files withjsx-loader?harmony
instead of justjsx-loader
. it works for me