stencil icon indicating copy to clipboard operation
stencil copied to clipboard

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

Open mboudreau opened this issue 5 years ago • 12 comments

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

mboudreau avatar Nov 28 '19 05:11 mboudreau

Not sure if this still works but i guess stencil was one of the first having it. Please have a look at https://github.com/ionic-team/stencil/commit/89245611ca32cd8adf596d1a64a442fcfb5386ac

romulocintra avatar Dec 09 '19 06:12 romulocintra

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

runarberg avatar Apr 08 '20 23:04 runarberg

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

borisdiakur avatar May 13 '21 19:05 borisdiakur

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 https://github.com/ionic-team/stencil/pull/2354#issuecomment-627503893

dmartinjs avatar May 17 '21 09:05 dmartinjs

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

runarberg avatar May 18 '21 13:05 runarberg

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 🙂

thepassle avatar Jul 01 '21 10:07 thepassle

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.

marcomattes avatar Jan 12 '22 12:01 marcomattes

I would really like this for use with Storybook.

jared-christensen avatar Jul 07 '22 20:07 jared-christensen

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

nielsboogaard avatar Jun 12 '23 13:06 nielsboogaard

Any updates on this issue?

DmitryAvanesov avatar Aug 29 '23 11:08 DmitryAvanesov