class-property transform leaks new.target in initializer to upper level

[JLHwung]

Bug Report

• I would like to work on a fix!

Current behavior

• REPL

(new C).Foo.p evaluates to C.

Input Code

class C {
  constructor() {
    this.Foo = class {
      static p = new.target
    }
  }
}

Expected behavior
(new C).Foo.p should evaluate to undefined.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)
See REPL configs

Environment
REPL

Possible Solution
When we are converting class properties into defineProperty calls that are appended to the class, we should replace new.target in class field initializers to undefined if it is associated to the class scope, otherwise new.target is leaked to the upper new.target values.

The replacing step can be inserted after super() is replaced in initializers:

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

Line 684 in bab5c62

const replaced = replaceThisContext(prop, ref, superRef, state, loose);

More test examples:

class C {
  constructor() {
    this.Foo = class {
      static p1 = class { constructor() { new.target } } // should not replace
      static p2 = new function () { new.target } // should not replace
      static p3 = () => { new.target } // should replace
    }
  }
}

[babel-bot]

Hey @JLHwung! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[nicolo-ribaudo]

If it is the first time that you contribute to Babel, follow these steps: (you need to have make and yarn available on your machine)

1. Write a comment there to let other possible contributors know that you are working on this bug.
2. Fork the repo
3. Run git clone https://github.com/<YOUR_USERNAME>/babel.git && cd babel
4. Run yarn && make bootstrap
5. Wait ⏳
6. Run make watch (or make build whenever you change a file)
7. Add a test (only input.js and exec.js; output.js will be automatically generated)
8. Update the code!
9. yarn jest class-properties to run the tests
   • If some test outputs don't match but the new results are correct, you can delete the bad output.js files and run the tests again
   • If you prefer, you can run OVERWRITE=true yarn jest [name-of-the-package-to-test] and they will be automatically updated.
10. If it is working, run make test to run all the tests
11. Run git push and open a PR!

[iamfotx]

@nicolo-ribaudo I would love to work around this one...

[nicolo-ribaudo]

It's yours!

If you need any help feel free to ask.

[colinaaa]

Any progress on this? I can help on this!