fix: early schedule computed qrls to resolve

Author: Varixo

.changeset/calm-hounds-brake.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: early schedule computed qrls to resolve

packages/qwik/src/core/client/dom-container.ts

@@ -8,7 +8,12 @@ import { emitEvent } from '../shared/qrl/qrl-class';
 import type { QRL } from '../shared/qrl/qrl.public';
 import { ChoreType } from '../shared/util-chore-type';
 import { _SharedContainer } from '../shared/shared-container';
-import { inflateQRL, parseQRL, wrapDeserializerProxy } from '../shared/shared-serialization';
+import {
+  TypeIds,
+  inflateQRL,
+  parseQRL,
+  wrapDeserializerProxy,
+} from '../shared/shared-serialization';
 import { QContainerValue, type HostElement, type ObjToProxyMap } from '../shared/types';
 import { EMPTY_ARRAY } from '../shared/utils/flyweight';
 import {
@@ -155,11 +160,16 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
     element.setAttribute(QContainerAttr, QContainerValue.RESUMED);
     element.qContainer = this;
 
+    this.$qFuncs$ = getQFuncs(document, this.$instanceHash$) || EMPTY_ARRAY;
+    this.$setServerData$();
+    element.setAttribute(QContainerAttr, QContainerValue.RESUMED);
+    element.qContainer = this;
     const qwikStates = element.querySelectorAll('script[type="qwik/state"]');
     if (qwikStates.length !== 0) {
       const lastState = qwikStates[qwikStates.length - 1];
       this.$rawStateData$ = JSON.parse(lastState.textContent!);
       this.$stateData$ = wrapDeserializerProxy(this, this.$rawStateData$) as unknown[];
+      this.$scheduleQRLs$();
     }
   }
 
@@ -371,4 +381,23 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
     }
     this.$serverData$ = { containerAttributes };
   }
+
+  /**
+   * Schedule all computed signals to be inflated. This is done after at the time of DomContainer
+   * creation to ensure that all computed signals are inflated and QRLs are resolved before any
+   * signals are used. This is necessary because if a computed QRL is not resolved, it will throw a
+   * promise and we will have to rerun the entire function, which we want to avoid.
+   */
+  private $scheduleQRLs$(): void {
+    const deserializeValue = <T>(i: number) => {
+      return this.$stateData$[i / 2] as T;
+    };
+    for (let i = 0; i < this.$rawStateData$.length; i += 2) {
+      const type = this.$rawStateData$[i];
+      if (type === TypeIds.ComputedSignal) {
+        // use deserializer proxy to inflate the computed signal and schedule computed QRL
+        deserializeValue(i);
+      }
+    }
+  }
 }

packages/qwik/src/core/shared/utils/markers.ts

@@ -1,4 +1,5 @@
 import { QContainerValue } from '../types';
+import { EMPTY_ARRAY } from './flyweight';
 
 /** State factory of the component. */
 export const OnRenderProp = 'q:renderFn';
@@ -23,7 +24,7 @@ export const getQFuncs = (
   document: Document,
   hash: string
 ): Array<(...args: unknown[]) => unknown> => {
-  return (document as any)[QFuncsPrefix + hash] || [];
+  return (document as any)[QFuncsPrefix + hash] || EMPTY_ARRAY;
 };
 
 export const QRenderAttr = 'q:render';

starters/apps/e2e/src/components/qrl/qrl.tsx

@@ -1,13 +1,51 @@
-import { $, component$, useComputed$, useSignal } from "@qwik.dev/core";
+import {
+  $,
+  component$,
+  useComputed$,
+  useSignal,
+  useVisibleTask$,
+} from "@qwik.dev/core";
 
 export const QRL = component$(() => {
+  const render = useSignal(0);
   return (
     <>
-      <ShouldResolveInnerComputedQRL />
+      <button id="rerender" onClick$={() => render.value++}>
+        rerender {render.value}
+      </button>
+      <div key={render.value}>
+        <ShouldResolveComputedQRL />
+        <ShouldResolveInnerComputedQRL />
+      </div>
     </>
   );
 });
 
+export const ShouldResolveComputedQRL = component$(() => {
+  const computedCounter = useSignal(0);
+  const text = useComputed$(() => {
+    computedCounter.value++;
+    return "";
+  });
+
+  return (
+    <>
+      <span id="computed-counter">{computedCounter.value}</span>
+      <Test text={text} />
+    </>
+  );
+});
+
+export const Test = component$<any>(({ text }) => {
+  const visibleCounter = useSignal(0);
+  useVisibleTask$(async () => {
+    visibleCounter.value++;
+    text.value;
+  });
+
+  return <div id="visible-counter">{visibleCounter.value}</div>;
+});
+
 export const ShouldResolveInnerComputedQRL = component$(() => {
   const test = useComputed$(() => 0);
   return <InnerComputedButton test={test} />;

starters/apps/e2e/src/root.tsx

@@ -33,9 +33,9 @@ import { TreeshakingApp } from "./components/treeshaking/treeshaking";
 import { TwoListeners } from "./components/two-listeners/twolisteners";
 import { UseId } from "./components/useid/useid";
 import { Watch } from "./components/watch/watch";
+import { QRL } from "./components/qrl/qrl";
 
 import "./global.css";
-import { QRL } from "./components/qrl/qrl";
 
 const tests: Record<string, FunctionComponent> = {
   "/e2e/two-listeners": () => <TwoListeners />,

starters/e2e/e2e.qrl.e2e.ts

@@ -1,14 +1,39 @@
-import { expect, test } from "@playwright/test";
-test("should update counter without uncaught promises", async ({ page }) => {
-  await page.goto("/e2e/qrl");
-  page.on("pageerror", (err) => expect(err).toEqual(undefined));
-  page.on("console", (msg) => {
-    if (msg.type() === "error") {
-      expect(msg.text()).toEqual(undefined);
-    }
+import { test, expect } from "@playwright/test";
+
+test.describe("qrl", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/e2e/qrl");
+    page.on("pageerror", (err) => expect(err).toEqual(undefined));
+    page.on("console", (msg) => {
+      if (msg.type() === "error") {
+        expect(msg.text()).toEqual(undefined);
+      }
+    });
   });
-  const button = page.locator("#inner-computed-button");
-  await expect(button).toContainText("Click Me 0");
 
-  await button.click();
+  function tests() {
+    test("should resolve computed QRL", async ({ page }) => {
+      const computedCounter = page.locator("#computed-counter");
+      const visibleCounter = page.locator("#visible-counter");
+      await expect(computedCounter).toHaveText("1");
+      await expect(visibleCounter).toHaveText("1");
+    });
+
+    test("should resolve inner computed QRL", async ({ page }) => {
+      const innerButton = page.locator("#inner-computed-button");
+      await innerButton.click();
+      await expect(innerButton).toHaveText("Click Me 1");
+    });
+  }
+
+  tests();
+
+  test.describe("client rerender", () => {
+    test.beforeEach(async ({ page }) => {
+      const toggleRender = page.locator("#rerender");
+      await toggleRender.click();
+      await expect(page.locator("#rerender")).toHaveText("rerender 1");
+    });
+    tests();
+  });
 });