Upgrade to Vite 4

.changeset/honest-sheep-cross.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] update svelte peerDependency to ^3.54.0

.changeset/old-singers-cough.md

@@ -0,0 +1,9 @@
+---
+'@sveltejs/adapter-cloudflare': patch
+'@sveltejs/adapter-cloudflare-workers': patch
+'@sveltejs/adapter-netlify': patch
+'@sveltejs/adapter-vercel': patch
+'@sveltejs/kit': patch
+---
+
+update esbuild to ^0.16.3

.changeset/perfect-news-pretend.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/adapter-node': patch
+---
+
+update rollup to ^3.7.0

.changeset/smooth-doors-fly.md

@@ -0,0 +1,6 @@
+---
+'@sveltejs/kit': patch
+'create-svelte': patch
+---
+
+Upgrade to Vite 4

package.json

@@ -5,6 +5,7 @@
 	"private": true,
 	"scripts": {
 		"test": "turbo run test --filter=./packages/*",
+		"test:vite-ecosystem-ci": "pnpm test --dir packages/kit",
 		"check": "turbo run check",
 		"lint": "turbo run lint",
 		"format": "turbo run format",
@@ -29,13 +30,13 @@
 		"@svitejs/changesets-changelog-github-compact": "^1.0.0",
 		"playwright": "^1.28.1",
 		"prettier": "^2.8.0",
-		"rollup": "^2.79.1",
-		"svelte": "^3.53.1",
+		"rollup": "^3.7.0",
+		"svelte": "^3.54.0",
 		"tiny-glob": "^0.2.9",
 		"turbo": "^1.6.3",
 		"typescript": "^4.9.3"
 	},
-	"packageManager": "pnpm@7.18.0",
+	"packageManager": "pnpm@7.18.1",
 	"engines": {
 		"pnpm": "^7.0.0"
 	},

packages/adapter-cloudflare-workers/package.json

@@ -31,7 +31,7 @@
 	"dependencies": {
 		"@cloudflare/workers-types": "^4.20221111.1",
 		"@iarna/toml": "^2.2.5",
-		"esbuild": "^0.15.12"
+		"esbuild": "^0.16.3"
 	},
 	"devDependencies": {
 		"@cloudflare/kv-asset-handler": "^0.2.0",

packages/adapter-cloudflare/package.json

@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@cloudflare/workers-types": "^4.20221111.1",
-		"esbuild": "^0.15.12",
+		"esbuild": "^0.16.3",
 		"worktop": "0.8.0-next.14"
 	},
 	"devDependencies": {

packages/adapter-netlify/package.json

@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@iarna/toml": "^2.2.5",
-		"esbuild": "^0.15.12",
+		"esbuild": "^0.16.3",
 		"set-cookie-parser": "^2.5.1"
 	},
 	"devDependencies": {
@@ -45,7 +45,7 @@
 		"@types/node": "^16.18.6",
 		"@types/set-cookie-parser": "^2.4.2",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.79.1",
+		"rollup": "^3.7.0",
 		"typescript": "^4.9.3",
 		"uvu": "^0.5.6"
 	}

packages/adapter-node/package.json

@@ -45,6 +45,6 @@
 		"@rollup/plugin-commonjs": "^23.0.2",
 		"@rollup/plugin-json": "^5.0.1",
 		"@rollup/plugin-node-resolve": "^15.0.1",
-		"rollup": "^2.79.1"
+		"rollup": "^3.7.0"
 	}
 }

packages/adapter-static/package.json

@@ -28,9 +28,9 @@
 		"@sveltejs/kit": "workspace:*",
 		"@types/node": "^16.18.6",
 		"sirv": "^2.0.2",
-		"svelte": "^3.53.1",
+		"svelte": "^3.54.0",
 		"typescript": "^4.9.3",
 		"uvu": "^0.5.6",
-		"vite": "^3.2.4"
+		"vite": "^4.0.0"
 	}
 }

packages/adapter-static/test/apps/prerendered/package.json

@@ -9,8 +9,8 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:*",
-		"svelte": "^3.53.1",
-		"vite": "^3.2.4"
+		"svelte": "^3.54.0",
+		"vite": "^4.0.0"
 	},
 	"type": "module"
 }

packages/adapter-static/test/apps/spa/package.json

@@ -11,8 +11,8 @@
 		"@sveltejs/adapter-node": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
 		"sirv-cli": "^2.0.2",
-		"svelte": "^3.53.1",
-		"vite": "^3.2.4"
+		"svelte": "^3.54.0",
+		"vite": "^4.0.0"
 	},
 	"type": "module"
 }

packages/adapter-vercel/package.json

