merge master -> page-stuff

sveltejs · Jan 10, 2022 · e4ef0d3 · e4ef0d3
2 parents 2ea3c93 + bcedf8c
commit e4ef0d3
Show file tree

Hide file tree

Showing 27 changed files with 132 additions and 49 deletions.
diff --git a/.changeset/purple-cycles-build.md b/.changeset/purple-cycles-build.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Fallthrough is now explicit and layout components now also support fallthrough
diff --git a/documentation/docs/01-routing.md b/documentation/docs/01-routing.md
@@ -79,15 +79,18 @@ export interface EndpointOutput<Body extends DefaultBody = DefaultBody> {
 	body?: Body;
 }
 
+export type MaybePromise<T> = T | Promise<T>;
+
+export interface Fallthrough {
+	fallthrough?: true;
+}
+
 export interface RequestHandler<
 	Locals = Record<string, any>,
 	Input = unknown,
 	Output extends DefaultBody = DefaultBody
 > {
-	(request: Request<Locals, Input>):
-		| void
-		| EndpointOutput<Output>
-		| Promise<void | EndpointOutput<Output>>;
+	(request: Request<Locals, Input>): MaybePromise<Fallthrough | EndpointOutput<Output>>;
 }
 ```
 
@@ -125,7 +128,7 @@ The job of this function is to return a `{ status, headers, body }` object repre
 
 If the returned `body` is an object, and no `content-type` header is returned, it will automatically be turned into a JSON response. (Don't worry about `$lib`, we'll get to that [later](#modules-$lib).)
 
-> Returning nothing is equivalent to an explicit 404 response.
+> If `{fallthrough: true}` is returned SvelteKit will [fall through](#routing-advanced-fallthrough-routes) to other routes until something responds, or will respond with a generic 404.
 
 For endpoints that handle other HTTP methods, like POST, export the corresponding function:
 

diff --git a/documentation/docs/03-loading.md b/documentation/docs/03-loading.md
@@ -8,6 +8,10 @@ A component that defines a page or a layout can export a `load` function that ru
 // Declaration types for Loading
 // * declarations that are not exported are for internal use
 
+export interface Fallthrough {
+	fallthrough?: true;
+}
+
 export interface LoadInput<
 	PageParams extends Record<string, string> = Record<string, string>,
 	Stuff extends Record<string, any> = Record<string, any>,
@@ -20,7 +24,7 @@ export interface LoadInput<
 	stuff: Stuff;
 }
 
-export interface LoadOutput<
+export type LoadOutput<
 	Props extends Record<string, any> = Record<string, any>,
 	Stuff extends Record<string, any> = Record<string, any>
 > {
@@ -30,7 +34,7 @@ export interface LoadOutput<
 	props?: Props;
 	stuff?: Stuff;
 	maxage?: number;
-}
+} | Fallthrough
 ```
 
 Our example blog page might contain a `load` function like the following:
@@ -62,7 +66,7 @@ Our example blog page might contain a `load` function like the following:
 
 `load` is similar to `getStaticProps` or `getServerSideProps` in Next.js, except that it runs on both the server and the client.
 
