open-wc · web-padawan · Nov 20, 2021 · Nov 19, 2021 · Nov 19, 2021 · Nov 19, 2021
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -20,6 +20,7 @@
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
     "import/extensions": "off",
+    "import/no-import-module-exports": "off",
     "import/no-unresolved": "off",
     "import/prefer-default-export": "off",
     "lit/no-template-map": "off",

diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ node_modules
 /lib
 /dist
 entrypoint.hashmanifest.json
+custom-elements.json
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # &lt;api-viewer&gt;
 
-API documentation and live playground for Web Components. Based on [web-component-analyzer](https://github.com/runem/web-component-analyzer) JSON format.
+API documentation and live playground for Web Components. Based on [custom elements manifest](https://github.com/webcomponents/custom-elements-manifest) JSON format.
 
 ```html
 <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):
 
 ## Usage
 
-1. Install [web-component-analyzer](https://github.com/runem/web-component-analyzer):
+1. Install [custom elements manifest analyzer](https://custom-elements-manifest.open-wc.org/analyzer/getting-started/):
 
 ```sh
-$ npm install -g web-component-analyzer
+$ npm install @custom-elements-manifest/analyzer
 ```
 
-2. Analyze your components using `--format json`:
+2. Analyze your components:
 
 ```sh
-$ wca analyze my-element.js --outFile custom-elements.json --format json
+$ cem analyze my-element.js
 ```
 
+Read the [docs](https://custom-elements-manifest.open-wc.org) for more information on how to use the analyzer.
+
 3. Create an HTML file and import the component:
 
 ```html
@@ -179,17 +181,17 @@ Use `exclude-knobs` attribute to exclude properties from demo:
 <api-viewer src="./custom-elements.json" exclude-knobs="autofocus,items"></api-viewer>
 ```
 
-#### `elements`
+#### `manifest`
 
-Use `elements` property instead of `src` to pass data directly:
+Use `manifest` property instead of `src` to pass manifest data directly:
 
 ```html
 <api-viewer></api-viewer>
 <script>
   fetch('./custom-elements.json')
     .then(res => res.json())
-    .then(data => {
-      document.querySelector('api-viewer').elements = data.tags;
+    .then(manifest => {
+      document.querySelector('api-viewer').manifest = manifest;
     });
 </script>
 ```
@@ -374,7 +376,7 @@ npm run serve:dist
 
 ## Acknowledgements
 
-- Big thanks to [@runem](http://github.com/runem) for creating Web Component Analyzer.
+- Big thanks to [@runem](http://github.com/runem) for creating Web Component Analyzer, which previous versions of this package were based on.
 - Thanks to [@bahrus](https://github.com/bahrus) for [wc-info](https://github.com/bahrus/wc-info) component which inspired me.
 - The visual appearance is largely inspired by [Vuetify](https://vuetifyjs.com/en/getting-started/quick-start) API docs.
 - The tabs component is based on the [howto-tabs](https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs) example.

diff --git a/demo/styles.css → assets/styles.css b/demo/styles.css → assets/styles.css
diff --git a/custom-elements.json b/custom-elements.json
diff --git a/index.html b/index.html
@@ -58,7 +58,7 @@
       }
     }
   </style>
-  <link rel="stylesheet" href="./demo/styles.css">
+  <link rel="stylesheet" href="./assets/styles.css">
 </head>
 <body>
   <nav>
@@ -70,7 +70,7 @@
 
   <section id="api-viewer" class="initial">
     <h2>&lt;api-viewer&gt; element</h2>
-    <api-viewer src="./custom-elements.json">
+    <api-viewer src="./assets/custom-elements.json">
       <template data-element="expansion-panel" data-target="knob" data-attr="dir" data-type="select">
         <select>
           <option value=""></option>
@@ -111,12 +111,12 @@ <h2>&lt;api-viewer&gt; element</h2>
 
   <section id="api-docs">
     <h2>&lt;api-docs&gt; element</h2>
-    <api-docs src="./custom-elements.json"></api-docs>
+    <api-docs src="./assets/custom-elements.json"></api-docs>
   </section>
 
   <section id="api-demo">
     <h2>&lt;api-demo&gt; element</h2>
-    <api-demo src="./custom-elements.json">
+    <api-demo src="./assets/custom-elements.json">
       <template data-element="expansion-panel" data-target="knob" data-attr="dir" data-type="select">
         <select>
           <option value=""></option>
@@ -158,7 +158,7 @@ <h2>&lt;api-demo&gt; element</h2>
   <template id="parts">
     <section id="shadow-parts" class="parts">
       <h2>CSS shadow parts</h2>
-      <api-viewer src="./custom-elements.json" class="custom">
+      <api-viewer src="./assets/custom-elements.json" class="custom">
         <template data-element="expansion-panel" data-target="knob" data-attr="dir" data-type="select">
           <select>
             <option value=""></option>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,3 +2,4 @@ node_modules @@
     /lib
     /dist
     entrypoint.hashmanifest.json
+    custom-elements.json