Support named evaluation for decorated anonymous class exp by JLHwung · Pull Request #16148 · babel/babel

JLHwung · 2023-12-01T04:16:59Z

Q	A
Fixed Issues?	Closes #15122, Part 1 of #16117
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

This PR supersedes #15122.

The only change compared with #15122 is that we now apply toPropertyKey when memoising the computed key passed to the setFunctionName helper call. So that we can now handle the following edge case as well

function dec (target, context) {
  // should print "2.71828", "2.71828"
  console.log(target.name, context.name)
}
new class C {
  [{ [Symbol.toPrimitive]: () => Symbol(2.71828) }] = @dec class { p; };
}

The implementation is not changed very much. I tried to reorganize the changes so the it might be easier to review by commits.

In #15122 we discussed whether we should merge the NamedEvaluationVisitoryFactory with our current function name utilities. To recap, we introduced a setFunctionName runtime helper in #16144, at this point we have two helpers that can name a function:

babel-helper-function-name (A): an AST transform that wraps a given function with a new function whose id is the desired name, and preserved the source of the given function
- Pros: Works for ES3, even in old browsers where redefining the name property might throw
- Cons: Does not support naming class. Does not support arbitrary name, e.g. it can't name the function as "output the best number between 2 and 3" because that is not a valid identifier. Bigger output than approach B
babel-runtime/setFunctionName (B): a runtime call to set the name property of the given function
- Pros: Works for both classes and functions, supports any name, smaller output than approach A when runtime is externalized
- Cons: Does not work in old browsers where redefining the name property might throw

They are used by two transforms: The approach A is used by function-name transform and the approach B is used by the decorators transform in this PR as well as the decorator runtime.

I think we can consider merge NamedEvaluationVisitoryFactory with the function-name transform. The factory generates a visitor that will take care of various AST subjects to the named evaluation, and the function-name transform can decide whether it should use approach A or approach B for the related AST nodes. We can also come up with a compat table so that the function-name transform can emit the SetFunctionName call when the browser supports it, and fallback to the heavier helper-function-name AST transform.

babel-bot · 2023-12-01T04:19:16Z

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

JLHwung · 2023-12-01T04:20:07Z

...ansform-class-properties/test/fixtures/nested-class/super-property-in-accessor-key/output.js

+    _computedKey = babelHelpers.get((_thisSuper = babelHelpers.assertThisInitialized(_this), babelHelpers.getPrototypeOf(Outer.prototype)), "toString", _thisSuper).call(_thisSuper);
    var _A = /*#__PURE__*/new WeakMap();
-    _babelHelpers$get$cal = babelHelpers.get((_thisSuper = babelHelpers.assertThisInitialized(_this), babelHelpers.getPrototypeOf(Outer.prototype)), "toString", _thisSuper).call(_thisSuper);
-    _babelHelpers$get$cal2 = babelHelpers.get((_thisSuper = babelHelpers.assertThisInitialized(_this), babelHelpers.getPrototypeOf(Outer.prototype)), "toString", _thisSuper).call(_thisSuper);


This is a bug fix. The input is

"use strict"; class Hello { toString() { return 'hello'; } } class Outer extends Hello { constructor() { super(); class Inner { accessor [super.toString()] = 'hello'; } return new Inner(); } } expect(new Outer().hello).toBe('hello');

As we can see from the output, the super.toString() is executed twice when we transform the accessor to get-set pairs since we forgot to memoize the computed key.

JLHwung · 2023-12-01T04:22:15Z

...lugin-proposal-decorators/test/fixtures/2021-12-classes/expressions-named-evaluation/exec.js