-If `load` returns nothing, SvelteKit will [fall through](#routing-advanced-fallthrough-routes) to other routes until something responds, or will respond with a generic 404.
+If `load` returns `{fallthrough: true}`, SvelteKit will [fall through](#routing-advanced-fallthrough-routes) to other routes until something responds, or will respond with a generic 404.
 
 SvelteKit's `load` receives an implementation of `fetch`, which has the following special properties:
 

diff --git a/packages/kit/src/runtime/client/renderer.js b/packages/kit/src/runtime/client/renderer.js
@@ -590,8 +590,9 @@ export class Renderer {
 
 			const loaded = await module.load.call(null, load_input);
 
-			// if the page component returns nothing from load, fall through
-			if (!loaded) return;
+			if (!loaded) {
+				throw new Error('load function must return a value');
+			}
 
 			node.loaded = normalize(loaded);
 			if (node.loaded.stuff) node.stuff = node.loaded.stuff;
@@ -668,9 +669,10 @@ export class Renderer {
 						stuff
 					});
 
-					const is_leaf = i === a.length - 1;
-
 					if (node && node.loaded) {
+						if (node.loaded.fallthrough) {
+							return;
+						}
 						if (node.loaded.error) {
 							status = node.loaded.status;
 							error = node.loaded.error;
@@ -687,10 +689,6 @@ export class Renderer {
 						if (node.loaded.stuff) {
 							stuff_changed = true;
 						}
-					} else if (is_leaf && module.load) {
-						// if the leaf node has a `load` function
-						// that returns nothing, fall through
-						return;
 					}
 				} else {
 					node = previous;

diff --git a/packages/kit/src/runtime/server/endpoint.js b/packages/kit/src/runtime/server/endpoint.js
@@ -59,13 +59,14 @@ export async function render_endpoint(request, route, match) {
 	const response = await handler(request);
 	const preface = `Invalid response from route ${request.url.pathname}`;
 
-	if (!response) {
-		return;
-	}
 	if (typeof response !== 'object') {
 		return error(`${preface}: expected an object, got ${typeof response}`);
 	}
 
+	if (response.fallthrough) {
+		return;
+	}
+
 	let { status = 200, body, headers = {} } = response;
 
 	headers = lowercase_keys(headers);

diff --git a/packages/kit/src/runtime/server/page/load_node.js b/packages/kit/src/runtime/server/page/load_node.js
@@ -16,7 +16,6 @@ import { is_root_relative, resolve } from '../../../utils/url.js';
  *   $session: any;
  *   stuff: Record<string, any>;
  *   prerender_enabled: boolean;
- *   is_leaf: boolean;
  *   is_error: boolean;
  *   status?: number;
  *   error?: Error;
@@ -34,7 +33,6 @@ export async function load_node({
 	$session,
 	stuff,
 	prerender_enabled,
-	is_leaf,
 	is_error,
 	status,
 	error
@@ -294,16 +292,16 @@ export async function load_node({
 		}
 
 		loaded = await module.load.call(null, load_input);
+
+		if (!loaded) {
+			throw new Error(`load function must return a value${options.dev ? ` (${node.entry})` : ''}`);
+		}
 	} else {
 		loaded = {};
 	}
 
-	// if leaf node (i.e. page component) has a load function
-	// that returns nothing, we fall through to the next one
-	if (!loaded && is_leaf && !is_error) return;
-
-	if (!loaded) {
-		throw new Error(`${node.entry} - load must return a value except for page fall through`);
+	if (loaded.fallthrough && !is_error) {
+		return;
 	}
 
 	return {

diff --git a/packages/kit/src/runtime/server/page/respond.js b/packages/kit/src/runtime/server/page/respond.js
@@ -90,7 +90,6 @@ export async function respond(opts) {
 						node,
 						stuff,
 						prerender_enabled: is_prerender_enabled(options, node, state),
-						is_leaf: i === nodes.length - 1,
 						is_error: false
 					});
 
@@ -147,7 +146,6 @@ export async function respond(opts) {
 										node: error_node,
 										stuff: node_loaded.stuff,
 										prerender_enabled: is_prerender_enabled(options, error_node, state),
-										is_leaf: false,
 										is_error: true,
 										status,
 										error

diff --git a/packages/kit/src/runtime/server/page/respond_with_error.js b/packages/kit/src/runtime/server/page/respond_with_error.js
@@ -39,7 +39,6 @@ export async function respond_with_error({ request, options, state, $session, st
 				$session,
 				stuff: {},
 				prerender_enabled: is_prerender_enabled(options, default_error, state),
-				is_leaf: false,
 				is_error: false
 			})
 		);
@@ -56,7 +55,6 @@ export async function respond_with_error({ request, options, state, $session, st
 				$session,
 				stuff: layout_loaded ? layout_loaded.stuff : {},
 				prerender_enabled: is_prerender_enabled(options, default_error, state),
-				is_leaf: false,
 				is_error: true,
 				status,
 				error

diff --git a/packages/kit/test/apps/basics/src/routes/endpoint-output/empty.js b/packages/kit/test/apps/basics/src/routes/endpoint-output/empty.js
@@ -4,4 +4,6 @@ export function get() {
 }
 
 /** @type {import('@sveltejs/kit').RequestHandler} */
-export function del() {}
+export function del() {
+	return { fallthrough: true };
+}
diff --git a/packages/kit/test/apps/basics/src/routes/routing/fallthrough-advanced/[animal].json.js b/packages/kit/test/apps/basics/src/routes/routing/fallthrough-advanced/[animal].json.js
@@ -7,4 +7,5 @@ export function get({ params }) {
 			body: { type: 'animal' }
 		};
 	}
+	return { fallthrough: true };
 }
diff --git a/packages/kit/test/apps/basics/src/routes/routing/fallthrough-advanced/[animal].svelte b/packages/kit/test/apps/basics/src/routes/routing/fallthrough-advanced/[animal].svelte
@@ -14,6 +14,7 @@
 				};
 			}
 		}
+		return { fallthrough: true };
 	}
 </script>
 

diff --git a/packages/kit/test/apps/basics/src/routes/routing/fallthrough-advanced/[mineral].json.js b/packages/kit/test/apps/basics/src/routes/routing/fallthrough-advanced/[mineral].json.js
@@ -7,4 +7,5 @@ export function get({ params }) {
 			body: { type: 'mineral' }
 		};
 	}
+	return { fallthrough: true };
 }
diff --git a/packages/kit/test/apps/basics/src/routes/routing/fallthrough-advanced/[mineral].svelte b/packages/kit/test/apps/basics/src/routes/routing/fallthrough-advanced/[mineral].svelte
@@ -14,6 +14,7 @@
 				};
 			}
 		}
