[breaking] use devalue to (de)serialize action data

Allows for Date objects and more be part of the response
Closes #7488

Author: dummdidumm

.changeset/cool-emus-drive.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] use devalue to (de)serialize action data

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

@@ -1,5 +1,6 @@
-import { invalidateAll } from './navigation.js';
+import * as devalue from 'devalue';
 import { client } from '../client/singletons.js';
+import { invalidateAll } from './navigation.js';
 
 /**
  * @param {string} name
@@ -92,6 +93,9 @@ export function enhance(form, submit = () => {}) {
 			});
 
 			result = await response.json();
+			if (result.data) {
+				result.data = devalue.parse(result.data);
+			}
 		} catch (error) {
 			if (/** @type {any} */ (error)?.name === 'AbortError') return;
 			result = { type: 'error', error };

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

@@ -1,3 +1,4 @@
+import * as devalue from 'devalue';
 import { error, json } from '../../../exports/index.js';
 import { normalize_error } from '../../../utils/error.js';
 import { is_form_content_type, negotiate } from '../../../utils/http.js';
@@ -41,14 +42,16 @@ export async function handle_action_json_request(event, options, server) {
 		const data = await call_action(event, actions);
 
 		if (data instanceof ValidationError) {
-			check_serializability(data.data, /** @type {string} */ (event.routeId), 'data');
-			return action_json({ type: 'invalid', status: data.status, data: data.data });
+			return action_json({
+				type: 'invalid',
+				status: data.status,
+				data: uneval(data.data, /** @type {string} */ (event.routeId))
+			});
 		} else {
-			check_serializability(data, /** @type {string} */ (event.routeId), 'data');
 			return action_json({
 				type: 'success',
 				status: data ? 200 : 204,
-				data: /** @type {Record<string, any> | undefined} */ (data)
+				data: uneval(data, /** @type {string} */ (event.routeId))
 			});
 		}
 	} catch (e) {
@@ -211,46 +214,35 @@ function maybe_throw_migration_error(server) {
 }
 
 /**
- * Check that the data can safely be serialized to JSON
- * @param {any} value
- * @param {string} id
- * @param {string} path
+ * Try to `devalue.stringify` the data object, and if it fails, return a proper Error with context
+ * @param {any} data
+ * @param {string} routeId
  */
-function check_serializability(value, id, path) {
-	const type = typeof value;
+export function stringify_action_response(data, routeId) {
+	try {
+		return devalue.stringify(data);
+	} catch (e) {
+		// If we're here, the data could not be serialized with devalue
+		const error = /** @type {any} */ (e);
+		const match = /\[(\d+)\]\.data\.(.+)/.exec(error.path);
+		if (match) {
+			throw new Error(
+				`Data returned from \`action\` inside ${routeId} is not serializable: ${error.message} (data.${match[2]})`
+			);
+		}
 
-	if (type === 'string' || type === 'boolean' || type === 'number' || type === 'undefined') {
-		// primitives are fine
-		return;
-	}
+		const nonPojoError = /pojo/i.exec(error.message);
 
-	if (type === 'object') {
-		// nulls are fine...
-		if (!value) return;
+		if (nonPojoError) {
+			const constructorName = data?.constructor?.name;
 
-		// ...so are plain arrays...
-		if (Array.isArray(value)) {
-			value.forEach((child, i) => {
-				check_serializability(child, id, `${path}[${i}]`);
-			});
-			return;
+			throw new Error(
+				`Data returned from \`action\` inside ${routeId} must be a plain object${
+					constructorName ? ` rather than an instance of ${constructorName}` : ''
+				}`
+			);
 		}
 
-		// ...and objects
-		// This simple check might potentially run into some weird edge cases
-		// Refer to https://github.com/lodash/lodash/blob/2da024c3b4f9947a48517639de7560457cd4ec6c/isPlainObject.js?rgh-link-date=2022-07-20T12%3A48%3A07Z#L30
-		// if that ever happens
-		if (Object.getPrototypeOf(value) === Object.prototype) {
-			for (const key in value) {
-				check_serializability(value[key], id, `${path}.${key}`);
-			}
-			return;
-		}
+		throw error;
 	}
-
-	throw new Error(
-		`${path} returned from action in ${id} cannot be serialized as JSON without losing its original type` +
-			// probably the most common case, so let's give a hint
-			(value instanceof Date ? ' (Date objects are serialized as strings)' : '')
-	);
 }

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

@@ -4,6 +4,7 @@ import { hash } from '../../hash.js';
 import { serialize_data } from './serialize_data.js';
 import { s } from '../../../utils/misc.js';
 import { Csp } from './csp.js';
+import { stringify_action_response } from './actions.js';
 
 // TODO rename this function/module
 
@@ -200,8 +201,7 @@ export async function render_response({
 	}
 
 	if (form_value) {
-		// no need to check it can be serialized, we already verified that it's JSON-friendly
-		serialized.form = devalue.uneval(form_value);
+		serialized.form = stringify_action_response(form_value, event.routeId);
 	}
 
 	if (inline_styles.size > 0) {