refacto destructure customElement and add Syntax for custom css properties

Author: gqio

README.md

@@ -1,4 +1,5 @@
 [![edit-in-webcomponents.dev](https://webcomponents.dev/assets/ext/edit_in_wcd.svg)](https://webcomponents.dev/edit/XPmoswtdx4DjIFzaPMBB)
+
 # text-field
 
 A text field web component
@@ -40,8 +41,8 @@ A text field web component
 
 ## CSS Custom Properties
 
-| Property              | Description                           |
-| --------------------- | ------------------------------------- |
-| `--placeholder-color` | Controls the color of the placeholder |
+| Property              | Syntax | Description                           |
+| --------------------- | ------ | ------------------------------------- |
+| `--placeholder-color` |        | Controls the color of the placeholder |
 
 > Created with [webcomponents.dev](https://webcomponents.dev)

src/index.stories.ts

@@ -1,4 +1,5 @@
 import transform from "./index";
+
 const customElements = {
   version: 2,
   tags: [
@@ -75,4 +76,4 @@ const customElements = {
   ]
 };
 
-export const story1 = () => transform(customElements);
+export const story1 = () => `<pre>${transform(customElements)}</pre>`;

src/index.ts

@@ -8,8 +8,7 @@ ${attributes
   .map(
     attr => `| ${code(attr.name)} | ${code(attr.type)} | ${attr.description} |`
   )
-  .join("\n")}
-`;
+  .join("\n")}`;
 
 const transformProperties = (properties: any[]) => `
 ## Properties
@@ -23,8 +22,7 @@ ${properties
         prop.default
       } | ${prop.description} |`
   )
-  .join("\n")}
-`;
+  .join("\n")}`;
 
 const transformEvents = (events: any[]) => `
 ## Events
@@ -33,16 +31,16 @@ const transformEvents = (events: any[]) => `
 | ----- | ----------- |
 ${events
   .map(event => `| ${code(event.name)} | ${code(event.description)} |`)
-  .join("\n")}
-`;
+  .join("\n")}`;
 
 const transformSlots = (slots: any[]) => `
 ## Slots
 
 | Name | Description |
 | ---- | ----------- |
-${slots.map(slot => `| ${code(slot.name)} | ${slot.description} |`).join("\n")}
-`;
+${slots
+  .map(slot => `| ${code(slot.name)} | ${slot.description} |`)
+  .join("\n")}`;
 
 const transformCSSParts = (shadowParts: any[]) => `
 ## CSS Shadow Parts
@@ -51,43 +49,52 @@ const transformCSSParts = (shadowParts: any[]) => `
 | ---- | ----------- |
 ${shadowParts
   .map(part => `| ${code(part.name)} | ${part.description} |`)
-  .join("\n")}
-`;
+  .join("\n")}`;
 
 const transformCSSProperties = (cssProperties: any[]) => `
 ## CSS Custom Properties
 
-| Property | Description |
-| -------- | ----------- |
+| Property | Syntax | Description |
+| -------- | ------ | ----------- |
 ${cssProperties
-  .map(cssProp => `| ${code(cssProp.name)} | ${cssProp.description} |`)
-  .join("\n")}
-`;
+  .map(
+    cssProp =>
+      `| ${code(cssProp.name)} | ${code(cssProp.syntax)} | ${
+        cssProp.description
+      } |`
+  )
+  .join("\n")}`;
 
 export default customElements => {
   let markdownParts = [];
   for (const customElement of customElements.tags) {
     if (!customElement) return undefined;
-    markdownParts.push(`# ${customElement.name}`);
-    markdownParts.push(customElement.description);
-    customElement.attributes &&
-      customElement.attributes.length > 0 &&
-      markdownParts.push(transformAttributes(customElement.attributes));
-    customElement.properties &&
-      customElement.properties.length > 0 &&
-      markdownParts.push(transformProperties(customElement.properties));
-    customElement.events &&
-      customElement.events.length > 0 &&
-      markdownParts.push(transformEvents(customElement.events));
-    customElement.slots &&
-      customElement.slots.length > 0 &&
-      markdownParts.push(transformSlots(customElement.slots));
-    customElement.cssParts &&
-      customElement.cssParts.length > 0 &&
-      markdownParts.push(transformCSSParts(customElement.cssParts));
-    customElement.cssProperties &&
-      customElement.cssProperties.length > 0 &&
-      markdownParts.push(transformCSSProperties(customElement.cssProperties));
+    const {
+      name,
+      description,
+      attributes,
+      properties,
+      events,
+      slots,
+      cssParts,
+      cssProperties
+    } = customElement;
+    markdownParts.push(`# ${name}`);
+    markdownParts.push(description);
+    attributes &&
+      attributes.length > 0 &&
+      markdownParts.push(transformAttributes(attributes));
+    properties &&
+      properties.length > 0 &&
+      markdownParts.push(transformProperties(properties));
+    events && events.length > 0 && markdownParts.push(transformEvents(events));
+    slots && slots.length > 0 && markdownParts.push(transformSlots(slots));
+    cssParts &&
+      cssParts.length > 0 &&
+      markdownParts.push(transformCSSParts(cssParts));
+    cssProperties &&
+      cssProperties.length > 0 &&
+      markdownParts.push(transformCSSProperties(cssProperties));
   }
-  return markdownParts.join("\n");
+  return markdownParts.join("\n\n");
 };