fix: correctly deserialize on the server (#13686)

fixes #13675

This PR adds an optional chain for when deserialize tries to access app.decoders since app is always undefined on the server and is only initialised on the client.

Author: teemingc

.changeset/silly-berries-repair.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: correctly run `deserialize` on the server

packages/kit/src/runtime/app/forms.js

@@ -1,10 +1,13 @@
 import * as devalue from 'devalue';
-import { DEV } from 'esm-env';
+import { BROWSER, DEV } from 'esm-env';
 import { invalidateAll } from './navigation.js';
-import { app, applyAction } from '../client/client.js';
+import { app as client_app, applyAction } from '../client/client.js';
+import { app as server_app } from '../server/app.js';
 
 export { applyAction };
 
+const decoders = BROWSER ? client_app.decoders : server_app?.decoders;
+
 /**
  * Use this function to deserialize the response from a form submission.
  * Usage:
@@ -31,7 +34,7 @@ export function deserialize(result) {
 	const parsed = JSON.parse(result);
 
 	if (parsed.data) {
-		parsed.data = devalue.parse(parsed.data, app.decoders);
+		parsed.data = devalue.parse(parsed.data, decoders);
 	}
 
 	return parsed;

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

@@ -0,0 +1,9 @@
+/** @type {{ decoders: Record<string, (data: any) => any> }} */
+export let app;
+
+/**
+ * @param {{ decoders: Record<string, (data: any) => any> }} value
+ */
+export function set_app(value) {
+	app = value;
+}

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

@@ -5,6 +5,7 @@ import { DEV } from 'esm-env';
 import { filter_private_env, filter_public_env } from '../../utils/env.js';
 import { prerendering } from '__sveltekit/environment';
 import { set_read_implementation, set_manifest } from '__sveltekit/server';
+import { set_app } from './app.js';
 
 /** @type {ProxyHandler<{ type: 'public' | 'private' }>} */
 const prerender_env_handler = {
@@ -83,6 +84,12 @@ export class Server {
 					transport: module.transport || {}
 				};
 
+				set_app({
+					decoders: module.transport
+						? Object.fromEntries(Object.entries(module.transport).map(([k, v]) => [k, v.decode]))
+						: {}
+				});
+
 				if (module.init) {
 					await module.init();
 				}
@@ -97,6 +104,10 @@ export class Server {
 						reroute: () => {},
 						transport: {}
 					};
+
+					set_app({
+						decoders: {}
+					});
 				} else {
 					throw error;
 				}

packages/kit/test/apps/basics/src/routes/serialization-form/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	let { form } = $props();
+	const { form } = $props();
 </script>
 
 <form method="POST">

packages/kit/test/apps/basics/src/routes/serialization-form/server-deserialize/+server.js

@@ -0,0 +1,20 @@
+import { deserialize } from '$app/forms';
+
+export async function GET({ fetch }) {
+	const response = await fetch('/serialization-form', {
+		method: 'POST',
+		body: new FormData(),
+		headers: {
+			'x-sveltekit-action': 'true'
+		}
+	});
+	const result = deserialize(await response.text());
+
+	if (result.type === 'success' && result.data) {
+		return Response.json({
+			data: /** @type {import('../../../lib').Foo} */ (result.data.foo).bar()
+		});
+	}
+
+	return Response.json({});
+}

packages/kit/test/apps/basics/src/routes/serialization-form2/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 
-	let { form } = $props();
+	const { form } = $props();
 </script>
 
 <form method="POST" use:enhance>

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

@@ -639,7 +639,7 @@ test.describe('Static files', () => {
 test.describe('setHeaders', () => {
 	test('allows multiple set-cookie headers with different values', async ({ page }) => {
 		const response = await page.goto('/headers/set-cookie/sub');
-		const cookies = (await response.allHeaders())['set-cookie'];
+		const cookies = response ? (await response.allHeaders())['set-cookie'] : '';
 
 		expect(cookies).toMatch('cookie1=value1');
 		expect(cookies).toMatch('cookie2=value2');
@@ -649,7 +649,7 @@ test.describe('setHeaders', () => {
 test.describe('cookies', () => {
 	test('cookie.serialize created correct cookie header string', async ({ page }) => {
 		const response = await page.goto('/cookies/serialize');
-		const cookies = await response.headerValue('set-cookie');
+		const cookies = response ? await response.headerValue('set-cookie') : '';
 
 		expect(cookies).toMatch('before=before');
 		expect(cookies).toMatch('after=after');
@@ -729,3 +729,10 @@ test.describe('getRequestEvent', () => {
 		expect(await response.text()).toBe('hello from hooks.server.js');
 	});
 });
+
+test.describe('$app/forms', () => {
+	test('deserialize works on the server', async ({ request }) => {
+		const response = await request.get('/serialization-form/server-deserialize');
+		expect(await response.json()).toEqual({ data: 'It works!' });
+	});
+});