2.2.4

CHANGELOG.md

@@ -1,5 +1,10 @@
 # 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:___
 

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.3",
+  "version": "2.2.4",
   "description": "Yeoman generator for using React with Webpack via Babel",
   "keywords": [
     "yeoman-generator",

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