Merging react-router with react-proxy-loader to load bundles on page change

example-route.js

<Router.Route path="/home" handler={require('react-router-proxy!./Home.jsx')}/>

mixinReactProxy.js

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));
        }
    };
};

react-router-proxy-loader.js

/**
 * 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");
};