fix: ref inside context

.changeset/clever-flowers-drum.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: using ref inside useContext

packages/qwik/src/core/api.md

@@ -851,7 +851,7 @@ export abstract class _SharedContainer implements Container {
         };
     } | null, DomRefConstructor: {
         new (...rest: any[]): {
-            id: string;
+            $ssrNode$: ISsrNode;
         };
     } | null, symbolToChunkResolver: SymbolToChunkResolver, writer?: StreamWriter, prepVNodeData?: (vNode: any) => void): SerializationContext;
     // (undocumented)

packages/qwik/src/core/shared/shared-container.ts

@@ -5,7 +5,7 @@ import type { ValueOrPromise } from './utils/types';
 import { version } from '../version';
 import type { Effect, EffectData } from '../signal/signal';
 import type { Signal } from '../signal/signal.public';
-import type { StreamWriter, SymbolToChunkResolver } from '../ssr/ssr-types';
+import type { ISsrNode, StreamWriter, SymbolToChunkResolver } from '../ssr/ssr-types';
 import type { Scheduler } from './scheduler';
 import { createScheduler } from './scheduler';
 import { createSerializationContext, type SerializationContext } from './shared-serialization';
@@ -50,7 +50,7 @@ export abstract class _SharedContainer implements Container {
       new (...rest: any[]): { nodeType: number; id: string };
     } | null,
     DomRefConstructor: {
-      new (...rest: any[]): { id: string };
+      new (...rest: any[]): { $ssrNode$: ISsrNode };
     } | null,
     symbolToChunkResolver: SymbolToChunkResolver,
     writer?: StreamWriter,

packages/qwik/src/core/shared/shared-serialization.ts

@@ -16,7 +16,7 @@ import {
   getStoreTarget,
   isStore,
 } from '../signal/store';
-import type { SymbolToChunkResolver } from '../ssr/ssr-types';
+import type { ISsrNode, SymbolToChunkResolver } from '../ssr/ssr-types';
 import { untrack } from '../use/use-core';
 import { createResourceReturn, type ResourceReturnInternal } from '../use/use-resource';
 import { Task, isTask } from '../use/use-task';
@@ -577,9 +577,11 @@ type SsrNode = {
 };
 
 type DomRef = {
-  id: string;
+  $ssrNode$: SsrNode;
 };
 
