feat(build): switch to vite 3 and support clean urls

[brc-dd]

• fixes #219
• fixes #324
• fixes #412
• fixes #444
• fixes #476
• fixes #537
• fixes #715
• fixes #848
• fixes #849
• fixes #917
• fixes #1004
• fixes #1016
• fixes #1122
• fixes #1127

Huge thanks to @georges-gomes, @sapphi-red, @antfu, @patak-dev, @JounQin, @titouanmathis for helping and earlier PRs! And also to people @vitejs for building such awesome stuff!

(Do a squash-merge, the history is messed up here.)

[azat-io]

Awesome. Looking forward to the next alpha release. 👍

[meteorlxy]

It hard to review when mixing so many features in 😅

[brc-dd]

@meteorlxy Resolved those.

It hard to review when mixing so many features in 😅

Yeah sorry for that 😅. All except that clean urls feature were direct results of updating deps though.

[yyx990803]

I've tested this branch in the main Vue docs and aside the from /@theme alias removal, everything else seems to work fine.

LGTM after the Vue alias resolution is restored.

[yyx990803]

Since we are going to squash the commits, leaving a note about the fix in 3b2d90a:

Summary

1. Do not alias Vue during SSR build (since all deps are expected to be externalized with Vite 3)
2. Before SSR build, link vue to project root node_modules if doesn't exist so that it can be resolved from project files
3. Move renderToString import from vue/server-renderer into the bundled SSR app to avoid duplicated copies of Vue during SSR

---

Background: pnpm injects NODE_PATH when installing npm script binaries in order to simulate flat install structure when running npm scripts. This previously made files outside of VitePress, e.g. .md files in project root to be able to import VitePress' transitive deps (e.g. vue). However this breaks when upgrading to Vite 3 or when building in esm mode, because:

• "type": "module", aka ESM mode doesn't support NODE_PATH, so now project files can't resolve vue which is a transitive dep.

• Vite 3 now auto-resolves SSR externals, but it requires the dep to be resolvable first. Since it can't resovle vue, the Rollup build will fail.

The fix: detect if vue is resolvable from project root's node_modules. If not, create a symlink to the version of vue from VitePress' own deps.

This way we achieve the desired result:

• The default theme can work without user explicitly installing vue as a peer dep
• If the user installs vue in project root, always use the user's installed version in all cases.

Another point worth mentioning: the reason we have fails like "app data not properly injected" means there are two different copies of Vue being used during SSR. The most likely reason for this is the version of vue/server-renderer loaded in src/node/build/render.ts by VitePress isn't the same copy imported by the loaded SSR app.js. To avoid the problem I moved the logic of calling renderToString into the bundled SSR app itself, so VitePress simply calls a function exported by the app.

[Lexpeartha]

Not sure if it's related, but after updating to alpha 6, sidebar just disappeared, even tho I have aside set to true?

[brc-dd]

@Lexpeartha can you create an issue and tell us how to reproduce that? Also, aside is for the right-side outline, ads thing and it's true by default.

[Lexpeartha]

You can checkout my repo which had that right-side outline before bumping to the new alpha. I'm assuming something changed internally, since I changed nothing in the actual markdown?