guarantee that $page.route has the correct shape (#8359)

* guarantee that $page.route has the correct shape - fixes #8351 * tweak changeset * simplify
sveltejs · Jan 6, 2023 · 4ff91b0 · 4ff91b0
1 parent 78ef11d
commit 4ff91b0
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/.changeset/quiet-feet-compare.md b/.changeset/quiet-feet-compare.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Guarantee that `$page.route` has the correct shape
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
@@ -286,7 +286,7 @@ export function create_client({ target, base }) {
 				);
 				return false;
 			}
-		} else if (navigation_result.props?.page?.status >= 400) {
+		} else if (/** @type {number} */ (navigation_result.props?.page?.status) >= 400) {
 			const updated = await stores.updated.check();
 			if (updated) {
 				await native_navigation(url);
@@ -369,7 +369,7 @@ export function create_client({ target, base }) {
 		const style = document.querySelector('style[data-sveltekit]');
 		if (style) style.remove();
 
-		page = result.props.page;
+		page = /** @type {import('types').Page} */ (result.props.page);
 
 		root = new Root({
 			target,
@@ -435,6 +435,7 @@ export function create_client({ target, base }) {
 				route
 			},
 			props: {
+				// @ts-ignore Somehow it's getting SvelteComponent and SvelteComponentDev mixed up
 				components: filtered.map((branch_node) => branch_node.node.component)
 			}
 		};
@@ -473,7 +474,9 @@ export function create_client({ target, base }) {
 			result.props.page = {
 				error,
 				params,
-				route,
+				route: {
+					id: route?.id ?? null
+				},
 				status,
 				url: new URL(url),
 				form: form ?? null,

diff --git a/packages/kit/src/runtime/client/types.d.ts b/packages/kit/src/runtime/client/types.d.ts
@@ -8,7 +8,8 @@ import {
 	preloadCode,
 	preloadData
 } from '$app/navigation';
-import { CSRPageNode, CSRPageNodeLoader, CSRRoute, TrailingSlash, Uses } from 'types';
+import { SvelteComponent } from 'svelte';
+import { CSRPageNode, CSRPageNodeLoader, CSRRoute, Page, TrailingSlash, Uses } from 'types';
 
 export interface Client {
 	// public API, exposed via $app/navigation
@@ -58,7 +59,12 @@ export type NavigationRedirect = {
 export type NavigationFinished = {
 	type: 'loaded';
 	state: NavigationState;
-	props: Record<string, any>;
+	props: {
+		components: Array<typeof SvelteComponent>;
+		page?: Page;
+		form?: Record<string, any> | null;
+		[key: `data_${number}`]: Record<string, any>;
+	};
 };
 
 export type BranchNode = {