Stencil Component attributes are missing typing info in Angular

Open
#2,909 7 comments 9 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, typescript
Domain
frontend

Research direction

Reproduce the issue in a fresh Angular app using the Angular output target with DuetDS or Ionic, then inspect the generated Angular component bindings and their component interfaces. Compare the generated typings for properties such as variation, fill, or iconPlacement with a native Angular @Input; done means Angular IntelliSense exposes the expected property types and the existing reproduction behaves correctly.

Written by the indexing model from the issue text.

Description

Resolution: Needs Investigation

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:
stencil-angular-missing-typing

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:
stencil-angular-missing-typing-comp

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:
stencil-angular-missing-typing-def

Other information:

Dominant language
TypeScript
Stars
13.1k
Forks
855
Avg merge
4h 7m
Merged PRs (30d)
44

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from stenciljs/core

All issues in stenciljs/core

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.