From db849463c3dc5f2c5a7dd953e8b12200f30b3795 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Wed, 29 Dec 2021 12:34:36 +0800 Subject: [PATCH] feat: auto-restart SvelteKit when Svelte config changed (#237) --- .changeset/forty-olives-look.md | 5 +++++ .../e2e-tests/kit-node/__tests__/kit.spec.ts | 19 ++++++++++--------- packages/e2e-tests/kit-node/package.json | 2 +- packages/e2e-tests/testUtils.ts | 14 ++++++++++++++ packages/playground/kit-demo-app/package.json | 2 +- .../vite-plugin-svelte/src/utils/options.ts | 5 +---- .../vite-plugin-svelte/src/utils/watch.ts | 4 ++-- pnpm-lock.yaml | 12 ++++++------ 8 files changed, 40 insertions(+), 23 deletions(-) create mode 100644 .changeset/forty-olives-look.md diff --git a/.changeset/forty-olives-look.md b/.changeset/forty-olives-look.md new file mode 100644 index 000000000..7e393d85a --- /dev/null +++ b/.changeset/forty-olives-look.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte': minor +--- + +auto-restart SvelteKit when Svelte config changed diff --git a/packages/e2e-tests/kit-node/__tests__/kit.spec.ts b/packages/e2e-tests/kit-node/__tests__/kit.spec.ts index 5bd8d9014..3dc15ace1 100644 --- a/packages/e2e-tests/kit-node/__tests__/kit.spec.ts +++ b/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'); }); }); }); diff --git a/packages/e2e-tests/kit-node/package.json b/packages/e2e-tests/kit-node/package.json index a940bab1a..e7252b8aa 100644 --- a/packages/e2e-tests/kit-node/package.json +++ b/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" diff --git a/packages/e2e-tests/testUtils.ts b/packages/e2e-tests/testUtils.ts index 87cbf110f..953b9e5c6 100644 --- a/packages/e2e-tests/testUtils.ts +++ b/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[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); + }); +} diff --git a/packages/playground/kit-demo-app/package.json b/packages/playground/kit-demo-app/package.json index 2fd2b77d0..93f2bc1d8 100644 --- a/packages/playground/kit-demo-app/package.json +++ b/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", diff --git a/packages/vite-plugin-svelte/src/utils/options.ts b/packages/vite-plugin-svelte/src/utils/options.ts index a879bb154..0f1eccfc7 100644 --- a/packages/vite-plugin-svelte/src/utils/options.ts +++ b/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 { diff --git a/packages/vite-plugin-svelte/src/utils/watch.ts b/packages/vite-plugin-svelte/src/utils/watch.ts index de879e12e..1e4d468cf 100644 --- a/packages/vite-plugin-svelte/src/utils/watch.ts +++ b/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.'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9135c639d..675e69a1a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -220,13 +220,13 @@ importers: packages/e2e-tests/kit-node: specifiers: '@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 devDependencies: '@sveltejs/adapter-node': 1.0.0-next.56 - '@sveltejs/kit': 1.0.0-next.203_svelte@3.44.3 + '@sveltejs/kit': 1.0.0-next.204_svelte@3.44.3 e2e-test-dep-svelte-api-only: link:../_test_dependencies/svelte-api-only svelte: 3.44.3 svelte-i18n: 3.3.13_svelte@3.44.3 @@ -362,7 +362,7 @@ importers: '@fontsource/fira-mono': ^4.5.0 '@lukeed/uuid': ^2.0.0 '@sveltejs/adapter-node': ^1.0.0-next.56 - '@sveltejs/kit': ^1.0.0-next.203 + '@sveltejs/kit': ^1.0.0-next.204 cookie: ^0.4.1 svelte: ^3.44.3 dependencies: @@ -371,7 +371,7 @@ importers: cookie: 0.4.1 devDependencies: '@sveltejs/adapter-node': 1.0.0-next.56 - '@sveltejs/kit': 1.0.0-next.203_svelte@3.44.3 + '@sveltejs/kit': 1.0.0-next.204_svelte@3.44.3 svelte: 3.44.3 packages/playground/optimizedeps-include: @@ -1313,8 +1313,8 @@ packages: tiny-glob: 0.2.9 dev: true - /@sveltejs/kit/1.0.0-next.203_svelte@3.44.3: - resolution: {integrity: sha512-+bhfmkzquWMSCCFIJoh36U9D6IKC0p/NrIr4CBHMAdRpqzL9lMP0AYQm1fUDH20F/6b2tWvGxmEg+gAmHikRfA==} + /@sveltejs/kit/1.0.0-next.204_svelte@3.44.3: + resolution: {integrity: sha512-Jl9pyMc94YxO/hq/pCc4d+Syo354N9QH46QzZYfnu2QS+MPDL/JkHE56Cqr8qg+ewiVEDqCJ6Ljo7GxPTksspw==} engines: {node: '>=14.13'} hasBin: true peerDependencies: