Support async routes with SSR (#43)

* Supports async routes by utilizing `match` for the initial client render if server-side rendering is enabled

* Uses `require` provided by `require.ensure`

* Renames parameters from `props` to `options`

* fix(client): Always render asynchronously to the DOM to allow code splitting

* style(lint): Use proper JSON formatting

examples/complex/src/components/app/index.js

@@ -20,6 +20,7 @@ export default class App extends Component {
                         <li><Link to="/about/">About</Link></li>
                         <li><Link to={{ pathname: '/long/', state: { scrollToTop: true } }}>Long</Link></li>
                         <li><Link to="/simple/">Simple</Link></li>
+                        <li><Link to="/async/">Async</Link></li>
                     </ul>
                 </nav>
                 { this.props.children }

examples/complex/src/components/async/index.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+export default class Async extends Component {
+    render() {
+        return (
+            <div>
+                Such asynchronously rendered!
+            </div>
+        );
+    }
+}

examples/complex/src/routes.js

@@ -14,6 +14,19 @@ export default () => (
         <Route path="about/" component={ About } data={2} ignoreScrollBehavior />
         <Route path="long/" component={ Long } />
         <Route path="simple/" component={ Simple } data={3} />
+        <Route
+            path="async"
+            getComponent={ (nextState, callback) => {
+                require.ensure([], (require) => {
+                    const Async = require('./components/async').default;
+                    callback(
+                        null,
+                        Async
+                    );
+                });
+            }}
+            data={4}
+        />
     </Route>
 );
 

extensions/roc-package-web-app-react-dev/.eslintrc

@@ -3,15 +3,15 @@
 
     "parser": "babel-eslint",
 
-    plugins: ["eslint-plugin-babel"],
+    "plugins": ["eslint-plugin-babel"],
 
     "rules": {
         "indent": [2, 4, { "SwitchCase": 1 }],
         "max-len": [2, 120, 4],
         "no-warning-comments": 1,
 
         "generator-star-spacing": 0,
-        "babel/generator-star-spacing": [2, { before: false, after: true }],
+        "babel/generator-star-spacing": [2, { "before": false, "after": true }],
 
         "import/order": [2, { "groups": ["builtin", "external", "internal", "parent", "sibling", "index"], "newlines-between": "always"}],
         "import/newline-after-import": [2],

extensions/roc-package-web-app-react/.eslintrc

@@ -3,7 +3,7 @@
 
     "parser": "babel-eslint",
 
-    plugins: ["eslint-plugin-babel"],
+    "plugins": ["eslint-plugin-babel"],
 
     "rules": {
         "indent": [2, 4, { "SwitchCase": 1 }],
@@ -13,7 +13,7 @@
         "arrow-parens": ["off", "as-needed"],
 
         "generator-star-spacing": 0,
-        "babel/generator-star-spacing": [2, { before: false, after: true }],
+        "babel/generator-star-spacing": [2, { "before": false, "after": true }],
 
         "import/order": [2, { "groups": ["builtin", "external", "internal", "parent", "sibling", "index"], "newlines-between": "always"}],
         "import/newline-after-import": [2],

extensions/roc-package-web-app-react/app/client/create-client.js

@@ -3,7 +3,6 @@
 /* eslint-disable global-require */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Router from 'react-router/lib/Router';
 import useRouterHistory from 'react-router/lib/useRouterHistory';
 import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';
 import createHistory from 'history/lib/createBrowserHistory';
@@ -13,6 +12,8 @@ import { useRedial } from 'react-router-redial';
 
 import { rocConfig } from '../shared/universal-config';
 
+import renderToDOM from './render-to-dom';
+
 const clientDebug = debug('roc:client');
 
 const basename = ROC_PATH === '/' ? '' : ROC_PATH;
@@ -81,8 +82,6 @@ export default function createClient({
     }
 
     const render = () => {
-        const node = document.getElementById(mountNode);
-
         const forceRefreshSetting = rocConfig.runtime.history.forceRefresh;
         let history = useRouterHistory(createHistory)({
             basename,
@@ -91,11 +90,6 @@ export default function createClient({
                 : forceRefreshSetting,
         });
 
-        let initialLoading;
-        if (HAS_CLIENT_LOADING) {
-            initialLoading = require(ROC_CLIENT_LOADING).default;
-        }
-
         let routes;
         let locals = {
             history,
@@ -168,13 +162,14 @@ export default function createClient({
             ));
         }
 
+        const node = document.getElementById(mountNode);
         let updateScroll = () => {};
 
         const middlewares = [
             useRedial({
                 ...routerMiddlewareConfig['react-router-redial'],
                 locals,
-                initialLoading,
+                initialLoading: HAS_CLIENT_LOADING ? require(ROC_CLIENT_LOADING).default : undefined,
                 beforeTransition: rocConfig.runtime.fetch.client.beforeTransition,
                 afterTransition: rocConfig.runtime.fetch.client.afterTransition,
                 parallel: rocConfig.runtime.fetch.client.parallel,
@@ -201,16 +196,16 @@ export default function createClient({
             );
         }
 
-        const finalComponent = compose(createComponent)(
-            <Router
-                history={history}
-                routes={routes}
-                render={applyRouterMiddleware(...middlewares)}
-            />
+        renderToDOM(
+            {
+                createComponent: compose(createComponent),
+                history,
+                routes,
+                routerRenderFn: applyRouterMiddleware(...middlewares),
+            },
+            node
         );
 
-        ReactDOM.render(finalComponent, node);
-
         if (__DEV__) {
             const devNode = document.createElement('div');
             node.parentNode.insertBefore(devNode, node.nextSibling);

extensions/roc-package-web-app-react/app/client/render-to-dom.js

@@ -0,0 +1,25 @@
+/* eslint-disable global-require */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Router from 'react-router/lib/Router';
+import match from 'react-router/lib/match';
+
+function renderSync({ renderProps, createComponent, routerRenderFn }, node) {
+    const finalComponent = createComponent(
+        <Router
+            {...renderProps}
+            render={routerRenderFn}
+        />
+    );
+
+    ReactDOM.render(finalComponent, node);
+}
+
+export default function renderAsync({ history, routes, ...rest }, node) {
+    match({ history, routes }, (error, redirectLocation, renderProps) => {
+        renderSync({
+            ...rest,
+            renderProps,
+        }, node);
+    });
+}