Merge pull request #663 from sveltejs/skipped-segments

Handle skipped segments

runtime/src/app/app.ts

@@ -288,14 +288,22 @@ export async function hydrate_target(target: Target): Promise<{
 	let l = 1;
 
 	try {
+		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;
+
 			props.segments[l] = segments[i + 1]; // TODO make this less confusing
-			if (!part) return null;
+			if (!part) return { segment };
 
 			const j = l++;
 
-			const segment = segments[i];
-			if (!session_dirty && current_branch[i] && current_branch[i].segment === segment && current_branch[i].part === part.i) return current_branch[i];
+			if (!session_dirty && !segment_dirty && current_branch[i] && current_branch[i].part === part.i) {
+				return current_branch[i];
+			}
+
+			segment_dirty = false;
 
 			const { default: component, preload } = await load_component(components[part.i]);
 

test/apps/basics/src/routes/skipped/[one]/[two].svelte

@@ -0,0 +1,14 @@
+<script context="module">
+	export function preload({ params }) {
+		return params;
+	}
+</script>
+
+<script>
+	export let one;
+	export let two;
+</script>
+
+<h1>{one}:{two}</h1>
+
+<a href="skipped/y/1">skipped/y/1</a>

test/apps/basics/test.ts

@@ -282,7 +282,7 @@ describe('basics', function() {
 		assert.equal(await title(), 'bar');
 	});
 
-  it('navigates to ...rest', async () => {
+	it('navigates to ...rest', async () => {
 		await page.goto(`${base}/abc/xyz`);
 		await start();
 
@@ -298,8 +298,8 @@ describe('basics', function() {
 			await page.evaluate(() => document.body.textContent),
 			'xyz,abc,qwe'
 		);
-  });
-  
+	});
+
 	it('navigates between dynamic routes with same segments', async () => {
 		await page.goto(`${base}/dirs/bar/xyz`);
 		await start();
@@ -310,7 +310,7 @@ describe('basics', function() {
 		await wait(50);
 		assert.equal(await title(), 'B page');
 	});
-  
+
 	it('runs server route handlers before page handlers, if they match', async () => {
 		const json = await get(`${base}/middleware`, {
 			headers: {
@@ -324,4 +324,18 @@ describe('basics', function() {
 
 		assert.ok(html.body.indexOf('<h1>HTML</h1>') !== -1);
 	});
+
+	it('invalidates page when a segment is skipped', async () => {
+		await page.goto(`${base}/skipped/x/1`);
+		await start();
+		await prefetchRoutes();
+
+		await page.click('a[href="skipped/y/1"]');
+		await wait(50);
+
+		assert.equal(
+			await title(),
+			'y:1'
+		);
+	});
 });