fix(website): client-side rendering fallback

apps/website/src/app/docAPI.ts

@@ -6,7 +6,7 @@ import { connect } from '@planetscale/database';
 
 const sql = connect({
 	async fetch(input, init) {
-		return fetch(input, { ...init, next: { revalidate: 3_600 } });
+		return fetch(input, { ...init, cache: undefined, next: { revalidate: 3_600 } });
 	},
 	url: process.env.DATABASE_URL!,
 });

apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx

@@ -29,22 +29,20 @@ import type { ItemRouteParams } from '~/util/fetchMember';
 import { fetchMember } from '~/util/fetchMember';
 import { findMember } from '~/util/model';
 
-async function fetchHeadMember({ package: packageName, version, item }: ItemRouteParams): Promise<ApiItem | undefined> {
+async function fetchHeadMember({ package: packageName, version, item }: ItemRouteParams) {
 	const modelJSON = await fetchModelJSON(packageName, version);
 	const model = addPackageToModel(new ApiModel(), modelJSON);
 	const pkg = model.tryGetPackageByName(packageName);
 	const entry = pkg?.entryPoints[0];
-
 	if (!entry) {
 		return undefined;
 	}
 
 	const [memberName] = decodeURIComponent(item).split(OVERLOAD_SEPARATOR);
-
 	return findMember(model, packageName, memberName);
 }
 
-function resolveMemberSearchParams(packageName: string, member: ApiItem): URLSearchParams {
+function resolveMemberSearchParams(packageName: string, member: ApiItem) {
 	const params = new URLSearchParams({
 		pkg: packageName,
 		kind: member?.kind,
@@ -82,7 +80,7 @@ function resolveMemberSearchParams(packageName: string, member: ApiItem): URLSea
 }
 
 export async function generateMetadata({ params }: { params: ItemRouteParams }) {
-	const member = (await fetchHeadMember(params))!;
+	const member = await fetchHeadMember(params);
 	const name = `discord.js${member?.displayName ? ` | ${member.displayName}` : ''}`;
 	const ogTitle = `${params.package ?? 'discord.js'}${member?.displayName ? ` | ${member.displayName}` : ''}`;
 	const url = new URL('https://discordjs.dev/api/dynamic-open-graph.png');

apps/website/src/components/PackageSelect.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
 import { VscPackage } from '@react-icons/all-files/vsc/VscPackage';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';

apps/website/src/components/PropertyList.tsx

@@ -3,7 +3,6 @@ import type {
 	ApiItem,
 	ApiItemContainerMixin,
 	ApiProperty,
-	ApiPropertyItem,
 	ApiPropertySignature,
 } from '@microsoft/api-extractor-model';
 import { ApiItemKind } from '@microsoft/api-extractor-model';
@@ -25,7 +24,7 @@ export function PropertyList({ item }: { item: ApiItemContainerMixin }) {
 					<Fragment key={`${prop.item.displayName}-${idx}`}>
 						<Property
 							inheritedFrom={prop.inherited as ApiDeclaredItem & ApiItemContainerMixin}
-							item={prop.item as ApiPropertyItem}
+							item={prop.item as ApiProperty}
 							separator={PropertySeparatorType.Type}
 						/>
 						<div className="border-t-2 border-light-900 dark:border-dark-100" />

apps/website/src/components/Table.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useMemo, type ReactNode } from 'react';
 
 export function Table({

apps/website/src/components/documentation/MemberContainerDocumentation.tsx

@@ -1,13 +1,13 @@
 import type { ApiDeclaredItem, ApiItemContainerMixin, ApiTypeParameterListMixin } from '@microsoft/api-extractor-model';
 import type { ReactNode } from 'react';
-import { Outline } from '../Outline';
+// import { Outline } from '../Outline';
 import { SyntaxHighlighter } from '../SyntaxHighlighter';
 import { Documentation } from './Documentation';
 import { MethodsSection } from './section/MethodsSection';
 import { PropertiesSection } from './section/PropertiesSection';
 import { SummarySection } from './section/SummarySection';
 import { TypeParameterSection } from './section/TypeParametersSection';
-import { hasProperties, hasMethods, serializeMembers } from './util';
+import { hasProperties, hasMethods /* , serializeMembers */ } from './util';
 
 export function MemberContainerDocumentation({
 	item,
@@ -19,6 +19,7 @@ export function MemberContainerDocumentation({
 	return (
 		<Documentation>
 			{subheading}
+			{/* @ts-expect-error async component */}
 			<SyntaxHighlighter code={item.excerpt.text} />
 			<SummarySection item={item} />
 			{item.typeParameters.length ? <TypeParameterSection item={item} /> : null}

apps/website/src/components/documentation/ObjectHeader.tsx

@@ -11,6 +11,7 @@ export function ObjectHeader({ item }: ObjectHeaderProps) {
 	return (
 		<>
 			<Header kind={item.kind} name={item.displayName} sourceURL={item.sourceLocation.fileUrl} />
+			{/* @ts-expect-error async component */}
 			<SyntaxHighlighter code={item.excerpt.text} />
 			<SummarySection item={item} />
 		</>

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

@@ -1,23 +1,20 @@
 import type { ApiConstructor } from '@microsoft/api-extractor-model';
 import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
-import { useCallback } from 'react';
 import { ParameterTable } from '../../ParameterTable';
 import { TSDoc } from '../tsdoc/TSDoc';
 import { DocumentationSection } from './DocumentationSection';
 
+function getShorthandName(ctor: ApiConstructor) {
+	return `constructor(${ctor.parameters.reduce((prev, cur, index) => {
+		if (index === 0) {
+			return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`;
+		}
+
+		return `${prev}, ${cur.isOptional ? `${cur.name}?` : cur.name}`;
+	}, '')})`;
+}
+
 export function ConstructorSection({ item }: { item: ApiConstructor }) {
-	const getShorthandName = useCallback(
-		(ctor: ApiConstructor) =>
-			`constructor(${ctor.parameters.reduce((prev, cur, index) => {
-				if (index === 0) {
-					return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`;
-				}
-
-				return `${prev}, ${cur.isOptional ? `${cur.name}?` : cur.name}`;
-			}, '')})`,
-		[],
-	);
-
 	return (
 		<DocumentationSection icon={<VscSymbolMethod size={20} />} padded title="Constructor">
 			<div className="flex flex-col gap-2">

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

@@ -1,13 +1,13 @@
 import type { ApiClass, ApiConstructor } from '@microsoft/api-extractor-model';
 import { ApiItemKind } from '@microsoft/api-extractor-model';
-import { Outline } from '../Outline';
+// import { Outline } from '../Outline';
 import { Documentation } from '../documentation/Documentation';
 import { HierarchyText } from '../documentation/HierarchyText';
 import { Members } from '../documentation/Members';
 import { ObjectHeader } from '../documentation/ObjectHeader';
 import { ConstructorSection } from '../documentation/section/ConstructorSection';
 import { TypeParameterSection } from '../documentation/section/TypeParametersSection';
-import { serializeMembers } from '../documentation/util';
+// import { serializeMembers } from '../documentation/util';
 
 export function Class({ clazz }: { clazz: ApiClass }) {
 	const constructor = clazz.members.find((member) => member.kind === ApiItemKind.Constructor) as

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

@@ -1,11 +1,11 @@
 import type { ApiInterface } from '@microsoft/api-extractor-model';
-import { Outline } from '../Outline';
+// import { Outline } from '../Outline';
 import { Documentation } from '../documentation/Documentation';
 import { HierarchyText } from '../documentation/HierarchyText';
 import { Members } from '../documentation/Members';
 import { ObjectHeader } from '../documentation/ObjectHeader';
 import { TypeParameterSection } from '../documentation/section/TypeParametersSection';
-import { serializeMembers } from '../documentation/util';
+// import { serializeMembers } from '../documentation/util';
 
 export function Interface({ item }: { item: ApiInterface }) {
 	return (

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

@@ -8,6 +8,7 @@ export function TypeAlias({ item }: { item: ApiTypeAlias }) {
 	return (
 		<Documentation>
 			<Header kind={item.kind} name={item.displayName} sourceURL={item.sourceLocation.fileUrl} />
+			{/* @ts-expect-error async component */}
 			<SyntaxHighlighter code={item.excerpt.text} />
 			<SummarySection item={item} />
 		</Documentation>

apps/website/src/components/model/function/FunctionBody.tsx

@@ -13,6 +13,7 @@ export interface FunctionBodyProps {
 export function FunctionBody({ item }: { item: ApiFunction }) {
 	return (
 		<Documentation>
+			{/* @ts-expect-error async component */}
 			<SyntaxHighlighter code={item.excerpt.text} />
 			<SummarySection item={item} />
 			{item.typeParameters.length ? <TypeParameterSection item={item} /> : null}

apps/website/src/components/model/method/MethodHeader.tsx

@@ -1,9 +1,19 @@
 import type { ApiMethod, ApiMethodSignature } from '@microsoft/api-extractor-model';
 import { ApiItemKind } from '@microsoft/api-extractor-model';
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import { Anchor } from '~/components/Anchor';
 import { ExcerptText } from '~/components/ExcerptText';
 
+function getShorthandName(method: ApiMethod | ApiMethodSignature) {
+	return `${method.name}${method.isOptional ? '?' : ''}(${method.parameters.reduce((prev, cur, index) => {
+		if (index === 0) {
+			return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`;
+		}
+
+		return `${prev}, ${cur.isOptional ? `${cur.name}?` : cur.name}`;
+	}, '')})`;
+}
+
 export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignature }) {
 	const isDeprecated = Boolean(method.tsdocComment?.deprecatedBlock);
 
@@ -12,18 +22,6 @@ export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignatur
 		[method.displayName, method.overloadIndex],
 	);
 
-	const getShorthandName = useCallback(
-		(method: ApiMethod | ApiMethodSignature) =>
-			`${method.name}${method.isOptional ? '?' : ''}(${method.parameters.reduce((prev, cur, index) => {
-				if (index === 0) {
-					return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`;
-				}
-
-				return `${prev}, ${cur.isOptional ? `${cur.name}?` : cur.name}`;
-			}, '')})`,
-		[],
-	);
-
 	return (
 		<div className="flex flex-col scroll-mt-30" id={key}>
 			<div className="flex flex-col gap-2 md:-ml-9">

apps/website/src/util/model.ts

@@ -5,7 +5,7 @@ export function findMemberByKey(model: ApiModel, packageName: string, containerK
 	return (pkg.members[0] as ApiEntryPoint).tryGetMemberByKey(containerKey);
 }
 
-export function findMember(model: ApiModel, packageName: string, memberName: string | undefined): ApiItem | undefined {
+export function findMember(model: ApiModel, packageName: string, memberName: string | undefined) {
 	if (!memberName) {
 		return undefined;
 	}