Support Vite 5 (#9122)

.changeset/light-ties-poke.md

@@ -0,0 +1,8 @@
+---
+'@astrojs/svelte': major
+'@astrojs/react': patch
+'@astrojs/vue': patch
+'astro': major
+---
+
+Adds Vite 5 support. There are no breaking changes from Astro. Check the [Vite migration guide](https://vitejs.dev/guide/migration.html) for details of the breaking changes from Vite instead.

.changeset/wild-apricots-rescue.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/svelte': major
+---
+
+Drops support for Svelte 3 as `@sveltejs/vite-plugin-svelte` is updated to `3.0.0` which does not support Svelte 3

packages/astro/package.json

@@ -175,7 +175,7 @@
     "tsconfck": "^3.0.0",
     "unist-util-visit": "^4.1.2",
     "vfile": "^5.3.7",
-    "vite": "^4.4.9",
+    "vite": "^5.0.0",
     "vitefu": "^0.2.4",
     "which-pm": "^2.1.1",
     "yargs-parser": "^21.1.1",
@@ -222,7 +222,7 @@
     "rehype-slug": "^5.0.1",
     "rehype-toc": "^3.0.2",
     "remark-code-titles": "^0.1.2",
-    "rollup": "^3.28.1",
+    "rollup": "^4.4.1",
     "sass": "^1.66.1",
     "srcset-parse": "^1.1.0",
     "unified": "^10.1.2"

packages/astro/src/core/preview/static-preview-server.ts

@@ -72,8 +72,6 @@ export default async function createStaticPreviewServer(
 		host: getResolvedHostForHttpServer(settings.config.server.host),
 		port: settings.config.server.port,
 		closed,
-		// In Vite 5, `httpServer` may be a `Http2SecureServer`, but we know we are only starting a HTTP server
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
 		server: previewServer.httpServer as http.Server,
 		stop: async () => {
 			await new Promise((resolve, reject) => {

packages/astro/src/core/preview/vite-plugin-astro-preview.ts

@@ -1,13 +1,13 @@
 import fs from 'node:fs';
+import type { IncomingMessage, ServerResponse } from 'node:http';
 import { fileURLToPath } from 'node:url';
 import type { Connect, Plugin } from 'vite';
-import { version } from 'vite';
 import type { AstroSettings } from '../../@types/astro.js';
 import { notFoundTemplate, subpathNotUsedTemplate } from '../../template/4xx.js';
+import { cleanUrl } from '../../vite-plugin-utils/index.js';
 import { stripBase } from './util.js';
 
 const HAS_FILE_EXTENSION_REGEXP = /^.*\.[^\\]+$/;
-const IS_VITE_5 = version.startsWith('5.');
 
 export function vitePluginAstroPreview(settings: AstroSettings): Plugin {
 	const { base, outDir, trailingSlash } = settings.config;
@@ -24,8 +24,7 @@ export function vitePluginAstroPreview(settings: AstroSettings): Plugin {
 					return;
 				}
 
-				const strippedPathname = stripBase(req.url!, base);
-				const pathname = new URL(strippedPathname, 'https://a.b').pathname;
+				const pathname = cleanUrl(stripBase(req.url!, base));
 				const isRoot = pathname === '/';
 
 				// Validate trailingSlash
@@ -53,29 +52,49 @@ export function vitePluginAstroPreview(settings: AstroSettings): Plugin {
 			});
 
 			return () => {
-				const fourOhFourMiddleware: Connect.NextHandleFunction = (req, res) => {
-					const errorPagePath = fileURLToPath(outDir + '/404.html');
-					if (fs.existsSync(errorPagePath)) {
-						res.statusCode = 404;
-						res.setHeader('Content-Type', 'text/html;charset=utf-8');
-						res.end(fs.readFileSync(errorPagePath));
-					} else {
-						const pathname = stripBase(req.url!, base);
-						res.statusCode = 404;
-						res.end(notFoundTemplate(pathname, 'Not Found'));
-					}
-				};
+				// NOTE: the `base` is stripped from `req.url` for post middlewares
 
-				// Vite 5 has its own 404 middleware, we replace it with ours instead.
-				if (IS_VITE_5) {
-					for (const middleware of server.middlewares.stack) {
-						// This hardcoded name will not break between Vite versions
-						if ((middleware.handle as Connect.HandleFunction).name === 'vite404Middleware') {
-							middleware.handle = fourOhFourMiddleware;
+				server.middlewares.use((req, res, next) => {
+					const pathname = cleanUrl(req.url!);
+
+					// Vite doesn't handle /foo/ if /foo.html exists, we handle it anyways
+					if (pathname.endsWith('/')) {
+						const pathnameWithoutSlash = pathname.slice(0, -1);
+						const htmlPath = fileURLToPath(outDir + pathnameWithoutSlash + '.html');
+						if (fs.existsSync(htmlPath)) {
+							req.url = pathnameWithoutSlash + '.html';
+							return next();
 						}
 					}
-				} else {
-					server.middlewares.use(fourOhFourMiddleware);
+					// Vite doesn't handle /foo if /foo/index.html exists, we handle it anyways
+					else {
+						const htmlPath = fileURLToPath(outDir + pathname + '/index.html');
+						if (fs.existsSync(htmlPath)) {
+							req.url = pathname + '/index.html';
+							return next();
+						}
+					}
+
+					next();
+				});
+
+				// Vite has its own 404 middleware, we replace it with ours instead.
+				for (const middleware of server.middlewares.stack) {
+					// This hardcoded name will not break between Vite versions
+					if ((middleware.handle as Connect.HandleFunction).name === 'vite404Middleware') {
+						// Fallback to 404 page if it exists
+						middleware.handle = (req: IncomingMessage, res: ServerResponse) => {
+							const errorPagePath = fileURLToPath(outDir + '/404.html');
+							if (fs.existsSync(errorPagePath)) {
+								res.statusCode = 404;
+								res.setHeader('Content-Type', 'text/html;charset=utf-8');
+								res.end(fs.readFileSync(errorPagePath));
+							} else {
+								res.statusCode = 404;
+								res.end(notFoundTemplate(req.url!, 'Not Found'));
+							}
+						};
+					}
 				}
 			};
 		},

packages/astro/src/vite-plugin-load-fallback/index.ts

@@ -2,6 +2,7 @@ import nodeFs from 'node:fs';
 import npath from 'node:path';
 import type * as vite from 'vite';
 import { slash } from '../core/path.js';
+import { cleanUrl } from '../vite-plugin-utils/index.js';
 
 type NodeFileSystemModule = typeof nodeFs;
 
@@ -77,8 +78,3 @@ export default function loadFallbackPlugin({
 		},
 	];
 }
-
-const queryRE = /\?.*$/s;
-const hashRE = /#.*$/s;
-
-const cleanUrl = (url: string): string => url.replace(hashRE, '').replace(queryRE, '');

packages/astro/src/vite-plugin-scripts/index.ts

@@ -50,8 +50,7 @@ export default function astroScriptsPlugin({ settings }: { settings: AstroSettin
 		},
 		buildStart() {
 			const hasHydrationScripts = settings.scripts.some((s) => s.stage === 'before-hydration');
-			// @ts-expect-error Vite 5 renamed `ssrBuild` to `isSsrBuild`
-			const isSsrBuild = env?.ssrBuild || env?.isSsrBuild;
+			const isSsrBuild = env?.isSsrBuild;
 			if (hasHydrationScripts && env?.command === 'build' && !isSsrBuild) {
 				this.emitFile({
 					type: 'chunk',

packages/astro/src/vite-plugin-utils/index.ts

@@ -56,3 +56,8 @@ export function normalizeFilename(filename: string, root: URL) {
 	}
 	return removeLeadingForwardSlashWindows(filename);
 }
+
+const postfixRE = /[?#].*$/s;
+export function cleanUrl(url: string): string {
+	return url.replace(postfixRE, '');
+}

packages/astro/test/fixtures/integration-add-page-extension/astro.config.mjs

@@ -1,4 +1,4 @@
-import { defineConfig } from 'rollup'
+import { defineConfig } from 'astro/config'
 import test from './integration.js'
 
 export default defineConfig({

packages/astro/test/fixtures/integration-server-setup/astro.config.mjs

@@ -1,4 +1,4 @@
-import { defineConfig } from 'rollup'
+import { defineConfig } from 'astro/config'
 import test from './integration.js'
 
 export default defineConfig({

packages/astro/test/preview-routing.test.js

@@ -1,12 +1,7 @@
 import { expect } from 'chai';
-import { version } from 'vite';
 import { loadFixture } from './test-utils.js';
 
-const IS_VITE_5 = version.startsWith('5.');
-
-// Skip in Vite 5 as it changes how HTML files are served. We may want to review aligning
-// trailingSlash and build.format to avoid potential footguns in Astro 4
-(IS_VITE_5 ? describe.skip : describe)('Preview Routing', function () {
+describe('Preview Routing', function () {
 	describe('build format: directory', () => {
 		describe('Subpath without trailing slash and trailingSlash: never', () => {
 			/** @type {import('./test-utils').Fixture} */

packages/integrations/markdoc/package.json

@@ -89,8 +89,7 @@
     "devalue": "^4.3.2",
     "linkedom": "^0.15.1",
     "mocha": "^10.2.0",
-    "rollup": "^3.28.1",
-    "vite": "^4.4.9"
+    "vite": "^5.0.0"
   },
   "engines": {
     "node": ">=18.14.1"

packages/integrations/markdoc/src/content-entry-type.ts

@@ -6,8 +6,7 @@ import matter from 'gray-matter';
 import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import type * as rollup from 'rollup';
-import type { ErrorPayload as ViteErrorPayload } from 'vite';
+import type { ErrorPayload as ViteErrorPayload, Rollup } from 'vite';
 import type { ComponentConfig } from './config.js';
 import { htmlTokenTransform } from './html/transform/html-token-transform.js';
 import type { MarkdocConfigResult } from './load-config.js';
@@ -174,7 +173,7 @@ function getEntryInfo({ fileUrl, contents }: { fileUrl: URL; contents: string })
 async function emitOptimizedImages(
 	nodeChildren: Node[],
 	ctx: {
-		pluginContext: rollup.PluginContext;
+		pluginContext: Rollup.PluginContext;
 		filePath: string;
 		astroConfig: AstroConfig;
 	}

packages/integrations/mdx/package.json

@@ -75,7 +75,7 @@
     "remark-shiki-twoslash": "^3.1.3",
     "remark-toc": "^8.0.1",
     "unified": "^10.1.2",
-    "vite": "^4.4.9"
+    "vite": "^5.0.0"
   },
   "engines": {
     "node": ">=18.14.1"

packages/integrations/react/package.json

@@ -45,7 +45,7 @@
     "dev": "astro-scripts dev \"src/**/*.ts\""
   },
   "dependencies": {
-    "@vitejs/plugin-react": "^4.0.4",
+    "@vitejs/plugin-react": "^4.2.0",
     "ultrahtml": "^1.3.0"
   },
   "devDependencies": {
@@ -57,7 +57,7 @@
     "cheerio": "1.0.0-rc.12",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "vite": "^4.4.9"
+    "vite": "^5.0.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.50 || ^18.0.21",

packages/integrations/svelte/package.json

@@ -42,18 +42,18 @@
     "dev": "astro-scripts dev \"src/**/*.ts\""
   },
   "dependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.5.2",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "svelte2tsx": "^0.6.20"
   },
   "devDependencies": {
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
     "svelte": "^4.2.0",
-    "vite": "^4.4.9"
+    "vite": "^5.0.0"
   },
   "peerDependencies": {
     "astro": "^3.0.0",
-    "svelte": "^3.55.0 || ^4.0.0 || ^5.0.0-next.1"
+    "svelte": "^4.0.0 || ^5.0.0-next.1"
   },
   "engines": {
     "node": ">=18.14.1"

packages/integrations/svelte/src/index.ts

@@ -73,6 +73,7 @@ async function getViteConfiguration({
 	}
 
 	if (!resolvedOptions.preprocess && !(await svelteConfigHasPreprocess(root))) {
+		// @ts-expect-error there's a bug with the types where the first arg should be optional
 		resolvedOptions.preprocess = vitePreprocess();
 	}
 

packages/integrations/tailwind/package.json

@@ -40,7 +40,7 @@
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
     "tailwindcss": "^3.3.3",
-    "vite": "^4.4.9"
+    "vite": "^5.0.0"
   },
   "peerDependencies": {
     "astro": "^3.0.0",

packages/integrations/vue/package.json

@@ -40,8 +40,8 @@
     "test": "mocha --timeout 20000"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "^4.3.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vitejs/plugin-vue": "^4.5.0",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/babel-plugin-jsx": "^1.1.5",
     "@vue/compiler-sfc": "^3.3.4"
   },
@@ -50,10 +50,10 @@
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
     "chai": "^4.3.7",
-    "linkedom": "^0.15.1",
     "cheerio": "1.0.0-rc.12",
+    "linkedom": "^0.15.1",
     "mocha": "^10.2.0",
-    "vite": "^4.4.9",
+    "vite": "^5.0.0",
     "vue": "^3.3.4"
   },
   "peerDependencies": {