Update Docusaurus to v3

[markerikson]

This PR:

• Upgrades Docusaurus from v2 to v3
• Switches to use RSPack for builds

Fixes #4766
Fixes #4767

Status

This was a rather painful last 8 hours. Recapping:

• The docs client-side interactivity broke because of Migrate to React 19  #4409 , because we ended up with the website also using React 19, and Docusaurus v2 doesn't support that properly. That meant that the server-side SSG build worked okay (and generated static HTML), but the client side threw an error while trying to load React, so none of the JS features worked.
• Docusaurus v3 supports React 19, so I figured it would be a possible solution for fixing this
• the DS v3 upgrade was trivial. So was switching to use their new RSPack config option.
• upgrading to DS v3 seems to have fixed all the "things aren't working on the client side" issues (search, snippet copying), even with us using React 19 everywhere
• Webpack builds were 10min cold, 20s cached. RSPack was 5 min.
• the vast majority of our slow RTK docs build time is the remark-ts-tools plugin compiling our snippets
• most of that time, in turn, appears to be scanning the file system (including all of the /@types/ folders in the root node_modules_, and loading source file contents. over and over and over.
• disabling the code snippet compilation dropped build time to 20s with RSPack
• given that, I've changed the DS config to only run the snippet compilation in CI
• I added a couple layers of caching inside remark-ts-tools, for module resolution and file contents. Once I finally got it cooperating, RSPack builds with TS compilation are down to ~90s
• I couldn't get the Yalc-installed local build to work in CI, so I'll put up a PR to remark-ts-tools and hopefully we can get that merged and published shortly

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2ad8d1a:

Sandbox	Source
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
@examples-action-listener/counter	Configuration
rtk-esm-cra	Configuration

[github-actions]

size-limit report 📦

Path	Size

[netlify]

✅ Deploy Preview for redux-starter-kit-docs ready!

Name	Link
🔨 Latest commit	2ad8d1a
🔍 Latest deploy log	https://app.netlify.com/sites/redux-starter-kit-docs/deploys/6765f2e4710fa600086d7a26
😎 Deploy Preview	https://deploy-preview-4774--redux-starter-kit-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[markerikson]

Looks like the TS/JS tabs are pretty broken, and in fact it's nuking all the code snippets. That's going to take some investigating.

[rcherny]

I am wondering if it is worth merging / deploying this even if the TS/JS toggles aren't working, simply because this does resolve a multitude of other issues.

Obviously up to the team, though 🤷‍♂️

[markerikson]

@rcherny unfortunately it turns out that the current changes actually delete all of the code snippets entirely. Which is... bad :)

It's something about the Markdown + TS compilation plugin, but I don't know what yet.

[markerikson]

After a lot more investigation, I found that:

• remark-typescript-tools already had a PR merged to support MDX v3: Add support for MDX3 and Prettier v3 phryneas/remark-typescript-tools#15 . That had been released as 2.0.0-alpha.0
• That same PR also upgraded Prettier to v3
• Prettier v3's API is now entirely async, so the PR converted the internals of the conversion to return Markdown nodes async
• However... while the plugin's transform is allowed to be async, it wants you to return the actual Markdown structure as real sync nodes and not promises. That is why the code blocks were getting removed - the Markdown processing was looking for Node and getting Promise<Node> instead, so those got ignored.

I briefly tried converting the transformation logic to await those nested promises and struggled. So, I converted the Prettier logic to use @prettier/sync instead:

• Make postprocessing sync again phryneas/remark-typescript-tools#17

We've published that as [email protected], and that actually fixes the snippet problems here: