feat: added react-router

Signed-off-by: Simon Bailey <simon@newtriks.com>

README.md

@@ -104,6 +104,13 @@ And `src/styles/Foo.css`:
 }
 ```
 
+## Options
+Options are available as additional installs to the initial application generation phase.
+
+### [ReactRouter](https://github.com/rackt/react-router)
+
+A complete routing library for React.
+
 ## Testing
 
 Running `grunt test` will run the unit tests with karma. Tests are written using [Jasmine](http://pivotal.github.io/jasmine/) by default.

app/index.js

@@ -20,11 +20,11 @@ var ReactWebpackGenerator = module.exports = function ReactWebpackGenerator(args
 
   this.appPath = this.options.appPath;
 
-  this.hookFor('react-webpack:common', {
+  this.composeWith('react-webpack:common', {
     args: args
   });
 
-  this.hookFor('react-webpack:main', {
+  this.composeWith('react-webpack:main', {
     args: args
   });
 
@@ -47,6 +47,19 @@ ReactWebpackGenerator.prototype.welcome = function welcome() {
   }
 };
 
+ReactWebpackGenerator.prototype.askForReactRouter = function () {
+  var done = this.async();
+  this.prompt({
+    type    : 'confirm',
+    name    : 'reactRouter',
+    message : 'Would you like to include react-router?',
+    default : true
+  }, function (props) {
+    this.env.options.reactRouter = props.reactRouter;
+    done();
+  }.bind(this));
+};
+
 ReactWebpackGenerator.prototype.readIndex = function readIndex() {
   this.indexFile = this.engine(this.read('../../templates/common/index.html'), this);
 };
@@ -57,6 +70,7 @@ ReactWebpackGenerator.prototype.createIndexHtml = function createIndexHtml() {
 };
 
 ReactWebpackGenerator.prototype.packageFiles = function () {
+  this.reactRouter = this.env.options.reactRouter;
   this.template('../../templates/common/_package.json', 'package.json');
   this.copy('../../templates/common/Gruntfile.js', 'Gruntfile.js');
   this.copy('../../templates/common/gitignore', '.gitignore');

main/index.js

@@ -10,6 +10,13 @@ var MainGenerator = module.exports = function MainGenerator(args, options, confi
 util.inherits(MainGenerator, ScriptBase);
 
 MainGenerator.prototype.createAppFile = function createAppFile() {
+  this.reactRouter = this.env.options.reactRouter;
   this.appTemplate('App', 'components/' + this.scriptAppName);
   this.testTemplate('spec/App', 'components/' + this.scriptAppName);
 };
+
+MainGenerator.prototype.createMainFile = function createMainFile() {
+  if(this.env.options.reactRouter) {
+    this.appTemplate('main', 'components/main');
+  }
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-react-webpack",
-  "version": "0.0.11",
+  "version": "0.1.0",
   "description": "Yeoman generator for ReactJS and Webpack",
   "keywords": [
     "yeoman-generator",

templates/common/_package.json

@@ -7,9 +7,10 @@
   "src": "src",
   "test": "test",
   "dist": "dist",
-  "mainInput": "<%= scriptAppName %>",
+  "mainInput": "<% if (reactRouter) { %>main<% } else { %><%= scriptAppName %> <% } %>",
   "mainOutput": "main",
-  "dependencies": {
+  "dependencies": {<% if (reactRouter) { %>
+    "react-router": "^0.7.0",<% } %>
     "react": "~0.11.2"
   },
   "devDependencies": {

templates/common/root/webpack.config.js

@@ -8,6 +8,7 @@
 'use strict';
 
 module.exports = {
+
   output: {
     filename: 'main.js',
     publicPath: '/assets/'
@@ -24,7 +25,7 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['','.js','.jsx']
+    extensions: ['', '.js', '.jsx']
   },
 
   module: {
@@ -35,20 +36,15 @@ module.exports = {
     }],
 
     loaders: [{
-      test: /\.css$/,
-      loader: 'style!css'
-    }, {
-      test: /\.gif/,
-      loader: 'url-loader?limit=10000&mimetype=image/gif'
-    }, {
-      test: /\.jpg/,
-      loader: 'url-loader?limit=10000&mimetype=image/jpg'
-    }, {
-      test: /\.png/,
-      loader: 'url-loader?limit=10000&mimetype=image/png'
-    }, {
       test: /\.jsx$/,
-      loader: 'jsx-loader'
+      loader: 'jsx-loader?harmony'
+    }, {
+      test: /\.css$/,
+      loader: 'style-loader!css-loader'
+    }, {
+      test: /\.(png|jpg)$/,
+      loader: 'url-loader?limit=8192'
     }]
   }
+
 };

templates/common/root/webpack.dist.config.js

@@ -9,6 +9,7 @@
 var webpack = require('webpack');
 
 module.exports = {
+
   output: {
     publicPath: '/assets/',
     path: 'dist/assets/',
@@ -32,7 +33,7 @@ module.exports = {
   ],
 
   resolve: {
-    extensions: ['','.js','.jsx']
+    extensions: ['', '.js', '.jsx']
   },
 
   module: {
@@ -42,23 +43,15 @@ module.exports = {
       loader: 'jshint'
     }],
 
-    loaders: [
-      {
-        test: /\.css$/,
-        loader: 'style!css'
-      }, {
-        test: /\.gif/,
-        loader: 'url-loader?limit=10000&mimetype=image/gif'
-      }, {
-        test: /\.jpg/,
-        loader: 'url-loader?limit=10000&mimetype=image/jpg'
-      }, {
-        test: /\.png/,
-        loader: 'url-loader?limit=10000&mimetype=image/png'
-      }, {
-        test: /\.jsx$/,
-        loader: 'jsx-loader'
-      }
-    ]
+    loaders: [{
+      test: /\.jsx$/,
+      loader: 'jsx-loader?harmony'
+    }, {
+      test: /\.css$/,
+      loader: 'style-loader!css-loader'
+    }, {
+      test: /\.(png|jpg)$/,
+      loader: 'url-loader?limit=8192'
+    }]
   }
 };

templates/javascript/App.jsx

@@ -27,7 +27,7 @@ var <%= scriptAppName %> = React.createClass({
     );
   }
 });
-
-React.renderComponent(<<%= scriptAppName %> />, document.getElementById('content')); // jshint ignore:line
-
+<% if (!reactRouter) {
+%>React.renderComponent(<<%= scriptAppName %> />, document.getElementById('content')); // jshint ignore:line
+<% } %>
 module.exports = <%= scriptAppName %>;

templates/javascript/main.jsx

@@ -0,0 +1,12 @@
+/** @jsx React.DOM */
+
+var <%= scriptAppName %> = require('./<%= scriptAppName %>');
+var React = require('react');
+var {DefaultRoute, Route, Routes} = require('react-router');
+
+React.renderComponent((
+  <Routes location="history">
+    <Route path="/" handler={<%= scriptAppName %>}>
+    </Route>
+  </Routes>
+), document.getElementById('content'));

templates/spec/main.js

@@ -0,0 +1,14 @@
+'use strict';
+
+describe('main', function () {
+  var main, component;
+
+  beforeEach(function () {
+    main = require('../../../src/scripts/components/main.jsx');
+    component = main();
+  });
+
+  it('should create a new instance of main', function () {
+    expect(component).toBeDefined();
+  });
+});