https://github.com/bahrus/wc-info
UI for VSCode's custom-elements.json file
https://github.com/bahrus/wc-info
Last synced: about 2 months ago
JSON representation
UI for VSCode's custom-elements.json file
- Host: GitHub
- URL: https://github.com/bahrus/wc-info
- Owner: bahrus
- License: mit
- Created: 2018-12-13T12:15:52.000Z (over 6 years ago)
- Default Branch: baseline
- Last Pushed: 2023-03-04T03:02:01.000Z (about 2 years ago)
- Last Synced: 2025-03-29T02:11:39.052Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 608 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.webcomponents.org/element/wc-info)
# wc-info
wc-info provides some helper resources for a server-side html api that provides UI-friendly views of the [custom elements manifest file](https://github.com/open-wc/custom-elements-manifest). The web components it provides are currently deprecated.
**NB** A great, more fully featured alternative to wc-info is the [api-viewer element](https://api-viewer-element.netlify.com/#api-viewer).
First, a reusable, high performing url can take as a query string parameter a link to any custom elements manifest file, and display it in HTML format:
For example: https://cf-sw.bahrus.workers.dev/?href=https://cdn.skypack.dev/@shoelace-style/shoelace/dist/custom-elements.json&ts=1
Such links are iframeable.
To see the usage: https://cf-sw.bahrus.workers.dev
Many aspects of the api are customizable, as the usage form indicates.
OpenAPI spec: https://unpkg.com/wc-info/openAPI.json
To embed just the bare minimum html and apply customizations as needed:
https://cf-sw.bahrus.workers.dev/?href=https://cdn.skypack.dev/@shoelace-style/shoelace/dist/custom-elements.json&embedded=true
Another parameter, "tags" can be used to filter the output, based on a comma delimited list of tags.
Source code for worker: https://github.com/bahrus/cf-sw
To embed this bare minimum html in an existing parent html stream, one of the fastest ways to do this is with the k-fetch web component:
```html
```
Some web component libraries like ui-5, carbon design (and hopefully mwc (status is tbd)) provide support for providing more functionality over the bare-bones html elements this service provides.
The bra-ket web component provides support for this scenario. Display the initial output of the service based on out-of-the-box formatting browsers provide for table elements. Then, once the dependencies of ui-5 are fully downloaded, only then does the initial output get transformed (via xslt) into the equivalent markup using ui-5 components. The transition is almost unnoticeable in high performance scenarios, but makes the loading experience much better on slower devices / networks.
So now the markup looks as follows:
```html
```
## Viewing Your Element (locally)
```
$ npm install
$ npm run serve
```