.changeset/heavy-phones-build.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Accumulate data from parent layouts into `export let data`

.changeset/pre.json

@@ -392,6 +392,7 @@
     "heavy-lamps-explode",
     "heavy-moons-admire",
     "heavy-papayas-smile",
+    "heavy-phones-build",
     "heavy-turkeys-report",
     "heavy-ways-agree",
     "hip-ears-reflect",

documentation/docs/03-routing.md

@@ -279,6 +279,18 @@ export function load() {
 
 Unlike `+page.js`, `+layout.js` cannot export `prerender`, `hydrate` and `router`, as these are page-level options.
 
+Data returned from a layout's `load` function is also available to all its child pages:
+
+```svelte
+/// file: src/routes/settings/profile/+page.svelte
+<script>
+	/** @type {import('./$types').PageData} */
+	export let data;
+
+	console.log(data.sections); // [{ slug: 'profile', title: 'Profile' }, ...]
+</script>
+```
+
 > Often, layout data is unchanged when navigating between pages. SvelteKit will intelligently re-run [`load`](/docs/load) functions when necessary.
 
 #### +layout.server.js

packages/kit/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sveltejs/kit
 
+## 1.0.0-next.423
+
+### Patch Changes
+
+- Accumulate data from parent layouts into `export let data` ([#6050](https://github.com/sveltejs/kit/pull/6050))
+
 ## 1.0.0-next.422
 
 ### Patch Changes

packages/kit/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sveltejs/kit",
-	"version": "1.0.0-next.422",
+	"version": "1.0.0-next.423",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/sveltejs/kit",

packages/kit/src/core/sync/write_types.js

@@ -425,7 +425,7 @@ function process_node(ts, node, outdir, params, groups) {
 			written_proxies.push(write(`${outdir}/proxy${basename}`, proxy.code));
 		}
 
-		server_data = get_data_type(node.server, 'load', 'null', proxy);
+		server_data = get_data_type(node.server, 'null', proxy);
 		server_load = `Kit.ServerLoad<${params}, ${get_parent_type('LayoutServerData')}, OutputData>`;
 
 		if (proxy) {
@@ -449,36 +449,41 @@ function process_node(ts, node, outdir, params, groups) {
 		server_data = 'null';
 	}
 
+	const parent_type = get_parent_type('LayoutData');
+
 	if (node.shared) {
 		const content = fs.readFileSync(node.shared, 'utf8');
 		const proxy = tweak_types(ts, content, shared_names);
 		if (proxy?.modified) {
 			written_proxies.push(write(`${outdir}/proxy${path.basename(node.shared)}`, proxy.code));
 		}
 
-		data = get_data_type(node.shared, 'load', server_data, proxy);
-		load = `Kit.Load<${params}, ${server_data}, ${get_parent_type('LayoutData')}, OutputData>`;
+		const type = get_data_type(node.shared, `${parent_type} & ${server_data}`, proxy);
+
+		data = `Omit<${parent_type}, keyof ${type}> & ${type}`;
+		load = `Kit.Load<${params}, ${server_data}, ${parent_type}, OutputData>`;
+	} else if (server_data === 'null') {
+		data = parent_type;
 	} else {
-		data = server_data;
+		data = `Omit<${parent_type}, keyof ${server_data}> & ${server_data}`;
 	}
 
 	return { data, server_data, load, server_load, errors, written_proxies };
 
 	/**
 	 * @param {string} file_path
-	 * @param {string} method
 	 * @param {string} fallback
 	 * @param {Proxy} proxy
 	 */
-	function get_data_type(file_path, method, fallback, proxy) {
+	function get_data_type(file_path, fallback, proxy) {
 		if (proxy) {
-			if (proxy.exports.includes(method)) {
+			if (proxy.exports.includes('load')) {
 				// If the file wasn't tweaked, we can use the return type of the original file.
 				// The advantage is that type updates are reflected without saving.
 				const from = proxy.modified
 					? `./proxy${replace_ext_with_js(path.basename(file_path))}`
 					: path_to_original(outdir, file_path);
-				return `Kit.AwaitedProperties<Awaited<ReturnType<typeof import('${from}').${method}>>>`;
+				return `Kit.AwaitedProperties<Awaited<ReturnType<typeof import('${from}').load>>>`;
 			} else {
 				return fallback;
 			}

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

@@ -403,10 +403,10 @@ export function create_client({ target, base, trailing_slash }) {
 		let data = {};
 		let data_changed = false;
 		for (let i = 0; i < filtered.length; i += 1) {
-			Object.assign(data, filtered[i].data);
+			data = { ...data, ...filtered[i].data };
 			// Only set props if the node actually updated. This prevents needless rerenders.
-			if (!current.branch.some((node) => node === filtered[i])) {
-				result.props[`data_${i}`] = filtered[i].data;
+			if (data_changed || !current.branch.some((node) => node === filtered[i])) {
+				result.props[`data_${i}`] = data;
 				data_changed = true;
 			}
 		}

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

@@ -83,18 +83,31 @@ export async function render_response({
 				navigating: writable(null),
 				updated
 			},
-			/** @type {import('types').Page} */
-			page: {
-				error,
-				params: /** @type {Record<string, any>} */ (event.params),
-				routeId: event.routeId,
-				status,
-				url: state.prerendering ? new PrerenderingURL(event.url) : event.url,
-				data: branch.reduce((acc, { data }) => (Object.assign(acc, data), acc), {})
-			},
 			components: await Promise.all(branch.map(({ node }) => node.component()))
 		};
 
+		let data = {};
+
+		// props_n (instead of props[n]) makes it easy to avoid
+		// unnecessary updates for layout components
+		for (let i = 0; i < branch.length; i += 1) {
+			data = { ...data, ...branch[i].data };
+			props[`data_${i}`] = data;
+		}
+
+		props.page = {
+			error,
+			params: /** @type {Record<string, any>} */ (event.params),
+			routeId: event.routeId,
+			status,
+			url: state.prerendering ? new PrerenderingURL(event.url) : event.url,
+			data
+		};
+
+		if (validation_errors) {
+			props.errors = validation_errors;
+		}
+
 		// TODO remove this for 1.0
 		/**
 		 * @param {string} property
@@ -112,16 +125,6 @@ export async function render_response({
 		print_error('path', 'pathname');
 		print_error('query', 'searchParams');
 
-		// props_n (instead of props[n]) makes it easy to avoid
-		// unnecessary updates for layout components
-		for (let i = 0; i < branch.length; i += 1) {
-			props[`data_${i}`] = branch[i].data;
-		}
-
-		if (validation_errors) {
-			props.errors = validation_errors;
-		}
-
 		rendered = options.root.render(props);
 
 		for (const { node } of branch) {

packages/kit/test/apps/basics/src/routes/load/accumulated/+page.svelte

@@ -0,0 +1,2 @@
+<a href="/load/accumulated/with-page-data">with page data</a>
+<a href="/load/accumulated/without-page-data">without page data</a>

packages/kit/test/apps/basics/src/routes/load/accumulated/with-page-data/+page.js

@@ -0,0 +1,6 @@
+/** @type {import('./$types').PageLoad} */
+export function load() {
+	return {
+		pagedata: 'pagedata'
+	};
+}

packages/kit/test/apps/basics/src/routes/load/accumulated/with-page-data/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+	/** @type {import('./$types').PageData} */
+	export let data;
+</script>
+
+<h1>foo.bar: {data.foo.bar}</h1>
+<h2>pagedata: {data.pagedata}</h2>

packages/kit/test/apps/basics/src/routes/load/accumulated/without-page-data/+page.svelte

@@ -0,0 +1,6 @@
+<script>
+	/** @type {import('./$types').PageData} */
+	export let data;
+</script>
+
+<h1>foo.bar: {data.foo.bar}</h1>

packages/kit/test/apps/basics/src/routes/shadowed/parent/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-    export let data;
+	export let data;
 </script>
 
 <h2>Layout data: {JSON.stringify(data)}</h2>

packages/kit/test/apps/basics/src/routes/shadowed/parent/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-    export let data;
+	export let data;
 </script>
 
 <p>Page data: {JSON.stringify(data)}</p>

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

@@ -360,13 +360,6 @@ test.describe('Load', () => {
 		expect(await page.textContent('h1')).toBe("I didn't break!");
 	});
 
-	test("layout props don't cause rerender when unchanged", async ({ page, clicknav }) => {
-		await page.goto('/load/layout-props/a');
-		expect(await page.textContent('h1')).toBe('1');
-		await clicknav('[href="/load/layout-props/b"]');
-		expect(await page.textContent('h1')).toBe('1');
-	});
-
 	if (process.env.DEV) {
 		test('using window.fetch causes a warning', async ({ page }) => {
 			const port = 5173;

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

@@ -260,21 +260,27 @@ test.describe('Shadowed pages', () => {
 
 	test('Parent data is present', async ({ page, clicknav }) => {
 		await page.goto('/shadowed/parent');
-		await expect(page.locator('h2')).toHaveText('Layout data: {"layout":"layout"}');
+		await expect(page.locator('h2')).toHaveText(
+			'Layout data: {"foo":{"bar":"Custom layout"},"layout":"layout"}'
+		);
 		await expect(page.locator('p')).toHaveText(
-			'Page data: {"page":"page","data":{"rootlayout":"rootlayout","layout":"layout"}}'
+			'Page data: {"foo":{"bar":"Custom layout"},"layout":"layout","page":"page","data":{"rootlayout":"rootlayout","layout":"layout"}}'
 		);
 
 		await clicknav('[href="/shadowed/parent?test"]');
-		await expect(page.locator('h2')).toHaveText('Layout data: {"layout":"layout"}');
+		await expect(page.locator('h2')).toHaveText(
+			'Layout data: {"foo":{"bar":"Custom layout"},"layout":"layout"}'
+		);
 		await expect(page.locator('p')).toHaveText(
-			'Page data: {"page":"page","data":{"rootlayout":"rootlayout","layout":"layout"}}'
+			'Page data: {"foo":{"bar":"Custom layout"},"layout":"layout","page":"page","data":{"rootlayout":"rootlayout","layout":"layout"}}'
 		);
 
 		await clicknav('[href="/shadowed/parent/sub"]');
-		await expect(page.locator('h2')).toHaveText('Layout data: {"layout":"layout"}');
+		await expect(page.locator('h2')).toHaveText(
+			'Layout data: {"foo":{"bar":"Custom layout"},"layout":"layout"}'
+		);
 		await expect(page.locator('p')).toHaveText(
-			'Page data: {"sub":"sub","data":{"rootlayout":"rootlayout","layout":"layout"}}'
+			'Page data: {"foo":{"bar":"Custom layout"},"layout":"layout","sub":"sub","data":{"rootlayout":"rootlayout","layout":"layout"}}'
 		);
 	});
 
@@ -842,15 +848,6 @@ test.describe('Load', () => {
 		expect(await page.innerHTML('.raw')).toBe('{ "oddly" : { "formatted" : "json" } }');
 	});
 
-	test('does not leak props to other pages', async ({ page, clicknav }) => {
-		await page.goto('/load/props/about');
-		expect(await page.textContent('p')).toBe('Data: null');
-		await clicknav('[href="/load/props/"]');
-		expect(await page.textContent('p')).toBe('Data: Hello from Index!');
-		await clicknav('[href="/load/props/about"]');
-		expect(await page.textContent('p')).toBe('Data: null');
-	});
-
 	test('server-side fetch respects set-cookie header', async ({ page, context }) => {
 		await context.clearCookies();
 
@@ -878,6 +875,21 @@ test.describe('Load', () => {
 			})
 		).toBe('rgb(255, 0, 0)');
 	});
+
+	test('page without load has access to layout data', async ({ page, clicknav }) => {
+		await page.goto('/load/accumulated');
+
+		await clicknav('[href="/load/accumulated/without-page-data"]');
+		expect(await page.textContent('h1')).toBe('foo.bar: Custom layout');
+	});
+
+	test('page with load has access to layout data', async ({ page, clicknav }) => {
+		await page.goto('/load/accumulated');
+
+		await clicknav('[href="/load/accumulated/with-page-data"]');
+		expect(await page.textContent('h1')).toBe('foo.bar: Custom layout');
+		expect(await page.textContent('h2')).toBe('pagedata: pagedata');
+	});
 });
 
 test.describe('Method overrides', () => {