Infer displayName from variable declaration/assignment and property name

Also based on transfrom-react-display-name
euphocat · Mar 30, 2017 · 41f0f91 · 41f0f91
1 parent 775ca11
commit 41f0f91
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 15 deletions.
diff --git a/transforms/__testfixtures__/class/class-create-class-naming.output.js b/transforms/__testfixtures__/class/class-create-class-naming.output.js
@@ -7,7 +7,7 @@ const React = require('react');
 const createReactClass__deprecated = require('createReactClass__deprecated');
 
 const Component = createReactClass__deprecated({
-  displayName: 'class-create-class-naming.input',
+  displayName: 'Component',
   mixins: [{}],
 
   render() {

diff --git a/transforms/__testfixtures__/class/class-displayName.input.js b/transforms/__testfixtures__/class/class-displayName.input.js
@@ -0,0 +1,31 @@
+const React = require('React');
+
+let A = React.createClass({
+  mixins: [],
+  render() {
+    return <div />;
+  },
+});
+
+A = React.createClass({
+  mixins: [],
+  render() {
+    return <div />;
+  },
+});
+
+const obj = {
+  B: React.createClass({
+    mixins: [],
+    render() {
+      return <div />;
+    },
+  }),
+};
+
+export default React.createClass({
+  mixins: [],
+  render() {
+    return <div />;
+  },
+});
diff --git a/transforms/__testfixtures__/class/class-displayName.output.js b/transforms/__testfixtures__/class/class-displayName.output.js
@@ -0,0 +1,41 @@
+const React = require('React');
+
+const createReactClass = require('react-create-class');
+
+let A = createReactClass({
+  displayName: 'A',
+  mixins: [],
+
+  render() {
+    return <div />;
+  },
+});
+
+A = createReactClass({
+  displayName: 'A',
+  mixins: [],
+
+  render() {
+    return <div />;
+  },
+});
+
+const obj = {
+  B: createReactClass({
+    displayName: 'B',
+    mixins: [],
+
+    render() {
+      return <div />;
+    },
+  }),
+};
+
+export default createReactClass({
+  displayName: 'class-displayName.input',
+  mixins: [],
+
+  render() {
+    return <div />;
+  },
+});
diff --git a/transforms/__testfixtures__/class/class-initial-state.output.js b/transforms/__testfixtures__/class/class-initial-state.output.js
@@ -227,7 +227,7 @@ var helper = () => {};
 
 // fallback
 var PassGetInitialState = createReactClass({
-  displayName: 'class-initial-state.input',
+  displayName: 'PassGetInitialState',
 
   getInitialState() {
     return this.lol();
@@ -244,7 +244,7 @@ var PassGetInitialState = createReactClass({
 
 // fallback
 var UseGetInitialState = createReactClass({
-  displayName: 'class-initial-state.input',
+  displayName: 'UseGetInitialState',
 
   getInitialState() {
     return this.lol();
@@ -261,7 +261,7 @@ var UseGetInitialState = createReactClass({
 
 // fallback
 var UseArguments = createReactClass({
-  displayName: 'class-initial-state.input',
+  displayName: 'UseArguments',
 
   helper() {
     console.log(arguments);
@@ -274,7 +274,7 @@ var UseArguments = createReactClass({
 
 // fallback
 var ShadowingIssue = createReactClass({
-  displayName: 'class-initial-state.input',
+  displayName: 'ShadowingIssue',
 
   getInitialState() {
     const props = { x: 123 };

diff --git a/transforms/__testfixtures__/class/class-pure-mixin3.output.js b/transforms/__testfixtures__/class/class-pure-mixin3.output.js
@@ -5,7 +5,7 @@ var createReactClass = require('react-create-class');
 var ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
 
 var ComponentWithOnlyPureRenderMixin = createReactClass({
-  displayName: 'class-pure-mixin3.input',
+  displayName: 'ComponentWithOnlyPureRenderMixin',
   mixins: [ReactComponentWithPureRenderMixin],
 
   getInitialState: function() {

diff --git a/transforms/__testfixtures__/class/class-test2.output.js b/transforms/__testfixtures__/class/class-test2.output.js
@@ -50,7 +50,7 @@ module.exports = class extends React.Component {
 };
 
 var ComponentWithInconvertibleMixins = createReactClass({
-  displayName: 'class-test2.input',
+  displayName: 'ComponentWithInconvertibleMixins',
   mixins: [ReactComponentWithPureRenderMixin, FooBarMixin],
 
   getInitialState: function() {
@@ -69,7 +69,7 @@ var ComponentWithInconvertibleMixins = createReactClass({
 var listOfInconvertibleMixins = [ReactComponentWithPureRenderMixin, FooBarMixin];
 
 var ComponentWithInconvertibleMixins2 = createReactClass({
-  displayName: 'class-test2.input',
+  displayName: 'ComponentWithInconvertibleMixins2',
   mixins: listOfInconvertibleMixins,
 
   getInitialState: function() {

diff --git a/transforms/__testfixtures__/class/class.output.js b/transforms/__testfixtures__/class/class.output.js
@@ -110,7 +110,7 @@ class MyComponent3 extends React.Component {
 }
 
 var MyComponent4 = createReactClass({
-  displayName: 'class.input',
+  displayName: 'MyComponent4',
   foo: callMeMaybe(),
   render: function() {},
 });

diff --git a/transforms/__tests__/class-test.js b/transforms/__tests__/class-test.js
@@ -57,3 +57,4 @@ defineTest(__dirname, 'class', {
   'create-class-module-name': 'createReactClass__deprecated',
   'create-class-variable-name': 'createReactClass__deprecated',
 }, 'class/class-create-class-naming');
+defineTest(__dirname, 'class', null, 'class/class-displayName');
diff --git a/transforms/class.js b/transforms/class.js
@@ -10,7 +10,7 @@
 
 'use strict';
 
-const path = require('path');
+const { basename, extname, dirname } = require('path');
 
 module.exports = (file, api, options) => {
   const j = api.jscodeshift;
@@ -1108,12 +1108,35 @@ module.exports = (file, api, options) => {
 
     if (specPath) {
       // Add a displayName property to the spec object
-      let displayName = path.basename(file.path, path.extname(file.path));
-      // ./{module name}/index.js
-      if (displayName === "index") {
-        displayName = path.basename(path.dirname(file.path));
+      let path = classPath;
+      let displayName;
+      while (path && displayName === undefined) {
+        switch (path.node.type) {
+          case 'ExportDefaultDeclaration':
+            displayName = basename(file.path, extname(file.path));
+            if (displayName === 'index') {
+              // ./{module name}/index.js
+              displayName = basename(dirname(file.path));
+            }
+            break;
+          case 'VariableDeclarator':
+            displayName = path.node.id.name;
+            break;
+          case 'AssignmentExpression':
+            displayName = path.node.left.name;
+            break;
+          case 'Property':
+            displayName = path.node.key.name;
+            break;
+          case 'Statement':
+            displayName = null;
+            break;
+        }
+        path = path.parent;
+      }
+      if (displayName) {
+        addDisplayName(displayName, specPath);
       }
-      addDisplayName(displayName, specPath);
     }
 
     withComments(