feat: auto-restart SvelteKit when Svelte config changed (#237)

Author: bluwy

.changeset/forty-olives-look.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+auto-restart SvelteKit when Svelte config changed

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

@@ -7,7 +7,8 @@ import {
 	isBuild,
 	readFileContent,
 	sleep,
-	untilUpdated
+	untilUpdated,
+	waitForNavigation
 } from '../../testUtils';
 
 import fetch from 'node-fetch';
@@ -232,14 +233,14 @@ describe('kit-node', () => {
 					});
 				});
 				describe('config file update', () => {
-					it('should show an overlay', async () => {
-						await editFile('svelte.config.js', (config) => config + '\n');
-						const errorOverlay = await page.waitForSelector('vite-error-overlay');
-						expect(errorOverlay).toBeTruthy();
-						const message = await errorOverlay.$$eval('.message-body', (m) => {
-							return m[0].innerHTML;
-						});
-						expect(message).toContain('Svelte config change detected');
+					it('should auto refresh', async () => {
+						const button = await getEl('button');
+						await button.click();
+						expect(await getText('button')).toBe('Clicks: 1');
+						editFile('svelte.config.js', (config) => config + '\n');
+						await waitForNavigation({ waitUntil: 'networkidle' });
+						// clicks should reset, means the browser refreshed
+						expect(await getText('button')).toBe('Clicks: 0');
 					});
 				});
 			});

packages/e2e-tests/kit-node/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "^1.0.0-next.56",
-    "@sveltejs/kit": "^1.0.0-next.203",
+    "@sveltejs/kit": "^1.0.0-next.204",
     "e2e-test-dep-svelte-api-only": "workspace:*",
     "svelte": "^3.44.3",
     "svelte-i18n": "^3.3.13"

packages/e2e-tests/testUtils.ts

@@ -203,3 +203,17 @@ export async function editViteConfig(replacer: (str: string) => string) {
 	await page.goto(viteTestUrl, { waitUntil: 'networkidle' });
 	await sleep(50);
 }
+
+export async function waitForNavigation(opts: Parameters<typeof page.waitForNavigation>[0]) {
+	const timeout = opts.timeout || 30000; // default playwright timeout is 30000
+	let timeoutHandle: NodeJS.Timeout;
+	const timeoutPromise = new Promise((resolve, reject) => {
+		timeoutHandle = setTimeout(
+			() => reject(new Error(`navigation timed out after ${timeout}ms`)),
+			timeout - 50 // have slightly shorter timeout so error is shown before playwright timeout
+		);
+	});
+	await Promise.race([page.waitForNavigation(opts), timeoutPromise]).finally(() => {
+		clearTimeout(timeoutHandle);
+	});
+}

packages/playground/kit-demo-app/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "^1.0.0-next.56",
-    "@sveltejs/kit": "^1.0.0-next.203",
+    "@sveltejs/kit": "^1.0.0-next.204",
     "svelte": "^3.44.3"
   },
   "type": "module",

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

@@ -82,9 +82,7 @@ export async function preResolveOptions(
 		// extras
 		root: viteConfigWithResolvedRoot.root!,
 		isBuild: viteEnv.command === 'build',
-		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
+		isServe: viteEnv.command === 'serve'
 	};
 	// configFile of svelteConfig contains the absolute path it was loaded from,
 	// prefer it over the possibly relative inline path
@@ -492,7 +490,6 @@ export interface PreResolvedOptions extends Options {
 	root: string;
 	isBuild: boolean;
 	isServe: boolean;
-	isSvelteKit: boolean;
 }
 
 export interface ResolvedOptions extends PreResolvedOptions {

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

@@ -42,8 +42,8 @@ export function setupWatchers(
 	};
 
 	const triggerViteRestart = (filename: string) => {
-		if (serverConfig.middlewareMode || options.isSvelteKit) {
-			// in middlewareMode or for sveltekit we can't restart the server automatically
+		if (serverConfig.middlewareMode) {
+			// in middlewareMode 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.';