fix bug and add test

Author: tom

packages/kit/src/runtime/client/renderer.js

@@ -724,11 +724,11 @@ export class Renderer {
 	/**
 	 * @param {import('./types').NavigationCandidate} selected
 	 * @param {boolean} no_cache
-	 * @param {string} [next_route_key]
-	 * @param {Record<string, any>} [next_route_props]
+	 * @param {string} [fallthrough_target]
+	 * @param {Record<string, any>} [fallthrough_props]
 	 * @returns {Promise<import('./types').NavigationResult | undefined>} undefined if fallthrough
 	 */
-	async _load({ route, info }, no_cache, next_route_key, next_route_props) {
+	async _load({ route, info }, no_cache, fallthrough_target, fallthrough_props) {
 		const { url, path, routes } = info;
 		const key = url.pathname + url.search;
 		if (!no_cache) {
@@ -790,8 +790,8 @@ export class Renderer {
 					const is_shadow_page = shadow_key !== undefined && i === a.length - 1;
 
 					if (is_shadow_page) {
-						if (next_route_key !== undefined && shadow_key === next_route_key) {
-							if (next_route_props) props = next_route_props;
+						if (fallthrough_target !== undefined && shadow_key === fallthrough_target) {
+							if (fallthrough_props) props = fallthrough_props;
 						} else {
 							const res = await fetch(
 								`${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json${url.search}`,
@@ -804,7 +804,7 @@ export class Renderer {
 							);
 							if (res.ok) {
 								const redirect = res.headers.get('x-sveltekit-location');
-								const route_key = res.headers.get('x-sveltekit-load');
+								const route_index = res.headers.get('x-sveltekit-load');
 								if (redirect) {
 									return {
 										redirect,
@@ -813,15 +813,15 @@ export class Renderer {
 									};
 								}
 								// '.' means fallthrough from server-side  not match any router
-								if (route_key === '.') return;
-								props = await res.json();
-								if (route_key) {
-									const next_route = routes.find((r) => r[4] === route_key);
+								if (route_index === '-1') return;
+								props = res.status === 204 ? {} : await res.json();
+								if (route_index) {
+									const next_route = routes[+route_index];
 									if (next_route) {
 										return await this._load(
 											{ route: next_route, info },
 											no_cache,
-											route_key,
+											next_route[4],
 											props
 										);
 									}

packages/kit/src/runtime/server/index.js

@@ -153,6 +153,7 @@ export async function respond(request, options, state = {}) {
 
 				const shadow_key = request.headers.get('x-sveltekit-load');
 				let from_fallthrough = false;
+				let route_index = -1;
 
 				for (const route of options.manifest._.routes) {
 					const match = route.pattern.exec(decoded);
@@ -162,6 +163,7 @@ export async function respond(request, options, state = {}) {
 					/** @type {Response | undefined} */
 					let response;
 					const is_page = route.type === 'page';
+					if (is_page) route_index++;
 					if (is_data_request && is_page && route.shadow) {
 						if (!from_fallthrough && shadow_key && shadow_key !== route.key) continue;
 						if (route.shadow) {
@@ -184,7 +186,7 @@ export async function respond(request, options, state = {}) {
 								if (from_fallthrough && response.ok) {
 									const headers = new Headers(response.headers);
 									// client-site will fallthrough to the route
-									headers.set('x-sveltekit-load', route.key);
+									headers.set('x-sveltekit-load', `${route_index}`);
 									response = new Response(response.body, {
 										status: response.status,
 										headers
@@ -201,7 +203,7 @@ export async function respond(request, options, state = {}) {
 						if (is_page) {
 							if (from_fallthrough) {
 								const headers = new Headers({
-									'x-sveltekit-load': route.key
+									'x-sveltekit-load': `${route_index}`
 								});
 								// next match not a shadow  so fallthrough at client-side
 								return new Response(undefined, {
@@ -256,7 +258,7 @@ export async function respond(request, options, state = {}) {
 				// no match route
 				if (from_fallthrough) {
 					const headers = new Headers({
-						'x-sveltekit-load': '.'
+						'x-sveltekit-load': '-1'
 					});
 					// next match not a shadow  so fallthrough at client-side
 					return new Response(undefined, {

packages/kit/test/apps/basics/src/routes/shadowed/fallthrough/[a].js

@@ -0,0 +1,14 @@
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export async function get({ params }) {
+	const param = params.a;
+	if (param !== 'a') {
+		return {
+			fallthrough: true
+		};
+	}
+
+	return {
+		status: 200,
+		body: { param }
+	};
+}

packages/kit/test/apps/basics/src/routes/shadowed/fallthrough/[a].svelte

@@ -0,0 +1,5 @@
+<script>
+	/** @type string|undefined */
+	export let param;
+</script>
+<h2>a-{param}</h2>

packages/kit/test/apps/basics/src/routes/shadowed/fallthrough/[b].js

@@ -0,0 +1,14 @@
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export async function get({ params }) {
+	const param = params.b;
+	if (param !== 'b') {
+		return {
+			fallthrough: true
+		};
+	}
+
+	return {
+		status: 200,
+		body: { param }
+	};
+}

packages/kit/test/apps/basics/src/routes/shadowed/fallthrough/[b].svelte

@@ -0,0 +1,5 @@
+<script>
+	/** @type string|undefined */
+	export let param;
+</script>
+<h2>b-{param}</h2>

packages/kit/test/apps/basics/src/routes/shadowed/fallthrough/[c].svelte

@@ -0,0 +1 @@
+<h2>c</h2>

packages/kit/test/apps/basics/src/routes/shadowed/fallthrough/index.svelte

@@ -0,0 +1,3 @@
+<a href="/shadowed/fallthrough/a">fallthrough to shadow a</a>
+<a id="b" href="/shadowed/fallthrough/b">fallthrough to shadow b</a>
+<a href="/shadowed/fallthrough/c">fallthrough to no shadow c</a>

packages/kit/test/apps/basics/test/test.js

@@ -504,6 +504,18 @@ test.describe.parallel('Shadowed pages', () => {
 		await clicknav('[href="/shadowed/dynamic/bar"]');
 		expect(await page.textContent('h1')).toBe('slug: bar');
 	});
+
+	test('Shadow fallthrough shadow', async ({ page, clicknav }) => {
+		await page.goto('/shadowed/fallthrough');
+		await clicknav('[href="/shadowed/fallthrough/b"]');
+		expect(await page.textContent('h2')).toBe('b-b');
+	});
+
+	test('Shadow fallthrough to  no_shadow', async ({ page, clicknav }) => {
+		await page.goto('/shadowed/fallthrough');
+		await clicknav('[href="/shadowed/fallthrough/c"]');
+		expect(await page.textContent('h2')).toBe('c');
+	});
 });
 
 test.describe.parallel('Endpoints', () => {