[starter-kits] Update starter kits to use open-wc CEM analyzer (#2117)

* Update from WCA to CEM generator

* Remove generated custom-elements.json manifest from git

* Fix formatting

* Add changeset

* Fix TS return type in docs generator

* Update package-lock for starter kits

* Update package-lock

docs-src/_includes/footer.11ty.cjs

@@ -3,7 +3,7 @@ module.exports = function (data) {
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</a>
+    <a href="https://github.com/lit/lit-element-starter-js">lit-starter-js</a>
   </p>
 </footer>`;
 };

docs-src/api.11ty.cjs

@@ -11,47 +11,67 @@ module.exports = class Docs {
   }
 
   render(data) {
-    const customElements = data.api['11tydata'].customElements;
-    const tags = customElements.tags;
+    const manifest = data.api['11tydata'].customElements;
+    const elements = manifest.modules.reduce(
+      (els, module) =>
+        els.concat(
+          module.declarations?.filter((dec) => dec.customElement) ?? []
+        ),
+      []
+    );
     return `
       <h1>API</h1>
-      ${tags
+      ${elements
         .map(
-          (tag) => `
-        <h2>&lt;${tag.name}></h2>
+          (element) => `
+        <h2>&lt;${element.tagName}></h2>
         <div>
-          ${tag.description}
+          ${element.description}
         </div>
         ${renderTable(
           'Attributes',
-          ['name', 'description', 'type', 'default'],
-          tag.attributes
+          ['name', 'description', 'type.text', 'default'],
+          element.attributes
         )}
         ${renderTable(
           'Properties',
-          ['name', 'attribute', 'description', 'type', 'default'],
-          tag.properties
+          ['name', 'attribute', 'description', 'type.text', 'default'],
+          element.members.filter((m) => m.kind === 'field')
+        )}  
+        ${renderTable(
+          'Methods',
+          ['name', 'parameters', 'description', 'return.type.text'],
+          element.members
+            .filter(
+              (m) =>
+                m.kind === 'method' &&
+                m.privacy !== 'private' &&
+                m.name[0] !== '_'
+            )
+            .map((m) => ({
+              ...m,
+              parameters: renderTable(
+                '',
+                ['name', 'description', 'type.text'],
+                m.parameters
+              ),
+            }))
+        )}
+        ${renderTable('Events', ['name', 'description'], element.events)}    
+        ${renderTable(
+          'Slots',
+          [['name', '(default)'], 'description'],
+          element.slots
         )}  
-        ${
-          /*
-           * Methods are not output by web-component-analyzer yet (a bug), so
-           * this is a placeholder so that at least _something_ will be output
-           * when that is fixed, and element maintainers will hopefully have a
-           * signal to update this file to add the neccessary columns.
-           */
-          renderTable('Methods', ['name', 'description'], tag.methods)
-        }
-        ${renderTable('Events', ['name', 'description'], tag.events)}    
-        ${renderTable('Slots', ['name', 'description'], tag.slots)}  
         ${renderTable(
           'CSS Shadow Parts',
           ['name', 'description'],
-          tag.cssParts
+          element.cssParts
         )}
         ${renderTable(
           'CSS Custom Properties',
           ['name', 'description'],
-          tag.cssProperties
+          element.cssProperties
         )}
         `
         )
@@ -60,25 +80,47 @@ module.exports = class Docs {
   }
 };
 
+/**
+ * Reads a (possibly deep) path off of an object.
+ */
+const get = (obj, path) => {
+  let fallback = '';
+  if (Array.isArray(path)) {
+    [path, fallback] = path;
+  }
+  const parts = path.split('.');
+  while (obj && parts.length) {
+    obj = obj[parts.shift()];
+  }
+  return obj == null || obj === '' ? fallback : obj;
+};
+
 /**
  * Renders a table of data, plucking the given properties from each item in
  * `data`.
  */
 const renderTable = (name, properties, data) => {
-  if (data === undefined) {
+  if (data === undefined || data.length === 0) {
     return '';
   }
   return `
-    <h3>${name}</h3>
+    ${name ? `<h3>${name}</h3>` : ''}
     <table>
       <tr>
-        ${properties.map((p) => `<th>${capitalize(p)}</th>`).join('')}
+        ${properties
+          .map(
+            (p) =>
+              `<th>${capitalize(
+                (Array.isArray(p) ? p[0] : p).split('.')[0]
+              )}</th>`
+          )
+          .join('')}
       </tr>
       ${data
         .map(
           (i) => `
         <tr>
-          ${properties.map((p) => `<td>${i[p]}</td>`).join('')}
+          ${properties.map((p) => `<td>${get(i, p)}</td>`).join('')}
         </tr>
       `
         )

docs-src/docs.css

@@ -159,4 +159,5 @@ td, th {
   border: solid 1px #aaa;
   padding: 4px;
   text-align: left;
+  vertical-align: top;
 }

docs/api/index.html

@@ -43,11 +43,11 @@ <h3>Attributes</h3>
       </tr>
 
         <tr>
-          <td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td>
+          <td>name</td><td>The name to say "Hello" to.</td><td>string</td><td></td>
         </tr>
 
         <tr>
-          <td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
+          <td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td></td>
         </tr>
 
     </table>
@@ -60,43 +60,53 @@ <h3>Properties</h3>
       </tr>
 
         <tr>
-          <td>name</td><td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td>
+          <td>name</td><td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>'World'</td>
         </tr>
 
         <tr>
           <td>count</td><td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
         </tr>
 
+    </table>
+
+
+    <h3>Methods</h3>
+    <table>
+      <tr>
+        <th>Name</th><th>Parameters</th><th>Description</th><th>Return</th>
+      </tr>
+
         <tr>
-          <td>renderRoot</td><td>undefined</td><td>Node or ShadowRoot into which element DOM should be rendered. Defaults
-to an open shadowRoot.</td><td>HTMLElement | ShadowRoot</td><td>undefined</td>
-        </tr>
+          <td>sayHello</td><td>
+
+    <table>
+      <tr>
+        <th>Name</th><th>Description</th><th>Type</th>
+      </tr>
 
         <tr>
-          <td>isUpdatePending</td><td>undefined</td><td>undefined</td><td>boolean</td><td>undefined</td>
+          <td>name</td><td>The name to say "Hello" to</td><td>string</td>
         </tr>
 
-        <tr>
-          <td>hasUpdated</td><td>undefined</td><td>undefined</td><td>boolean</td><td>undefined</td>
+    </table>
+  </td><td>Formats a greeting</td><td>string</td>
         </tr>
 
+    </table>
+
+
+    <h3>Events</h3>
+    <table>
+      <tr>
+        <th>Name</th><th>Description</th>
+      </tr>
+
         <tr>
-          <td>updateComplete</td><td>undefined</td><td>Returns a Promise that resolves when the element has completed updating.
-The Promise value is a boolean that is `true` if the element completed the
-update without triggering another update. The Promise result is `false` if
-a property was set inside `updated()`. If the Promise is rejected, an
-exception was thrown during the update.
-
-To await additional asynchronous work, override the `getUpdateComplete`
-method. For example, it is sometimes useful to await a rendered element
-before fulfilling this Promise. To do this, first await
-`super.getUpdateComplete()`, then any subsequent state.</td><td>Promise<boolean></td><td>undefined</td>
+          <td>count-changed</td><td>Indicates when the count changes</td>
         </tr>
 
     </table>
-
-
-
+
 
     <h3>Slots</h3>
     <table>
@@ -105,7 +115,7 @@ <h3>Slots</h3>
       </tr>
 
         <tr>
-          <td></td><td>This element has a slot</td>
+          <td>(default)</td><td>This element has a slot</td>
         </tr>
 
     </table>
@@ -132,7 +142,7 @@ <h3>CSS Shadow Parts</h3>
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</a>
+    <a href="https://github.com/lit/lit-element-starter-js">lit-starter-js</a>
   </p>
 </footer>
   </body>

docs/docs.css

@@ -159,4 +159,5 @@ td, th {
   border: solid 1px #aaa;
   padding: 4px;
   text-align: left;
+  vertical-align: top;
 }

docs/examples/index.html

@@ -68,7 +68,7 @@ <h3>HTML</h3>
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</a>
+    <a href="https://github.com/lit/lit-element-starter-js">lit-starter-js</a>
   </p>
 </footer>
   </body>

docs/examples/name-property/index.html

@@ -58,7 +58,7 @@ <h3>HTML</h3>
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</a>
+    <a href="https://github.com/lit/lit-element-starter-js">lit-starter-js</a>
   </p>
 </footer>
   </body>

docs/index.html

@@ -68,7 +68,7 @@ <h2>This is a &lt;my-element&gt;</h2>
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</a>
+    <a href="https://github.com/lit/lit-element-starter-js">lit-starter-js</a>
   </p>
 </footer>
   </body>

docs/install/index.html

@@ -46,7 +46,7 @@ <h3>JavaScript</h3>
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</a>
+    <a href="https://github.com/lit/lit-element-starter-js">lit-starter-js</a>
   </p>
 </footer>
   </body>