Merge pull request #7243 from QwikDev/v2-signal-prop-qrl

fix: wait for QRL to resolve for signal attribute

Author: wmertens

Diff for: .changeset/silly-nails-own.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: wait for QRL to resolve for signal attribute

Diff for: packages/qwik/src/core/use/use-core.ts

@@ -11,7 +11,7 @@ import {
   ResourceEvent,
   TaskEvent,
 } from '../shared/utils/markers';
-import { isPromise } from '../shared/utils/promises';
+import { isPromise, retryOnPromise } from '../shared/utils/promises';
 import { seal } from '../shared/utils/qdev';
 import { isArray } from '../shared/utils/types';
 import { setLocale } from './use-locale';
@@ -263,7 +263,7 @@ export const trackSignalAndAssignHost = (
   if (value instanceof WrappedSignal && value.$hostElement$ !== host && host) {
     value.$hostElement$ = host;
   }
-  return trackSignal(() => value.value, host, property, container, data);
+  return retryOnPromise(() => trackSignal(() => value.value, host, property, container, data));
 };
 
 /** @internal */

Diff for: starters/apps/e2e/src/components/attributes/attributes.e2e.tsx

@@ -1,4 +1,12 @@
-import { component$, useSignal, useStore } from "@qwik.dev/core";
+import {
+  $,
+  Slot,
+  component$,
+  useComputed$,
+  useSignal,
+  useStore,
+  type PropsOf,
+} from "@qwik.dev/core";
 
 export const Attributes = component$(() => {
   const render = useSignal(0);
@@ -13,6 +21,7 @@ export const Attributes = component$(() => {
         Rerender
       </button>
       <AttributesChild v={render.value} key={render.value} />
+      <ProgressParent />
     </>
   );
 });
@@ -214,3 +223,41 @@ export const Issue4718Null = component$(() => {
     </button>
   );
 });
+
+const ProgressRoot = component$<{ min?: number } & PropsOf<"div">>((props) => {
+  const { ...rest } = props;
+
+  const minSig = useComputed$(() => props.min ?? 0);
+
+  const valueLabelSig = useComputed$(() => {
+    const value = minSig.value;
+    return `${value * 100}%`;
+  });
+
+  return (
+    <div aria-valuetext={valueLabelSig.value} {...rest}>
+      <Slot />
+    </div>
+  );
+});
+
+const ProgressParent = component$(() => {
+  const minGoal = useSignal(2000);
+
+  const incrementMin = $(() => {
+    minGoal.value += 500;
+  });
+
+  return (
+    <div>
+      <div>
+        <span id="progress-value">${minGoal.value}</span>
+        <button id="progress-btn" onClick$={incrementMin}>
+          +
+        </button>
+      </div>
+
+      <ProgressRoot min={minGoal.value}>Test</ProgressRoot>
+    </div>
+  );
+});

Diff for: starters/apps/e2e/src/components/attributes/attributes.tsx

@@ -295,6 +295,15 @@ test.describe("attributes", () => {
       await expect(button).not.toHaveAttribute("aria-label");
       await expect(button).not.toHaveAttribute("title");
     });
+
+    test("should update var prop QRL signal value", async ({ page }) => {
+      const button = page.locator("#progress-btn");
+      await button.click();
+      const progress = page.locator("#progress-value");
+      await expect(progress).toHaveText("$2500");
+      await button.click();
+      await expect(progress).toHaveText("$3000");
+    });
   }
 
   tests();