refactor: use new server.restart api and update vite peer to ^2.7.0 (#223)

* refactor: update peerDependency on vite to ^2.7.0 and use new server.restart api instead of fake change event

* fix: disable automatic restart for kit, it doesn't work

Author: dominikg

.changeset/smooth-rings-run.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+update vite peerDependency to ^2.7.0 and refactor server restart on change of svelte.config.js

packages/vite-plugin-svelte/package.json

@@ -55,7 +55,7 @@
   "peerDependencies": {
     "diff-match-patch": "^1.0.5",
     "svelte": "^3.44.0",
-    "vite": "^2.6.0"
+    "vite": "^2.7.0"
   },
   "peerDependenciesMeta": {
     "diff-match-patch": {

packages/vite-plugin-svelte/src/index.ts

@@ -95,14 +95,9 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 			}
 		},
 
-		async resolveId(importee, importer, opts, ...args) {
-			// get _ssr this way to suppress typescript warning
-			const _ssr = (args as any)[0] as boolean | undefined;
-
-			// @ts-expect-error anticipate vite deprecating forth parameter and rely on `opts.ssr` instead`
-			// see https://github.com/vitejs/vite/discussions/5109
-			const ssr: boolean = _ssr === true || opts.ssr;
-			const svelteRequest = requestParser(importee, !!ssr);
+		async resolveId(importee, importer, opts) {
+			const ssr = !!opts?.ssr;
+			const svelteRequest = requestParser(importee, ssr);
 			if (svelteRequest?.query.svelte) {
 				if (svelteRequest.query.type === 'style') {
 					// return cssId with root prefix so postcss pipeline of vite finds the directory correctly
@@ -153,10 +148,8 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 		},
 
 		async transform(code, id, opts) {
-			// @ts-expect-error anticipate vite changing third parameter as options object
-			// see https://github.com/vitejs/vite/discussions/5109
-			const ssr: boolean = opts === true || opts?.ssr;
-			const svelteRequest = requestParser(id, !!ssr);
+			const ssr = !!opts?.ssr;
+			const svelteRequest = requestParser(id, ssr);
 			if (!svelteRequest) {
 				return;
 			}

packages/vite-plugin-svelte/src/utils/options.ts

@@ -121,6 +121,7 @@ function mergeOptions(
 	viteConfig: UserConfig,
 	viteEnv: ConfigEnv
 ): ResolvedOptions {
+	// @ts-ignore
 	const merged = {
 		...defaultOptions,
 		...svelteConfig,
@@ -137,7 +138,9 @@ function mergeOptions(
 		root: viteConfig.root!,
 		isProduction: viteEnv.mode === 'production',
 		isBuild: viteEnv.command === 'build',
-		isServe: viteEnv.command === 'serve'
+		isServe: viteEnv.command === 'serve',
+		// @ts-expect-error we don't declare kit property of svelte config but read it once here to identify kit projects
+		isSvelteKit: !!svelteConfig?.kit
 	};
 	// configFile of svelteConfig contains the absolute path it was loaded from,
 	// prefer it over the possibly relative inline path
@@ -485,6 +488,7 @@ export interface ResolvedOptions extends Options {
 	isBuild: boolean;
 	isServe: boolean;
 	server?: ViteDevServer;
+	isSvelteKit?: boolean;
 }
 
 export type {

packages/vite-plugin-svelte/src/utils/watch.ts

@@ -17,7 +17,7 @@ export function setupWatchers(
 		return;
 	}
 	const { watcher, ws } = server;
-	const { configFile: viteConfigFile, root, server: serverConfig } = server.config;
+	const { root, server: serverConfig } = server.config;
 
 	const emitChangeEventOnDependants = (filename: string) => {
 		const dependants = cache.getDependants(filename);
@@ -42,19 +42,19 @@ export function setupWatchers(
 	};
 
 	const triggerViteRestart = (filename: string) => {
-		// vite restart is triggered by simulating a change to vite config. This requires that vite config exists
-		// also we do not restart in middleware-mode as it could be risky
-		if (!!viteConfigFile && !serverConfig.middlewareMode) {
-			log.info(`svelte config changed: restarting vite server. - file: ${filename}`);
-			watcher.emit('change', viteConfigFile);
-		} else {
+		if (serverConfig.middlewareMode || options.isSvelteKit) {
+			// in middlewareMode or for sveltekit we can't restart the server automatically
+			// show the user an overlay instead
 			const message =
 				'Svelte config change detected, restart your dev process to apply the changes.';
 			log.info(message, filename);
 			ws.send({
 				type: 'error',
 				err: { message, stack: '', plugin: 'vite-plugin-svelte', id: filename }
 			});
+		} else {
+			log.info(`svelte config changed: restarting vite server. - file: ${filename}`);
+			server.restart(!!options.experimental?.prebundleSvelteLibraries);
 		}
 	};