[feat] add form prop to page store (#6986)

Closes #6701

Author: sphinxc0re

.changeset/healthy-lions-attend.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Added form property to \$page store

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

@@ -438,7 +438,11 @@ export function create_client({ target, base, trailing_slash }) {
 		}
 
 		const page_changed =
-			!current.url || url.href !== current.url.href || current.error !== error || data_changed;
+			!current.url ||
+			url.href !== current.url.href ||
+			current.error !== error ||
+			form !== undefined ||
+			data_changed;
 
 		if (page_changed) {
 			result.props.page = {
@@ -447,6 +451,7 @@ export function create_client({ target, base, trailing_slash }) {
 				routeId: route && route.id,
 				status,
 				url,
+				form,
 				// The whole page store is updated, but this way the object reference stays the same
 				data: data_changed ? data : page.data
 			};
@@ -1203,13 +1208,10 @@ export function create_client({ target, base, trailing_slash }) {
 				goto(result.location, {}, []);
 			} else {
 				/** @type {Record<string, any>} */
-				const props = { form: result.data };
-
-				if (result.status !== page.status) {
-					page = { ...page, status: result.status };
-					props.page = page;
-				}
-
+				const props = {
+					form: result.data,
+					page: { ...page, form: result.data, status: result.status }
+				};
 				const post_update = pre_update();
 				root.$set(props);
 				post_update();

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

@@ -98,7 +98,8 @@ export async function render_response({
 			routeId: event.routeId,
 			status,
 			url: event.url,
-			data
+			data,
+			form: form_value
 		};
 
 		// TODO remove this for 1.0

packages/kit/test/apps/basics/src/routes/actions/enhance/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { enhance } from '$app/forms';
+	import { page } from '$app/stores';
 
 	/** @type {import('./$types').ActionData} */
 	export let form;
@@ -9,7 +10,8 @@
 	let count = 0;
 </script>
 
-<pre>{JSON.stringify(form)}</pre>
+<pre class="formdata1">{JSON.stringify(form)}</pre>
+<pre class="formdata2">{JSON.stringify($page.form)}</pre>
 
 <form method="post" action="?/login" use:enhance>
 	<input name="username" type="text" />

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

@@ -1819,15 +1819,17 @@ test.describe('Actions', () => {
 	test('use:enhance', async ({ page }) => {
 		await page.goto('/actions/enhance');
 
-		expect(await page.textContent('pre')).toBe(JSON.stringify(null));
+		expect(await page.textContent('pre.formdata1')).toBe(JSON.stringify(null));
+		expect(await page.textContent('pre.formdata2')).toBe(JSON.stringify(null));
 
 		await page.type('input[name="username"]', 'foo');
 		await Promise.all([
 			page.waitForRequest((request) => request.url().includes('/actions/enhance')),
 			page.click('button.form1')
 		]);
 
-		await expect(page.locator('pre')).toHaveText(JSON.stringify({ result: 'foo' }));
+		await expect(page.locator('pre.formdata1')).toHaveText(JSON.stringify({ result: 'foo' }));
+		await expect(page.locator('pre.formdata2')).toHaveText(JSON.stringify({ result: 'foo' }));
 	});
 
 	test('use:enhance abort controller', async ({ page, javaScriptEnabled }) => {
@@ -1850,15 +1852,17 @@ test.describe('Actions', () => {
 	test('use:enhance button with formAction', async ({ page, app }) => {
 		await page.goto('/actions/enhance');
 
-		expect(await page.textContent('pre')).toBe(JSON.stringify(null));
+		expect(await page.textContent('pre.formdata1')).toBe(JSON.stringify(null));
 
 		await page.type('input[name="username"]', 'foo');
 		await Promise.all([
 			page.waitForRequest((request) => request.url().includes('/actions/enhance')),
 			page.click('button.form1-register')
 		]);
 
-		await expect(page.locator('pre')).toHaveText(JSON.stringify({ result: 'register: foo' }));
+		await expect(page.locator('pre.formdata1')).toHaveText(
+			JSON.stringify({ result: 'register: foo' })
+		);
 	});
 
 	test('redirect', async ({ page }) => {

packages/kit/types/index.d.ts

@@ -302,6 +302,7 @@ export interface Page<Params extends Record<string, string> = Record<string, str
 	status: number;
 	error: App.Error | null;
 	data: App.PageData & Record<string, any>;
+	form: any;
 }
 
 export interface ParamMatcher {