+		return { fallthrough: true };
 	}
 </script>
 

diff --git a/packages/kit/test/apps/basics/src/routes/routing/fallthrough-advanced/[vegetable].json.js b/packages/kit/test/apps/basics/src/routes/routing/fallthrough-advanced/[vegetable].json.js
@@ -7,4 +7,5 @@ export function get({ params }) {
 			body: { type: 'vegetable' }
 		};
 	}
+	return { fallthrough: true };
 }
diff --git a/packages/kit/test/apps/basics/src/routes/routing/fallthrough-advanced/[vegetable].svelte b/packages/kit/test/apps/basics/src/routes/routing/fallthrough-advanced/[vegetable].svelte
@@ -14,6 +14,7 @@
 				};
 			}
 		}
+		return { fallthrough: true };
 	}
 </script>
 

diff --git a/packages/kit/test/apps/basics/src/routes/routing/fallthrough-layout/[foo]/__layout.svelte b/packages/kit/test/apps/basics/src/routes/routing/fallthrough-layout/[foo]/__layout.svelte
@@ -0,0 +1,12 @@
+<script context="module">
+	/** @type {import("@sveltejs/kit").Load} */
+
+	export async function load({ params }) {
+		if (params.foo !== 'okay') {
+			return { fallthrough: true };
+		}
+		return {};
+	}
+</script>
+
+<slot />
diff --git a/packages/kit/test/apps/basics/src/routes/routing/fallthrough-layout/[foo]/index.svelte b/packages/kit/test/apps/basics/src/routes/routing/fallthrough-layout/[foo]/index.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<h1>foo is {$page.params.foo}</h1>
diff --git a/packages/kit/test/apps/basics/src/routes/routing/fallthrough-layout/[xyz]/__layout.svelte b/packages/kit/test/apps/basics/src/routes/routing/fallthrough-layout/[xyz]/__layout.svelte
@@ -0,0 +1,12 @@
+<script context="module">
+	/** @type {import("@sveltejs/kit").Load} */
+
+	export async function load({ params }) {
+		if (params.xyz !== 'ok') {
+			return { fallthrough: true };
+		}
+		return {};
+	}
+</script>
+
+<slot />
diff --git a/packages/kit/test/apps/basics/src/routes/routing/fallthrough-layout/[xyz]/index.svelte b/packages/kit/test/apps/basics/src/routes/routing/fallthrough-layout/[xyz]/index.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<h1>xyz is {$page.params.xyz}</h1>
diff --git a/packages/kit/test/apps/basics/src/routes/routing/fallthrough-layout/__layout.svelte b/packages/kit/test/apps/basics/src/routes/routing/fallthrough-layout/__layout.svelte
@@ -0,0 +1,5 @@
+<a href="/routing/fallthrough-layout/okay">okay</a>
+<a href="/routing/fallthrough-layout/ok">ok</a>
+<a href="/routing/fallthrough-layout/notok">notok</a>
+
+<slot />
diff --git a/packages/kit/test/apps/basics/src/routes/routing/fallthrough-simple/[legal].svelte b/packages/kit/test/apps/basics/src/routes/routing/fallthrough-simple/[legal].svelte
@@ -5,9 +5,8 @@
 			return {
 				props: {}
 			};
