Skip to content

Commit 370e9f9

Browse files
teemingcteemingc
authored
fix: only call afterNavigate once on start when SSR is disabled (#13593)
* add fix and test * changeset * format
1 parent fc9017c commit 370e9f9

File tree

7 files changed

+61
-32
lines changed

7 files changed

+61
-32
lines changed

‎.changeset/angry-ravens-eat.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/kit': patch
3+
---
4+
5+
fix: only call `afterNavigate` once on app start when SSR is disabled

‎packages/kit/src/exports/public.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1025,7 +1025,7 @@ export interface NavigationTarget {
10251025
}
10261026

10271027
/**
1028-
* - `enter`: The app has hydrated
1028+
* - `enter`: The app has hydrated/started
10291029
* - `form`: The user submitted a `<form>` with a GET method
10301030
* - `leave`: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
10311031
* - `link`: Navigation was triggered by a link click
@@ -1101,7 +1101,7 @@ export interface OnNavigate extends Navigation {
11011101
export interface AfterNavigate extends Omit<Navigation, 'type'> {
11021102
/**
11031103
* The type of navigation:
1104-
* - `enter`: The app has hydrated
1104+
* - `enter`: The app has hydrated/started
11051105
* - `form`: The user submitted a `<form>`
11061106
* - `link`: Navigation was triggered by a link click
11071107
* - `goto`: Navigation was triggered by a `goto(...)` call or a redirect

‎packages/kit/src/runtime/client/client.js‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -320,8 +320,10 @@ export async function start(_app, _target, hydrate) {
320320
if (hydrate) {
321321
await _hydrate(target, hydrate);
322322
} else {
323-
await goto(app.hash ? decode_hash(new URL(location.href)) : location.href, {
324-
replaceState: true
323+
await navigate({
324+
type: 'enter',
325+
url: resolve_url(app.hash ? decode_hash(new URL(location.href)) : location.href),
326+
replace_state: true
325327
});
326328
}
327329

@@ -479,20 +481,22 @@ function initialize(result, target, hydrate) {
479481

480482
restore_snapshot(current_navigation_index);
481483

482-
/** @type {import('@sveltejs/kit').AfterNavigate} */
483-
const navigation = {
484-
from: null,
485-
to: {
486-
params: current.params,
487-
route: { id: current.route?.id ?? null },
488-
url: new URL(location.href)
489-
},
490-
willUnload: false,
491-
type: 'enter',
492-
complete: Promise.resolve()
493-
};
484+
if (hydrate) {
485+
/** @type {import('@sveltejs/kit').AfterNavigate} */
486+
const navigation = {
487+
from: null,
488+
to: {
489+
params: current.params,
490+
route: { id: current.route?.id ?? null },
491+
url: new URL(location.href)
492+
},
493+
willUnload: false,
494+
type: 'enter',
495+
complete: Promise.resolve()
496+
};
494497

495-
after_navigate_callbacks.forEach((fn) => fn(navigation));
498+
after_navigate_callbacks.forEach((fn) => fn(navigation));
499+
}
496500

497501
started = true;
498502
}
@@ -1373,7 +1377,7 @@ function _before_navigate({ url, type, intent, delta }) {
13731377

13741378
/**
13751379
* @param {{
1376-
* type: import('@sveltejs/kit').Navigation["type"];
1380+
* type: import('@sveltejs/kit').NavigationType;
13771381
* url: URL;
13781382
* popped?: {
13791383
* state: Record<string, any>;
@@ -1407,7 +1411,10 @@ async function navigate({
14071411
token = nav_token;
14081412

14091413
const intent = await get_navigation_intent(url, false);
1410-
const nav = _before_navigate({ url, type, delta: popped?.delta, intent });
1414+
const nav =
1415+
type === 'enter'
1416+
? create_navigation(current, intent, url, type)
1417+
: _before_navigate({ url, type, delta: popped?.delta, intent });
14111418

14121419
if (!nav) {
14131420
block();
@@ -1423,7 +1430,7 @@ async function navigate({
14231430

14241431
is_navigating = true;
14251432

1426-
if (started) {
1433+
if (started && nav.navigation.type !== 'enter') {
14271434
stores.navigating.set((navigating.current = nav.navigation));
14281435
}
14291436

@@ -2847,10 +2854,11 @@ function reset_focus() {
28472854
}
28482855

28492856
/**
2857+
* @template {import('@sveltejs/kit').NavigationType} T
28502858
* @param {import('./types.js').NavigationState} current
28512859
* @param {import('./types.js').NavigationIntent | undefined} intent
28522860
* @param {URL | null} url
2853-
* @param {Exclude<import('@sveltejs/kit').NavigationType, 'enter'>} type
2861+
* @param {T} type
28542862
*/
28552863
function create_navigation(current, intent, url, type) {
28562864
/** @type {(value: any) => void} */
@@ -2867,7 +2875,7 @@ function create_navigation(current, intent, url, type) {
28672875
// Handle any errors off-chain so that it doesn't show up as an unhandled rejection
28682876
complete.catch(() => {});
28692877

2870-
/** @type {import('@sveltejs/kit').Navigation} */
2878+
/** @type {Omit<import('@sveltejs/kit').Navigation, 'type'> & { type: T }} */
28712879
const navigation = {
28722880
from: {
28732881
params: current.params,

‎packages/kit/test/apps/basics/src/routes/no-ssr/after-navigate/+page.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script>
2+
import { afterNavigate } from '$app/navigation';
3+
4+
let count = 0;
5+
let type = '';
6+
7+
afterNavigate((event) => {
8+
count += 1;
9+
type = event.type;
10+
});
11+
</script>
12+
13+
<p>{type.toString()} {count}</p>

‎packages/kit/test/apps/basics/test/client.test.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -335,8 +335,8 @@ test.describe('Load', () => {
335335
}
336336
});
337337

338-
test.describe('Page options', () => {
339-
test('applies generated component styles with ssr=false (hides announcer)', async ({
338+
test.describe('SPA mode / no SSR', () => {
339+
test('applies generated component styles (hides announcer)', async ({
340340
page,
341341
clicknav,
342342
get_computed_style
@@ -346,9 +346,7 @@ test.describe('Page options', () => {
346346

347347
expect(await get_computed_style('#svelte-announcer', 'position')).toBe('absolute');
348348
});
349-
});
350349

351-
test.describe('SPA mode / no SSR', () => {
352350
test('Can use browser-only global on client-only page through ssr config in handle', async ({
353351
page,
354352
read_errors
@@ -358,7 +356,7 @@ test.describe('SPA mode / no SSR', () => {
358356
expect(read_errors('/no-ssr/browser-only-global')).toBe(undefined);
359357
});
360358

361-
test('Can use browser-only global on client-only page through ssr config in +layout.js', async ({
359+
test('can use browser-only global on client-only page through ssr config in +layout.js', async ({
362360
page,
363361
read_errors
364362
}) => {
@@ -367,7 +365,7 @@ test.describe('SPA mode / no SSR', () => {
367365
expect(read_errors('/no-ssr/ssr-page-config')).toBe(undefined);
368366
});
369367

370-
test('Can use browser-only global on client-only page through ssr config in +page.js', async ({
368+
test('can use browser-only global on client-only page through ssr config in +page.js', async ({
371369
page,
372370
read_errors
373371
}) => {
@@ -376,14 +374,19 @@ test.describe('SPA mode / no SSR', () => {
376374
expect(read_errors('/no-ssr/ssr-page-config/layout/inherit')).toBe(undefined);
377375
});
378376

379-
test('Cannot use browser-only global on page because of ssr config in +page.js', async ({
377+
test('cannot use browser-only global on page because of ssr config in +page.js', async ({
380378
page
381379
}) => {
382380
await page.goto('/no-ssr/ssr-page-config/layout/overwrite');
383381
await expect(page.locator('p')).toHaveText(
384382
'This is your custom error page saying: "document is not defined (500 Internal Error)"'
385383
);
386384
});
385+
386+
test('afterNavigate is only called once during start', async ({ page }) => {
387+
await page.goto('/no-ssr/after-navigate');
388+
await expect(page.locator('p')).toHaveText('enter 1');
389+
});
387390
});
388391

389392
// TODO SvelteKit 3: remove these tests

‎packages/kit/test/apps/basics/test/cross-platform/client.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ test.describe('Navigation lifecycle functions', () => {
257257
);
258258
});
259259

260-
test('afterNavigate properly removed', async ({ page, clicknav }) => {
260+
test('onNavigate returned function is only called once', async ({ page, clicknav }) => {
261261
await page.goto('/navigation-lifecycle/after-navigate-properly-removed/b');
262262
await clicknav('[href="/navigation-lifecycle/after-navigate-properly-removed/a"]');
263263
await clicknav('[href="/navigation-lifecycle/after-navigate-properly-removed/b"]');

‎packages/kit/types/index.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1007,7 +1007,7 @@ declare module '@sveltejs/kit' {
10071007
}
10081008

10091009
/**
1010-
* - `enter`: The app has hydrated
1010+
* - `enter`: The app has hydrated/started
10111011
* - `form`: The user submitted a `<form>` with a GET method
10121012
* - `leave`: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
10131013
* - `link`: Navigation was triggered by a link click
@@ -1083,7 +1083,7 @@ declare module '@sveltejs/kit' {
10831083
export interface AfterNavigate extends Omit<Navigation, 'type'> {
10841084
/**
10851085
* The type of navigation:
1086-
* - `enter`: The app has hydrated
1086+
* - `enter`: The app has hydrated/started
10871087
* - `form`: The user submitted a `<form>`
10881088
* - `link`: Navigation was triggered by a link click
10891089
* - `goto`: Navigation was triggered by a `goto(...)` call or a redirect

0 commit comments

Comments
 (0)