feat: typed params prop for page/layout components (#13999)

Author: Rich-Harris

.changeset/long-bars-rush.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': minor
+---
+
+feat: typed `params` prop for page/layout components

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

@@ -36,25 +36,25 @@ export function write_root(manifest_data, output) {
 					isSvelte5Plus()
 						? dedent`{@const Pyramid_${l} = constructors[${l}]}
 						<!-- svelte-ignore binding_property_non_reactive -->
-						<Pyramid_${l} bind:this={components[${l}]} data={data_${l}} {form}>
+						<Pyramid_${l} bind:this={components[${l}]} data={data_${l}} {form} params={page.params}>
 							${pyramid}
 						</Pyramid_${l}>`
-						: dedent`<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}}>
+						: dedent`<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} params={page.params}>
 					${pyramid}
 				</svelte:component>`
 				}
-				
+
 			{:else}
 				${
 					isSvelte5Plus()
 						? dedent`
 					{@const Pyramid_${l} = constructors[${l}]}
 					<!-- svelte-ignore binding_property_non_reactive -->
-					<Pyramid_${l} bind:this={components[${l}]} data={data_${l}} {form} />
+					<Pyramid_${l} bind:this={components[${l}]} data={data_${l}} {form} params={page.params} />
 					`
-						: dedent`<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} />`
+						: dedent`<svelte:component this={constructors[${l}]} bind:this={components[${l}]} data={data_${l}} {form} params={page.params} />`
 				}
-				
+
 			{/if}
 		`;
 	}

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

@@ -272,9 +272,11 @@ function update_types(config, routes, route, to_delete = new Set()) {
 		}
 
 		if (route.leaf.server) {
-			exports.push('export type PageProps = { data: PageData; form: ActionData }');
+			exports.push(
+				'export type PageProps = { params: RouteParams; data: PageData; form: ActionData }'
+			);
 		} else {
-			exports.push('export type PageProps = { data: PageData }');
+			exports.push('export type PageProps = { params: RouteParams; data: PageData }');
 		}
 	}
 
@@ -341,7 +343,7 @@ function update_types(config, routes, route, to_delete = new Set()) {
 		if (proxies.universal?.modified) to_delete.delete(proxies.universal.file_name);
 
 		exports.push(
-			'export type LayoutProps = { data: LayoutData; children: import("svelte").Snippet }'
+			'export type LayoutProps = { params: LayoutParams; data: LayoutData; children: import("svelte").Snippet }'
 		);
 	}
 

packages/kit/test/apps/basics/src/routes/params-prop/+layout.svelte

@@ -0,0 +1,8 @@
+<script>
+	let { children } = $props();
+</script>
+
+<a href="/params-prop/123">123</a>
+<a href="/params-prop/456">456</a>
+
+{@render children()}

packages/kit/test/apps/basics/src/routes/params-prop/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	let { params } = $props();
+</script>
+
+<p>x: {params.x}</p>

packages/kit/test/apps/basics/src/routes/params-prop/[x]/+page.svelte

@@ -1556,3 +1556,15 @@ test.describe('getRequestEvent', () => {
 		expect(await page.textContent('h1')).toBe('Crashing now (500 hello from hooks.server.js)');
 	});
 });
+
+test.describe('params prop', () => {
+	test('params prop is passed to the page', async ({ page, clicknav }) => {
+		await page.goto('/params-prop');
+
+		await clicknav('[href="/params-prop/123"]');
+		await expect(page.locator('p')).toHaveText('x: 123');
+
+		await clicknav('[href="/params-prop/456"]');
+		await expect(page.locator('p')).toHaveText('x: 456');
+	});
+});