@sanity/sdk-react 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -48,10 +48,10 @@
     "@types/lodash-es": "^4.17.12",
     "groq": "3.86.2-experimental.0",
     "lodash-es": "^4.17.21",
-    "react-compiler-runtime": "19.0.0-beta-ebf51a3-20250411",
+    "react-compiler-runtime": "19.1.0-rc.1",
     "react-error-boundary": "^5.0.0",
     "rxjs": "^7.8.2",
-    "@sanity/sdk": "0.0.1"
+    "@sanity/sdk": "0.0.2"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
@@ -76,8 +76,8 @@
     "vitest": "^3.1.2",
     "@repo/config-eslint": "0.0.0",
     "@repo/package.bundle": "3.82.0",
-    "@repo/package.config": "0.0.1",
     "@repo/config-test": "0.0.1",
+    "@repo/package.config": "0.0.1",
     "@repo/tsconfig": "0.0.1"
   },
   "peerDependencies": {

package/src/_exports/sdk-react.ts

@@ -20,8 +20,6 @@ export {
   useFrameConnection,
   type UseFrameConnectionOptions,
 } from '../hooks/comlink/useFrameConnection'
-export {useManageFavorite} from '../hooks/comlink/useManageFavorite'
-export {useRecordDocumentHistoryEvent} from '../hooks/comlink/useRecordDocumentHistoryEvent'
 export {
   useWindowConnection,
   type UseWindowConnectionOptions,
@@ -29,10 +27,12 @@ export {
   type WindowMessageHandler,
 } from '../hooks/comlink/useWindowConnection'
 export {useSanityInstance} from '../hooks/context/useSanityInstance'
+export {useManageFavorite} from '../hooks/dashboard/useManageFavorite'
 export {
   type NavigateToStudioResult,
   useNavigateToStudioDocument,
 } from '../hooks/dashboard/useNavigateToStudioDocument'
+export {useRecordDocumentHistoryEvent} from '../hooks/dashboard/useRecordDocumentHistoryEvent'
 export {useStudioWorkspacesByProjectIdDataset} from '../hooks/dashboard/useStudioWorkspacesByProjectIdDataset'
 export {useDatasets} from '../hooks/datasets/useDatasets'
 export {useApplyDocumentActions} from '../hooks/document/useApplyDocumentActions'

package/src/hooks/comlink/useWindowConnection.test.tsx

@@ -0,0 +1,145 @@
+import {type Message, type Node} from '@sanity/comlink'
+import {getNodeState, type NodeState, type StateSource} from '@sanity/sdk'
+import {screen} from '@testing-library/react'
+import {Suspense} from 'react'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {render, renderHook} from '../../../test/test-utils'
+import {useWindowConnection} from './useWindowConnection'
+
+vi.mock('@sanity/sdk', async () => {
+  const actual = await vi.importActual('@sanity/sdk')
+  return {
+    ...actual,
+    getNodeState: vi.fn(),
+  }
+})
+
+interface TestMessage {
+  type: 'TEST_MESSAGE'
+  data: {someData: string}
+}
+
+interface AnotherMessage {
+  type: 'ANOTHER_MESSAGE'
+  data: {otherData: number}
+}
+
+type TestMessages = TestMessage | AnotherMessage
+
+describe('useWindowConnection', () => {
+  let node: Node<Message, Message>
+  let mockStateSource: StateSource<NodeState>
+  let stableNodeEntry: NodeState
+
+  function createMockNode() {
+    return {
+      on: vi.fn(() => () => {}),
+      post: vi.fn(),
+      stop: vi.fn(),
+    } as unknown as Node<Message, Message>
+  }
+
+  beforeEach(() => {
+    node = createMockNode()
+    stableNodeEntry = {node, status: 'connected'}
+    mockStateSource = {
+      subscribe: vi.fn((callback) => {
+        callback?.(stableNodeEntry)
+        return () => {}
+      }),
+      getCurrent: vi.fn(() => stableNodeEntry),
+      observable: {subscribe: vi.fn(() => ({unsubscribe: () => {}}))},
+    } as unknown as StateSource<NodeState>
+    vi.mocked(getNodeState).mockReturnValue(mockStateSource)
+  })
+
+  it('should register message handlers', () => {
+    const mockHandler = vi.fn()
+    const mockData = {someData: 'test'}
+
+    renderHook(() =>
+      useWindowConnection<TestMessages, TestMessages>({
+        name: 'test',
+        connectTo: 'window',
+        onMessage: {
+          TEST_MESSAGE: mockHandler,
+          ANOTHER_MESSAGE: vi.fn(),
+        },
+      }),
+    )
+
+    const onCallback = vi.mocked(node.on).mock.calls[0][1]
+    onCallback(mockData)
+
+    expect(mockHandler).toHaveBeenCalledWith(mockData)
+  })
+
+  it('should send messages through the node', () => {
+    const {result} = renderHook(() =>
+      useWindowConnection<TestMessages, TestMessages>({
+        name: 'test',
+        connectTo: 'window',
+      }),
+    )
+
+    result.current.sendMessage('TEST_MESSAGE', {someData: 'test'})
+    expect(node.post).toHaveBeenCalledWith('TEST_MESSAGE', {someData: 'test'})
+
+    result.current.sendMessage('ANOTHER_MESSAGE', {otherData: 123})
+    expect(node.post).toHaveBeenCalledWith('ANOTHER_MESSAGE', {otherData: 123})
+  })
+
+  it('should suspend and render fallback when node state is undefined', () => {
+    const suspenderPromise = Promise.resolve('resolved')
+    const mockStateSourceWithUndefined = {
+      subscribe: vi.fn(),
+      getCurrent: vi.fn(() => undefined),
+      observable: {
+        pipe: vi.fn(() => ({
+          subscribe: vi.fn(() => ({unsubscribe: () => {}})),
+          toPromise: () => suspenderPromise,
+        })),
+        subscribe: vi.fn(() => ({unsubscribe: () => {}})),
+      },
+    } as unknown as StateSource<NodeState>
+
+    vi.mocked(getNodeState).mockReturnValue(mockStateSourceWithUndefined)
+
+    function TestComponent() {
+      useWindowConnection<TestMessages, TestMessages>({
+        name: 'test',
+        connectTo: 'window',
+      })
+      return <div>Loaded</div>
+    }
+
+    render(
+      <Suspense fallback={<div>Loading...</div>}>
+        <TestComponent />
+      </Suspense>,
+    )
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+  })
+
+  it('should call node.fetch with correct arguments and return its result', async () => {
+    const mockFetch = vi.fn().mockResolvedValue('fetch-result')
+    node.fetch = mockFetch
+
+    const {result} = renderHook(() =>
+      useWindowConnection<TestMessages, TestMessages>({
+        name: 'test',
+        connectTo: 'window',
+      }),
+    )
+
+    const response = await result.current.fetch('TYPE', {foo: 'bar'}, {responseTimeout: 123})
+    expect(mockFetch).toHaveBeenCalledWith('TYPE', {foo: 'bar'}, {responseTimeout: 123})
+    expect(response).toBe('fetch-result')
+
+    const responseNoArgs = await result.current.fetch('TYPE')
+    expect(mockFetch).toHaveBeenCalledWith('TYPE', undefined, {})
+    expect(responseNoArgs).toBe('fetch-result')
+  })
+})

package/src/hooks/comlink/useWindowConnection.ts

@@ -1,8 +1,17 @@
-import {type MessageData, type Node, type Status} from '@sanity/comlink'
-import {type FrameMessage, getOrCreateNode, releaseNode, type WindowMessage} from '@sanity/sdk'
+import {type MessageData, type NodeInput} from '@sanity/comlink'
+import {
+  type FrameMessage,
+  getNodeState,
+  type NodeState,
+  type SanityInstance,
+  type StateSource,
+  type WindowMessage,
+} from '@sanity/sdk'
 import {useCallback, useEffect, useRef} from 'react'
+import {filter, firstValueFrom} from 'rxjs'
 
 import {useSanityInstance} from '../context/useSanityInstance'
+import {createStateSourceHook} from '../helpers/createStateSourceHook'
 
 /**
  * @internal
@@ -18,7 +27,6 @@ export interface UseWindowConnectionOptions<TMessage extends FrameMessage> {
   name: string
   connectTo: string
   onMessage?: Record<TMessage['type'], WindowMessageHandler<TMessage>>
-  onStatus?: (status: Status) => void
 }
 
 /**
@@ -40,6 +48,18 @@ export interface WindowConnection<TMessage extends WindowMessage> {
   ) => Promise<TResponse>
 }
 
+const useNodeState = createStateSourceHook({
+  getState: getNodeState as (
+    instance: SanityInstance,
+    nodeInput: NodeInput,
+  ) => StateSource<NodeState>,
+  shouldSuspend: (instance: SanityInstance, nodeInput: NodeInput) =>
+    getNodeState(instance, nodeInput).getCurrent() === undefined,
+  suspender: (instance: SanityInstance, nodeInput: NodeInput) => {
+    return firstValueFrom(getNodeState(instance, nodeInput).observable.pipe(filter(Boolean)))
+  },
+})
+
 /**
  * @internal
  * Hook to wrap a Comlink node in a React hook.
@@ -56,47 +76,32 @@ export function useWindowConnection<
   name,
   connectTo,
   onMessage,
-  onStatus,
 }: UseWindowConnectionOptions<TFrameMessage>): WindowConnection<TWindowMessage> {
-  const nodeRef = useRef<Node<TWindowMessage, TFrameMessage> | null>(null)
+  const {node} = useNodeState({name, connectTo})
   const messageUnsubscribers = useRef<(() => void)[]>([])
   const instance = useSanityInstance()
 
   useEffect(() => {
-    const node = getOrCreateNode(instance, {
-      name,
-      connectTo,
-    }) as unknown as Node<TWindowMessage, TFrameMessage>
-    nodeRef.current = node
-
-    const statusUnsubscribe = node.onStatus((eventStatus) => {
-      onStatus?.(eventStatus)
-    })
-
     if (onMessage) {
       Object.entries(onMessage).forEach(([type, handler]) => {
         const messageUnsubscribe = node.on(type, handler as WindowMessageHandler<TFrameMessage>)
-        messageUnsubscribers.current.push(messageUnsubscribe)
+        if (messageUnsubscribe) {
+          messageUnsubscribers.current.push(messageUnsubscribe)
+        }
       })
     }
 
     return () => {
-      statusUnsubscribe()
       messageUnsubscribers.current.forEach((unsubscribe) => unsubscribe())
       messageUnsubscribers.current = []
-      releaseNode(instance, name)
-      nodeRef.current = null
     }
-  }, [instance, name, connectTo, onMessage, onStatus])
+  }, [instance, name, onMessage, node])
 
   const sendMessage = useCallback(
     (type: TWindowMessage['type'], data?: Extract<TWindowMessage, {type: typeof type}>['data']) => {
-      if (!nodeRef.current) {
-        throw new Error('Cannot send message before connection is established')
-      }
-      nodeRef.current.post(type, data)
+      node.post(type, data)
     },
-    [],
+    [node],
   )
 
   const fetch = useCallback(
@@ -109,12 +114,9 @@ export function useWindowConnection<
         suppressWarnings?: boolean
       },
     ): Promise<TResponse> => {
-      if (!nodeRef.current) {
-        throw new Error('Cannot fetch before connection is established')
-      }
-      return nodeRef.current?.fetch(type, data, fetchOptions ?? {}) as Promise<TResponse>
+      return node.fetch(type, data, fetchOptions ?? {}) as Promise<TResponse>
     },
-    [],
+    [node],
   )
   return {
     sendMessage,

package/src/hooks/{comlink → dashboard}/useManageFavorite.test.ts

@@ -1,8 +1,7 @@
-import {type Message, type Node, type Status} from '@sanity/comlink'
+import {type Message} from '@sanity/comlink'
 import {
   type FavoriteStatusResponse,
   getFavoritesState,
-  getOrCreateNode,
   resolveFavoritesState,
   type SanityInstance,
 } from '@sanity/sdk'
@@ -10,6 +9,7 @@ import {BehaviorSubject} from 'rxjs'
 import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {act, renderHook} from '../../../test/test-utils'
+import {useWindowConnection, type WindowConnection} from '../comlink/useWindowConnection'
 import {useSanityInstance} from '../context/useSanityInstance'
 import {useManageFavorite} from './useManageFavorite'
 
@@ -17,8 +17,6 @@ vi.mock(import('@sanity/sdk'), async (importOriginal) => {
   const actual = await importOriginal()
   return {
     ...actual,
-    getOrCreateNode: vi.fn(),
-    releaseNode: vi.fn(),
     getFavoritesState: vi.fn(),
     resolveFavoritesState: vi.fn(),
   }
@@ -26,10 +24,14 @@ vi.mock(import('@sanity/sdk'), async (importOriginal) => {
 
 vi.mock('../context/useSanityInstance')
 
+vi.mock('../comlink/useWindowConnection', () => ({
+  useWindowConnection: vi.fn(),
+}))
+
 describe('useManageFavorite', () => {
-  let node: Node<Message, Message>
-  let statusCallback: ((status: Status) => void) | null = null
   let favoriteStatusSubject: BehaviorSubject<FavoriteStatusResponse>
+  let mockFetch: ReturnType<typeof vi.fn>
+  let mockSendMessage: ReturnType<typeof vi.fn>
 
   const mockDocumentHandle = {
     documentId: 'mock-id',
@@ -37,23 +39,8 @@ describe('useManageFavorite', () => {
     resourceType: 'studio' as const,
   }
 
-  function createMockNode() {
-    return {
-      on: vi.fn(() => () => {}),
-      fetch: vi.fn().mockImplementation(() => Promise.resolve({success: true})),
-      stop: vi.fn(),
-      onStatus: vi.fn((callback) => {
-        statusCallback = callback
-        return () => {}
-      }),
-    } as unknown as Node<Message, Message>
-  }
-
   beforeEach(() => {
-    statusCallback = null
     favoriteStatusSubject = new BehaviorSubject<FavoriteStatusResponse>({isFavorited: false})
-    node = createMockNode()
-    vi.mocked(getOrCreateNode).mockReturnValue(node)
 
     // Mock getFavoritesState
     vi.mocked(getFavoritesState).mockImplementation(() => ({
@@ -82,6 +69,17 @@ describe('useManageFavorite', () => {
         dataset: 'test',
       },
     } as unknown as SanityInstance)
+
+    // Mock useWindowConnection
+    mockFetch = vi.fn().mockResolvedValue({success: true})
+    mockSendMessage = vi.fn()
+    vi.mocked(useWindowConnection).mockImplementation(() => {
+      return {
+        fetch: (type: string, data?: unknown, options: unknown = {}) =>
+          mockFetch(type, data, options),
+        sendMessage: mockSendMessage,
+      }
+    })
   })
 
   afterEach(() => {
@@ -93,7 +91,6 @@ describe('useManageFavorite', () => {
     const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
 
     expect(result.current.isFavorited).toBe(false)
-    expect(result.current.isConnected).toBe(false)
   })
 
   it('should handle favorite action and update state', async () => {
@@ -101,16 +98,11 @@ describe('useManageFavorite', () => {
 
     expect(result.current.isFavorited).toBe(false)
 
-    // Simulate connection first
-    act(() => {
-      statusCallback?.('connected')
-    })
-
     await act(async () => {
       await result.current.favorite()
     })
 
-    expect(node.fetch).toHaveBeenCalledWith(
+    expect(mockFetch).toHaveBeenCalledWith(
       'dashboard/v1/events/favorite/mutate',
       {
         document: {
@@ -140,16 +132,11 @@ describe('useManageFavorite', () => {
 
     expect(result.current.isFavorited).toBe(true)
 
-    // Simulate connection first
-    act(() => {
-      statusCallback?.('connected')
-    })
-
     await act(async () => {
       await result.current.unfavorite()
     })
 
-    expect(node.fetch).toHaveBeenCalledWith(
+    expect(mockFetch).toHaveBeenCalledWith(
       'dashboard/v1/events/favorite/mutate',
       {
         document: {
@@ -169,7 +156,7 @@ describe('useManageFavorite', () => {
   })
 
   it('should not update state if favorite action fails', async () => {
-    vi.mocked(node.fetch).mockImplementationOnce(() => Promise.resolve({success: false}))
+    mockFetch.mockResolvedValueOnce({success: false})
 
     const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
 
@@ -186,16 +173,12 @@ describe('useManageFavorite', () => {
   it('should throw error during favorite/unfavorite actions', async () => {
     const errorMessage = 'Failed to update favorite status'
 
-    vi.mocked(node.fetch).mockImplementation(() => {
+    mockFetch.mockImplementation(() => {
       throw new Error(errorMessage)
     })
 
     const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
 
-    await act(async () => {
-      statusCallback?.('connected')
-    })
-
     await act(async () => {
       await expect(result.current.favorite()).rejects.toThrow(errorMessage)
     })
@@ -210,18 +193,6 @@ describe('useManageFavorite', () => {
     expect(resolveFavoritesState).not.toHaveBeenCalled()
   })
 
-  it('should update connection status', () => {
-    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
-
-    expect(result.current.isConnected).toBe(false)
-
-    act(() => {
-      statusCallback?.('connected')
-    })
-
-    expect(result.current.isConnected).toBe(true)
-  })
-
   it('should throw error when studio resource is missing projectId or dataset', () => {
     // Mock the Sanity instance to not have projectId or dataset
     vi.mocked(useSanityInstance).mockReturnValue({
@@ -255,114 +226,93 @@ describe('useManageFavorite', () => {
     )
   })
 
-  it('should handle favorites service timeout gracefully', async () => {
-    // Mock both state functions for timeout scenario
-    vi.mocked(getFavoritesState).mockImplementationOnce(() => ({
-      subscribe: () => () => {},
-      getCurrent: () => undefined, // This will trigger the resolveFavoritesState call
-      observable: favoriteStatusSubject.asObservable(),
-    }))
-
-    vi.mocked(resolveFavoritesState).mockImplementationOnce(() => {
-      throw new Error('Favorites service connection timeout')
-    })
-
-    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
-
-    // Should return fallback state instead of suspending
-    expect(result.current).toEqual({
-      favorite: expect.any(Function),
-      unfavorite: expect.any(Function),
-      isFavorited: false,
-      isConnected: false,
-    })
+  it('should include schemaName in payload when provided', async () => {
+    const mockDocumentHandleWithSchema = {
+      ...mockDocumentHandle,
+      schemaName: 'testSchema',
+    }
+    const {result} = renderHook(() => useManageFavorite(mockDocumentHandleWithSchema))
 
-    // Favorite and unfavorite actions should be a no-op
     await act(async () => {
       await result.current.favorite()
     })
 
-    expect(node.fetch).not.toHaveBeenCalled()
-
-    await act(async () => {
-      await result.current.unfavorite()
-    })
-
-    expect(node.fetch).not.toHaveBeenCalled()
+    expect(mockFetch).toHaveBeenCalledWith(
+      'dashboard/v1/events/favorite/mutate',
+      {
+        document: {
+          id: 'mock-id',
+          type: 'mock-type',
+          resource: {
+            id: 'test.test',
+            type: 'studio',
+            schemaName: 'testSchema',
+          },
+        },
+        eventType: 'added',
+      },
+      {},
+    )
   })
 
-  it('should still throw non-timeout errors for suspension', async () => {
+  it('should default isFavorited to false if state is undefined', () => {
+    // Mock getFavoritesState to return undefined for getCurrent
     vi.mocked(getFavoritesState).mockImplementation(() => ({
-      subscribe: () => () => {},
-      getCurrent: () => undefined, // This will trigger the resolveFavoritesState call
+      subscribe: (callback?: () => void) => {
+        if (!callback) return () => {}
+        callback()
+        return () => {}
+      },
+      getCurrent: () => undefined,
       observable: favoriteStatusSubject.asObservable(),
     }))
-
-    // Mock resolveFavoritesState to throw
-    const error = new Error('Some other error')
-    vi.mocked(resolveFavoritesState).mockImplementation(() => {
-      throw error
-    })
-
-    expect(() => {
-      renderHook(() => useManageFavorite(mockDocumentHandle))
-    }).toThrow(error)
+    const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
+    expect(result.current.isFavorited).toBe(false)
   })
 
-  it('should not call fetch if connection is not established', async () => {
+  it('should do nothing if fetch is missing', async () => {
+    vi.mocked(useWindowConnection).mockReturnValue({
+      fetch: undefined,
+      sendMessage: mockSendMessage,
+    } as unknown as WindowConnection<Message>)
     const {result} = renderHook(() => useManageFavorite(mockDocumentHandle))
-
-    // Ensure connection is not established
-    expect(result.current.isConnected).toBe(false)
-
-    // Try to favorite
     await act(async () => {
       await result.current.favorite()
+      await result.current.unfavorite()
     })
+    expect(mockFetch).not.toHaveBeenCalled()
+  })
 
-    // Fetch should not have been called due to the new status check
-    expect(node.fetch).not.toHaveBeenCalled()
-
-    // Try to unfavorite
+  it('should do nothing if documentId is missing', async () => {
+    const handle = {...mockDocumentHandle, documentId: undefined}
+    // @ts-expect-error -- no access to ManageFavorite props type
+    const {result} = renderHook(() => useManageFavorite(handle))
     await act(async () => {
+      await result.current.favorite()
       await result.current.unfavorite()
     })
-
-    // Fetch should still not have been called
-    expect(node.fetch).not.toHaveBeenCalled()
+    expect(mockFetch).not.toHaveBeenCalled()
   })
 
-  it('should include schemaName in payload when provided', async () => {
-    const mockDocumentHandleWithSchema = {
-      ...mockDocumentHandle,
-      schemaName: 'testSchema',
-    }
-    const {result} = renderHook(() => useManageFavorite(mockDocumentHandleWithSchema))
-
-    // Simulate connection first
-    act(() => {
-      statusCallback?.('connected')
+  it('should do nothing if documentType is missing', async () => {
+    const handle = {...mockDocumentHandle, documentType: undefined}
+    // @ts-expect-error -- no access to ManageFavorite props type
+    const {result} = renderHook(() => useManageFavorite(handle))
+    await act(async () => {
+      await result.current.favorite()
+      await result.current.unfavorite()
     })
+    expect(mockFetch).not.toHaveBeenCalled()
+  })
 
+  it('should do nothing if resourceType is missing', async () => {
+    const handle = {...mockDocumentHandle, resourceType: undefined, resourceId: 'studio'}
+    // @ts-expect-error -- no access to ManageFavorite props type
+    const {result} = renderHook(() => useManageFavorite(handle))
     await act(async () => {
       await result.current.favorite()
+      await result.current.unfavorite()
     })
-
-    expect(node.fetch).toHaveBeenCalledWith(
-      'dashboard/v1/events/favorite/mutate',
-      {
-        document: {
-          id: 'mock-id',
-          type: 'mock-type',
-          resource: {
-            id: 'test.test',
-            type: 'studio',
-            schemaName: 'testSchema', // <-- Expect schemaName here
-          },
-        },
-        eventType: 'added',
-      },
-      {},
-    )
+    expect(mockFetch).not.toHaveBeenCalled()
   })
 })