@@ -29,7 +29,7 @@
 	},
 	"dependencies": {
 		"@vercel/nft": "^0.22.1",
-		"esbuild": "^0.15.12"
+		"esbuild": "^0.16.3"
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:*",

packages/create-svelte/package.json

@@ -24,7 +24,7 @@
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
 		"sucrase": "^3.29.0",
-		"svelte": "^3.53.1",
+		"svelte": "^3.54.0",
 		"svelte-preprocess": "^4.10.7",
 		"tiny-glob": "^0.2.9",
 		"uvu": "^0.5.6"

packages/create-svelte/templates/default/package.json

@@ -11,10 +11,10 @@
 		"@neoconfetti/svelte": "^1.0.0",
 		"@sveltejs/adapter-auto": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
-		"svelte": "^3.53.1",
+		"svelte": "^3.54.0",
 		"svelte-preprocess": "^4.10.7",
 		"typescript": "^4.9.3",
-		"vite": "^3.2.4"
+		"vite": "^4.0.0"
 	},
 	"type": "module",
 	"dependencies": {

packages/create-svelte/templates/default/package.template.json

@@ -11,8 +11,8 @@
 		"@neoconfetti/svelte": "^1.0.0",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
-		"svelte": "^3.53.1",
-		"vite": "^3.2.4"
+		"svelte": "^3.54.0",
+		"vite": "^4.0.0"
 	},
 	"type": "module"
 }

packages/create-svelte/templates/skeleton/package.template.json

@@ -10,8 +10,8 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
-		"svelte": "^3.53.1",
-		"vite": "^3.2.4"
+		"svelte": "^3.54.0",
+		"vite": "^4.0.0"
 	},
 	"type": "module"
 }

packages/create-svelte/templates/skeletonlib/package.template.json

@@ -10,10 +10,10 @@
 		"@sveltejs/adapter-auto": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
 		"@sveltejs/package": "workspace:*",
-		"svelte": "^3.53.1",
+		"svelte": "^3.54.0",
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.3",
-		"vite": "^3.2.4"
+		"vite": "^4.0.0"
 	},
 	"type": "module"
 }

packages/kit/package.json

@@ -10,7 +10,7 @@
 	"homepage": "https://kit.svelte.dev",
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/vite-plugin-svelte": "^1.3.1",
+		"@sveltejs/vite-plugin-svelte": "^2.0.0",
 		"@types/cookie": "^0.5.1",
 		"cookie": "^0.5.0",
 		"devalue": "^4.2.0",
@@ -32,16 +32,16 @@
 		"@types/sade": "^1.7.4",
 		"@types/set-cookie-parser": "^2.4.2",
 		"marked": "^4.2.3",
-		"rollup": "^2.79.1",
-		"svelte": "^3.53.1",
+		"rollup": "^3.7.0",
+		"svelte": "^3.54.0",
 		"svelte-preprocess": "^4.10.7",
 		"typescript": "^4.9.3",
 		"uvu": "^0.5.6",
