Add support for web-types/custom-elements-json

[mboudreau]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[ ] bug report
[X] 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:
Stencil does not generate web-component metadata needed for IDEs to help with tag and attributes autocomplete

Expected behavior:
Generate metadata files as per specification then add "web-types": "dist/web-types.json" to package.json file

Steps to reproduce:
None

Related code:
None

Other information:
W3C is looking at the standard as we speak: https://github.com/webcomponents/custom-elements-json

[romulocintra]

Not sure if this still works but i guess stencil was one of the first having it. Please have a look at 8924561

[runarberg]

custom-elements.json is also used by storybook to gather documentation for each component.

[borisdiakur]

Not sure if this still works but i guess stencil was one of the first having it. Please have a look at 8924561

The docs-json target format unfortunately doesn't work with Intellij editors, as web-types uses a different schema. Though I've found that there has been done some work already transforming the docs-json target format into web-types format here: https://github.com/ionic-team/ionic-framework/pull/22428/files

[dmartinjs]

there is also an old PR #2354

And I'm using docs-custom to create the custom-elements-json file for storybook
as explain here #2354 (comment)

[runarberg]

I’ve had a pretty good results with @pxtrn/storybook-addon-docs-stencil

[thepassle]

We recently released a v1.0.0 version of the Custom Elements Manifest schema, you can read more about the announcement here

We already added support for the v1 schema in Storybook, which is available in 6.4.0-alpha.8.

It'd be really great for the wider web component ecosystem to have Stencil tooling support outputting a custom-elements.json. There are already ongoing discussions on a reboot of webcomponents.org, or a new 'custom elements catalog', based on packages containing a custom-elements.json file. Skypack has also already committed to supporting the customElements property to allow easy searching of packages containing custom elements. The author of Api Viewer Element has also said he'd upgrade the component to support the V1 schema soon, and I'm sure a lot more CEM-related tooling will start to pop up soon.

I've been working on an analyzer to output a custom-elements.json, and it also supports Stencil: https://www.npmjs.com/package/@custom-elements-manifest/analyzer I'd be happy to help out for Stencil to support CEM 🙂

[marcomattes]

Would be very cool if this feature would come soon. Currently I can't use autocompletion or similar in my Angular project with an included stencil library in IntelliJ.

[jared-christensen]

I would really like this for use with Storybook.

[nielsboogaard]

I've created a Web-Types generator which can be used together with the 'custom docs' functionality of StencilJS. See https://github.com/nielsboogaard/stenciljs-web-types-generator

[DmitryAvanesov]

Any updates on this issue?

[marcomattes]

Any update on this issue?

[christian-bromann]

@marcomattes the Stencil team currently has a lot of competing priorities and can't promise to be able to take a look at this anytime soon. We recommend to get involved and help us resolve this issue by providing a pull request with a fix. We are happy to provide necessary guidance and appreciate any help!

[christian-bromann]

Thanks to @rwaskiewicz we now have a plugin for this that is maintained as part of the community org: https://github.com/stencil-community/stencil-web-types, please give it a try and report issues there. Thanks.