Fix rewriteThis in helper-module-transforms for computed class… (#11109)

* Fix rewriteThis in helper-module-transforms for computed class elements

* Added test file and corrected the visitor

* Revert .gitignore

* Using skipAllButComputedKey method from plugin-replace-supers

* added tests for class methods

* Added tests for both class properties and methods and fixed skipping computed key for methods

* Fixed condition for class methods

* revised the conditions for class methods

* Added more tests and used else-if in classmethod condition

* Update packages/babel-helper-replace-supers/src/index.js

Co-Authored-By: Nicolò Ribaudo <nicolo.ribaudo@gmail.com>

Co-authored-by: Nicolò Ribaudo <nicolo.ribaudo@gmail.com>

packages/babel-helper-module-transforms/package.json

@@ -12,6 +12,7 @@
   "main": "lib/index.js",
   "dependencies": {
     "@babel/helper-module-imports": "^7.8.3",
+    "@babel/helper-replace-supers": "^7.8.3",
     "@babel/helper-simple-access": "^7.8.3",
     "@babel/helper-split-export-declaration": "^7.8.3",
     "@babel/template": "^7.8.3",

packages/babel-helper-module-transforms/src/rewrite-this.js

@@ -1,3 +1,4 @@
+import { skipAllButComputedKey } from "@babel/helper-replace-supers";
 export default function rewriteThis(programPath: NodePath) {
   // Rewrite "this" to be "undefined".
   programPath.traverse(rewriteThisVisitor);
@@ -12,10 +13,11 @@ const rewriteThisVisitor = {
     path.replaceWith(path.scope.buildUndefinedNode());
   },
   Function(path) {
-    if (!path.isArrowFunctionExpression()) path.skip();
+    if (path.isMethod()) skipAllButComputedKey(path);
+    else if (!path.isArrowFunctionExpression()) path.skip();
   },
   ClassProperty(path) {
-    path.skip();
+    skipAllButComputedKey(path);
   },
   ClassPrivateProperty(path) {
     path.skip();

packages/babel-helper-replace-supers/src/index.js

@@ -26,7 +26,7 @@ function getPrototypeOfExpression(objectRef, isStatic, file, isPrivateMethod) {
   return t.callExpression(file.addHelper("getPrototypeOf"), [targetRef]);
 }
 
-function skipAllButComputedKey(path: NodePath) {
+export function skipAllButComputedKey(path: NodePath) {
   // If the path isn't computed, just skip everything.
   if (!path.node.computed) {
     path.skip();

packages/babel-plugin-transform-modules-commonjs/test/fixtures/misc/undefined-this-computed-class-method-1/input.mjs

@@ -0,0 +1 @@
+export class C { [this.name]() {} }

packages/babel-plugin-transform-modules-commonjs/test/fixtures/misc/undefined-this-computed-class-method-1/options.json

@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    "external-helpers",
+    "transform-modules-commonjs",
+    "syntax-class-properties"
+  ]
+}

packages/babel-plugin-transform-modules-commonjs/test/fixtures/misc/undefined-this-computed-class-method-1/output.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.C = void 0;
+
+class C {
+  [(void 0).name]() {}
+
+}
+
+exports.C = C;

packages/babel-plugin-transform-modules-commonjs/test/fixtures/misc/undefined-this-computed-class-method-2/input.mjs

@@ -0,0 +1,3 @@
+class A {
+  [() => this.name]() {}
+}

packages/babel-plugin-transform-modules-commonjs/test/fixtures/misc/undefined-this-computed-class-method-2/options.json

@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    "external-helpers",
+    "transform-modules-commonjs",
+    "syntax-class-properties"
+  ]
+}

packages/babel-plugin-transform-modules-commonjs/test/fixtures/misc/undefined-this-computed-class-method-2/output.js

@@ -0,0 +1,6 @@
+"use strict";
+
+class A {
+  [() => (void 0).name]() {}
+
+}

packages/babel-plugin-transform-modules-commonjs/test/fixtures/misc/undefined-this-computed-class-method-3/input.mjs

@@ -0,0 +1,3 @@
+class A {
+  [function () { this.name; }]() {}
+}

packages/babel-plugin-transform-modules-commonjs/test/fixtures/misc/undefined-this-computed-class-method-3/options.json

@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    "external-helpers",
+    "transform-modules-commonjs",
+    "syntax-class-properties"
+  ]
+}

packages/babel-plugin-transform-modules-commonjs/test/fixtures/misc/undefined-this-computed-class-method-3/output.js

@@ -0,0 +1,8 @@
+"use strict";
+
+class A {
+  [function () {
+    this.name;
+  }]() {}
+
+}

packages/babel-plugin-transform-modules-commonjs/test/fixtures/misc/undefined-this-computed-class-property-name/input.mjs

@@ -0,0 +1 @@
+export class C { [this.name] = 42 }

packages/babel-plugin-transform-modules-commonjs/test/fixtures/misc/undefined-this-computed-class-property-name/options.json

@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    "external-helpers",
+    "transform-modules-commonjs",
+    "syntax-class-properties"
+  ]
+}

packages/babel-plugin-transform-modules-commonjs/test/fixtures/misc/undefined-this-computed-class-property-name/output.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.C = void 0;
+
+class C {
+  [(void 0).name] = 42;
+}
+
+exports.C = C;