diff --git a/README.md b/README.md index 232d53a..fb6932a 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ yo react-webpack:component foo //or just: yo react-webpack:c foo ``` Produces `src/components/Foo.js` (*javascript - JSX*): -``` +```js 'use strict'; var React = require('react/addons'); @@ -79,7 +79,7 @@ module.exports = Foo; ``` And `test/spec/components/Foo.js` (*javascript - jasmine*): -``` +```js 'use strict'; describe('Foo', function () { @@ -97,7 +97,7 @@ describe('Foo', function () { ``` And `src/styles/Foo.css` (or .sass, .less etc...) : -``` +```css .Foo{ 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 ``` This will give you all of react component's most common stuff : - ```` + ```js var React = require('react/addons'); require('styles/Foofoo.sass'); @@ -135,7 +135,7 @@ This will give you all of react component's most common stuff : }); module.exports = Foofoo; - ```` + ``` 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` if 'architecture' is **Flux**, it Produces : -``` +```js 'use strict'; var BarActionCreators = { @@ -163,7 +163,7 @@ var BarActionCreators = { module.exports = BarActionCreators; ``` And if it's **Reflux**: -``` +```js 'use strict'; var Reflux = require('reflux'); @@ -177,7 +177,7 @@ module.exports = BarActionCreators; ``` and same test for both architectures: -``` +```js 'use strict'; 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` if 'architecture' is **Flux**, it Produces : -``` +```js 'use strict'; var EventEmitter = require('events').EventEmitter; @@ -226,7 +226,7 @@ BazStore.dispatchToken = MainAppDispatcher.register(function(action) { module.exports = BazStore; ``` And if it's **Reflux**: -``` +```js 'use strict'; var Reflux = require('reflux'); @@ -243,7 +243,7 @@ module.exports = BazStore; ``` and same test for both architectures: -``` +```js 'use strict'; 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: -```javascript +```js 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 [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. +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 diff --git a/action/index.js b/action/index.js index be324a3..228642b 100644 --- a/action/index.js +++ b/action/index.js @@ -24,6 +24,9 @@ ActionGenerator.prototype.createActionFile = function createActionFile() { case 'reflux': actionTemplate = 'RefluxAction'; break; + case 'alt': + actionTemplate = 'AltAction'; + break; } console.log('Creating ' + this.architecture + ' action'); diff --git a/app/index.js b/app/index.js index 7c48ad3..2fa6982 100644 --- a/app/index.js +++ b/app/index.js @@ -72,11 +72,12 @@ ReactWebpackGenerator.prototype.askForArchitecture = function() { this.prompt({ type : 'list', name : 'architecture', - message : 'Would you like to use one of those architectures?', + message : 'Would you like to use one of these architectures?', choices: [ {name:'No need for that, thanks',value:false}, {name:'Flux',value:'flux'}, - {name:'ReFlux',value:'reflux'} + {name:'ReFlux',value:'reflux'}, + {name:'Alt',value:'alt'} ], default : false }, function(props) { diff --git a/main/index.js b/main/index.js index d28ad0d..0317a5e 100644 --- a/main/index.js +++ b/main/index.js @@ -27,3 +27,9 @@ MainGenerator.prototype.createDispatcher = function createDispatcher() { this.appTemplate('Dispatcher', 'dispatcher/' + this.scriptAppName + 'Dispatcher'); } }; + +MainGenerator.prototype.createAltjsFile = function createAltjsFile() { + if(this.env.options.architecture=='alt') { + this.appTemplate('alt', 'alt'); + } +}; diff --git a/package.json b/package.json index 0f3db9a..055a67e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "generator-react-webpack", - "version": "1.2.6", + "version": "1.2.7", "description": "Yeoman generator for ReactJS and Webpack", "keywords": [ "yeoman-generator", @@ -40,7 +40,8 @@ "yo": ">=1.2.0" }, "engines": { - "node": ">=0.10.0" + "node": ">=0.10.0", + "iojs": ">=1.1.0" }, "licenses": [ { diff --git a/store/index.js b/store/index.js index b338678..98db828 100644 --- a/store/index.js +++ b/store/index.js @@ -26,6 +26,9 @@ StoreGenerator .prototype.createStoreFile = function createStoreFile() { case 'reflux': storeTemplate = 'RefluxStore'; break; + case 'alt': + storeTemplate = 'AltStore'; + break; } console.log('Creating ' + this.architecture + ' store'); diff --git a/templates/common/_package.json b/templates/common/_package.json index 5ae80ad..026efab 100644 --- a/templates/common/_package.json +++ b/templates/common/_package.json @@ -14,7 +14,8 @@ "flux": "^2.0.1", "events": "^1.0.2", "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", "normalize.css": "~3.0.3" }, diff --git a/templates/javascript/AltAction.js b/templates/javascript/AltAction.js new file mode 100644 index 0000000..98629df --- /dev/null +++ b/templates/javascript/AltAction.js @@ -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 %>; <% } %> diff --git a/templates/javascript/AltStore.js b/templates/javascript/AltStore.js new file mode 100644 index 0000000..a59a350 --- /dev/null +++ b/templates/javascript/AltStore.js @@ -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 %>; <% } %> diff --git a/templates/javascript/alt.js b/templates/javascript/alt.js new file mode 100644 index 0000000..baa5fef --- /dev/null +++ b/templates/javascript/alt.js @@ -0,0 +1,4 @@ +var Alt = require('alt'); +var alt = new Alt(); + +module.exports = alt;