From 76a574d0d3bc4a089213b0e56e6ccf5f92d99c33 Mon Sep 17 00:00:00 2001
From: Paul Ebose <paulebose@gmail.com>
Date: Wed, 21 Jun 2023 00:12:08 +0100
Subject: [PATCH 1/3] fix: update page store when URL hash is changed from the
 address bar

---
 packages/kit/src/runtime/client/client.js     | 23 +++++++++++++++---
 .../src/routes/store/data/+layout.svelte      |  1 +
 packages/kit/test/apps/basics/test/test.js    | 24 +++++++++++++++++++
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
index 7594286af239..70d422a3c155 100644
--- a/packages/kit/src/runtime/client/client.js
+++ b/packages/kit/src/runtime/client/client.js
@@ -1554,9 +1554,7 @@ export function create_client(app, target) {
 
 					update_scroll_positions(current_history_index);
 
-					current.url = url;
-					stores.page.set({ ...page, url });
-					stores.page.notify();
+					update_url(url);
 
 					if (!options.replace_state) return;
 
@@ -1670,6 +1668,16 @@ export function create_client(app, target) {
 						delta
 					});
 				}
+				// TODO: should this run regardless of the `event.state?.[INDEX_KEY]` if condition?
+				else {
+					// since popstate event is also emitted when an anchor referencing the same
+					// document is clicked, we have to check that the router isn't already handling
+					// the navigation. otherwise we would be updating the page store twice.
+					if (!hash_navigating) {
+						const url = new URL(location.href);
+						update_url(url);
+					}
+				}
 			});
 
 			addEventListener('hashchange', () => {
@@ -1701,6 +1709,15 @@ export function create_client(app, target) {
 					stores.navigating.set(null);
 				}
 			});
+
+			/**
+			 * @param {URL} url
+			 */
+			function update_url(url) {
+				current.url = url;
+				stores.page.set({ ...page, url });
+				stores.page.notify();
+			}
 		},
 
 		_hydrate: async ({
diff --git a/packages/kit/test/apps/basics/src/routes/store/data/+layout.svelte b/packages/kit/test/apps/basics/src/routes/store/data/+layout.svelte
index 1ad81a9ca762..ee85d2efaf6c 100644
--- a/packages/kit/test/apps/basics/src/routes/store/data/+layout.svelte
+++ b/packages/kit/test/apps/basics/src/routes/store/data/+layout.svelte
@@ -4,6 +4,7 @@
 
 <div id="store-data">{JSON.stringify($page.data)}</div>
 <div id="store-error">{$page.error?.message}</div>
+<div id="url-hash">{$page.url.hash}</div>
 
 <nav>
 	<a href="/store/data/xxx">xxx</a> <a href="/store/data/yyy">yyy</a>
diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js
index 36a8fc44b267..0dc6865863dd 100644
--- a/packages/kit/test/apps/basics/test/test.js
+++ b/packages/kit/test/apps/basics/test/test.js
@@ -760,6 +760,30 @@ test.describe('$app/stores', () => {
 			expect(await page.textContent('#nav-status')).toBe('not currently navigating');
 		}
 	});
+
+	test('should update page store when URL hash is changed through the address bar', async ({
+		baseURL,
+		page,
+		javaScriptEnabled
+	}) => {
+		const href = `${baseURL}/store/data/zzz`;
+		await page.goto(href);
+
+		expect(await page.textContent('#url-hash')).toBe('');
+
+		if (javaScriptEnabled) {
+			for (const urlHash of ['#1', '#2', '#5', '#8']) {
+				await page.evaluate(
+					({ href, urlHash }) => {
+						location.href = `${href}${urlHash}`;
+					},
+					{ href, urlHash }
+				);
+
+				expect(await page.textContent('#url-hash')).toBe(urlHash);
+			}
+		}
+	});
 });
 
 test.describe('searchParams', () => {

From b33b95f93b8b2a43a831aa4aa3d2a55f9433c9f8 Mon Sep 17 00:00:00 2001
From: Paul Ebose <paulebose@gmail.com>
Date: Wed, 21 Jun 2023 00:18:23 +0100
Subject: [PATCH 2/3] add changeset

---
 .changeset/hungry-ghosts-yawn.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hungry-ghosts-yawn.md

diff --git a/.changeset/hungry-ghosts-yawn.md b/.changeset/hungry-ghosts-yawn.md
new file mode 100644
index 000000000000..864047a234b8
--- /dev/null
+++ b/.changeset/hungry-ghosts-yawn.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: update page store when URL hash is changed from the address bar

From cede6c710811f1f0cf3a72dc0d1157523e7a3fb1 Mon Sep 17 00:00:00 2001
From: Paul Ebose <paulebose@gmail.com>
Date: Tue, 4 Jul 2023 18:05:42 +0100
Subject: [PATCH 3/3] remove TODO comment

---
 packages/kit/src/runtime/client/client.js | 40 +++++++++++------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
index 70d422a3c155..2f523d4778a0 100644
--- a/packages/kit/src/runtime/client/client.js
+++ b/packages/kit/src/runtime/client/client.js
@@ -1,12 +1,21 @@
 import { DEV } from 'esm-env';
 import { onMount, tick } from 'svelte';
 import {
-	make_trackable,
-	decode_pathname,
+	add_data_suffix,
 	decode_params,
-	normalize_path,
-	add_data_suffix
+	decode_pathname,
+	make_trackable,
+	normalize_path
 } from '../../utils/url.js';
+import {
+	initial_fetch,
+	lock_fetch,
+	native_fetch,
+	subsequent_fetch,
+	unlock_fetch
+} from './fetcher.js';
+import { parse } from './parse.js';
+import * as storage from './session-storage.js';
 import {
 	find_anchor,
 	get_base_uri,
@@ -15,25 +24,16 @@ import {
 	is_external_url,
 	scroll_state
 } from './utils.js';
-import * as storage from './session-storage.js';
-import {
-	lock_fetch,
-	unlock_fetch,
-	initial_fetch,
-	subsequent_fetch,
-	native_fetch
-} from './fetcher.js';
-import { parse } from './parse.js';
 
 import { base } from '__sveltekit/paths';
-import { HttpError, Redirect } from '../control.js';
-import { stores } from './singletons.js';
-import { unwrap_promises } from '../../utils/promises.js';
 import * as devalue from 'devalue';
-import { INDEX_KEY, PRELOAD_PRIORITIES, SCROLL_KEY, SNAPSHOT_KEY } from './constants.js';
-import { validate_page_exports } from '../../utils/exports.js';
 import { compact } from '../../utils/array.js';
+import { validate_page_exports } from '../../utils/exports.js';
+import { unwrap_promises } from '../../utils/promises.js';
+import { HttpError, Redirect } from '../control.js';
 import { INVALIDATED_PARAM, validate_depends } from '../shared.js';
+import { INDEX_KEY, PRELOAD_PRIORITIES, SCROLL_KEY, SNAPSHOT_KEY } from './constants.js';
+import { stores } from './singletons.js';
 
 let errored = false;
 
@@ -1667,9 +1667,7 @@ export function create_client(app, target) {
 						type: 'popstate',
 						delta
 					});
-				}
-				// TODO: should this run regardless of the `event.state?.[INDEX_KEY]` if condition?
-				else {
+				} else {
 					// since popstate event is also emitted when an anchor referencing the same
 					// document is clicked, we have to check that the router isn't already handling
 					// the navigation. otherwise we would be updating the page store twice.