chore: allow Vite 5

.changeset/chilled-parents-beam.md

@@ -0,0 +1,6 @@
+---
+'@sveltejs/vite-plugin-svelte-inspector': minor
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+feat: support Vite 5

.github/workflows/ci.yml

@@ -4,13 +4,9 @@ name: CI
 on:
   push:
     branches:
-      - main
-      - v1
       - v2
   pull_request:
     branches:
-      - main
-      - v1
       - v2
 env:
   # we call `pnpm playwright install` instead
@@ -78,16 +74,28 @@ jobs:
         node: [16]
         os: [ubuntu-latest, macos-latest, windows-latest]
         svelte: [4]
+        vite: [4]
         include:
           - node: 14
             os: ubuntu-latest
             svelte: 3
+            vite: 4
           - node: 18
             os: ubuntu-latest
             svelte: 4
+            vite: 4
           - node: 20
             os: ubuntu-latest
             svelte: 4
+            vite: 4
+          - node: 18
+            os: ubuntu-latest
+            svelte: 4
+            vite: 5
+          - node: 20
+            os: ubuntu-latest
+            svelte: 4
+            vite: 5
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
@@ -120,6 +128,9 @@ jobs:
       - name: install for node14 or svelte3
         if: matrix.node == 14 || matrix.svelte == 3
         run: pnpm install --no-frozen-lockfile --prefer-offline --ignore-scripts
+      - name: install vite 5
+        if: matrix.vite == 5
+        run: pnpm i -Dw vite@^5.0.3 && pnpm install --no-frozen-lockfile
       - name: install playwright chromium
         run: pnpm playwright install chromium
       - name: run tests

packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts

@@ -1,6 +1,6 @@
 import { browserLogs, fetchFromPage, getText, isBuild, testDir } from '~utils';
