diff --git a/README.md b/README.md index c667b28..67d3b59 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ Example: yo react-webpack:component foo //or just: yo react-webpack:c foo ``` -Produces `src/scripts/components/Foo.js` (*javascript - JSX*): +Produces `src/components/Foo.js` (*javascript - JSX*): ``` 'use strict'; @@ -86,7 +86,7 @@ describe('Foo', function () { var Foo, component; beforeEach(function () { - Foo = require('../../../src/scripts/components/Foo'); + Foo = require('../../../src/components/Foo'); component = Foo(); }); @@ -144,13 +144,13 @@ 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/scripts/actions` and it's corresponding test in `src/spec/actions`. +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 //or just: yo react-webpack:a bar ``` -Will create a file - `src/scripts/actions/BarActionCreators.js` +Will create a file - `src/actions/BarActionCreators.js` if 'architecture' is **Flux**, it Produces : ``` @@ -195,13 +195,13 @@ describe('BarActionCreators', function() { ### Store -When using Flux or Reflux architecture, it generates a store in `src/scripts/stores` and it's corresponding test in `src/spec/stores`. +When using Flux or Reflux architecture, it generates a store in `src/stores` and it's corresponding test in `src/spec/stores`. Example: ```bash yo react-webpack:store baz //or just: yo react-webpack:s baz ``` -Will create a file - `src/scripts/stores/BazStore.js` +Will create a file - `src/stores/BazStore.js` if 'architecture' is **Flux**, it Produces : ``` @@ -295,20 +295,19 @@ The react-webpack generator automates the setup of a [ReactJS](http://facebook.g ``` project - src - - scripts - -components - MainApp.js - Foo.js - AnotherComponent.js + -components + MainApp.js + Foo.js + AnotherComponent.js - //for flux/reflux - -actions - BarActionCreators.js - -stores - BazStore.js - //for flux - -dispatcher - FooAppDispatcher + //for flux/reflux + -actions + BarActionCreators.js + -stores + BazStore.js + //for flux + -dispatcher + FooAppDispatcher - styles main.css @@ -351,14 +350,14 @@ Each component is a module and can be required using the [Webpack](http://webpac Out the box the [Gruntfile](http://gruntjs.com/api/grunt.file) is configured with the following: -1. **webpack**: uses the [grunt-webpack](https://github.com/webpack/grunt-webpack) plugin to load all required modules and output to a single JS file `src/scripts/main.js`. This is included in the `src/index.html` file by default and will reload in the browser as and when it is recompiled. +1. **webpack**: uses the [grunt-webpack](https://github.com/webpack/grunt-webpack) plugin to load all required modules and output to a single JS file `src/main.js`. This is included in the `src/index.html` file by default and will reload in the browser as and when it is recompiled. 2. **webpack-dev-server**: uses the [webpack-dev-server](https://github.com/webpack/webpack-dev-server) to watch for file changes and also serve the webpack app in development. 3. **connect**: uses the [grunt-connect](https://github.com/gruntjs/grunt-contrib-connect) plugin to start a webserver at [localhost](http://localhost:8000). 4. **karma**: uses the [grunt-karma](https://github.com/karma-runner/grunt-karma) plugin to load the Karma configuration file `karma.conf.js` located in the project root. This will run all tests using [PhantomJS](http://phantomjs.org/) by default but supports many other browsers. ### CSS -Included in the project is the [normalize.css](http://necolas.github.io/normalize.css/) script. There is also a `src/styles/main.css` script that's required by the core `src/scripts/components/App.js` component using Webpack. +Included in the project is the [normalize.css](http://necolas.github.io/normalize.css/) script. There is also a `src/styles/main.css` script that's required by the core `src/components/App.js` component using Webpack. ### JSHint diff --git a/package.json b/package.json index 2fd8b4a..7784d0a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "generator-react-webpack", - "version": "1.2.1", + "name": "generator-react-webpack", + "version": "1.2.2", "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", diff --git a/script-base.js b/script-base.js index 77834a8..d8746a0 100644 --- a/script-base.js +++ b/script-base.js @@ -23,7 +23,7 @@ var Generator = module.exports = function Generator() { this.architecture = this.config.get('architecture'); if (typeof this.options.appPath === 'undefined') { - this.options.appPath = this.options.appPath || 'src/scripts'; + this.options.appPath = this.options.appPath || 'src'; } if (typeof this.options.testPath === 'undefined') { diff --git a/templates/common/Gruntfile.js b/templates/common/Gruntfile.js index 36e9817..0f61f8a 100644 --- a/templates/common/Gruntfile.js +++ b/templates/common/Gruntfile.js @@ -19,7 +19,6 @@ module.exports = function (grunt) { webpack: { options: webpackDistConfig, - dist: { cache: false } @@ -31,11 +30,11 @@ module.exports = function (grunt) { port: 8000, webpack: webpackDevConfig, publicPath: '/assets/', - contentBase: './<%= pkg.src %>/', + contentBase: './<%= pkg.src %>/' }, start: { - keepAlive: true, + keepAlive: true } }, @@ -90,7 +89,7 @@ module.exports = function (grunt) { expand: true, src: ['<%= pkg.src %>/images/*'], dest: '<%= pkg.dist %>/images/' - }, + } ] } }, diff --git a/templates/common/_webpack.config.js b/templates/common/_webpack.config.js index 0d3d710..0b69a91 100644 --- a/templates/common/_webpack.config.js +++ b/templates/common/_webpack.config.js @@ -19,7 +19,7 @@ module.exports = { devtool: false, entry: [ 'webpack/hot/only-dev-server', - './src/scripts/components/<% if (reactRouter) { %>main<% } else { %><%= scriptAppName %><% } %>.js' + './src/components/<% if (reactRouter) { %>main<% } else { %><%= scriptAppName %><% } %>.js' ], stats: { @@ -31,10 +31,10 @@ module.exports = { extensions: ['', '.js'], alias: { 'styles': __dirname + '/src/styles', - 'mixins': __dirname + '/src/scripts/mixins', - 'components': __dirname + '/src/scripts/components/'<% if(architecture==='flux'||architecture=='reflux') { %>, - 'stores': __dirname + '/src/scripts/stores/', - 'actions': __dirname + '/src/scripts/actions/'<% } %> + 'mixins': __dirname + '/src/mixins', + 'components': __dirname + '/src/components/'<% if(architecture==='flux'||architecture=='reflux') { %>, + 'stores': __dirname + '/src/stores/', + 'actions': __dirname + '/src/actions/'<% } %> } }, module: { diff --git a/templates/common/_webpack.dist.config.js b/templates/common/_webpack.dist.config.js index f9d4d17..4d55561 100644 --- a/templates/common/_webpack.dist.config.js +++ b/templates/common/_webpack.dist.config.js @@ -18,7 +18,7 @@ module.exports = { debug: false, devtool: false, - entry: './src/scripts/components/<% if (reactRouter) { %>main<% } else { %><%= scriptAppName %><% } %>.js', + entry: './src/components/<% if (reactRouter) { %>main<% } else { %><%= scriptAppName %><% } %>.js', stats: { colors: true, @@ -36,10 +36,10 @@ module.exports = { extensions: ['', '.js'], alias: { 'styles': __dirname + '/src/styles', - 'mixins': __dirname + '/src/scripts/mixins', - 'components': __dirname + '/src/scripts/components/'<% if(architecture==='flux'||architecture=='reflux') { %>, - 'stores': __dirname + '/src/scripts/stores/', - 'actions': __dirname + '/src/scripts/actions/'<% } %> + 'mixins': __dirname + '/src/mixins', + 'components': __dirname + '/src/components/'<% if(architecture==='flux'||architecture=='reflux') { %>, + 'stores': __dirname + '/src/stores/', + 'actions': __dirname + '/src/actions/'<% } %> } }, diff --git a/templates/common/gitignore b/templates/common/gitignore index e6a2bd4..ce592cc 100644 --- a/templates/common/gitignore +++ b/templates/common/gitignore @@ -30,4 +30,4 @@ $RECYCLE.BIN/ node_modules/ .tmp dist -/src/scripts/main.js +/src/main.js diff --git a/templates/common/karma.conf.js b/templates/common/karma.conf.js index 2e7936a..0503e13 100644 --- a/templates/common/karma.conf.js +++ b/templates/common/karma.conf.js @@ -52,9 +52,9 @@ module.exports = function (config) { resolve: { alias: { 'styles': path.join(process.cwd(), './src/styles/'), - 'components': path.join(process.cwd(), './src/scripts/components/')<% if(architecture === 'flux'||architecture === 'reflux') { %>, - 'stores': '../../../src/scripts/stores/', - 'actions': '../../../src/scripts/actions/'<% } %> + 'components': path.join(process.cwd(), './src/components/')<% if(architecture === 'flux'||architecture === 'reflux') { %>, + 'stores': '../../../src/stores/', + 'actions': '../../../src/actions/'<% } %> } } }, diff --git a/templates/javascript/App.js b/templates/javascript/App.js index 545fe5a..4d83182 100644 --- a/templates/javascript/App.js +++ b/templates/javascript/App.js @@ -5,9 +5,9 @@ var ReactTransitionGroup = React.addons.TransitionGroup; // CSS require('normalize.css'); -require('../../styles/main.css'); +require('../styles/main.css'); -var imageURL = require('../../images/yeoman.png'); +var imageURL = require('../images/yeoman.png'); var <%= scriptAppName %> = React.createClass({ render: function() { diff --git a/test/test-creation.js b/test/test-creation.js index 3e94a10..70a646f 100644 --- a/test/test-creation.js +++ b/test/test-creation.js @@ -71,8 +71,8 @@ describe('react-webpack generator', function() { react.run({}, function() { setTimeout(function() { helpers.assertFile([].concat(expected, [ - 'src/scripts/components/TempTestApp.js', - 'src/scripts/components/main.js' + 'src/components/TempTestApp.js', + 'src/components/main.js' ])); done(); }); @@ -135,7 +135,7 @@ describe('react-webpack generator', function() { ['webpack.dist.config.js', /resolve[\S\s]+alias[\S\s]+stores/m] ]); - assert.noFile('src/scripts/dispatcher/TempTestAppDispatcher.js'); + assert.noFile('src/dispatcher/TempTestAppDispatcher.js'); done(); }); @@ -227,7 +227,7 @@ describe('react-webpack generator', function() { it('should have a Dispatcher generated', function(done) { setTimeout(function(){ - assert.file('src/scripts/dispatcher/TempTestAppDispatcher.js'); + assert.file('src/dispatcher/TempTestAppDispatcher.js'); done(); }); @@ -238,7 +238,7 @@ describe('react-webpack generator', function() { var generatorTest = function(name, generatorType, specType, targetDirectory, scriptNameFn, specNameFn, suffix, done) { var deps = [path.join('../..', generatorType)]; - genOptions.appPath = 'src/scripts' + genOptions.appPath = 'src'; var reactGenerator = helpers.createGenerator('react-webpack:' + generatorType, deps, [name], genOptions); @@ -246,8 +246,8 @@ describe('react-webpack generator', function() { reactGenerator.run([], function() { helpers.assertFileContent([ - [path.join('src/scripts', targetDirectory, name + '.js'), new RegExp('var ' + scriptNameFn(name) + suffix, 'g')], - [path.join('src/scripts', targetDirectory, name + '.js'), new RegExp('require\\(\'styles\\/' + name + suffix + '\\.[^\']+' + '\'\\)', 'g')], + [path.join('src', targetDirectory, name + '.js'), new RegExp('var ' + scriptNameFn(name) + suffix, 'g')], + [path.join('src', targetDirectory, name + '.js'), new RegExp('require\\(\'styles\\/' + name + suffix + '\\.[^\']+' + '\'\\)', 'g')], [path.join('test/spec', targetDirectory, 'TempTestApp' + '.js'), new RegExp('require\\(\'components\\/' + 'TempTestApp' + suffix + '\\.[^\']+' + '\'\\)', 'g')], [path.join('test/spec', targetDirectory, name + '.js'), new RegExp('require\\(\'components\\/' + name + suffix + '\\.[^\']+' + '\'\\)', 'g')], [path.join('test/spec', targetDirectory, name + '.js'), new RegExp('describe\\(\'' + specNameFn(name) + suffix + '\'', 'g')] @@ -286,7 +286,7 @@ describe('react-webpack generator', function() { 'react-webpack:action', [path.join('../../action')], ['Test'], - { appPath: 'src/scripts' } + { appPath: 'src' } ); react.run([], function() { @@ -299,7 +299,7 @@ describe('react-webpack generator', function() { it('should generate a new action with tests', function(done) { assert.fileContent([ - ['src/scripts/actions/TestActionCreators.js', /var TestActionCreators/g], + ['src/actions/TestActionCreators.js', /var TestActionCreators/g], ['test/spec/actions/TestActionCreators.js', /require\('actions\/TestActionCreators.js'\)/g], ['test/spec/actions/TestActionCreators.js', /describe\('TestActionCreators'/g] ]); @@ -321,7 +321,7 @@ describe('react-webpack generator', function() { 'react-webpack:store', [path.join('../../store')], ['Test'], - { appPath: 'src/scripts' } + { appPath: 'src' } ); react.run([], function() { @@ -334,7 +334,7 @@ describe('react-webpack generator', function() { it('should generate a new store with tests', function(done) { assert.fileContent([ - ['src/scripts/stores/TestStore.js', /var TestStore/g], + ['src/stores/TestStore.js', /var TestStore/g], ['test/spec/stores/TestStore.js', /require\('stores\/TestStore.js'\)/g], ['test/spec/stores/TestStore.js', /describe\('TestStore'/g] ]);