From e4c5f794b0cafbea2e9a5b6850747b3859d6d269 Mon Sep 17 00:00:00 2001 From: iCrawl Date: Thu, 13 Apr 2023 23:29:26 +0200 Subject: [PATCH] fix(website): client-side rendering fallback --- apps/website/src/app/docAPI.ts | 2 +- .../[package]/[version]/[item]/page.tsx | 8 +++---- apps/website/src/components/PackageSelect.tsx | 2 ++ apps/website/src/components/PropertyList.tsx | 3 +-- apps/website/src/components/Table.tsx | 2 ++ .../MemberContainerDocumentation.tsx | 5 ++-- .../components/documentation/ObjectHeader.tsx | 1 + .../section/ConstructorSection.tsx | 23 ++++++++---------- apps/website/src/components/model/Class.tsx | 4 ++-- .../src/components/model/Interface.tsx | 4 ++-- .../src/components/model/TypeAlias.tsx | 1 + .../model/function/FunctionBody.tsx | 1 + .../components/model/method/MethodHeader.tsx | 24 +++++++++---------- apps/website/src/util/model.ts | 2 +- 14 files changed, 41 insertions(+), 41 deletions(-) diff --git a/apps/website/src/app/docAPI.ts b/apps/website/src/app/docAPI.ts index ba74302be..93accb64d 100644 --- a/apps/website/src/app/docAPI.ts +++ b/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!, }); diff --git a/apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx b/apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx index 5a12a6386..fe51056d0 100644 --- a/apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx +++ b/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 { +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'); diff --git a/apps/website/src/components/PackageSelect.tsx b/apps/website/src/components/PackageSelect.tsx index 0874a7c27..593ca746f 100644 --- a/apps/website/src/components/PackageSelect.tsx +++ b/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'; diff --git a/apps/website/src/components/PropertyList.tsx b/apps/website/src/components/PropertyList.tsx index 092c12506..8dd72ef8f 100644 --- a/apps/website/src/components/PropertyList.tsx +++ b/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 }) {
diff --git a/apps/website/src/components/Table.tsx b/apps/website/src/components/Table.tsx index 341efcd13..a427c9b86 100644 --- a/apps/website/src/components/Table.tsx +++ b/apps/website/src/components/Table.tsx @@ -1,3 +1,5 @@ +'use client'; + import { useMemo, type ReactNode } from 'react'; export function Table({ diff --git a/apps/website/src/components/documentation/MemberContainerDocumentation.tsx b/apps/website/src/components/documentation/MemberContainerDocumentation.tsx index 1a3f3f0ce..c91f3507e 100644 --- a/apps/website/src/components/documentation/MemberContainerDocumentation.tsx +++ b/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 ( {subheading} + {/* @ts-expect-error async component */} {item.typeParameters.length ? : null} diff --git a/apps/website/src/components/documentation/ObjectHeader.tsx b/apps/website/src/components/documentation/ObjectHeader.tsx index edd32b062..8204aa155 100644 --- a/apps/website/src/components/documentation/ObjectHeader.tsx +++ b/apps/website/src/components/documentation/ObjectHeader.tsx @@ -11,6 +11,7 @@ export function ObjectHeader({ item }: ObjectHeaderProps) { return ( <>
+ {/* @ts-expect-error async component */} diff --git a/apps/website/src/components/documentation/section/ConstructorSection.tsx b/apps/website/src/components/documentation/section/ConstructorSection.tsx index 600db28a8..56762bb86 100644 --- a/apps/website/src/components/documentation/section/ConstructorSection.tsx +++ b/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 ( } padded title="Constructor">
diff --git a/apps/website/src/components/model/Class.tsx b/apps/website/src/components/model/Class.tsx index 147561ae1..f2054905d 100644 --- a/apps/website/src/components/model/Class.tsx +++ b/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 diff --git a/apps/website/src/components/model/Interface.tsx b/apps/website/src/components/model/Interface.tsx index 9a0d51f16..a2856826e 100644 --- a/apps/website/src/components/model/Interface.tsx +++ b/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 ( diff --git a/apps/website/src/components/model/TypeAlias.tsx b/apps/website/src/components/model/TypeAlias.tsx index 3c2faf5a9..6d3501093 100644 --- a/apps/website/src/components/model/TypeAlias.tsx +++ b/apps/website/src/components/model/TypeAlias.tsx @@ -8,6 +8,7 @@ export function TypeAlias({ item }: { item: ApiTypeAlias }) { return (
+ {/* @ts-expect-error async component */} diff --git a/apps/website/src/components/model/function/FunctionBody.tsx b/apps/website/src/components/model/function/FunctionBody.tsx index a7f7182dd..63291e433 100644 --- a/apps/website/src/components/model/function/FunctionBody.tsx +++ b/apps/website/src/components/model/function/FunctionBody.tsx @@ -13,6 +13,7 @@ export interface FunctionBodyProps { export function FunctionBody({ item }: { item: ApiFunction }) { return ( + {/* @ts-expect-error async component */} {item.typeParameters.length ? : null} diff --git a/apps/website/src/components/model/method/MethodHeader.tsx b/apps/website/src/components/model/method/MethodHeader.tsx index eea0adfe8..ec549476b 100644 --- a/apps/website/src/components/model/method/MethodHeader.tsx +++ b/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 (
diff --git a/apps/website/src/util/model.ts b/apps/website/src/util/model.ts index 521c10113..523dd0676 100644 --- a/apps/website/src/util/model.ts +++ b/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; }