-import { createServer, ViteDevServer } from 'vite';
-import { VERSION } from 'svelte/compiler';
+import { createServer, version as viteVersion, ViteDevServer } from 'vite';
+import { VERSION as svelteVersion } from 'svelte/compiler';
 
 function normalizeSnapshot(result: string) {
 	// during dev, the import is rewritten but can vary on the v= hash. replace with stable short import
@@ -13,12 +13,13 @@ function normalizeSnapshot(result: string) {
 		.replace(/"total": *\d+\.\d+/g, '"total":0.123456789'); // svelte compile stats
 }
 
-const svelteMajor = VERSION.split('.', 1)[0];
+const vite5 = viteVersion.startsWith('5');
+const svelteMajor = svelteVersion.split('.', 1)[0];
 function snapshotFilename(name: string) {
 	return `./__snapshots__/svelte-${svelteMajor}/${name}.txt`;
 }
 
-describe('raw', () => {
+describe.skipIf(vite5)('raw', () => {
 	test('does not have failed requests', async () => {
 		browserLogs.forEach((msg) => {
 			expect(msg).not.toMatch('404');
@@ -90,7 +91,7 @@ describe('raw', () => {
 
 // vitest prints a warning about obsolete snapshots during build tests, ignore it, they are used in dev tests.
 // always regenerate snapshots with `pnpm test:serve import-queries -u` and check the diffs if they are correct
-describe.runIf(isBuild)('snapshots not obsolete warning', async () => {
+describe.skipIf(vite5).runIf(isBuild)('snapshots not obsolete warning', async () => {
 	afterAll(() => {
 		console.log(
 			'Ignore the obsolete snapshot warnings for ssrLoadModule snapshots from vitest during test:build, they are used in test:serve'
@@ -101,7 +102,7 @@ describe.runIf(isBuild)('snapshots not obsolete warning', async () => {
 	});
 });
 
-describe.runIf(!isBuild)('direct', () => {
+describe.skipIf(vite5).runIf(!isBuild)('direct', () => {
 	test('Dummy.svelte?direct&svelte&type=style&sourcemap&lang.css', async () => {
 		const response = await fetchFromPage(
 			'src/Dummy.svelte?direct&svelte&type=style&sourcemap&lang.css',
@@ -128,7 +129,7 @@ describe.runIf(!isBuild)('direct', () => {
 	});
 });
 
-describe.runIf(!isBuild)('ssrLoadModule', () => {
+describe.skipIf(vite5).runIf(!isBuild)('ssrLoadModule', () => {
 	let vite: ViteDevServer;
 	let ssrLoadDummy;
 	beforeAll(async () => {

packages/e2e-tests/kit-node/__tests__/kit.spec.ts

@@ -16,8 +16,11 @@ import {
 
 import glob from 'tiny-glob';
 import path from 'node:path';
+import { version as viteVersion } from 'vite';
 import { describe, expect, it } from 'vitest';
 
+const vite5 = viteVersion.startsWith('5');
+
 describe('kit-node', () => {
 	describe('index route', () => {
 		it('should hydrate', async () => {
@@ -336,7 +339,9 @@ describe('kit-node', () => {
 				);
 				expectArrayEqual(
 					config.resolve.mainFields,
-					['svelte', 'module', 'jsnext:main', 'jsnext'],
+					vite5
+						? ['svelte', 'browser', 'module', 'jsnext:main', 'jsnext']
+						: ['svelte', 'module', 'jsnext:main', 'jsnext'],
 					`resolve.mainFields in ${filename}`
 				);
 				expectArrayEqual(

packages/e2e-tests/vite-ssr-esm/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "node server",
     "build": "run-s build:client build:server",
-    "build:client": "vite build --ssrManifest --outDir dist/client",
+    "build:client": "vite build --ssrManifest .vite/ssr-manifest.json --outDir dist/client",
     "build:server": "vite build --ssr src/entry-server.js --outDir dist/server",
     "preview": "cross-env NODE_ENV=production node server",
     "debug": "node --inspect-brk server"

packages/e2e-tests/vite-ssr-esm/server.js

@@ -21,7 +21,7 @@ async function createServer(root = process.cwd(), isProd = process.env.NODE_ENV
 	const manifest = isProd
 		? // @ts-ignore
 
-		  JSON.parse(fs.readFileSync(resolve('dist/client/ssr-manifest.json'), 'utf-8'))
+		  JSON.parse(fs.readFileSync(resolve('dist/client/.vite/ssr-manifest.json'), 'utf-8'))
 		: {};
 
 	const app = express();

packages/e2e-tests/vite-ssr/__tests__/vite-ssr.spec.ts

@@ -1,3 +1,4 @@
+import { version as viteVersion } from 'vite';
 import {
 	editFileAndWaitForHmrComplete,
 	getColor,
@@ -11,45 +12,49 @@ import {
 	fetchPageText
 } from '~utils';
 
-test('/', async () => {
-	expect(await page.textContent('h1')).toMatch('Hello svelte world'); // after hydration
+const vite5 = viteVersion.startsWith('5');
 
-	const html = await fetchPageText();
-	expect(html).toMatch('Hello world'); // before hydration
-	if (isBuild) {
-		// TODO expect preload links
-	}
-});
+describe.skipIf(vite5)('vite-ssr', () => {
+	test('/', async () => {
+		expect(await page.textContent('h1')).toMatch('Hello svelte world'); // after hydration
 
-test('css', async () => {
-	if (isBuild) {
-		expect(await getColor('h1')).toBe('green');
-	} else {
-		// During dev, the CSS is loaded from async chunk and we may have to wait
-		// when the test runs concurrently.
-		await untilMatches(() => getColor('h1'), 'green', 'h1 has color green');
-	}
-});
+		const html = await fetchPageText();
+		expect(html).toMatch('Hello world'); // before hydration
+		if (isBuild) {
+			// TODO expect preload links
+		}
+	});
 
-test('loaded esm only package', async () => {
-	expect(await page.textContent('#esm')).toMatch('esm');
-	expect(browserLogs).toContain('esm');
-	expect(e2eServer.logs.server.out).toContain('esm');
-});
+	test('css', async () => {
+		if (isBuild) {
+			expect(await getColor('h1')).toBe('green');
+		} else {
+			// During dev, the CSS is loaded from async chunk and we may have to wait
+			// when the test runs concurrently.
+			await untilMatches(() => getColor('h1'), 'green', 'h1 has color green');
+		}
+	});
+
+	test('loaded esm only package', async () => {
+		expect(await page.textContent('#esm')).toMatch('esm');
+		expect(browserLogs).toContain('esm');
+		expect(e2eServer.logs.server.out).toContain('esm');
+	});
 
-test('asset', async () => {
-	// should have no 404s
-	browserLogs.forEach((msg) => {
-		expect(msg).not.toMatch('404');
+	test('asset', async () => {
+		// should have no 404s
+		browserLogs.forEach((msg) => {
+			expect(msg).not.toMatch('404');
+		});
+		const img = await page.$('img');
+		expect(await img.getAttribute('src')).toMatch(
+			isBuild ? /\/assets\/logo-\w{8}\.png/ : '/src/assets/logo.png'
+		);
 	});
-	const img = await page.$('img');
-	expect(await img.getAttribute('src')).toMatch(
-		isBuild ? /\/assets\/logo-\w{8}\.png/ : '/src/assets/logo.png'
-	);
 });
 
 if (!isBuild) {
-	describe('hmr', () => {
+	describe.skipIf(vite5)('hmr', () => {
 		const updateApp = editFileAndWaitForHmrComplete.bind(null, 'src/App.svelte');
 		test('should render additional html', async () => {
 			expect(await getEl('#hmr-test')).toBe(null);

packages/playground/big-component-library-vite-ssr/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "node server",
     "build": "npm run build:client && npm run build:server",
-    "build:client": "vite build --ssrManifest --outDir dist/client",
+    "build:client": "vite build --ssrManifest .vite/ssr-manifest.json --outDir dist/client",
     "build:server": "vite build --ssr src/entry-server.js --outDir dist/server",
     "preview": "cross-env NODE_ENV=production node server"
   },

packages/playground/big-component-library-vite-ssr/server.js

@@ -9,7 +9,7 @@ const base = process.env.BASE || '/';
 // Cached production assets
 const templateHtml = isProduction ? await fs.readFile('./dist/client/index.html', 'utf-8') : '';
 const ssrManifest = isProduction
-	? await fs.readFile('./dist/client/ssr-manifest.json', 'utf-8')
+	? await fs.readFile('./dist/client/.vite/ssr-manifest.json', 'utf-8')
 	: undefined;
 
 // Create http server

packages/vite-plugin-svelte-inspector/package.json

@@ -42,7 +42,7 @@
   "peerDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.2.0",
     "svelte": "^3.54.0 || ^4.0.0",
-    "vite": "^4.0.0"
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.8",

packages/vite-plugin-svelte/package.json

@@ -48,7 +48,7 @@
   },
   "peerDependencies": {
     "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0",
-    "vite": "^4.0.0"
+    "vite": "^4.0.0 || ^5.0.3"
   },
   "devDependencies": {
     "@types/debug": "^4.1.8",

packages/vite-plugin-svelte/src/utils/constants.js

@@ -1,6 +1,11 @@
 import { isSvelte3 } from './svelte-version.js';
+import { version as viteVersion } from 'vite';
 
-export const VITE_RESOLVE_MAIN_FIELDS = ['module', 'jsnext:main', 'jsnext'];
+const vite5 = viteVersion.startsWith('5');
+
+export const VITE_RESOLVE_MAIN_FIELDS = vite5
+	? ['browser', 'module', 'jsnext:main', 'jsnext']
+	: ['module', 'jsnext:main', 'jsnext'];
 
 export const SVELTE_RESOLVE_MAIN_FIELDS = ['svelte'];