+// prettier-ignore
+const logs = [];
+const decFactory = (logs) => (value, context) => {
+  expect(value.name).toEqual(context.name);


The test is more hardened than #15122, here we further assert value.name should equal context.name.

JLHwung · 2023-12-01T04:25:34Z

packages/babel-plugin-proposal-decorators/src/transformer-2023-05.ts

-  if (!classDecorators && !hasElementDecorators) return;
+  // If nothing is decorated and no assignments inserted, return
+  if (!classDecorators && !hasElementDecorators) {
+    if (assignments.length > 0) {


In this case, we don't have any decorators, but we should still transform the class accessors, the assignments at this time must be the memoized accessor keys.

Can you add this as an in-code comment? :)

liuxingbaoyu · 2023-12-01T06:16:13Z

...ugin-proposal-decorators/test/fixtures/2022-03-accessors/undecorated-static-public/output.js

Is this expected?

Yes, the input is

const dec = () => {}; class Foo { accessor a; accessor b = 123; accessor ['c'] = 456; }

And 'c' should not be computed twice. Though in this case there is no behaviour changes if 'c' is used in both getter and setter keys.

https://github.com/babel/babel/pull/16148/files#diff-ec0a7c89e1c00ced2b4a8ccee78aa564e798866f0815a815ff14c99bb49bb821R600
I just noticed that we have static nodes as a special case, literals appear to be static as well. :)

liuxingbaoyu

Thanks!

nicolo-ribaudo

Note that in general we don't preserve correct function names, but we only try to give some useful names for debugging purposes in stack traces. For example, we compile

0, {
  "ab method"() {}
}

to

0,
  {
    "ab method": function abMethod() {}
  };

However, I think this PR is fine because the class name is explicitly exposed to decorators through context.name, and not just "accidentallyviaFunction.prototype.name`.

packages/babel-plugin-proposal-decorators/src/transformer-2023-05.ts

nicolo-ribaudo · 2023-12-04T11:34:52Z

packages/babel-plugin-proposal-decorators/src/transformer-2023-05.ts

-  if (!classDecorators && !hasElementDecorators) return;
+  // If nothing is decorated and no assignments inserted, return
+  if (!classDecorators && !hasElementDecorators) {
+    if (assignments.length > 0) {


Can you add this as an in-code comment? :)

…thVar

…ctory

…-05.ts Co-authored-by: Nicolò Ribaudo <hello@nicr.dev>

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@babel/traverse](https://babel.dev/docs/en/next/babel-traverse) ([source](https://github.com/babel/babel)) | resolutions | patch | [`7.23.5` -> `7.23.7`](https://renovatebot.com/diffs/npm/@babel%2ftraverse/7.23.5/7.23.7) | --- ### Release Notes <details> <summary>babel/babel (@babel/traverse)</summary> ### [`v7.23.7`](https://github.com/babel/babel/blob/HEAD/CHANGELOG.md#v7237-2023-12-29) [Compare Source](babel/babel@v7.23.6...v7.23.7) ##### 🐛 Bug Fix - `babel-traverse` - [#16191](babel/babel#16191) fix: Crash when removing without `Program` ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-helpers`, `babel-plugin-proposal-decorators` - [#16180](babel/babel#16180) fix: Class decorator `ctx.kind` is wrong ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-plugin-proposal-decorators` - [#16170](babel/babel#16170) Fix decorator initProto usage in derived classes ([@JLHwung](https://github.com/JLHwung)) - `babel-core` - [#16167](babel/babel#16167) Avoid unpreventable `unhandledRejection` events ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) ##### 🏠 Internal - `babel-helper-create-class-features-plugin` - [#16186](babel/babel#16186) chore: Update deps ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-helper-create-class-features-plugin`, `babel-plugin-proposal-decorators` - [#16177](babel/babel#16177) Merge decorators into class features ([@JLHwung](https://github.com/JLHwung)) ### [`v7.23.6`](https://github.com/babel/babel/blob/HEAD/CHANGELOG.md#v7236-2023-12-11) [Compare Source](babel/babel@v7.23.5...v7.23.6) ##### 👓 Spec Compliance - `babel-generator`, `babel-parser`, `babel-types` - [#16154](babel/babel#16154) Remove `TSPropertySignature.initializer` ([@fisker](https://github.com/fisker)) - `babel-helpers`, `babel-plugin-proposal-decorators`, `babel-plugin-transform-class-properties`, `babel-plugin-transform-class-static-block`, `babel-plugin-transform-runtime`, `babel-preset-env`, `babel-runtime-corejs2`, `babel-runtime-corejs3`, `babel-runtime`, `babel-types` - [#16139](babel/babel#16139) Apply `toPropertyKey` on decorator context name ([@JLHwung](https://github.com/JLHwung)) ##### 🐛 Bug Fix - `babel-generator` - [#16166](babel/babel#16166) fix: Correctly indenting when `retainLines` is enabled ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-helpers`, `babel-plugin-proposal-explicit-resource-management` - [#16150](babel/babel#16150) `using`: Allow looking up `Symbol.dispose` on a function ([@odinho](https://github.com/odinho)) - `babel-plugin-proposal-decorators`, `babel-plugin-transform-class-properties` - [#16161](babel/babel#16161) Ensure the `[[@@toPrimitive]]` call of a decorated class member key is invoked once ([@JLHwung](https://github.com/JLHwung)) - [#16148](babel/babel#16148) Support named evaluation for decorated anonymous class exp ([@JLHwung](https://github.com/JLHwung)) - `babel-plugin-transform-for-of`, `babel-preset-env` - [#16011](babel/babel#16011) fix: `for of` with `iterableIsArray` and shadowing variable ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) - `babel-helpers`, `babel-plugin-proposal-decorators`, `babel-runtime-corejs2`, `babel-runtime-corejs3`, `babel-runtime` - [#16144](babel/babel#16144) Set function name for decorated private non-field elements ([@JLHwung](https://github.com/JLHwung)) - `babel-plugin-transform-typescript` - [#16137](babel/babel#16137) Fix references to enum values with merging ([@nicolo-ribaudo](https://github.com/nicolo-ribaudo)) ##### 🔬 Output optimization - `babel-helper-create-class-features-plugin`, `babel-plugin-transform-class-properties` - [#16159](babel/babel#16159) Reuse computed key memoiser ([@JLHwung](https://github.com/JLHwung)) - `babel-helpers`, `babel-plugin-proposal-decorators` - [#16160](babel/babel#16160) Optimize decorator helper size ([@liuxingbaoyu](https://github.com/liuxingbaoyu)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.vylpes.xyz/RabbitLabs/random-bunny/pulls/129 Co-authored-by: Renovate Bot <renovate@vylpes.com> Co-committed-by: Renovate Bot <renovate@vylpes.com>

JLHwung added PR: Bug Fix 🐛 A type of pull request used for our changelog categories Spec: Decorators labels Dec 1, 2023

JLHwung commented Dec 1, 2023

View reviewed changes

liuxingbaoyu reviewed Dec 1, 2023

View reviewed changes

liuxingbaoyu approved these changes Dec 2, 2023

View reviewed changes

nicolo-ribaudo approved these changes Dec 4, 2023

View reviewed changes

JLHwung and others added 11 commits December 4, 2023 11:36

cleanup

4a7fc10

refactor: decouple needsDeclaraionForClassBinding from replaceClassWi…

3c75d86

…thVar

avoid redundant node clone

dc4848a

refactor: refactor variable declarator named evaluation to visitor fa…

2c17135

…ctory

handle other named evaluation cases

96f148b

Add test cases

4a01338

Update test fixtures

5328a95

update properties test fixtures

8d524c3

allow literals in keys of transpiled accessors

0efed07

Update packages/babel-plugin-proposal-decorators/src/transformer-2023…

b436b9c

…-05.ts Co-authored-by: Nicolò Ribaudo <hello@nicr.dev>

address review comments

5c6d28a

JLHwung force-pushed the support-named-evaluation-for-decorated-anonymous-class branch from 96c0657 to 5c6d28a Compare December 4, 2023 16:36

JLHwung merged commit c5c3d45 into babel:main Dec 4, 2023

JLHwung deleted the support-named-evaluation-for-decorated-anonymous-class branch December 4, 2023 17:22

JLHwung mentioned this pull request Dec 4, 2023

[Bug]: Stage 3 decorators behavior differences from TypeScript #16117

Closed

7 tasks

github-actions bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Mar 7, 2024

github-actions bot locked as resolved and limited conversation to collaborators Mar 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Support named evaluation for decorated anonymous class exp#16148

Support named evaluation for decorated anonymous class exp#16148
JLHwung merged 11 commits intobabel:mainfrom
JLHwung:support-named-evaluation-for-decorated-anonymous-class

JLHwung commented Dec 1, 2023 •

edited

Loading

Uh oh!

babel-bot commented Dec 1, 2023 •

edited

Loading

Uh oh!

JLHwung Dec 1, 2023

Uh oh!

JLHwung Dec 1, 2023 •

edited

Loading

Uh oh!

JLHwung Dec 1, 2023

Uh oh!

nicolo-ribaudo Dec 4, 2023

Uh oh!

liuxingbaoyu Dec 1, 2023

Uh oh!

JLHwung Dec 1, 2023

Uh oh!

liuxingbaoyu Dec 2, 2023

Uh oh!

liuxingbaoyu left a comment

Uh oh!

nicolo-ribaudo left a comment

Uh oh!

Uh oh!

Uh oh!

nicolo-ribaudo Dec 4, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

JLHwung commented Dec 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

babel-bot commented Dec 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JLHwung Dec 1, 2023

Choose a reason for hiding this comment

Uh oh!

JLHwung Dec 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JLHwung Dec 1, 2023

Choose a reason for hiding this comment

Uh oh!

nicolo-ribaudo Dec 4, 2023

Choose a reason for hiding this comment

Uh oh!

liuxingbaoyu Dec 1, 2023

Choose a reason for hiding this comment

Uh oh!

JLHwung Dec 1, 2023

Choose a reason for hiding this comment

Uh oh!

liuxingbaoyu Dec 2, 2023

Choose a reason for hiding this comment

Uh oh!

liuxingbaoyu left a comment

Choose a reason for hiding this comment

Uh oh!

nicolo-ribaudo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

nicolo-ribaudo Dec 4, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

JLHwung commented Dec 1, 2023 •

edited

Loading

babel-bot commented Dec 1, 2023 •

edited

Loading

JLHwung Dec 1, 2023 •

edited

Loading