From 967706e94232b631ac141b6a8915c09aa863a24b Mon Sep 17 00:00:00 2001 From: Simon Bailey Date: Fri, 26 Sep 2014 12:14:58 +0100 Subject: [PATCH] feat: added react-router Signed-off-by: Simon Bailey --- README.md | 7 +++++ app/index.js | 18 ++++++++++-- main/index.js | 7 +++++ package.json | 2 +- templates/common/_package.json | 5 ++-- templates/common/root/webpack.config.js | 24 +++++++-------- templates/common/root/webpack.dist.config.js | 31 ++++++++------------ templates/javascript/App.jsx | 6 ++-- templates/javascript/main.jsx | 12 ++++++++ templates/spec/main.js | 14 +++++++++ 10 files changed, 85 insertions(+), 41 deletions(-) create mode 100644 templates/javascript/main.jsx create mode 100644 templates/spec/main.js diff --git a/README.md b/README.md index d605466..6bba7d3 100644 --- a/README.md +++ b/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. diff --git a/app/index.js b/app/index.js index 92f17be..55136f7 100644 --- a/app/index.js +++ b/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'); diff --git a/main/index.js b/main/index.js index ebff075..f58b8b4 100644 --- a/main/index.js +++ b/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'); + } +}; diff --git a/package.json b/package.json index a6321c1..28a3663 100644 --- a/package.json +++ b/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", diff --git a/templates/common/_package.json b/templates/common/_package.json index c695a92..299a4cb 100644 --- a/templates/common/_package.json +++ b/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": { diff --git a/templates/common/root/webpack.config.js b/templates/common/root/webpack.config.js index 5e1c6fe..1235f53 100644 --- a/templates/common/root/webpack.config.js +++ b/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' }] } + }; diff --git a/templates/common/root/webpack.dist.config.js b/templates/common/root/webpack.dist.config.js index 10f42a6..287c0be 100644 --- a/templates/common/root/webpack.dist.config.js +++ b/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' + }] } }; diff --git a/templates/javascript/App.jsx b/templates/javascript/App.jsx index a0972eb..d355251 100644 --- a/templates/javascript/App.jsx +++ b/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 %>; diff --git a/templates/javascript/main.jsx b/templates/javascript/main.jsx new file mode 100644 index 0000000..428dba4 --- /dev/null +++ b/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(( + + }> + + +), document.getElementById('content')); diff --git a/templates/spec/main.js b/templates/spec/main.js new file mode 100644 index 0000000..ac35635 --- /dev/null +++ b/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(); + }); +});