Should fix 4177 navigation to pages with iframe with relative urls ar…

…e broken (#4191) * . * add test * Update .changeset/sour-needles-compete.md Co-authored-by: Rich Harris <hello@rich-harris.dev>
sveltejs · Mar 4, 2022 · d34298e · d34298e
1 parent 7f958dd
commit d34298e
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 8 deletions.
diff --git a/.changeset/sour-needles-compete.md b/.changeset/sour-needles-compete.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Update history immediately before updating DOM
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
@@ -187,7 +187,7 @@ export function create_client({ target, session, base, trailing_slash }) {
 	 * @param {import('./types').NavigationIntent} intent
 	 * @param {string[]} redirect_chain
 	 * @param {boolean} no_cache
-	 * @param {{hash?: string, scroll: { x: number, y: number } | null, keepfocus: boolean}} [opts]
+	 * @param {{hash?: string, scroll: { x: number, y: number } | null, keepfocus: boolean, details: { replaceState: boolean, state: any } | null}} [opts]
 	 */
 	async function update(intent, redirect_chain, no_cache, opts) {
 		const current_token = (token = {});
@@ -244,6 +244,13 @@ export function create_client({ target, session, base, trailing_slash }) {
 
 		updating = true;
 
+		if (opts && opts.details) {
+			const { details } = opts;
+			const change = details.replaceState ? 0 : 1;
+			details.state[INDEX_KEY] = current_history_index += change;
+			history[details.replaceState ? 'replaceState' : 'pushState'](details.state, '', intent.url);
+		}
+
 		if (started) {
 			current = navigation_result.state;
 
@@ -871,7 +878,8 @@ export function create_client({ target, session, base, trailing_slash }) {
 
 		await update(intent, redirect_chain, false, {
 			scroll,
-			keepfocus
+			keepfocus,
+			details
 		});
 
 		navigating--;
@@ -885,12 +893,6 @@ export function create_client({ target, session, base, trailing_slash }) {
 
 			stores.navigating.set(null);
 		}
-
-		if (details) {
-			const change = details.replaceState ? 0 : 1;
-			details.state[INDEX_KEY] = current_history_index += change;
-			history[details.replaceState ? 'replaceState' : 'pushState'](details.state, '', intent.url);
-		}
 	}
 
 	/**

diff --git a/packages/kit/test/apps/basics/src/routes/iframes/index.svelte b/packages/kit/test/apps/basics/src/routes/iframes/index.svelte
@@ -0,0 +1 @@
+<a href="/iframes/nested/parent">parent</a>
diff --git a/packages/kit/test/apps/basics/src/routes/iframes/nested/child.svelte b/packages/kit/test/apps/basics/src/routes/iframes/nested/child.svelte
@@ -0,0 +1 @@
+<h1>Hello from the child</h1>
diff --git a/packages/kit/test/apps/basics/src/routes/iframes/nested/parent.svelte b/packages/kit/test/apps/basics/src/routes/iframes/nested/parent.svelte
@@ -0,0 +1 @@
+<iframe title="Child content" src="./child" />
diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js
@@ -2156,6 +2156,15 @@ test.describe.parallel('Routing', () => {
 		await page.evaluate('window.fulfil_navigation && window.fulfil_navigation()');
 		expect(await page.url()).toBe(`${baseURL}/routing/cancellation/b`);
 	});
+
+	test('Relative paths are relative to the current URL', async ({ page, clicknav }) => {
+		await page.goto('/iframes');
+		await clicknav('[href="/iframes/nested/parent"]');
+
+		expect(await page.frameLocator('iframe').locator('h1').textContent()).toBe(
+			'Hello from the child'
+		);
+	});
 });
 
 test.describe.parallel('Session', () => {