Revert "feat: allow async operations in useComputed$ hook" (#7594)

Author: Varixo

.changeset/good-tables-rush.md

@@ -324,20 +324,6 @@
       "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",
@@ -2144,7 +2130,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>) => 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;",
+      "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;",
       "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/api.json

@@ -353,17 +353,6 @@ 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.
@@ -8451,7 +8440,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>) => ComputedReturnType<T>;
+useComputed$: <T>(qrl: ComputedFn<T>) => T extends Promise<any> ? never : ReadonlySignal<T>
 ```
 
 <table><thead><tr><th>
@@ -8481,7 +8470,7 @@ qrl
 </tbody></table>
 **Returns:**
 
-[ComputedReturnType](#computedreturntype)&lt;T&gt;
+T extends Promise&lt;any&gt; ? never : [ReadonlySignal](#readonlysignal)&lt;T&gt;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts)
 

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

@@ -111,7 +111,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, ComputedReturnType } from './use/use-computed';
+export type { ComputedFn } 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/index.ts

@@ -74,9 +74,6 @@ 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;
@@ -1624,12 +1621,12 @@ export const untrack: <T>(fn: () => T) => T;
 export const unwrapStore: <T>(value: T) => T;
 
 // @public
-export const useComputed$: <T>(qrl: ComputedFn<T>) => ComputedReturnType<T>;
+export const useComputed$: <T>(qrl: ComputedFn<T>) => T extends Promise<any> ? never : ReadonlySignal<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>>) => ComputedReturnType<T>;
+export const useComputedQrl: <T>(qrl: QRL<ComputedFn<T>>) => T extends Promise<any> ? never : ReadonlySignal<T>;
 
 // @public
 export const useConstant: <T>(value: (() => T) | T) => T;

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

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

packages/qwik/src/core/reactive-primitives/impl/computed-signal-impl.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
-      '', // 46 unused
+      'useComputed$ QRL {{0}} {{1}} cannot return a Promise', // 46
       '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,
-  UNUSED_46 = 46,
+  computedNotSync = 46,
   computedReadOnly = 47,
   wrappedReadOnly = 48,
   unsafeAttr = 49,

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

@@ -28,7 +28,7 @@ import {
   QSlotParent,
   qwikInspectorAttr,
 } from '../shared/utils/markers';
-import { isPromise, retryOnPromise } from '../shared/utils/promises';
+import { isPromise } 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;
       }
-      await processJSXNode(ssr, enqueue, value as JSXOutput, {
+      processJSXNode(ssr, enqueue, value as JSXOutput, {
         styleScoped: options.currentStyleScoped,
         parentComponentFrame: options.parentComponentFrame,
       });
@@ -87,7 +87,7 @@ export async function _walkJSX(
   await drain();
 }
 
-async function processJSXNode(
+function processJSXNode(
   ssr: SSRContainer,
   enqueue: (value: StackValue) => void,
   value: JSXOutput,
@@ -114,9 +114,7 @@ async function processJSXNode(
       ssr.openFragment(isDev ? [DEBUG_TYPE, VirtualType.WrappedSignal] : EMPTY_ARRAY);
       const signalNode = ssr.getLastNode();
       enqueue(ssr.closeFragment);
-      await retryOnPromise(() => {
-        enqueue(trackSignalAndAssignHost(value, signalNode, EffectProperty.VNODE, ssr));
-      });
+      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/ssr/ssr-render-jsx.ts

@@ -15,7 +15,10 @@ import {
   useTask$,
 } from '@qwik.dev/core';
 import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
-import { describe, expect, it } from 'vitest';
+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';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
@@ -218,64 +221,31 @@ describe.each([
     );
   });
 
-  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>
-        </>
+  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>
       );
     });
-
-    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>
-        </>
+    try {
+      await render(
+        <ErrorProvider>
+          <Counter />
+        </ErrorProvider>,
+        { debug }
       );
-      await trigger(container.element, 'button', 'click');
-      expect(vNode).toMatchVDOM(
-        <>
-          <button>
-            <Signal ssr-required>{'4'}</Signal>
-          </button>
-        </>
-      );
-    });
+    } catch (e) {
+      expect((e as Error).message).toBeDefined();
+      expect(qErrorSpy).toHaveBeenCalledWith(QError.computedNotSync, expect.any(Array));
+    }
   });
 
   describe('createComputed$', () => {

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

@@ -8,14 +8,11 @@ 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
-): ComputedReturnType<T> => {
+): T extends Promise<any> ? never : ReadonlySignal<T> => {
   const { val, set } = useSequentialScope<Signal<T>>();
   if (val) {
     return val as any;
@@ -32,7 +29,9 @@ export const useComputedCommon = <T>(
 };
 
 /** @internal */
-export const useComputedQrl = <T>(qrl: QRL<ComputedFn<T>>): ComputedReturnType<T> => {
+export const useComputedQrl = <T>(
+  qrl: QRL<ComputedFn<T>>
+): T extends Promise<any> ? never : ReadonlySignal<T> => {
   return useComputedCommon(qrl, ComputedSignalImpl);
 };