bug: Element decorator does not work when targeting ES2022 and setting useDefineForClassFields to true

[henning96]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.0.1

Current Behavior

When targeting ES2022 and having useDefineForClassFields set to truthy, Stencil generates an additional class field for properties annotated with Element.
This results in both a class field and a getter for the property.
Stencil should only generate the getter.
This was already tackled for State and Prop decorated properties but not for Element: #3614.

Expected Behavior

Stencil should handle the Element decorator in the same way than the other decorators such as State and Prop which are listed here: https://github.com/ionic-team/stencil/blob/main/src/compiler/transformers/decorators-to-static/decorators-constants.ts#L17.
There shouldn't be an additional class field being generated next to the getter.

System Info

System: node 18.16.0
    Platform: darwin (22.5.0)
   CPU Model: Apple M1 (8 cpus)
    Compiler: /Users/henning/Projects/test-app/node_modules/@stencil/core/compiler/stencil.js
       Build: 1687953951
     Stencil: 4.0.1 ⛹
  TypeScript: 5.0.4
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.18.1

Steps to Reproduce

To reproduce the bug, set the Typescript target to ES2022 and set the useDefineForClassFields setting to true.
The problem is actually pretty much the same than what was already tacked in this Pull Request: #3614.
But for some reason, it doesn't consider the Element decorator. When making use of the Element decorator in a Stencil component while having the mentioned TypeScript settings, Stencil generates both a class field for the Element and a getter. The Browser only evaluates the class field, so that the annotated property is always undefined during runtime.

It starts to work fine when the list of decorators to rewrite is extended with Element. I mean this constant here: https://github.com/ionic-team/stencil/blob/main/src/compiler/transformers/decorators-to-static/decorators-constants.ts#L17.

When using the provided reproduction repo:
Build the repo using npm run build.
Inspect the generated code in app-home.entry.js. It contains both a class field for the annotated property and a getter.

Code Reproduction URL

https://github.com/henning96/stencil-bug-element

Additional Information

No response

[tanner-reits]

Hey there @henning96 👋

I was able to confirm this issue and get a PR open (#4547) with a quick fix! I'll get this labeled while we wait for that PR to land and make its way into an upcoming release. Thanks for reporting and adding the additional detail! It made resolving the problem much easier.

[rwaskiewicz]

The fix for this issue has been released as a part of today's Stencil v4.0.2 release

[henning96]

Thank you guys