Merge pull request #539 from cudr/nested-routes-navigate-fix

Fix nested routes navigates

templates/src/client/app.ts

@@ -36,7 +36,7 @@ const root_props: RootProps = {
 
 export let prefetching: {
 	href: string;
-	promise: Promise<{ redirect?: Redirect, data?: any, nullable_depth?: number }>;
+	promise: Promise<{ redirect?: Redirect, data?: any, nullable_depth?: number, new_segments?: any }>;
 } = null;
 export function set_prefetching(href, promise) {
 	prefetching = { href, promise };
@@ -137,10 +137,13 @@ export function navigate(target: Target, id: number, noscroll?: boolean, hash?:
 
 	const token = current_token = {};
 
-	return loaded.then(({ redirect, data, nullable_depth }) => {
+	return loaded.then(({ redirect, data, nullable_depth, new_segments }) => {
 		if (redirect) {
 			return goto(redirect.location, { replaceState: true });
 		}
+		if (new_segments) {
+			segments = new_segments;
+		}
 		render(data, nullable_depth, scroll_history[id], noscroll, hash, token);
 		if (document.activeElement) document.activeElement.blur();
 	});
@@ -285,11 +288,9 @@ export function prepare_page(target: Target): Promise<{
 		}
 	}).then(results => {
 		if (redirect) {
-			return { redirect };
+			return { redirect, new_segments };
 		}
 
-		segments = new_segments;
-
 		const get_params = page.parts[page.parts.length - 1].params || (() => ({}));
 		const params = get_params(target.match);
 
@@ -303,6 +304,7 @@ export function prepare_page(target: Target): Promise<{
 			};
 
 			return {
+				new_segments,
 				data: Object.assign({}, props, {
 					preloading: false,
 					child: {
@@ -318,7 +320,7 @@ export function prepare_page(target: Target): Promise<{
 			path,
 			preloading: false,
 			child: Object.assign({}, root_props.child, {
-				segment: segments[0]
+				segment: new_segments[0]
 			})
 		};
 		if (changed(query, root_props.query)) data.query = query;
@@ -349,10 +351,10 @@ export function prepare_page(target: Target): Promise<{
 			}
 
 			level = level.props.child;
-			level.segment = segments[i + 1];
+			level.segment = new_segments[i + 1];
 		}
 
-		return { data, nullable_depth };
+		return { data, nullable_depth, new_segments };
 	});
 }
 
@@ -386,4 +388,4 @@ function detach(node: Node) {
 
 function changed(a: Record<string, string | true>, b: Record<string, string | true>) {
 	return JSON.stringify(a) !== JSON.stringify(b);
-}
+}

test/apps/preloading/src/routes/index.html

@@ -1,4 +1,6 @@
 <h1>Great success!</h1>
 
 <a href="slow-preload">slow preload</a>
-<a href="foo">foo</a>
+<a href="foo">foo</a>
+<a href="prefetch/qwe" rel=prefetch>prefetch qwe</a>
+<a href="prefetch/xyz" rel=prefetch>prefetch xyz</a>

test/apps/preloading/src/routes/prefetch/[slug]/index.html

@@ -0,0 +1 @@
+<h1>{params.slug}</h1>

test/apps/preloading/src/routes/prefetch/_layout.html

@@ -0,0 +1 @@
+<svelte:component this={child.component} {...child.props}/>

test/apps/preloading/src/routes/prefetch/index.html

@@ -0,0 +1 @@
+<h1>prefetch</h1>

test/apps/preloading/test.ts

@@ -83,4 +83,31 @@ describe('preloading', function() {
 		assert.equal(page.url(), `${base}/foo`);
 		assert.equal(await title(), 'foo');
 	});
-});
+
+	it('navigates to prefetched urls', async () => {
+		await page.goto(base);
+		await start();
+		await prefetchRoutes();
+
+		await page.hover('a[href="prefetch/qwe"]');
+		await wait(100);
+		await page.hover('a[href="prefetch/xyz"]');
+		await wait(100);
+
+		await page.click('a[href="prefetch/qwe"]');
+		await wait(50);
+
+		assert.equal(
+			await title(),
+			'qwe'
+		);
+
+		await page.goto(`${base}/prefetch`);
+		await wait(50);
+
+		assert.equal(
+			await title(),
+			'prefetch'
+		);
+	});
+});