From ed4d53e2d9e81d47fa084cc304a7a94e431b1cdd Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 21 Dec 2024 12:22:59 -0500
Subject: [PATCH] fix: create new URL when calling `goto(...)`, to handle case
 where URL is mutated (#13196)

* fix: create new URL when calling `goto(...)`, to handle case where URL is mutated

* add test

* format

---------

Co-authored-by: Chew Tee Ming <chew.tee.ming@nindatech.com>
---
 .changeset/smooth-weeks-rhyme.md                 |  5 +++++
 packages/kit/src/runtime/client/client.js        |  2 +-
 .../basics/src/routes/state/url/+page.svelte     | 16 ++++++++++++++++
 .../kit/test/apps/basics/test/client.test.js     |  7 +++++++
 4 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/smooth-weeks-rhyme.md
 create mode 100644 packages/kit/test/apps/basics/src/routes/state/url/+page.svelte

diff --git a/.changeset/smooth-weeks-rhyme.md b/.changeset/smooth-weeks-rhyme.md
new file mode 100644
index 000000000000..edb0855071f0
--- /dev/null
+++ b/.changeset/smooth-weeks-rhyme.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: create new URL when calling `goto(...)`, to handle case where URL is mutated
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
index 955f54c2a74b..1b3c11161036 100644
--- a/packages/kit/src/runtime/client/client.js
+++ b/packages/kit/src/runtime/client/client.js
@@ -1800,7 +1800,7 @@ export function goto(url, opts = {}) {
 		throw new Error('Cannot call goto(...) on the server');
 	}
 
-	url = resolve_url(url);
+	url = new URL(resolve_url(url));
 
 	if (url.origin !== origin) {
 		return Promise.reject(
diff --git a/packages/kit/test/apps/basics/src/routes/state/url/+page.svelte b/packages/kit/test/apps/basics/src/routes/state/url/+page.svelte
new file mode 100644
index 000000000000..c8d9d6ec90b5
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/state/url/+page.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+
+	const q = $derived(page.url.searchParams.get('q') || undefined);
+</script>
+
+<button
+	type="button"
+	onclick={() => {
+		page.url.searchParams.set('q', 'test');
+		goto(page.url);
+	}}>test</button
+>
+
+<p>{`${q}`}</p>
diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js
index 0239225668ee..d527a0e77870 100644
--- a/packages/kit/test/apps/basics/test/client.test.js
+++ b/packages/kit/test/apps/basics/test/client.test.js
@@ -421,6 +421,13 @@ test.describe('$app/state', () => {
 		await app.goto('/state/data/state-update/same-keys');
 		await expect(page.locator('p')).toHaveText('page.data was updated 1 time(s)');
 	});
+
+	test('page.url does update when used with goto', async ({ page }) => {
+		await page.goto('/state/url');
+		await expect(page.locator('p')).toHaveText('undefined');
+		await page.locator('button').click();
+		await expect(page.locator('p')).toHaveText('test');
+	});
 });
 
 test.describe('Invalidation', () => {