Convert private methods to fields when they are supported

[nicolo-ribaudo]

Q	A
Fixed Issues?	Fixes #12691
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?	Yes
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

This PR reduces the output size when targeting engines with native support for class fields, in two ways:

1. It allows compiling decorators without compiling class fields in classes without decorators
2. It transforms private methods to private fields when possible.

While (1) is just relaxing a check (but in the same package), (2) leverages the new api.targets() api, checking inside the private methods plugin if class fields are supported.

This means that, when using preset-env and using the top-level targets option, the effective compat data for proposal-class-properties change from

  "proposal-private-methods": {
    "chrome": "84",
    "opera": "70",
    "edge": "84",
    "electron": "10.0"
  },

to

  "proposal-class-properties": {
    "chrome": "74",
    "opera": "62",
    "edge": "79",
    "node": "12",
    "samsung": "11",
    "electron": "6.0"
  },

You can see here the output difference when targeting Node.js 12:

Input

export class A extends B {
  #foo = 2;
  #bar = 3;

  #incFoo() {
    this.#foo += super.getIncrement();
  }

  get #doubleFoo() {
    return this.#foo * 2;
  }

  run(twice) {
    this.#incFoo();

    return this.#doubleFoo;
  }
}

Output (before this PR)

import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _classPrivateMethodGet from "@babel/runtime/helpers/classPrivateMethodGet";
import _classPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
import _classPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";

var _foo = new WeakMap();

var _bar = new WeakMap();

var _incFoo = new WeakSet();

var _doubleFoo = new WeakMap();

export class A extends B {
  constructor(...args) {
    super(...args);

    _doubleFoo.set(this, {
      get: _get_doubleFoo,
      set: void 0
    });

    _incFoo.add(this);

    _foo.set(this, {
      writable: true,
      value: 2
    });

    _bar.set(this, {
      writable: true,
      value: 3
    });
  }

  run(twice) {
    _classPrivateMethodGet(this, _incFoo, _incFoo2).call(this);

    return _classPrivateFieldGet(this, _doubleFoo);
  }

}

var _incFoo2 = function _incFoo2() {
  _classPrivateFieldSet(this, _foo, _classPrivateFieldGet(this, _foo) + _get(_getPrototypeOf(A.prototype), "getIncrement", this).call(this));
};

var _get_doubleFoo = function () {
  return _classPrivateFieldGet(this, _foo) * 2;
};

Terser output (before this PR): 667 bytes

import e from"@babel/runtime/helpers/get";
import t from"@babel/runtime/helpers/getPrototypeOf";
import r from"@babel/runtime/helpers/classPrivateMethodGet";
import i from"@babel/runtime/helpers/classPrivateFieldSet";
import s from"@babel/runtime/helpers/classPrivateFieldGet";
var a=new WeakMap,l=new WeakMap,o=new WeakSet,n=new WeakMap;
export class A extends B{constructor(...e){super(...e),n.set(this,{get:p,set:void 0}),o.add(this),a.set(this,{writable:!0,value:2}),l.set(this,{writable:!0,value:3})}run(e){return r(this,o,h).call(this),s(this,n)}}
var h=function(){i(this,a,s(this,a)+e(t(A.prototype),"getIncrement",this).call(this))},p=function(){return 2*s(this,a)};

Output (with this PR)

import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

var _incFoo, _get_doubleFoo;

export class A extends B {
  #incFoo = _incFoo || (_incFoo = function () {
    this.#foo += _get(_getPrototypeOf(A.prototype), "getIncrement", this).call(this);
  });
  #doubleFoo = Object.defineProperty({
    t: this
  }, "_", {
    get: _get_doubleFoo || (_get_doubleFoo = function () {
      return this.t.#foo * 2;
    })
  });
  #foo = 2;
  #bar = 3;

  run(twice) {
    this.#incFoo();
    return this.#doubleFoo._;
  }

}

Terser output (with this PR): 370 bytes

(I had to replace # with $, because terser doesn't support private fields yet)

import t from"@babel/runtime/helpers/get";
import o from"@babel/runtime/helpers/getPrototypeOf";
var e,r;
export class A extends B{$incFoo=e||(e=function(){this.$foo+=t(o(A.prototype),"getIncrement",this).call(this)});$doubleFoo=Object.defineProperty({t:this},"_",{get:r||(r=function(){return 2*this.t.$foo})});$foo=2;$bar=3;run(t){return this.$incFoo(),this.$doubleFoo._}}

---

I don't how how to label this PR 😂 Maybe a new [smaller output]?

[nicolo-ribaudo]

Example of feature (1): the first class is not transformed.

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/33467/

[nicolo-ribaudo]

@developit was proposing to add something like api.targets.support(name) to the RFC, so that this line then becomes

  if (api.targets.support("proposal-class-properties")) {

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6a18821:

Sandbox	Source
babel-repl-custom-plugin	Configuration
babel-plugin-multi-config	Configuration

[nicolo-ribaudo]

The trick here is to rely on native getters/setters. By doing so we don't have to worry about replacing this.#foo, this.#foo += 2, etc. with complex function calls, since we can just replace this.#foo with this.#foo._.

[JLHwung]

nit: consider merge this branch to

if (elem.isProperty()) {
      used.fields = used.fields ?? elem;
    }

[JLHwung]

Can you rebase since #12251 was reverted?

[nicolo-ribaudo]

@JLHwung Wdyt about the last commit to reduce the output size for accessors? Using terser, the output size for the code in the original PR description is now 346 bytes:

import o from"@babel/runtime/helpers/get";
import t from"@babel/runtime/helpers/getPrototypeOf";
var e,r;
export class A extends B{$incFoo=e||(e=function(){this.$foo+=o(t(A.prototype),"getIncrement",this).call(this)});$doubleFoo={__proto__:r||(r={get _(){return 2*this.t.$foo}}),t:this};$foo=2;$bar=3;run(o){return this.$incFoo(),this.$doubleFoo._}}

[JLHwung]

Shouldn't it be t.objectMethod?

[JLHwung]

CI error on Node.js 6 is related.

[nicolo-ribaudo]

I was wondering if it would be better to implement it as a separate plugin, similarly to what we do for preset-env bugfixes.

Or at least if we this plugin should have a compileToFields: true | false | "auto" option (defaults to auto),