fix(transformer/class-properties): create temp var for this in computed key

crates/oxc_transformer/src/es2022/class_properties/class.rs

@@ -725,15 +725,24 @@ impl<'a, 'ctx> ClassProperties<'a, 'ctx> {
 
         // Bound vars and literals do not need temp var - return unchanged.
         // e.g. `let x = 'x'; class C { [x] = 1; }` or `class C { ['x'] = 1; }`
+        //
+        // `this` does not have side effects, but it needs a temp var anyway, because `this` in computed
+        // key and `this` within class constructor resolve to different `this` bindings.
+        // So we need to create a temp var outside of the class to get the correct `this`.
+        // `class C { [this] = 1; }`
+        // -> `let _this; _this = this; class C { constructor() { this[_this] = 1; } }`
+        //
+        // TODO(improve-on-babel): Can avoid the temp var if key is for a static prop/method,
+        // as in that case the usage of `this` stays outside the class.
+        //
         // TODO: Do fuller analysis to detect expressions which cannot have side effects e.g. `'x' + 'y'`.
         let cannot_have_side_effects = match &key {
             Expression::BooleanLiteral(_)
             | Expression::NullLiteral(_)
             | Expression::NumericLiteral(_)
             | Expression::BigIntLiteral(_)
             | Expression::RegExpLiteral(_)
-            | Expression::StringLiteral(_)
-            | Expression::ThisExpression(_) => true,
+            | Expression::StringLiteral(_) => true,
             Expression::Identifier(ident) => {
                 // Cannot have side effects if is bound.
                 // Additional check that the var is not mutated is required for cases like

tasks/transform_conformance/snapshots/oxc.snap.md

@@ -1,8 +1,9 @@
 commit: 54a8389f
 
-Passed: 93/104
+Passed: 94/105
 
 # All Passed:
+* babel-plugin-transform-class-properties
 * babel-plugin-transform-class-static-block
 * babel-plugin-transform-nullish-coalescing-operator
 * babel-plugin-transform-optional-catch-binding

tasks/transform_conformance/tests/babel-plugin-transform-class-properties/test/fixtures/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "transform-class-properties"
+  ]
+}

tasks/transform_conformance/tests/babel-plugin-transform-class-properties/test/fixtures/this-in-computed-key/input.js

@@ -0,0 +1,22 @@
+function createClassDeclaration() {
+  class C {
+    [this] = 1;
+    [this + 'bar'] = 2;
+  }
+  return C;
+}
+
+function createClassExpression() {
+  return class {
+    [this] = 3;
+    [this + 'bar'] = 4;
+  };
+}
+
+const C = createClassDeclaration.call("foo");
+expect(new C().foo).toBe(1);
+expect(new C().foobar).toBe(2);
+
+const D = createClassExpression.call("foo");
+expect(new D().foo).toBe(3);
+expect(new D().foobar).toBe(4);

tasks/transform_conformance/tests/babel-plugin-transform-class-properties/test/fixtures/this-in-computed-key/output.js

@@ -0,0 +1,30 @@
+function createClassDeclaration() {
+  let _this, _ref;
+  _this = this;
+  _ref = this + "bar";
+  class C {
+    constructor() {
+      babelHelpers.defineProperty(this, _this, 1);
+      babelHelpers.defineProperty(this, _ref, 2);
+    }
+  }
+  return C;
+}
+
+function createClassExpression() {
+  let _this2, _ref2;
+  return _this2 = this, _ref2 = this + "bar", class {
+    constructor() {
+      babelHelpers.defineProperty(this, _this2, 3);
+      babelHelpers.defineProperty(this, _ref2, 4);
+    }
+  };
+}
+
+const C = createClassDeclaration.call("foo");
+expect(new C().foo).toBe(1);
+expect(new C().foobar).toBe(2);
+
+const D = createClassExpression.call("foo");
+expect(new D().foo).toBe(3);
+expect(new D().foobar).toBe(4);