react-proxy-plus-loader

react-proxy-plus-loader

Based on react-proxy-loader, adapted for react-router resolve data.

Demo

https://vn38minhtran.github.io/react-proxy-plus-loader

Installation

npm install react-proxy-loader --save

Usage

Documentation: Using loaders

var A = require("./a");
var B = require("react-proxy-plus!./b");
var C = require("react-proxy-plus!./c");
var D = React.createClass({
  mixins: [require("react-proxy-plus?async!./d").Mixin],
  renderUnavailable: function () {
    return <p>Loading...</p>;
  }
});

Chunk name

You can give the chunk a name with the name query parameter:

var Component = require("react-proxy-plus?name=chunkName!./Component");

With react-router

var React = require("react");
var Router = require('react-router');
var RouteHandler = Router.RouteHandler;
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;
var Link = Router.Link;

var A = require("./a");
var B = require("react-proxy-plus!./b");
var C = require("react-proxy-plus!./c");
var D = React.createClass({
  mixins: [require("react-proxy-plus?async!./d").Mixin],
  renderUnavailable: function () {
    return <p>Loading...</p>;
  }
});

var App = React.createClass({
  render: function () {
    return (
      <div>
        <ul>
          <li><Link to='a'>Page A</Link></li>
          <li><Link to='b'>Page B</Link></li>
          <li><Link to='c'>Page C</Link></li>
          <li><Link to='d'>Page D</Link></li>
        </ul>
        <RouteHandler {...this.props}/>
      </div>
    );
  }
});

var routes = (
  <Route name='app' path='/' handler={App}>
    <DefaultRoute name='a' handler={A}/>
    <Route name='b' handler={B}/>
    <Route name='c' handler={C}/>
    <Route name='d' handler={D}/>
  </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler, state) {
  var resolveData = {};
  var promises = state.routes.filter(function (route) {
    return route.handler.resolve;
  }).map(function (route) {
    return new Promise(function (resolve) {
      resolve(route.handler.resolve(state.params).then(function (routeData) {
        resolveData[route.name] = routeData;
        return routeData;
      }));
    });
  });

  Promise.all(promises).then(function () {
    React.render(<Handler resolveData={resolveData}/>, document.body);
  });
});

Run example

git clone https://github.com/vn38minhtran/react-proxy-plus-loader.git
cd react-proxy-plus-loader
npm install
cd example
webpack-dev-server --hot --inline --colors

License

MIT (http://www.opensource.org/licenses/mit-license.php)