feat(website): show union members of type aliases (#10001)

* feat(website): show union members of type aliases

* refactor: suggestions from code review

* Apply suggestions from code review

---------

Co-authored-by: Noel <buechler.noel@outlook.com>

apps/website/src/components/documentation/section/UnionMembersSection.tsx

@@ -0,0 +1,36 @@
+import { Excerpt, type ApiTypeAlias, type ExcerptToken } from '@discordjs/api-extractor-model';
+import { VscSymbolArray } from '@react-icons/all-files/vsc/VscSymbolArray';
+import { useMemo } from 'react';
+import { ExcerptText } from '~/components/ExcerptText';
+import { DocumentationSection } from './DocumentationSection';
+
+export type UnionMember = ExcerptToken[];
+
+export function UnionMembersSection({
+	item,
+	members,
+}: {
+	readonly item: ApiTypeAlias;
+	readonly members: UnionMember[];
+}) {
+	const unionMembers = useMemo(
+		() =>
+			members.map((member, idx) => (
+				<div className="flex flex-row place-items-center gap-4" key={`union-${idx}`}>
+					<span className="break-all font-mono space-y-2">
+						<ExcerptText
+							excerpt={new Excerpt(member, { startIndex: 0, endIndex: member.length })}
+							apiPackage={item.getAssociatedPackage()!}
+						/>
+					</span>
+				</div>
+			)),
+		[item, members],
+	);
+
+	return (
+		<DocumentationSection icon={<VscSymbolArray size={20} />} padded title="Union Members">
+			<div className="flex flex-col gap-4">{unionMembers}</div>
+		</DocumentationSection>
+	);
+}

apps/website/src/components/model/TypeAlias.tsx

@@ -1,10 +1,59 @@
-import type { ApiTypeAlias } from '@discordjs/api-extractor-model';
+import { ExcerptTokenKind, type ApiTypeAlias, ExcerptToken } from '@discordjs/api-extractor-model';
+import { useMemo } from 'react';
 import { SyntaxHighlighter } from '../SyntaxHighlighter';
 import { Documentation } from '../documentation/Documentation';
 import { Header } from '../documentation/Header';
 import { SummarySection } from '../documentation/section/SummarySection';
+import { UnionMembersSection } from '../documentation/section/UnionMembersSection';
 
 export function TypeAlias({ item }: { readonly item: ApiTypeAlias }) {
+	const union = useMemo(() => {
+		const union: ExcerptToken[][] = [];
+		let currentUnionMember: ExcerptToken[] = [];
+		let depth = 0;
+		for (const token of item.typeExcerpt.spannedTokens) {
+			if (token.text.includes('?')) {
+				return [];
+			}
+
+			if (token.text.includes('<')) {
+				depth++;
+			}
+
+			if (token.text.includes('>')) {
+				depth--;
+			}
+
+			if (token.text.trim() === '|' && depth === 0) {
+				if (currentUnionMember.length) {
+					union.push(currentUnionMember);
+					currentUnionMember = [];
+				}
+			} else if (depth === 0 && token.kind === ExcerptTokenKind.Content && token.text.includes('|')) {
+				for (const [idx, tokenpart] of token.text.split('|').entries()) {
+					if (currentUnionMember.length && depth === 0 && idx === 0) {
+						currentUnionMember.push(new ExcerptToken(ExcerptTokenKind.Content, tokenpart));
+						union.push(currentUnionMember);
+						currentUnionMember = [];
+					} else if (currentUnionMember.length && depth === 0) {
+						union.push(currentUnionMember);
+						currentUnionMember = [new ExcerptToken(ExcerptTokenKind.Content, tokenpart)];
+					} else if (tokenpart.length) {
+						currentUnionMember.push(new ExcerptToken(ExcerptTokenKind.Content, tokenpart));
+					}
+				}
+			} else {
+				currentUnionMember.push(token);
+			}
+		}
+
+		if (currentUnionMember.length && union.length) {
+			union.push(currentUnionMember);
+		}
+
+		return union;
+	}, [item]);
+
 	return (
 		<Documentation>
 			<Header
@@ -16,6 +65,7 @@ export function TypeAlias({ item }: { readonly item: ApiTypeAlias }) {
 			{/* @ts-expect-error async component */}
 			<SyntaxHighlighter code={item.excerpt.text} />
 			<SummarySection item={item} />
+			{union.length ? <UnionMembersSection item={item} members={union} /> : null}
 		</Documentation>
 	);
 }