bug: Stencil compiler overrides initial prop value from html

[theo-staizen]

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

2.10.0

Current Behavior

Environment: Compiling In browser. Not sure if this is happening in Node too.

As of 2.10.0, I noticed that the compiler is introducing an instance prop to the generated class and that causes it to clobber/overwrite the initial value given by the html string.

For example, given <my-cmp name="theo"></my-cmp> name will be undefined instead of theo

Expected Behavior

Initial values from html should be preserved during construction, similar to 2.9.0

The compiler from 2.9.0 outputs

let CmpA = class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
  }
  render() {
    return h("h1", null,
      "Hello ",
      this.name);
  }
};
__stencil_defineCustomElement(CmpA, [0, "cmp-a", {
    "name": [8]
  }]);

Steps to Reproduce

Given the following component

@Component({ tag: 'cmp-a' })
export class CmpA {
  @Prop() name
  render() {
    return <h1>Hello {this.name}</h1>
  }
}

The compiler outputs

let CmpA = class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
  }
  name; // <<<<<< THIS IS NEW AS OF 2.10.0
  render() {
    return h("h1", null,
      "Hello ",
      this.name);
  }
};
__stencil_defineCustomElement(CmpA, [0, "cmp-a", {
    "name": [8]
  }]);

Code Reproduction URL

https://jsfiddle.net/n5oL4613/

Additional Information

Possibly duplicates/relates to #3130

[rwaskiewicz]

I agree this probably relates to #3130, I'll see if I can take a closer look this afternoon after meetings or first thing in the AM

[rwaskiewicz]

👋 I confirmed that this is indeed related to #3130 - when no target field is given as a part of the second argument to transpileSync, Stencil defaults to ESNext. It's in that compilation target that this issue (and the one in #3130) that this presents.

I'm going to label this to tie it to the existing issue in our internal tracking system. In the meantime, there's a workaround where the target key/value pair can be added to the second argument of transpileSync like so:

const { code } = window.stencil.transpileSync(
  src, 
  {
     sourceMap: false,
+    target: 'es2020', 
  }
);

[theo-staizen]

Excellent, thank you for the quick response and the workaround.
I'll close the issue to reduce the noise :)