Merge pull request #5780 from kentor/react-display-name-to-support-createReactClass

Backport support for createReactClass with transform-react-display-name

packages/babel-plugin-transform-react-display-name/README.md

@@ -1,13 +1,14 @@
 # babel-plugin-transform-react-display-name
 
-> Add displayName to React.createClass calls
+> Add displayName to `createReactClass` (and `React.createClass`) calls
 
 ## Example
 
 **In**
 
 ```js
-var foo = React.createClass({});
+var foo = React.createClass({}); // React <= 15
+var bar = createReactClass({});  // React 16+
 ```
 
 **Out**
@@ -15,7 +16,10 @@ var foo = React.createClass({});
 ```js
 var foo = React.createClass({
   displayName: "foo"
-});
+}); // React <= 15
+var bar = createReactClass({
+  displayName: "bar"
+}); // React 16+
 ```
 
 ## Installation

packages/babel-plugin-transform-react-display-name/src/index.js

@@ -20,12 +20,16 @@ export default function ({ types: t }) {
   }
 
   const isCreateClassCallExpression = t.buildMatchMemberExpression("React.createClass");
+  const isCreateClassAddon = (callee) => callee.name === "createReactClass";
 
   function isCreateClass(node) {
     if (!node || !t.isCallExpression(node)) return false;
 
-    // not React.createClass call member object
+    // not createReactClass nor React.createClass call member object
-    if (!isCreateClassCallExpression(node.callee)) return false;
+    if (
+      !isCreateClassCallExpression(node.callee) &&
+      !isCreateClassAddon(node.callee)
+    ) return false;
 
     // no call arguments
     const args = node.arguments;

packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/assignment-expression/actual.js

@@ -1 +1,2 @@
-foo = React.createClass({});
+foo = createReactClass({});
+bar = React.createClass({});

packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/assignment-expression/expected.js

@@ -1,3 +1,6 @@
-foo = React.createClass({
+foo = createReactClass({
   displayName: "foo"
 });
+bar = React.createClass({
+  displayName: "bar"
+});

packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/nested/actual.js

@@ -1 +1,2 @@
-var foo = bar(React.createClass({}));
+var foo = qux(createReactClass({}));
+var bar = qux(React.createClass({}));

packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/nested/expected.js

@@ -1,3 +1,6 @@
-var foo = bar(React.createClass({
+var foo = qux(createReactClass({
   displayName: "foo"
 }));
+var bar = qux(React.createClass({
+  displayName: "bar"
+}));

packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/object-property/actual.js

@@ -1,3 +1,6 @@
 ({
-  foo: React.createClass({})
+  foo: createReactClass({})
+});
+({
+  bar: React.createClass({})
 });

packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/object-property/expected.js

@@ -1,5 +1,10 @@
 ({
-  foo: React.createClass({
+  foo: createReactClass({
     displayName: "foo"
   })
 });
+({
+  bar: React.createClass({
+    displayName: "bar"
+  })
+});

packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/variable-declarator/actual.js

@@ -1 +1,2 @@
-var foo = React.createClass({});
+var foo = createReactClass({});
+var bar = React.createClass({});

packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/variable-declarator/expected.js

@@ -1,3 +1,6 @@
-var foo = React.createClass({
+var foo = createReactClass({
   displayName: "foo"
 });
+var bar = React.createClass({
+  displayName: "bar"
+});