fix: diffing async computed and promise inside signal

Author: Varixo

packages/qwik/src/core/client/vnode-diff.ts

@@ -14,7 +14,7 @@ import { JSXNodeImpl, isJSXNode } from '../shared/jsx/jsx-node';
 import { Fragment, type Props } from '../shared/jsx/jsx-runtime';
 import { directGetPropsProxyProp, type PropsProxy } from '../shared/jsx/props-proxy';
 import { Slot } from '../shared/jsx/slot.public';
-import type { JSXNodeInternal, JSXOutput } from '../shared/jsx/types/jsx-node';
+import type { JSXNodeInternal } from '../shared/jsx/types/jsx-node';
 import type { JSXChildren } from '../shared/jsx/types/jsx-qwik-attributes';
 import { SSRComment, SSRRaw, SkipRender } from '../shared/jsx/utils.public';
 import type { QRLInternal } from '../shared/qrl/qrl-class';
@@ -85,7 +85,7 @@ import { getAttributeNamespace, getNewElementNamespaceData } from './vnode-names
 
 export const vnode_diff = (
   container: ClientContainer,
-  jsxNode: JSXOutput,
+  jsxNode: JSXChildren,
   vStartNode: VNode,
   scopedStyleIdPrefix: string | null
 ) => {
@@ -99,8 +99,7 @@ export const vnode_diff = (
    */
   const stack: any[] = [];
 
-  const asyncQueue: Array<VNode | ValueOrPromise<JSXOutput> | Promise<JSXOutput | JSXChildren>> =
-    [];
+  const asyncQueue: Array<VNode | ValueOrPromise<JSXChildren> | Promise<JSXChildren>> = [];
 
   ////////////////////////////////
   //// Traverse state variables
@@ -152,7 +151,7 @@ export const vnode_diff = (
   //////////////////////////////////////////////
   //////////////////////////////////////////////
 
-  function diff(jsxNode: JSXOutput, vStartNode: VNode) {
+  function diff(jsxNode: JSXChildren, vStartNode: VNode) {
     assertFalse(vnode_isVNode(jsxNode), 'JSXNode should not be a VNode');
     assertTrue(vnode_isVNode(vStartNode), 'vStartNode should be a VNode');
     vParent = vStartNode as ElementVNode | VirtualVNode;
@@ -185,15 +184,8 @@ export const vnode_diff = (
             if (currentSignal !== unwrappedSignal) {
               const vHost = (vNewNode || vCurrent)!;
               descend(
-                resolveSignalAndDescend(
-                  retryOnPromise(() =>
-                    trackSignalAndAssignHost(
-                      unwrappedSignal,
-                      vHost,
-                      EffectProperty.VNODE,
-                      container
-                    )
-                  )
+                resolveSignalAndDescend(() =>
+                  trackSignalAndAssignHost(unwrappedSignal, vHost, EffectProperty.VNODE, container)
                 ),
                 true
               );
@@ -252,12 +244,19 @@ export const vnode_diff = (
     }
   }
 
-  function resolveSignalAndDescend(value: any) {
-    if (isPromise(value)) {
-      asyncQueue.push(value, vNewNode || vCurrent, null);
-      return null;
+  function resolveSignalAndDescend(fn: () => ValueOrPromise<any>): ValueOrPromise<any> {
+    try {
+      return fn();
+    } catch (e) {
+      // Signal threw a promise (async computed signal) - handle retry and async queue
+      if (isPromise(e)) {
+        // The thrown promise will resolve when the signal is ready, then retry fn() with retry logic
+        const retryPromise = e.then(() => retryOnPromise(fn));
+        asyncQueue.push(retryPromise, vNewNode || vCurrent, null);
+        return null;
+      }
+      throw e;
     }
-    return value;
   }
 
   function advance() {
@@ -544,29 +543,30 @@ export const vnode_diff = (
 
   function drainAsyncQueue(): ValueOrPromise<void> {
     while (asyncQueue.length) {
-      const jsxNode = asyncQueue.shift() as ValueOrPromise<JSXNodeInternal>;
+      let jsxNode = asyncQueue.shift() as ValueOrPromise<JSXChildren>;
       const vHostNode = asyncQueue.shift() as VNode;
       const styleScopedId = asyncQueue.shift() as string | null;
+
+      const diffNode = (jsxNode: JSXChildren, vHostNode: VNode, styleScopedId: string | null) => {
+        if (styleScopedId) {
+          vnode_diff(container, jsxNode, vHostNode, addComponentStylePrefix(styleScopedId));
+        } else {
+          diff(jsxNode, vHostNode);
+        }
+      };
+
       if (isPromise(jsxNode)) {
         return jsxNode
           .then((jsxNode) => {
-            if (styleScopedId) {
-              vnode_diff(container, jsxNode, vHostNode, addComponentStylePrefix(styleScopedId));
-            } else {
-              diff(jsxNode, vHostNode);
-            }
+            diffNode(jsxNode, vHostNode, styleScopedId);
             return drainAsyncQueue();
           })
           .catch((e) => {
             container.handleError(e, vHostNode);
             return drainAsyncQueue();
           });
       } else {
-        if (styleScopedId) {
-          vnode_diff(container, jsxNode, vHostNode, addComponentStylePrefix(styleScopedId));
-        } else {
-          diff(jsxNode, vHostNode);
-        }
+        diffNode(jsxNode, vHostNode, styleScopedId);
       }
     }
   }
@@ -1280,15 +1280,7 @@ export const vnode_diff = (
            * deleted.
            */
           (host as VirtualVNode).flags &= ~VNodeFlags.Deleted;
-          // container.$scheduler$(ChoreType.COMPONENT, host, componentQRL, vNodeProps);
-
-          try {
-            const jsxOutput = executeComponent(container, host, host, componentQRL, vNodeProps);
-            const styleScopedId = container.getHostProp<string>(host, QScopedStyle);
-            asyncQueue.push(jsxOutput, host, styleScopedId);
-          } catch (e) {
-            container.handleError(e, host);
-          }
+          container.$scheduler$(ChoreType.COMPONENT, host, componentQRL, vNodeProps);
         }
       }
       descendContentToProject(jsxChildren, host);

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

@@ -2,6 +2,7 @@ import {
   Fragment as Component,
   Fragment,
   Fragment as Signal,
+  Fragment as Awaited,
   Slot,
   component$,
   isServer,
@@ -598,7 +599,11 @@ describe.each([
       expect(vNode).toMatchVDOM(
         <Component>
           <p>
-            Should have a number: "<Fragment>3</Fragment>"
+            Should have a number: "
+            <Signal>
+              <Awaited>3</Awaited>
+            </Signal>
+            "
           </p>
         </Component>
       );