Upgrade to Vite 3 (#5005)

* Upgrade to Vite 3

* this... seems to work?

* try this

* remove some more unneeded fixStacktrace options

* upgrade to 3.0.0-beta.9

* update default port

* 3.0.0 final

* 3.0.0 final for site

* vite-plugin-svelte 1.0.1

* bump rollup

* update enforced_config

* add EnforcedConfig type

* wow i did a terrible job of implementing this before

* leave windows paths as-is

* Revert "leave windows paths as-is"

This reverts commit 06de105.

* try this

* actually if anything i guess it should be this

* ugh

* fix firefox test

* add some logging that might help diagnose windows failure

* i think this might work

* more logging

* maybe this

* try to simplify logging so that stuff is slightly easier to diagnose

* argh

* Revert "argh"

This reverts commit 9e2d017.

* Revert "try to simplify logging so that stuff is slightly easier to diagnose"

This reverts commit 2a975ec.

* [docs] add JSDocs for Vite build process

* format

* loop over values instead with `Object.values`

* missed a closing bracket

* fix: ensure isolated testing of create-svelte with local packages (#5524)

* fix: move create-svelte test working dir out of pnpm workspae

* fix: copy-paste error, adapter-auto override

* fix: readd check command

* fix: ensure that create-svelte tests generate test apps outside our main pnpm workspace

* fix format

* fix: readd --no-frozen-lockfile to override pnpm default when CI is true

* remove logging

* enforce vite 3

Co-authored-by: Rich Harris <[email protected]>
Co-authored-by: Ignatius Bagus <[email protected]>
Co-authored-by: Dominik G <[email protected]>

.gitignore

@@ -15,3 +15,4 @@ yarn.lock
 .netlify
 .turbo
 .vercel
+.test-tmp

package.json

@@ -5,7 +5,7 @@
 	"private": true,
 	"scripts": {
 		"build": "turbo run build --filter=./packages/*",
-		"test": "turbo run test --filter=./packages/*",
+		"test": "turbo run test --filter=./packages/* --force",
 		"check": "turbo run check",
 		"lint": "turbo run lint",
 		"format": "turbo run format",
@@ -37,7 +37,7 @@
 		"eslint-plugin-svelte3": "^4.0.0",
 		"playwright": "^1.23.3",
 		"prettier": "^2.6.2",
-		"rollup": "^2.75.3",
+		"rollup": "^2.75.7",
 		"svelte": "^3.48.0",
 		"tiny-glob": "^0.2.9",
 		"turbo": "^1.3.1",

packages/adapter-cloudflare-workers/package.json

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

packages/adapter-cloudflare/package.json

@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@cloudflare/workers-types": "^3.14.0",
-		"esbuild": "^0.14.42",
+		"esbuild": "^0.14.48",
 		"worktop": "0.8.0-next.14"
 	},
 	"devDependencies": {

packages/adapter-netlify/package.json

@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@iarna/toml": "^2.2.5",
-		"esbuild": "^0.14.42",
+		"esbuild": "^0.14.48",
 		"set-cookie-parser": "^2.4.8",
 		"tiny-glob": "^0.2.9"
 	},
@@ -47,7 +47,7 @@
 		"@types/node": "^16.11.36",
 		"@types/set-cookie-parser": "^2.4.2",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.75.3",
+		"rollup": "^2.75.7",
 		"typescript": "^4.7.4",
 		"uvu": "^0.5.3"
 	}

packages/adapter-node/package.json

@@ -45,7 +45,7 @@
 		"node-fetch": "^3.2.4",
 		"polka": "^1.0.0-next.22",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.75.3",
+		"rollup": "^2.75.7",
 		"sirv": "^2.0.2",
 		"typescript": "^4.7.4",
 		"uvu": "^0.5.3"

packages/adapter-static/package.json

@@ -36,6 +36,6 @@
 		"svelte": "^3.48.0",
 		"typescript": "^4.7.4",
 		"uvu": "^0.5.3",
-		"vite": "^2.9.13"
+		"vite": "^3.0.0"
 	}
 }

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

@@ -10,7 +10,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:*",
 		"svelte": "^3.48.0",
-		"vite": "^2.9.13"
+		"vite": "^3.0.0"
 	},
 	"type": "module"
 }

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

@@ -12,7 +12,7 @@
 		"@sveltejs/kit": "workspace:*",
 		"sirv-cli": "^2.0.2",
 		"svelte": "^3.48.0",
-		"vite": "^2.9.13"
+		"vite": "^3.0.0"
 	},
 	"type": "module"
 }

packages/adapter-vercel/package.json

