fix: prevent infinite loop when calling pushState/replaceState in effect (#13914)

* fix: prevent infinite loop when calling `pushState`/`replaceState` in effect

* oops

* fix duplicate import

* test for shallow navigation with effects

* remove todo comment

---------

Co-authored-by: Chew Tee Ming <[email protected]>

Author: Ocean-OS

.changeset/chatty-pears-notice.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: prevent infinite loop when calling `pushState`/`replaceState` in `$effect`

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

@@ -1,5 +1,5 @@
 import { BROWSER, DEV } from 'esm-env';
-import { onMount, tick } from 'svelte';
+import { onMount, tick, untrack } from 'svelte';
 import {
 	decode_params,
 	decode_pathname,
@@ -2111,7 +2111,7 @@ export function pushState(url, state) {
 	page.state = state;
 	root.$set({
 		// we need to assign a new page object so that subscribers are correctly notified
-		page: clone_page(page)
+		page: untrack(() => clone_page(page))
 	});
 
 	clear_onward_history(current_history_index, current_navigation_index);
@@ -2154,7 +2154,7 @@ export function replaceState(url, state) {
 
 	page.state = state;
 	root.$set({
-		page: clone_page(page)
+		page: untrack(() => clone_page(page))
 	});
 }
 

packages/kit/test/apps/basics/src/app.d.ts

@@ -10,10 +10,9 @@ declare global {
 		}
 
 		interface PageState {
-			active: boolean;
+			active?: boolean;
+			count?: number;
 		}
-
-		interface Platform {}
 	}
 }
 

packages/kit/test/apps/basics/src/routes/shallow-routing/push-state/effect/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { pushState } from '$app/navigation';
+
+	let count = $state(0);
+
+	$effect(() => {
+		if (count) pushState('', { count });
+	});
+</script>
+
+<p>count: {count}</p>
+<button onclick={() => count++}>Increment</button>

packages/kit/test/apps/basics/src/routes/shallow-routing/replace-state/effect/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { pushState as replaceState } from '$app/navigation';
+
+	let count = $state(0);
+
+	$effect(() => {
+		if (count) replaceState('', { count });
+	});
+</script>
+
+<p>count: {count}</p>
+<button onclick={() => count++}>Increment</button>

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

@@ -1477,6 +1477,20 @@ test.describe('Shallow routing', () => {
 		await expect(page.locator('h1')).toHaveText('parent');
 		await expect(page.locator('p')).toHaveText('active: true');
 	});
+
+	test('pushState does not loop infinitely in $effect', async ({ page }) => {
+		await page.goto('/shallow-routing/push-state/effect');
+		await expect(page.locator('p')).toHaveText('count: 0');
+		await page.locator('button').click();
+		await expect(page.locator('p')).toHaveText('count: 1');
+	});
+
+	test('replaceState does not loop infinitely in $effect', async ({ page }) => {
+		await page.goto('/shallow-routing/replace-state/effect');
+		await expect(page.locator('p')).toHaveText('count: 0');
+		await page.locator('button').click();
+		await expect(page.locator('p')).toHaveText('count: 1');
+	});
 });
 
 test.describe('reroute', () => {