Merge pull request #7574 from QwikDev/v2-track-infinity-loop

fix: infinity loop while tracking element ref

Author: wmertens

.changeset/cold-moons-follow.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: infinity loop while tracking element ref

packages/qwik/src/core/tests/ref.spec.tsx

@@ -1,11 +1,13 @@
 import {
   Fragment as Component,
+  Fragment as Signal,
   component$,
   createContextId,
   useContext,
   useContextProvider,
   useSignal,
   useStore,
+  useTask$,
   useVisibleTask$,
 } from '@qwik.dev/core';
 import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
@@ -232,4 +234,34 @@ describe.each([
       </Component>
     );
   });
+
+  it('should track element ref', async () => {
+    const Cmp = component$(() => {
+      const element = useSignal<HTMLDivElement>();
+      const signal = useSignal(0);
+
+      useTask$(({ track }) => {
+        track(element);
+        signal.value++;
+      });
+
+      return (
+        <div>
+          <div ref={element}>Test</div>
+          {signal.value}
+        </div>
+      );
+    });
+
+    const { vNode } = await render(<Cmp />, { debug });
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <div>
+          <div>Test</div>
+          <Signal>1</Signal>
+        </div>
+      </Component>
+    );
+  });
 });

packages/qwik/src/server/qwik-types.ts

@@ -32,3 +32,4 @@ export type {
 export type { ResolvedManifest, SymbolMapper } from '../optimizer/src/types';
 export type { SymbolToChunkResolver } from '../core/ssr/ssr-types';
 export type { NodePropData } from '../core/reactive-primitives/subscription-data';
+export type { SignalImpl } from '../core/reactive-primitives/impl/signal-impl';

packages/qwik/src/server/ssr-container.ts

@@ -62,6 +62,7 @@ import {
   type JSXOutput,
   type QRLInternal,
   type SerializationContext,
+  type SignalImpl,
   type SsrAttrKey,
   type SsrAttrValue,
   type SsrAttrs,
@@ -1150,7 +1151,7 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
         if (key === 'ref') {
           const lastNode = this.getLastNode();
           if (isSignal(value)) {
-            value.value = new DomRef(lastNode);
+            (value as SignalImpl<unknown>).$untrackedValue$ = new DomRef(lastNode);
             continue;
           } else if (typeof value === 'function') {
             value(new DomRef(lastNode));