Added new directory options for generated components (styles are now also generated in the components folder)

Added directory options fallbacks for version 3 and below
Prepared for inclusion of css modules

generators/app/index.js

@@ -54,6 +54,7 @@ class AppGenerator extends Generators.Base {
       // Set needed global vars for yo
       this.appName = answers.appName;
       this.style = answers.style;
+      this.cssmodules = answers.cssmodules;
       this.postcss = answers.postcss;
       this.generatedWithVersion = parseInt(packageInfo.version.split('.').shift(), 10);
 
@@ -61,6 +62,7 @@ class AppGenerator extends Generators.Base {
       this.config.set('appName', this.appName);
       this.config.set('appPath', this.appPath);
       this.config.set('style', this.style);
+      this.config.set('cssmodules', this.cssmodules);
       this.config.set('postcss', this.postcss);
       this.config.set('generatedWithVersion', this.generatedWithVersion);
     });

generators/app/prompts.js

@@ -15,6 +15,12 @@ module.exports = [
     choices: utils.config.getChoices('style'),
     default: utils.config.getDefaultChoice('style')
   },
+  {
+    type: 'confirm',
+    name: 'cssmodules',
+    message: 'Enable css module support? See https://github.com/gajus/react-css-modules for further info',
+    default: true
+  },
   {
     type: 'confirm',
     name: 'postcss',

generators/component/index.js

@@ -16,34 +16,34 @@ class ComponentGenerator extends Generators.Base {
 
   writing() {
 
-    let settings = utils.yeoman.getAllSettingsFromComponentName(this.name, this.config.get('style'));
-    let componentType = this.options.stateless ? 'Stateless' : 'Base';
-
     // Set the template base. If it cannot be guessed,
-    // use files from the default directory. If it cannot be
+    // use files from the default directory. In this case,
-    // guessed, assume we have something REALLY REALLY old here...
+    // assume we have something REALLY REALLY old here...
-    let templateBase = this.config.get('generatedWithVersion');
+    let generatorVersion = this.config.get('generatedWithVersion');
-    if(!templateBase) {
+    if(!generatorVersion) {
-      templateBase = 3;
+      generatorVersion = 3;
     }
 
+    const settings = utils.yeoman.getAllSettingsFromComponentName(this.name, this.config.get('style'), generatorVersion);
+    const componentType = this.options.stateless ? 'Stateless' : 'Base';
+
     // Create the style template
     this.fs.copyTpl(
-      this.templatePath(`${templateBase}/styles/Component${settings.style.suffix}`),
+      this.templatePath(`${generatorVersion}/styles/Component${settings.style.suffix}`),
       this.destinationPath(settings.style.path + settings.style.fileName),
       settings
     );
 
     // Create the component
     this.fs.copyTpl(
-      this.templatePath(`${templateBase}/components/${componentType}.js`),
+      this.templatePath(`${generatorVersion}/components/${componentType}.js`),
       this.destinationPath(settings.component.path + settings.component.fileName),
       settings
     );
 
     // Create the unit test
     this.fs.copyTpl(
-      this.templatePath(`${templateBase}/tests/Base.js`),
+      this.templatePath(`${generatorVersion}/tests/Base.js`),
       this.destinationPath(settings.test.path + settings.test.fileName),
       settings
     );

generators/component/templates/4/components/Base.js

@@ -4,6 +4,7 @@ import styles from '<%= style.webpackPath %>';
 
 @cssmodules(styles)
 class <%= component.className %> extends React.Component {
+  
   render() {
     return (
       <div className="<%= style.className %>" styleName="<%= style.className %>">

generators/component/templates/4/components/Stateless.js

@@ -5,7 +5,7 @@ import styles from '<%= style.webpackPath %>';
 function <%= component.className %>() {
 
   return (
-    <div className="<%= style.className %>">
+    <div className="<%= style.className %>" styleName="<%= style.className %>">
       Please edit <%= component.path %><%= component.fileName %> to update this component!
     </div>
   );

generators/component/templates/4/tests/Base.js

@@ -6,12 +6,12 @@ describe('<<%= component.className %> />', () => {
 
   let component;
   beforeEach(() => {
-    component = shallow(<%= component.className %>);
+    component = shallow(<<%= component.className %> />);
   });
 
   describe('when rendering the component', () => {
 
-    it('should have a className of "index"', () => {
+    it('should have a className of "<%= style.className %>"', () => {
       expect(component.hasClass('<%= style.className %>')).to.equal(true);
     });
   });

package.json

@@ -40,9 +40,9 @@
   "scripts": {
     "test": "mocha",
     "test:watch": "mocha -w",
-    "release:major": "npm version major && npm publish && git push --follow-tags",
+    "release:major": "npm version major && npm publish && git push --follow-tags --tag beta",
-    "release:minor": "npm version minor && npm publish && git push --follow-tags",
+    "release:minor": "npm version minor && npm publish && git push --follow-tags --tag beta",
-    "release:patch": "npm version patch && npm publish && git push --follow-tags"
+    "release:patch": "npm version patch && npm publish && git push --follow-tags --tag beta"
   },
   "dependencies": {
     "escodegen": "^1.7.0",

test/generators/app/indexTest.js

@@ -52,8 +52,12 @@ describe('react-webpack:app', () => {
       expect(generator.config.get('style')).to.equal('css');
     });
 
+    it('should use "css modules" per default', () => {
+      expect(generator.config.get('cssmodules')).to.be.true;
+    });
+
     it('should not enable "PostCSS" by default', () => {
-      expect(generator.config.get('postcss')).to.equal(false);
+      expect(generator.config.get('postcss')).to.be.false;
     });
   });
 

test/generators/component/indexTest.js

@@ -173,75 +173,72 @@ describe('react-webpack:component', () => {
     }
 
     // Run all tests for all available style types.
-    testComponentWithStyle(styleTypes.css);
+    // Stateless components will also be tested!
-    testComponentWithStyle(styleTypes.sass);
+    for(const style in styleTypes) {
-    testComponentWithStyle(styleTypes.scss);
+      testComponentWithStyle(styleTypes[style]);
-    testComponentWithStyle(styleTypes.less);
+      testComponentWithStyle(styleTypes[style], { stateless: true });
-    testComponentWithStyle(styleTypes.stylus);
+    }
-
-    // Test stateless components (should be enough when testing with defaults)
-    testComponentWithStyle(styleTypes.css, { stateless: true });
   });
 
   describe('when using version 4 of the generator', () => {
 
+    /**
+     * @var {yeoman.generator} generator
+     * Global generator instance, set by createGeneratedComponent
+     */
+    let generator;
+
     // 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',
+        fileName: 'src/components/mycomponent.cssmodule.css',
-        expandedFileName: 'src/styles/my/littleSpecial/Test.css',
+        expandedFileName: 'src/components/my/littleSpecial/test.cssmodule.css',
         assertions: {
-          componentImport: 'import styles from \'styles//Mycomponent.css\';',
+          componentImport: 'import styles from \'./mycomponent.cssmodule.css\';',
           styleContent: '.mycomponent-component'
         }
       },
       sass: {
         type: 'sass',
-        fileName: 'src/styles/Mycomponent.sass',
+        fileName: 'src/components/Mycomponent.cssmodule.sass',
-        expandedFileName: 'src/styles/my/littleSpecial/Test.sass',
+        expandedFileName: 'src/components/my/littleSpecial/test.cssmodule.sass',
         assertions: {
-          componentImport: 'import styles from \'styles//Mycomponent.sass\';',
+          componentImport: 'import styles from \'./mycomponent.cssmodule.sass\';',
           styleContent: '.mycomponent-component'
         }
       },
       scss: {
         type: 'scss',
-        fileName: 'src/styles/Mycomponent.scss',
+        fileName: 'src/components/mycomponent.cssmodule.scss',
-        expandedFileName: 'src/styles/my/littleSpecial/Test.scss',
+        expandedFileName: 'src/components/my/littleSpecial/test.cssmodule.scss',
         assertions: {
-          componentImport: 'import styles from \'styles//Mycomponent.scss\';',
+          componentImport: 'import styles from \'./mycomponent.cssmodule.scss\';',
           styleContent: '.mycomponent-component'
         }
       },
       less: {
         type: 'less',
-        fileName: 'src/styles/Mycomponent.less',
+        fileName: 'src/components/mycomponent.cssmodule.less',
-        expandedFileName: 'src/styles/my/littleSpecial/Test.less',
+        expandedFileName: 'src/components/my/littleSpecial/test.cssmodule.less',
         assertions: {
-          componentImport: 'import styles from \'styles//Mycomponent.less\';',
+          componentImport: 'import styles from \'./mycomponent.cssmodule.less\';',
           styleContent: '.mycomponent-component'
         }
       },
       stylus: {
         type: 'stylus',
-        fileName: 'src/styles/Mycomponent.styl',
+        fileName: 'src/components/mycomponent.cssmodule.styl',
-        expandedFileName: 'src/styles/my/littleSpecial/Test.styl',
+        expandedFileName: 'src/components/my/littleSpecial/test.cssmodule.styl',
         assertions: {
-          componentImport: 'import styles from \'styles//Mycomponent.styl\';',
+          componentImport: 'import styles from \'./mycomponent.cssmodule.styl\';',
           styleContent: '.mycomponent-component'
         }
       }
     };
 
-    /**
-     * @var {yeoman.generator} generator
-     * Global generator instance, set by createGeneratedComponent
-     */
-    let generator;
-
     /**
      * Return a newly generated component with given name and style
      * @param {String} name Name of the component
@@ -281,9 +278,9 @@ describe('react-webpack:component', () => {
             createGeneratedComponent('mycomponent', style.type, options, () => {
 
               assert.file([
-                'src/components/MycomponentComponent.js',
+                'src/components/Mycomponent.js',
                 style.fileName,
-                'test/components/MycomponentComponentTest.js'
+                'test/components/MycomponentTest.js'
               ]);
               done();
             });
@@ -294,21 +291,21 @@ describe('react-webpack:component', () => {
 
           it('should always import REACT', (done) => {
             createGeneratedComponent('mycomponent', style.type, options, () => {
-              assert.fileContent('src/components/MycomponentComponent.js', 'import React from \'react\';');
+              assert.fileContent('src/components/Mycomponent.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);
+              assert.fileContent('src/components/Mycomponent.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\';');
+              assert.fileContent('src/components/Mycomponent.js', 'Mycomponent.displayName = \'Mycomponent\';');
               done();
             });
           });
@@ -318,11 +315,11 @@ describe('react-webpack:component', () => {
 
               let exportAssertion;
               if(generator.options.stateless) {
-                exportAssertion = 'export default cssmodules(MycomponentComponent, styles);';
+                exportAssertion = 'export default cssmodules(Mycomponent, styles);';
               } else {
-                exportAssertion = 'export default MycomponentComponent';
+                exportAssertion = 'export default Mycomponent';
               }
-              assert.fileContent('src/components/MycomponentComponent.js', exportAssertion);
+              assert.fileContent('src/components/Mycomponent.js', exportAssertion);
               done();
             });
           });
@@ -331,9 +328,9 @@ describe('react-webpack:component', () => {
             createGeneratedComponent('my/little !special/test', style.type, options, () => {
 
               assert.file([
-                'src/components/my/littleSpecial/TestComponent.js',
+                'src/components/my/littleSpecial/Test.js',
                 style.expandedFileName,
-                'test/components/my/littleSpecial/TestComponentTest.js'
+                'test/components/my/littleSpecial/TestTest.js'
               ]);
               done();
             });
@@ -354,7 +351,7 @@ describe('react-webpack:component', () => {
 
           it('should import the react component', (done) => {
             createGeneratedComponent('mycomponent', style.type, options, () => {
-              assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
+              assert.fileContent('test/components/MycomponentTest.js', 'import Mycomponent from \'components//Mycomponent.js\';');
               done();
             });
           });
@@ -363,14 +360,11 @@ describe('react-webpack:component', () => {
     }
 
     // Run all tests for all available style types.
-    testComponentWithStyle(styleTypes.css);
+    // Stateless components will also be tested!
-    testComponentWithStyle(styleTypes.sass);
+    for(const style in styleTypes) {
-    testComponentWithStyle(styleTypes.scss);
+      testComponentWithStyle(styleTypes[style]);
-    testComponentWithStyle(styleTypes.less);
+      testComponentWithStyle(styleTypes[style], { stateless: true });
-    testComponentWithStyle(styleTypes.stylus);
+    }
-
-    // Test stateless components (should be enough when testing with defaults)
-    testComponentWithStyle(styleTypes.css, { stateless: true });
   });
 
 });

test/utils/yeomanTest.js

@@ -67,9 +67,38 @@ describe('Utilities:Yeoman', () => {
 
   describe('#getAllSettingsFromComponentName', () => {
 
-    it('should get all required information for component creation from the components name', () => {
+    describe('when the generator version is set to 4', () => {
 
-      let expection = {
+      const expection = {
+        style: {
+          webpackPath: './test.cssmodule.css',
+          path: 'src/components/my/component/',
+          fileName: 'test.cssmodule.css',
+          className: 'test-component',
+          suffix: '.css'
+        },
+        component: {
+          webpackPath: 'components/my/component/Test.js',
+          path: 'src/components/my/component/',
+          fileName: 'Test.js',
+          className: 'Test',
+          displayName: 'MyComponentTest',
+          suffix: '.js'
+        },
+        test: {
+          path: 'test/components/my/component/',
+          fileName: 'TestTest.js'
+        }
+      };
+
+      it('should get all required information for component creation from the components name', () => {
+        expect(utils.getAllSettingsFromComponentName('my/component/test', 'css', 4)).to.deep.equal(expection);
+      });
+    });
+
+    describe('when the generator version is set to 3 (or not set at all)', () => {
+
+      const expection = {
         style: {
           webpackPath: 'styles/my/component/Test.css',
           path: 'src/styles/my/component/',
@@ -91,7 +120,10 @@ describe('Utilities:Yeoman', () => {
         }
       };
 
-      expect(utils.getAllSettingsFromComponentName('my/component/test')).to.deep.equal(expection);
+      it('should get all required information for component creation from the components name', () => {
+        expect(utils.getAllSettingsFromComponentName('my/component/test')).to.deep.equal(expection);
+        expect(utils.getAllSettingsFromComponentName('my/component/test', 'css', 3)).to.deep.equal(expection);
+      });
     });
   });
 

utils/yeoman.js

@@ -19,14 +19,21 @@ let getBaseDir = () => {
  * Get all settings (paths and the like) from components name
  * @param {String} componentName The components name
  * @param {String} style Style language to use [optional]
+ * @param {String|Number} generatorVersion The version of the generator [optional]
  * @return {Object} Component settings
  */
-let getAllSettingsFromComponentName = (componentName, style) => {
+let getAllSettingsFromComponentName = (componentName, style, generatorVersion) => {
 
+  // Use css per default
   if(!style) {
     style = 'css';
   }
 
+  // Use version 3 fallback as default for projects
+  if(!generatorVersion) {
+    generatorVersion = 3;
+  }
+
   // Clean up the path and pull it to parts
   let cleanedPaths = getCleanedPathName(componentName);
   let componentParts = cleanedPaths.split('/');
@@ -46,27 +53,61 @@ let getAllSettingsFromComponentName = (componentName, style) => {
   // Configure tests
   let testPath = configUtils.getChoiceByKey('path', 'test');
 
-  let settings = {
+  let settings;
-    style: {
+
-      webpackPath: `styles/${componentPartPath}/${componentBaseName}${styleSettings.suffix}`,
+  switch(generatorVersion) {
-      path: `${stylePaths.path}/${componentPartPath}/`,
+
-      fileName: `${componentBaseName}${styleSettings.suffix}`,
+    case 4:
-      className: getComponentStyleName(componentBaseName),
+      settings = {
-      suffix: styleSettings.suffix
+        style: {
-    },
+          webpackPath: `./${componentBaseName.toLowerCase()}.cssmodule${styleSettings.suffix}`,
-    component: {
+          path: `${componentPath.path}/${componentPartPath}/`,
-      webpackPath: `components/${componentPartPath}/${componentBaseName}Component.js`,
+          fileName: `${componentBaseName.toLowerCase()}.cssmodule${styleSettings.suffix}`,
-      path: `${componentPath.path}/${componentPartPath}/`,
+          className: getComponentStyleName(componentBaseName),
-      fileName: `${componentBaseName}Component.js`,
+          suffix: styleSettings.suffix
-      className: `${componentBaseName}Component`,
+        },
-      displayName: `${componentFullName}Component`,
+        component: {
-      suffix: '.js'
+          webpackPath: `components/${componentPartPath}/${componentBaseName}.js`,
-    },
+          path: `${componentPath.path}/${componentPartPath}/`,
-    test: {
+          fileName: `${componentBaseName}.js`,
-      path: `${testPath.path}/components/${componentPartPath}/`,
+          className: `${componentBaseName}`,
-      fileName: `${componentBaseName}ComponentTest.js`
+          displayName: `${componentFullName}`,
-    }
+          suffix: '.js'
-  };
+        },
+        test: {
+          path: `${testPath.path}/components/${componentPartPath}/`,
+          fileName: `${componentBaseName}Test.js`
+        }
+      };
+      break;
+
+    // Use version 3 style for the defaults and fallback
+    // @deprecated
+    case 3:
+    default:
+      settings = {
+        style: {
+          webpackPath: `styles/${componentPartPath}/${componentBaseName}${styleSettings.suffix}`,
+          path: `${stylePaths.path}/${componentPartPath}/`,
+          fileName: `${componentBaseName}${styleSettings.suffix}`,
+          className: getComponentStyleName(componentBaseName),
+          suffix: styleSettings.suffix
+        },
+        component: {
+          webpackPath: `components/${componentPartPath}/${componentBaseName}Component.js`,
+          path: `${componentPath.path}/${componentPartPath}/`,
+          fileName: `${componentBaseName}Component.js`,
+          className: `${componentBaseName}Component`,
+          displayName: `${componentFullName}Component`,
+          suffix: '.js'
+        },
+        test: {
+          path: `${testPath.path}/components/${componentPartPath}/`,
+          fileName: `${componentBaseName}ComponentTest.js`
+        }
+      };
+      break;
+  }
 
   return settings;
 };