+let isDomRef = (obj: unknown): obj is DomRef => false;
+
 export interface SerializationContext {
   $serialize$: () => void;
 
@@ -654,7 +656,7 @@ export const createSerializationContext = (
   } | null,
   /** DomRef constructor, for instanceof checks. */
   DomRefConstructor: {
-    new (...rest: any[]): { id: string };
+    new (...rest: any[]): { $ssrNode$: ISsrNode };
   } | null,
   symbolToChunkResolver: SymbolToChunkResolver,
   getProp: (obj: any, prop: string) => any,
@@ -689,9 +691,9 @@ export const createSerializationContext = (
   const isSsrNode = (NodeConstructor ? (obj) => obj instanceof NodeConstructor : () => false) as (
     obj: unknown
   ) => obj is SsrNode;
-  const isDomRef = (
-    DomRefConstructor ? (obj) => obj instanceof DomRefConstructor : () => false
-  ) as (obj: unknown) => obj is DomRef;
+  isDomRef = (DomRefConstructor ? (obj) => obj instanceof DomRefConstructor : () => false) as (
+    obj: unknown
+  ) => obj is DomRef;
 
   return {
     $serialize$(): void {
@@ -839,8 +841,8 @@ export const createSerializationContext = (
         discoveredValues.push(obj.$el$, obj.$qrl$, obj.$state$, obj.$effectDependencies$);
       } else if (isSsrNode(obj)) {
         discoveredValues.push(obj.vnodeData);
-      } else if (isDomRef(obj)) {
-        discoveredValues.push(obj.id);
+      } else if (isDomRef!(obj)) {
+        discoveredValues.push(obj.$ssrNode$.id);
       } else if (isJSXNode(obj)) {
         discoveredValues.push(obj.type, obj.props, obj.constProps, obj.children);
       } else if (Array.isArray(obj)) {
@@ -1113,7 +1115,8 @@ function serialize(serializationContext: SerializationContext): void {
         output(TypeIds.Object, out);
       }
     } else if ($isDomRef$(value)) {
-      output(TypeIds.RefVNode, value.id);
+      value.$ssrNode$.vnodeData[0] |= VNodeDataFlag.SERIALIZE;
+      output(TypeIds.RefVNode, value.$ssrNode$.id);
     } else if (value instanceof Signal) {
       /**
        * Special case: when a Signal value is an SSRNode, it always needs to be a DOM ref instead.
@@ -1538,6 +1541,8 @@ export const canSerialize = (value: any): boolean => {
       return true;
     } else if (value instanceof Uint8Array) {
       return true;
+    } else if (isDomRef?.(value)) {
+      return true;
     }
   } else if (typeof value === 'function') {
     if (isQrl(value) || isQwikComponent(value)) {

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

@@ -48,7 +48,7 @@ export interface Container {
       new (...rest: any[]): { nodeType: number; id: string };
     } | null,
     DomRefConstructor: {
-      new (...rest: any[]): { id: string };
+      new (...rest: any[]): { $ssrNode$: ISsrNode };
     } | null,
     symbolToChunkResolver: SymbolToChunkResolver,
     writer?: StreamWriter

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

@@ -1,6 +1,9 @@
 import {
   Fragment as Component,
   component$,
+  createContextId,
+  useContext,
+  useContextProvider,
   useSignal,
   useStore,
   useVisibleTask$,
@@ -129,4 +132,76 @@ describe.each([
     expect(isElement((globalThis as any).element[0])).toBeTruthy();
     (globalThis as any).element = undefined;
   });
+
+  describe('should serialize refs inside context', () => {
+    it('should serialize refs from child component', async () => {
+      (globalThis as any).element = [] as HTMLElement[];
+
+      const contextId = createContextId('test');
+
+      const Child = component$(() => {
+        const store = useContext<any>(contextId);
+        return <span ref={(element) => store.refs.push(element)}></span>;
+      });
+
+      const Parent = component$(() => {
+        const store = useStore({
+          refs: [],
+        });
+        useContextProvider(contextId, store);
+        useVisibleTask$(() => {
+          (globalThis as any).element.push(store.refs[0]);
+        });
+        return (
+          <div>
+            <Child />
+          </div>
+        );
+      });
+
+      const { document } = await render(<Parent />, { debug });
+
+      if (ssrRenderToDom === render) {
+        await trigger(document.body, 'div', 'qvisible');
+      }
+
+      expect(isElement((globalThis as any).element[0])).toBeTruthy();
+      (globalThis as any).element = undefined;
+    });
+
+    it('should serialize refs from parent component', async () => {
+      (globalThis as any).element = [] as HTMLElement[];
+
+      const contextId = createContextId('test');
+
+      const Child = component$(() => {
+        useContext<any>(contextId);
+        return <span></span>;
+      });
+
+      const Parent = component$(() => {
+        const store = useStore<any>({
+          refs: [],
+        });
+        useContextProvider(contextId, store);
+        useVisibleTask$(() => {
+          (globalThis as any).element.push(store.refs[0]);
+        });
+        return (
+          <div ref={(element) => store.refs.push(element)}>
+            <Child />
+          </div>
+        );
+      });
+
+      const { document } = await render(<Parent />, { debug });
+
+      if (ssrRenderToDom === render) {
+        await trigger(document.body, 'div', 'qvisible');
+      }
+
+      expect(isElement((globalThis as any).element[0])).toBeTruthy();
+      (globalThis as any).element = undefined;
+    });
+  });
 });

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

@@ -1126,10 +1126,10 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
         if (key === 'ref') {
           const lastNode = this.getLastNode();
           if (isSignal(value)) {
-            value.value = new DomRef(lastNode.id);
+            value.value = new DomRef(lastNode);
             continue;
           } else if (typeof value === 'function') {
-            value(new DomRef(lastNode.id));
+            value(new DomRef(lastNode));
             continue;
           }
         }

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

@@ -118,8 +118,7 @@ export class SsrNode implements ISsrNode {
 
 /** A ref to a DOM element */
 export class DomRef {
-  /** @id is the same id as for SsrNode */
-  constructor(public id: string) {}
+  constructor(public $ssrNode$: ISsrNode) {}
 }
 
 export type SsrNodeType = 1 | 3 | 9 | 11;