search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.47k stars 784 forks source link

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

Open mboudreau opened 4 years ago

mboudreau commented 4 years ago

Stencil version:

 @stencil/core@1.8.0

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 commented 4 years ago

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

runarberg commented 4 years ago

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

borisdiakur commented 3 years ago

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 commented 3 years ago

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

runarberg commented 3 years ago

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

thepassle commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

I would really like this for use with Storybook.

nielsboogaard commented 1 year ago

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 commented 1 year ago

Any updates on this issue?