feat(custom serdes): allow Promise serialization

Author: wmertens

.changeset/nasty-planes-jam.md

@@ -5,4 +5,5 @@
 FEAT: `useSerialized$(fn)` and `createSerialized$(fn)` allow serializing custom objects. You must provide a
 function that converts the custom object to a serializable one via the `[SerializerSymbol]`
 property, and then provide `use|createSerialized$(fn)` with the function that creates the custom object
-from the serialized data. This will lazily create the value when needed.
+from the serialized data. This will lazily create the value when needed. Note that the serializer
+function may return a Promise, which will be awaited. The deserializer must not return a Promise.

packages/qwik/src/core/shared/error/error.ts

@@ -55,6 +55,7 @@ export const codeToText = (code: number, ...parts: any[]): string => {
       'ComputedSignal is read-only', // 47
       'WrappedSignal is read-only', // 48
       'Attribute value is unsafe for SSR', // 49
+      'SerializerSymbol function returned rejected promise', // 50
     ];
     let text = MAP[code] ?? '';
     if (parts.length) {
@@ -124,6 +125,7 @@ export const enum QError {
   computedReadOnly = 47,
   wrappedReadOnly = 48,
   unsafeAttr = 49,
+  serializerSymbolRejectedPromise = 50,
 }
 
 export const qError = (code: number, errorMessageArgs: any[] = []): Error => {

packages/qwik/src/core/shared/shared-serialization.ts

@@ -1061,13 +1061,11 @@ function serialize(serializationContext: SerializationContext): void {
         output(TypeIds.Constant, Constants.EMPTY_ARRAY);
       } else if (value === EMPTY_OBJ) {
         output(TypeIds.Constant, Constants.EMPTY_OBJ);
+      } else if (value === null) {
+        output(TypeIds.Constant, Constants.Null);
       } else {
         depth++;
-        if (value === null) {
-          output(TypeIds.Constant, Constants.Null);
-        } else {
-          writeObjectValue(value, idx);
-        }
+        writeObjectValue(value, idx);
         depth--;
       }
     } else if (typeof value === 'string') {
@@ -1157,8 +1155,17 @@ function serialize(serializationContext: SerializationContext): void {
         }
         output(Array.isArray(storeTarget) ? TypeIds.StoreArray : TypeIds.Store, out);
       }
-    } else if (SerializerSymbol in value && typeof value[SerializerSymbol] === 'function') {
-      const result = serializationResults.get(value);
+    } else if (isSerializerObj(value)) {
+      let result = serializationResults.get(value);
+      // special case: we unwrap Promises
+      if (isPromise(result)) {
+        const promiseResult = promiseResults.get(result)!;
+        if (!promiseResult[0]) {
+          console.error(promiseResult[1]);
+          throw qError(QError.serializerSymbolRejectedPromise);
+        }
+        result = promiseResult[1];
+      }
       depth--;
       writeValue(result, idx);
       depth++;

packages/qwik/src/core/shared/shared-serialization.unit.ts

@@ -1,5 +1,5 @@
 import { $, component$, noSerialize } from '@qwik.dev/core';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { _fnSignal, _wrapProp } from '../internal';
 import { EffectPropData, type Signal } from '../signal/signal';
 import {
@@ -860,7 +860,7 @@ describe('shared-serialization', () => {
         (27 chars)"
       `);
     });
-    it('should not use SerializeSymbol if not function', async () => {
+    it('should not use SerializerSymbol if not function', async () => {
       const obj = { hi: 'orig', [SerializerSymbol]: 'hey' };
       const state = await serialize(obj);
       expect(dumpState(state)).toMatchInlineSnapshot(`
@@ -872,6 +872,33 @@ describe('shared-serialization', () => {
         (22 chars)"
       `);
     });
+    it('should unwrap promises from SerializerSymbol', async () => {
+      class Foo {
+        hi = 'promise';
+        async [SerializerSymbol]() {
+          return Promise.resolve(this.hi);
+        }
+      }
+      const state = await serialize(new Foo());
+      expect(dumpState(state)).toMatchInlineSnapshot(`
+        "
+        0 String "promise"
+        (13 chars)"
+      `);
+    });
+  });
+  it('should throw rejected promises from SerializerSymbol', async () => {
+    const consoleSpy = vi.spyOn(console, 'error');
+
+    class Foo {
+      hi = 'promise';
+      async [SerializerSymbol]() {
+        throw 'oh no';
+      }
+    }
+    await expect(serialize(new Foo())).rejects.toThrow('Q50');
+    expect(consoleSpy).toHaveBeenCalledWith('oh no');
+    consoleSpy.mockRestore();
   });
 });