Narwhals Playing Mahjong

    react-proxy-plus-loader

    0.1.5 • Public • Published

    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)

    Install

    npm i react-proxy-plus-loader

    DownloadsWeekly Downloads

    30

    Version

    0.1.5

    License

    MIT

    Last publish

    Collaborators

    • vn38minhtran