Merge remote-tracking branch 'origin/master'

mjackson · mjackson · commit 743ad55be46d · 2014-10-11T10:24:15.000-07:00
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,4 +1,4 @@
-### Commit Subjects
+### Commit Subjects for Public API Changes
 
 If your patch **changes the API or fixes a bug** please use one of the
 following prefixes in your commit subject:
@@ -12,8 +12,8 @@ That ensures the subject line of your commit makes it into the
 auto-generated changelog. Do not use these tags if your change doesn't
 fix a bug and doesn't change the public API.
 
-Commits with changed, added, or removed, must be reviewed by another
-collaborator.
+Commits with changed, added, or removed, should probably be reviewed by
+another collaborator.
 
 #### When using `[changed]` or `[removed]`...
 
@@ -31,7 +31,8 @@ always be in sync.
 - `scripts/test` will fire up a karma runner and watch for changes in the
   specs directory.
 - `npm test` will do the same but doesn't watch, just runs the tests.
-- `scripts/build-examples` does exactly that.
+- `scripts/dev-examples` fires up a webpack dev server that will watch
+  for changes and build the examples.
 
 ### Build
 
diff --git a/examples/README.md b/examples/README.md
@@ -1,9 +1,10 @@
-### React Router Examples
+React Router Examples
+=====================
 
-In order to try out the examples, you need to follow these steps:
+To run and development examples:
 
 1. Clone this repo
-1. Run `npm -g install webpack`, if you don't have it installed already
-1. Run `npm install` from the repo's root directory
-1. Run `./scripts/build-examples` from the repo's root directory
-1. Point your browser to the `index.html` location in this directory
+1. Run `npm install`
+1. Run `scripts/dev-examples` from the repo's root directory
+1. Point your browser to http://localhost:8080
+
diff --git a/examples/animations/index.html b/examples/animations/index.html
@@ -5,5 +5,5 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Animations</h1>
 <div id="example"/>
-<script src="../global-bundle.js"></script>
-<script src="app-bundle.js"></script>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/animations.js"></script>
diff --git a/examples/auth-flow/index.html b/examples/auth-flow/index.html
@@ -4,6 +4,6 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Auth Flow</h1>
 <div id="example"/>
-<script src="../global-bundle.js"></script>
-<script src="app-bundle.js"></script>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/auth-flow.js"></script>
 
diff --git a/examples/data-flow/index.html b/examples/data-flow/index.html
@@ -5,5 +5,6 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Data Flow</h1>
 <div id="example"/>
-<script src="../global-bundle.js"></script>
-<script src="app-bundle.js"></script>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/data-flow.js"></script>
+
diff --git a/examples/dynamic-segments/index.html b/examples/dynamic-segments/index.html
@@ -4,5 +4,6 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Dynamic Segments</h1>
 <div id="example"/>
-<script src="../global-bundle.js"></script>
-<script src="app-bundle.js"></script>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/dynamic-segments.js"></script>
+
diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js
@@ -110,7 +110,7 @@ var Contact = React.createClass({
     var avatar = contact.avatar || 'http://placekitten.com/50/50';
     return (
       <div className="Contact">
-        <img height="50" src={avatar}/>
+        <img height="50" src={avatar} key={avatar}/>
         <h3>{name}</h3>
         <button onClick={this.destroy}>Delete</button>
       </div>
diff --git a/examples/master-detail/index.html b/examples/master-detail/index.html
@@ -5,5 +5,6 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Master Detail</h1>
 <div id="example"/>
-<script src="../global-bundle.js"></script>
-<script src="app-bundle.js"></script>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/master-detail.js"></script>
+
diff --git a/examples/partial-app-loading/index.html b/examples/partial-app-loading/index.html
@@ -4,5 +4,6 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Partial App Loading</h1>
 <div id="example"/>
-<script src="../global-bundle.js"></script>
-<script src="app-bundle.js"></script>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/partial-app-loading.js"></script>
+
diff --git a/examples/query-params/index.html b/examples/query-params/index.html
@@ -4,5 +4,6 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Query Params</h1>
 <div id="example"/>
-<script src="../global-bundle.js"></script>
-<script src="app-bundle.js"></script>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/query-params.js"></script>
+
diff --git a/examples/shared-root/index.html b/examples/shared-root/index.html
@@ -4,5 +4,6 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Shared Root</h1>
 <div id="example"/>
-<script src="../global-bundle.js"></script>
-<script src="app-bundle.js"></script>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/shared-root.js"></script>
+
diff --git a/examples/sidebar/index.html b/examples/sidebar/index.html
@@ -5,5 +5,6 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Sidebar</h1>
 <div id="example"/>
-<script src="../global-bundle.js"></script>
-<script src="app-bundle.js"></script>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/sidebar.js"></script>
+
diff --git a/examples/simple-master-detail/index.html b/examples/simple-master-detail/index.html
@@ -5,5 +5,6 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Simple Master Detail</h1>
 <div id="example"/>
-<script src="../global-bundle.js"></script>
-<script src="app-bundle.js"></script>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/simple-master-detail.js"></script>
+
diff --git a/examples/transitions/index.html b/examples/transitions/index.html
@@ -4,5 +4,6 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Transitions</h1>
 <div id="example"/>
-<script src="../global-bundle.js"></script>
-<script src="app-bundle.js"></script>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/transitions.js"></script>
+
diff --git a/package.json b/package.json
@@ -23,8 +23,10 @@
   "devDependencies": {
     "browserify": "4.2.3",
     "browserify-shim": "3.6.0",
+    "bundle-loader": "0.5.1",
     "envify": "1.2.0",
     "expect": "0.1.1",
+    "jsx-loader": "0.11.2",
     "karma": "0.12.16",
     "karma-browserify": "^0.2.1",
     "karma-chrome-launcher": "0.1.4",
@@ -35,7 +37,9 @@
     "react": ">=0.11.0",
     "reactify": "^0.14.0",
     "rf-release": "0.3.2",
-    "uglify-js": "2.4.15"
+    "uglify-js": "2.4.15",
+    "webpack": "1.4.5",
+    "webpack-dev-server": "1.6.5"
   },
   "peerDependencies": {
     "react": ">=0.11.0"
@@ -60,4 +64,4 @@
   "browserify-shim": {
     "react": "global:React"
   }
-}
+}
diff --git a/scripts/build-examples b/scripts/build-examples
diff --git a/scripts/dev-examples b/scripts/dev-examples
@@ -0,0 +1,2 @@
+#!/bin/sh
+webpack-dev-server --inline --content-base examples/
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,45 @@
+var path = require('path');
+var fs = require('fs');
+var webpack = require('webpack');
+
+module.exports = {
+  entry: buildEntries(),
+
+  output: {
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js',
+    path: 'examples/__build__',
+    publicPath: '/__build__/'
+  },
+
+  module: {
+    loaders: [
+      {test: /\.js$/, loader: 'jsx-loader'}
+    ]
+  },
+
+  resolve: {
+    alias: {
+      'react-router': '../../modules/index'
+    }
+  },
+
+  plugins: [new webpack.optimize.CommonsChunkPlugin('shared.js')]
+
+};
+
+
+function buildEntries() {
+  return fs.readdirSync('examples').reduce(function(entries, dir) {
+    if (dir === 'build')
+      return entries;
+
+    var isDraft = dir.charAt(0) === '_';
+
+    if (!isDraft && fs.lstatSync(path.join('examples', dir)).isDirectory())
+      entries[dir] = './examples/'+dir+'/'+'app.js';
+
+    return entries;
+  }, {});
+}
+