-		} else {
-			return;
 		}
+		return { fallthrough: true };
 	};
 </script>
 

diff --git a/packages/kit/test/apps/basics/src/routes/routing/shadow/action.js b/packages/kit/test/apps/basics/src/routes/routing/shadow/action.js
@@ -3,6 +3,7 @@ let random = 0;
 /** @type {import('@sveltejs/kit').RequestHandler<any, FormData>} */
 export function post({ body }) {
 	random = +body.get('random');
+	return { fallthrough: true };
 }
 
 export function get() {

diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js
@@ -1557,6 +1557,17 @@ test.describe.parallel('Routing', () => {
 		expect(await page.textContent('h1')).toBe('404');
 	});
 
+	test('dynamic fallthrough of layout', async ({ page, clicknav }) => {
+		await page.goto('/routing/fallthrough-layout/okay');
+		expect(await page.textContent('h1')).toBe('foo is okay');
+
+		await clicknav('[href="/routing/fallthrough-layout/ok"]');
+		expect(await page.textContent('h1')).toBe('xyz is ok');
+
+		await clicknav('[href="/routing/fallthrough-layout/notok"]');
+		expect(await page.textContent('h1')).toBe('404');
+	});
+
 	test('last parameter in a segment wins in cases of ambiguity', async ({ page, clicknav }) => {
 		await page.goto('/routing/split-params');
 		await clicknav('[href="/routing/split-params/x-y-z"]');

diff --git a/packages/kit/types/endpoint.d.ts b/packages/kit/types/endpoint.d.ts
@@ -1,5 +1,5 @@
 import { ServerRequest } from './hooks';
-import { JSONString, MaybePromise, ResponseHeaders } from './helper';
+import { JSONString, MaybePromise, ResponseHeaders, Either, Fallthrough } from './helper';
 
 type DefaultBody = JSONString | Uint8Array;
 
@@ -14,5 +14,7 @@ export interface RequestHandler<
 	Input = unknown,
 	Output extends DefaultBody = DefaultBody
 > {
-	(request: ServerRequest<Locals, Input>): MaybePromise<void | EndpointOutput<Output>>;
+	(request: ServerRequest<Locals, Input>): MaybePromise<
+		Either<EndpointOutput<Output>, Fallthrough>
+	>;
 }
diff --git a/packages/kit/types/helper.d.ts b/packages/kit/types/helper.d.ts
@@ -39,3 +39,15 @@ export type RecursiveRequired<T> = {
 		? Extract<T[K], Function> // only take the Function type.
 		: T[K]; // Use the exact type for everything else
 };
+
+type Only<T, U> = {
+	[P in keyof T]: T[P];
+} & {
+	[P in keyof U]?: never;
+};
+
+export type Either<T, U> = Only<T, U> | Only<U, T>;
+
+export interface Fallthrough {
+	fallthrough: true;
+}
diff --git a/packages/kit/types/internal.d.ts b/packages/kit/types/internal.d.ts
@@ -10,6 +10,7 @@ import {
 	ServerResponse
 } from './hooks';
 import { Load } from './page';
+import { Either, Fallthrough } from './helper';
 
 type PageId = string;
 
@@ -219,13 +220,16 @@ export interface BuildData {
 	entries: string[];
 }
 
-export interface NormalizedLoadOutput {
-	status: number;
-	error?: Error;
-	redirect?: string;
-	props?: Record<string, any> | Promise<Record<string, any>>;
-	stuff?: Record<string, any>;
-	maxage?: number;
-}
+export type NormalizedLoadOutput = Either<
+	{
+		status: number;
+		error?: Error;
+		redirect?: string;
+		props?: Record<string, any> | Promise<Record<string, any>>;
+		stuff?: Record<string, any>;
+		maxage?: number;
+	},
+	Fallthrough
+>;
 
 export type TrailingSlash = 'never' | 'always' | 'ignore';
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,5 @@ export function get({ params }) { @@
     			body: { type: 'animal' }
     		};
     	}
+    	return { fallthrough: true };
     }