Merge pull request #92 from yonatanmn/master

alias for generators, rich option

README.md

@@ -54,7 +54,7 @@ Generates a [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) compon
 
 Example:
 ```bash
-yo react-webpack:component foo
+yo react-webpack:component foo  //or just: yo react-webpack:c foo
 ```
 
 Produces `src/components/Foo.js` (*javascript - JSX*):
@@ -103,13 +103,52 @@ And `src/styles/Foo.css` (or .sass, .less etc...) :
 }
 ```
 
+### rich flag
+
+For all you lazy programmers out there, we've added another shortcut - `rich` flag:
+```bash
+yo react-webpack:c foofoo --rich 
+```
+This will give you all of react component's most common stuff :
+ ````
+ var React = require('react/addons');
+ 
+ require('styles/Foofoo.sass');
+ 
+ var Foofoo = React.createClass({
+   mixins: [],
+   getInitialState: function() { return({}) },
+   getDefaultProps: function() {},
+   componentWillMount: function() {},
+   componentDidMount: function() {},
+   shouldComponentUpdate: function() {},
+   componentDidUpdate: function() {},
+   componentWillUnmount: function() {},
+ 
+   render: function () {
+     return (
+         <div>
+           <p>Content for Foofoo</p>
+         </div>
+       );
+   }
+ });
+ 
+ module.exports = Foofoo; 
+ ````
+
+Just remove those you don't need, then fill and space out the rest. 
+
+
+
+
 ### Action
 
 When using Flux or Reflux architecture, it generates an actionCreator in `src/actions` and it's corresponding test in `src/spec/actions`.
 
 Example:
 ```bash
-yo react-webpack:action bar
+yo react-webpack:action bar //or just: yo react-webpack:a bar
 ```
 Will create a file - `src/actions/BarActionCreators.js`
 
@@ -160,7 +199,7 @@ When using Flux or Reflux architecture, it generates a store in `src/stores` and
 
 Example:
 ```bash
-yo react-webpack:store baz
+yo react-webpack:store baz //or just: yo react-webpack:s baz
 ```
 Will create a file - `src/stores/BazStore.js`
 
@@ -238,6 +277,11 @@ Sets the style file's template and extension
 
 [flux](https://facebook.github.io/flux/) or [reflux](https://github.com/spoike/refluxjs)
 
+### es6
+
+If you are using `es6`, and want to use its export functionality (and not webpack's), just add `--es6` flag when you create a component, action or srore.
+
+
 ## Testing
 
 Running `grunt test` will run the unit tests with karma. Tests are written using [Jasmine](http://jasmine.github.io/) by default.

a/index.js

@@ -0,0 +1 @@
+module.exports = require('../action');

action/index.js

@@ -3,8 +3,11 @@ var util = require('util');
 var ScriptBase = require('../script-base.js');
 
 var ActionGenerator = module.exports = function ActionGenerator(args, options, config) {
-  args[0] += 'ActionCreators';
-  ScriptBase.apply(this, arguments);
+  if (!args[0]) console.log('\n Please specify a name for this action creator \n');
+  else {
+    args[0] += 'ActionCreators';
+    ScriptBase.apply(this, arguments)
+  }
 };
 
 util.inherits(ActionGenerator, ScriptBase);

c/index.js

@@ -0,0 +1 @@
+module.exports = require('../component');

component/index.js

@@ -10,8 +10,10 @@ util.inherits(ComponentGenerator, ScriptBase);
 
 ComponentGenerator.prototype.createComponentFile = function createComponentFile() {
   this.option('es6');
+  this.option('rich');
 
   this.es6 = this.options.es6;
+  this.rich = this.options.rich;
 
   this.generateComponentTestAndStyle(
     'Component',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "generator-react-webpack", 
   "version": "1.2.2",
-  "description": "Yeoman generator for ReactJS and Webpack",
+  "description": "Yeoman generator for Facebook's ReactJS, with webpack, livereload, grunt, Flux/Reflux architecture options and support for sass, less or stylus  ",
   "keywords": [
     "yeoman-generator",
     "reactjs",

s/index.js

@@ -0,0 +1 @@
+module.exports = require('../store');

script-base.js

@@ -82,7 +82,6 @@ Generator.prototype.testTemplate = function (src, dest) {
 };
 
 Generator.prototype.stylesTemplate = function (src, dest) {
-	console.log(src);
 	yeoman.generators.Base.prototype.template.apply(this, [
 		src + this.stylesSuffix,
 		path.join(this.options.stylesPath, dest) + this.stylesSuffix

store/index.js

@@ -3,9 +3,12 @@ var util = require('util');
 var ScriptBase = require('../script-base.js');
 
 var StoreGenerator  = module.exports = function StoreGenerator(args, options, config) {
-  args[0] += 'Store';
-  ScriptBase.apply(this, arguments);
-}
+  if (!args[0]) console.log('\n Please specify a name for this store \n');
+  else {
+    args[0] += 'Store';
+    ScriptBase.apply(this, arguments)
+  }
+};
 
 util.inherits(StoreGenerator, ScriptBase);
 

templates/common/index.html

@@ -14,6 +14,10 @@
   <div id="content">
     <h1>If you can see this, something is broken (or JS is not enabled)!!.</h1>
   </div>
+
+  <script>
+    __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__
+  </script>
   <script type="text/javascript" src="assets/main.js"></script>
 </body>
 </html>

templates/javascript/Component.js

@@ -1,6 +1,9 @@
 'use strict';
 
-var React = require('react/addons');
+var React = require('react/addons');<% if(rich && architecture === 'reflux'){%>
+var Reflux = require('Reflux'); <%}%>
+<% if(rich && architecture === 'flux' || architecture === 'reflux'){%>
+//var Actions = require('actions/xxx')<%}%>
 
 <% if (stylesLanguage === 'css') { %>require('styles/<%= classedFileName %>.css');<% } %><%
 if (stylesLanguage === 'sass')   { %>require('styles/<%= classedFileName %>.sass');<% } %><%
@@ -8,7 +11,16 @@ if (stylesLanguage === 'scss')   { %>require('styles/<%= classedFileName %>.scss
 if (stylesLanguage === 'less')   { %>require('styles/<%= classedFileName %>.less');<% } %><%
 if (stylesLanguage === 'stylus') { %>require('styles/<%= classedFileName %>.styl');<% } %>
 
-var <%= classedName %> = React.createClass({
+var <%= classedName %> = React.createClass({<% if(rich){%>
+  mixins: [<% if(architecture === 'reflux'){%>Reflux.ListenerMixin<%}%>],
+  getInitialState: function() { return({}) },
+  getDefaultProps: function() {},
+  componentWillMount: function() {},
+  componentDidMount: function() {},
+  shouldComponentUpdate: function() {},
+  componentDidUpdate: function() {},
+  componentWillUnmount: function() {},<%}%>
+
   render: function () {
     return (
         <div>