Add ability to show css parts in the docs

Author: bendera

src/components/ApiDocs/ApiDocs.astro

@@ -25,6 +25,7 @@ const declarations = getCustomElementDeclarations(element);
           events = [],
           slots = [],
           cssProps = [],
+          cssParts = [],
         } = d;
 
         return (
@@ -38,6 +39,7 @@ const declarations = getCustomElementDeclarations(element);
             events={events}
             slots={slots}
             cssProps={cssProps}
+            cssParts={cssParts}
           />
         );
       })

src/components/ApiDocs/ApiDocsDeclaration.astro

@@ -4,6 +4,7 @@ import type {
   ClassMember,
   ClassMethod,
   CssCustomProperty,
+  CssPart,
   CustomElement,
   CustomElementField,
   Event,
@@ -24,6 +25,7 @@ interface Props {
   events?: Event[];
   slots?: Slot[];
   cssProps?: CssCustomProperty[];
+  cssParts?: CssPart[];
 }
 
 const {
@@ -36,6 +38,7 @@ const {
   events = [],
   slots = [],
   cssProps = [],
+  cssParts = [],
 } = Astro.props;
 ---
 
@@ -57,6 +60,7 @@ const {
 <ApiDocsSection title="Events" members={events} />
 <ApiDocsSection title="Slots" members={slots} />
 <ApiDocsSection title="Custom CSS Properties" members={cssProps} />
+<ApiDocsSection title="CSS Parts" members={cssParts} />
 
 <style>
   .declaration-header code {

src/components/ApiDocs/ApiDocsDeclarationList.astro

@@ -6,6 +6,7 @@ import type {
   Event,
   Slot,
   CssCustomProperty,
+  CssPart,
 } from "custom-elements-manifest";
 
 interface Props {
@@ -15,6 +16,7 @@ interface Props {
   events?: Event[];
   slots?: Slot[];
   cssProps?: CssCustomProperty[];
+  cssParts?: CssPart[];
 }
 
 const {
@@ -24,6 +26,7 @@ const {
   events = [],
   slots = [],
   cssProps = [],
+  cssParts = [],
 } = Astro.props;
 
 const sections = {
@@ -33,6 +36,7 @@ const sections = {
   Events: events,
   Slots: slots,
   "Custom CSS Properties": cssProps,
+  "CSS Parts": cssParts,
 };
 type SectionName = keyof typeof sections;
 ---
@@ -61,7 +65,9 @@ type SectionName = keyof typeof sections;
                 />
               </svg>
             </button>
-            <a href={categoryUrlHash} class="category-link">{key}</a>
+            <a href={categoryUrlHash} class="category-link">
+              {key}
+            </a>
           </div>
           <ul class="subtree">
             {sections[key as SectionName].map(({ name }) => {

src/components/ApiDocs/data.ts

@@ -3,6 +3,7 @@ import type {
   ClassMember,
   ClassMethod,
   CssCustomProperty,
+  CssPart,
   CustomElement,
   CustomElementDeclaration,
   CustomElementField,
@@ -25,6 +26,7 @@ const memoizedDeclarations: {
     events: Event[];
     slots: Slot[];
     cssProps: CssCustomProperty[];
+    cssParts: CssPart[];
   }[];
 } = {};
 
@@ -60,10 +62,10 @@ export const getCustomElementDeclarations = (tagName: string) => {
   const elementGroup = getElementGroup(tagName, cemData as Package);
 
   const customElementDeclarations = elementGroup?.declarations
-  ? (elementGroup.declarations.filter(
-      (d) => (d as CustomElementDeclaration).customElement
-    ) as CustomElement[])
-  : [];
+    ? (elementGroup.declarations.filter(
+        (d) => (d as CustomElementDeclaration).customElement
+      ) as CustomElement[])
+    : [];
 
   const orderedDeclarations = customElementDeclarations.map((declaration) => {
     const { tagName, deprecated, description } = declaration;
@@ -83,11 +85,16 @@ export const getCustomElementDeclarations = (tagName: string) => {
     const events = declaration.events
       ? declaration.events.sort(memberCompare)
       : [];
-    const slots = declaration.slots ? declaration.slots.sort(memberCompare) : [];
+    const slots = declaration.slots
+      ? declaration.slots.sort(memberCompare)
+      : [];
     const cssProps = declaration.cssProperties
       ? declaration.cssProperties.sort(memberCompare)
       : [];
-  
+    const cssParts = declaration.cssParts
+      ? declaration.cssParts.sort(memberCompare)
+      : [];
+
     return {
       tagName,
       deprecated,
@@ -100,6 +107,7 @@ export const getCustomElementDeclarations = (tagName: string) => {
       events,
       slots,
       cssProps,
+      cssParts,
     };
   });
 

src/pages/components/[...slug]/api.astro

@@ -33,6 +33,7 @@ export async function getStaticPaths() {
         events = [],
         slots = [],
         cssProps = [],
+        cssParts = [],
       } = d;
 
       return (
@@ -43,6 +44,7 @@ export async function getStaticPaths() {
           events={events}
           slots={slots}
           cssProps={cssProps}
+          cssParts={cssParts}
           slot="secondarySidebar"
         />
       );