-		"vite": "^3.2.4"
+		"vite": "^4.0.0"
 	},
 	"peerDependencies": {
-		"svelte": "^3.44.0",
-		"vite": "^3.2.0"
+		"svelte": "^3.54.0",
+		"vite": "^4.0.0"
 	},
 	"bin": {
 		"svelte-kit": "svelte-kit.js"

packages/kit/src/exports/vite/dev/index.js

@@ -1,8 +1,8 @@
 import fs from 'fs';
 import colors from 'kleur';
 import path from 'path';
-import sirv from 'sirv';
 import { URL } from 'url';
+import { isCSSRequest } from 'vite';
 import { getRequest, setResponse } from '../../../exports/node/index.js';
 import { installPolyfills } from '../../../exports/node/polyfills.js';
 import { coalesce_to_error } from '../../../utils/error.js';
@@ -13,10 +13,6 @@ import * as sync from '../../../core/sync/sync.js';
 import { get_mime_lookup, runtime_base, runtime_prefix } from '../../../core/utils.js';
 import { compact } from '../../../utils/array.js';
 
-// Vite doesn't expose this so we just copy the list for now
-// https://github.com/vitejs/vite/blob/3edd1af56e980aef56641a5a51cf2932bb580d41/packages/vite/src/node/plugins/css.ts#L96
-const style_pattern = /\.(css|less|sass|scss|styl|stylus|pcss|postcss)$/;
-
 const cwd = process.cwd();
 
 /**
@@ -127,7 +123,7 @@ export async function dev(vite, vite_config, svelte_config) {
 								const query = parsed.searchParams;
 
 								if (
-									style_pattern.test(dep.file) ||
+									isCSSRequest(dep.file) ||
 									(query.has('svelte') && query.get('type') === 'style')
 								) {
 									try {
@@ -248,44 +244,6 @@ export async function dev(vite, vite_config, svelte_config) {
 	}
 
 	const assets = svelte_config.kit.paths.assets ? SVELTE_KIT_ASSETS : svelte_config.kit.paths.base;
-	const asset_server = sirv(svelte_config.kit.files.assets, {
-		dev: true,
-		etag: true,
-		maxAge: 0,
-		extensions: [],
-		setHeaders: (res) => {
-			res.setHeader('access-control-allow-origin', '*');
-		}
-	});
-
-	vite.middlewares.use(async (req, res, next) => {
-		try {
-			const base = `${vite.config.server.https ? 'https' : 'http'}://${
-				req.headers[':authority'] || req.headers.host
-			}`;
-
-			const decoded = decodeURI(new URL(base + req.url).pathname);
-
-			if (decoded.startsWith(assets)) {
-				const pathname = decoded.slice(assets.length);
-				const file = svelte_config.kit.files.assets + pathname;
-
-				if (fs.existsSync(file) && !fs.statSync(file).isDirectory()) {
-					if (has_correct_case(file, svelte_config.kit.files.assets)) {
-						req.url = encodeURI(pathname); // don't need query/hash
-						asset_server(req, res);
-						return;
-					}
-				}
-			}
-
-			next();
-		} catch (e) {
-			const error = coalesce_to_error(e);
-			res.statusCode = 500;
-			res.end(fix_stack_trace(error));
-		}
-	});
 
 	// set `import { version } from '$app/environment'`
 	(await vite.ssrLoadModule(`${runtime_prefix}/env.js`)).set_version(
@@ -321,13 +279,6 @@ export async function dev(vite, vite_config, svelte_config) {
 					return;
 				}
 
-				if (!decoded.startsWith(svelte_config.kit.paths.base)) {
-					return not_found(
-						res,
-						`Not found (did you mean ${svelte_config.kit.paths.base + req.url}?)`
-					);
-				}
-
 				if (decoded === svelte_config.kit.paths.base + '/service-worker.js') {
 					const resolved = resolve_entry(svelte_config.kit.files.serviceWorker);
 
@@ -525,21 +476,11 @@ export async function dev(vite, vite_config, svelte_config) {
 	};
 }
 
-/** @param {import('http').ServerResponse} res */
-function not_found(res, message = 'Not found') {
-	res.statusCode = 404;
-	res.end(message);
-}
-
 /**
  * @param {import('connect').Server} server
  */
 function remove_static_middlewares(server) {
-	// We don't use viteServePublicMiddleware because of the following issues:
-	// https://github.com/vitejs/vite/issues/9260
-	// https://github.com/vitejs/vite/issues/9236
-	// https://github.com/vitejs/vite/issues/9234
-	const static_middlewares = ['viteServePublicMiddleware', 'viteServeStaticMiddleware'];
+	const static_middlewares = ['viteServeStaticMiddleware'];
 	for (let i = server.stack.length - 1; i > 0; i--) {
 		// @ts-expect-error using internals
 		if (static_middlewares.includes(server.stack[i].handle.name)) {
@@ -590,24 +531,3 @@ async function find_deps(vite, node, deps) {
 
 	await Promise.all(branches);
 }
-
-/**
- * Determine if a file is being requested with the correct case,
- * to ensure consistent behaviour between dev and prod and across
- * operating systems. Note that we can't use realpath here,
- * because we don't want to follow symlinks
- * @param {string} file
- * @param {string} assets
- * @returns {boolean}
- */
-function has_correct_case(file, assets) {
-	if (file === assets) return true;
-
-	const parent = path.dirname(file);
-
-	if (fs.readdirSync(parent).includes(path.basename(file))) {
-		return has_correct_case(parent, assets);
-	}
-
-	return false;
-}

packages/kit/src/exports/vite/index.js

@@ -237,7 +237,7 @@ function kit() {
 			/** @type {import('vite').UserConfig} */
 			const result = {
 				appType: 'custom',
-				base: './',
+				base: svelte_config.kit.paths.base,
 				build: {
 					rollupOptions: {
 						// Vite dependency crawler needs an explicit JS entry point
@@ -561,7 +561,7 @@ function kit() {
 
 function check_vite_version() {
 	// TODO parse from kit peer deps and maybe do a full semver compare if we ever require feature releases a min
-	const min_required_vite_major = 3;
+	const min_required_vite_major = 4;
 	const vite_version = vite.version ?? '2.x'; // vite started exporting it's version in 3.0
 	const current_vite_major = parseInt(vite_version.split('.')[0], 10);
 

packages/kit/src/exports/vite/preview/index.js

@@ -73,7 +73,11 @@ export async function preview(vite, vite_config, svelte_config) {
 				next();
 			} else {
 				res.statusCode = 404;
-				res.end(`Not found (did you mean ${base + pathname}?)`);
+				res.end(
+					`The server is configured with a public base URL of ${base} - did you mean to visit <a href="${
+						base + pathname
+					}">${base + pathname}</a> instead?`
+				);
 			}
 		});