From 546089622844de714c1013cff466f6b3989fb0b0 Mon Sep 17 00:00:00 2001
From: Brian Takita <brian.takita@gmail.com>
Date: Mon, 13 May 2019 02:38:15 -0400
Subject: [PATCH] Checking the current_branch[i] route match against the
 current request's route match.

current_branch[i].match.slice(1, i+2) compared to match.slice(1, i+2)

Fixes https://github.com/sveltejs/sapper/issues/688
---
 runtime/src/app/app.ts                        | 15 ++++++++++--
 .../basics/src/routes/[...rest]/deep.svelte   | 10 ++++++++
 .../basics/src/routes/[...rest]/index.svelte  | 12 ++++++++++
 test/apps/basics/test.ts                      | 24 +++++++++++++++----
 .../apps/layout/src/routes/[x]/[y]/[z].svelte |  3 ++-
 test/apps/layout/test.ts                      | 21 +++++++++++++---
 6 files changed, 74 insertions(+), 11 deletions(-)

diff --git a/runtime/src/app/app.ts b/runtime/src/app/app.ts
index 3f5e8e1fe..1e731fba1 100644
--- a/runtime/src/app/app.ts
+++ b/runtime/src/app/app.ts
@@ -292,11 +292,22 @@ export async function hydrate_target(target: Target): Promise<{
 	let l = 1;
 
 	try {
+		const { pattern } = route;
+		const match = pattern.exec(page.path);
 		let segment_dirty = false;
 		branch = await Promise.all(route.parts.map(async (part, i) => {
 			const segment = segments[i];
 
-			if (current_branch[i] && current_branch[i].segment !== segment) segment_dirty = true;
+			if (
+				current_branch[i]
+				&& (
+					current_branch[i].segment !== segment
+					|| (
+						current_branch[i].match
+						&& JSON.stringify(current_branch[i].match.slice(1, i+2)) !== JSON.stringify(match.slice(1, i+2))
+					)
+				)
+			) segment_dirty = true;
 
 			props.segments[l] = segments[i + 1]; // TODO make this less confusing
 			if (!part) return { segment };
@@ -324,7 +335,7 @@ export async function hydrate_target(target: Target): Promise<{
 				preloaded = initial_data.preloaded[i + 1];
 			}
 
-			return (props[`level${j}`] = { component, props: preloaded, segment, part: part.i });
+			return (props[`level${j}`] = { component, props: preloaded, segment, match, part: part.i });
 		}));
 	} catch (error) {
 		props.error = error;
diff --git a/test/apps/basics/src/routes/[...rest]/deep.svelte b/test/apps/basics/src/routes/[...rest]/deep.svelte
index 7b5ae6323..fd58804c6 100644
--- a/test/apps/basics/src/routes/[...rest]/deep.svelte
+++ b/test/apps/basics/src/routes/[...rest]/deep.svelte
@@ -1,8 +1,18 @@
+<script context="module">
+	export function preload({ query, params }) {
+		const { rest } = params;
+		return { rest };
+	}
+</script>
+
 <script>
 	import { stores } from '@sapper/app';
 	const { page } = stores();
+	export let rest;
 </script>
 
 <h1>{$page.params.rest.join(',')}</h1>
+<h2>{rest.join(',')}</h2>
 
 <a href="xyz/abc/qwe/deep.json">deep</a>
+<a href="xyz/abc">back</a>
diff --git a/test/apps/basics/src/routes/[...rest]/index.svelte b/test/apps/basics/src/routes/[...rest]/index.svelte
index be9494ace..f7fdcddd5 100644
--- a/test/apps/basics/src/routes/[...rest]/index.svelte
+++ b/test/apps/basics/src/routes/[...rest]/index.svelte
@@ -1,8 +1,20 @@
+<script context="module">
+	export function preload({ query, params }) {
+		const { rest } = params;
+		return { rest };
+	}
+</script>
+
 <script>
 	import { stores } from '@sapper/app';
 	const { page } = stores();
+	export let rest;
 </script>
 
 <h1>{$page.params.rest.join(',')}</h1>
+<h2>{rest.join(',')}</h2>
 
 <a href="xyz/abc/deep">deep</a>
+<a href="xyz/abc">deep</a>
+<a href="xyz/abc/def">deep</a>
+<a href="xyz/abc/def/ghi">deep</a>
diff --git a/test/apps/basics/test.ts b/test/apps/basics/test.ts
index 9f24a8c6b..f545bb7d0 100644
--- a/test/apps/basics/test.ts
+++ b/test/apps/basics/test.ts
@@ -1,7 +1,7 @@
 import * as assert from 'assert';
 import * as http from 'http';
-import { build } from '../../../api';
-import { AppRunner } from '../AppRunner';
+import {build} from '../../../api';
+import {AppRunner} from '../AppRunner';
 
 declare let deleted: { id: number };
 declare let el: any;
@@ -267,7 +267,6 @@ describe('basics', function() {
 		await r.sapper.start();
 
 		assert.equal(await r.text('h1'), 'foo');
-
 		await r.page.click('[href="dirs/bar"]');
 		await r.wait();
 		assert.equal(await r.text('h1'), 'bar');
@@ -278,11 +277,26 @@ describe('basics', function() {
 		await r.sapper.start();
 
 		assert.equal(await r.text('h1'), 'abc,xyz');
-
+		await r.page.click('[href="xyz/abc/def/ghi"]');
+		await r.wait();
+		assert.equal(await r.text('h1'), 'xyz,abc,def,ghi');
+		assert.equal(await r.text('h2'), 'xyz,abc,def,ghi');
+		await r.page.click('[href="xyz/abc/def"]');
+		await r.wait();
+		assert.equal(await r.text('h1'), 'xyz,abc,def');
+		assert.equal(await r.text('h2'), 'xyz,abc,def');
+		await r.page.click('[href="xyz/abc/def"]');
+		await r.wait();
+		assert.equal(await r.text('h1'), 'xyz,abc,def');
+		assert.equal(await r.text('h2'), 'xyz,abc,def');
+		await r.page.click('[href="xyz/abc"]');
+		await r.wait();
+		assert.equal(await r.text('h1'), 'xyz,abc');
+		assert.equal(await r.text('h2'), 'xyz,abc');
 		await r.page.click('[href="xyz/abc/deep"]');
 		await r.wait();
 		assert.equal(await r.text('h1'), 'xyz,abc');
-
+		assert.equal(await r.text('h2'), 'xyz,abc');
 		await r.page.click('[href="xyz/abc/qwe/deep.json"]');
 		await r.wait();
 		assert.equal(
diff --git a/test/apps/layout/src/routes/[x]/[y]/[z].svelte b/test/apps/layout/src/routes/[x]/[y]/[z].svelte
index 85ebc8f75..699970959 100644
--- a/test/apps/layout/src/routes/[x]/[y]/[z].svelte
+++ b/test/apps/layout/src/routes/[x]/[y]/[z].svelte
@@ -16,4 +16,5 @@
 </script>
 
 <span>z: {$page.params.z} {count}</span>
-<a href="foo/bar/qux">click me</a>
\ No newline at end of file
+<a href="foo/bar/qux">goto foo/bar/qux</a>
+<a href="foo/abc/def">goto foo/abc/def</a>
\ No newline at end of file
diff --git a/test/apps/layout/test.ts b/test/apps/layout/test.ts
index 7f5740863..41bc08876 100644
--- a/test/apps/layout/test.ts
+++ b/test/apps/layout/test.ts
@@ -23,7 +23,8 @@ describe('layout', function() {
 		assert.deepEqual(text1.split('\n').map(str => str.trim()).filter(Boolean), [
 			'y: bar 1',
 			'z: baz 1',
-			'click me',
+			'goto foo/bar/qux',
+			'goto foo/abc/def',
 			'child segment: baz'
 		]);
 
@@ -32,7 +33,8 @@ describe('layout', function() {
 		assert.deepEqual(text2.split('\n').map(str => str.trim()).filter(Boolean), [
 			'y: bar 1',
 			'z: baz 1',
-			'click me',
+			'goto foo/bar/qux',
+			'goto foo/abc/def',
 			'child segment: baz'
 		]);
 
@@ -43,9 +45,22 @@ describe('layout', function() {
 		assert.deepEqual(text3.split('\n').map(str => str.trim()).filter(Boolean), [
 			'y: bar 1',
 			'z: qux 2',
-			'click me',
+			'goto foo/bar/qux',
+			'goto foo/abc/def',
 			'child segment: qux'
 		]);
+
+		await r.page.click('[href="foo/abc/def"]');
+		await r.wait();
+
+		const text4 = await r.text('#sapper');
+		assert.deepEqual(text4.split('\n').map(str => str.trim()).filter(Boolean), [
+			'y: abc 2',
+			'z: def 3',
+			'goto foo/bar/qux',
+			'goto foo/abc/def',
+			'child segment: def'
+		]);
 	});
 
 	it('survives the tests with no server errors', () => {