Skip to content

Commit bac83d8

Browse files
bennypowersweb-padawan
bennypowers
and
web-padawan
authored
feat!: update to use custom-elements-manifest format (#92)
Co-authored-by: web-padawan <[email protected]>
1 parent 07c0f49 commit bac83d8

25 files changed

+484
-567
lines changed

‎.eslintrc.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"rules": {
2121
"@typescript-eslint/explicit-function-return-type": "off",
2222
"import/extensions": "off",
23+
"import/no-import-module-exports": "off",
2324
"import/no-unresolved": "off",
2425
"import/prefer-default-export": "off",
2526
"lit/no-template-map": "off",

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ node_modules
22
/lib
33
/dist
44
entrypoint.hashmanifest.json
5+
custom-elements.json

‎README.md

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# &lt;api-viewer&gt;
22

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.
44

55
```html
66
<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):
4242

4343
## Usage
4444

45-
1. Install [web-component-analyzer](https://github.com/runem/web-component-analyzer):
45+
1. Install [custom elements manifest analyzer](https://custom-elements-manifest.open-wc.org/analyzer/getting-started/):
4646

4747
```sh
48-
$ npm install -g web-component-analyzer
48+
$ npm install @custom-elements-manifest/analyzer
4949
```
5050

51-
2. Analyze your components using `--format json`:
51+
2. Analyze your components:
5252

5353
```sh
54-
$ wca analyze my-element.js --outFile custom-elements.json --format json
54+
$ cem analyze my-element.js
5555
```
5656

57+
Read the [docs](https://custom-elements-manifest.open-wc.org) for more information on how to use the analyzer.
58+
5759
3. Create an HTML file and import the component:
5860

5961
```html
@@ -179,17 +181,17 @@ Use `exclude-knobs` attribute to exclude properties from demo:
179181
<api-viewer src="./custom-elements.json" exclude-knobs="autofocus,items"></api-viewer>
180182
```
181183

182-
#### `elements`
184+
#### `manifest`
183185

184-
Use `elements` property instead of `src` to pass data directly:
186+
Use `manifest` property instead of `src` to pass manifest data directly:
185187

186188
```html
187189
<api-viewer></api-viewer>
188190
<script>
189191
fetch('./custom-elements.json')
190192
.then(res => res.json())
191-
.then(data => {
192-
document.querySelector('api-viewer').elements = data.tags;
193+
.then(manifest => {
194+
document.querySelector('api-viewer').manifest = manifest;
193195
});
194196
</script>
195197
```
@@ -374,7 +376,7 @@ npm run serve:dist
374376

375377
## Acknowledgements
376378

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.
378380
- Thanks to [@bahrus](https://github.com/bahrus) for [wc-info](https://github.com/bahrus/wc-info) component which inspired me.
379381
- The visual appearance is largely inspired by [Vuetify](https://vuetifyjs.com/en/getting-started/quick-start) API docs.
380382
- The tabs component is based on the [howto-tabs](https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs) example.

‎demo/styles.css renamed to ‎assets/styles.css

File renamed without changes.

‎custom-elements.json

-267
This file was deleted.

‎index.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
}
5959
}
6060
</style>
61-
<link rel="stylesheet" href="./demo/styles.css">
61+
<link rel="stylesheet" href="./assets/styles.css">
6262
</head>
6363
<body>
6464
<nav>
@@ -70,7 +70,7 @@
7070

7171
<section id="api-viewer" class="initial">
7272
<h2>&lt;api-viewer&gt; element</h2>
73-
<api-viewer src="./custom-elements.json">
73+
<api-viewer src="./assets/custom-elements.json">
7474
<template data-element="expansion-panel" data-target="knob" data-attr="dir" data-type="select">
7575
<select>
7676
<option value=""></option>
@@ -111,12 +111,12 @@ <h2>&lt;api-viewer&gt; element</h2>
111111

112112
<section id="api-docs">
113113
<h2>&lt;api-docs&gt; element</h2>
114-
<api-docs src="./custom-elements.json"></api-docs>
114+
<api-docs src="./assets/custom-elements.json"></api-docs>
115115
</section>
116116

117117
<section id="api-demo">
118118
<h2>&lt;api-demo&gt; element</h2>
119-
<api-demo src="./custom-elements.json">
119+
<api-demo src="./assets/custom-elements.json">
120120
<template data-element="expansion-panel" data-target="knob" data-attr="dir" data-type="select">
121121
<select>
122122
<option value=""></option>
@@ -158,7 +158,7 @@ <h2>&lt;api-demo&gt; element</h2>
158158
<template id="parts">
159159
<section id="shadow-parts" class="parts">
160160
<h2>CSS shadow parts</h2>
161-
<api-viewer src="./custom-elements.json" class="custom">
161+
<api-viewer src="./assets/custom-elements.json" class="custom">
162162
<template data-element="expansion-panel" data-target="knob" data-attr="dir" data-type="select">
163163
<select>
164164
<option value=""></option>

0 commit comments

Comments
 (0)