feature: language server support for a richer editing experience for Stencil components

Open
#5,329 14 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

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

Research direction

Start with the component.tsx type and @Prop example, then inspect the generated package and interfaces.d.ts guidance before reproducing use in app.component.html with Angular 16.2. Confirm how the custom union is represented across the package boundary and whether Angular receives it. Done means the exported component exposes primary-500 and secondary-500 as the color property's available types.

Written by the indexing model from the issue text.

Description

Awaiting Reply Feature: Want this? Upvote it! Request For Comments
Prerequisites
Stencil Version

4.11

Current Behavior

Working with custom types created by myself in Stencil work great if I'm using them in others custom components in stencil.
But when I create a npm package for using my components into Angular 16.2 I can't have the custom types.

Expected Behavior

I would like to be able to use the custom types created with stencil in angular

System Info
System: node 18.19.0
Platform: windows (10.0.19045)
CPU Model: Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz (8 cpus)    
Compiler: C:\Users\lsciampagna\Desktop\web\ap\starter-web components\node_modules\@stencil\core\compiler\stencil.js
Build: 1705946070
Stencil: 4.11.0
TypeScript: 5.3.3
Rollup: 2.56.3
Parse5: 7.1.2
Terser: 5.27.0
Steps to Reproduce

Create a new stencil project and simply use the default components already set by default.

Create a type in the component.tsx file, for example : export type ButtonColors = 'primary-500' | 'secondary-500';

Use this type on a @Prop : @Prop() color: ButtonColors = 'primary-500';

Now, everytime you need this prop on your component in stencil env it will work perfectly
image

But if you export your components in a npm package and import them in angular 16 you can't get the types.

For example :

app.component.html
image

I have nothing in color, I would like to get the possibility to choose between primary and secondary.

I already followed the documentation which says to create a interfaces.d.ts file in the root
https://stenciljs.com/docs/angular#why-arent-my-custom-interfaces-exported-from-within-the-indexdts-file

Code Reproduction URL

Should I create a reproduction code in stencil or angular ? The problem is between the two, tell me what is better for you and I"ll give it to you

Additional Information

No response

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.