Add display name after create context (#13501)

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

@@ -2,29 +2,117 @@ import { declare } from "@babel/helper-plugin-utils";
 import path from "path";
 import { types as t } from "@babel/core";
 
-export default declare(api => {
+function addDisplayNameInCreateClass(id, call) {
-  api.assertVersion(7);
+  const props = call.arguments[0].properties;
+  let safe = true;
 
-  function addDisplayName(id, call) {
+  for (let i = 0; i < props.length; i++) {
-    const props = call.arguments[0].properties;
+    const prop = props[i];
-    let safe = true;
+    const key = t.toComputedKey(prop);
-
+    if (t.isLiteral(key, { value: "displayName" })) {
-    for (let i = 0; i < props.length; i++) {
+      safe = false;
-      const prop = props[i];
+      break;
-      const key = t.toComputedKey(prop);
-      if (t.isLiteral(key, { value: "displayName" })) {
-        safe = false;
-        break;
-      }
-    }
-
-    if (safe) {
-      props.unshift(
-        t.objectProperty(t.identifier("displayName"), t.stringLiteral(id)),
-      );
     }
   }
 
+  if (safe) {
+    props.unshift(
+      t.objectProperty(t.identifier("displayName"), t.stringLiteral(id)),
+    );
+  }
+}
+
+function getDisplayNameReferenceIdentifier(
+  path: NodePath<t.CallExpression>,
+): ?t.Identifier {
+  let id;
+
+  // crawl up the ancestry looking for possible candidates for displayName inference
+  path.find(function (path) {
+    if (path.isAssignmentExpression()) {
+      id = path.node.left;
+    } else if (path.isObjectProperty()) {
+      id = path.node.key;
+    } else if (path.isVariableDeclarator()) {
+      id = path.node.id;
+    } else if (path.isStatement()) {
+      // we've hit a statement, we should stop crawling up
+      return true;
+    }
+
+    // we've got an id! no need to continue
+    if (id) return true;
+  });
+
+  // ensure that we have an identifier we can inherit from
+  if (!id) return;
+
+  // foo.bar -> bar
+  if (t.isMemberExpression(id)) {
+    id = id.property;
+  }
+
+  // identifiers are the only thing we can reliably get a name from
+  if (!t.isIdentifier(id)) return;
+
+  return id;
+}
+
+function isCreateContext(node) {
+  let callee;
+  return (
+    t.isCallExpression(node) &&
+    t.isMemberExpression((callee = node.callee)) &&
+    t.isIdentifier(callee.object, { name: "React" }) &&
+    ((!callee.computed &&
+      t.isIdentifier(callee.property, { name: "createContext" })) ||
+      t.isStringLiteral(callee.property, { value: "createContext" }))
+  );
+}
+
+function buildDisplayNameAssignment(ref, displayName) {
+  return t.assignmentExpression(
+    "=",
+    t.memberExpression(t.cloneNode(ref), t.identifier("displayName")),
+    t.stringLiteral(displayName),
+  );
+}
+
+function addDisplayNameAfterCreateContext(
+  id,
+  path: t.NodePath<t.CallExpression>,
+) {
+  const { parentPath } = path;
+  if (parentPath.isVariableDeclarator()) {
+    // FooContext = React.createContext()
+    const ref = parentPath.node.id;
+    // parentPath.parentPath must be a VariableDeclaration because getDisplayNameReferenceIdentifier
+    // does not support patterns
+    parentPath.parentPath.insertAfter(buildDisplayNameAssignment(ref, id));
+  } else if (parentPath.isAssignmentExpression()) {
+    // var FooContext = React.createContext()
+    const ref = parentPath.node.left;
+    parentPath.insertAfter(buildDisplayNameAssignment(ref, id));
+  } else {
+    // (ref = React.createContext(), ref.displayName = "id", ref)
+    const { scope } = path;
+    const ref = scope.generateUidIdentifier("ref");
+    scope.push({ id: ref });
+    path.replaceWith(
+      t.sequenceExpression([
+        t.assignmentExpression("=", t.cloneNode(ref), path.node),
+        buildDisplayNameAssignment(ref, id),
+        t.cloneNode(ref),
+      ]),
+    );
+  }
+}
+
+const createContextVisited = new WeakSet();
+
+export default declare(api => {
+  api.assertVersion(7);
+
   const isCreateClassCallExpression =
     t.buildMatchMemberExpression("React.createClass");
   const isCreateClassAddon = callee => callee.name === "createReactClass";
@@ -66,44 +154,27 @@ export default declare(api => {
             displayName = path.basename(path.dirname(filename));
           }
 
-          addDisplayName(displayName, node.declaration);
+          addDisplayNameInCreateClass(displayName, node.declaration);
         }
       },
 
       CallExpression(path) {
         const { node } = path;
-        if (!isCreateClass(node)) return;
+        if (isCreateClass(node)) {
-
+          const id = getDisplayNameReferenceIdentifier(path);
-        let id;
+          if (id) {
-
+            addDisplayNameInCreateClass(id.name, node);
-        // crawl up the ancestry looking for possible candidates for displayName inference
-        path.find(function (path) {
-          if (path.isAssignmentExpression()) {
-            id = path.node.left;
-          } else if (path.isObjectProperty()) {
-            id = path.node.key;
-          } else if (path.isVariableDeclarator()) {
-            id = path.node.id;
-          } else if (path.isStatement()) {
-            // we've hit a statement, we should stop crawling up
-            return true;
           }
+        } else if (isCreateContext(node)) {
+          if (createContextVisited.has(node)) {
+            return;
+          }
+          createContextVisited.add(node);
+          const id = getDisplayNameReferenceIdentifier(path);
 
-          // we've got an id! no need to continue
+          if (id) {
-          if (id) return true;
+            addDisplayNameAfterCreateContext(id.name, path);
-        });
+          }
-
-        // ensure that we have an identifier we can inherit from
-        if (!id) return;
-
-        // foo.bar -> bar
-        if (t.isMemberExpression(id)) {
-          id = id.property;
-        }
-
-        // identifiers are the only thing we can reliably get a name from
-        if (t.isIdentifier(id)) {
-          addDisplayName(id.name, node);
         }
       },
     },

packages/babel-plugin-transform-react-display-name/test/fixtures/display-name-context/assignment-expression-and-display-name/input.js

@@ -0,0 +1,2 @@
+ThemeContext = React.createContext("light");
+ThemeContext.displayName = "CustomThemeContext";

packages/babel-plugin-transform-react-display-name/test/fixtures/display-name-context/assignment-expression-and-display-name/output.js

@@ -0,0 +1,3 @@
+ThemeContext = React.createContext("light");
+ThemeContext.displayName = "ThemeContext";
+ThemeContext.displayName = "CustomThemeContext";

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

@@ -0,0 +1 @@
+ThemeContext = React.createContext("light");

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

@@ -0,0 +1,2 @@
+ThemeContext = React.createContext("light");
+ThemeContext.displayName = "ThemeContext";

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

@@ -0,0 +1 @@
+var enhancedContext = qux(React.createContext("light"));

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

@@ -0,0 +1,3 @@
+var _ref;
+
+var enhancedContext = qux((_ref = React.createContext("light"), _ref.displayName = "enhancedContext", _ref));

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

@@ -0,0 +1,3 @@
+({
+  ThemeContext: React.createContext("light")
+});

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

@@ -0,0 +1,5 @@
+var _ref;
+
+({
+  ThemeContext: (_ref = React.createContext("light"), _ref.displayName = "ThemeContext", _ref)
+});

packages/babel-plugin-transform-react-display-name/test/fixtures/display-name-context/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["transform-react-display-name"]
+}

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

@@ -0,0 +1 @@
+var ThemeContext = React.createContext("light");

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

@@ -0,0 +1,2 @@
+var ThemeContext = React.createContext("light");
+ThemeContext.displayName = "ThemeContext"