bug: constructor() method no longer runs for components implementing an interface

[kdeds]

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.19.0

Current Behavior

Our components each implement a common interface. We initialize some properties in the constructor(). This used to work fine, but now in Stencil 2.19 the function does not seem to run.

Here is a simple example. In the code below, this.classProps is undefined in the render method.

import { Component, h} from '@stencil/core';
import { RhclComponent } from "../../model/RhclComponent";

@Component({
  tag: 'rhcl-example',
  styleUrl: 'example.scss',
  shadow: true
})
export class Example implements RhclComponent {

  private classProps: Array<string>;

  constructor() {
    this.classProps = ["variant", "theme"];
  }

  render() {
    console.log(this.classProps); // this is undefined
    return (
      <div>
      </div>
    );
  }
}

Expected Behavior

Code in constructor() would run and this.classProps in the above example would be an array with the entries ["variant", "theme"] .

Steps to Reproduce

1. Create a component which implements an interface.
2. Add some code in the constructor().
3. With Stencil 2.18 installed, verify the code in the constructor runs.
4. With Stencil 2.19 installed, observe that the code in the constructor does not run.

Code Reproduction URL

https://github.com/kdeds/stencil-constructor-bug

Additional Information

No response

[kdeds]

Seems to be related to bd340b8

We moved our constructor code into componentWillLoad() which is fine for us but maybe there is something that can be done for backwards compatibility, or documentation to make it clear not to use constructors. This took a while to track down today and was breaking our whole library 😅

[alicewriteswrongs]

Hey @kdeds, I'm going to look into this today. Stencil should allow you to use constructors, so this is a bug which should be fixed. If possible I'd recommend staying on a 2.18.x version for now, no need to go ahead with modifying your component library to be compatible with the bug!

Thanks for providing the reproduction!

[alicewriteswrongs]

Ah ok I believe I understand what the problem is. There is an explainer here about the change which resulted in this behavior: f977830

In short, to support setting typescript to emit ES2022+ code we need to transpile class fields, like this one:

class MyComponent {
  @Prop() foo: string = "hey!";
}

to the following:

class MyComponent {
  constructor () {
    this.foo = "hey!";
  }
}

A bunch of Stencil's runtime behavior for props and so on is based on using Object.defineProperty to setup getters and setters, and those don't play so well with the new support for class fields as standardized in ES2022, so we need to do that conversion.

Anyhow - I looked through our implementation of that transpilation and there was an oversight where existing statements inside of the constructor method are not preserved in the case where a statement has to be added.

This PR fixes the issue: #3776

[rwaskiewicz]

Hey @kdeds 👋

@alicewriteswrongs' fix has been included in a pre-release of Stencil, v2.19.2-0. Can you please install it and verify that it fixes the issue?

[kdeds]

Sorry, had some weird issues trying to install it this morning but just gave it another try and got it downloaded. Looks like the fix works! Thank you for the quick turnaround :D

[rwaskiewicz]

The fix for this bug has been released as a part of Stencil v2.19.2. As a result, I'm going to close this issue. Should the bug re-appear, please feel free to open a new issue. Thanks again!