Merge pull request #7552 from QwikDev/v2-async-computed

feat: allow async operations in useComputed$ hook

Author: wmertens

.changeset/good-tables-rush.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': minor
+---
+
+feat: allow async operations in useComputed$ hook

packages/docs/src/routes/api/qwik/api.json

@@ -324,6 +324,20 @@
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts",
       "mdFile": "core.computedfn.md"
     },
+    {
+      "name": "ComputedReturnType",
+      "id": "computedreturntype",
+      "hierarchy": [
+        {
+          "name": "ComputedReturnType",
+          "id": "computedreturntype"
+        }
+      ],
+      "kind": "TypeAlias",
+      "content": "```typescript\nexport type ComputedReturnType<T> = T extends Promise<infer T> ? ReadonlySignal<T> : ReadonlySignal<T>;\n```\n**References:** [ReadonlySignal](#readonlysignal)",
+      "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts",
+      "mdFile": "core.computedreturntype.md"
+    },
     {
       "name": "ComputedSignal",
       "id": "computedsignal",
@@ -2102,7 +2116,7 @@
         }
       ],
       "kind": "Function",
-      "content": "Creates a computed signal which is calculated from the given function. A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated, and if the result changed, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered.\n\nThe function must be synchronous and must not have any side effects.\n\n\n```typescript\nuseComputed$: <T>(qrl: ComputedFn<T>) => T extends Promise<any> ? never : ReadonlySignal<T>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nqrl\n\n\n</td><td>\n\n[ComputedFn](#computedfn)<!-- -->&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nT extends Promise&lt;any&gt; ? never : [ReadonlySignal](#readonlysignal)<!-- -->&lt;T&gt;",
+      "content": "Creates a computed signal which is calculated from the given function. A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated, and if the result changed, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered.\n\nThe function must be synchronous and must not have any side effects.\n\n\n```typescript\nuseComputed$: <T>(qrl: ComputedFn<T>) => ComputedReturnType<T>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nqrl\n\n\n</td><td>\n\n[ComputedFn](#computedfn)<!-- -->&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\n[ComputedReturnType](#computedreturntype)<!-- -->&lt;T&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts",
       "mdFile": "core.usecomputed_.md"
     },

packages/docs/src/routes/api/qwik/index.md

@@ -353,6 +353,17 @@ export type ComputedFn<T> = () => T;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts)
 
+## ComputedReturnType
+
+```typescript
+export type ComputedReturnType<T> =
+  T extends Promise<infer T> ? ReadonlySignal<T> : ReadonlySignal<T>;
+```
+
+**References:** [ReadonlySignal](#readonlysignal)
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts)
+
 ## ComputedSignal
 
 A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated, and if the result changed, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered.
@@ -8424,7 +8435,7 @@ Creates a computed signal which is calculated from the given function. A compute
 The function must be synchronous and must not have any side effects.
 
 ```typescript
-useComputed$: <T>(qrl: ComputedFn<T>) => T extends Promise<any> ? never : ReadonlySignal<T>
+useComputed$: <T>(qrl: ComputedFn<T>) => ComputedReturnType<T>;
 ```
 
 <table><thead><tr><th>
@@ -8454,7 +8465,7 @@ qrl
 </tbody></table>
 **Returns:**
 
