example: add code splitting example

andreypopp · andreypopp · commit fbb255d362bd · 2015-01-20T15:31:40.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,2 @@
 *node_modules/
-example/bundle.js
-example/bundle.js.map
+example/build/
diff --git a/example/AsyncComponent.ts b/example/AsyncComponent.ts
@@ -0,0 +1,10 @@
+import React = require('react');
+
+var AsyncComponent = React.createClass({
+
+  render() {
+    return React.DOM.div({}, 'I AM ASYNC!');
+  }
+});
+
+export = AsyncComponent;
diff --git a/example/Button.ts b/example/Button.ts
@@ -1,16 +1,18 @@
 import React = require('react');
 
-export var Button = React.createClass({
+var Button = React.createClass({
 
   render() {
     return React.DOM.button({onClick: this.onClick}, 'Typed Button!');
   },
 
   componentDidMount() {
-    throw new Error('xx');
+    console.log('hello');
   },
 
   onClick(e) {
     alert('Works!');
   }
 });
+
+export = Button;
diff --git a/example/Makefile b/example/Makefile
@@ -3,6 +3,9 @@ BIN = ./node_modules/.bin
 build: install typings
 	$(BIN)/webpack
 
+watch: install typings
+	$(BIN)/webpack --watch
+
 install:
 	@npm install
 
diff --git a/example/index.html b/example/index.html
@@ -1,3 +1,3 @@
 <!doctype html>
 <div id="main"></div>
-<script src="bundle.js"></script>
+<script src="build/bundle.js"></script>
diff --git a/example/index.ts b/example/index.ts
@@ -4,8 +4,29 @@ require('./index.css');
 
 import React = require('react/addons');
 import Button = require('./Button');
+import AsyncComponent = require('./AsyncComponent');
 
+var App = React.createClass({
+
+  render() {
+    return React.DOM.div({},
+      React.createElement(Button, {}),
+      this.state.async ? React.createElement(this.state.async, {}) : null
+    );
+  },
+
+  getInitialState() {
+    return {async: null};
+  },
+
+  componentDidMount() {
+    require.ensure(['./AsyncComponent'], (require) => {
+      var async: typeof AsyncComponent = require('./AsyncComponent');
+      this.setState({async: async});
+    });
+  }
+});
 
 React.render(
-  React.createElement(Button.Button, {}),
+  React.createElement(App, {}),
   document.getElementById('main'));
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -5,7 +5,10 @@ module.exports = {
   devtool: 'source-map',
 
   output: {
-    filename: __dirname + '/bundle.js'
+    path: 'build',
+    filename: 'bundle.js',
+    chunkFilename: '[id].js',
+    publicPath: '/build/'
   },
 
   resolve: {
diff --git a/webpack-runtime.d.ts b/webpack-runtime.d.ts
@@ -1,4 +1,14 @@
 /**
  * Type declarations for Webpack runtime.
  */
-declare function require(x: string): any
+
+interface WebpackRequireEnsureCallback {
+  ((id: string) => any) => any
+}
+
+interface WebpackRequire {
+  (id: string) => any;
+  ensure(ids: string[], WebpackRequireEnsureCallback) => any;
+}
+
+declare var require: WebpackRequire;
