bug: Mixin Maximum Call Stack Size Exceeded

[blakeplumb]

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

"@stencil/core": "latest",

Current Behavior

I have props I need to share among several components. I have used a mixin to achieve this behavior and it has worked exactly as I needed. Thank you very much for the Mixin functionality.

I have run into an issue though if my prop uses the getter and setter logic.

private _hello?: string = "hello";
   /**
    * Hello World
    */
   @Prop()
   get hello() {
     return this._hello;
   }
   set hello(newHello: string) {
     this._hello = newHello;
   }

This results in the following error in the browser.

index.js:8 RangeError: Maximum call stack size exceeded
    at getHostRef (index.js:81:18)
    at MyComponent.get [as hello] (index.js:3550:29)
    at MyComponent.get [as hello] (index.js:3553:32)
    at MyComponent.get [as hello] (index.js:3553:32)
    at MyComponent.get [as hello] (index.js:3553:32)
    at MyComponent.get [as hello] (index.js:3553:32)
    at MyComponent.get [as hello] (index.js:3553:32)
    at MyComponent.get [as hello] (index.js:3553:32)
    at MyComponent.get [as hello] (index.js:3553:32)
    at MyComponent.get [as hello] (index.js:3553:32) 

Am I using Mixin not how they were intended by declaring my @Prop logic inside of them? If I am using them correctly, is the getter and setter logic not suppose to be used? The more common @Prop declaration logic without the getter and setter works like I would expect.

Expected Behavior

Getter and Setter @prop declarations work inside of mixins without the Maximum call stack size error.

System Info

Steps to Reproduce

Use a mixin in a component that uses the getter and setter logic.

export class MyComponent extends Mixin(myMixin) {
...
render() {
    return (
        <div>{this.hello}</div>
    );
  }
}

class MyMixin extends Base {
    private _hello?: string = "hello";
    /**
     * Hello World
     */
    @Prop()
    get hello() {
      return this._hello;
    }
    set hello(newHello: string) {
      this._hello = newHello;
    }
  }

Code Reproduction URL

https://github.com/blakeplumb/fork-stencil-starter-mixin-getter/tree/main

Additional Information

Relevant files from the Code Reproduction URL:

https://github.com/blakeplumb/fork-stencil-starter-mixin-getter/blob/main/src/utils/myMixin.ts
https://github.com/blakeplumb/fork-stencil-starter-mixin-getter/blob/main/src/components/my-component/my-component.tsx

Thank you!!!