Merge remote-tracking branch 'newtriks/master'

Conflicts:
	README.md
This commit is contained in:
Chris 2015-05-26 10:15:03 +02:00
commit e90aaa46b6
10 changed files with 70 additions and 21 deletions

View File

@ -58,7 +58,7 @@ yo react-webpack:component foo //or just: yo react-webpack:c foo
``` ```
Produces `src/components/Foo.js` (*javascript - JSX*): Produces `src/components/Foo.js` (*javascript - JSX*):
``` ```js
'use strict'; 'use strict';
var React = require('react/addons'); var React = require('react/addons');
@ -79,7 +79,7 @@ module.exports = Foo;
``` ```
And `test/spec/components/Foo.js` (*javascript - jasmine*): And `test/spec/components/Foo.js` (*javascript - jasmine*):
``` ```js
'use strict'; 'use strict';
describe('Foo', function () { describe('Foo', function () {
@ -97,7 +97,7 @@ describe('Foo', function () {
``` ```
And `src/styles/Foo.css` (or .sass, .less etc...) : And `src/styles/Foo.css` (or .sass, .less etc...) :
``` ```css
.Foo{ .Foo{
border: 1px dashed #f00; border: 1px dashed #f00;
} }
@ -110,7 +110,7 @@ For all you lazy programmers out there, we've added another shortcut - `rich` fl
yo react-webpack:c foofoo --rich yo react-webpack:c foofoo --rich
``` ```
This will give you all of react component's most common stuff : This will give you all of react component's most common stuff :
```` ```js
var React = require('react/addons'); var React = require('react/addons');
require('styles/Foofoo.sass'); require('styles/Foofoo.sass');
@ -135,7 +135,7 @@ This will give you all of react component's most common stuff :
}); });
module.exports = Foofoo; module.exports = Foofoo;
```` ```
Just remove those you don't need, then fill and space out the rest. Just remove those you don't need, then fill and space out the rest.
@ -153,7 +153,7 @@ yo react-webpack:action bar //or just: yo react-webpack:a bar
Will create a file - `src/actions/BarActionCreators.js` Will create a file - `src/actions/BarActionCreators.js`
if 'architecture' is **Flux**, it Produces : if 'architecture' is **Flux**, it Produces :
``` ```js
'use strict'; 'use strict';
var BarActionCreators = { var BarActionCreators = {
@ -163,7 +163,7 @@ var BarActionCreators = {
module.exports = BarActionCreators; module.exports = BarActionCreators;
``` ```
And if it's **Reflux**: And if it's **Reflux**:
``` ```js
'use strict'; 'use strict';
var Reflux = require('reflux'); var Reflux = require('reflux');
@ -177,7 +177,7 @@ module.exports = BarActionCreators;
``` ```
and same test for both architectures: and same test for both architectures:
``` ```js
'use strict'; 'use strict';
describe('BarActionCreators', function() { describe('BarActionCreators', function() {
@ -204,7 +204,7 @@ yo react-webpack:store baz //or just: yo react-webpack:s baz
Will create a file - `src/stores/BazStore.js` Will create a file - `src/stores/BazStore.js`
if 'architecture' is **Flux**, it Produces : if 'architecture' is **Flux**, it Produces :
``` ```js
'use strict'; 'use strict';
var EventEmitter = require('events').EventEmitter; var EventEmitter = require('events').EventEmitter;
@ -226,7 +226,7 @@ BazStore.dispatchToken = MainAppDispatcher.register(function(action) {
module.exports = BazStore; module.exports = BazStore;
``` ```
And if it's **Reflux**: And if it's **Reflux**:
``` ```js
'use strict'; 'use strict';
var Reflux = require('reflux'); var Reflux = require('reflux');
@ -243,7 +243,7 @@ module.exports = BazStore;
``` ```
and same test for both architectures: and same test for both architectures:
``` ```js
'use strict'; 'use strict';
describe('BazStore', function() { describe('BazStore', function() {
@ -279,20 +279,18 @@ js or jsx
Sets the file suffix for generated components. Defaults to "js". Please note that you need to require files *including* the file ending when using jsx as suffix. Example: Sets the file suffix for generated components. Defaults to "js". Please note that you need to require files *including* the file ending when using jsx as suffix. Example:
```javascript ```js
var MyJSComponent = require('./MyJSComponent'); var MyJSComponent = require('./MyJSComponent');
var MyJSX = require('./MySQJ.jsx'); var MyJSX = require('./MyJSX.jsx');
``` ```
Generated files and tests are automatically created this way so they will include the correct type by default.
### architecture ### architecture
[flux](https://facebook.github.io/flux/) or [reflux](https://github.com/spoike/refluxjs) [flux](https://facebook.github.io/flux/) or [reflux](https://github.com/spoike/refluxjs)
### es6 ### 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. 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 store.
## Testing ## Testing

View File

@ -24,6 +24,9 @@ ActionGenerator.prototype.createActionFile = function createActionFile() {
case 'reflux': case 'reflux':
actionTemplate = 'RefluxAction'; actionTemplate = 'RefluxAction';
break; break;
case 'alt':
actionTemplate = 'AltAction';
break;
} }
console.log('Creating ' + this.architecture + ' action'); console.log('Creating ' + this.architecture + ' action');

View File

@ -72,11 +72,12 @@ ReactWebpackGenerator.prototype.askForArchitecture = function() {
this.prompt({ this.prompt({
type : 'list', type : 'list',
name : 'architecture', name : 'architecture',
message : 'Would you like to use one of those architectures?', message : 'Would you like to use one of these architectures?',
choices: [ choices: [
{name:'No need for that, thanks',value:false}, {name:'No need for that, thanks',value:false},
{name:'Flux',value:'flux'}, {name:'Flux',value:'flux'},
{name:'ReFlux',value:'reflux'} {name:'ReFlux',value:'reflux'},
{name:'Alt',value:'alt'}
], ],
default : false default : false
}, function(props) { }, function(props) {

View File

@ -27,3 +27,9 @@ MainGenerator.prototype.createDispatcher = function createDispatcher() {
this.appTemplate('Dispatcher', 'dispatcher/' + this.scriptAppName + 'Dispatcher'); this.appTemplate('Dispatcher', 'dispatcher/' + this.scriptAppName + 'Dispatcher');
} }
}; };
MainGenerator.prototype.createAltjsFile = function createAltjsFile() {
if(this.env.options.architecture=='alt') {
this.appTemplate('alt', 'alt');
}
};

View File

@ -1,6 +1,6 @@
{ {
"name": "generator-react-webpack", "name": "generator-react-webpack",
"version": "1.2.6", "version": "1.2.7",
"description": "Yeoman generator for ReactJS and Webpack", "description": "Yeoman generator for ReactJS and Webpack",
"keywords": [ "keywords": [
"yeoman-generator", "yeoman-generator",
@ -40,7 +40,8 @@
"yo": ">=1.2.0" "yo": ">=1.2.0"
}, },
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0",
"iojs": ">=1.1.0"
}, },
"licenses": [ "licenses": [
{ {

View File

@ -26,6 +26,9 @@ StoreGenerator .prototype.createStoreFile = function createStoreFile() {
case 'reflux': case 'reflux':
storeTemplate = 'RefluxStore'; storeTemplate = 'RefluxStore';
break; break;
case 'alt':
storeTemplate = 'AltStore';
break;
} }
console.log('Creating ' + this.architecture + ' store'); console.log('Creating ' + this.architecture + ' store');

View File

@ -14,7 +14,8 @@
"flux": "^2.0.1", "flux": "^2.0.1",
"events": "^1.0.2", "events": "^1.0.2",
"object-assign": "^2.0.0", <% } if (architecture === 'reflux') {%> "object-assign": "^2.0.0", <% } if (architecture === 'reflux') {%>
"reflux": "^0.2.7", <% } %> "reflux": "^0.2.7", <% } if (architecture === 'alt') { %>
"alt": "^0.16.5", <% } %>
"react": "~0.12.2", "react": "~0.12.2",
"normalize.css": "~3.0.3" "normalize.css": "~3.0.3"
}, },

View File

@ -0,0 +1,11 @@
var alt = require('../alt');
<% if (es6) { %>class <%= classedName %> {
}; <% }
else { %>var <%= classedName %> = alt.createActions(function () {
}); <% } %>
<% if (es6) { %>export default alt.createActions(<%= classedName %>); <% }
else { %>module.exports = <%= classedName %>; <% } %>

View File

@ -0,0 +1,21 @@
var alt = require('../alt');
<% if (es6) { %>class <%= classedName %> {
constructor() {
this.bindListeners({
});
}
} <% }
else { %>var <%= classedName %> = alt.createStore({
bindListeners: {
}
}); <% } %>
<% if (es6) { %>export default alt.createStore(<%= classedName %>, '<%= classedName %>'); <% }
else { %>module.exports = <%= classedName %>; <% } %>

View File

@ -0,0 +1,4 @@
var Alt = require('alt');
var alt = new Alt();
module.exports = alt;