[changed] Use Browserify to build examples

remix-run · Sep 1, 2014 · 0e649be · 0e649be
1 parent bb7b666
commit 0e649be
Show file tree

Hide file tree

Showing 24 changed files with 53 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1 @@
-examples/_*
-examples/build
-node_modules
+examples/**/*-bundle.js
diff --git a/examples/animations/app.js b/examples/animations/app.js
@@ -1,10 +1,10 @@
 /** @jsx React.DOM */
 var React = require('react');
-var Router = require('../../modules');
+var CSSTransitionGroup = require('react/lib/ReactCSSTransitionGroup');
+var Router = require('react-router');
 var Routes = Router.Routes;
 var Route = Router.Route;
 var Link = Router.Link;
-var Transition = require('react/lib/ReactCSSTransitionGroup');
 
 var App = React.createClass({
   render: function() {
@@ -14,9 +14,9 @@ var App = React.createClass({
           <li><Link to="image" params={{service: "kitten"}}>Kitten</Link></li>
           <li><Link to="image" params={{service: "cage"}}>Cage</Link></li>
         </ul>
-        <Transition transitionName="example">
+        <CSSTransitionGroup transitionName="example">
           {this.props.activeRouteHandler()}
-        </Transition>
+        </CSSTransitionGroup>
       </div>
     );
   }

diff --git a/examples/animations/index.html b/examples/animations/index.html
@@ -5,4 +5,5 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Animations</h1>
 <div id="example"/>
-<script src="../build/animations.js"></script>
+<script src="../global-bundle.js"></script>
+<script src="app-bundle.js"></script>
diff --git a/examples/auth-flow/app.js b/examples/auth-flow/app.js
@@ -1,6 +1,6 @@
 /** @jsx React.DOM */
 var React = require('react');
-var Router = require('../../modules');
+var Router = require('react-router');
 var Route = Router.Route;
 var Routes = Router.Routes;
 var Link = Router.Link;

diff --git a/examples/auth-flow/index.html b/examples/auth-flow/index.html
@@ -4,5 +4,6 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Auth Flow</h1>
 <div id="example"/>
-<script src="../build/auth-flow.js"></script>
+<script src="../global-bundle.js"></script>
+<script src="app-bundle.js"></script>
 
diff --git a/examples/data-flow/app.js b/examples/data-flow/app.js
@@ -1,6 +1,6 @@
 /** @jsx React.DOM */
 var React = require('react');
-var Router = require('../../modules');
+var Router = require('react-router');
 var Route = Router.Route;
 var Routes = Router.Routes;
 var Link = Router.Link;

diff --git a/examples/data-flow/index.html b/examples/data-flow/index.html
@@ -5,4 +5,5 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Data Flow</h1>
 <div id="example"/>
-<script src="../build/data-flow.js"></script>
+<script src="../global-bundle.js"></script>
+<script src="app-bundle.js"></script>
diff --git a/examples/dynamic-segments/app.js b/examples/dynamic-segments/app.js
@@ -1,6 +1,6 @@
 /** @jsx React.DOM */
 var React = require('react');
-var Router = require('../../modules');
+var Router = require('react-router');
 var Route = Router.Route;
 var Routes = Router.Routes;
 var Redirect = Router.Redirect;

diff --git a/examples/dynamic-segments/index.html b/examples/dynamic-segments/index.html
@@ -4,4 +4,5 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Dynamic Segments</h1>
 <div id="example"/>
-<script src="../build/dynamic-segments.js"></script>
+<script src="../global-bundle.js"></script>
+<script src="app-bundle.js"></script>
diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js
@@ -1,6 +1,6 @@
 /** @jsx React.DOM */
 var React = require('react');
-var Router = require('../../modules');
+var Router = require('react-router');
 var Route = Router.Route;
 var DefaultRoute = Router.DefaultRoute;
 var Routes = Router.Routes;

diff --git a/examples/master-detail/index.html b/examples/master-detail/index.html
@@ -5,4 +5,5 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Master Detail</h1>
 <div id="example"/>
-<script src="../build/master-detail.js"></script>
+<script src="../global-bundle.js"></script>
+<script src="app-bundle.js"></script>
diff --git a/examples/partial-app-loading/app.js b/examples/partial-app-loading/app.js
@@ -1,6 +1,6 @@
 /** @jsx React.DOM */
 var React = require('react');
-var Router = require('../../modules');
+var Router = require('react-router');
 var Route = Router.Route;
 var Routes = Router.Routes;
 var Link = Router.Link;

diff --git a/examples/partial-app-loading/dashboard.js b/examples/partial-app-loading/dashboard.js
@@ -1,7 +1,7 @@
 /** @jsx React.DOM */
 
 var React = require('react');
-var ReactRouter = require('../../modules');
+var ReactRouter = require('react-router');
 var Link = ReactRouter.Link;
 
 var Dashboard = React.createClass({

diff --git a/examples/partial-app-loading/index.html b/examples/partial-app-loading/index.html
@@ -4,4 +4,5 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Partial App Loading</h1>
 <div id="example"/>
-<script src="../build/partial-app-loading.js"></script>
+<script src="../global-bundle.js"></script>
+<script src="app-bundle.js"></script>
diff --git a/examples/query-params/app.js b/examples/query-params/app.js
@@ -1,6 +1,6 @@
 /** @jsx React.DOM */
 var React = require('react');
-var Router = require('../../modules');
+var Router = require('react-router');
 var Route = Router.Route;
 var Routes = Router.Routes;
 var Link = Router.Link;

diff --git a/examples/query-params/index.html b/examples/query-params/index.html
@@ -4,4 +4,5 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Query Params</h1>
 <div id="example"/>
-<script src="../build/query-params.js"></script>
+<script src="../global-bundle.js"></script>
+<script src="app-bundle.js"></script>
diff --git a/examples/shared-root/app.js b/examples/shared-root/app.js
@@ -1,6 +1,6 @@
 /** @jsx React.DOM */
 var React = require('react');
-var Router = require('../../modules');
+var Router = require('react-router');
 var Route = Router.Route;
 var Routes = Router.Routes;
 var Link = Router.Link;

diff --git a/examples/shared-root/index.html b/examples/shared-root/index.html
@@ -4,4 +4,5 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Shared Root</h1>
 <div id="example"/>
-<script src="../build/shared-root.js"></script>
+<script src="../global-bundle.js"></script>
+<script src="app-bundle.js"></script>
diff --git a/examples/simple-master-detail/app.js b/examples/simple-master-detail/app.js
@@ -1,6 +1,6 @@
 /** @jsx React.DOM */
 var React = require('react');
-var Router = require('../../modules');
+var Router = require('react-router');
 var Route = Router.Route;
 var Routes = Router.Routes;
 var Link = Router.Link;
@@ -130,4 +130,3 @@ function findStates() {
 function underscore(str) {
   return str.toLowerCase().replace(/ /, '_');
 }
-
diff --git a/examples/simple-master-detail/index.html b/examples/simple-master-detail/index.html
@@ -5,4 +5,5 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Simple Master Detail</h1>
 <div id="example"/>
-<script src="../build/simple-master-detail.js"></script>
+<script src="../global-bundle.js"></script>
+<script src="app-bundle.js"></script>
diff --git a/examples/transitions/app.js b/examples/transitions/app.js
@@ -1,6 +1,6 @@
 /** @jsx React.DOM */
 var React = require('react');
-var Router = require('../../modules');
+var Router = require('react-router');
 var Route = Router.Route;
 var Routes = Router.Routes;
 var Link = Router.Link;

diff --git a/examples/transitions/index.html b/examples/transitions/index.html
@@ -4,4 +4,5 @@
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Transitions</h1>
 <div id="example"/>
-<script src="../build/transitions.js"></script>
+<script src="../global-bundle.js"></script>
+<script src="app-bundle.js"></script>
diff --git a/package.json b/package.json
@@ -65,4 +65,4 @@
   "browserify-shim": {
     "react": "global:React"
   }
-}
+}
diff --git a/scripts/build-examples b/scripts/build-examples
@@ -1,2 +1,18 @@
 #!/bin/sh
-webpack --devtool inline-source-map "$@"
+BROWSERIFY="node_modules/.bin/browserify --debug --detect-globals false"
+BUNDLE_EXAMPLE="$BROWSERIFY -t reactify -x react -x react/lib/ReactCSSTransitionGroup -x when -x react-router"
+
+$BROWSERIFY -t envify -r react -r react/lib/ReactCSSTransitionGroup -r when -r ./modules:react-router > examples/global-bundle.js
+
+$BUNDLE_EXAMPLE examples/animations/app.js > examples/animations/app-bundle.js
+$BUNDLE_EXAMPLE examples/auth-flow/app.js > examples/auth-flow/app-bundle.js
+$BUNDLE_EXAMPLE examples/data-flow/app.js > examples/data-flow/app-bundle.js
+$BUNDLE_EXAMPLE examples/dynamic-segments/app.js > examples/dynamic-segments/app-bundle.js
+$BUNDLE_EXAMPLE examples/master-detail/app.js > examples/master-detail/app-bundle.js
+# $BUNDLE_EXAMPLE examples/partial-app-loading/app.js > examples/partial-app-loading/app-bundle.js
+# $BUNDLE_EXAMPLE examples/partial-app-loading/dashboard.js > examples/partial-app-loading/dashboard-bundle.js
+# $BUNDLE_EXAMPLE examples/partial-app-loading/inbox.js > examples/partial-app-loading/inbox-bundle.js
+$BUNDLE_EXAMPLE examples/query-params/app.js > examples/query-params/app-bundle.js
+$BUNDLE_EXAMPLE examples/shared-root/app.js > examples/shared-root/app-bundle.js
+$BUNDLE_EXAMPLE examples/simple-master-detail/app.js > examples/simple-master-detail/app-bundle.js
+$BUNDLE_EXAMPLE examples/transitions/app.js > examples/transitions/app-bundle.js