Skip to content

Commit fbe4771

Browse files
committed
Add ability to show css parts in the docs
1 parent a06d655 commit fbe4771

File tree

5 files changed

+29
-7
lines changed

5 files changed

+29
-7
lines changed

src/components/ApiDocs/ApiDocs.astro

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const declarations = getCustomElementDeclarations(element);
2525
events = [],
2626
slots = [],
2727
cssProps = [],
28+
cssParts = [],
2829
} = d;
2930

3031
return (
@@ -38,6 +39,7 @@ const declarations = getCustomElementDeclarations(element);
3839
events={events}
3940
slots={slots}
4041
cssProps={cssProps}
42+
cssParts={cssParts}
4143
/>
4244
);
4345
})

src/components/ApiDocs/ApiDocsDeclaration.astro

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type {
44
ClassMember,
55
ClassMethod,
66
CssCustomProperty,
7+
CssPart,
78
CustomElement,
89
CustomElementField,
910
Event,
@@ -24,6 +25,7 @@ interface Props {
2425
events?: Event[];
2526
slots?: Slot[];
2627
cssProps?: CssCustomProperty[];
28+
cssParts?: CssPart[];
2729
}
2830
2931
const {
@@ -36,6 +38,7 @@ const {
3638
events = [],
3739
slots = [],
3840
cssProps = [],
41+
cssParts = [],
3942
} = Astro.props;
4043
---
4144

@@ -57,6 +60,7 @@ const {
5760
<ApiDocsSection title="Events" members={events} />
5861
<ApiDocsSection title="Slots" members={slots} />
5962
<ApiDocsSection title="Custom CSS Properties" members={cssProps} />
63+
<ApiDocsSection title="CSS Parts" members={cssParts} />
6064

6165
<style>
6266
.declaration-header code {

src/components/ApiDocs/ApiDocsDeclarationList.astro

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type {
66
Event,
77
Slot,
88
CssCustomProperty,
9+
CssPart,
910
} from "custom-elements-manifest";
1011
1112
interface Props {
@@ -15,6 +16,7 @@ interface Props {
1516
events?: Event[];
1617
slots?: Slot[];
1718
cssProps?: CssCustomProperty[];
19+
cssParts?: CssPart[];
1820
}
1921
2022
const {
@@ -24,6 +26,7 @@ const {
2426
events = [],
2527
slots = [],
2628
cssProps = [],
29+
cssParts = [],
2730
} = Astro.props;
2831
2932
const sections = {
@@ -33,6 +36,7 @@ const sections = {
3336
Events: events,
3437
Slots: slots,
3538
"Custom CSS Properties": cssProps,
39+
"CSS Parts": cssParts,
3640
};
3741
type SectionName = keyof typeof sections;
3842
---
@@ -61,7 +65,9 @@ type SectionName = keyof typeof sections;
6165
/>
6266
</svg>
6367
</button>
64-
<a href={categoryUrlHash} class="category-link">{key}</a>
68+
<a href={categoryUrlHash} class="category-link">
69+
{key}
70+
</a>
6571
</div>
6672
<ul class="subtree">
6773
{sections[key as SectionName].map(({ name }) => {

src/components/ApiDocs/data.ts

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type {
33
ClassMember,
44
ClassMethod,
55
CssCustomProperty,
6+
CssPart,
67
CustomElement,
78
CustomElementDeclaration,
89
CustomElementField,
@@ -25,6 +26,7 @@ const memoizedDeclarations: {
2526
events: Event[];
2627
slots: Slot[];
2728
cssProps: CssCustomProperty[];
29+
cssParts: CssPart[];
2830
}[];
2931
} = {};
3032

@@ -60,10 +62,10 @@ export const getCustomElementDeclarations = (tagName: string) => {
6062
const elementGroup = getElementGroup(tagName, cemData as Package);
6163

6264
const customElementDeclarations = elementGroup?.declarations
63-
? (elementGroup.declarations.filter(
64-
(d) => (d as CustomElementDeclaration).customElement
65-
) as CustomElement[])
66-
: [];
65+
? (elementGroup.declarations.filter(
66+
(d) => (d as CustomElementDeclaration).customElement
67+
) as CustomElement[])
68+
: [];
6769

6870
const orderedDeclarations = customElementDeclarations.map((declaration) => {
6971
const { tagName, deprecated, description } = declaration;
@@ -83,11 +85,16 @@ export const getCustomElementDeclarations = (tagName: string) => {
8385
const events = declaration.events
8486
? declaration.events.sort(memberCompare)
8587
: [];
86-
const slots = declaration.slots ? declaration.slots.sort(memberCompare) : [];
88+
const slots = declaration.slots
89+
? declaration.slots.sort(memberCompare)
90+
: [];
8791
const cssProps = declaration.cssProperties
8892
? declaration.cssProperties.sort(memberCompare)
8993
: [];
90-
94+
const cssParts = declaration.cssParts
95+
? declaration.cssParts.sort(memberCompare)
96+
: [];
97+
9198
return {
9299
tagName,
93100
deprecated,
@@ -100,6 +107,7 @@ export const getCustomElementDeclarations = (tagName: string) => {
100107
events,
101108
slots,
102109
cssProps,
110+
cssParts,
103111
};
104112
});
105113

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export async function getStaticPaths() {
3333
events = [],
3434
slots = [],
3535
cssProps = [],
36+
cssParts = [],
3637
} = d;
3738

3839
return (
@@ -43,6 +44,7 @@ export async function getStaticPaths() {
4344
events={events}
4445
slots={slots}
4546
cssProps={cssProps}
47+
cssParts={cssParts}
4648
slot="secondarySidebar"
4749
/>
4850
);

0 commit comments

Comments
 (0)