bug: The default values of class‘s attribute defined through the Prop and State decorators cannot be used directly.

[xueyibokong]

Prerequisites

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

Stencil Version

v3.0.0

Current Behavior

I write like this

import { Component, h, Prop, State, Host } from "@stencil/core";

@Component({
  tag: "my-component",
  styleUrl: "my-component.css",
  shadow: true
})
export class MyComponent {
  @Prop() text: string = "prop text";
  innerText: string = this.text;

  @State() stateText: string = "state text";
  innerStateText: string = this.stateText;

  defalutText: string = "default text";
  innerDefaultText: string = this.defalutText;

  render() {
    return (
      <Host>
        <div>{`${this.innerText}`}</div>
        <div>{`${this.innerStateText}`}</div>
        <div>{`${this.innerDefaultText}`}</div>
      </Host>
    );
  }
}

Expected Behavior

I expect

prop text
state text
default text

But actually

undefined
undefined
default text

System Info

No response

Steps to Reproduce

Please open this link directly. I have reproduced it in codesandbox. Demo address

Code Reproduction URL

https://codesandbox.io/s/spring-wind-ukwzsx?file=/src/components/my-component/my-component.tsx

Additional Information

No response

[rwaskiewicz]

Thanks! I confirmed:

• this occurs
• the values do get set properly if one were to use the class members decorated with @Prop and @State
• this occurs in Stencil v2 as well

I'm going to get this labeled to get it ingested into our backlog

[xueyibokong]

Thanks! I confirmed:

• this occurs
• the values do get set properly if one were to use the class members decorated with @Prop and @State
• this occurs in Stencil v2 as well

I'm going to get this labeled to get it ingested into our backlog

Hi, Could you tell me the expected time to solve this problem?

[xueyibokong]

@rwaskiewicz

[gikey]

Same issue, please resolve this issue as soon as possible. @rwaskiewicz

[aoilti]

Thanks! I confirmed:

• this occurs
• the values do get set properly if one were to use the class members decorated with @Prop and @State
• this occurs in Stencil v2 as well

I'm going to get this labeled to get it ingested into our backlog

Hello, about this issue, we can do something? but we don't quite understand some design ideas, If you know where to modify it, we can proactively fix this issue.

Thanks!

[rwaskiewicz]

Hey folks,

I do not have a timeline as to when we'll get around to looking further into this issue. It is currently in our backlog and will be worked on at some point. I kindly ask that folks use the '👍' emoji on the github issue summary to express need for this fix, as it is far easier for the team to gauge community interest using those, rather than comments. Thanks!

[maxpatiiuk]

Hi,

I encountered the same issue. This occurs when tsconfig.json has "target": "es2022" or higher. Does not occur when set to "target": "es2021" or lower. Caused by the fact that in newer JS output targets, the default values syntax is used (rather than having defaults be set in the constructor), which causes them to be executed before the registerComponent(this, hostRef) line.

I have a smallest reproducible case, explanation of the cause, and 3 proposed solutions in this repo: https://github.com/maxpatiiuk/stencil-default-values-bug @rwaskiewicz hope this helps with getting the issue resolved quicker)

---

edit: Hmm, I just found that Stencil already includes some code that is supposed to prevent this issue from happening:

https://github.com/ionic-team/stencil/blob/ab5bc2bd25b267f100ba6cb3482c9d44c6c703b4/src/compiler/transformers/decorators-to-static/convert-decorators.ts#L300-L439

But right now it only does that transformation for properties with State or Prop - if you modify that transformation to apply for all properties, that should resolve this issue (assuming that won't cause new problems)