fix: deserialise streamed custom types (#14261)

* add test

* add test for single apps

* wrap statement in app import

* add test for inlined apps

* format

* changeset

* fix lint errors

* fix

* leaner payloads

* fix

* tweak

---------

Co-authored-by: Rich Harris <[email protected]>

Author: eltigerchino

.changeset/brown-seals-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: correctly decode custom types streamed from a server load function

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

@@ -33,7 +33,7 @@ export function deserialize(result) {
 
 	if (parsed.data) {
 		// the decoders should never be initialised at the top-level because `app`
-		// will not initialised yet if `kit.output.bundleStrategy` is 'single' or 'inline'
+		// will not be initialised yet if `kit.output.bundleStrategy` is 'single' or 'inline'
 		parsed.data = devalue.parse(parsed.data, BROWSER ? client_app.decoders : server_app.decoders);
 	}
 

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

@@ -13,3 +13,5 @@ import * as app from '__sveltekit/manifest';
 export function start(element, options) {
 	void kit.start(app, element, options);
 }
+
+export { app };

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

@@ -379,9 +379,28 @@ export async function render_response({
 							deferred.set(id, { fulfil, reject });
 						})`);
 
+			let app_declaration = '';
+
+			if (Object.keys(options.hooks.transport).length > 0) {
+				if (client.inline) {
+					app_declaration = `const app = __sveltekit_${options.version_hash}.app.app;`;
+				} else if (client.app) {
+					app_declaration = `const app = await import(${s(prefixed(client.app))});`;
+				} else {
+					app_declaration = `const { app } = await import(${s(prefixed(client.start))});`;
+				}
+			}
+
+			const prelude = app_declaration
+				? `${app_declaration}
+							const [data, error] = fn(app);`
+				: `const [data, error] = fn();`;
+
 			// When resolving, the id might not yet be available due to the data
 			// be evaluated upon init of kit, so we use a timeout to retry
-			properties.push(`resolve: ({ id, data, error }) => {
+			properties.push(`resolve: async (id, fn) => {
+							${prelude}
+
 							const try_to_resolve = () => {
 								if (!deferred.has(id)) {
 									setTimeout(try_to_resolve, 0);
@@ -665,7 +684,7 @@ function get_data(event, event_state, options, nodes, csp, global) {
 
 						let str;
 						try {
-							str = devalue.uneval({ id, data, error }, replacer);
+							str = devalue.uneval(error ? [, error] : [data], replacer);
 						} catch {
 							error = await handle_error_and_jsonify(
 								event,
@@ -674,11 +693,13 @@ function get_data(event, event_state, options, nodes, csp, global) {
 								new Error(`Failed to serialize promise while rendering ${event.route.id}`)
 							);
 							data = undefined;
-							str = devalue.uneval({ id, data, error }, replacer);
+							str = devalue.uneval([, error], replacer);
 						}
 
 						const nonce = csp.script_needs_nonce ? ` nonce="${csp.nonce}"` : '';
-						push(`<script${nonce}>${global}.resolve(${str})</script>\n`);
+						push(
+							`<script${nonce}>${global}.resolve(${id}, ${str.includes('app.decode') ? `(app) => ${str}` : `() => ${str}`})</script>\n`
+						);
 						if (count === 0) done();
 					}
 				);

packages/kit/test/apps/basics/src/routes/serialization-stream/+page.server.js

@@ -0,0 +1,7 @@
+import { Foo } from '$lib';
+
+export const load = () => {
+	return {
+		foo: Promise.resolve(new Foo('It works'))
+	};
+};

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

@@ -0,0 +1,11 @@
+<script>
+	export let data;
+</script>
+
+<h1>
+	{#await data.foo}
+		Loading...
+	{:then result}
+		{result.bar()}
+	{/await}
+</h1>

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

@@ -1565,6 +1565,13 @@ test.describe('Serialization', () => {
 		await page.click('button');
 		await expect(page.locator('h1')).toHaveText('It works!');
 	});
+
+	test('works with streaming', async ({ page, javaScriptEnabled }) => {
+		test.skip(!javaScriptEnabled, 'skip when JavaScript is disabled');
+
+		await page.goto('/serialization-stream');
+		await expect(page.locator('h1', { hasText: 'It works!' })).toBeVisible();
+	});
 });
 
 test.describe('getRequestEvent', () => {

packages/kit/test/apps/options-2/src/hooks.js

@@ -0,0 +1,9 @@
+import { Foo } from '$lib';
+
+/** @type {import("@sveltejs/kit").Transport} */
+export const transport = {
+	Foo: {
+		encode: (value) => value instanceof Foo && [value.message],
+		decode: ([message]) => new Foo(message)
+	}
+};

packages/kit/test/apps/options-2/src/lib/index.js

@@ -0,0 +1,9 @@
+export class Foo {
+	constructor(message) {
+		this.message = message;
+	}
+
+	bar() {
+		return this.message + '!';
+	}
+}

packages/kit/test/apps/options-2/src/routes/serialization-stream/+page.server.js

@@ -0,0 +1,7 @@
+import { Foo } from '$lib';
+
+export const load = () => {
+	return {
+		foo: Promise.resolve(new Foo('It works'))
+	};
+};