breaking: Upgrade to Docusaurus v3. Drop Node.js v16 and TypeScript v4. (#115)

* Update deps.

* Update ts.

* Update routes.

* Fix TS types.

* Polish.

* Update CI.

* Fix ts.

Author: milesj

.github/workflows/build.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16, 18]
+        node-version: [18, 20]
       fail-fast: true
     steps:
       - uses: actions/checkout@v3

package.json

@@ -14,12 +14,12 @@
   },
   "devDependencies": {
     "@moonrepo/dev": "^2.0.1",
-    "@types/marked": "^4.3.1",
-    "@types/react": "^18.2.23",
-    "eslint": "^8.50.0",
-    "eslint-config-moon": "^2.0.10",
-    "lerna": "^7.3.0",
-    "packemon": "^3.2.1",
+    "@types/marked": "^4.3.2",
+    "@types/react": "^18.2.33",
+    "eslint": "^8.52.0",
+    "eslint-config-moon": "^2.0.11",
+    "lerna": "^7.4.2",
+    "packemon": "^3.2.2",
     "prettier": "^3.0.3",
     "prettier-config-moon": "^1.1.2",
     "react": "^18.2.0",

packages/plugin/package.json

@@ -40,20 +40,21 @@
     ]
   },
   "peerDependencies": {
-    "@docusaurus/core": "^2.0.0",
-    "react": ">=16.0.0",
-    "typescript": "^4.0.0 || ^5.0.0"
+    "@docusaurus/core": "^3.0.0",
+    "react": ">=18.0.0",
+    "typescript": "^5.0.0"
   },
   "dependencies": {
-    "@docusaurus/plugin-content-docs": "^2.4.3",
-    "@docusaurus/types": "^2.4.3",
-    "@docusaurus/utils": "^2.4.3",
-    "@vscode/codicons": "^0.0.33",
+    "@docusaurus/plugin-content-docs": "^3.0.0",
+    "@docusaurus/types": "^3.0.0",
+    "@docusaurus/utils": "^3.0.0",
+    "@vscode/codicons": "^0.0.35",
     "marked": "^4.3.0",
     "typedoc": "0.25.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.4.3",
+    "@docusaurus/module-type-aliases": "^3.0.0",
+    "@docusaurus/tsconfig": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"

packages/plugin/src/components/AnchorLink.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export interface AnchorLinkProps {
 	id: string;
 }

packages/plugin/src/components/ApiChangelog.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PageMetadata } from '@docusaurus/theme-common';
 import type { Props as DocItemProps } from '@theme/DocItem';
 import type { TOCItem } from '../types';

packages/plugin/src/components/ApiDataContext.ts

@@ -1,9 +1,9 @@
 import { createContext } from 'react';
