Skip to content

Commit

Permalink
feat: auto-restart SvelteKit when Svelte config changed (#237)
Browse files Browse the repository at this point in the history
  • Loading branch information
bluwy committed Dec 29, 2021
1 parent 6b0983c commit db84946
Show file tree
Hide file tree
Showing 8 changed files with 40 additions and 23 deletions.
5 changes: 5 additions & 0 deletions .changeset/forty-olives-look.md
@@ -0,0 +1,5 @@
---
'@sveltejs/vite-plugin-svelte': minor
---

auto-restart SvelteKit when Svelte config changed
19 changes: 10 additions & 9 deletions packages/e2e-tests/kit-node/__tests__/kit.spec.ts
Expand Up @@ -7,7 +7,8 @@ import {
isBuild,
readFileContent,
sleep,
untilUpdated
untilUpdated,
waitForNavigation
} from '../../testUtils';

import fetch from 'node-fetch';
Expand Down Expand Up @@ -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');
});
});
});
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/kit-node/package.json
Expand Up @@ -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"
Expand Down
14 changes: 14 additions & 0 deletions packages/e2e-tests/testUtils.ts
Expand Up @@ -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);
});
}
2 changes: 1 addition & 1 deletion packages/playground/kit-demo-app/package.json
Expand Up @@ -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",
Expand Down
5 changes: 1 addition & 4 deletions packages/vite-plugin-svelte/src/utils/options.ts
Expand Up @@ -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
Expand Down Expand Up @@ -492,7 +490,6 @@ export interface PreResolvedOptions extends Options {
root: string;
isBuild: boolean;
isServe: boolean;
isSvelteKit: boolean;
}

export interface ResolvedOptions extends PreResolvedOptions {
Expand Down
4 changes: 2 additions & 2 deletions packages/vite-plugin-svelte/src/utils/watch.ts
Expand Up @@ -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.';
Expand Down
12 changes: 6 additions & 6 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit db84946

Please sign in to comment.