[feat] adding returned stuff from pages to $page store

.changeset/fair-pets-bake.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Add returned stuff from pages into \$page store

documentation/docs/03-loading.md

@@ -157,4 +157,4 @@ If the `load` function returns a `props` object, the props will be passed to the
 
 This will be merged with any existing `stuff` and passed to the `load` functions of subsequent layout and page components.
 
-This only applies to layout components, _not_ page components.
+The combined `stuff` is available to components using the [page store](#modules-$app-stores) as `$page.stuff`, providing a mechanism for pages to pass data 'upward' to layouts.

documentation/docs/05-modules.md

@@ -58,7 +58,7 @@ Because of that, the stores are not free-floating objects: they must be accessed
 The stores themselves attach to the correct context at the point of subscription, which means you can import and use them directly in components without boilerplate. However, it still needs to be called synchronously on component or page initialisation when the `$`-prefix isn't used. Use `getStores` to safely `.subscribe` asynchronously instead.
 
 - `navigating` is a [readable store](https://svelte.dev/tutorial/readable-stores). When navigating starts, its value is `{ from, to }`, where `from` and `to` are both [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) instances. When navigating finishes, its value reverts to `null`.
-- `page` contains an object with the current [`url`](https://developer.mozilla.org/en-US/docs/Web/API/URL) and [`params`](#loading-input-params).
+- `page` contains an object with the current [`url`](https://developer.mozilla.org/en-US/docs/Web/API/URL), [`params`](#loading-input-params) and [`stuff`](#loading-output-stuff).
 - `session` is a [writable store](https://svelte.dev/tutorial/writable-stores) whose initial value is whatever was returned from [`getSession`](#hooks-getsession). It can be written to, but this will _not_ cause changes to persist on the server — this is something you must implement yourself.
 
 ### $lib

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

@@ -196,7 +196,14 @@ export class Renderer {
 
 			result = error_args
 				? await this._load_error(error_args)
-				: await this._get_navigation_result_from_branch({ url, params, branch, status, error });
+				: await this._get_navigation_result_from_branch({
+						url,
+						params,
+						stuff,
+						branch,
+						status,
+						error
+				  });
 		} catch (e) {
 			if (error) throw e;
 
@@ -420,12 +427,13 @@ export class Renderer {
 	 * @param {{
 	 *   url: URL;
 	 *   params: Record<string, string>;
+	 *   stuff: Record<string, any>;
 	 *   branch: Array<import('./types').BranchNode | undefined>;
 	 *   status: number;
 	 *   error?: Error;
 	 * }} opts
 	 */
-	async _get_navigation_result_from_branch({ url, params, branch, status, error }) {
+	async _get_navigation_result_from_branch({ url, params, stuff, branch, status, error }) {
 		const filtered = /** @type {import('./types').BranchNode[] } */ (branch.filter(Boolean));
 		const redirect = filtered.find((f) => f.loaded && f.loaded.redirect);
 
@@ -449,7 +457,7 @@ export class Renderer {
 		}
 
 		if (!this.current.url || url.href !== this.current.url.href) {
-			result.props.page = { url, params, status, error };
+			result.props.page = { url, params, status, error, stuff };
 
 			// TODO remove this for 1.0
 			/**
@@ -716,6 +724,13 @@ export class Renderer {
 								continue;
 							}
 
+							if (error_loaded && error_loaded.loaded && error_loaded.loaded.stuff) {
+								stuff = {
+									...stuff,
+									...error_loaded.loaded.stuff
+								};
+							}
+
 							branch = branch.slice(0, j + 1).concat(error_loaded);
 							break load;
 						} catch (e) {
@@ -741,7 +756,14 @@ export class Renderer {
 			}
 		}
 
-		return await this._get_navigation_result_from_branch({ url, params, branch, status, error });
+		return await this._get_navigation_result_from_branch({
+			url,
+			params,
+			stuff,
+			branch,
+			status,
+			error
+		});
 	}
 
 	/**
@@ -761,19 +783,25 @@ export class Renderer {
 			params,
 			stuff: {}
 		});
+		const error_node = await this._load_node({
+			status,
+			error,
+			module: await this.fallback[1],
+			url,
+			params,
+			stuff: (node && node.loaded && node.loaded.stuff) || {}
+		});
 
-		const branch = [
-			node,
-			await this._load_node({
-				status,
-				error,
-				module: await this.fallback[1],
-				url,
-				params,
-				stuff: (node && node.loaded && node.loaded.stuff) || {}
-			})
-		];
+		const branch = [node, error_node];
+		const stuff = { ...node?.loaded?.stuff, ...error_node?.loaded?.stuff };
 
-		return await this._get_navigation_result_from_branch({ url, params, branch, status, error });
+		return await this._get_navigation_result_from_branch({
+			url,
+			params,
+			stuff,
+			branch,
+			status,
+			error
+		});
 	}
 }

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

@@ -70,6 +70,7 @@ export async function respond(incoming, options, state = {}) {
 						params: request.params,
 						options,
 						$session: await options.hooks.getSession(request),
+						stuff: {},
 						page_config: { ssr: false, router: true, hydrate: true },
 						status: 200,
 						branch: []

packages/kit/src/runtime/server/page/render.js

@@ -17,6 +17,7 @@ import { s } from '../../../utils/misc.js';
  *   error?: Error,
  *   url: URL;
  *   params: Record<string, string>
+ *   stuff: Record<string, any>;
  * }} opts
  */
 export async function render_response({
@@ -27,7 +28,8 @@ export async function render_response({
 	status,
 	error,
 	url,
-	params
+	params,
+	stuff
 }) {
 	const css = new Set(options.manifest._.entry.css);
 	const js = new Set(options.manifest._.entry.js);
@@ -68,7 +70,7 @@ export async function render_response({
 				navigating: writable(null),
 				session
 			},
-			page: { url, params, status, error },
+			page: { url, params, status, error, stuff },
 			components: branch.map(({ node }) => node.module.default)
 		};
 

packages/kit/src/runtime/server/page/respond.js

@@ -73,9 +73,9 @@ export async function respond(opts) {
 	/** @type {string[]} */
 	let set_cookie_headers = [];
 
-	ssr: if (page_config.ssr) {
-		let stuff = {};
+	let stuff = {};
 
+	ssr: if (page_config.ssr) {
 		for (let i = 0; i < nodes.length; i += 1) {
 			const node = nodes[i];
 
@@ -158,6 +158,7 @@ export async function respond(opts) {
 
 								page_config = get_page_config(error_node.module, options);
 								branch = branch.slice(0, j + 1).concat(error_loaded);
+								stuff = { ...node_loaded.stuff, ...error_loaded.stuff };
 								break ssr;
 							} catch (err) {
 								const e = coalesce_to_error(err);
@@ -199,6 +200,7 @@ export async function respond(opts) {
 		return with_cookies(
 			await render_response({
 				...opts,
+				stuff,
 				url: request.url,
 				page_config,
 				status,

packages/kit/src/runtime/server/page/respond_with_error.js

@@ -27,8 +27,7 @@ export async function respond_with_error({ request, options, state, $session, st
 		/** @type {Record<string, string>} */
 		const params = {}; // error page has no params
 
-		// error pages don't fall through, so we know it's not undefined
-		const loaded = /** @type {Loaded} */ (
+		const layout_loaded = /** @type {Loaded} */ (
 			await load_node({
 				request,
 				options,
@@ -44,26 +43,23 @@ export async function respond_with_error({ request, options, state, $session, st
 			})
 		);
 
-		const branch = [
-			loaded,
-			/** @type {Loaded} */ (
-				await load_node({
-					request,
-					options,
-					state,
-					route: null,
-					url: request.url,
-					params,
-					node: default_error,
-					$session,
-					stuff: loaded ? loaded.stuff : {},
-					prerender_enabled: is_prerender_enabled(options, default_error, state),
-					is_error: true,
-					status,
-					error
-				})
-			)
-		];
+		const error_loaded = /** @type {Loaded} */ (
+			await load_node({
+				request,
+				options,
+				state,
+				route: null,
+				url: request.url,
+				params,
+				node: default_error,
+				$session,
+				stuff: layout_loaded ? layout_loaded.stuff : {},
+				prerender_enabled: is_prerender_enabled(options, default_error, state),
+				is_error: true,
+				status,
+				error
+			})
+		);
 
 		return await render_response({
 			options,
@@ -73,9 +69,10 @@ export async function respond_with_error({ request, options, state, $session, st
 				router: options.router,
 				ssr: options.ssr
 			},
+			stuff: error_loaded.stuff,
 			status,
 			error,
-			branch,
+			branch: [layout_loaded, error_loaded],
 			url: request.url,
 			params
 		});

packages/kit/test/apps/basics/src/routes/store/stuff/[item].svelte

@@ -0,0 +1,16 @@
+<script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
+	export function load({ params }) {
+		if (params.item === 'xxx') {
+			throw new Error('Params = xxx');
+		}
+
+		return {
+			stuff: {
+				page: params.item,
+				value: 456
+			},
+			error: params.item === 'yyy' ? 'Params = yyy' : undefined
+		};
+	}
+</script>

packages/kit/test/apps/basics/src/routes/store/stuff/__error.svelte

@@ -0,0 +1,11 @@
+<script context="module">
+	/** @type {import('@sveltejs/kit').ErrorLoad} */
+	export function load({ error }) {
+		return {
+			stuff: {
+				error: error?.message,
+				value: 789
+			}
+		};
+	}
+</script>

packages/kit/test/apps/basics/src/routes/store/stuff/__layout.svelte

@@ -0,0 +1,20 @@
+<script context="module">
+	export function load() {
+		return {
+			stuff: {
+				name: 'SvelteKit',
+				value: 123
+			}
+		};
+	}
+</script>
+
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<div id="store-stuff">{JSON.stringify($page.stuff)}</div>
+
+<nav><a href="/store/stuff/xxx">xxx</a> <a href="/store/stuff/yyy">yyy</a> <a href="/store/stuff/zzz">zzz</a></nav>
+
+<slot />

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

@@ -1115,6 +1115,29 @@ test.describe.parallel('$app/stores', () => {
 		expect(oops).toBeUndefined();
 	});
 
+	test('page store contains stuff', async ({ page, clicknav }) => {
+		await page.goto('/store/stuff/www');
+
+		expect(await page.textContent('#store-stuff')).toBe(
+			JSON.stringify({ name: 'SvelteKit', value: 456, page: 'www' })
+		);
+
+		await clicknav('a[href="/store/stuff/zzz"]');
+		expect(await page.textContent('#store-stuff')).toBe(
+			JSON.stringify({ name: 'SvelteKit', value: 456, page: 'zzz' })
+		);
+
+		await clicknav('a[href="/store/stuff/xxx"]');
+		expect(await page.textContent('#store-stuff')).toBe(
+			JSON.stringify({ name: 'SvelteKit', value: 789, error: 'Params = xxx' })
+		);
+
+		await clicknav('a[href="/store/stuff/yyy"]');
+		expect(await page.textContent('#store-stuff')).toBe(
+			JSON.stringify({ name: 'SvelteKit', value: 789, error: 'Params = yyy' })
+		);
+	});
+
 	test('navigating store contains from and to', async ({ app, page, javaScriptEnabled }) => {
 		await page.goto('/store/navigating/a');
 

packages/kit/types/ambient-modules.d.ts

@@ -110,6 +110,7 @@ declare module '$app/stores' {
 	export const page: Readable<{
 		url: URL;
 		params: Record<string, string>;
+		stuff: Record<string, any>;
 		status: number;
 		error: Error | null;
 	}>;