-import type { ApiOptions, DeclarationReflectionMap } from '../types';
+import type { ApiOptions, TSDDeclarationReflectionMap } from '../types';
 
 export const ApiDataContext = createContext<{
 	options: ApiOptions;
-	reflections: DeclarationReflectionMap;
+	reflections: TSDDeclarationReflectionMap;
 }>({
 	options: {
 		banner: '',

packages/plugin/src/components/ApiIndex.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import Link from '@docusaurus/Link';
 import type { PropVersionMetadata } from '@docusaurus/plugin-content-docs';
 import type { GlobalVersion } from '@docusaurus/plugin-content-docs/client';

packages/plugin/src/components/ApiItem.tsx

@@ -1,21 +1,17 @@
-import React, { useMemo } from 'react';
-import type { JSONOutput } from 'typedoc';
+import { useMemo } from 'react';
 import { PageMetadata } from '@docusaurus/theme-common';
 import type { Props as DocItemProps } from '@theme/DocItem';
 import { useReflection } from '../hooks/useReflection';
 import { useReflectionMap } from '../hooks/useReflectionMap';
-import type { DeclarationReflectionMap, TOCItem } from '../types';
+import type { TOCItem, TSDDeclarationReflection, TSDDeclarationReflectionMap } from '../types';
 import { getKindIconHtml } from '../utils/icons';
 import ApiItemLayout from './ApiItemLayout';
 import { displayPartsToMarkdown } from './Comment';
 import { Flags } from './Flags';
 import { Reflection } from './Reflection';
 import { TypeParametersGeneric } from './TypeParametersGeneric';
 
-function extractTOC(
-	item: JSONOutput.DeclarationReflection,
-	map: DeclarationReflectionMap,
-): TOCItem[] {
+function extractTOC(item: TSDDeclarationReflection, map: TSDDeclarationReflectionMap): TOCItem[] {
 	const toc: TOCItem[] = [];
 	const mapped = new Set<string>();
 

packages/plugin/src/components/ApiItemLayout.tsx

@@ -2,7 +2,6 @@
 // we had to duplicate it. Keep this file in sync as much as possible!
 // https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
 
-import React from 'react';
 import type { PropNavigation } from '@docusaurus/plugin-content-docs';
 import { ThemeClassNames, useWindowSize } from '@docusaurus/theme-common';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';

packages/plugin/src/components/ApiPage.tsx

@@ -2,28 +2,33 @@
 
 import '@vscode/codicons/dist/codicon.css';
 import './styles.css';
-import React, { useMemo } from 'react';
-import type { JSONOutput } from 'typedoc';
-import DocPage, { type Props as DocPageProps } from '@theme/DocPage';
-import type { ApiOptions, DeclarationReflectionMap, PackageReflectionGroup } from '../types';
+import { useMemo } from 'react';
+import DocRoot, { type Props as DocRootProps } from '@theme/DocRoot';
+import type {
+	ApiOptions,
+	PackageReflectionGroup,
+	TSDDeclarationReflection,
+	TSDDeclarationReflectionMap,
+	TSDReflection,
+} from '../types';
 import { ApiDataContext } from './ApiDataContext';
 
-function isObject(value: unknown): value is JSONOutput.Reflection {
+function isObject(value: unknown): value is TSDReflection {
 	return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
 function deepMapReflections(
-	data: JSONOutput.Reflection,
-	map: DeclarationReflectionMap,
-	parent?: JSONOutput.Reflection,
+	data: TSDReflection,
+	map: TSDDeclarationReflectionMap,
+	parent?: TSDReflection,
 ) {
 	Object.entries(data).forEach(([key, value]) => {
 		if (key === 'id') {
 			const hasType = 'type' in data;
 
 			// Dont overwrite with reference nodes
 			if (!hasType || (hasType && (data as unknown as { type: string }).type !== 'reference')) {
-				map[Number(value)] = data as JSONOutput.DeclarationReflection;
+				map[Number(value)] = data as TSDDeclarationReflection;
 
 				if (parent) {
 					data.parentId = parent.id;
@@ -43,8 +48,8 @@ function deepMapReflections(
 	return map;
 }
 
-function mapPackagesToReflection(packages: PackageReflectionGroup[]): DeclarationReflectionMap {
-	const map: DeclarationReflectionMap = {};
+function mapPackagesToReflection(packages: PackageReflectionGroup[]): TSDDeclarationReflectionMap {
+	const map: TSDDeclarationReflectionMap = {};
 
 	packages.forEach((pkg) => {
 		pkg.entryPoints.forEach((entry) => {
@@ -55,7 +60,7 @@ function mapPackagesToReflection(packages: PackageReflectionGroup[]): Declaratio
 	return map;
 }
 
-export interface ApiPageProps extends DocPageProps {
+export interface ApiPageProps extends DocRootProps {
 	options: ApiOptions;
 	packages: PackageReflectionGroup[];
 }
@@ -69,7 +74,7 @@ function ApiPage({ options, packages, ...props }: ApiPageProps) {
 	return (
 		<ApiDataContext.Provider value={value}>
 			<div className="apiPage">
-				<DocPage {...props} />
+				<DocRoot {...props} />
 			</div>
 		</ApiDataContext.Provider>
 	);