2.2.4

Add .gitignore file to generated application

CHANGELOG.md

@@ -1,5 +1,15 @@
 # generator-react-webpack - Changelog
 
+## 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:___
 

README.md

@@ -12,7 +12,7 @@ Out of the box it comes with support for:
 - 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.
 

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/templates/components/Base.js

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-react-webpack",
-  "version": "2.2.0",
+  "version": "2.2.4",
   "description": "Yeoman generator for using React with Webpack via Babel",
   "keywords": [
     "yeoman-generator",

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

@@ -47,6 +47,14 @@ describe('react-webpack:component', () => {
           done();
         });
       });
+
+      it('should have its displayName set per default', (done) => {
+
+        createGeneratedComponent('mycomponent', 'css', () => {
+          assert.fileContent('src/components/MycomponentComponent.js', `displayName = 'MycomponentComponent';`);
+          done();
+        });
+      });
     });
 
     describe('Style', () => {

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/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: {