3.3.0

Grammar improvement to the style prompt.

.travis.yml

@@ -1,6 +1,7 @@
 language: node_js
+sudo: false
 node_js:
-  - '4.1.0'
+  - '4.2.2'
 before_install:
   - currentfolder=${PWD##*/}
   - if [ "$currentfolder" != 'generator-react-webpack' ]; then cd .. && eval "mv $currentfolder generator-react-webpack" && cd generator-react-webpack; fi

CHANGELOG.md

@@ -1,6 +1,70 @@
 # generator-react-webpack - Changelog
 
+## 3.3.0
+
+1. Added new yeoman key "generatedWithVersion". Will be used for backwards compatibility of new major releases.
+
+## 3.2.4
+
+1. Added whitespaces to generated unit tests (made problems when using it with various eslint rules)
+
+## 3.2.3
+
+1. Adjusted postcss to work with react-webpack-template 1.4 upwards
+2. Improved styling output (provided by [thewtex](https://github.com/thewtex))
+
+## 3.2.2
+
+1. Cleaned up formatting of unit tests
+
+## 3.2.1
+
+1. Updated tests for new version of react-webpack-template
+
+## 3.2.0
+
+1. Updated yeoman-generator package to new version 0.22.1 (some methods like generator.NamedBase are now deprecated!)
+
+## 3.1.1
+
+1. Added bugfix for https://github.com/newtriks/generator-react-webpack/issues/170
+
+## 3.1.0
+
+1. Added support for postcss (Patch provided by [stylesuxx](https://github.com/stylesuxx))
+
+## 3.0.1
+
+1. Unneeded files (License, .npmignore) are not copied anymore
+2. Existence of .babelrc is now checked in unit tests
+
+## 3.0.0
+
+1. Updated react-webpack-template to 1.0.0 to include support for babel 6.
+
+## 2.2.7
+
+1. Updated yeoman to 0.21
+2. Added some badges for the readme
+
+## 2.2.6
+
+1. Added new version of ```react-webpack-template``` (provides new features for continuous testing and better dist build support)
+
+## 2.2.5
+
+1. Added ability to create stateless components
+2. Updated README with new installation instructions (need to install globally)
+3. Added new tests for components (should be easier to handle in the future)
+
+## 2.2.4
+
+1. Added automatic generation of components displayName property. This makes it easier to keep track of components that reside in deep subfolders (like src/components/my/example/components/indexComponent) would become "index" as a displayName, but should instead be MyExampleComponentsIndexComponent instead.
+
+## 2.2.3
+
+1. Fixed .gitignore renaming (Patch provided by [VovanR](https://github.com/VovanR))
+
 ## 2.2.0:
-___Upgrades:___
 
 1. Added new version of react-webpack-template, including support for React 0.14.

README.md

@@ -1,4 +1,7 @@
-# generator-react-webpack V2.0 [![Build Status](https://secure.travis-ci.org/newtriks/generator-react-webpack.png?branch=master)](https://travis-ci.org/newtriks/generator-react-webpack)  [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/newtriks/generator-react-webpack/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
+# generator-react-webpack V2.0
+
+[![Build Status](https://secure.travis-ci.org/newtriks/generator-react-webpack.png?branch=master)](https://travis-ci.org/newtriks/generator-react-webpack)   [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/newtriks/generator-react-webpack/trend.png)](https://bitdeli.com/free "Bitdeli Badge") ![Amount of Downloads per month](https://img.shields.io/npm/dm/generator-react-webpack.svg "Amount of Downloads") ![Dependency Tracker](https://img.shields.io/david/newtriks/generator-react-webpack.svg "Dependency Tracker") ![Dependency Tracker](https://img.shields.io/david/dev/newtriks/generator-react-webpack.svg "Dependency Tracker") ![Node Version](https://img.shields.io/node/v/generator-react-webpack.svg "Node Version")
+
 > Yeoman generator for [ReactJS](http://facebook.github.io/react/) - lets you quickly set up a project including karma test runner and [Webpack](http://webpack.github.io/) module system.
 
 # About
@@ -8,11 +11,12 @@ Out of the box it comes with support for:
 - Webpack
 - ES2015 via Babel-Loader
 - Different supported style languages (sass, scss, less, stylus)
+- Style transformations via PostCSS
 - Automatic code linting via esLint
 - Ability to unit test components via Karma and Mocha/Chai
 
 ## Changes in Version 2.0
-Tthis generator is written in ES2015. This means it is ___not compatible with node.js versions before 4.0___.
+This generator is written in ES2015. This means it is ___not compatible with node.js versions before 4.0___.
 
 It also does __NOT__ include support for Flux-Frameworks anymore. Instead, we will use it as a base for other generators to build upon. This will make the base generator easier to use and update.
 
@@ -22,13 +26,15 @@ If you have built a generator using generator-react-webpack, tell us and we will
 
 ## Generators that extend generator-react-webpack
 - [Generator-React-Webpack-Alt](https://github.com/weblogixx/generator-react-webpack-alt) (Adds ability to create actions, stores and sources for [alt.js](http://alt.js.org))
+- [Generator-React-Webpack-Redux](https://github.com/stylesuxx/generator-react-webpack-redux) (Adds ability to create actions and reducers for [Redux](https://github.com/rackt/redux))
 
 ---
 
 ## Installation
 ```bash
+# Make sure both is installed globally
 npm install -g yo
-npm install generator-react-webpack
+npm install -g generator-react-webpack
 ```
 
 ## Setting up projects
@@ -51,6 +57,36 @@ yo react-webpack:component my/namespaced/components/name
 
 The above command will create a new component, as well as its stylesheet and a basic testcase.
 
+## Generating new stateless functional components
+```
+yo react-webpack:component my/namespaced/components/name --stateless
+```
+
+Stateless functional components where introduced in React v0.14. They have a much shorter syntax than regular ones and no state or lifecycle methods at all. Please read the [React 0.14 release notes](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html) to get more information about those components.
+
+___Note___: You will still be able to set properties for stateless components!
+
+## Adding PostCSS plugins
+If you have enabled [PostCSS](https://github.com/postcss/postcss) at generation time, install your PostCSS plugins via npm and *require* it in **postcss** function in *cfg/base.js*.
+
+Example for autoprefixer:
+```bash
+cd my-new-project
+npm install autoprefixer
+```
+Require in *cfg/base.js*
+```JavaScript
+...
+postcss: function () {
+  return [
+    require('autoprefixer')({
+      browsers: ['last 2 versions', 'ie >= 8']
+    })
+  ];
+}
+...
+```
+
 ## Usage
 The following commands are available in your project:
 ```bash

generators/app/index.js

@@ -4,6 +4,7 @@ let utils = require('../../utils/all');
 let prompts = require('./prompts');
 let path = require('path');
 let fs = require('fs');
+const packageInfo = require('../../package.json');
 
 // Set the base root directory for our files
 let baseRootPath = path.dirname(require.resolve('react-webpack-template'));
@@ -46,11 +47,17 @@ module.exports = generator.Base.extend({
       // Set needed global vars for yo
       this.appName = props.appName;
       this.style = props.style;
+      this.postcss = props.postcss
+      this.generatedWithVersion = packageInfo.version.split('.').unshift();
 
       // Set needed keys into config
       this.config.set('appName', this.appName);
       this.config.set('appPath', this.appPath);
       this.config.set('style', this.style);
+      this.config.set('postcss', this.postcss);
+      this.config.set('generatedWithVersion', this.generatedWithVersion);
+
+      this.config.save();
 
       done();
     }.bind(this));
@@ -79,7 +86,16 @@ module.exports = generator.Base.extend({
     if(styleConfig && styleConfig.packages) {
 
       for(let dependency of styleConfig.packages) {
-        packageSettings.dependencies[dependency.name] = dependency.version;
+        packageSettings.devDependencies[dependency.name] = dependency.version;
+      }
+    }
+
+    // Add postcss module if enabled
+    let postcssConfig = utils.config.getChoiceByKey('postcss', 'postcss');
+    if(this.postcss && postcssConfig && postcssConfig.packages) {
+
+      for(let dependency of postcssConfig.packages) {
+        packageSettings.devDependencies[dependency.name] = dependency.version;
       }
     }
 
@@ -89,10 +105,12 @@ module.exports = generator.Base.extend({
   writing: function() {
 
     let excludeList = [
-      'LICENCE',
+      'LICENSE',
       'README.md',
+      'CHANGELOG.md',
       'node_modules',
-      'package.json'
+      'package.json',
+      '.travis.yml'
     ];
 
     // Get all files in our repo and copy the ones we should
@@ -110,13 +128,22 @@ module.exports = generator.Base.extend({
         if(fs.lstatSync(fullPath).isDirectory()) {
           this.bulkDirectory(item, item);
         } else {
-          this.copy(item, item);
+          if (item === '.npmignore') {
+            this.copy(item, '.gitignore');
+          } else {
+            this.copy(item, item);
+          }
         }
       }
     });
   },
 
   install: function() {
+    if(this.postcss) {
+      let postcss = require('./postcss');
+      postcss.write(path.join(this.destinationRoot(), 'cfg/defaults.js'));
+    }
+
     if(!this.options['skip-install']) {
       this.installDependencies({ bower: false });
     }

generators/app/postcss.js

@@ -0,0 +1,39 @@
+'use strict';
+let fs = require('fs');
+let esprima = require('esprima');
+let walk = require('esprima-walk');
+let escodegen = require('escodegen');
+
+module.exports = {
+  write: function(path) {
+    let baseConfigPath = path;
+    let cssDialects = ['/\\.css$/', '/\\.sass/', '/\\.scss/', '/\\.less/', '/\\.styl/'];
+
+    let postcss = 'var postcss = { postcss: function() { return []; } }';
+    postcss = esprima.parse(postcss);
+    postcss = postcss.body[0].declarations[0].init.properties[0];
+
+    let data = fs.readFileSync(baseConfigPath, 'utf8');
+    let parsed = esprima.parse(data);
+
+    walk.walkAddParent(parsed, function(node) {
+      if(node.type === 'AssignmentExpression' && node.left.object.name === 'module') {
+        node.right.properties.push(postcss);
+      }
+
+      if(node.type === 'Property' && node.key.name === 'test') {
+        if(cssDialects.indexOf(node.value.raw) > -1) {
+          let current = node.parent.properties[1].value.value;
+          let position = current.split('!', 2).join('!').length;
+          current = [current.slice(0, position), '!postcss-loader', current.slice(position)].join('');
+
+          node.parent.properties[1].value.value = current;
+        }
+      }
+    });
+
+    let options = { format: { indent: { style: '  ' } } };
+    let code = escodegen.generate(parsed, options);
+    fs.writeFileSync(baseConfigPath, code, 'utf8');
+  }
+}

generators/app/prompts.js

@@ -1,5 +1,5 @@
 'use strict';
-let utils = require('../../utils/all');
+const utils = require('../../utils/all');
 
 module.exports = [
   {
@@ -11,8 +11,14 @@ module.exports = [
   {
     type: 'list',
     name: 'style',
-    message: 'Which styles language you want to use?',
+    message: 'Which style language do you want to use?',
     choices: utils.config.getChoices('style'),
     default: utils.config.getDefaultChoice('style')
+  },
+  {
+    type: 'confirm',
+    name: 'postcss',
+    message: 'Enable postcss?',
+    default: false
   }
 ];

generators/component/index.js

@@ -2,15 +2,21 @@
 let generator = require('yeoman-generator');
 let utils = require('../../utils/all');
 
-module.exports = generator.NamedBase.extend({
+module.exports = generator.Base.extend({
 
   constructor: function() {
-    generator.NamedBase.apply(this, arguments);
+    generator.Base.apply(this, arguments);
+    this.argument('name', { type: String, required: true });
+    this.option('stateless', {
+      desc: 'Create a stateless component instead of a full one',
+      defaults: false
+    });
   },
 
   writing: function() {
 
     let settings = utils.yeoman.getAllSettingsFromComponentName(this.name, this.config.get('style'));
+    let componentType = this.options.stateless ? 'Stateless' : 'Base';
 
     // Create the style template
     this.fs.copyTpl(
@@ -21,7 +27,7 @@ module.exports = generator.NamedBase.extend({
 
     // Create the component
     this.fs.copyTpl(
-      this.templatePath('components/Base.js'),
+      this.templatePath(`components/${componentType}.js`),
       this.destinationPath(settings.component.path + settings.component.fileName),
       settings
     );

generators/component/templates/components/Base.js

@@ -14,6 +14,8 @@ class <%= component.className %> extends React.Component {
   }
 }
 
+<%= component.className %>.displayName = '<%= component.displayName %>';
+
 // Uncomment properties you need
 // <%= component.className %>.propTypes = {};
 // <%= component.className %>.defaultProps = {};

generators/component/templates/components/Stateless.js

@@ -0,0 +1,19 @@
+'use strict';
+
+import React from 'react';
+
+require('<%= style.webpackPath %>');
+
+let <%= component.className %> = (props) => (
+  <div className="<%= style.className %>">
+    Please edit <%= component.path %>/<%= component.fileName %> to update this component!
+  </div>
+);
+
+<%= component.className %>.displayName = '<%= component.displayName %>';
+
+// Uncomment properties you need
+// <%= component.className %>.propTypes = {};
+// <%= component.className %>.defaultProps = {};
+
+export default <%= component.className %>;

generators/component/templates/tests/Base.js

@@ -1,6 +1,6 @@
-/*eslint-env node, mocha */
+/* eslint-env node, mocha */
-/*global expect */
+/* global expect */
-/*eslint no-console: 0*/
+/* eslint no-console: 0 */
 'use strict';
 
 // Uncomment the following lines to use the react test utilities
@@ -10,13 +10,13 @@ import createComponent from 'helpers/shallowRenderHelper';
 import <%= component.className %> from '<%= component.webpackPath %>';
 
 describe('<%= component.className %>', () => {
-    let component;
+  let component;
 
-    beforeEach(() => {
+  beforeEach(() => {
-      component = createComponent(<%= component.className %>);
+    component = createComponent(<%= component.className %>);
-    });
+  });
 
-    it('should have its component name as default className', () => {
+  it('should have its component name as default className', () => {
-      expect(component.props.className).to.equal('<%= style.className %>');
+    expect(component.props.className).to.equal('<%= style.className %>');
-    });
+  });
 });

jsconfig.json

@@ -0,0 +1,7 @@
+//Support for Visual Studio Code https://code.visualstudio.com/docs/languages/javascript
+{
+	"compilerOptions": {
+		"target": "ES6",
+		"module": "commonjs"
+	}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-react-webpack",
-  "version": "2.2.0",
+  "version": "3.3.0",
   "description": "Yeoman generator for using React with Webpack via Babel",
   "keywords": [
     "yeoman-generator",
@@ -34,17 +34,25 @@
     "url": "git://github.com/newtriks/generator-react-webpack.git"
   },
   "scripts": {
-    "test": "mocha"
+    "test": "mocha",
+    "release:major": "npm version major && npm publish && git push --follow-tags",
+    "release:minor": "npm version minor && npm publish && git push --follow-tags",
+    "release:patch": "npm version patch && npm publish && git push --follow-tags"
   },
   "dependencies": {
-    "react-webpack-template": "^0.2.0",
+    "react-webpack-template": "^1.0.0",
     "underscore.string": "^3.2.2",
-    "yeoman-generator": "^0.20.3",
+    "yeoman-generator": "^0.22.0",
-    "yeoman-welcome": "^1.0.1"
+    "yeoman-welcome": "^1.0.1",
+    "esprima": "^2.7.0",
+    "esprima-walk": "^0.1.0",
+    "escodegen": "^1.7.0"
   },
   "devDependencies": {
     "chai": "^3.2.0",
-    "mocha": "^2.3.2"
+    "mocha": "^2.3.2",
+    "yeoman-assert": "^2.1.1",
+    "yeoman-test": "^1.0.0"
   },
   "engines": {
     "node": ">=4.0.0",

test/generators/app/indexTest.js

@@ -1,40 +1,58 @@
 'use strict';
 let path = require('path');
 let expect = require('chai').expect;
-let assert = require('yeoman-generator').assert;
+let assert = require('yeoman-assert');
-let helpers = require('yeoman-generator').test
+let helpers = require('yeoman-test');
+
+// Default globals, used in all tests
+const defaultPrompts = require('../../../generators/app/prompts.js');
+let generator;
+const generatorBase = path.join(__dirname, '../../../generators/app');
+
+/**
+ * Global before load function. Run in the before callbacks
+ * @param  {Object}   prompts List of prompts to use
+ * @param  {Function} done    Done callback
+ */
+const beforeLoad = (prompts, done) => {
+
+  helpers.run(generatorBase)
+    .inTmpDir()
+    .withOptions({
+      'skip-welcome-message': true,
+      'skip-install': true
+    })
+    .withPrompts(prompts)
+    .on('ready', (instance) => {
+      generator = instance;
+    })
+    .on('end', done);
+};
 
 describe('react-webpack:app', () => {
 
-  let defaultPrompts = require('../../../generators/app/prompts.js');
   let prompts = {};
   for(let p of defaultPrompts) {
     prompts[p.name] = p.default;
   }
 
-  let generator;
-  let generatorBase = path.join(__dirname, '../../../generators/app');
-
   before((done) => {
-
+    beforeLoad(prompts, done);
-    helpers.run(generatorBase)
-      .inTmpDir()
-      .withOptions({
-        'skip-welcome-message': true,
-        'skip-install': true
-      })
-      .withPrompts(prompts)
-      .on('ready', (instance) => {
-        generator = instance;
-      })
-      .on('end', done);
   });
 
   describe('#config', () => {
 
+    it('should set the generatedWith key to the current generator major version', () => {
+      expect(generator.config.get('generatedWithVersion')).to.equal(3);
+    });
+
     it('should use "css" as default style language', () => {
       expect(generator.config.get('style')).to.equal('css');
     });
+
+    it('should not enable "PostCSS" by default', () => {
+      expect(generator.config.get('postcss')).to.equal(false);
+    });
   });
 
   describe('#createFiles', () => {
@@ -42,9 +60,10 @@ describe('react-webpack:app', () => {
     it('should generate dot files', () => {
 
       assert.file([
+        '.babelrc',
         '.editorconfig',
         '.eslintrc',
-        '.npmignore',
+        '.gitignore',
         '.yo-rc.json'
       ]);
     });
@@ -52,7 +71,6 @@ describe('react-webpack:app', () => {
     it('should generate project configuration files', () => {
 
       assert.file([
-        'LICENSE',
         'package.json'
       ]);
     });
@@ -61,6 +79,7 @@ describe('react-webpack:app', () => {
 
       assert.file([
         'cfg/base.js',
+        'cfg/defaults.js',
         'cfg/dev.js',
         'cfg/dist.js',
         'cfg/test.js',
@@ -73,8 +92,110 @@ describe('react-webpack:app', () => {
 
       assert.file([
         'src/actions/README.md',
+        'src/index.js',
+        'src/components/Main.js',
+        'src/favicon.ico',
+        'src/images/yeoman.png',
+        'src/index.html',
+        'src/sources/README.md',
+        'src/stores/README.md',
+        'src/styles/App.css'
+      ]);
+    });
+
+    it('should generate test configuration and basic tests', () => {
+
+      assert.file([
+        'karma.conf.js',
+        'test/components/MainTest.js',
+        'test/helpers/shallowRenderHelper.js',
+        'test/loadtests.js'
+      ]);
+    });
+  });
+});
+
+describe('react-webpack:app with PostCSS support', () => {
+
+  let prompts = {};
+  for(let p of defaultPrompts) {
+    prompts[p.name] = p.default;
+  }
+
+  prompts.postcss = true;
+
+  before((done) => {
+    beforeLoad(prompts, done);
+  });
+
+  describe('#config', () => {
+
+    it('should set the generatedWith key to the current generator major version', () => {
+      expect(generator.config.get('generatedWithVersion')).to.equal(3);
+    });
+
+    it('should use "css" as default style language', () => {
+      expect(generator.config.get('style')).to.equal('css');
+    });
+
+    it('should enable "PostCSS"', () => {
+      expect(generator.config.get('postcss')).to.equal(true);
+    });
+  });
+
+  describe('#createFiles', () => {
+
+    it('should generate dot files', () => {
+
+      assert.file([
+        '.babelrc',
+        '.editorconfig',
+        '.eslintrc',
+        '.gitignore',
+        '.yo-rc.json'
+      ]);
+    });
+
+    it('should generate project configuration files', () => {
+
+      assert.file([
+        'package.json'
+      ]);
+    });
+
+    it('should generate the webpack configuration', () => {
+
+      assert.file([
+        'cfg/base.js',
+        'cfg/defaults.js',
+        'cfg/dev.js',
+        'cfg/dist.js',
+        'cfg/test.js',
+        'server.js',
+        'webpack.config.js'
+      ]);
+    });
+
+    it('should insert the postcss loader into the style pipes', () => {
+
+      assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader\'');
+      assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded&indentedSyntax\'');
+      assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded\'');
+      assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!less-loader\'');
+      assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!stylus-loader\'');
+    });
+
+    it('should append the postcss function to the base config', () => {
+
+      assert.fileContent('cfg/defaults.js', ',\n  postcss: function () {\n    return [];\n  }');
+    });
+
+    it('should generate required source files', () => {
+
+      assert.file([
+        'src/actions/README.md',
+        'src/index.js',
         'src/components/Main.js',
-        'src/components/run.js',
         'src/favicon.ico',
         'src/images/yeoman.png',
         'src/index.html',

test/generators/component/indexTest.js

@@ -1,283 +1,181 @@
 'use strict';
 let path = require('path');
-let assert = require('yeoman-generator').assert;
+let assert = require('yeoman-assert');
-let helpers = require('yeoman-generator').test
+let helpers = require('yeoman-test');
 
 describe('react-webpack:component', () => {
 
   let generatorComponent = path.join(__dirname, '../../../generators/component');
 
+  // List of available style types. Please add a line that says
+  // testComponentWithStyle(styleTypes.KEY); to the bottom of the file
+  // to run all unit tests for this filetype.
+  const styleTypes = {
+    css: {
+      type: 'css',
+      fileName: 'src/styles/Mycomponent.css',
+      expandedFileName: 'src/styles/my/littleSpecial/Test.css',
+      assertions: {
+        componentImport: 'require(\'styles//Mycomponent.css\');',
+        styleContent: '.mycomponent-component'
+      }
+    },
+    sass: {
+      type: 'sass',
+      fileName: 'src/styles/Mycomponent.sass',
+      expandedFileName: 'src/styles/my/littleSpecial/Test.sass',
+      assertions: {
+        componentImport: 'require(\'styles//Mycomponent.sass\');',
+        styleContent: '.mycomponent-component'
+      }
+    },
+    scss: {
+      type: 'scss',
+      fileName: 'src/styles/Mycomponent.scss',
+      expandedFileName: 'src/styles/my/littleSpecial/Test.scss',
+      assertions: {
+        componentImport: 'require(\'styles//Mycomponent.scss\');',
+        styleContent: '.mycomponent-component'
+      }
+    },
+    less: {
+      type: 'less',
+      fileName: 'src/styles/Mycomponent.less',
+      expandedFileName: 'src/styles/my/littleSpecial/Test.less',
+      assertions: {
+        componentImport: 'require(\'styles//Mycomponent.less\');',
+        styleContent: '.mycomponent-component'
+      }
+    },
+    stylus: {
+      type: 'stylus',
+      fileName: 'src/styles/Mycomponent.styl',
+      expandedFileName: 'src/styles/my/littleSpecial/Test.styl',
+      assertions: {
+        componentImport: 'require(\'styles//Mycomponent.styl\');',
+        styleContent: '.mycomponent-component'
+      }
+    }
+  };
+
   /**
    * Return a newly generated component with given name and style
-   * @param {String} name
+   * @param {String} name Name of the component
-   * @param {String} styleType
+   * @param {String} styleType Styling language to use
-   * @param {Function} callback
+   * @param {Object} options Options to use for the generator
+   * @param {Function} callback Test callback to run
    */
-  function createGeneratedComponent(name, styleType, callback) {
+  function createGeneratedComponent(name, styleType, options, callback) {
     helpers.run(generatorComponent)
       .withArguments([name])
+      .withOptions(options)
       .on('ready', (instance) => {
         instance.config.set('style', styleType);
       })
       .on('end', callback);
   }
 
-  describe('When using style type "css"', () => {
+  /**
+   * Test a component with styling applied
+   * @param {Object} style The style to apply (see styleTypes above)
+   * @param {Object} options Options to use [optional]
+   */
+  function testComponentWithStyle(style, options) {
 
-    describe('Setup', () => {
+    // Make sure we always have options
+    if(!options) {
+      options = {};
+    }
 
-      it('should create the react component, its stylesheet and test file', (done) => {
+    describe(`When using style type "${style.type}"`, () => {
-        createGeneratedComponent('mycomponent', 'css', () => {
 
-          assert.file([
+      describe('When writing is called', () => {
-            'src/components/MycomponentComponent.js',
+
-            'src/styles/Mycomponent.css',
+        it(`should create the react component, its ${style.type}-stylesheet and test file`, (done) => {
-            'test/components/MycomponentComponentTest.js'
+          createGeneratedComponent('mycomponent', style.type, options, () => {
-          ]);
+
-          done();
+            assert.file([
+              'src/components/MycomponentComponent.js',
+              style.fileName,
+              'test/components/MycomponentComponentTest.js'
+            ]);
+            done();
+          });
+        });
+      });
+
+      describe('When creating a component', () => {
+
+        it('should always import REACT', (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+            assert.fileContent('src/components/MycomponentComponent.js', `import React from 'react';`);
+            done();
+          });
+        });
+
+        it(`should require the created ${style.type} file`, (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+            assert.fileContent('src/components/MycomponentComponent.js', style.assertions.componentImport);
+            done();
+          });
+        });
+
+        it('should have its displayName set per default', (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+            assert.fileContent('src/components/MycomponentComponent.js', `displayName = 'MycomponentComponent';`);
+            done();
+          });
+        });
+
+        it('should export the created component', (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+            assert.fileContent('src/components/MycomponentComponent.js', `export default MycomponentComponent`);
+            done();
+          });
+        });
+
+        it(`should be possible to create components in a subfolder`, (done) => {
+          createGeneratedComponent('my/little !special/test', style.type, options, () => {
+
+            assert.file([
+              'src/components/my/littleSpecial/TestComponent.js',
+              style.expandedFileName,
+              'test/components/my/littleSpecial/TestComponentTest.js'
+            ]);
+            done();
+          });
+        });
+      });
+
+      describe('Style', () => {
+
+        it(`should add the components ${style.type} class to the stylesheet`, (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+            assert.fileContent(style.fileName, style.assertions.styleContent);
+            done();
+          });
+        });
+      });
+
+      describe('Test', () => {
+
+        it('should import the react component', (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+            assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
+            done();
+          });
         });
       });
     });
+  }
 
-    describe('Component', () => {
+  // Run all tests for all available style types.
-
+  testComponentWithStyle(styleTypes.css);
-      it('should require the created css file', (done) => {
+  testComponentWithStyle(styleTypes.sass);
-        createGeneratedComponent('mycomponent', 'css', () => {
+  testComponentWithStyle(styleTypes.scss);
-          assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.css\');');
+  testComponentWithStyle(styleTypes.less);
-          done();
+  testComponentWithStyle(styleTypes.stylus);
-        });
-      });
-    });
-
-    describe('Style', () => {
-
-      it('should add the components css class to the stylesheet', (done) => {
-        createGeneratedComponent('mycomponent', 'css', () => {
-          assert.fileContent('src/styles/Mycomponent.css', '.mycomponent-component');
-          done();
-        });
-      });
-    });
-
-    describe('Test', () => {
-
-      it('should import the react component', (done) => {
-        createGeneratedComponent('mycomponent', 'css', () => {
-          assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
-          done();
-        });
-      });
-    });
-  }); // End css
-
-  describe('When creating a component in a subfolder', () => {
-
-    describe('Setup', () => {
-
-      it('should create the react component, its stylesheet and test file', (done) => {
-        createGeneratedComponent('my/little !special/test', 'css', () => {
-
-          assert.file([
-            'src/components/my/littleSpecial/TestComponent.js',
-            'src/styles/my/littleSpecial/Test.css',
-            'test/components/my/littleSpecial/TestComponentTest.js'
-          ]);
-          done();
-        });
-      });
-    });
-  }); // End css (subfolder)
-
-  describe('When using style type "sass"', () => {
-
-    describe('Setup', () => {
-
-      it('should create the react component, its stylesheet and test file', (done) => {
-        createGeneratedComponent('mycomponent', 'sass', () => {
-
-          assert.file([
-            'src/components/MycomponentComponent.js',
-            'src/styles/Mycomponent.sass',
-            'test/components/MycomponentComponentTest.js'
-          ]);
-          done();
-        });
-      });
-    });
-
-    describe('Component', () => {
-
-      it('should require the created sass file', (done) => {
-        createGeneratedComponent('mycomponent', 'sass', () => {
-          assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.sass\');');
-          done();
-        });
-      });
-    });
-
-    describe('Style', () => {
-
-      it('should add the components sass class to the stylesheet', (done) => {
-        createGeneratedComponent('mycomponent', 'sass', () => {
-          assert.fileContent('src/styles/Mycomponent.sass', '.mycomponent-component');
-          done();
-        });
-      });
-    });
-
-    describe('Test', () => {
-
-      it('should import the react component', (done) => {
-        createGeneratedComponent('mycomponent', 'sass', () => {
-          assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
-          done();
-        });
-      });
-    });
-  }); // End sass
-
-  describe('When using style type "scss"', () => {
-
-    describe('Setup', () => {
-
-      it('should create the react component, its stylesheet and test file', (done) => {
-        createGeneratedComponent('mycomponent', 'scss', () => {
-
-          assert.file([
-            'src/components/MycomponentComponent.js',
-            'src/styles/Mycomponent.scss',
-            'test/components/MycomponentComponentTest.js'
-          ]);
-          done();
-        });
-      });
-    });
-
-    describe('Component', () => {
-
-      it('should require the created scss file', (done) => {
-        createGeneratedComponent('mycomponent', 'scss', () => {
-          assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.scss\');');
-          done();
-        });
-      });
-    });
-
-    describe('Style', () => {
-
-      it('should add the components scss class to the stylesheet', (done) => {
-        createGeneratedComponent('mycomponent', 'scss', () => {
-          assert.fileContent('src/styles/Mycomponent.scss', '.mycomponent-component');
-          done();
-        });
-      });
-    });
-
-    describe('Test', () => {
-
-      it('should import the react component', (done) => {
-        createGeneratedComponent('mycomponent', 'scss', () => {
-          assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
-          done();
-        });
-      });
-    });
-  }); // End scss
-
-  describe('When using style type "less"', () => {
-
-    describe('Setup', () => {
-
-      it('should create the react component, its stylesheet and test file', (done) => {
-        createGeneratedComponent('mycomponent', 'less', () => {
-
-          assert.file([
-            'src/components/MycomponentComponent.js',
-            'src/styles/Mycomponent.less',
-            'test/components/MycomponentComponentTest.js'
-          ]);
-          done();
-        });
-      });
-    });
-
-    describe('Component', () => {
-
-      it('should require the created less file', (done) => {
-        createGeneratedComponent('mycomponent', 'less', () => {
-          assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.less\');');
-          done();
-        });
-      });
-    });
-
-    describe('Style', () => {
-
-      it('should add the components less class to the stylesheet', (done) => {
-        createGeneratedComponent('mycomponent', 'less', () => {
-          assert.fileContent('src/styles/Mycomponent.less', '.mycomponent-component');
-          done();
-        });
-      });
-    });
-
-    describe('Test', () => {
-
-      it('should import the react component', (done) => {
-        createGeneratedComponent('mycomponent', 'less', () => {
-          assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
-          done();
-        });
-      });
-    });
-  }); // End less
-
-  describe('When using style type "stylus"', () => {
-
-    describe('Setup', () => {
-
-      it('should create the react component, its stylesheet and test file', (done) => {
-        createGeneratedComponent('mycomponent', 'stylus', () => {
-
-          assert.file([
-            'src/components/MycomponentComponent.js',
-            'src/styles/Mycomponent.styl',
-            'test/components/MycomponentComponentTest.js'
-          ]);
-          done();
-        });
-      });
-    });
-
-    describe('Component', () => {
-
-      it('should require the created stylus file', (done) => {
-        createGeneratedComponent('mycomponent', 'stylus', () => {
-          assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.styl\');');
-          done();
-        });
-      });
-    });
-
-    describe('Style', () => {
-
-      it('should add the components stylus class to the stylesheet', (done) => {
-        createGeneratedComponent('mycomponent', 'stylus', () => {
-          assert.fileContent('src/styles/Mycomponent.styl', '.mycomponent-component');
-          done();
-        });
-      });
-    });
-
-    describe('Test', () => {
-
-      it('should import the react component', (done) => {
-        createGeneratedComponent('mycomponent', 'less', () => {
-          assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
-          done();
-        });
-      });
-    });
-  }); // End stylus
 
+  // Test stateless components (should be enough when testing with defaults)
+  testComponentWithStyle(styleTypes.css, { stateless: true });
 });

test/utils/yeomanTest.js

@@ -82,6 +82,7 @@ describe('Utilities:Yeoman', () => {
           path: 'src/components/my/component/',
           fileName: 'TestComponent.js',
           className: 'TestComponent',
+          displayName: 'MyComponentTestComponent',
           suffix: '.js'
         },
         test: {

utils/all.js

@@ -1,9 +1,9 @@
 'use strict';
 
-let config = require('./config');
+const config = require('./config');
-let yeoman = require('./yeoman');
+const yeoman = require('./yeoman');
 
 module.exports = {
-  config: config,
+  config,
-  yeoman: yeoman
+  yeoman
 };

utils/config.js

@@ -57,12 +57,9 @@ let getDefaultChoice = (setting) => {
   return config && config.default !== undefined && config.default.length > 0 ? config.default : null;
 }
 
-// getChoices
-// getDefault
-
 module.exports = {
-  getSetting: getSetting,
+  getSetting,
-  getChoices: getChoices,
+  getChoices,
-  getChoiceByKey: getChoiceByKey,
+  getChoiceByKey,
-  getDefaultChoice: getDefaultChoice
+  getDefaultChoice
 };

utils/configopts.json

@@ -39,6 +39,18 @@
       }
     ]
   },
+  "postcss": {
+    "options": [
+      {
+        "name": "postcss",
+        "value": "postcss",
+        "packages": [
+          { "name": "postcss", "version": "^5.0.11" },
+          { "name": "postcss-loader", "version": "^0.8.0" }
+        ]
+      }
+    ]
+  },
   "style": {
     "options": [
       {
@@ -51,7 +63,8 @@
         "value": "sass",
         "suffix": ".sass",
         "packages": [
-          { "name": "sass-loader", "version": "^1.0.1" }
+          { "name": "sass-loader", "version": "^3.1.2" },
+          { "name": "node-sass", "version": "^3.4.2" }
         ]
       },
       {
@@ -59,7 +72,8 @@
         "value": "scss",
         "suffix": ".scss",
         "packages": [
-          { "name": "sass-loader", "version": "^1.0.1" }
+          { "name": "sass-loader", "version": "^3.1.2" },
+          { "name": "node-sass", "version": "^3.4.2" }
         ]
       },
       {
@@ -67,7 +81,8 @@
         "value": "less",
         "suffix": ".less",
         "packages": [
-          { "name": "less-loader", "version": "^2.0.0" }
+          { "name": "less-loader", "version": "^2.0.0" },
+          { "name": "less", "version": "^2.5.3" }
         ]
       },
       {
@@ -75,7 +90,9 @@
         "value": "stylus",
         "suffix": ".styl",
         "packages": [
-          { "name": "stylus-loader", "version": "^0.5.0" }
+          { "name": "stylus-loader", "version": "^0.5.0" },
+          { "name": "stylus", "version": "~0.49.2" },
+          { "name": "nib", "version": "~1.0.4" }
         ]
       }
     ],

utils/yeoman.js

@@ -1,8 +1,8 @@
 'use strict';
 
-let path = require('path');
+const path = require('path');
-let configUtils = require('./config');
+const configUtils = require('./config');
-let _ = require('underscore.string');
+const _ = require('underscore.string');
 
 // Needed directory paths
 const baseName = path.basename(process.cwd());
@@ -33,6 +33,9 @@ let getAllSettingsFromComponentName = (componentName, style) => {
   let componentBaseName = _.capitalize(componentParts.pop());
   let componentPartPath = componentParts.join('/');
 
+  // Get the components displayName property
+  let componentFullName = _.classify(_.replaceAll(componentName, '/', '_'));
+
   // Configure Styles
   let stylePaths = configUtils.getChoiceByKey('path', 'style');
   let styleSettings = configUtils.getChoiceByKey('style', style);
@@ -56,6 +59,7 @@ let getAllSettingsFromComponentName = (componentName, style) => {
       path: `${componentPath.path}/${componentPartPath}/`,
       fileName: `${componentBaseName}Component.js`,
       className: `${componentBaseName}Component`,
+      displayName: `${componentFullName}Component`,
       suffix: '.js'
     },
     test: {
@@ -153,11 +157,11 @@ let getDestinationClassName = (name, type, suffix) => {
 };
 
 module.exports = {
-  getBaseDir: getBaseDir,
+  getBaseDir,
-  getAllSettingsFromComponentName: getAllSettingsFromComponentName,
+  getAllSettingsFromComponentName,
-  getAppName: getAppName,
+  getAppName,
-  getCleanedPathName: getCleanedPathName,
+  getCleanedPathName,
-  getComponentStyleName: getComponentStyleName,
+  getComponentStyleName,
-  getDestinationPath: getDestinationPath,
+  getDestinationPath,
-  getDestinationClassName: getDestinationClassName
+  getDestinationClassName
 };