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
+---
+
+[breaking] 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

@@ -3,6 +3,7 @@ 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';
@@ -12,10 +13,7 @@ import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 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)$/;
+import { not_found } from '../utils.js';
 
 const cwd = process.cwd();
 
@@ -127,7 +125,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 {
@@ -322,10 +320,7 @@ export async function dev(vite, vite_config, svelte_config) {
 				}
 
 				if (!decoded.startsWith(svelte_config.kit.paths.base)) {
-					return not_found(
-						res,
-						`Not found (did you mean ${svelte_config.kit.paths.base + req.url}?)`
-					);
+					return not_found(req, res, svelte_config.kit.paths.base);
 				}
 
 				if (decoded === svelte_config.kit.paths.base + '/service-worker.js') {
@@ -525,21 +520,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)) {

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

@@ -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

@@ -6,6 +6,7 @@ import { getRequest, setResponse } from '../../../exports/node/index.js';
 import { installPolyfills } from '../../../exports/node/polyfills.js';
 import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 import { loadEnv, normalizePath } from 'vite';
+import { not_found } from '../utils.js';
 
 /** @typedef {import('http').IncomingMessage} Req */
 /** @typedef {import('http').ServerResponse} Res */
@@ -73,7 +74,7 @@ export async function preview(vite, vite_config, svelte_config) {
 				next();
 			} else {
 				res.statusCode = 404;
-				res.end(`Not found (did you mean ${base + pathname}?)`);
+				not_found(req, res, base);
 			}
 		});
 

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

@@ -2,6 +2,7 @@ import path from 'path';
 import { loadConfigFromFile, loadEnv, mergeConfig } from 'vite';
 import { runtime_directory } from '../../core/utils.js';
 import { posixify } from '../../utils/filesystem.js';
+import { negotiate } from '../../utils/http.js';
 
 /**
  * @param {import('vite').ResolvedConfig} config
@@ -149,3 +150,31 @@ export function get_env(env_config, mode) {
 		private: Object.fromEntries(entries.filter(([k]) => !k.startsWith(env_config.publicPrefix)))
 	};
 }
+
+/**
+ * @param {import('http').IncomingMessage} req
+ * @param {import('http').ServerResponse} res
+ * @param {string} base
+ */
+export function not_found(req, res, base) {
+	const type = negotiate(req.headers.accept ?? '*', ['text/plain', 'text/html']);
+
+	// special case — handle `/` request automatically
+	if (req.url === '/' && type === 'text/html') {
+		res.statusCode = 307;
+		res.setHeader('location', base);
+		res.end();
+		return;
+	}
+
+	res.statusCode = 404;
+
+	const prefixed = base + req.url;
+
+	if (type === 'text/html') {
+		res.setHeader('Content-Type', 'text/html');
+		res.end(`Not found (did you mean <a href="${prefixed}">${prefixed}</a>?)`);
+	} else {
+		res.end(`Not found (did you mean ${prefixed}?)`);
+	}
+}

packages/kit/test/apps/amp/package.json

@@ -16,10 +16,10 @@
 		"@sveltejs/kit": "workspace:*",
 		"cross-env": "^7.0.3",
 		"purify-css": "^1.2.5",
-		"svelte": "^3.53.1",
+		"svelte": "^3.54.0",
 		"svelte-check": "^2.9.2",
 		"typescript": "^4.9.3",
-		"vite": "^3.2.4"
+		"vite": "^4.0.0"
 	},
 	"type": "module"
 }

packages/kit/test/apps/basics/package.json

@@ -15,10 +15,10 @@
 		"@sveltejs/kit": "workspace:*",
 		"cross-env": "^7.0.3",
 		"rimraf": "^3.0.2",
-		"svelte": "^3.53.1",
+		"svelte": "^3.54.0",
 		"svelte-check": "^2.9.2",
 		"typescript": "^4.9.3",
-		"vite": "^3.2.4"
+		"vite": "^4.0.0"
 	},
 	"type": "module"
 }

packages/kit/test/apps/dev-only/package.json

@@ -13,10 +13,10 @@
 		"@sveltejs/kit": "workspace:*",
 		"cross-env": "^7.0.3",
 		"rimraf": "^3.0.2",
-		"svelte": "^3.53.1",
+		"svelte": "^3.54.0",
 		"svelte-check": "^2.9.2",
 		"typescript": "^4.9.3",
-		"vite": "^3.2.4"
+		"vite": "^4.0.0"
 	},
 	"type": "module"
 }