diff --git a/README.md b/README.md index 536b938..67d3b59 100644 --- a/README.md +++ b/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 ( +
+

Content for Foofoo

+
+ ); + } + }); + + 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. diff --git a/a/index.js b/a/index.js new file mode 100644 index 0000000..eeffccf --- /dev/null +++ b/a/index.js @@ -0,0 +1 @@ +module.exports = require('../action'); diff --git a/action/index.js b/action/index.js index a07884f..be324a3 100644 --- a/action/index.js +++ b/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); diff --git a/c/index.js b/c/index.js new file mode 100644 index 0000000..d61f628 --- /dev/null +++ b/c/index.js @@ -0,0 +1 @@ +module.exports = require('../component'); diff --git a/component/index.js b/component/index.js index 26ca2e9..28223e5 100644 --- a/component/index.js +++ b/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', diff --git a/package.json b/package.json index 5a0b5ce..3376edd 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "generator-react-webpack", + "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", diff --git a/s/index.js b/s/index.js new file mode 100644 index 0000000..4b2cf54 --- /dev/null +++ b/s/index.js @@ -0,0 +1 @@ +module.exports = require('../store'); diff --git a/script-base.js b/script-base.js index 4b07a56..d8746a0 100644 --- a/script-base.js +++ b/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 diff --git a/store/index.js b/store/index.js index b277abf..b338678 100644 --- a/store/index.js +++ b/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); diff --git a/templates/common/index.html b/templates/common/index.html index 2e60775..7d321af 100644 --- a/templates/common/index.html +++ b/templates/common/index.html @@ -14,6 +14,10 @@

If you can see this, something is broken (or JS is not enabled)!!.

+ + diff --git a/templates/javascript/Component.js b/templates/javascript/Component.js index 77b901f..2ce6ed0 100644 --- a/templates/javascript/Component.js +++ b/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 (