|
1 | 1 | # <api-viewer>
|
2 | 2 |
|
3 |
| -API documentation and live playground for Web Components. Based on [web-component-analyzer](https://github.com/runem/web-component-analyzer) JSON format. |
| 3 | +API documentation and live playground for Web Components. Based on [custom elements manifest](https://github.com/webcomponents/custom-elements-manifest) JSON format. |
4 | 4 |
|
5 | 5 | ```html
|
6 | 6 | <api-viewer src="./custom-elements.json"></api-viewer>
|
@@ -42,18 +42,20 @@ Or grab from [unpkg.com CDN](https://unpkg.com/api-viewer-element?module):
|
42 | 42 |
|
43 | 43 | ## Usage
|
44 | 44 |
|
45 |
| -1. Install [web-component-analyzer](https://github.com/runem/web-component-analyzer): |
| 45 | +1. Install [custom elements manifest analyzer](https://github.com/open-wc/custom-elements-manifest): |
46 | 46 |
|
47 | 47 | ```sh
|
48 |
| -$ npm install -g web-component-analyzer |
| 48 | +$ npm install @custom-elements-manifest/analyzer |
49 | 49 | ```
|
50 | 50 |
|
51 |
| -2. Analyze your components using `--format json`: |
| 51 | +2. Analyze your components: |
52 | 52 |
|
53 | 53 | ```sh
|
54 |
| -$ wca analyze my-element.js --outFile custom-elements.json --format json |
| 54 | +$ cem analyze my-element.js |
55 | 55 | ```
|
56 | 56 |
|
| 57 | +Read the [docs](https://custom-elements-manifest.open-wc.org) for more information on how to use the analyzer. |
| 58 | + |
57 | 59 | 3. Create an HTML file and import the component:
|
58 | 60 |
|
59 | 61 | ```html
|
@@ -374,7 +376,7 @@ npm run serve:dist
|
374 | 376 |
|
375 | 377 | ## Acknowledgements
|
376 | 378 |
|
377 |
| -- Big thanks to [@runem](http://github.com/runem) for creating Web Component Analyzer. |
| 379 | +- Big thanks to [@runem](http://github.com/runem) for creating Web Component Analyzer, which previous versions of this package were based on. |
378 | 380 | - Thanks to [@bahrus](https://github.com/bahrus) for [wc-info](https://github.com/bahrus/wc-info) component which inspired me.
|
379 | 381 | - The visual appearance is largely inspired by [Vuetify](https://vuetifyjs.com/en/getting-started/quick-start) API docs.
|
380 | 382 | - The tabs component is based on the [howto-tabs](https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs) example.
|
|
0 commit comments