Neat feature of typescript classes I don't know the name of is broken

[danieltroger]

🐛 bug report

So if you write private or public next to a constructor argument in typescript classes that apparently automatically makes it say this.argname = argname (how is this feature called??) however with a special concoction of config files that I happen to use, parcel breaks this feature.

It has something to do with babel as it doesn't happen when using swc with parcel, but I can't reproduce it with the babel REPL either which is why I put it here. Maybe it has to do with @parcel/babel-preset-env?

🎛 Configuration (.babelrc, package.json, cli command)

Pls see attached .zip file. Target needs to be ie 11 and babel config file looks like this:

module.exports = {
  presets: ["@babel/preset-typescript", "@parcel/babel-preset-env"]
};

🤔 Expected Behavior

👀 and then 4 is logged to the console.

😯 Current Behavior

undefined and then undefined is logged to the console.

💁 Possible Solution

Make so that it works correctly.

🔦 Context

Figured out that my compatibility builds of sentry.io have been broken for months. Dived into it and this seems to be the issue, since they use this syntax/typescript feature and the code relying on it breaks.

💻 Code Sample

Run yarn install and then yarn build:

parcel_messed_up_classes.zip

The code:

const API_VERSION = 4;

class Bruh {
  public a_method(): void {
    console.log(this._version);
  }
  public constructor(
    public options: string,
    private readonly _version: number = API_VERSION
  ) {
    console.log(this.options);
  }
}
var instance = new Bruh("👀");
instance.a_method();

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-nightly.912+145bfb82
Node	v17.0.1
npm/Yarn	3.1.0
Operating System	macOS 10.15.7 (19H1419)

[mischnic]

Transpiling it in your project using yarn babel index.ts -o index.js also produces a file that prints undefined twice. So this is a Babel bug.

It seems to ignore the public/private:

  function Bruh(options, _version = API_VERSION) {
    _classCallCheck(this, Bruh);

    console.log(this.options);
  }

Can you open a Babel issue for this?

[mischnic]

Also, they're apparently called parameter properties: https://www.typescriptlang.org/docs/handbook/2/classes.html#parameter-properties

[danieltroger]

FML it's a feature or something, when changing the order of "@babel/preset-typescript", "@parcel/babel-preset-env" it works 😫
see babel/babel#12066

Thanks for the help troubleshooting though.

Would it match the parcel philosophy to warn about something like this?

Also unrelated question, will parcel automatically update babel once babel/babel#13961 lands in a release or do I need to open an issue about it?