chore: upgrade to TS 4.7, compile with NodeNext (#7586)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

.eslintrc.js

@@ -211,10 +211,12 @@ module.exports = {
     ],
 
     'import/extensions': OFF,
-    // Ignore certain webpack aliases because they can't be resolved
+    // This rule doesn't yet support resolving .js imports when the actual file
+    // is .ts. Plus it's not all that useful when our code is fully TS-covered.
     'import/no-unresolved': [
-      ERROR,
+      OFF,
       {
+        // Ignore certain webpack aliases because they can't be resolved
         ignore: [
           '^@theme',
           '^@docusaurus',

__tests__/validate-tsconfig.test.ts

@@ -40,14 +40,12 @@ const tsconfigSchema = Joi.object({
         incremental: Joi.forbidden(),
         tsBuildInfoFile: Joi.forbidden(),
         outDir: Joi.forbidden(),
-        module: Joi.valid('commonjs', 'es2020', 'esnext').required(),
       }).unknown(),
       otherwise: Joi.object({
         noEmit: Joi.valid(false).required(),
         incremental: Joi.valid(true).required(),
         rootDir: Joi.valid('src').required(),
         outDir: Joi.valid('lib').required(),
-        module: Joi.valid('commonjs', 'es2020', 'esnext').required(),
       }).unknown(),
     },
   ),

package.json

@@ -111,6 +111,6 @@
     "stylelint": "^14.9.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^26.0.0",
-    "typescript": "~4.6.4"
+    "typescript": "~4.7.3"
   }
 }

packages/create-docusaurus/templates/classic-typescript/package.json

@@ -26,7 +26,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.0.0-beta.21",
     "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.3"
   },
   "browserslist": {
     "production": [

packages/create-docusaurus/tsconfig.build.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "noEmit": false,
     "composite": true,
-    "module": "es2020",
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
     "rootDir": "src",

packages/create-docusaurus/tsconfig.json

@@ -3,7 +3,6 @@
   "references": [{"path": "./tsconfig.build.json"}],
   "compilerOptions": {
     "noEmit": true,
-    "module": "esnext",
     "rootDir": "."
   },
   "include": ["bin"],

packages/docusaurus-cssnano-preset/tsconfig.json

@@ -4,7 +4,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-logger/tsconfig.json

@@ -6,7 +6,6 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
     "sourceMap": true,
     "declarationMap": true,
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-mdx-loader/tsconfig.json

@@ -6,7 +6,6 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
     "sourceMap": true,
     "declarationMap": true,
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib",
     "types": []

packages/docusaurus-migrate/tsconfig.build.json

@@ -5,7 +5,6 @@
     "composite": true,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-migrate/tsconfig.json

@@ -3,7 +3,6 @@
   "references": [{"path": "./tsconfig.build.json"}],
   "compilerOptions": {
     "noEmit": true,
-    "module": "esnext",
     "rootDir": "."
   },
   "include": ["bin"],

packages/docusaurus-plugin-client-redirects/src/deps.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// TODO incompatible declaration file
+declare module 'eta' {
+  export const defaultConfig: object;
+
+  export function compile(
+    template: string,
+    options?: object,
+  ): (data: object, config: object) => string;
+}

packages/docusaurus-plugin-client-redirects/tsconfig.json

@@ -4,7 +4,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-plugin-content-blog/tsconfig.json

@@ -4,7 +4,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-plugin-content-docs/package.json

@@ -6,9 +6,18 @@
   "sideEffects": false,
   "exports": {
     "./src/*": "./src/*",
-    "./client": "./lib/client/index.js",
+    "./client": {
-    "./server": "./lib/server-export.js",
+      "type": "./lib/client/index.d.ts",
-    ".": "./lib/index.js"
+      "default": "./lib/client/index.js"
+    },
+    "./server": {
+      "type": "./lib/server-export.d.ts",
+      "default": "./lib/server-export.js"
+    },
+    ".": {
+      "types": "./src/plugin-content-docs.d.ts",
+      "default": "./lib/index.js"
+    }
   },
   "types": "src/plugin-content-docs.d.ts",
   "scripts": {

packages/docusaurus-plugin-content-docs/src/client/index.ts

@@ -18,15 +18,60 @@ import {
   getActiveDocContext,
   getDocVersionSuggestions,
 } from './docsClientUtils';
-import type {
-  GlobalPluginData,
-  GlobalVersion,
-  ActivePlugin,
-  ActiveDocContext,
-  DocVersionSuggestions,
-} from '@docusaurus/plugin-content-docs/client';
 import type {UseDataOptions} from '@docusaurus/types';
 
+export type ActivePlugin = {
+  pluginId: string;
+  pluginData: GlobalPluginData;
+};
+export type ActiveDocContext = {
+  activeVersion?: GlobalVersion;
+  activeDoc?: GlobalDoc;
+  alternateDocVersions: {[versionName: string]: GlobalDoc};
+};
+export type GlobalDoc = {
+  /**
+   * For generated index pages, this is the `slug`, **not** `permalink`
+   * (without base URL). Because slugs have leading slashes but IDs don't,
+   * there won't be clashes.
+   */
+  id: string;
+  path: string;
+  sidebar: string | undefined;
+};
+
+export type GlobalVersion = {
+  name: string;
+  label: string;
+  isLast: boolean;
+  path: string;
+  /** The doc with `slug: /`, or first doc in first sidebar */
+  mainDocId: string;
+  docs: GlobalDoc[];
+  /** Unversioned IDs. In development, this list is empty. */
+  draftIds: string[];
+  sidebars?: {[sidebarId: string]: GlobalSidebar};
+};
+
+export type GlobalSidebar = {
+  link?: {
+    label: string;
+    path: string;
+  };
+  // ... we may add other things here later
+};
+export type GlobalPluginData = {
+  path: string;
+  versions: GlobalVersion[];
+  breadcrumbs: boolean;
+};
+export type DocVersionSuggestions = {
+  /** Suggest the latest version */
+  latestVersionSuggestion: GlobalVersion;
+  /** Suggest the same doc, in latest version (if one exists) */
+  latestDocSuggestion?: GlobalDoc;
+};
+
 // Important to use a constant object to avoid React useEffect executions etc.
 // see https://github.com/facebook/docusaurus/issues/5089
 const StableEmptyObject = {};
@@ -71,6 +116,7 @@ export function useActivePluginAndVersion(
   };
 }
 
+/** Versions are returned ordered (most recent first). */
 export function useVersions(pluginId: string | undefined): GlobalVersion[] {
   const data = useDocsData(pluginId);
   return data.versions;
@@ -81,6 +127,10 @@ export function useLatestVersion(pluginId: string | undefined): GlobalVersion {
   return getLatestVersion(data);
 }
 
+/**
+ * Returns `undefined` on doc-unrelated pages, because there's no version
+ * currently considered as active.
+ */
 export function useActiveVersion(
   pluginId: string | undefined,
 ): GlobalVersion | undefined {
@@ -96,7 +146,9 @@ export function useActiveDocContext(
   const {pathname} = useLocation();
   return getActiveDocContext(data, pathname);
 }
-
+/**
+ * Useful to say "hey, you are not on the latest docs version, please switch"
+ */
 export function useDocVersionSuggestions(
   pluginId: string | undefined,
 ): DocVersionSuggestions {

packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts

@@ -616,89 +616,3 @@ declare module '@theme/DocPage' {
 
   export default function DocPage(props: Props): JSX.Element;
 }
-
-// TODO TS only supports reading `exports` in 4.7. We will need to merge the
-// type defs (and JSDoc) here with the implementation after that
-declare module '@docusaurus/plugin-content-docs/client' {
-  import type {UseDataOptions} from '@docusaurus/types';
-
-  export type ActivePlugin = {
-    pluginId: string;
-    pluginData: GlobalPluginData;
-  };
-  export type ActiveDocContext = {
-    activeVersion?: GlobalVersion;
-    activeDoc?: GlobalDoc;
-    alternateDocVersions: {[versionName: string]: GlobalDoc};
-  };
-  export type GlobalDoc = {
-    /**
-     * For generated index pages, this is the `slug`, **not** `permalink`
-     * (without base URL). Because slugs have leading slashes but IDs don't,
-     * there won't be clashes.
-     */
-    id: string;
-    path: string;
-    sidebar: string | undefined;
-  };
-
-  export type GlobalVersion = {
-    name: string;
-    label: string;
-    isLast: boolean;
-    path: string;
-    /** The doc with `slug: /`, or first doc in first sidebar */
-    mainDocId: string;
-    docs: GlobalDoc[];
-    /** Unversioned IDs. In development, this list is empty. */
-    draftIds: string[];
-    sidebars?: {[sidebarId: string]: GlobalSidebar};
-  };
-
-  export type GlobalSidebar = {
-    link?: {
-      label: string;
-      path: string;
-    };
-    // ... we may add other things here later
-  };
-  export type GlobalPluginData = {
-    path: string;
-    versions: GlobalVersion[];
-    breadcrumbs: boolean;
-  };
-  export type DocVersionSuggestions = {
-    /** Suggest the latest version */
-    latestVersionSuggestion: GlobalVersion;
-    /** Suggest the same doc, in latest version (if one exists) */
-    latestDocSuggestion?: GlobalDoc;
-  };
-
-  export const useAllDocsData: () => {[pluginId: string]: GlobalPluginData};
-  export const useDocsData: (pluginId?: string) => GlobalPluginData;
-  export const useActivePlugin: (
-    options?: UseDataOptions,
-  ) => ActivePlugin | undefined;
-  export const useActivePluginAndVersion: (
-    options?: UseDataOptions,
-  ) =>
-    | {activePlugin: ActivePlugin; activeVersion: GlobalVersion | undefined}
-    | undefined;
-  /** Versions are returned ordered (most recent first). */
-  export const useVersions: (pluginId?: string) => GlobalVersion[];
-  export const useLatestVersion: (pluginId?: string) => GlobalVersion;
-  /**
-   * Returns `undefined` on doc-unrelated pages, because there's no version
-   * currently considered as active.
-   */
-  export const useActiveVersion: (
-    pluginId?: string,
-  ) => GlobalVersion | undefined;
-  export const useActiveDocContext: (pluginId?: string) => ActiveDocContext;
-  /**
-   * Useful to say "hey, you are not on the latest docs version, please switch"
-   */
-  export const useDocVersionSuggestions: (
-    pluginId?: string,
-  ) => DocVersionSuggestions;
-}

packages/docusaurus-plugin-content-docs/tsconfig.json

@@ -5,7 +5,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-plugin-content-pages/tsconfig.json

@@ -4,7 +4,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-plugin-debug/tsconfig.json

@@ -5,7 +5,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-plugin-google-analytics/tsconfig.json

@@ -5,7 +5,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-plugin-google-gtag/tsconfig.json

@@ -5,7 +5,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-plugin-ideal-image/tsconfig.json

@@ -5,7 +5,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-plugin-pwa/src/deps.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// TODO incompatible declaration file: https://github.com/unjs/webpackbar/pull/108
+declare module 'webpackbar' {
+  import webpack from 'webpack';
+
+  export default class WebpackBarPlugin extends webpack.ProgressPlugin {
+    constructor(options: {name: string; color?: string});
+  }
+}

packages/docusaurus-plugin-pwa/src/registerSw.ts

@@ -139,7 +139,7 @@ async function registerSW() {
     if (!offlineMode) {
       return sendSkipWaiting();
     }
-    return import('./renderReloadPopup').then(({default: renderReloadPopup}) =>
+    return import('./renderReloadPopup.js').then(({renderReloadPopup}) =>
       renderReloadPopup({
         onReload() {
           wb.addEventListener('controlling', () => {

packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx

@@ -20,7 +20,7 @@ const createContainer = () => {
   return container;
 };
 
-export default function renderReloadPopup(props: Props): Promise<void> {
+export function renderReloadPopup(props: Props): Promise<void> {
   const container = getContainer() ?? createContainer();
   return import('@theme/PwaReloadPopup').then(({default: ReloadPopup}) => {
     ReactDOM.render(<ReloadPopup {...props} />, container);

packages/docusaurus-plugin-pwa/tsconfig.json

@@ -8,7 +8,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-plugin-sitemap/tsconfig.json

@@ -4,7 +4,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-preset-classic/tsconfig.json

@@ -4,7 +4,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-remark-plugin-npm2yarn/tsconfig.json

@@ -6,7 +6,6 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
     "sourceMap": true,
     "declarationMap": true,
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx

@@ -23,7 +23,7 @@ export default function CodeBlockContainer<T extends 'div' | 'pre'>({
   return (
     <As
       // Polymorphic components are hard to type, without `oneOf` generics
-      {...(props as never)}
+      {...(props as any)}
       style={prismCssVariables}
       className={clsx(
         props.className,

packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/index.tsx

@@ -7,6 +7,7 @@
 
 import React, {useCallback, useState, useRef, useEffect} from 'react';
 import clsx from 'clsx';
+// @ts-expect-error: TODO, we need to make theme-classic have type: module
 import copy from 'copy-text-to-clipboard';
 import {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/CodeBlock/CopyButton';

packages/docusaurus-theme-classic/src/theme/NavbarItem/index.tsx

@@ -24,5 +24,5 @@ export default function NavbarItem({type, ...props}: Props): JSX.Element {
   if (!NavbarItemComponent) {
     throw new Error(`No NavbarItem component found for type "${type}".`);
   }
-  return <NavbarItemComponent {...(props as never)} />;
+  return <NavbarItemComponent {...(props as any)} />;
 }

packages/docusaurus-theme-classic/tsconfig.json

@@ -5,7 +5,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-theme-common/Details.d.ts

@@ -1,14 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// `Details` is a separate export entry because of side-effects messing with CSS
-// insertion order. See https://github.com/facebook/docusaurus/pull/7085.
-// However, because TS doesn't recognize `exports` (also a problem in
-// `content-docs`), we have to manually create a stub.
-
-// eslint-disable-next-line import/named
-export {Details, type DetailsProps} from './lib/components/Details';

packages/docusaurus-theme-live-codeblock/tsconfig.json

@@ -5,7 +5,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-theme-search-algolia/package.json

@@ -7,8 +7,14 @@
     "*.css"
   ],
   "exports": {
-    "./client": "./lib/client/index.js",
+    "./client": {
-    ".": "./lib/index.js"
+      "types": "./lib/client/index.d.ts",
+      "default": "./lib/client/index.js"
+    },
+    ".": {
+      "types": "./src/theme-search-algolia.d.ts",
+      "default": "./lib/index.js"
+    }
   },
   "types": "src/theme-search-algolia.d.ts",
   "publishConfig": {

packages/docusaurus-theme-search-algolia/src/deps.d.ts

@@ -8,3 +8,13 @@
 declare module '@docsearch/react/modal';
 
 declare module '@docsearch/react/style';
+
+// TODO incompatible declaration file
+declare module 'eta' {
+  export const defaultConfig: object;
+
+  export function compile(
+    template: string,
+    options?: object,
+  ): (data: object, config: object) => string;
+}

packages/docusaurus-theme-search-algolia/tsconfig.json

@@ -5,7 +5,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-theme-translations/tsconfig.build.json

@@ -7,7 +7,6 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
     "sourceMap": true,
     "declarationMap": true,
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-theme-translations/tsconfig.json

@@ -2,7 +2,6 @@
   "extends": "../../tsconfig.json",
   "references": [{"path": "./tsconfig.build.json"}],
   "compilerOptions": {
-    "module": "esnext",
     "noEmit": true,
     "checkJs": true
   },

packages/docusaurus-types/package.json

@@ -14,6 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "@types/history": "^4.7.11",
+    "@types/react": "*",
     "commander": "^5.1.0",
     "joi": "^17.6.0",
     "react-helmet-async": "^1.3.0",

packages/docusaurus-types/src/index.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import type {JSXElementConstructor} from 'react';
 import type {RuleSetRule, Configuration as WebpackConfiguration} from 'webpack';
 import type {CustomizeRuleString} from 'webpack-merge/dist/types';
 import type {CommanderStatic} from 'commander';
@@ -758,3 +759,24 @@ export type UseDataOptions = {
    */
   failfast?: boolean;
 };
+
+/**
+ * This type is almost the same as `React.ComponentProps`, but with one minor
+ * fix: when the component is a function with no parameters, it produces `{}`
+ * instead of `unknown`, allowing us to spread the props derived from another
+ * component. This is useful for wrap swizzling.
+ *
+ * @see https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/60766
+ */
+export type WrapperProps<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
+> = T extends JSXElementConstructor<infer P>
+  ? unknown extends P
+    ? // eslint-disable-next-line @typescript-eslint/ban-types
+      {}
+    : P
+  : T extends keyof JSX.IntrinsicElements
+  ? JSX.IntrinsicElements[T]
+  : // eslint-disable-next-line @typescript-eslint/ban-types
+    {};

packages/docusaurus-utils-common/tsconfig.json

@@ -6,7 +6,6 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
     "sourceMap": true,
     "declarationMap": true,
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib",
     "noEmitHelpers": false

packages/docusaurus-utils-validation/tsconfig.json

@@ -6,7 +6,6 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
     "sourceMap": true,
     "declarationMap": true,
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus-utils/tsconfig.json

@@ -6,7 +6,6 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
     "sourceMap": true,
     "declarationMap": true,
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/docusaurus/src/client/exports/ComponentCreator.tsx

@@ -132,7 +132,7 @@ export default function ComponentCreator(
       // Is there any way to put this RouteContextProvider upper in the tree?
       return (
         <RouteContextProvider value={routeContext}>
-          <Component {...loadedModules} {...props} />
+          <Component {...loadedModules} {...(props as object)} />
         </RouteContextProvider>
       );
     },

packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/actions.test.ts.snap

@@ -43,11 +43,12 @@ export default function FirstLevelComponentWrapper(props) {
 `;
 
 exports[`wrap TypeScript wrap ComponentInFolder 2`] = `
-"import React, {ComponentProps} from 'react';
+"import React from 'react';
 import ComponentInFolder from '@theme-original/ComponentInFolder';
 import type ComponentInFolderType from '@theme/ComponentInFolder';
+import type {WrapperProps} from '@docusaurus/types';
 
-type Props = ComponentProps<typeof ComponentInFolderType>;
+type Props = WrapperProps<typeof ComponentInFolderType>;
 
 export default function ComponentInFolderWrapper(props: Props): JSX.Element {
   return (
@@ -60,11 +61,12 @@ export default function ComponentInFolderWrapper(props: Props): JSX.Element {
 `;
 
 exports[`wrap TypeScript wrap ComponentInFolder/ComponentInSubFolder 2`] = `
-"import React, {ComponentProps} from 'react';
+"import React from 'react';
 import ComponentInSubFolder from '@theme-original/ComponentInFolder/ComponentInSubFolder';
 import type ComponentInSubFolderType from '@theme/ComponentInFolder/ComponentInSubFolder';
+import type {WrapperProps} from '@docusaurus/types';
 
-type Props = ComponentProps<typeof ComponentInSubFolderType>;
+type Props = WrapperProps<typeof ComponentInSubFolderType>;
 
 export default function ComponentInSubFolderWrapper(props: Props): JSX.Element {
   return (
@@ -77,11 +79,12 @@ export default function ComponentInSubFolderWrapper(props: Props): JSX.Element {
 `;
 
 exports[`wrap TypeScript wrap FirstLevelComponent 2`] = `
-"import React, {ComponentProps} from 'react';
+"import React from 'react';
 import FirstLevelComponent from '@theme-original/FirstLevelComponent';
 import type FirstLevelComponentType from '@theme/FirstLevelComponent';
+import type {WrapperProps} from '@docusaurus/types';
 
-type Props = ComponentProps<typeof FirstLevelComponentType>;
+type Props = WrapperProps<typeof FirstLevelComponentType>;
 
 export default function FirstLevelComponentWrapper(props: Props): JSX.Element {
   return (

packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap

@@ -273,11 +273,12 @@ exports[`swizzle wrap ComponentInFolder JS: theme dir tree 1`] = `
 `;
 
 exports[`swizzle wrap ComponentInFolder TS: ComponentInFolder/index.tsx 1`] = `
-"import React, {ComponentProps} from 'react';
+"import React from 'react';
 import ComponentInFolder from '@theme-original/ComponentInFolder';
 import type ComponentInFolderType from '@theme/ComponentInFolder';
+import type {WrapperProps} from '@docusaurus/types';
 
-type Props = ComponentProps<typeof ComponentInFolderType>;
+type Props = WrapperProps<typeof ComponentInFolderType>;
 
 export default function ComponentInFolderWrapper(props: Props): JSX.Element {
   return (
@@ -317,11 +318,12 @@ exports[`swizzle wrap ComponentInFolder/ComponentInSubFolder JS: theme dir tree
 `;
 
 exports[`swizzle wrap ComponentInFolder/ComponentInSubFolder TS: ComponentInFolder/ComponentInSubFolder/index.tsx 1`] = `
-"import React, {ComponentProps} from 'react';
+"import React from 'react';
 import ComponentInSubFolder from '@theme-original/ComponentInFolder/ComponentInSubFolder';
 import type ComponentInSubFolderType from '@theme/ComponentInFolder/ComponentInSubFolder';
+import type {WrapperProps} from '@docusaurus/types';
 
-type Props = ComponentProps<typeof ComponentInSubFolderType>;
+type Props = WrapperProps<typeof ComponentInSubFolderType>;
 
 export default function ComponentInSubFolderWrapper(props: Props): JSX.Element {
   return (
@@ -361,11 +363,12 @@ exports[`swizzle wrap ComponentInFolder/Sibling JS: theme dir tree 1`] = `
 `;
 
 exports[`swizzle wrap ComponentInFolder/Sibling TS: ComponentInFolder/Sibling.tsx 1`] = `
-"import React, {ComponentProps} from 'react';
+"import React from 'react';
 import Sibling from '@theme-original/ComponentInFolder/Sibling';
 import type SiblingType from '@theme/ComponentInFolder/Sibling';
+import type {WrapperProps} from '@docusaurus/types';
 
-type Props = ComponentProps<typeof SiblingType>;
+type Props = WrapperProps<typeof SiblingType>;
 
 export default function SiblingWrapper(props: Props): JSX.Element {
   return (
@@ -403,11 +406,12 @@ exports[`swizzle wrap FirstLevelComponent JS: theme dir tree 1`] = `
 `;
 
 exports[`swizzle wrap FirstLevelComponent TS: FirstLevelComponent.tsx 1`] = `
-"import React, {ComponentProps} from 'react';
+"import React from 'react';
 import FirstLevelComponent from '@theme-original/FirstLevelComponent';
 import type FirstLevelComponentType from '@theme/FirstLevelComponent';
+import type {WrapperProps} from '@docusaurus/types';
 
-type Props = ComponentProps<typeof FirstLevelComponentType>;
+type Props = WrapperProps<typeof FirstLevelComponentType>;
 
 export default function FirstLevelComponentWrapper(props: Props): JSX.Element {
   return (

packages/docusaurus/src/commands/swizzle/actions.ts

@@ -121,11 +121,12 @@ export async function wrap({
   const toPath = path.resolve(siteDir, THEME_PATH, wrapperFileName);
 
   const content = typescript
-    ? `import React, {ComponentProps} from 'react';
+    ? `import React from 'react';
 import ${componentName} from '@theme-${importType}/${themeComponentName}';
 import type ${componentName}Type from '@theme/${themeComponentName}';
+import type {WrapperProps} from '@docusaurus/types';
 
-type Props = ComponentProps<typeof ${componentName}Type>;
+type Props = WrapperProps<typeof ${componentName}Type>;
 
 export default function ${wrapperComponentName}(props: Props): JSX.Element {
   return (

packages/docusaurus/src/deps.d.ts

@@ -73,3 +73,22 @@ declare module 'webpack/lib/HotModuleReplacementPlugin' {
 
   export default HotModuleReplacementPlugin;
 }
+
+// TODO incompatible declaration file: https://github.com/unjs/webpackbar/pull/108
+declare module 'webpackbar' {
+  import webpack from 'webpack';
+
+  export default class WebpackBarPlugin extends webpack.ProgressPlugin {
+    constructor(options: {name: string; color?: string});
+  }
+}
+
+// TODO incompatible declaration file
+declare module 'eta' {
+  export const defaultConfig: object;
+
+  export function compile(
+    template: string,
+    options?: object,
+  ): (data: object, config: object) => string;
+}

packages/docusaurus/tsconfig.json

@@ -7,8 +7,7 @@
   "compilerOptions": {
     "noEmit": true,
     "checkJs": true,
-    "rootDir": ".",
+    "rootDir": "."
-    "module": "esnext"
   },
   "include": ["bin"],
   "exclude": ["**/__tests__/**"]

packages/docusaurus/tsconfig.server.json

@@ -5,7 +5,6 @@
     "composite": true,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/eslint-plugin/tsconfig.json

@@ -4,7 +4,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/lqip-loader/tsconfig.json

@@ -4,7 +4,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

packages/stylelint-copyright/tsconfig.json

@@ -4,7 +4,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

tsconfig.json

@@ -11,8 +11,8 @@
     "jsx": "react-native",
     "importHelpers": true,
     "noEmitHelpers": true,
-    // Will be overridden in every project
+    // Will be overridden in client projects
-    "module": "esnext",
+    "module": "NodeNext",
     // Avoid accidentally using this config to build
     "noEmit": true,
 
@@ -42,7 +42,7 @@
     "importsNotUsedAsValues": "remove",
 
     /* Module Resolution */
-    "moduleResolution": "node",
+    "moduleResolution": "NodeNext",
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,

website/src/components/ConfigTabs.tsx

@@ -19,12 +19,14 @@ type Props = {
   presetOptionName: string;
 };
 
+const docsPluginId = undefined; // Default docs plugin instance
+
 export default function ConfigTabs({
   code,
   pluginName,
   presetOptionName,
 }: Props): JSX.Element {
-  const versionPath = useActiveVersion()!.path;
+  const versionPath = useActiveVersion(docsPluginId)!.path;
 
   return (
     <Tabs groupId="api-config-ex">

website/src/components/UpgradeGuide/index.tsx

@@ -17,9 +17,11 @@ import Translate from '@docusaurus/Translate';
 import Admonition from '@theme/Admonition';
 import CodeBlock from '@theme/CodeBlock';
 
+const docsPluginId = undefined; // Default docs plugin instance
+
 function PackageJson() {
-  const latestVersion = useLatestVersion();
+  const latestVersion = useLatestVersion(docsPluginId);
-  const allVersions = useVersions();
+  const allVersions = useVersions(docsPluginId);
   // Only happens in deploy preview / local dev, but still nice
   const versionName =
     latestVersion.name === 'current' && allVersions.length > 1
@@ -37,8 +39,8 @@ function PackageJson() {
 }
 
 function VersionNotice() {
-  const latestVersion = useLatestVersion();
+  const latestVersion = useLatestVersion(docsPluginId);
-  const activeVersion = useActiveDocContext().activeVersion!;
+  const activeVersion = useActiveDocContext(docsPluginId).activeVersion!;
   const isBrowser = useIsBrowser();
   // It's possible that the user is browsing a snapshot version
   // which is only detectable once we are in the browser

website/src/pages/versions.tsx

@@ -17,6 +17,8 @@ import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
 import VersionsArchived from '@site/versionsArchived.json';
 
+const docsPluginId = undefined; // Default docs plugin instance
+
 const VersionsArchivedList = Object.entries(VersionsArchived);
 
 function DocumentationLabel() {
@@ -37,8 +39,8 @@ export default function Version(): JSX.Element {
   const {
     siteConfig: {organizationName, projectName},
   } = useDocusaurusContext();
-  const versions = useVersions();
+  const versions = useVersions(docsPluginId);
-  const latestVersion = useLatestVersion();
+  const latestVersion = useLatestVersion(docsPluginId);
   const currentVersion = versions.find(
     (version) => version.name === 'current',
   )!;

website/tsconfig.json

@@ -28,6 +28,8 @@
     "noUnusedParameters": false,
     "importsNotUsedAsValues": "remove",
 
+    "moduleResolution": "NodeNext",
+
     // This is important. We run `yarn tsc` in website so we can catch issues
     // with our declaration files (mostly names that are forgotten to be
     // imported, invalid semantics...). Because we don't have end-to-end type

yarn.lock

@@ -3259,9 +3259,9 @@
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
 "@tsconfig/docusaurus@^1.0.5":
-  version "1.0.5"
+  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@tsconfig/docusaurus/-/docusaurus-1.0.5.tgz#5298c5b0333c6263f06c3149b38ebccc9f169a4e"
+  resolved "https://registry.yarnpkg.com/@tsconfig/docusaurus/-/docusaurus-1.0.6.tgz#7305a7fa590decc0d5968500234e95fd68788978"
-  integrity sha512-KM/TuJa9fugo67dTGx+ktIqf3fVc077J6jwHu845Hex4EQf7LABlNonP/mohDKT0cmncdtlYVHHF74xR/YpThg==
+  integrity sha512-1QxDaP54hpzM6bq9E+yFEo4F9WbWHhsDe4vktZXF/iDlc9FqGr9qlg+3X/nuKQXx8QxHV7ue8NXFazzajsxFBA==
 
 "@types/babel__core@^7.1.14":
   version "7.1.19"
@@ -14884,16 +14884,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
-typescript@^4.6.4:
+typescript@^4.7.3, typescript@~4.7.3:
   version "4.7.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
   integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
 
-typescript@~4.6.4:
-  version "4.6.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9"
-  integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==
-
 ua-parser-js@^0.7.30:
   version "0.7.31"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
@@ -15365,9 +15360,9 @@ vfile@^4.0.0:
     vfile-message "^2.0.0"
 
 vfile@^5.0.0:
-  version "5.3.2"
+  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.2.tgz#b499fbc50197ea50ad3749e9b60beb16ca5b7c54"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.3.tgz#70b75779d99e0698a8cb6536a09361ac37f800a0"
-  integrity sha512-w0PLIugRY3Crkgw89TeMvHCzqCs/zpreR31hl4D92y6SOE07+bfJe+dK5Q2akwS+i/c801kzjoOr9gMcTe6IAA==
+  integrity sha512-xwALvwUKmXzHOri5dGXqXNN8JDEvxPhf8avC+E+pJEl32e4/grLdRdsgx23HpK7QI0cwgR4+QfaM8D5KUnki3g==
   dependencies:
     "@types/unist" "^2.0.0"
     is-buffer "^2.0.0"