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

[Loic57]

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.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

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

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

[christian-bromann]

@Loic57 thanks for raising the issue.

Should I create a reproduction code in stencil or angular ?

If you can reproduce this without Angular in the picture that would be ideal , if that is not possible, including Angular is fine.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[Loic57]

Hello @christian-bromann

Here is the reproduction link : https://github.com/Loic57/stencil-custom-types

• clone
• npm i at the root folder
• go to packages/stencil-storybook/src and you can see a interfaces.d.ts file, I created after read the instruction on stencil documentation
• this file contains just a custom type created for a test : export type ButtonColors = 'primary-500' | 'secondary-500';
• this type is called in src/components/foundation/button/button.tsx

It works great.

But impossible to use them in angular

[christian-bromann]

But impossible to use them in angular

Is it possible to add a minimal angular example so I can see it failing there?

[Loic57]

@christian-bromann Done, I update the repo by adding an angular-workspace in the packages folder. I followed the documentation : https://stenciljs.com/docs/angular

It's angular 16.1.

You can run npm run stencil:build in the folder packages/stencil-storybook and npm run build-lib in the angular-workspace folder then npm run start to start the app. It's only a purple button on a white page

[christian-bromann]

Hey @Loic57,

setting up intellisense for custom element is not as easy as e.g. when using JSX and React, but possible! If you use VS Code you can follow our guide for setting this up. In short all you need is:

Add the following to your Stencil config:

    {
      type: 'docs-vscode',
      file: 'vscode-data.json',
    },

set the html.customData property in .vscode/settings.json:

{
    "html.customData": [
       "./packages/stencil-storybook/vscode-data.json"
    ]
}

Reload VS Code. After that it should give you the custom types, like so:

I will go ahead and close the issue but please let keep me posted if this doesn't work for you. Thank you!

[Loic57]

Hello @christian-bromann

It doesn't work for me.

I added the config in stencil.config.ts and I have a json file generated, that's cool.

In angular-workspace/.vscode I don't have a settings.json file so I created one and pasted the code you gave me

{
    "html.customData": [
       "./packages/stencil-storybook/vscode-data.json"
    ]
}

I restarted VS code and nothing, I still can't use the types. IS there something I'm missing ?

[christian-bromann]

@Loic57 the /.vscode/settings.json needs to be in the root directory of your project. Can you try to move it there and try again?

[Loic57]

@christian-bromann Ho yes it works!

Thank you

The ticket can be closed

[Loic57]

I'm sorry @christian-bromann but I think this ticket should be open again. The documentatioin in stencil for VS code is the beginning of a solution but it's not 100% working.

I use sometimes Prime NG Angular Components Library for others projects and when I'm in the html I'm able to put false info in the props and get an error via the compiler.

Here, we use VS code configuration so If I'm doing mistakes in my project Angular is not able to see it.

See example below, it's a screenshot from my Prime NG project :

If I ctrl + click on size attribut I'm redirected to a button.d.ts file

Do you have something similar in Stencil ? Beause In my Angular project with Stencil I can type whatever I want in my attribute value and no error is triggered

Thank you for your time

[christian-bromann]

@Loic57 let me make sure I understand you correctly: while the documented approach provides intellisense, it does not validate the input properties. The screenshot above shows this working for Angular components but not for Stencil ones.

From what I understand the custom data feature in IDE only supports auto-completion and hover information support for HTML but not validation. Can you confirm whether you are using an Angular extension or other plugins that might enable this capability for you Angular components?

[Loic57]

@christian-bromann You're totally right, it does not validate input properties and I would love to have it.

And yes, the custom data feature in IDE only supports auto-completion and hover information support for HTML. I never checked but I have indeed a plugin installed : Angular Language Service

This extension provides a rich editing experience for Angular templates, both inline and external templates including:

• Completions lists
• AOT Diagnostic messages
• Quick info
• Go to definition

I'm not at all an angular dev, I'm building this components library for my dev team so there is a lot of things I ignore in Angular. The main difference between Prime NG and Stencil is, well, Prime NG provides native angular components so maybe it's easier to generate all this type verification ?

[christian-bromann]

Thanks for validating these assumptions. The current support for intellisense in IDEs is based on the custom data web platform feature and has it's limitations as you can see. To support input validations, go to definition etc. we would need a language server for Stencil which is a larger sized project that our team needs to validate and prioritise individually. I will re-open and label the issue accordingly.