feat(transformer/class-properties): transform static/instance accessor methods

[Dunqing]

This PR supports transforming private getter or setter methods, and the output is a little different from Babel's output, For example:

Input:

class Cls {
  #prop = 0;

  get #accessor() {
    return this.#prop;
  }
  set #accessor(v) {
    console.log(arguments);
    this.#prop = v;
  }

  constructor() {
    console.log(this.#accessor)
    [this.#accessor] = [1];
  }
}

Babel's output:

var _prop = new WeakMap();
var _Cls_brand = new WeakSet();
class Cls {
  constructor() {
    babelHelpers.classPrivateMethodInitSpec(this, _Cls_brand);
    babelHelpers.classPrivateFieldInitSpec(this, _prop, 0);
    console.log(babelHelpers.classPrivateGetter(_Cls_brand, this, _get_accessor));
    [babelHelpers.classPrivateGetter(_Cls_brand, this, _get_accessor)] = [1];
  }
}
function _get_accessor(_this) {
  return babelHelpers.classPrivateFieldGet(_prop, _this);
}
function _set_accessor(_this2, v) {
  var _arguments = [].slice.call(arguments, 1);
  console.log(_arguments);
  babelHelpers.classPrivateFieldSet(_prop, _this2, v);
}

Oxc's output:

var _prop = new WeakMap();
var _Cls_brand = new WeakSet();
class Cls {
        constructor() {
                babelHelpers.classPrivateMethodInitSpec(this, _Cls_brand);
                babelHelpers.classPrivateFieldInitSpec(this, _prop, 0);
                console.log(_get_accessor.call(babelHelpers.assertClassBrand(_Cls_brand, this)));
                [babelHelpers.toSetter(_set_accessor.bind(babelHelpers.assertClassBrand(_Cls_brand, this)), [])._] = [1];
        }
}
function _get_accessor() {
        return babelHelpers.classPrivateFieldGet2(_prop, this);
}
function _set_accessor(v) {
        console.log(arguments);
        babelHelpers.classPrivateFieldSet2(_prop, this, v);
}

Main difference

// Babel
+ console.log(babelHelpers.classPrivateGetter(_Cls_brand, this, _get_accessor));
+ [babelHelpers.classPrivateGetter(_Cls_brand, this, _get_accessor)] = [1];

+ function _get_accessor(_this) {
+   return babelHelpers.classPrivateFieldGet(_prop, _this);
+ }

+ function _set_accessor(_this2, v) {
+   var _arguments = [].slice.call(arguments, 1);
+   console.log(_arguments);
+   babelHelpers.classPrivateFieldSet(_prop, _this2, v);
+ }

// Oxc
-  console.log(_get_accessor.call(babelHelpers.assertClassBrand(_Cls_brand, this)));- - 
-  [babelHelpers.toSetter(_set_accessor.bind(babelHelpers.assertClassBrand(_Cls_brand, this)), [])._] = [1];

- function _get_accessor() {
-   return babelHelpers.classPrivateFieldGet2(_prop, this);
- }

- function _set_accessor(v) {
-   console.log(arguments);
-   babelHelpers.classPrivateFieldSet2(_prop, this, v);
- }

From the main differences, we can see that Babel handles getter and setter methods using classPrivateGetter and classPrivateSetter helper functions, which causes all use this and arguments needs to rewrite to use a temp var instead in getter and setter methods. This is unnecessary and is not an efficient transformation for us.

Instead, I adapt binding a this instead of passing in this, this way we don't need to rewrite anything. We can't control the helper library for now, so I just transformed the AST to bind this, in the future, we can create a helper function to do the same thing.

[Dunqing]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• chore(transformer): enable class-properties plugin #7750
• feat(transformer/class-properties): transform static/instance accessor methods #8132 👈 (View in Graphite)
• feat(transformer/class-properties): transform static private method invoking #8117
• feat(transformer/class-properties): insert statements after statement of class expression #8116
• feat(transformer/class-properties): transform super expressions and identifiers that refers to class binding in private method #8106
• refactor(transformer/class-properties): share replace_class_name_with_temp_var in class_properties #8105
• refactor(transformer/class-properties): remove all *_if_super methods in static_block_and_prop_init #8104
• refactor(transformer/class-properties): move supers to super_converter #8103
• feat(transformer/class-properties): transform private field expression which invokes private method #8102
• feat(transformer/class-properties): transform callee which invokes private method #8100
• feat(transformer/class-properties): transform private methods #8099
• chore(transformer): enable Babel's private-methods plugin tests #8098
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• 0-merge - adds this PR to the back of the merge queue
• hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[codspeed-hq]

CodSpeed Performance Report

Merging #8132 will not alter performance

_{Comparing 12-26-feat_transformer_class-properties_transform_static_instance_accessor_methods (713db99) with 12-26-feat_transformer_class-properties_transform_static_private_method_invoking (7a754fa)}

Summary

✅ 29 untouched benchmarks