2.2.7

Cleaned up unittests

.gitignore

@@ -13,3 +13,4 @@ $RECYCLE.BIN/
 node_modules/
 npm-debug.log
 .idea/
+test/temp-test

CHANGELOG.md

@@ -0,0 +1,28 @@
+# generator-react-webpack - Changelog
+
+## 2.2.6
+___Upgrades___:
+
+1. Added new version of ```react-webpack-template``` (provides new features for continuous testing and better dist build support)
+
+## 2.2.5
+___Upgrades:___
+
+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
+___Upgrades:___
+
+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
+___Fixes:___
+
+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,6 @@
-# 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)  [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)
+# 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.
 
@@ -13,20 +15,24 @@ Out of the box it comes with support for:
 - Ability to unit test components via Karma and Mocha/Chai
 
 ## Changes in Version 2.0
-The new version of generator-react-webpack does __NOT__ include support for Flux-Frameworks directly. Instead, we will use it as a base to provide own generators that use it as a base. This will make the base generator easier to use and update.
+This generator is written in ES2015. This means it is ___not compatible with node.js versions before 4.0___.
 
-Currently, there are no stable flux implementation based on generator-react-webpack v2. We are working on an implementation for alt.js.
+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.
 
 If you are interested, feel free to write your own generator and use generator-react-webpack as a base (via composition).
 
-If you have build a generator using generator-react-webpack, tell us and we will add a link to our README.
+If you have built a generator using generator-react-webpack, tell us and we will add a link to our README.
+
+## 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))
 
 ---
 
 ## 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
