for component classes set displayName static property

index.js

@@ -2,14 +2,20 @@ module.exports = transform;
 var pathMod = require('path')
 
 function transform (babel) {
+  const { types: t } = babel;
   return {
     visitor: {
-      ClassDeclaration: function (path, state) {
+      ClassDeclaration: function (path) {
         if (classHasRenderMethod(path)) {
-          setDisplayNameAfter(path, path.node.id, babel.types)
+          const displayName = t.classProperty(
+            t.identifier('displayName'),
+            t.stringLiteral(path.node.id.name)
+          );
+          displayName.static = true;
+          path.node.body.body.push(displayName);
         }
       },
-      FunctionDeclaration: function (path, state) {        
+      FunctionDeclaration: function (path, state) {
         if (doesReturnJSX(path.node.body) || (path.node.id && path.node.id.name &&
                                               isKnownComponent(path.node.id.name, state.opts.knownComponents))) {
           var displayName
@@ -18,10 +24,10 @@ function transform (babel) {
               // An anonymous function declaration in export default declaration.
               // Transform `export default function () { ... }`
               // to `var _uid1 = function () { .. }; export default __uid;`
-              // then add displayName to _uid1  
-              var extension = pathMod.extname(state.file.opts.filename) 
+              // then add displayName to _uid1
+              var extension = pathMod.extname(state.file.opts.filename)
               var name = pathMod.basename(state.file.opts.filename, extension)
-              
+
               var id = path.scope.generateUidIdentifier("uid");
               path.node.id = id
               displayName = name
@@ -66,7 +72,7 @@ function shouldSetDisplayNameForFuncExpr(path, knownComponents) {
   // Parent must be either 'AssignmentExpression' or 'VariableDeclarator' or 'CallExpression' with a parent of 'VariableDeclarator'
   var id
   if (path.parentPath.node.type === 'AssignmentExpression' &&
-      path.parentPath.node.left.type !== 'MemberExpression' && // skip static members 
+      path.parentPath.node.left.type !== 'MemberExpression' && // skip static members
       path.parentPath.parentPath.node.type == 'ExpressionStatement' &&
       path.parentPath.parentPath.parentPath.node.type == 'Program') {
     id = path.parentPath.node.left
@@ -82,7 +88,7 @@ function shouldSetDisplayNameForFuncExpr(path, knownComponents) {
           path.parentPath.parentPath.parentPath.node.type === 'Program') {
         id = path.parentPath.node.id
       }
-    } 
+    }
   }
 
   if (id) {
@@ -172,6 +178,6 @@ function setDisplayNameAfter(path, nameNodeId, t, displayName) {
       t.stringLiteral(displayName)
     ))
 
-    blockLevelStmnt.insertAfter(setDisplayNameStmn)    
+    blockLevelStmnt.insertAfter(setDisplayNameStmn)
   }
 }

test/fixtures/classComponents/expected.js

@@ -1,36 +1,32 @@
-var _class, _temp;
+var _class, _temp, _class2, _temp2, _class3, _temp3, _class4, _temp4;
 
 import React from 'react';
 import { Component } from 'react';
 
-export let Component3a = class Component3a extends React.Component {
+export let Component3a = (_temp = _class = class Component3a extends React.Component {
   render() {
     return React.createElement('div', null);
   }
-};
+}, _class.displayName = 'Component3a', _temp);
 
-Component3a.displayName = 'Component3a';
-let Component3b = class Component3b extends React.Component {
+let Component3b = (_temp2 = _class2 = class Component3b extends React.Component {
   render() {
     return React.createElement('div', null);
   }
-};
-Component3b.displayName = 'Component3b';
+}, _class2.displayName = 'Component3b', _temp2);
 export { Component3b as default };
 
 
-export let Component3c = class Component3c extends Component {
+export let Component3c = (_temp3 = _class3 = class Component3c extends Component {
   render() {
     return React.createElement('div', null);
   }
-};
+}, _class3.displayName = 'Component3c', _temp3);
 
-Component3c.displayName = 'Component3c';
-let Component3d = (_temp = _class = class Component3d extends Component {
+let Component3d = (_temp4 = _class4 = class Component3d extends Component {
   render() {
     return React.createElement('div', null);
   }
-}, _class.get = () => {
+}, _class4.get = () => {
   return React.createElement('div', null);
-}, _temp);
-Component3d.displayName = 'Component3d';
+}, _class4.displayName = 'Component3d', _temp4);

test/fixtures/decorators/expected.js

@@ -1,13 +1,12 @@
-var _dec, _class;
+var _dec, _class, _class2, _temp;
 
 import React from 'react';
 import { Component } from 'react';
 import connect from '../decorators/connect';
 
-let DecoratedComponent = (_dec = connect(Component), _dec(_class = class DecoratedComponent extends React.Component {
+let DecoratedComponent = (_dec = connect(Component), _dec(_class = (_temp = _class2 = class DecoratedComponent extends React.Component {
   render() {
     return React.createElement('div', null);
   }
-}) || _class);
-DecoratedComponent.displayName = 'DecoratedComponent';
+}, _class2.displayName = 'DecoratedComponent', _temp)) || _class);
 export { DecoratedComponent as default };