-T extends Promise&lt;any&gt; ? never : [ReadonlySignal](#readonlysignal)&lt;T&gt;
+[ComputedReturnType](#computedreturntype)&lt;T&gt;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts)
 

packages/qwik/src/core/core.api.md

@@ -74,6 +74,9 @@ export const componentQrl: <PROPS extends Record<any, any>>(componentQrl: QRL<On
 // @public (undocumented)
 export type ComputedFn<T> = () => T;
 
+// @public (undocumented)
+export type ComputedReturnType<T> = T extends Promise<infer T> ? ReadonlySignal<T> : ReadonlySignal<T>;
+
 // @public
 export interface ComputedSignal<T> extends ReadonlySignal<T> {
     force(): void;
@@ -1605,12 +1608,12 @@ export const untrack: <T>(fn: () => T) => T;
 export const unwrapStore: <T>(value: T) => T;
 
 // @public
-export const useComputed$: <T>(qrl: ComputedFn<T>) => T extends Promise<any> ? never : ReadonlySignal<T>;
+export const useComputed$: <T>(qrl: ComputedFn<T>) => ComputedReturnType<T>;
 
 // Warning: (ae-internal-missing-underscore) The name "useComputedQrl" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
-export const useComputedQrl: <T>(qrl: QRL<ComputedFn<T>>) => T extends Promise<any> ? never : ReadonlySignal<T>;
+export const useComputedQrl: <T>(qrl: QRL<ComputedFn<T>>) => ComputedReturnType<T>;
 
 // @public
 export const useConstant: <T>(value: (() => T) | T) => T;

packages/qwik/src/core/index.ts

@@ -109,7 +109,7 @@ export type { UseStylesScoped } from './use/use-styles';
 export type { UseSignal } from './use/use-signal';
 export type { ContextId } from './use/use-context';
 export type { UseStoreOptions } from './use/use-store.public';
-export type { ComputedFn } from './use/use-computed';
+export type { ComputedFn, ComputedReturnType } from './use/use-computed';
 export { useComputedQrl } from './use/use-computed';
 export { useSerializerQrl, useSerializer$ } from './use/use-serializer';
 export type { OnVisibleTaskOptions, VisibleTaskStrategy } from './use/use-visible-task';

packages/qwik/src/core/reactive-primitives/impl/computed-signal-impl.ts

@@ -31,6 +31,8 @@ export class ComputedSignalImpl<T> extends SignalImpl<T> implements BackRef {
   $computeQrl$: ComputeQRL<T>;
   $flags$: SignalFlags;
   $forceRunEffects$: boolean = false;
+  private $resolvedPromiseValue$: T | null = null;
+
   [_EFFECT_BACK_REF]: Map<EffectProperty | string, EffectSubscription> | null = null;
 
   constructor(
@@ -82,13 +84,13 @@ export class ComputedSignalImpl<T> extends SignalImpl<T> implements BackRef {
     const previousEffectSubscription = ctx?.$effectSubscriber$;
     ctx && (ctx.$effectSubscriber$ = getSubscriber(this, EffectProperty.VNODE));
     try {
-      const untrackedValue = computeQrl.getFn(ctx)() as T;
+      const untrackedValue = this.$resolvedPromiseValue$ || (computeQrl.getFn(ctx)() as T);
       if (isPromise(untrackedValue)) {
-        throw qError(QError.computedNotSync, [
-          computeQrl.dev ? computeQrl.dev.file : '',
-          computeQrl.$hash$,
-        ]);
+        throw untrackedValue.then((promiseValue) => {
+          this.$resolvedPromiseValue$ = promiseValue;
+        });
       }
+      this.$resolvedPromiseValue$ = null;
       DEBUG && log('Signal.$compute$', untrackedValue);
 
       this.$flags$ &= ~SignalFlags.INVALID;

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

@@ -51,7 +51,7 @@ export const codeToText = (code: number, ...parts: any[]): string => {
       'Unknown vnode type {{0}}.', // 43
       'Materialize error: missing element: {{0}} {{1}} {{2}}', // 44
       'Cannot coerce a Signal, use `.value` instead', // 45
-      'useComputedSignal$ QRL {{0}} {{1}} returned a Promise', // 46
+      '', // 46 unused
       'ComputedSignal is read-only', // 47
       'WrappedSignal is read-only', // 48
       'Attribute value is unsafe for SSR', // 49
@@ -121,7 +121,7 @@ export const enum QError {
   invalidVNodeType = 43,
   materializeVNodeDataError = 44,
   cannotCoerceSignal = 45,
-  computedNotSync = 46,
+  UNUSED_46 = 46,
   computedReadOnly = 47,
   wrappedReadOnly = 48,
   unsafeAttr = 49,

packages/qwik/src/core/ssr/ssr-render-jsx.ts

@@ -28,7 +28,7 @@ import {
   QSlotParent,
   qwikInspectorAttr,
 } from '../shared/utils/markers';
-import { isPromise } from '../shared/utils/promises';
+import { isPromise, retryOnPromise } from '../shared/utils/promises';
 import { qInspector } from '../shared/utils/qdev';
 import { addComponentStylePrefix, isClassAttr } from '../shared/utils/scoped-styles';
 import { serializeAttribute } from '../shared/utils/styles';
@@ -78,7 +78,7 @@ export async function _walkJSX(
         await (value as StackFn).apply(ssr);
         continue;
       }
-      processJSXNode(ssr, enqueue, value as JSXOutput, {
+      await processJSXNode(ssr, enqueue, value as JSXOutput, {
         styleScoped: options.currentStyleScoped,
         parentComponentFrame: options.parentComponentFrame,
       });
@@ -87,7 +87,7 @@ export async function _walkJSX(
   await drain();
 }
 
-function processJSXNode(
+async function processJSXNode(
   ssr: SSRContainer,
   enqueue: (value: StackValue) => void,
   value: JSXOutput,
@@ -114,7 +114,9 @@ function processJSXNode(
       ssr.openFragment(isDev ? [DEBUG_TYPE, VirtualType.WrappedSignal] : EMPTY_ARRAY);
       const signalNode = ssr.getLastNode();
       enqueue(ssr.closeFragment);
-      enqueue(trackSignalAndAssignHost(value, signalNode, EffectProperty.VNODE, ssr));
+      await retryOnPromise(() => {
+        enqueue(trackSignalAndAssignHost(value, signalNode, EffectProperty.VNODE, ssr));
+      });
     } else if (isPromise(value)) {
       ssr.openFragment(isDev ? [DEBUG_TYPE, VirtualType.Awaited] : EMPTY_ARRAY);
       enqueue(ssr.closeFragment);

packages/qwik/src/core/tests/use-computed.spec.tsx

@@ -15,10 +15,7 @@ import {
   useTask$,
 } from '@qwik.dev/core';
 import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
-import { describe, expect, it, vi } from 'vitest';
-import { ErrorProvider } from '../../testing/rendering.unit-util';
-import * as qError from '../shared/error/error';
-import { QError } from '../shared/error/error';
+import { describe, expect, it } from 'vitest';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
@@ -221,31 +218,64 @@ describe.each([
     );
   });
 
-  it('should disallow Promise in computed result', async () => {
-    const qErrorSpy = vi.spyOn(qError, 'qError');
-    const Counter = component$(() => {
-      const count = useSignal(1);
-      const doubleCount = useComputed$(() => Promise.resolve(count.value * 2));
-      return (
-        <button onClick$={() => count.value++}>
-          {
-            // @ts-expect-error
-            doubleCount.value
-          }
-        </button>
+  describe('async computed', () => {
+    it('should resolve promise in computed result', async () => {
+      const Counter = component$(() => {
+        const count = useSignal(1);
+        const doubleCount = useComputed$(() => Promise.resolve(count.value * 2));
+        return <button onClick$={() => count.value++}>{doubleCount.value}</button>;
+      });
+      const { vNode, container } = await render(<Counter />, { debug });
+      expect(vNode).toMatchVDOM(
+        <>
+          <button>
+            <Signal ssr-required>{'2'}</Signal>
+          </button>
+        </>
+      );
+      await trigger(container.element, 'button', 'click');
+      expect(vNode).toMatchVDOM(
+        <>
+          <button>
+            <Signal ssr-required>{'4'}</Signal>
+          </button>
+        </>
       );
     });
-    try {
-      await render(
-        <ErrorProvider>
-          <Counter />
-        </ErrorProvider>,
-        { debug }
+
+    it('should resolve delayed promise in computed result', async () => {
+      const Counter = component$(() => {
+        const count = useSignal(1);
+        const doubleCount = useComputed$(
+          () =>
+            new Promise<number>((resolve) => {
+              // TODO: hack: for some reason inside set timeout invoke context is undefined
+              const value = count.value * 2;
+              setTimeout(() => {
+                resolve(value);
+              });
+            })
+        );
+        return <button onClick$={() => count.value++}>{doubleCount.value}</button>;
+      });
+      const { vNode, container } = await render(<Counter />, { debug });
+
+      expect(vNode).toMatchVDOM(
+        <>
+          <button>
+            <Signal ssr-required>{'2'}</Signal>
+          </button>
+        </>
       );
-    } catch (e) {
-      expect((e as Error).message).toBeDefined();
-      expect(qErrorSpy).toHaveBeenCalledWith(QError.computedNotSync, expect.any(Array));
-    }
+      await trigger(container.element, 'button', 'click');
+      expect(vNode).toMatchVDOM(
+        <>
+          <button>
+            <Signal ssr-required>{'4'}</Signal>
+          </button>
+        </>
+      );
+    });
   });
 
   describe('createComputed$', () => {

packages/qwik/src/core/use/use-computed.ts

@@ -8,11 +8,14 @@ import { useSequentialScope } from './use-sequential-scope';
 
 /** @public */
 export type ComputedFn<T> = () => T;
+/** @public */
+export type ComputedReturnType<T> =
+  T extends Promise<infer T> ? ReadonlySignal<T> : ReadonlySignal<T>;
 
 export const useComputedCommon = <T>(
   qrl: QRL<ComputedFn<T>>,
   Class: typeof ComputedSignalImpl
-): T extends Promise<any> ? never : ReadonlySignal<T> => {
+): ComputedReturnType<T> => {
   const { val, set } = useSequentialScope<Signal<T>>();
   if (val) {
     return val as any;
@@ -29,9 +32,7 @@ export const useComputedCommon = <T>(
 };
 
 /** @internal */
-export const useComputedQrl = <T>(
-  qrl: QRL<ComputedFn<T>>
-): T extends Promise<any> ? never : ReadonlySignal<T> => {
+export const useComputedQrl = <T>(qrl: QRL<ComputedFn<T>>): ComputedReturnType<T> => {
   return useComputedCommon(qrl, ComputedSignalImpl);
 };