@@ -49,6 +55,15 @@ 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!
+
 ## Usage
 The following commands are available in your project:
 ```bash
@@ -82,13 +97,9 @@ We have opted to follow [@floydophone](https://twitter.com/floydophone) conventi
 Each component is a module and can be required using the [Webpack](http://webpack.github.io/) module system. [Webpack](http://webpack.github.io/) uses [Loaders](http://webpack.github.io/docs/loaders.html) which means you can also require CSS and a host of other file types. Read the [Webpack documentation](http://webpack.github.io/docs/home.html) to find out more.
 
 ## Props
-
+Thanks to [Edd Hannay](https://github.com/eddhannay) for his Webpack optimisations, my local merge and testing meant his additions lost his signature (my fault, sorry). So, big thanks Edd.
-Thanks to all who contributed to [generator-angular](https://github.com/yeoman/generator-angular) as the majority of code here has been shamelessy sourced from that repos.
-
-Thanks to [Edd Hannay](https://github.com/eddhannay) for his Webpack optimisations, my local merge and testing meant his additions lost his signature (my fault sorry) so big thanks Edd.
 
 ## Contribute
-
 Contributions are welcomed. When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.
 
 ### Running Tests
@@ -97,5 +108,3 @@ Contributions are welcomed. When submitting a bugfix, write a test that exposes
 ## License
 
 [BSD license](http://opensource.org/licenses/bsd-license.php)
-
-[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/newtriks/generator-react-webpack/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

generators/app/index.js

@@ -91,6 +91,7 @@ module.exports = generator.Base.extend({
     let excludeList = [
       'LICENCE',
       'README.md',
+      'CHANGELOG.md',
       'node_modules',
       'package.json'
     ];
@@ -110,6 +111,9 @@ module.exports = generator.Base.extend({
         if(fs.lstatSync(fullPath).isDirectory()) {
           this.bulkDirectory(item, item);
         } else {
+          if (item === '.npmignore') {
+            this.copy(item, '.gitignore');
+          }
           this.copy(item, item);
         }
       }

generators/component/index.js

@@ -6,11 +6,17 @@ module.exports = generator.NamedBase.extend({
 
   constructor: function() {
     generator.NamedBase.apply(this, arguments);
+
+    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

@@ -1,6 +1,6 @@
 'use strict';
 
-import React from 'react/addons';
+import React from 'react';
 
 require('<%= style.webpackPath %>');
 
@@ -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

@@ -4,8 +4,7 @@
 'use strict';
 
 // Uncomment the following lines to use the react test utilities
-// import React from 'react/addons';
+// import TestUtils from 'react-addons-test-utils';
-// const TestUtils = React.addons.TestUtils;
 import createComponent from 'helpers/shallowRenderHelper';
 
 import <%= component.className %> from '<%= component.webpackPath %>';
@@ -18,6 +17,6 @@ describe('<%= component.className %>', () => {
     });
 
     it('should have its component name as default className', () => {
-      expect(component._store.props.className).to.equal('<%= style.className %>');
+      expect(component.props.className).to.equal('<%= style.className %>');
     });
 });

package.json

@@ -1,14 +1,16 @@
 {
   "name": "generator-react-webpack",
-  "version": "2.0.2",
+  "version": "2.2.7",
-  "description": "Yeoman generator for ReactJS and Webpack",
+  "description": "Yeoman generator for using React with Webpack via Babel",
   "keywords": [
     "yeoman-generator",
+    "react",
     "reactjs",
     "webpack",
     "scaffold",
     "framework",
     "component",
+    "frontend",
     "front-end",
     "app"
   ],
@@ -35,9 +37,9 @@
     "test": "mocha"
   },
   "dependencies": {
-    "react-webpack-template": "^0.1.0",
+    "react-webpack-template": "^0.3.0",
     "underscore.string": "^3.2.2",
-    "yeoman-generator": "^0.20.3",
+    "yeoman-generator": "^0.21.0",
     "yeoman-welcome": "^1.0.1"
   },
   "devDependencies": {

test/generators/app/indexTest.js

@@ -44,6 +44,7 @@ describe('react-webpack:app', () => {
       assert.file([
         '.editorconfig',
         '.eslintrc',
+        '.gitignore',
         '.npmignore',
         '.yo-rc.json'
       ]);

test/generators/component/indexTest.js

@@ -7,277 +7,175 @@ 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: {
@@ -94,4 +95,27 @@ describe('Utilities:Yeoman', () => {
     });
   });
 
+  describe('#getDestinationPath', () => {
+
+    it('should return the correct filesystem path for all components', () => {
+
+      expect(utils.getDestinationPath('test', 'action', 'Actions')).to.equal('src/actions/TestActions.js');
+      expect(utils.getDestinationPath('subfolder/test', 'action', 'Actions')).to.equal('src/actions/subfolder/TestActions.js');
+
+      expect(utils.getDestinationPath('test', 'source', 'Source')).to.equal('src/sources/TestSource.js');
+      expect(utils.getDestinationPath('subfolder/test', 'source', 'Source')).to.equal('src/sources/subfolder/TestSource.js');
+
+      expect(utils.getDestinationPath('test', 'store', 'Store')).to.equal('src/stores/TestStore.js');
+      expect(utils.getDestinationPath('subfolder/test', 'store', 'Store')).to.equal('src/stores/subfolder/TestStore.js');
+    });
+  });
+
+  describe('#getDestinationClassName', () => {
+
+    it('should return the correct javascript class name for the given paths', () => {
+      expect(utils.getDestinationClassName('test', 'action', 'Actions')).to.equal('TestActions');
+      expect(utils.getDestinationClassName('test', 'source', 'Source')).to.equal('TestSource');
+      expect(utils.getDestinationClassName('test', 'store', 'Store')).to.equal('TestStore');
+    });
+  });
 });

utils/configopts.json

@@ -51,7 +51,8 @@
         "value": "sass",
         "suffix": ".sass",
         "packages": [
-          { "name": "sass-loader", "version": "^1.0.1" }
+          { "name": "sass-loader", "version": "^1.0.1" },
+          { "name": "node-sass", "version": "^3.3.3" }
         ]
       },
       {
@@ -59,7 +60,8 @@
         "value": "scss",
         "suffix": ".scss",
         "packages": [
-          { "name": "sass-loader", "version": "^1.0.1" }
+          { "name": "sass-loader", "version": "^1.0.1" },
+          { "name": "node-sass", "version": "^3.3.3" }
         ]
       },
       {
@@ -67,7 +69,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" }
         ]
       },
       {

utils/yeoman.js

@@ -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: {
@@ -113,10 +117,51 @@ let getAppName = (appName) => {
   return _.camelize(_.slugify(_.humanize(appName)));
 };
 
+/**
+ * Get the wanted destination path
+ * @param  {String} name Name of the file
+ * @param  {String} type The type to use (e.g. action, store, ...)
+ * @param  {Suffix} suffix The suffix to use for the file (e.g. Store, Actions, ...)
+ * @return {String} Final path
+ */
+let getDestinationPath = (name, type, suffix) => {
+
+  let cleanedPaths = getCleanedPathName(name, suffix);
+  let fsParts = cleanedPaths.split('/');
+  let actionBaseName = _.capitalize(fsParts.pop());
+  let partPath = fsParts.join('/');
+
+  let fsPath = configUtils.getChoiceByKey('path', type).path;
+
+  let parts = [ fsPath ];
+  if(partPath.length > 0) {
+    parts.push(partPath);
+  }
+  parts.push(actionBaseName);
+  let fullPath = parts.join('/');
+
+  return `${fullPath}.js`;
+};
+
+/**
+ * Get the destinations class name
+ * @param  {String} name Name of the file
+ * @param  {String} type The type to use (e.g. action, store, ...)
+ * @param  {Suffix} suffix The suffix to use for the file (e.g. Store, Actions, ...)
+ * @return {String} The javascript class name to use
+ */
+let getDestinationClassName = (name, type, suffix) => {
+
+  let fixedName = getDestinationPath(name, type, suffix);
+  return _.capitalize(fixedName.split('/').pop().split('.js')[0]);
+};
+
 module.exports = {
   getBaseDir: getBaseDir,
   getAllSettingsFromComponentName: getAllSettingsFromComponentName,
   getAppName: getAppName,
   getCleanedPathName: getCleanedPathName,
-  getComponentStyleName: getComponentStyleName
+  getComponentStyleName: getComponentStyleName,
+  getDestinationPath: getDestinationPath,
+  getDestinationClassName: getDestinationClassName
 };