feat: serialization for async computed signal

Varixo · Varixo · commit be77ee7c12f1 · 2025-05-24T13:37:39.000+02:00
diff --git a/packages/qwik/src/core/reactive-primitives/impl/signal-impl.ts b/packages/qwik/src/core/reactive-primitives/impl/signal-impl.ts
@@ -107,14 +107,14 @@ const addEffect = (
 
 export const setupSignalValueAccess = <T, S>(
   target: SignalImpl<T>,
-  effectsGetter: () => Set<EffectSubscription>,
-  valueGetter: () => S
+  effectsFn: () => Set<EffectSubscription>,
+  returnValueFn: () => S
 ) => {
   const ctx = tryGetInvokeContext();
   if (ctx) {
     if (target.$container$ === null) {
       if (!ctx.$container$) {
-        return valueGetter();
+        return returnValueFn();
       }
       // Grab the container now we have access to it
       target.$container$ = ctx.$container$;
@@ -126,9 +126,9 @@ export const setupSignalValueAccess = <T, S>(
     }
     const effectSubscriber = ctx.$effectSubscriber$;
     if (effectSubscriber) {
-      addEffect(target, effectSubscriber, effectsGetter());
+      addEffect(target, effectSubscriber, effectsFn());
       DEBUG && log('read->sub', pad('\n' + target.toString(), '  '));
     }
   }
-  return valueGetter();
+  return returnValueFn();
 };
diff --git a/packages/qwik/src/core/reactive-primitives/signal-api.ts b/packages/qwik/src/core/reactive-primitives/signal-api.ts
@@ -4,8 +4,9 @@ import { SignalImpl } from './impl/signal-impl';
 import { ComputedSignalImpl } from './impl/computed-signal-impl';
 import { throwIfQRLNotResolved } from './utils';
 import type { Signal } from './signal.public';
-import type { SerializerArg } from './types';
+import type { AsyncComputedCtx, AsyncComputeQRL, ComputeQRL, SerializerArg } from './types';
 import { SerializerSignalImpl } from './impl/serializer-signal-impl';
+import { AsyncComputedSignalImpl } from './impl/async-computed-signal-impl';
 
 /** @internal */
 export const createSignal = <T>(value?: T): Signal<T> => {
@@ -15,7 +16,15 @@ export const createSignal = <T>(value?: T): Signal<T> => {
 /** @internal */
 export const createComputedSignal = <T>(qrl: QRL<() => T>): ComputedSignalImpl<T> => {
   throwIfQRLNotResolved(qrl);
-  return new ComputedSignalImpl<T>(null, qrl as QRLInternal<() => T>);
+  return new ComputedSignalImpl<T>(null, qrl as ComputeQRL<T>);
+};
+
+/** @internal */
+export const createAsyncComputedSignal = <T>(
+  qrl: QRL<(ctx: AsyncComputedCtx) => Promise<T>>
+): AsyncComputedSignalImpl<T> => {
+  throwIfQRLNotResolved(qrl);
+  return new AsyncComputedSignalImpl<T>(null, qrl as AsyncComputeQRL<T>);
 };
 
 /** @internal */
diff --git a/packages/qwik/src/core/shared/scheduler.ts b/packages/qwik/src/core/shared/scheduler.ts
@@ -237,7 +237,9 @@ export const createScheduler = (
     const isClientOnly =
       type === ChoreType.JOURNAL_FLUSH ||
       type === ChoreType.NODE_DIFF ||
-      type === ChoreType.NODE_PROP;
+      type === ChoreType.NODE_PROP ||
+      type === ChoreType.QRL_RESOLVE ||
+      type === ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS;
     if (isServer && isClientOnly) {
       DEBUG &&
         debugTrace(
diff --git a/packages/qwik/src/core/shared/shared-serialization.ts b/packages/qwik/src/core/shared/shared-serialization.ts
@@ -7,7 +7,7 @@ import { type DomContainer } from '../client/dom-container';
 import type { VNode } from '../client/types';
 import { vnode_getNode, vnode_isVNode, vnode_locate, vnode_toString } from '../client/vnode';
 import { isSerializerObj } from '../reactive-primitives/utils';
-import type { SerializerArg } from '../reactive-primitives/types';
+import type { AsyncComputeQRL, SerializerArg } from '../reactive-primitives/types';
 import {
   getOrCreateStore,
   getStoreHandler,
@@ -289,10 +289,34 @@ const inflate = (
       signal.$effects$ = new Set(d.slice(5) as EffectSubscription[]);
       break;
     }
+    case TypeIds.AsyncComputedSignal: {
+      const asyncComputed = target as AsyncComputedSignalImpl<unknown>;
+      const d = data as [
+        AsyncComputeQRL<unknown>,
+        Array<EffectSubscription> | null,
+        Array<EffectSubscription> | null,
+        Array<EffectSubscription> | null,
+        boolean,
+        boolean,
+        unknown?,
+      ];
+      asyncComputed.$computeQrl$ = d[0];
+      asyncComputed.$effects$ = new Set(d[1]);
+      asyncComputed.$pendingEffects$ = new Set(d[2]);
+      asyncComputed.$failedEffects$ = new Set(d[3]);
+      asyncComputed.$untrackedPending$ = d[4];
+      asyncComputed.$untrackedFailed$ = d[5];
+      const hasValue = d.length > 6;
+      if (hasValue) {
+        asyncComputed.$untrackedValue$ = d[6];
+      } else {
+        asyncComputed.$flags$ |= SignalFlags.INVALID;
+      }
+      break;
+    }
     // Inflating a SerializerSignal is the same as inflating a ComputedSignal
     case TypeIds.SerializerSignal:
-    case TypeIds.ComputedSignal:
-    case TypeIds.AsyncComputedSignal: {
+    case TypeIds.ComputedSignal: {
       const computed = target as ComputedSignalImpl<unknown>;
       const d = data as [QRLInternal<() => {}>, EffectSubscription[] | null, unknown?];
       computed.$computeQrl$ = d[0];
@@ -1160,6 +1184,28 @@ async function serialize(serializationContext: SerializationContext): Promise<vo
           value.$hostElement$,
           ...(value.$effects$ || []),
         ]);
+      } else if (value instanceof AsyncComputedSignalImpl) {
+        addPreloadQrl(value.$computeQrl$);
+        const out: [
+          QRLInternal,
+          Set<EffectSubscription> | null,
+          Set<EffectSubscription> | null,
+          Set<EffectSubscription> | null,
+          boolean,
+          boolean,
+          unknown?,
+        ] = [
+          value.$computeQrl$,
+          value.$effects$,
+          value.$pendingEffects$,
+          value.$failedEffects$,
+          value.$untrackedPending$,
+          value.$untrackedFailed$,
+        ];
+        if (v !== NEEDS_COMPUTATION) {
+          out.push(v);
+        }
+        output(TypeIds.AsyncComputedSignal, out);
       } else if (value instanceof ComputedSignalImpl) {
         addPreloadQrl(value.$computeQrl$);
         const out: [QRLInternal, Set<EffectSubscription> | null, unknown?] = [
@@ -1170,12 +1216,7 @@ async function serialize(serializationContext: SerializationContext): Promise<vo
         if (v !== NEEDS_COMPUTATION) {
           out.push(v);
         }
-        output(
-          value instanceof AsyncComputedSignalImpl
-            ? TypeIds.AsyncComputedSignal
-            : TypeIds.ComputedSignal,
-          out
-        );
+        output(TypeIds.ComputedSignal, out);
       } else {
         output(TypeIds.Signal, [v, ...(value.$effects$ || [])]);
       }
diff --git a/packages/qwik/src/core/shared/shared-serialization.unit.ts b/packages/qwik/src/core/shared/shared-serialization.unit.ts
@@ -26,6 +26,8 @@ import { isQrl } from './qrl/qrl-utils';
 import { NoSerializeSymbol, SerializerSymbol } from './utils/serialize-utils';
 import { SubscriptionData } from '../reactive-primitives/subscription-data';
 import { StoreFlags } from '../reactive-primitives/types';
+import { createAsyncComputedSignal } from '../reactive-primitives/signal-api';
+import { retryOnPromise } from './utils/promises';
 import { QError } from './error/error';
 
 const DEBUG = false;
@@ -508,6 +510,55 @@ describe('shared-serialization', () => {
       (72 chars)"
       `);
     });
+    it(title(TypeIds.AsyncComputedSignal), async () => {
+      const foo = createSignal(1);
+      const dirty = createAsyncComputedSignal(
+        inlinedQrl(
+          ({ track }) => Promise.resolve(track(() => (foo as SignalImpl).value) + 1),
+          'dirty',
+          [foo]
+        )
+      );
+      const clean = createAsyncComputedSignal(
+        inlinedQrl(
+          ({ track }) => Promise.resolve(track(() => (foo as SignalImpl).value) + 1),
+          'clean',
+          [foo]
+        )
+      );
+      await retryOnPromise(() => {
+        // note that this won't subscribe because we're not setting up the context
+        expect(clean.value).toBe(2);
+      });
+
+      const objs = await serialize(dirty, clean);
+      expect(dumpState(objs)).toMatchInlineSnapshot(`
+        "
+        0 AsyncComputedSignal [
+          RootRef 2
+          Constant null
+          Constant null
+          Constant null
+          Constant false
+          Constant false
+        ]
+        1 AsyncComputedSignal [
+          RootRef 3
+          Constant null
+          Constant null
+          Constant null
+          Constant false
+          Constant false
+          Number 2
+        ]
+        2 PreloadQRL "mock-chunk#dirty[4]"
+        3 PreloadQRL "mock-chunk#clean[4]"
+        4 Signal [
+          Number 1
+        ]
+        (122 chars)"
+      `);
+    });
     it(title(TypeIds.Store), async () => {
       expect(await dump(createStore(null, { a: { b: true } }, StoreFlags.RECURSIVE)))
         .toMatchInlineSnapshot(`
diff --git a/packages/qwik/src/core/use/utils/tracker.ts b/packages/qwik/src/core/use/utils/tracker.ts
@@ -11,7 +11,7 @@ import { isSignal } from '../../reactive-primitives/utils';
 import { qError, QError } from '../../shared/error/error';
 import type { Container } from '../../shared/types';
 import { noSerialize } from '../../shared/utils/serialize-utils';
-import { isFunction } from '../../shared/utils/types';
+import { isFunction, isObject } from '../../shared/utils/types';
 import { invoke, newInvokeContext } from '../use-core';
 import type { Task, Tracker } from '../use-task';
 
@@ -29,7 +29,7 @@ export const trackFn =
         return (obj as Record<string, unknown>)[prop];
       } else if (isSignal(obj)) {
         return obj.value;
-      } else if (isStore(obj)) {
+      } else if (isObject(obj) && isStore(obj)) {
         // track whole store
         addStoreEffect(
           getStoreTarget(obj)!,
diff --git a/starters/apps/e2e/src/components/async-computed/async-computed.tsx b/starters/apps/e2e/src/components/async-computed/async-computed.tsx
@@ -51,13 +51,13 @@ export const PendingComponent = component$(() => {
       new Promise<number>((resolve) => {
         setTimeout(() => {
           resolve(track(count) * 2);
-        }, 5000);
+        }, 1000);
       }),
   );
 
   return (
     <div>
-      {/* {double.pending ? "pending" : "not pending"} */}
+      {(double as any).pending ? "pending" : "not pending"}
       <div class="result">double: {double.value}</div>
       <button id="increment" onClick$={() => count.value++}>
         Increment