@@ -30,7 +30,7 @@
 	},
 	"dependencies": {
 		"@vercel/nft": "^0.20.0",
-		"esbuild": "^0.14.42"
+		"esbuild": "^0.14.48"
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:*",

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

@@ -14,7 +14,7 @@
 		"svelte": "^3.48.0",
 		"svelte-preprocess": "^4.10.6",
 		"typescript": "^4.7.4",
-		"vite": "^2.9.13"
+		"vite": "^3.0.0"
 	},
 	"type": "module",
 	"dependencies": {

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

@@ -12,7 +12,7 @@
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
 		"svelte": "^3.46.0",
-		"vite": "^2.9.13"
+		"vite": "^3.0.0"
 	},
 	"type": "module",
 	"dependencies": {

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

@@ -12,7 +12,7 @@
 		"@sveltejs/adapter-auto": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
 		"svelte": "^3.44.0",
-		"vite": "^2.9.13"
+		"vite": "^3.0.0"
 	},
 	"type": "module"
 }

packages/create-svelte/test/check.js

@@ -1,30 +1,81 @@
 import fs from 'fs';
 import { execSync } from 'child_process';
+import path from 'path';
 import { test } from 'uvu';
 import { create } from '../index.js';
+import { fileURLToPath } from 'url';
+// use a directory outside of packages to ensure it isn't added to the pnpm workspace
+const test_workspace_dir = fileURLToPath(
+	new URL('../../../.test-tmp/create-svelte/', import.meta.url)
+);
+const overrides = {};
+['kit', 'adapter-auto', 'adapter-cloudflare', 'adapter-netlify', 'adapter-vercel'].forEach(
+	(pkg) => {
+		overrides[`@sveltejs/${pkg}`] = `${path.resolve(
+			test_workspace_dir,
+			'..',
+			'..',
+			'packages',
+			pkg
+		)}`; //'workspace:*';
+	}
+);
+test.before(() => {
+	try {
+		// prepare test pnpm workspace
+		fs.rmSync(test_workspace_dir, { recursive: true, force: true });
+		fs.mkdirSync(test_workspace_dir, { recursive: true });
+		const workspace = {
+			name: 'svelte-check-test-fake-pnpm-workspace',
+			private: true,
+			version: '0.0.0',
+			pnpm: { overrides },
+			devDependencies: overrides
+		};
+		fs.writeFileSync(
+			path.join(test_workspace_dir, 'package.json'),
+			JSON.stringify(workspace, null, '\t')
+		);
+		fs.writeFileSync(path.join(test_workspace_dir, 'pnpm-workspace.yaml'), 'packages:\n  - ./*\n');
 
-const dir = '.test-tmp';
-
-test.after(() => {
-	fs.rmSync(dir, { recursive: true, force: true });
+		// force creation of pnpm-lock.yaml in test workspace
+		execSync('pnpm install --no-frozen-lockfile', { dir: test_workspace_dir, stdio: 'inherit' });
+	} catch (e) {
+		console.error('failed to setup create-svelte test workspace', e);
+		throw e;
+	}
 });
 
 for (const template of fs.readdirSync('templates')) {
 	for (const types of ['checkjs', 'typescript']) {
 		test(`${template}: ${types}`, () => {
-			const cwd = `${dir}/${template}-${types}`;
+			const cwd = path.join(test_workspace_dir, `${template}-${types}`);
 			fs.rmSync(cwd, { recursive: true, force: true });
 
 			create(cwd, {
-				name: 'test',
+				name: `create-svelte-test-${template}-${types}`,
 				template,
 				types,
 				prettier: false,
 				eslint: false,
 				playwright: false
 			});
+			const pkg = JSON.parse(fs.readFileSync(path.join(cwd, 'package.json'), 'utf-8'));
+			Object.entries(overrides).forEach(([key, value]) => {
+				if (pkg.devDependencies?.[key]) {
+					pkg.devDependencies[key] = value;
+				}
+				if (pkg.dependencies?.[key]) {
+					pkg.dependencies[key] = value;
+				}
+			});
+			fs.writeFileSync(path.join(cwd, 'package.json'), JSON.stringify(pkg, null, '\t'));
+
+			// this pnpm install works in the test workspace, which redirects to our local packages again
+			execSync('pnpm install --no-frozen-lockfile', { cwd, stdio: 'inherit' });
 
-			execSync('npm i && npm run check', { cwd, stdio: 'inherit' });
+			// run check command separately
+			execSync('pnpm check', { cwd, stdio: 'inherit' });
 		});
 	}
 }

packages/kit/package.json

@@ -10,7 +10,7 @@
 	"homepage": "https://kit.svelte.dev",
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/vite-plugin-svelte": "1.0.0-next.49",
+		"@sveltejs/vite-plugin-svelte": "^1.0.1",
 		"chokidar": "^3.5.3",
 		"sade": "^1.8.1"
 	},
@@ -33,7 +33,7 @@
 		"marked": "^4.0.16",
 		"mime": "^3.0.0",
 		"node-fetch": "^3.2.4",
-		"rollup": "^2.75.3",
+		"rollup": "^2.75.7",
 		"selfsigned": "^2.0.1",
 		"set-cookie-parser": "^2.4.8",
 		"sirv": "^2.0.2",
@@ -45,11 +45,11 @@
 		"typescript": "^4.7.4",
 		"undici": "^5.6.1",
 		"uvu": "^0.5.3",
-		"vite": "^2.9.13"
+		"vite": "^3.0.0"
 	},
 	"peerDependencies": {
 		"svelte": "^3.44.0",
-		"vite": "^2.9.10"
+		"vite": "^3.0.0"
 	},
 	"bin": {
 		"svelte-kit": "svelte-kit.js"

packages/kit/src/core/sync/create_manifest_data/index.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import mime from 'mime';
-import { get_runtime_path } from '../../utils.js';
+import { get_runtime_directory } from '../../utils.js';
 import { posixify } from '../../../utils/filesystem.js';
 import { parse_route_id } from '../../../utils/routing.js';
 
@@ -58,7 +58,7 @@ const DEFAULT = 'default';
  */
 export default function create_manifest_data({
 	config,
-	fallback = `${get_runtime_path(config.kit)}/components`,
+	fallback = `${get_runtime_directory(config.kit)}/components`,
 	cwd = process.cwd()
 }) {
 	/** @type {import('types').RouteData[]} */

packages/kit/src/core/utils.js

@@ -2,10 +2,29 @@ import path from 'path';
 import colors from 'kleur';
 import { fileURLToPath } from 'url';
 
-export const get_runtime_path = process.env.BUNDLED
-	? /** @param {import('types').ValidatedKitConfig} config */ (config) =>
-			posixify_path(path.join(config.outDir, 'runtime'))
-	: () => posixify_path(fileURLToPath(new URL('../runtime', import.meta.url)));
+/**
+ * Get the prefix for the `runtime` directory, for use with import declarations
+ * @param {import('types').ValidatedKitConfig} config
+ */
+export function get_runtime_prefix(config) {
+	if (process.env.BUNDLED) {
+		return posixify_path(path.join(config.outDir, 'runtime'));
+	}
+
+	return posixify_path(fileURLToPath(new URL('../runtime', import.meta.url)));
+}
+
+/**
+ * Get the resolved path of the `runtime` directory
+ * @param {import('types').ValidatedKitConfig} config
+ */
+export function get_runtime_directory(config) {
+	if (process.env.BUNDLED) {
+		return path.join(config.outDir, 'runtime');
+	}
+
+	return fileURLToPath(new URL('../runtime', import.meta.url));
+}
 
 /** @param {string} str */
 function posixify_path(str) {

packages/kit/src/vite/build/build_server.js

@@ -3,7 +3,7 @@ import path from 'path';
 import { mkdirp, posixify } from '../../utils/filesystem.js';
 import { get_vite_config, merge_vite_configs, resolve_entry } from '../utils.js';
 import { load_template } from '../../core/config/index.js';
-import { get_runtime_path } from '../../core/utils.js';
+import { get_runtime_directory } from '../../core/utils.js';
 import { create_build, find_deps, get_default_config, remove_svelte_kit } from './utils.js';
 import { s } from '../../utils/misc.js';
 
@@ -177,7 +177,7 @@ export async function build_server(options, client) {
 			config,
 			hooks: app_relative(hooks_file),
 			has_service_worker: config.kit.serviceWorker.register && !!service_worker_entry_file,
-			runtime: get_runtime_path(config.kit),
+			runtime: posixify(path.relative(build_dir, get_runtime_directory(config.kit))),
 			template: load_template(cwd, config)
 		})
 	);

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

@@ -85,12 +85,13 @@ export function find_deps(manifest, entry, add_dynamic_css) {
  */
 export const get_default_config = function ({ config, input, ssr, outDir }) {
 	return {
+		appType: 'custom',
 		base: assets_base(config.kit),
 		build: {
 			cssCodeSplit: true,
 			manifest: true,
 			outDir,
-			polyfillDynamicImport: false,
+			polyfillModulePreload: false,
 			rollupOptions: {
 				input,
 				output: {
@@ -110,7 +111,6 @@ export const get_default_config = function ({ config, input, ssr, outDir }) {
 		resolve: {
 			alias: get_aliases(config.kit)
 		},
-		// @ts-expect-error
 		ssr: {
 			// when developing against the Kit src code, we want to ensure that
 			// our dependencies are bundled so that apps don't need to install
@@ -138,6 +138,9 @@ export function assets_base(config) {
 }
 
 /**
+ * vite.config.js will contain vite-plugin-svelte-kit, which kicks off the server and service
+ * worker builds in a hook. When running the server and service worker builds we must remove
+ * the SvelteKit plugin so that we do not kick off additional instances of these builds.
  * @param {import('vite').UserConfig} config
  */
 export function remove_svelte_kit(config) {