Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Merging react-router with react-proxy-loader to load bundles on page change
<Router.Route path="/home" handler={require('react-router-proxy!./Home.jsx')}/>
module.exports = function(React, desc) {
desc.displayName = "ReactProxy";
desc.render = function() {
var Component = this.state.component;
if(Component) {
return React.createElement(Component, this.props, this.props.children);
} else if(this.renderUnavailable) {
return this.renderUnavailable();
} else {
return null;
}
};
desc.getInitialState = function() {
return { component: this.loadComponent() };
};
desc.componentDidMount = function() {
if(!this.state.component) {
this.loadComponent(function(component) {
this.setState({ component: component });
}.bind(this));
}
};
};
/**
* Taken and modified from react-proxy-loader to support react-router
* willTransitionTo hooks. See "BEGIN CHANGE" - "END CHANGE" below.
*/
module.exports = function() {};
module.exports.pitch = function(remainingRequest) {
this.cacheable && this.cacheable();
var moduleRequest = "!!" + remainingRequest;
return [
'var React = require("react");',
'var component;',
'var desc = {',
// BEGIN CHANGE
' statics: {',
' willTransitionTo: function(transition, params, query) {',
' var Promise = require("bluebird");',
' transition.wait(new Promise(function(resolve) {',
' require.ensure([], function() {',
' component = require(' + JSON.stringify(moduleRequest) + ');',
' delete transition.promise;',
' delete transition._promise;',
' if (component.willTransitionTo) { ',
' component.willTransitionTo(transition, params, query);',
' var componentPromise = transition.promise || transition._promise;',
' if (componentPromise) {',
' return componentPromise.then(resolve)',
' }',
' } ',
' resolve();',
' });',
' }));',
' }',
' }, ',
// END CHANGE
' loadComponent: function(callback) {',
' if(!component) {',
' require.ensure([], function() {',
' component = require(' + JSON.stringify(moduleRequest) + ');',
' if(callback) callback(component);',
' });',
' } else if(callback) callback(component);',
' return component;',
' }',
'};',
'var mixinReactProxy = require(' + JSON.stringify(require.resolve("./mixinReactProxy")) + ');',
'mixinReactProxy(React, desc);',
'module.exports = React.createClass(desc);',
'module.exports.Mixin = desc;'
].join("\n");
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment