Fix scope of computed method keys (#12812)

* Fix scope of computed method keys

* Test for nested computed keys

* Fix scope.rename with computed method keys

* Optional chaining tests

packages/babel-plugin-proposal-optional-chaining/test/fixtures/general/in-method-key-loose/input.js

@@ -0,0 +1,4 @@
+let x;
+const a = {
+  [x.y?.z]() {}
+};

packages/babel-plugin-proposal-optional-chaining/test/fixtures/general/in-method-key-loose/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": [["proposal-optional-chaining", { "loose": true }]]
+}

packages/babel-plugin-proposal-optional-chaining/test/fixtures/general/in-method-key-loose/output.js

@@ -0,0 +1,7 @@
+var _x$y;
+
+let x;
+const a = {
+  [(_x$y = x.y) == null ? void 0 : _x$y.z]() {}
+
+};

packages/babel-plugin-proposal-optional-chaining/test/fixtures/general/in-method-key/input.js

@@ -0,0 +1,4 @@
+let x;
+const a = {
+  [x.y?.z]() {}
+};

packages/babel-plugin-proposal-optional-chaining/test/fixtures/general/in-method-key/output.js

@@ -0,0 +1,7 @@
+var _x$y;
+
+let x;
+const a = {
+  [(_x$y = x.y) === null || _x$y === void 0 ? void 0 : _x$y.z]() {}
+
+};

packages/babel-traverse/src/path/context.ts

@@ -119,6 +119,10 @@ export function setScope(this: NodePath) {
   if (this.opts && this.opts.noScope) return;
 
   let path = this.parentPath;
+
+  // Skip method scope if is computed method key
+  if (this.key === "key" && path.isMethod()) path = path.parentPath;
+
   let target;
   while (path && !target) {
     if (path.opts && path.opts.noScope) return;

packages/babel-traverse/src/scope/index.ts

@@ -359,7 +359,16 @@ export default class Scope {
   static contextVariables = ["arguments", "undefined", "Infinity", "NaN"];
 
   get parent() {
-    const parent = this.path.findParent(p => p.isScope());
+    let parent,
+      path = this.path;
+    do {
+      // Skip method scope if coming from inside computed key
+      const isKey = path.key === "key";
+      path = path.parentPath;
+      if (isKey && path.isMethod()) path = path.parentPath;
+      if (path && path.isScope()) parent = path;
+    } while (path && !parent);
+
     return parent?.scope;
   }
 

packages/babel-traverse/src/scope/lib/renamer.ts

@@ -17,7 +17,7 @@ const renameVisitor: Visitor<Renamer> = {
         state.binding.identifier,
       )
     ) {
-      path.skip();
+      skipAllButComputedMethodKey(path);
     }
   },
 
@@ -142,3 +142,18 @@ export default class Renamer {
     }
   }
 }
+
+function skipAllButComputedMethodKey(path) {
+  // If the path isn't method with computed key, just skip everything.
+  if (!path.isMethod() || !path.node.computed) {
+    path.skip();
+    return;
+  }
+
+  // So it's a method with a computed key. Make sure to skip every other key the
+  // traversal would visit.
+  const keys = t.VISITOR_KEYS[path.type];
+  for (const key of keys) {
+    if (key !== "key") path.skipKey(key);
+  }
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-1/input.js

@@ -0,0 +1,8 @@
+let a = "outside";
+
+const obj = {
+  [a]() {
+    let a = "inside";
+    return a;
+  }
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-1/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["./plugin"]
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-1/output.js

@@ -0,0 +1,8 @@
+let z = "outside";
+const obj = {
+  [z]() {
+    let a = "inside";
+    return a;
+  }
+
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-1/plugin.js

@@ -0,0 +1,9 @@
+module.exports = function() {
+  return {
+    visitor: {
+      Program(path) {
+        path.scope.rename("a", "z");
+      }
+    }
+  };
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-2/input.js

@@ -0,0 +1,8 @@
+let a = "outside";
+
+class C {
+  [a]() {
+    let a = "inside";
+    return a;
+  }
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-2/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["./plugin"]
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-2/output.js

@@ -0,0 +1,9 @@
+let z = "outside";
+
+class C {
+  [z]() {
+    let a = "inside";
+    return a;
+  }
+
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-2/plugin.js

@@ -0,0 +1,9 @@
+module.exports = function() {
+  return {
+    visitor: {
+      Program(path) {
+        path.scope.rename("a", "z");
+      }
+    }
+  };
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-3/input.js

@@ -0,0 +1,7 @@
+let a = "outside";
+
+const obj = {
+  [a](a = "inside") {
+    return a;
+  }
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-3/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["./plugin"]
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-3/output.js

@@ -0,0 +1,7 @@
+let z = "outside";
+const obj = {
+  [z](a = "inside") {
+    return a;
+  }
+
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-3/plugin.js

@@ -0,0 +1,9 @@
+module.exports = function() {
+  return {
+    visitor: {
+      Program(path) {
+        path.scope.rename("a", "z");
+      }
+    }
+  };
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-4/input.js

@@ -0,0 +1,7 @@
+let a = "outside";
+
+class C {
+  [a](a = "inside") {
+    return a;
+  }
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-4/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["./plugin"]
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-4/output.js

@@ -0,0 +1,8 @@
+let z = "outside";
+
+class C {
+  [z](a = "inside") {
+    return a;
+  }
+
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-4/plugin.js

@@ -0,0 +1,9 @@
+module.exports = function() {
+  return {
+    visitor: {
+      Program(path) {
+        path.scope.rename("a", "z");
+      }
+    }
+  };
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-5/input.js

@@ -0,0 +1,8 @@
+let a = "outside";
+
+const obj = {
+  [(() => a)()]() {
+    let a = "inside";
+    return a;
+  }
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-5/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["./plugin"]
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-5/output.js

@@ -0,0 +1,8 @@
+let z = "outside";
+const obj = {
+  [(() => z)()]() {
+    let a = "inside";
+    return a;
+  }
+
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-5/plugin.js

@@ -0,0 +1,9 @@
+module.exports = function() {
+  return {
+    visitor: {
+      Program(path) {
+        path.scope.rename("a", "z");
+      }
+    }
+  };
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-6/input.js

@@ -0,0 +1,8 @@
+let a = "outside";
+
+class C {
+  [(() => a)()]() {
+    let a = "inside";
+    return a;
+  }
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-6/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["./plugin"]
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-6/output.js

@@ -0,0 +1,9 @@
+let z = "outside";
+
+class C {
+  [(() => z)()]() {
+    let a = "inside";
+    return a;
+  }
+
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-6/plugin.js

@@ -0,0 +1,9 @@
+module.exports = function() {
+  return {
+    visitor: {
+      Program(path) {
+        path.scope.rename("a", "z");
+      }
+    }
+  };
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-7/input.js

@@ -0,0 +1,15 @@
+let a = "outside";
+
+const obj = {
+  get [
+    {
+      get [a]() {
+        let a = "inside";
+        return a;
+      }
+    }.outside
+  ]() {
+    let a = "middle";
+    return a;
+  }
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-7/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["./plugin"]
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-7/output.js

@@ -0,0 +1,14 @@
+let z = "outside";
+const obj = {
+  get [{
+    get [z]() {
+      let a = "inside";
+      return a;
+    }
+
+  }.outside]() {
+    let a = "middle";
+    return a;
+  }
+
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-7/plugin.js

@@ -0,0 +1,9 @@
+module.exports = function() {
+  return {
+    visitor: {
+      Program(path) {
+        path.scope.rename("a", "z");
+      }
+    }
+  };
+};

packages/babel-traverse/test/fixtures/rename/method-computed-key-8/input.js

@@ -0,0 +1,15 @@
+let a = "outside";
+
+class C {
+  static get [
+    class D {
+      static get [a]() {
+        let a = "inside";
+        return a;
+      }
+    }.outside
+  ]() {
+    let a = "middle";
+    return a;
+  }
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-8/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["./plugin"]
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-8/output.js

@@ -0,0 +1,15 @@
+let z = "outside";
+
+class C {
+  static get [class D {
+    static get [z]() {
+      let a = "inside";
+      return a;
+    }
+
+  }.outside]() {
+    let a = "middle";
+    return a;
+  }
+
+}

packages/babel-traverse/test/fixtures/rename/method-computed-key-8/plugin.js

@@ -0,0 +1,9 @@
+module.exports = function() {
+  return {
+    visitor: {
+      Program(path) {
+        path.scope.rename("a", "z");
+      }
+    }
+  };
+};