upgrade deps and add subroute

modules/client.tsx

@@ -1,30 +1,40 @@
 /// <reference path="./typescript/react-router.d.ts" />
 
 import * as React from 'react'
+import * as ReactDOM from 'react-dom'
 import { match, Router, browserHistory } from 'react-router'
-import { render } from 'react-dom'
-import routes from './routes/RootRoute'
+import routes from './routes/Route'
 import { Promise } from 'es6-promise';
-import * as _ from 'lodash';
 
-const { pathname, search, hash } = window.location
-const location = `${pathname}${search}${hash}`
+function timeSince(value: Date): string {
+    return " [" + ((new Date().getTime() - value.getTime())) + "ms]";
+}
 
-match({ routes, location, history: browserHistory }, (error, redirectLocation, renderProps) => {
-    if(location == "/about") {
-        // todo: need a better way to force System.import (async) to trigger
-        Promise.all(
-            System.import('./routes/AboutRoute')
-        ).then(() => {
-            render(
-            <Router routes={routes} history={browserHistory} />,
-                document.getElementById('app')
-            )
-        });
-    } else {
-        render(
-            <Router {...renderProps} />,
-            document.getElementById('app')
-        )
-    }
+var time3 = new Date()
+match({history: browserHistory, routes}, (err, redirectLocation, renderProps: any) => {
+    console.log("match:first: " + timeSince(time3))
+    const {components} = renderProps;
+    if(err) console.log("err:" + err);
+    console.log("redirectLocation:" + redirectLocation);
+    console.log("renderProps:" + JSON.stringify(renderProps));
+
+    let router = (
+        <Router {...renderProps} children={routes} />
+    )
+
+    ReactDOM.render(router, document.getElementById('app'));
 });
+
+// browserHistory.listen(location => {
+//     console.log("browserHistory.listen:location:", location)
+//
+//     setTimeout(function () {
+//         var time4 = new Date()
+//         match({history: browserHistory, routes}, (err, redirectLocation, renderProps: any) => { //todo: this is slow
+//             console.log("match:second: " + timeSince(time4))
+//             if(err) console.log("err:" + err);
+//             console.log("renderProps:" + JSON.stringify(renderProps));
+//         });
+//     }, 100);
+//
+// });

modules/components/About.tsx

@@ -11,6 +11,7 @@ export default class About extends React.Component<any, any> {
           with the web inspector open. You should not get the
           React warning about reusing markup.
         </p>
+          {this.props.children}
       </div>
     )
   }

modules/components/App.tsx

@@ -1,19 +1,29 @@
 import * as React from 'react';
+import { browserHistory } from 'react-router'
 import { Link } from 'react-router'
 
 React.isValidElement(null); //needed so React references gets injected on client
 
 export default class App extends React.Component<any, any> {
+
+    drillToItem() {
+        browserHistory.push("about");
+    }
+
     render () {
         return (
             <div>
                 <h1>App</h1>
                 <ul>
                     <li><Link to="/">Home</Link></li>
                     <li><Link to="/about">About (lazy loaded)</Link></li>
+                    <li><Link to="/about/subabout">SubAbout (lazy loaded)</Link></li>
+                    <li><div onClick={() => this.drillToItem()}>About by history (lazy loaded)</div></li>
                 </ul>
                 {this.props.children}
             </div>
         );
     }
 }
+
+

modules/components/SubAbout.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+export default class SubAbout extends React.Component<any, any> {
+  render() {
+    return (
+      <div>
+        <h2>Sub About</h2>
+        <p>
+          Sub!!!
+        </p>
+      </div>
+    )
+  }
+}
+
+

modules/routes/RootRoute.ts → modules/routes/Route.ts

@@ -1,40 +1,56 @@
-/// <reference path="../typescript/System.d.ts" />
-
-// polyfill webpack System.import on NodeJS
-if (typeof System === 'undefined') {
-  var System: ISystemExt = {};
-  if (typeof System.import !== 'function') {
-    System.import = (d) => {
-      let module = require(d);
-      return Promise.resolve(module);
-    }
-  }
-}
-
-import App from '../components/App'
-import Index from '../components/Index'
-import {Promise} from 'es6-promise';
-
-export default {
-  path: '/',
-  component: App,
-  getChildRoutes(location, cb) {
-
-    //const cached = System.get('./AboutRoute'); //[object Object] is not supported by webpack
-    //if (cached) callback(null, cached.default);
-
-    Promise.all([
-      System.import('./AboutRoute') //webpack 2.0 https://gist.github.com/sokra/27b24881210b56bbaff7
-    ]).then(function(modules) {
-      let module = modules.shift();
-      cb(null, [
-        module.default
-      ])
-    }).catch(err => {
-      console.error("getChildRoutes: " + err + " " + err.stack);
-    });
-  },
-  indexRoute: {
-    component: Index
-  }
-}
+/// <reference path="../typescript/System.d.ts" />
+
+// polyfill webpack System.import on NodeJS
+if (typeof System === 'undefined') {
+  var System: ISystemExt = {};
+  if (typeof System.import !== 'function') {
+    System.import = (d) => {
+      let module = require(d);
+      return Promise.resolve(module);
+    }
+  }
+}
+
+import App from '../components/App'
+import Index from '../components/Index'
+import {Promise} from 'es6-promise';
+
+function timeSince(value: Date): string {
+  return " [" + ((new Date().getTime() - value.getTime())) + "ms]";
+}
+
+export default {
+  path: '/',
+  component: App,
+  getChildRoutes(location, cb) {
+
+    console.log("getChildRoutes: START");
+    let time1 = new Date();
+
+    //const cached = System.get('./AboutRoute'); //[object Object] is not supported by webpack
+    //if (cached) callback(null, cached.default);
+
+    Promise.all([
+      System.import('./child/Route')
+    ]).then(function (modules) {
+      console.log("getChildRoutes1: " + timeSince(time1));
+      let time2 = new Date();
+      Promise.all([
+        System.import('./child/Route')
+      ]).then(function (modules) {
+        console.log("getChildRoutes2: " + timeSince(time2));
+        let module = modules.shift();
+        cb(null, [
+          module.default
+        ])
+      }).catch(err => {
+        console.error("getChildRoutes: " + err + " " + err.stack);
+      });
+    }).catch(err => {
+      console.error("getChildRoutes: " + err + " " + err.stack);
+    });
+  },
+  indexRoute: {
+    component: Index
+  }
+}

modules/routes/child/Route.ts

@@ -0,0 +1,54 @@
+import About from '../../components/About'
+import {Promise} from 'es6-promise';
+
+function timeSince(value: Date): string {
+    return " [" + ((new Date().getTime() - value.getTime())) + "ms]";
+}
+
+function sleep(milliseconds) {
+    var start = new Date().getTime();
+    for (var i = 0; i < 1e7; i++) {
+        if ((new Date().getTime() - start) > milliseconds){
+            break;
+        }
+    }
+}
+
+console.log("AboutRoute - sleep")
+sleep(400);
+
+export default {
+    path: 'about',
+    component: About,
+    // onEnter: function enter(nextState, replaceState, callback) {
+    //     setTimeout(callback, 1000);
+    // },
+    getChildRoutes(location, cb) {
+
+        console.log("getChildRoutes: START");
+        let time1 = new Date();
+
+        //const cached = System.get('./AboutRoute'); //[object Object] is not supported by webpack
+        //if (cached) callback(null, cached.default);
+
+        Promise.all([
+            System.import('./child/Route')
+        ]).then(function (modules) {
+            console.log("getChildRoutes1: " + timeSince(time1));
+            let time2 = new Date();
+            Promise.all([
+                System.import('./child/Route')
+            ]).then(function (modules) {
+                console.log("getChildRoutes2: " + timeSince(time2));
+                let module = modules.shift();
+                cb(null, [
+                    module.default
+                ])
+            }).catch(err => {
+                console.error("getChildRoutes: " + err + " " + err.stack);
+            });
+        }).catch(err => {
+            console.error("getChildRoutes: " + err + " " + err.stack);
+        });
+    }
+}

modules/routes/child/child/Route.ts

@@ -0,0 +1,21 @@
+import SubAbout from '../../../components/SubAbout'
+
+function sleep(milliseconds) {
+    var start = new Date().getTime();
+    for (var i = 0; i < 1e7; i++) {
+        if ((new Date().getTime() - start) > milliseconds){
+            break;
+        }
+    }
+}
+
+console.log("SubAboutRoute - sleep")
+sleep(400);
+
+export default {
+  path: 'subabout',
+  component: SubAbout//,
+  // onEnter: function enter(nextState, replaceState, callback) {
+  //     setTimeout(callback, 1000);
+  // },
+}

modules/server.tsx

@@ -6,7 +6,7 @@ import { renderToString } from 'react-dom/server'
 import { match, RouterContext } from 'react-router'
 import * as fs from 'fs'
 import { createPage, write, writeError, writeNotFound, redirect } from './utils/server-utils'
-import routes from './routes/RootRoute'
+import routes from './routes/Route'
 import { default as webpackconfig } from "./webpack.config";
 import * as webpack from "webpack";