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

[brc-dd]

• fixes Configurable 'clean url' in client router #219
• fixes dev works but build not (Cannot use import statement outside a module) #324
• fixes vitepress serve tries to load an md.undefined.js file  #412
• fixes add meta to markdown-it env #444
• fixes vitepress build fails with ERR_REQUIRE_ESM #476
• fixes Build not working with vite.config.ts and es-modules #537
• fixes Port 5000 is taken on MacOS Monterey #715
• fixes Switch to Vite3 #848
• fixes Unable to use VitePress with Yarn Berry (Zero Install) #849
• fixes Better support for type: "module" from user #917
• fixes vitepress v1.0.0-alpha.4 yarn docs:build fail #1004
• fixes crash on the first load of examples/minimal #1016
• fixes Can expose the frontmatter to the md object? #1122
• fixes Fix vitepress/client typings #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.)

---

In the meantime if someone wants to test this out without locally linking, you can do this (auto-publishes at 0 UTC):

pnpm add -D vitepress@npm:@brc-dd/vitepress@next

stale

[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?