Update Docusaurus to v3 (#4774)

* Update Docusaurus packages

* Rename DS config file

* Update DS config file to TS syntax

* Add DS faster package

* Only transpile codeblocks in CI

* Enable "faster" build tools

* Fix broken anchor links

* Update DS + TS config to speed up TS compilation

* Build RTK so types are available

* Fix more broken anchors

* Fix revert of remark-ts-tools

* Convert sidebars file to TS

* Use remark-ts-tools 2.0

Author: markerikson

docs/api/createAsyncThunk.mdx

@@ -108,7 +108,7 @@ An object with the following optional fields:
 
 - `condition(arg, { getState, extra } ): boolean | Promise<boolean>`: a callback that can be used to skip execution of the payload creator and all action dispatches, if desired. See [Canceling Before Execution](#canceling-before-execution) for a complete description.
 - `dispatchConditionRejection`: if `condition()` returns `false`, the default behavior is that no actions will be dispatched at all. If you still want a "rejected" action to be dispatched when the thunk was canceled, set this flag to `true`.
-- `idGenerator(arg): string`: a function to use when generating the `requestId` for the request sequence. Defaults to use [nanoid](./otherExports.mdx/#nanoid), but you can implement your own ID generation logic.
+- `idGenerator(arg): string`: a function to use when generating the `requestId` for the request sequence. Defaults to use [nanoid](./otherExports.mdx#nanoid), but you can implement your own ID generation logic.
 - `serializeError(error: unknown) => any` to replace the internal `miniSerializeError` method with your own serialization logic.
 - `getPendingMeta({ arg, requestId }, { getState, extra }): any`: a function to create an object that will be merged into the `pendingAction.meta` field.
 

docs/api/createEntityAdapter.mdx

@@ -341,7 +341,7 @@ const globalizedSelectors = booksAdapter.getSelectors((state) => state.books, {
 })
 ```
 
-If no instance is passed, it will default to [`createDraftSafeSelector`](./createSelector#createDraftSafeSelector).
+If no instance is passed, it will default to [`createDraftSafeSelector`](./createSelector.mdx#createdraftsafeselector).
 
 :::
 

docs/api/createSlice.mdx

@@ -498,7 +498,7 @@ As a result, there are two ways of getting final selectors:
 
 #### `selectors`
 
-Most commonly, the slice is reliably mounted under its [`reducerPath`](#reducerPath).
+Most commonly, the slice is reliably mounted under its [`reducerPath`](#reducerpath).
 
 Following this, the slice has a `selectSlice` selector attached, which assumes that the slice is located under `rootState[slice.reducerPath]`.
 

docs/rtk-query/api/createApi.mdx

@@ -144,7 +144,7 @@ export type QueryReturnValue<T = unknown, E = unknown, M = unknown> =
 
 [summary](docblock://query/createApi.ts?token=CreateApiOptions.endpoints)
 
-See [Anatomy of an endpoint](#anatomy-of-an-endpoint) for details on individual properties.
+See [Endpoint Definition Parameters](#endpoint-definition-parameters) for details on individual properties.
 
 #### Query endpoint definition
 

docs/rtk-query/internal/buildMiddleware/invalidationByTags.mdx

@@ -63,7 +63,7 @@ const handler: ApiMiddlewareInternalHandler = (action, mwApi) => {
 1. `invalidateTags()` initiates:
    1. invalidateTags function is called with a list of tags generated from the action metadata
    2. in the case of a [queryThunk] resolution an empty set of tags is always provided
-2. The tags calculated are added to the list of pending tags to invalidate (see [delayed](#Delayed))
+2. The tags calculated are added to the list of pending tags to invalidate (see [delayed](#delayed))
 3. (optional: 'Delayed') the invalidateTags function is ended if the `apiSlice.invalidationBehavior` is set to "delayed" and there are any pending thunks/queries running in that `apiSlice`
 4. Pending tags are reset to an empty list, if there are no tags the function ends here
 5. Selects all `{ endpointName, originalArgs, queryCacheKey }` combinations that would be invalidated by a specific set of tags.

docs/rtk-query/overview.md

@@ -179,7 +179,7 @@ export default function App() {
 
 ## Further Information
 
-See the [**RTK Query Quick Start tutorial**](../tutorials/rtk-query.mdx/) for examples of how to add RTK Query to a project that uses Redux Toolkit, set up an "API slice" with endpoint definitions, and how to use the auto-generated React hooks in your components.
+See the [**RTK Query Quick Start tutorial**](../tutorials/rtk-query.mdx) for examples of how to add RTK Query to a project that uses Redux Toolkit, set up an "API slice" with endpoint definitions, and how to use the auto-generated React hooks in your components.
 
 The [**RTK Query usage guide section**](./usage/queries.mdx) has information on topics like [querying data](./usage/queries.mdx), [using mutations to send updates to the server](./usage/mutations.mdx), [streaming cache updates](./usage/streaming-updates.mdx), and much more.
 

docs/rtk-query/usage-with-typescript.mdx

@@ -527,7 +527,7 @@ function MaybePost({ id }: { id?: number }) {
 
 ## Type safe error handling
 
-When an error is gracefully provided from a [`base query`](./api/createApi.mdx#baseQuery), RTK query will provide the error
+When an error is gracefully provided from a [`base query`](./api/createApi.mdx#basequery), RTK query will provide the error
 directly. If an unexpected error is thrown by user code rather than a handled error,
 that error will be transformed into a `SerializedError` shape. Users should make sure that they are checking which kind of error they are dealing with before attempting to access its properties. This can be done in a type safe manner either
 by using a type guard, e.g. by checking for [discriminated properties](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#the-in-operator-narrowing),
@@ -613,7 +613,7 @@ function PostDetail() {
           <div>{errMsg}</div>
         </div>
       )
-    } 
+    }
     // you can access all properties of `SerializedError` here
     return <div>{error.message}</div>
   }

docs/rtk-query/usage/cache-behavior.mdx

@@ -403,7 +403,7 @@ The Redux docs have always recommended [keeping data in a normalized lookup tabl
 
 There are a couple additional points that can help here:
 
-- The generated query hooks have [a `selectFromResult` option](../api/created-api/hooks.mdx#selectfromresult) that allow components to read individual pieces of data from a query result. As an example, a `<TodoList>` component might call `useTodosQuery()`, and each individual `<TodoListItem>` could use the same query hook but select from the result to get the right todo object.
+- The generated query hooks have [a `selectFromResult` option](../api/created-api/hooks.mdx#usequery) that allow components to read individual pieces of data from a query result. As an example, a `<TodoList>` component might call `useTodosQuery()`, and each individual `<TodoListItem>` could use the same query hook but select from the result to get the right todo object.
 - You can use the [`transformResponse` endpoint option](../api/createApi.mdx#transformresponse) to modify the fetched data so that it's [stored in a different shape](./customizing-queries.mdx#customizing-query-responses-with-transformresponse), such as using `createEntityAdapter` to normalize the data _for this one response_ before it's inserted into the cache.
 
 ### Further information

docs/rtk-query/usage/customizing-queries.mdx

@@ -690,7 +690,7 @@ import type {
   FetchArgs,
   FetchBaseQueryError,
 } from '@reduxjs/toolkit/query'
-import type { FetchBaseQueryMeta } from '@reduxjs/toolkit/dist/query/fetchBaseQuery'
+import type { FetchBaseQueryMeta } from '@reduxjs/toolkit/query'
 import { uuid } from './idGenerator'
 
 // highlight-start
@@ -980,7 +980,7 @@ You could also try creating a custom base query that uses the SDK, and define en
 
 In certain scenarios, you may wish to have a `query` or `mutation` where sending a request or returning data is not relevant for the situation. Such a scenario would be to leverage the `invalidatesTags` property to force re-fetch specific `tags` that have been provided to the cache.
 
-See also [`providing errors to the cache`](./automated-refetching.mdx#providing-data-to-the-cache) to see additional detail and an example for such a scenario to 'refetch errored queries'.
+See also ["providing errors to the cache"](./automated-refetching.mdx#providing-errors-to-the-cache) to see additional detail and an example for such a scenario to 'refetch errored queries'.
 
 ```ts title="Using a no-op queryFn"
 // file: types.ts noEmit

docs/rtk-query/usage/error-handling.mdx

@@ -76,7 +76,7 @@ There are quite a few ways that you can manage your errors, and in some cases, y
 
 :::tip
 
-Redux Toolkit has [action matching utilities](../../api/matching-utilities.mdx#matching-utilities) that we can leverage for additional custom behaviors.
+Redux Toolkit has [action matching utilities](../../api/matching-utilities.mdx) that we can leverage for additional custom behaviors.
 
 :::
 

docs/tsconfig.json

@@ -10,22 +10,23 @@
     "noEmitOnError": false,
     "strict": true,
     "removeComments": false,
-    "module": "ESNext",
-    "target": "ESNext",
+    "module": "ES2020",
+    "target": "ES2020",
     "allowJs": true,
     "checkJs": true,
     "alwaysStrict": false,
     "baseUrl": "..",
     "jsx": "preserve",
+    "traceResolution": false,
+    "explainFiles": false,
     "paths": {
-      "react": ["../node_modules/@types/react"],
-      "react-dom": ["../node_modules/@types/react-dom"],
-      "@reduxjs/toolkit": ["packages/toolkit/src/index.ts"],
-      "@reduxjs/toolkit/query": ["packages/toolkit/src/query/index.ts"],
+      "react": ["docs/node_modules/@types/react"],
+      "react-dom": ["docs/node_modules/@types/react-dom"],
+      "@reduxjs/toolkit": ["packages/toolkit/dist/index.d.ts"],
+      "@reduxjs/toolkit/query": ["packages/toolkit/dist/query/index.d.ts"],
       "@reduxjs/toolkit/query/react": [
-        "packages/toolkit/src/query/react/index.ts"
+        "packages/toolkit/dist/query/react/index.d.ts"
       ],
-      "@reduxjs/toolkit/dist/query/*": ["packages/toolkit/src/query/*"],
       "@virtual/*": ["docs/virtual/*"],
       "your-cool-library": ["docs/virtual/your-cool-library/index.ts"],
       "redux-logger": ["docs/virtual/redux-logger/index.ts"],

docs/usage/migrating-rtk-2.md

@@ -897,7 +897,7 @@ yield takeEvery(todoAdded.type, saga)
 
 ### Custom slice reducer creators
 
-With the addition of the [callback syntax for createSlice](#callback-syntax-for-createslicereducers), the [suggestion](https://github.com/reduxjs/redux-toolkit/issues/3837) was made to enable custom slice reducer creators. These creators would be able to:
+With the addition of the [callback syntax for createSlice](#createslicereducers-callback-syntax-and-thunk-support), the [suggestion](https://github.com/reduxjs/redux-toolkit/issues/3837) was made to enable custom slice reducer creators. These creators would be able to:
 
 - Modify reducer behavior by adding case or matcher reducers
 - Attach actions (or any other useful functions) to `slice.actions`

docs/usage/usage-with-typescript.md

@@ -413,7 +413,7 @@ type AtLeastOneUserField = AtLeastOne<User>
 
 ### Typing Async Thunks Inside `createSlice`
 
-As of 2.0, `createSlice` allows [defining thunks inside of `reducers` using a callback syntax](../api/createSlice.mdx/#the-reducers-creator-callback-notation).
+As of 2.0, `createSlice` allows [defining thunks inside of `reducers` using a callback syntax](../api/createSlice.mdx#the-reducers-creator-callback-notation).
 
 Typing for the `create.asyncThunk` method works in the same way as [`createAsyncThunk`](#createasyncthunk), with one key difference.
 

netlify.toml

@@ -1,7 +1,7 @@
 [build]
   base    = "website"
   publish = "build"
-  command = "yarn run netlify-build && ls  && cp _redirects ./build"
+  command = "pushd ../packages/toolkit && yarn build && popd && yarn run netlify-build && ls  && cp _redirects ./build"
   ignore = "git diff --quiet HEAD^ HEAD docs website"
 
 [build.environment]

website/docusaurus.config.js renamed to website/docusaurus.config.ts

@@ -1,18 +1,22 @@
 // site configuration options.
-const { resolve } = require('path')
-const {
-  linkDocblocks,
-  transpileCodeblocks,
-} = require('remark-typescript-tools')
+import { resolve } from 'path'
+import { linkDocblocks, transpileCodeblocks } from 'remark-typescript-tools'
+import type { Options, ThemeConfig } from '@docusaurus/preset-classic'
+import type { Config } from '@docusaurus/types'
+import type { Options as UmamiOptions } from '@dipakparmar/docusaurus-plugin-umami'
+import type { Options as RSDoctorOptions } from '@docusaurus/plugin-rsdoctor'
 
-module.exports = {
+const config: Config = {
+  future: {
+    experimental_faster: true,
+  },
   presets: [
     [
       '@docusaurus/preset-classic',
       {
         docs: {
           path: '../docs',
-          sidebarPath: require.resolve('./sidebars.json'),
+          sidebarPath: require.resolve('./sidebars'),
           showLastUpdateTime: true,
           routeBasePath: '/',
           include: [
@@ -35,21 +39,24 @@ module.exports = {
                 },
               },
             ],
-            [
-              transpileCodeblocks,
-              {
-                compilerSettings: {
-                  tsconfig: resolve(__dirname, '../docs/tsconfig.json'),
-                  externalResolutions: {},
-                },
-              },
-            ],
-          ],
+            // Only transpile codeblocks in CI, as it's slow
+            process.env.CI
+              ? [
+                  transpileCodeblocks,
+                  {
+                    compilerSettings: {
+                      tsconfig: resolve(__dirname, '../docs/tsconfig.json'),
+                      externalResolutions: {},
+                    },
+                  },
+                ]
+              : null,
+          ].filter(Boolean),
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
         },
-      },
+      } satisfies Options,
     ],
   ],
   projectName: 'redux-toolkit',
@@ -177,21 +184,22 @@ module.exports = {
       appId: 'CK59DFV0FC',
       apiKey: '98e886dfbcde7f7e8ec8d7ff1c2c34c8',
       indexName: 'redux-starter-kit',
-      algoliaOptions: {},
     },
-  },
+  } satisfies ThemeConfig,
   plugins: [
     [
       '@dipakparmar/docusaurus-plugin-umami',
-      /** @type {import('@dipakparmar/docusaurus-plugin-umami').Options} */
-      ({
+      {
         websiteID: '616c102e-05dd-4a74-b63e-01bb52f1bc6c',
         analyticsDomain: 'redux-docs-umami.up.railway.app',
         scriptName: 'script.js',
         dataAutoTrack: true,
         dataDoNotTrack: true,
         dataCache: true,
-      }),
+      } satisfies UmamiOptions,
     ],
+    process.env.RSDOCTOR === 'true' && ['rsdoctor', {}],
   ],
 }
+
+export default config

website/package.json

@@ -1,6 +1,7 @@
 {
   "name": "website",
   "scripts": {
+    "dev": "docusaurus start",
     "start": "docusaurus start",
     "build": "docusaurus build",
     "netlify-build": "yarn install && yarn build",
@@ -10,13 +11,12 @@
   },
   "dependencies": {
     "@dipakparmar/docusaurus-plugin-umami": "^2.0.6",
-    "@docusaurus/core": "2.1.0",
-    "@docusaurus/preset-classic": "2.1.0",
+    "@docusaurus/core": "3.6.3",
+    "@docusaurus/preset-classic": "3.6.3",
     "classnames": "^2.2.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-lite-youtube-embed": "^2.0.3",
-    "remark-typescript-tools": "^1.1.0",
     "typescript": "^5.5.4"
   },
   "browserslist": {
@@ -32,7 +32,9 @@
     ]
   },
   "devDependencies": {
+    "@docusaurus/faster": "^3.6.3",
     "netlify-plugin-cache": "^1.0.3",
-    "prettier": "^3.2.5"
+    "prettier": "^3.2.5",
+    "remark-typescript-tools": "2.0.0-alpha.1"
   }
 }