bug: Event payload with self-reference causes type generation error

[Mitiryl]

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

4.29.2

Current Behavior

I've encountered an issue with Stencil's type generation when a component emits an event and passes itself as the payload. The generated TypeScript types contain an error that breaks type checking. The generated .d.ts file includes an unresolved type reference to the component, causing a TypeScript error like:

[ ERROR ]  TypeScript: src/components.d.ts:24:18
           Cannot find name 'MyComponent'.

     L23:  interface HTMLMyComponentElementEventMap {
     L24:      "myEvent": MyComponent;
     L25:  }

Expected Behavior

Type generation should work correctly even when the event payload is a reference to the component instance itself.

System Info

System: node 20.17.0
Stencil: 4.29.2 🔋
TypeScript: 5.5.4

Steps to Reproduce

1. Create a Stencil component like this:

import { Component, Event, EventEmitter, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  shadow: true,
})
export class MyComponent {
  
  @Event() myEvent: EventEmitter<MyComponent>;

  render() {
    return <div>Hello</div>;
  }
}

2. Build the project

Code Reproduction URL

https://github.com/Mitiryl/stencil-types

Additional Information

No response

[christian-bromann]

Thank you for reporting and providing a reproduction case, any contributions that may resolve this bug are much appreciated.

[johnjenkins]

hey @Mitiryl,

Can you give me some idea around what you were wanting to achieve here?

@Component({
  tag: 'my-component',
  shadow: true,
})
export class MyComponent {
  
  @Event() myEvent: EventEmitter<MyComponent>;

  render() {
    return <div>Hello</div>;
  }
}

Practically speaking, What's the desired payload here(?) this.myEvent.emit( ...what?...) MyComponent in your example is a class ctor ... is that correct? (if so why?)

A more common requirement, is to make the calling element part of the event payload .... something like:

@Element() host: HTMLMyComponent;
@Event() myEvent:  EventEmitter<HTMLMyComponent>
...
this.myEvent.emit(this.host);

Is that what you wanted? That'd probably be more accurate than the class ctor.