Re: [w3c/webcomponents] Editor support for WebComponents (#776)

## Storybook API Table

Storybook now supports an api table in docs mode for your components which is also powered by a `custom-elements.json` which you only need to setup once.

and then you can use it via `<Props of="demo-wc-card" />` in their mdx docs.

See the following [demo](https://deploy-preview-907--open-wc-org.netlify.com/demoing-storybook/?path=/docs/card-playground--single-component).

## Storybook API Playground

You can also auto-generate an "api" playground - again based on metadata within `custom-element.json`. See the [demo](https://deploy-preview-907--open-wc-org.netlify.com/demoing-storybook/?path=/story/card-playground--multiple-component).

### Thoughts

The used [custom-elements.json](https://github.com/open-wc/open-wc/blob/92fcda021f851b6127fb6ad7dcd9a211faa0b1a7/packages/demoing-storybook/demo/custom-elements.json) in that example is not too different.

I would consider it a subset of what is currently in vscode.

For documentation and api playground there is more/different information needed then when doing autocomplete in vscode. However, as long as the data is not contradicting each other we should be fine right?

The types used in the example are more "typeHints" e.g. for documentation so that users can read what the name of the type is that is expected. Or what kind of value the css variable is used for. It's not really a "true" type check or so... 

## Web Component API viewer

There is also a very nice project [api-viewer-element](https://github.com/web-padawan/api-viewer-element). Which generates full API documentation and API Playground purely based on a [custom-elements.json](https://github.com/web-padawan/api-viewer-element/blob/a1568ad2889becf7ac0d09470f80d973dce90b9b/demo/custom-elements.json).

Again it adds "typeHints" and additionally jsDoc

See the [live example](https://deploy-preview-1--api-viewer-element.netlify.com/)

# Resume

A lot of stuff is happening and it seems to be really useful to add more info (besides what is truely needed in vscode).  As long as it is considered a subset it should be fine for everyone right 🤗 

Sooo enough for now let's head over to https://github.com/webcomponents/custom-elements-json and spec that thing before people go too crazy 😬 


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/776#issuecomment-546748328