build: pnpm (#9806)

apps/website/next.config.js

@@ -8,7 +8,7 @@ export default withBundleAnalyzer({
 	reactStrictMode: true,
 	experimental: {
 		typedRoutes: true,
-		serverComponentsExternalPackages: ['@microsoft/api-extractor-model', 'jju'],
+		serverComponentsExternalPackages: ['@rushstack/node-core-library', '@microsoft/api-extractor-model', 'jju'],
 	},
 	images: {
 		dangerouslyAllowSVG: true,

apps/website/package.json

@@ -8,22 +8,25 @@
 		"test": "vitest run",
 		"test:lighthouse": "lighthouse http://localhost:3000 --output-path=./lighthouse-results",
 		"build:copy_readme": "cpy '../../packages/*/README.md' 'src/assets/readme' --rename='home-{{basename}}'",
-		"build:local": "cross-env NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
-		"build:prod": "yarn build:copy_readme && yarn build:css && yarn build:next",
+		"build:local": "cross-env NEXT_PUBLIC_LOCAL_DEV=true pnpm run build:prod",
+		"build:prod": "pnpm run build:copy_readme && pnpm run build:css && pnpm run build:next",
 		"build:next": "next build",
-		"build:css": "yarn generate:css",
-		"build:search_indices": "yarn node scripts/generateAllIndices.js",
-		"build:analyze": "turbo run docs --concurrency=3 && cross-env ANALYZE=true NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
+		"build:css": "pnpm run generate:css",
+		"build:search_indices": "pnpm run scripts/generateAllIndices.js",
+		"build:analyze": "turbo run docs --filter='@discordjs/*' --concurrency=4 && cross-env ANALYZE=true NEXT_PUBLIC_LOCAL_DEV=true pnpm run build:prod",
 		"preview": "next start",
-		"dev": "concurrently 'yarn dev:css' 'yarn dev:next'",
+		"dev": "concurrently 'pnpm run dev:css' 'pnpm run dev:next'",
 		"dev:next": "next dev",
-		"dev:css": "yarn generate:css --watch",
+		"dev:css": "pnpm run generate:css --watch",
 		"generate:css": "unocss 'src/**/*.tsx' '../../packages/ui/src/lib/components/**/*.tsx' --out-file ./src/styles/unocss.css --config ../../unocss.config.ts",
 		"lint": "prettier --check . && cross-env TIMING=1 eslint --format=pretty src",
 		"format": "prettier --write . && cross-env TIMING=1 eslint --fix --format=pretty src",
-		"fmt": "yarn format"
+		"fmt": "pnpm run format"
 	},
 	"type": "module",
+	"directories": {
+		"lib": "src"
+	},
 	"contributors": [
 		"Crawl <icrawltogo@gmail.com>"
 	],
@@ -52,12 +55,13 @@
 		"@discordjs/ui": "workspace:^",
 		"@microsoft/api-extractor-model": "^7.27.6",
 		"@microsoft/tsdoc": "^0.14.2",
+		"@microsoft/tsdoc-config": "0.16.2",
 		"@planetscale/database": "^1.11.0",
 		"@react-icons/all-files": "^4.1.0",
 		"@vercel/analytics": "^1.0.2",
 		"@vercel/edge-config": "^0.2.1",
 		"@vercel/og": "^0.5.11",
-		"ariakit": "^2.0.0-next.44",
+		"ariakit": "2.0.0-next.44",
 		"bright": "^0.8.4",
 		"class-variance-authority": "^0.7.0",
 		"cmdk": "^0.2.0",
@@ -69,7 +73,6 @@
 		"react-custom-scrollbars-2": "^4.5.0",
 		"react-dom": "^18.2.0",
 		"react-use": "^17.4.0",
-		"rehype-raw": "^6.1.1",
 		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
 		"sharp": "^0.32.5",
@@ -82,15 +85,15 @@
 		"@types/node": "18.17.9",
 		"@types/react": "^18.2.21",
 		"@types/react-dom": "^18.2.7",
-		"@unocss/cli": "^0.55.2",
-		"@unocss/eslint-plugin": "^0.55.2",
-		"@unocss/reset": "^0.55.2",
+		"@unocss/cli": "^0.55.3",
+		"@unocss/eslint-plugin": "^0.55.3",
+		"@unocss/reset": "^0.55.3",
 		"@vitejs/plugin-react": "^4.0.4",
-		"@vitest/coverage-v8": "^0.34.2",
+		"@vitest/coverage-v8": "^0.34.3",
 		"concurrently": "^8.2.1",
 		"cpy-cli": "^5.0.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.47.0",
+		"eslint": "^8.48.0",
 		"eslint-config-neon": "^0.1.56",
 		"eslint-formatter-pretty": "^5.0.0",
 		"happy-dom": "^10.11.0",
@@ -99,9 +102,9 @@
 		"turbo": "^1.10.13",
 		"typescript": "^5.2.2",
 		"vercel": "^32.0.2",
-		"vitest": "^0.34.2"
+		"vitest": "^0.34.3"
 	},
 	"engines": {
-		"node": ">=18.13.0"
+		"node": ">=18.17.1"
 	}
 }

apps/website/src/app/docAPI.ts

@@ -4,9 +4,17 @@ import { connect } from '@planetscale/database';
 
 const sql = connect({
 	url: process.env.DATABASE_URL!,
+	async fetch(url, init) {
+		delete init?.cache;
+		return fetch(url, { ...init, next: { revalidate: 3_600 } });
+	},
 });
 
 export async function fetchVersions(packageName: string): Promise<string[]> {
+	if (process.env.NEXT_PUBLIC_LOCAL_DEV || process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
+		return ['main'];
+	}
+
 	const response = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`, {
 		next: { revalidate: 3_600 },
 	});
@@ -29,6 +37,16 @@ export async function fetchModelJSON(packageName: string, version: string): Prom
 		}
 	}
 
+	if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
+		const { rows } = await sql.execute('select data from documentation where name = ? and version = ?', [
+			packageName,
+			'main',
+		]);
+
+		// @ts-expect-error: https://github.com/planetscale/database-js/issues/71
+		return rows[0].data;
+	}
+
 	const { rows } = await sql.execute('select data from documentation where name = ? and version = ?', [
 		packageName,
 		version,

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

@@ -1,4 +1,4 @@
-import { addPackageToModel, tryResolveSummaryText } from '@discordjs/scripts';
+import { tryResolveSummaryText } from '@discordjs/scripts';
 import type {
 	ApiClass,
 	ApiDeclaredItem,
@@ -24,6 +24,7 @@ import { TypeAlias } from '~/components/model/TypeAlias';
 import { Variable } from '~/components/model/Variable';
 import { Enum } from '~/components/model/enum/Enum';
 import { Function } from '~/components/model/function/Function';
+import { addPackageToModel } from '~/util/addPackageToModel';
 import { OVERLOAD_SEPARATOR } from '~/util/constants';
 import type { ItemRouteParams } from '~/util/fetchMember';
 import { fetchMember } from '~/util/fetchMember';

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

@@ -1,4 +1,3 @@
-import { addPackageToModel } from '@discordjs/scripts';
 import type { ApiFunction, ApiItem } from '@microsoft/api-extractor-model';
 import { ApiModel } from '@microsoft/api-extractor-model';
 import dynamic from 'next/dynamic';
@@ -10,6 +9,7 @@ import { CmdKDialog } from '~/components/CmdK';
 import { Nav } from '~/components/Nav';
 import type { SidebarSectionItemData } from '~/components/Sidebar';
 import { resolveItemURI } from '~/components/documentation/util';
+import { addPackageToModel } from '~/util/addPackageToModel';
 import { N_RECENT_VERSIONS, PACKAGES } from '~/util/constants';
 import { Providers } from './providers';
 

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

@@ -2,7 +2,6 @@ import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 import type { SerializeOptions } from 'next-mdx-remote/dist/types';
 import { MDXRemote } from 'next-mdx-remote/rsc';
-import rehypeRaw from 'rehype-raw';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
 import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
@@ -16,7 +15,7 @@ const mdxOptions = {
 	mdxOptions: {
 		remarkPlugins: [remarkGfm],
 		remarkRehypeOptions: { allowDangerousHtml: true },
-		rehypePlugins: [rehypeRaw, rehypeSlug],
+		rehypePlugins: [rehypeSlug],
 		format: 'md',
 	},
 } satisfies SerializeOptions;

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

@@ -13,6 +13,10 @@ async function getData(pkg: string) {
 		notFound();
 	}
 
+	if (process.env.NEXT_PUBLIC_LOCAL_DEV || process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
+		return ['main'];
+	}
+
 	const res = await fetch(`https://docs.discordjs.dev/api/info?package=${pkg}`, { next: { revalidate: 3_600 } });
 	const data: string[] = await res.json();
 

apps/website/src/components/VersionSelect.tsx

@@ -9,6 +9,8 @@ import { useMemo } from 'react';
 import useSWR from 'swr';
 import { fetcher } from '~/util/fetcher';
 
+const isDev = process.env.NEXT_PUBLIC_LOCAL_DEV ?? process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview';
+
 export default function VersionSelect() {
 	const pathname = usePathname();
 	const packageName = pathname?.split('/').slice(3, 4)[0];
@@ -21,7 +23,7 @@ export default function VersionSelect() {
 		() =>
 			versions
 				?.map((item, idx) => (
-					<Link href={`/docs/packages/${packageName}/${item}`} key={`${item}-${idx}`}>
+					<Link href={`/docs/packages/${packageName}/${isDev ? 'main' : item}`} key={`${item}-${idx}`}>
 						<MenuItem
 							className="my-0.5 rounded bg-white p-3 text-sm outline-none active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
 							onClick={() => versionMenu.setOpen(false)}

apps/website/src/middleware.ts

@@ -3,6 +3,10 @@ import { NextResponse, type NextRequest } from 'next/server';
 import { PACKAGES } from './util/constants';
 
 async function fetchLatestVersion(packageName: string) {
+	if (process.env.NEXT_PUBLIC_LOCAL_DEV || process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
+		return 'main';
+	}
+
 	const res = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`, { cache: 'no-store' });
 	const data: string[] = await res.json();
 

apps/website/src/util/addPackageToModel.ts

@@ -0,0 +1,20 @@
+import type { ApiModel, ApiPackage } from '@microsoft/api-extractor-model';
+import { ApiItem } from '@microsoft/api-extractor-model';
+import { TSDocConfiguration } from '@microsoft/tsdoc';
+import { TSDocConfigFile } from '@microsoft/tsdoc-config';
+
+export function addPackageToModel(model: ApiModel, data: any) {
+	const tsdocConfiguration = new TSDocConfiguration();
+	const tsdocConfigFile = TSDocConfigFile.loadFromObject(data.metadata.tsdocConfig);
+	tsdocConfigFile.configureParser(tsdocConfiguration);
+
+	const apiPackage = ApiItem.deserialize(data, {
+		apiJsonFilename: '',
+		toolPackage: data.metadata.toolPackage,
+		toolVersion: data.metadata.toolVersion,
+		versionToDeserialize: data.metadata.schemaVersion,
+		tsdocConfiguration,
+	}) as ApiPackage;
+	model.addMember(apiPackage);
+	return model;
+}

apps/website/src/util/fetchMember.ts

@@ -1,7 +1,7 @@
-import { addPackageToModel } from '@discordjs/scripts';
 import { ApiModel, ApiFunction } from '@microsoft/api-extractor-model';
 import { notFound } from 'next/navigation';
 import { fetchModelJSON } from '~/app/docAPI';
+import { addPackageToModel } from './addPackageToModel';
 import { OVERLOAD_SEPARATOR, PACKAGES } from './constants';
 import { findMember, findMemberByKey } from './model';
 

apps/website/tsconfig.json

@@ -2,14 +2,10 @@
 	"extends": "../../tsconfig.json",
 	"compilerOptions": {
 		"lib": ["ESNext", "DOM", "DOM.Iterable"],
-		"isolatedModules": true,
 		"jsx": "preserve",
 		"baseUrl": ".",
 		"noEmit": true,
-		"allowJs": false,
-		"incremental": true,
 		"skipLibCheck": true,
-		"sourceMap": true,
 		"plugins": [
 			{
 				"name": "next"
@@ -18,8 +14,10 @@
 		"paths": {
 			"~/*": ["./src/*"]
 		},
-		"strictNullChecks": true,
-		"moduleResolution": "node"
+		"moduleResolution": "node",
+		"resolvePackageJsonExports": false,
+		"resolvePackageJsonImports": false,
+		"esModuleInterop": true
 	},
 	"include": ["src/**/*.ts", "src/**/*.tsx", "next-env.d.ts", ".next/types/**/*.ts"],
 	"exclude": ["node_modules"]