fix(class-properties): replace new.target in static properties with undefined

packages/babel-helper-create-class-features-plugin/src/fields.ts

@@ -1,4 +1,5 @@
 import { template, traverse, types as t } from "@babel/core";
+import type { NodePath } from "@babel/traverse";
 import ReplaceSupers, {
   environmentVisitor,
 } from "@babel/helper-replace-supers";
@@ -770,6 +771,38 @@ export function buildFieldsInitNodes(
       needsClassRef = needsClassRef || replaced;
     }
 
+    // if there are `new.target` in static field
+    // we should replace it with `undefined`
+    if (isStatic && isField) {
+      // fix issue #12737
+      prop.traverse({
+        MetaProperty(path: NodePath<t.MetaProperty>) {
+          const meta = path.get("meta");
+          const property = path.get("property");
+          const { scope } = path;
+
+          if (
+            meta.isIdentifier({ name: "new" }) &&
+            property.isIdentifier({ name: "target" })
+          ) {
+            const func = path.findParent(path => {
+              if (path.isClass()) return true;
+              if (path.isFunction() && !path.isArrowFunctionExpression()) {
+                return true;
+              }
+              return false;
+            });
+            if (!func.findParent(path => path === prop)) {
+              // if func is not child of prop, which means
+              // `new.target` is leaked to the upper `new.target` values.
+              // thus we should replace it with `undefined` (`void 0` here)
+              path.replaceWith(scope.buildUndefinedNode());
+            }
+          }
+        },
+      });
+    }
+
     switch (true) {
       case isStaticBlock:
         staticNodes.push(

packages/babel-plugin-transform-new-target/test/fixtures/general/class-properties-loose/exec.js

@@ -0,0 +1,9 @@
+class Foo {
+  constructor() {
+    this.Bar = class {
+      static p = new.target
+    }
+  }
+}
+
+expect((new Foo).Bar.p).toBeUndefined()

packages/babel-plugin-transform-new-target/test/fixtures/general/class-properties-loose/input.js

@@ -0,0 +1,20 @@
+class Foo {
+  constructor() {
+    this.Bar = class {
+      static p = new.target
+      static p1 = class { constructor() { new.target } } // should not replace
+      static p2 = new function () { new.target } // should not replace
+      static p3 = () => { new.target } // should replace
+      static p4 = function () { new.target } // should not replace
+      q = new.target // should not replace
+    }
+  }
+
+  test = function() {
+    new.target;
+  };
+
+  test2 = () => {
+    new.target;
+  }
+}

packages/babel-plugin-transform-new-target/test/fixtures/general/class-properties-loose/options.json

@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    "transform-new-target",
+    "transform-arrow-functions",
+    ["proposal-class-properties", { "loose": true }]
+  ]
+}

packages/babel-plugin-transform-new-target/test/fixtures/general/class-properties-loose/output.js

@@ -0,0 +1,35 @@
+class Foo {
+  constructor() {
+    var _newtarget = this.constructor,
+        _class,
+        _temp;
+
+    this.test = function _target() {
+      this instanceof _target ? this.constructor : void 0;
+    };
+
+    this.test2 = function () {
+      _newtarget;
+    };
+
+    this.Bar = (_temp = _class = class _target2 {
+      constructor() {
+        this.q = this.constructor;
+      } // should not replace
+
+
+    }, _class.p = void 0, _class.p1 = class _target3 {
+      constructor() {
+        this.constructor;
+      }
+
+    }, _class.p2 = new function _target4() {
+      this instanceof _target4 ? this.constructor : void 0;
+    }(), _class.p3 = function () {
+      void 0;
+    }, _class.p4 = function _target5() {
+      this instanceof _target5 ? this.constructor : void 0;
+    }, _temp);
+  }
+
+}

packages/babel-plugin-transform-new-target/test/fixtures/general/class-properties/exec.js

@@ -0,0 +1,9 @@
+class Foo {
+  constructor() {
+    this.Bar = class {
+      static p = new.target
+    }
+  }
+}
+
+expect((new Foo).Bar.p).toBeUndefined()

packages/babel-plugin-transform-new-target/test/fixtures/general/class-properties/input.js

@@ -1,4 +1,15 @@
 class Foo {
+  constructor() {
+    this.Bar = class {
+      static p = new.target
+      static p1 = class { constructor() { new.target } } // should not replace
+      static p2 = new function () { new.target } // should not replace
+      static p3 = () => { new.target } // should replace
+      static p4 = function () { new.target } // should not replace
+      q = new.target // should not replace
+    }
+  }
+
   test = function() {
     new.target;
   };

packages/babel-plugin-transform-new-target/test/fixtures/general/class-properties/options.json

@@ -2,6 +2,6 @@
   "plugins": [
     "transform-new-target",
     "transform-arrow-functions",
-    ["proposal-class-properties", { "loose": true }]
+    ["proposal-class-properties", { "loose": false }]
   ]
 }

packages/babel-plugin-transform-new-target/test/fixtures/general/class-properties/output.js

@@ -1,14 +1,33 @@
 class Foo {
   constructor() {
-    var _newtarget = this.constructor;
+    var _newtarget = this.constructor,
+        _class,
+        _temp;
 
-    this.test = function _target() {
+    babelHelpers.defineProperty(this, "test", function _target() {
       this instanceof _target ? this.constructor : void 0;
-    };
-
-    this.test2 = function () {
+    });
+    babelHelpers.defineProperty(this, "test2", function () {
       _newtarget;
-    };
+    });
+    this.Bar = (_temp = _class = class _target2 {
+      constructor() {
+        babelHelpers.defineProperty(this, "q", this.constructor);
+      } // should not replace
+
+
+    }, babelHelpers.defineProperty(_class, "p", void 0), babelHelpers.defineProperty(_class, "p1", class _target3 {
+      constructor() {
+        this.constructor;
+      }
+
+    }), babelHelpers.defineProperty(_class, "p2", new function _target4() {
+      this instanceof _target4 ? this.constructor : void 0;
+    }()), babelHelpers.defineProperty(_class, "p3", function () {
+      void 0;
+    }), babelHelpers.defineProperty(_class, "p4", function _target5() {
+      this instanceof _target5 ? this.constructor : void 0;
+    }), _temp);
   }
 
 }