fix: ensure usePreview and useProjection hooks subscribe if no ref is passed (#366)

Author: ricokahler

packages/react/src/hooks/preview/usePreview.test.tsx

@@ -172,4 +172,63 @@ describe('usePreview', () => {
     // Restore IntersectionObserver
     window.IntersectionObserver = originalIntersectionObserver
   })
+
+  test('it subscribes immediately when no ref is provided', async () => {
+    getCurrent.mockReturnValue({
+      data: {title: 'Title', subtitle: 'Subtitle'},
+      isPending: false,
+    })
+    const eventsUnsubscribe = vi.fn()
+    subscribe.mockImplementation(() => eventsUnsubscribe)
+
+    function NoRefComponent(docHandle: DocumentHandle) {
+      const {data} = usePreview(docHandle) // No ref provided
+      return (
+        <div>
+          <h1>{data?.title}</h1>
+          <p>{data?.subtitle}</p>
+        </div>
+      )
+    }
+
+    render(
+      <Suspense fallback={<div>Loading...</div>}>
+        <NoRefComponent {...mockDocument} />
+      </Suspense>,
+    )
+
+    // Should subscribe immediately without waiting for intersection
+    expect(subscribe).toHaveBeenCalled()
+    expect(screen.getByText('Title')).toBeInTheDocument()
+  })
+
+  test('it subscribes immediately when ref.current is not an HTML element', async () => {
+    getCurrent.mockReturnValue({
+      data: {title: 'Title', subtitle: 'Subtitle'},
+      isPending: false,
+    })
+    const eventsUnsubscribe = vi.fn()
+    subscribe.mockImplementation(() => eventsUnsubscribe)
+
+    function NonHtmlRefComponent(docHandle: DocumentHandle) {
+      const ref = useRef({}) // ref.current is not an HTML element
+      const {data} = usePreview({...docHandle, ref})
+      return (
+        <div>
+          <h1>{data?.title}</h1>
+          <p>{data?.subtitle}</p>
+        </div>
+      )
+    }
+
+    render(
+      <Suspense fallback={<div>Loading...</div>}>
+        <NonHtmlRefComponent {...mockDocument} />
+      </Suspense>,
+    )
+
+    // Should subscribe immediately without waiting for intersection
+    expect(subscribe).toHaveBeenCalled()
+    expect(screen.getByText('Title')).toBeInTheDocument()
+  })
 })

packages/react/src/hooks/preview/usePreview.tsx

@@ -79,8 +79,10 @@ export function usePreview({ref, ...docHandle}: UsePreviewOptions): UsePreviewRe
   const subscribe = useCallback(
     (onStoreChanged: () => void) => {
       const subscription = new Observable<boolean>((observer) => {
-        // for environments that don't have an intersection observer
+        // For environments that don't have an intersection observer (e.g. server-side),
+        // we pass true to always subscribe since we can't detect visibility
         if (typeof IntersectionObserver === 'undefined' || typeof HTMLElement === 'undefined') {
+          observer.next(true)
           return
         }
 
@@ -90,6 +92,10 @@ export function usePreview({ref, ...docHandle}: UsePreviewOptions): UsePreviewRe
         )
         if (ref?.current && ref.current instanceof HTMLElement) {
           intersectionObserver.observe(ref.current)
+        } else {
+          // If no ref is provided or ref.current isn't an HTML element,
+          // pass true to always subscribe since we can't track visibility
+          observer.next(true)
         }
         return () => intersectionObserver.disconnect()
       })

packages/react/src/hooks/projection/useProjection.test.tsx

@@ -215,4 +215,69 @@ describe('useProjection', () => {
     expect(screen.getByText('Updated Title')).toBeInTheDocument()
     expect(screen.getByText('Added Description')).toBeInTheDocument()
   })
+
+  test('it subscribes immediately when no ref is provided', async () => {
+    getCurrent.mockReturnValue({
+      data: {title: 'Title', description: 'Description'},
+      isPending: false,
+    })
+    const eventsUnsubscribe = vi.fn()
+    subscribe.mockImplementation(() => eventsUnsubscribe)
+
+    function NoRefComponent({
+      projection,
+      ...docHandle
+    }: DocumentHandle & {projection: ValidProjection}) {
+      const {data} = useProjection<ProjectionResult>({...docHandle, projection}) // No ref provided
+      return (
+        <div>
+          <h1>{data.title}</h1>
+          <p>{data.description}</p>
+        </div>
+      )
+    }
+
+    render(
+      <Suspense fallback={<div>Loading...</div>}>
+        <NoRefComponent {...mockDocument} projection="{title, description}" />
+      </Suspense>,
+    )
+
+    // Should subscribe immediately without waiting for intersection
+    expect(subscribe).toHaveBeenCalled()
+    expect(screen.getByText('Title')).toBeInTheDocument()
+  })
+
+  test('it subscribes immediately when ref.current is not an HTML element', async () => {
+    getCurrent.mockReturnValue({
+      data: {title: 'Title', description: 'Description'},
+      isPending: false,
+    })
+    const eventsUnsubscribe = vi.fn()
+    subscribe.mockImplementation(() => eventsUnsubscribe)
+
+    function NonHtmlRefComponent({
+      projection,
+      ...docHandle
+    }: DocumentHandle & {projection: ValidProjection}) {
+      const ref = useRef({}) // ref.current is not an HTML element
+      const {data} = useProjection<ProjectionResult>({...docHandle, projection, ref})
+      return (
+        <div>
+          <h1>{data.title}</h1>
+          <p>{data.description}</p>
+        </div>
+      )
+    }
+
+    render(
+      <Suspense fallback={<div>Loading...</div>}>
+        <NonHtmlRefComponent {...mockDocument} projection="{title, description}" />
+      </Suspense>,
+    )
+
+    // Should subscribe immediately without waiting for intersection
+    expect(subscribe).toHaveBeenCalled()
+    expect(screen.getByText('Title')).toBeInTheDocument()
+  })
 })

packages/react/src/hooks/projection/useProjection.ts

@@ -102,8 +102,10 @@ export function useProjection<TData extends object>({
   const subscribe = useCallback(
     (onStoreChanged: () => void) => {
       const subscription = new Observable<boolean>((observer) => {
-        // for environments that don't have an intersection observer
+        // For environments that don't have an intersection observer (e.g. server-side),
+        // we pass true to always subscribe since we can't detect visibility
         if (typeof IntersectionObserver === 'undefined' || typeof HTMLElement === 'undefined') {
+          observer.next(true)
           return
         }
 
@@ -113,6 +115,10 @@ export function useProjection<TData extends object>({
         )
         if (ref?.current && ref.current instanceof HTMLElement) {
           intersectionObserver.observe(ref.current)
+        } else {
+          // If no ref is provided or ref.current isn't an HTML element,
+          // pass true to always subscribe since we can't track visibility
+          observer.next(true)
         }
         return () => intersectionObserver.disconnect()
       })