Revert "Add display name after create context (#13501)" (#13637)

This reverts commit e9bc7c18c0de029e1cc0e0935c26f208a683e75b.

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

@@ -2,7 +2,10 @@ import { declare } from "@babel/helper-plugin-utils";
 import path from "path";
 import { types as t } from "@babel/core";
 
-function addDisplayNameInCreateClass(id, call) {
+export default declare(api => {
+  api.assertVersion(7);
+
+  function addDisplayName(id, call) {
     const props = call.arguments[0].properties;
     let safe = true;
 
@@ -20,99 +23,8 @@ function addDisplayNameInCreateClass(id, call) {
         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";
@@ -154,27 +66,44 @@ export default declare(api => {
             displayName = path.basename(path.dirname(filename));
           }
 
-          addDisplayNameInCreateClass(displayName, node.declaration);
+          addDisplayName(displayName, node.declaration);
         }
       },
 
       CallExpression(path) {
         const { node } = path;
-        if (isCreateClass(node)) {
+        if (!isCreateClass(node)) return;
-          const id = getDisplayNameReferenceIdentifier(path);
-          if (id) {
-            addDisplayNameInCreateClass(id.name, node);
-          }
-        } else if (isCreateContext(node)) {
-          if (createContextVisited.has(node)) {
-            return;
-          }
-          createContextVisited.add(node);
-          const id = getDisplayNameReferenceIdentifier(path);
 
-          if (id) {
+        let id;
-            addDisplayNameAfterCreateContext(id.name, path);
+
+        // 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)) {
+          addDisplayName(id.name, node);
         }
       },
     },

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

@@ -1,2 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,3 +0,0 @@
-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

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

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

@@ -1,5 +0,0 @@
-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

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

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

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

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

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