Stencil Component attributes are missing typing info in Angular

[lodybo]

Stencil version:

 @stencil/core@2.5.2

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
After building my components with Stencil and generating an Angular version of it using the output target, I can access my component and its attributes. However, my attributes don't have any typing information in Angular.

After seeing this in my own component library, I tried to do the same with some public ones built in Stencil: DuetDS and Ionic. I got the exact same results.

Expected behavior:
Intellisense/Autocompletion would tell me what type the attribute expects (at least string), just like it would for an Angular component which has an @Input() defined.

Steps to reproduce:
The easiest way would be to:

• create a new Angular application
• add DuetDS (npm install @duetds/angular) and/or Ionic (ng add @ionic/angular)
• for DuetDS: add DuetComponents to the imports: [] array in app.module.ts
• go to app.component.html and at the button write:
  • DuetDS: <duet-button [variation]=""></duet-button>, and hover over [variation]
  • Ionic: <ion-button [fill]=""></ion-button> and hover over [fill]

Both libraries do not display the values that the attribute accepts. You can find the attributes by following the type definitions in both libraries.

Related code:
If my component has this @Prop:

@Prop() iconPlacement: 'left' | 'right = 'left';

Inside a fresh Angular app (v12), I get this as typing info:

In contrast: if we generate an Angular component and give it the following code:

@Input() placement: 'left' | 'right' = 'left';

This is what Intellisense/Autocompletion would display:

Following the type definitions (I work in IntelliJ, so I follow it using Ctrl+Click), you can see that the definitions are present on the component interface:

Other information:

[splitinfinities]

Thank you for sharing this! We're going to investigate a little more to understand how best to support Intellisense with the Angular bindings. This may impact other output targets too, so we may use this issue as the main way to gather signal from the community.

[lodybo]

@splitinfinities Thank you for the response. If there's something I can help out with, especially with testing then let me know.

[visma-zanas-stundys]

Looks like the generator should just define each property in the class with the correct typings, not the decorator:

@Component(...)
export class MyComponent {
  @Input() field1: Type1;
  @Input() field2: Type2;
}

vs

@Component({
  ...,
  inputs: ['field1', 'field2']
})
export class MyComponent { ... }

[cezudas]

Thank you for sharing this! We're going to investigate a little more to understand how best to support Intellisense with the Angular bindings. This may impact other output targets too, so we may use this issue as the main way to gather signal from the community.

Hi there, I am kindly asking the contributors to provide some insights on this. :) :) thank you

[jonapgartwohat]

I'm quite interested in a solution here. This would make the generated Angular components a lot more developer friendly. In addition to the types, it would be amazing if jsdoc style comments could be carried over as well, but that's likely a bigger change.

@rwaskiewicz I'm looking at getProxy and it doesn't seem too complicated to modify this to generate @Input notation vs the current inputs array. Is there more to the picture?