fix: requeue computed keys of class accessors

babel · May 20, 2022 · 791d2f4 · 791d2f4
1 parent 2f10492
commit 791d2f4
Show file tree

Hide file tree

Showing 12 changed files with 130 additions and 17 deletions.
diff --git a/packages/babel-helper-environment-visitor/src/index.ts b/packages/babel-helper-environment-visitor/src/index.ts
@@ -32,7 +32,7 @@ export function requeueComputedKeyAndDecorators(
 // environmentVisitor should be used when traversing the whole class and not for specific class elements/methods.
 // For perf reasons, the environmentVisitor might be traversed with `{ noScope: true }`, which means `path.scope` is undefined.
 // Avoid using `path.scope` here
-export default {
+const visitor: Visitor = {
   FunctionParent(path) {
     if (path.isArrowFunctionExpression()) {
       // arrows are not skipped because they inherit the context.
@@ -44,10 +44,13 @@ export default {
       }
     }
   },
-  "ClassProperty|ClassPrivateProperty"(
-    path: NodePath<t.ClassProperty | t.ClassPrivateProperty>,
-  ) {
+  Property(path) {
+    if (path.isObjectProperty()) {
+      return;
+    }
     path.skip();
     requeueComputedKeyAndDecorators(path);
   },
-} as Visitor<unknown>;
+};
+
+export default visitor;
diff --git a/...in-proposal-class-properties/test/fixtures/nested-class/super-call-in-decorator/output.js b/...in-proposal-class-properties/test/fixtures/nested-class/super-call-in-decorator/output.js
@@ -16,7 +16,7 @@ let Outer = /*#__PURE__*/function (_Hello) {
     var _this;
 
     babelHelpers.classCallCheck(this, Outer);
-    _dec = _this = _super.call(this)
+    _dec = _this = _super.call(this);
     let Inner = /*#__PURE__*/babelHelpers.createClass(function Inner() {
       babelHelpers.classCallCheck(this, Inner);
       babelHelpers.defineProperty(this, "hello", _init_hello(this));

diff --git a/...oposal-class-properties/test/fixtures/nested-class/super-property-in-accessor-key/exec.js b/...oposal-class-properties/test/fixtures/nested-class/super-property-in-accessor-key/exec.js
@@ -0,0 +1,19 @@
+"use strict";
+class Hello {
+  toString() {
+    return 'hello';
+  }
+}
+
+class Outer extends Hello {
+  constructor() {
+    super();
+    class Inner {
+      accessor [super.toString()] = 'hello';
+    }
+
+    return new Inner();
+  }
+}
+
+expect(new Outer().hello).toBe('hello');
diff --git a/...posal-class-properties/test/fixtures/nested-class/super-property-in-accessor-key/input.js b/...posal-class-properties/test/fixtures/nested-class/super-property-in-accessor-key/input.js
@@ -0,0 +1,19 @@
+"use strict";
+class Hello {
+  toString() {
+    return 'hello';
+  }
+}
+
+class Outer extends Hello {
+  constructor() {
+    super();
+    class Inner {
+      accessor [super.toString()] = 'hello';
+    }
+
+    return new Inner();
+  }
+}
+
+expect(new Outer().hello).toBe('hello');
diff --git a/...l-class-properties/test/fixtures/nested-class/super-property-in-accessor-key/options.json b/...l-class-properties/test/fixtures/nested-class/super-property-in-accessor-key/options.json
@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    ["proposal-decorators", { "version": "2021-12" }],
+    "proposal-class-static-block",
+    "proposal-class-properties",
+    "transform-classes"
+  ]
+}
diff --git a/...osal-class-properties/test/fixtures/nested-class/super-property-in-accessor-key/output.js b/...osal-class-properties/test/fixtures/nested-class/super-property-in-accessor-key/output.js
@@ -0,0 +1,64 @@
+"use strict";
+
+let Hello = /*#__PURE__*/function () {
+  function Hello() {
+    babelHelpers.classCallCheck(this, Hello);
+  }
+
+  babelHelpers.createClass(Hello, [{
+    key: "toString",
+    value: function toString() {
+      return 'hello';
+    }
+  }]);
+  return Hello;
+}();
+
+let Outer = /*#__PURE__*/function (_Hello) {
+  babelHelpers.inherits(Outer, _Hello);
+
+  var _super = babelHelpers.createSuper(Outer);
+
+  function Outer() {
+    let _babelHelpers$get$cal, _babelHelpers$get$cal2;
+
+    var _thisSuper, _this;
+
+    babelHelpers.classCallCheck(this, Outer);
+    _this = _super.call(this);
+
+    var _A = /*#__PURE__*/new WeakMap();
+
+    _babelHelpers$get$cal = babelHelpers.get((_thisSuper = babelHelpers.assertThisInitialized(_this), babelHelpers.getPrototypeOf(Outer.prototype)), "toString", _thisSuper).call(_thisSuper);
+    _babelHelpers$get$cal2 = babelHelpers.get((_thisSuper = babelHelpers.assertThisInitialized(_this), babelHelpers.getPrototypeOf(Outer.prototype)), "toString", _thisSuper).call(_thisSuper);
+
+    let Inner = /*#__PURE__*/function () {
+      function Inner() {
+        babelHelpers.classCallCheck(this, Inner);
+        babelHelpers.classPrivateFieldInitSpec(this, _A, {
+          writable: true,
+          value: 'hello'
+        });
+      }
+
+      babelHelpers.createClass(Inner, [{
+        key: _babelHelpers$get$cal,
+        get: function () {
+          return babelHelpers.classPrivateFieldGet(this, _A);
+        }
+      }, {
+        key: _babelHelpers$get$cal2,
+        set: function (v) {
+          babelHelpers.classPrivateFieldSet(this, _A, v);
+        }
+      }]);
+      return Inner;
+    }();
+
+    return babelHelpers.possibleConstructorReturn(_this, new Inner());
+  }
+
+  return babelHelpers.createClass(Outer);
+}(Hello);
+
+expect(new Outer().hello).toBe('hello');
diff --git a/...roposal-class-properties/test/fixtures/nested-class/super-property-in-decorator/output.js b/...roposal-class-properties/test/fixtures/nested-class/super-property-in-decorator/output.js
@@ -26,7 +26,7 @@ let Outer = /*#__PURE__*/function (_Hello) {
 
     babelHelpers.classCallCheck(this, Outer);
     _this = _super.call(this);
-    _dec = babelHelpers.get((_thisSuper = babelHelpers.assertThisInitialized(_this), babelHelpers.getPrototypeOf(Outer.prototype)), "dec", _thisSuper)
+    _dec = babelHelpers.get((_thisSuper = babelHelpers.assertThisInitialized(_this), babelHelpers.getPrototypeOf(Outer.prototype)), "dec", _thisSuper);
     let Inner = /*#__PURE__*/babelHelpers.createClass(function Inner() {
       babelHelpers.classCallCheck(this, Inner);
       babelHelpers.defineProperty(this, "hello", _init_hello(this));

diff --git a/packages/babel-plugin-proposal-decorators/src/transformer-2021-12.ts b/packages/babel-plugin-proposal-decorators/src/transformer-2021-12.ts
@@ -502,7 +502,7 @@ function transformClass(
     if (element.node.decorators && element.node.decorators.length > 0) {
       hasElementDecorators = true;
     } else if (element.node.type === "ClassAccessorProperty") {
-      const { key, value, static: isStatic } = element.node;
+      const { key, value, static: isStatic, computed } = element.node;
 
       const newId = generateClassPrivateUid();
 
@@ -511,7 +511,7 @@ function transformClass(
       const newField = generateClassProperty(newId, valueNode, isStatic);
 
       const [newPath] = element.replaceWith(newField);
-      addProxyAccessorsFor(newPath, key, newId, element.node.computed);
+      addProxyAccessorsFor(newPath, key, newId, computed);
     }
   }
 

diff --git a/...oposal-decorators/test/fixtures/2021-12-accessors--to-es2015/undecorated-public/output.js b/...oposal-decorators/test/fixtures/2021-12-accessors--to-es2015/undecorated-public/output.js
@@ -38,11 +38,11 @@ class Foo {
     babelHelpers.classPrivateFieldSet(this, _B, v);
   }
 
-  get 'c'() {
+  get ['c']() {
     return babelHelpers.classPrivateFieldGet(this, _C);
   }
 
-  set 'c'(v) {
+  set ['c'](v) {
     babelHelpers.classPrivateFieldSet(this, _C, v);
   }
 

diff --git a/...decorators/test/fixtures/2021-12-accessors--to-es2015/undecorated-static-public/output.js b/...decorators/test/fixtures/2021-12-accessors--to-es2015/undecorated-static-public/output.js
@@ -17,11 +17,11 @@ class Foo {
     babelHelpers.classStaticPrivateFieldSpecSet(this, Foo, _B, v);
   }
 
-  static get 'c'() {
+  static get ['c']() {
     return babelHelpers.classStaticPrivateFieldSpecGet(this, Foo, _C);
   }
 
-  static set 'c'(v) {
+  static set ['c'](v) {
     babelHelpers.classStaticPrivateFieldSpecSet(this, Foo, _C, v);
   }
 

diff --git a/...l-plugin-proposal-decorators/test/fixtures/2021-12-accessors/undecorated-public/output.js b/...l-plugin-proposal-decorators/test/fixtures/2021-12-accessors/undecorated-public/output.js
@@ -23,11 +23,11 @@ class Foo {
 
   #C = 456;
 
-  get 'c'() {
+  get ['c']() {
     return this.#C;
   }
 
-  set 'c'(v) {
+  set ['c'](v) {
     this.#C = v;
   }
 

diff --git a/...n-proposal-decorators/test/fixtures/2021-12-accessors/undecorated-static-public/output.js b/...n-proposal-decorators/test/fixtures/2021-12-accessors/undecorated-static-public/output.js
@@ -23,11 +23,11 @@ class Foo {
 
   static #C = 456;
 
-  static get 'c'() {
+  static get ['c']() {
     return this.#C;
   }
 
-  static set 'c'(v) {
+  static set ['c'](v) {
     this.#C = v;
   }