From bfa2b6ec88a6d522d87c924d7c466c01e142e66e Mon Sep 17 00:00:00 2001
From: Tee Ming <chewteeming01@gmail.com>
Date: Sat, 11 Feb 2023 02:32:06 +0800
Subject: [PATCH] fix: client-side trailing slash redirect when preloading data
 (#8982)

* add client-side trailing slash redirect

* lint

* edit comment

* add comments
---
 .changeset/shiny-eagles-drop.md                  |  5 +++++
 packages/kit/src/runtime/client/client.js        | 11 ++++++++++-
 .../src/routes/routing/trailing-slash/+layout.js |  1 +
 .../routes/routing/trailing-slash/+layout.svelte | 13 +++++++++++++
 .../routes/routing/trailing-slash/+page.svelte   |  0
 .../routing/trailing-slash/always/+page.js       |  1 +
 .../routing/trailing-slash/always/+page.svelte   |  0
 .../routing/trailing-slash/ignore/+page.js       |  1 +
 .../routing/trailing-slash/ignore/+page.svelte   |  0
 .../routing/trailing-slash/never/+page.svelte    |  0
 .../basics/test/cross-platform/client.test.js    | 16 ++++++++++++++++
 11 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/shiny-eagles-drop.md
 create mode 100644 packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+layout.js
 create mode 100644 packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+layout.svelte
 create mode 100644 packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+page.svelte
 create mode 100644 packages/kit/test/apps/basics/src/routes/routing/trailing-slash/always/+page.js
 create mode 100644 packages/kit/test/apps/basics/src/routes/routing/trailing-slash/always/+page.svelte
 create mode 100644 packages/kit/test/apps/basics/src/routes/routing/trailing-slash/ignore/+page.js
 create mode 100644 packages/kit/test/apps/basics/src/routes/routing/trailing-slash/ignore/+page.svelte
 create mode 100644 packages/kit/test/apps/basics/src/routes/routing/trailing-slash/never/+page.svelte

diff --git a/.changeset/shiny-eagles-drop.md b/.changeset/shiny-eagles-drop.md
new file mode 100644
index 000000000000..e36f8740988e
--- /dev/null
+++ b/.changeset/shiny-eagles-drop.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: client-side trailing slash redirect when preloading data
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
index aef957d74f19..1ff4b14c1780 100644
--- a/packages/kit/src/runtime/client/client.js
+++ b/packages/kit/src/runtime/client/client.js
@@ -311,7 +311,7 @@ export function create_client({ target }) {
 				);
 				return false;
 			}
-		} else if (/** @type {number} */ (navigation_result.props?.page?.status) >= 400) {
+		} else if (/** @type {number} */ (navigation_result.props.page?.status) >= 400) {
 			const updated = await stores.updated.check();
 			if (updated) {
 				await native_navigation(url);
@@ -331,6 +331,14 @@ export function create_client({ target }) {
 			capture_snapshot(previous_history_index);
 		}
 
+		// ensure the url pathname matches the page's trailing slash option
+		if (
+			navigation_result.props.page?.url &&
+			navigation_result.props.page.url.pathname !== url.pathname
+		) {
+			url.pathname = navigation_result.props.page?.url.pathname;
+		}
+
 		if (opts && opts.details) {
 			const { details } = opts;
 			const change = details.replaceState ? 0 : 1;
@@ -355,6 +363,7 @@ export function create_client({ target }) {
 		if (started) {
 			current = navigation_result.state;
 
+			// reset url before updating page store
 			if (navigation_result.props.page) {
 				navigation_result.props.page.url = url;
 			}
diff --git a/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+layout.js b/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+layout.js
new file mode 100644
index 000000000000..a3d15781a772
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+layout.js
@@ -0,0 +1 @@
+export const ssr = false;
diff --git a/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+layout.svelte b/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+layout.svelte
new file mode 100644
index 000000000000..d9e54145e6ff
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+layout.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<ul data-sveltekit-preload-data="hover">
+	<li><a href="/routing/trailing-slash/always">/always</a></li>
+	<li><a href="/routing/trailing-slash/ignore/">/ignore/</a></li>
+	<li><a href="/routing/trailing-slash/never/">/never/</a></li>
+</ul>
+
+<p>{$page.url.pathname}</p>
+
+<slot />
diff --git a/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+page.svelte b/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/+page.svelte
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/always/+page.js b/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/always/+page.js
new file mode 100644
index 000000000000..d3c325085ed2
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/always/+page.js
@@ -0,0 +1 @@
+export const trailingSlash = 'always';
diff --git a/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/always/+page.svelte b/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/always/+page.svelte
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/ignore/+page.js b/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/ignore/+page.js
new file mode 100644
index 000000000000..42a828c116a3
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/ignore/+page.js
@@ -0,0 +1 @@
+export const trailingSlash = 'ignore';
diff --git a/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/ignore/+page.svelte b/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/ignore/+page.svelte
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/never/+page.svelte b/packages/kit/test/apps/basics/src/routes/routing/trailing-slash/never/+page.svelte
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/kit/test/apps/basics/test/cross-platform/client.test.js b/packages/kit/test/apps/basics/test/cross-platform/client.test.js
index 6ab72a150b64..f9109342f130 100644
--- a/packages/kit/test/apps/basics/test/cross-platform/client.test.js
+++ b/packages/kit/test/apps/basics/test/cross-platform/client.test.js
@@ -660,6 +660,22 @@ test.describe('Routing', () => {
 		await page.locator(selector).click();
 		expect(await page.textContent(selector)).toBe('count: 1');
 	});
+
+	test('trailing slash redirect', async ({ page, clicknav }) => {
+		await page.goto('/routing/trailing-slash');
+
+		await clicknav('a[href="/routing/trailing-slash/always"]');
+		expect(new URL(page.url()).pathname).toBe('/routing/trailing-slash/always/');
+		await expect(page.locator('p')).toHaveText('/routing/trailing-slash/always/');
+
+		await clicknav('a[href="/routing/trailing-slash/never/"]');
+		expect(new URL(page.url()).pathname).toBe('/routing/trailing-slash/never');
+		await expect(page.locator('p')).toHaveText('/routing/trailing-slash/never');
+
+		await clicknav('a[href="/routing/trailing-slash/ignore/"]');
+		expect(new URL(page.url()).pathname).toBe('/routing/trailing-slash/ignore/');
+		await expect(page.locator('p')).toHaveText('/routing/trailing-slash/ignore/');
+	});
 });
 
 test.describe('Shadow DOM', () => {