@sanity/sdk-react 2.5.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -45,14 +45,14 @@
   "dependencies": {
     "@sanity/client": "^7.12.0",
     "@sanity/message-protocol": "^0.18.0",
-    "@sanity/types": "^3.83.0",
+    "@sanity/types": "^5.2.0",
     "@types/lodash-es": "^4.17.12",
     "groq": "3.88.1-typegen-experimental.0",
     "lodash-es": "^4.17.21",
     "react-compiler-runtime": "19.1.0-rc.2",
     "react-error-boundary": "^5.0.0",
     "rxjs": "^7.8.2",
-    "@sanity/sdk": "2.5.0"
+    "@sanity/sdk": "2.6.0"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
@@ -79,9 +79,9 @@
     "vitest": "^3.2.4",
     "@repo/config-eslint": "0.0.0",
     "@repo/config-test": "0.0.1",
+    "@repo/package.bundle": "3.82.0",
     "@repo/package.config": "0.0.1",
-    "@repo/tsconfig": "0.0.1",
-    "@repo/package.bundle": "3.82.0"
+    "@repo/tsconfig": "0.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/_exports/sdk-react.ts

@@ -5,6 +5,7 @@ export {AuthBoundary, type AuthBoundaryProps} from '../components/auth/AuthBound
 export {SanityApp, type SanityAppProps} from '../components/SanityApp'
 export {SDKProvider, type SDKProviderProps} from '../components/SDKProvider'
 export {ComlinkTokenRefreshProvider} from '../context/ComlinkTokenRefresh'
+export {renderSanityApp} from '../context/renderSanityApp'
 export {ResourceProvider, type ResourceProviderProps} from '../context/ResourceProvider'
 export {
   useAgentGenerate,

package/src/components/SDKProvider.tsx

@@ -1,7 +1,8 @@
-import {type SanityConfig} from '@sanity/sdk'
-import {type ReactElement, type ReactNode} from 'react'
+import {type DocumentSource, type SanityConfig} from '@sanity/sdk'
+import {type ReactElement, type ReactNode, useMemo} from 'react'
 
 import {ResourceProvider} from '../context/ResourceProvider'
+import {SourcesContext} from '../context/SourcesContext'
 import {AuthBoundary, type AuthBoundaryProps} from './auth/AuthBoundary'
 
 /**
@@ -11,6 +12,7 @@ export interface SDKProviderProps extends AuthBoundaryProps {
   children: ReactNode
   config: SanityConfig | SanityConfig[]
   fallback: ReactNode
+  sources?: Record<string, DocumentSource>
 }
 
 /**
@@ -31,12 +33,15 @@ export function SDKProvider({
   const configs = (Array.isArray(config) ? config : [config]).slice().reverse()
   const projectIds = configs.map((c) => c.projectId).filter((id): id is string => !!id)
 
+  // Memoize sources to prevent creating a new empty object on every render
+  const sourcesValue = useMemo(() => props.sources ?? {}, [props.sources])
+
   // Create a nested structure of ResourceProviders for each config
   const createNestedProviders = (index: number): ReactElement => {
     if (index >= configs.length) {
       return (
         <AuthBoundary {...props} projectIds={projectIds}>
-          {children}
+          <SourcesContext.Provider value={sourcesValue}>{children}</SourcesContext.Provider>
         </AuthBoundary>
       )
     }

package/src/components/SanityApp.tsx

@@ -1,4 +1,4 @@
-import {type SanityConfig} from '@sanity/sdk'
+import {type DocumentSource, type SanityConfig} from '@sanity/sdk'
 import {type ReactElement, useEffect} from 'react'
 
 import {SDKProvider} from './SDKProvider'
@@ -13,6 +13,7 @@ export interface SanityAppProps {
   config: SanityConfig | SanityConfig[]
   /** @deprecated use the `config` prop instead. */
   sanityConfigs?: SanityConfig[]
+  sources?: Record<string, DocumentSource>
   children: React.ReactNode
   /* Fallback content to show when child components are suspending. Same as the `fallback` prop for React Suspense. */
   fallback: React.ReactNode

package/src/context/SourcesContext.tsx

@@ -0,0 +1,7 @@
+import {type DocumentSource} from '@sanity/sdk'
+import {createContext} from 'react'
+
+/** Context for sources.
+ * @beta
+ */
+export const SourcesContext = createContext<Record<string, DocumentSource>>({})

package/src/context/renderSanityApp.test.tsx

@@ -0,0 +1,355 @@
+import {type SanityConfig} from '@sanity/sdk'
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {SanityApp} from '../components/SanityApp'
+import {renderSanityApp} from './renderSanityApp'
+
+// Hoist the mock functions
+const mockRender = vi.hoisted(() => vi.fn())
+const mockUnmount = vi.hoisted(() => vi.fn())
+const mockCreateRoot = vi.hoisted(() =>
+  vi.fn(() => ({
+    render: mockRender,
+    unmount: mockUnmount,
+  })),
+)
+
+// Mock the SanityApp component
+vi.mock('../components/SanityApp', () => ({
+  SanityApp: vi.fn(({children}) => <div data-testid="sanity-app">{children}</div>),
+}))
+
+// Mock react-dom/client
+vi.mock('react-dom/client', () => ({
+  createRoot: mockCreateRoot,
+}))
+
+describe('renderSanityApp', () => {
+  let rootElement: HTMLElement | null
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockRender.mockClear()
+    mockUnmount.mockClear()
+    mockCreateRoot.mockClear()
+    rootElement = document.createElement('div')
+    document.body.appendChild(rootElement)
+  })
+
+  afterEach(() => {
+    if (rootElement && rootElement.parentNode) {
+      document.body.removeChild(rootElement)
+    }
+    rootElement = null
+  })
+
+  it('throws error when rootElement is null', () => {
+    const namedSources = {
+      main: {projectId: 'test-project', dataset: 'production'},
+    }
+
+    expect(() => renderSanityApp(null, namedSources, {}, <div>Test</div>)).toThrowError(
+      'Missing root element to mount application into',
+    )
+  })
+
+  it('creates root with the provided element', () => {
+    const namedSources = {
+      main: {projectId: 'test-project', dataset: 'production'},
+    }
+
+    renderSanityApp(rootElement, namedSources, {}, <div>Test</div>)
+
+    expect(mockCreateRoot).toHaveBeenCalledWith(rootElement)
+    expect(mockCreateRoot).toHaveBeenCalledTimes(1)
+  })
+
+  it('converts namedSources object to array of configs', () => {
+    const namedSources = {
+      main: {projectId: 'project-1', dataset: 'production'},
+      secondary: {projectId: 'project-2', dataset: 'staging'},
+    }
+
+    renderSanityApp(rootElement, namedSources, {}, <div>Test</div>)
+
+    expect(mockRender).toHaveBeenCalledTimes(1)
+    const renderCall = mockRender.mock.calls[0][0]
+    expect(renderCall).toBeDefined()
+
+    // The renderCall is the SanityApp component directly when not using StrictMode
+    expect(renderCall.type).toBe(SanityApp)
+    expect(renderCall.props.config).toEqual([
+      {projectId: 'project-1', dataset: 'production'},
+      {projectId: 'project-2', dataset: 'staging'},
+    ])
+  })
+
+  it('renders without StrictMode when reactStrictMode is false', () => {
+    const namedSources = {
+      main: {projectId: 'test-project', dataset: 'production'},
+    }
+    const children = <div>Test Children</div>
+
+    renderSanityApp(rootElement, namedSources, {reactStrictMode: false}, children)
+
+    expect(mockRender).toHaveBeenCalledTimes(1)
+    const renderCall = mockRender.mock.calls[0][0]
+
+    // Should not have StrictMode wrapper
+    expect(renderCall.type).toBe(SanityApp)
+    expect(renderCall.props.children).toEqual(children)
+  })
+
+  it('renders without StrictMode by default', () => {
+    const namedSources = {
+      main: {projectId: 'test-project', dataset: 'production'},
+    }
+    const children = <div>Test Children</div>
+
+    renderSanityApp(rootElement, namedSources, {}, children)
+
+    expect(mockRender).toHaveBeenCalledTimes(1)
+    const renderCall = mockRender.mock.calls[0][0]
+
+    // Should not have StrictMode wrapper when not specified
+    expect(renderCall.type).toBe(SanityApp)
+    expect(renderCall.props.children).toEqual(children)
+  })
+
+  it('renders with StrictMode when reactStrictMode is true', () => {
+    const namedSources = {
+      main: {projectId: 'test-project', dataset: 'production'},
+    }
+    const children = <div>Test Children</div>
+
+    renderSanityApp(rootElement, namedSources, {reactStrictMode: true}, children)
+
+    expect(mockRender).toHaveBeenCalledTimes(1)
+    const renderCall = mockRender.mock.calls[0][0]
+
+    // Should have StrictMode wrapper (StrictMode is a Symbol in React 18)
+    expect(renderCall.type).toBeDefined()
+    expect(renderCall.type.toString()).toContain('Symbol')
+    const strictModeChild = renderCall.props.children
+    expect(strictModeChild.type).toBe(SanityApp)
+    expect(strictModeChild.props.children).toEqual(children)
+  })
+
+  it('passes loading fallback to SanityApp', () => {
+    const namedSources = {
+      main: {projectId: 'test-project', dataset: 'production'},
+    }
+
+    renderSanityApp(rootElement, namedSources, {}, <div>Test</div>)
+
+    expect(mockRender).toHaveBeenCalledTimes(1)
+    const renderCall = mockRender.mock.calls[0][0]
+    const sanityAppElement = renderCall
+
+    expect(sanityAppElement.type).toBe(SanityApp)
+    expect(sanityAppElement.props.fallback).toEqual(<div>Loading...</div>)
+  })
+
+  it('returns an unmount function', () => {
+    const namedSources = {
+      main: {projectId: 'test-project', dataset: 'production'},
+    }
+
+    const unmount = renderSanityApp(rootElement, namedSources, {}, <div>Test</div>)
+
+    expect(typeof unmount).toBe('function')
+  })
+
+  it('calls root.unmount when unmount function is invoked', () => {
+    const namedSources = {
+      main: {projectId: 'test-project', dataset: 'production'},
+    }
+
+    const unmount = renderSanityApp(rootElement, namedSources, {}, <div>Test</div>)
+
+    expect(mockUnmount).not.toHaveBeenCalled()
+    unmount()
+    expect(mockUnmount).toHaveBeenCalledTimes(1)
+  })
+
+  it('handles empty namedSources object', () => {
+    const namedSources = {}
+
+    renderSanityApp(rootElement, namedSources, {}, <div>Test</div>)
+
+    expect(mockRender).toHaveBeenCalledTimes(1)
+    const renderCall = mockRender.mock.calls[0][0]
+    const sanityAppElement = renderCall
+
+    expect(sanityAppElement.type).toBe(SanityApp)
+    expect(sanityAppElement.props.config).toEqual([])
+  })
+
+  it('handles single namedSource', () => {
+    const namedSources = {
+      main: {projectId: 'test-project', dataset: 'production'},
+    }
+
+    renderSanityApp(rootElement, namedSources, {}, <div>Test</div>)
+
+    expect(mockRender).toHaveBeenCalledTimes(1)
+    const renderCall = mockRender.mock.calls[0][0]
+    const sanityAppElement = renderCall
+
+    expect(sanityAppElement.type).toBe(SanityApp)
+    expect(sanityAppElement.props.config).toEqual([
+      {projectId: 'test-project', dataset: 'production'},
+    ])
+  })
+
+  it('handles multiple namedSources', () => {
+    const namedSources = {
+      main: {projectId: 'project-1', dataset: 'production'},
+      blog: {projectId: 'project-2', dataset: 'staging'},
+      ecommerce: {projectId: 'project-3', dataset: 'development'},
+    }
+
+    renderSanityApp(rootElement, namedSources, {}, <div>Test</div>)
+
+    expect(mockRender).toHaveBeenCalledTimes(1)
+    const renderCall = mockRender.mock.calls[0][0]
+    const sanityAppElement = renderCall
+
+    expect(sanityAppElement.type).toBe(SanityApp)
+    expect(sanityAppElement.props.config).toHaveLength(3)
+    expect(sanityAppElement.props.config).toEqual([
+      {projectId: 'project-1', dataset: 'production'},
+      {projectId: 'project-2', dataset: 'staging'},
+      {projectId: 'project-3', dataset: 'development'},
+    ])
+  })
+
+  it('preserves order of namedSources in config array', () => {
+    const namedSources = {
+      z: {projectId: 'project-z', dataset: 'z-dataset'},
+      a: {projectId: 'project-a', dataset: 'a-dataset'},
+      m: {projectId: 'project-m', dataset: 'm-dataset'},
+    }
+
+    renderSanityApp(rootElement, namedSources, {}, <div>Test</div>)
+
+    const renderCall = mockRender.mock.calls[0][0]
+    const sanityAppElement = renderCall
+
+    // Object.values preserves insertion order in modern JS
+    expect(sanityAppElement.props.config).toEqual([
+      {projectId: 'project-z', dataset: 'z-dataset'},
+      {projectId: 'project-a', dataset: 'a-dataset'},
+      {projectId: 'project-m', dataset: 'm-dataset'},
+    ])
+  })
+
+  it('passes children to SanityApp', () => {
+    const namedSources = {
+      main: {projectId: 'test-project', dataset: 'production'},
+    }
+    const children = (
+      <div>
+        <h1>Test App</h1>
+        <p>Content</p>
+      </div>
+    )
+
+    renderSanityApp(rootElement, namedSources, {}, children)
+
+    const renderCall = mockRender.mock.calls[0][0]
+    const sanityAppElement = renderCall
+
+    expect(sanityAppElement.props.children).toEqual(children)
+  })
+
+  it('works with different types of children', () => {
+    const namedSources = {
+      main: {projectId: 'test-project', dataset: 'production'},
+    }
+
+    // Test with string children
+    renderSanityApp(rootElement, namedSources, {}, 'String child')
+
+    let renderCall = mockRender.mock.calls[0][0]
+    let sanityAppElement = renderCall
+
+    expect(sanityAppElement.props.children).toBe('String child')
+
+    // Test with null children
+    mockRender.mockClear()
+    renderSanityApp(rootElement, namedSources, {}, null)
+
+    renderCall = mockRender.mock.calls[0][0]
+    sanityAppElement = renderCall
+
+    expect(sanityAppElement.props.children).toBe(null)
+
+    // Test with array of children
+    mockRender.mockClear()
+    const arrayChildren = [<div key="1">Child 1</div>, <div key="2">Child 2</div>]
+    renderSanityApp(rootElement, namedSources, {}, arrayChildren)
+
+    renderCall = mockRender.mock.calls[0][0]
+    sanityAppElement = renderCall
+
+    expect(sanityAppElement.props.children).toEqual(arrayChildren)
+  })
+
+  it('integrates with StrictMode and passes all props correctly', () => {
+    const namedSources = {
+      main: {
+        projectId: 'test-project',
+        dataset: 'production',
+        apiVersion: '2023-01-01',
+      } as SanityConfig,
+      secondary: {
+        projectId: 'test-project-2',
+        dataset: 'staging',
+      } as SanityConfig,
+    }
+    const children = <div>App Content</div>
+
+    renderSanityApp(rootElement, namedSources, {reactStrictMode: true}, children)
+
+    const renderCall = mockRender.mock.calls[0][0]
+
+    // Verify StrictMode wrapper (StrictMode is a Symbol in React 18)
+    expect(renderCall.type).toBeDefined()
+    expect(renderCall.type.toString()).toContain('Symbol')
+
+    // Verify SanityApp is inside StrictMode
+    const strictModeChild = renderCall.props.children
+    expect(strictModeChild.type).toBe(SanityApp)
+
+    // Verify all props are passed correctly
+    expect(strictModeChild.props.config).toEqual([
+      {projectId: 'test-project', dataset: 'production', apiVersion: '2023-01-01'},
+      {projectId: 'test-project-2', dataset: 'staging'},
+    ])
+    expect(strictModeChild.props.fallback).toEqual(<div>Loading...</div>)
+    expect(strictModeChild.props.children).toEqual(children)
+  })
+
+  it('can be called multiple times with different roots', () => {
+    const rootElement2 = document.createElement('div')
+    document.body.appendChild(rootElement2)
+
+    const namedSources1 = {main: {projectId: 'project-1', dataset: 'production'}}
+    const namedSources2 = {main: {projectId: 'project-2', dataset: 'staging'}}
+
+    const unmount1 = renderSanityApp(rootElement, namedSources1, {}, <div>App 1</div>)
+    const unmount2 = renderSanityApp(rootElement2, namedSources2, {}, <div>App 2</div>)
+
+    expect(mockCreateRoot).toHaveBeenCalledTimes(2)
+    expect(mockCreateRoot).toHaveBeenNthCalledWith(1, rootElement)
+    expect(mockCreateRoot).toHaveBeenNthCalledWith(2, rootElement2)
+
+    unmount1()
+    unmount2()
+
+    expect(mockUnmount).toHaveBeenCalledTimes(2)
+
+    document.body.removeChild(rootElement2)
+  })
+})

package/src/context/renderSanityApp.tsx

@@ -0,0 +1,48 @@
+import {type SanityConfig} from '@sanity/sdk'
+import {StrictMode} from 'react'
+import {createRoot} from 'react-dom/client'
+
+import {SanityApp} from '../components/SanityApp'
+
+interface RenderSanitySDKAppOptions {
+  reactStrictMode?: boolean
+}
+
+/** In-flight CLI PR is using named sources since it's aspirational.
+ *  We can transform the shape in this function until it's finalized.
+ */
+interface NamedSources {
+  [key: string]: SanityConfig
+}
+/** @internal */
+export function renderSanityApp(
+  rootElement: HTMLElement | null,
+  namedSources: NamedSources,
+  options: RenderSanitySDKAppOptions,
+  children: React.ReactNode,
+): () => void {
+  if (!rootElement) {
+    throw new Error('Missing root element to mount application into')
+  }
+  const {reactStrictMode = false} = options
+
+  const root = createRoot(rootElement)
+  const config = Object.values(namedSources)
+
+  root.render(
+    reactStrictMode ? (
+      <StrictMode>
+        {/* TODO: think about a loading component we want to be "universal" */}
+        <SanityApp config={config} fallback={<div>Loading...</div>}>
+          {children}
+        </SanityApp>
+      </StrictMode>
+    ) : (
+      <SanityApp config={config} fallback={<div>Loading...</div>}>
+        {children}
+      </SanityApp>
+    ),
+  )
+
+  return () => root.unmount()
+}

package/src/hooks/context/useSource.tsx

@@ -0,0 +1,34 @@
+import {type DatasetHandle, type DocumentHandle, type DocumentSource} from '@sanity/sdk'
+import {useContext} from 'react'
+
+import {SourcesContext} from '../../context/SourcesContext'
+
+/** Retrieves the named source from context.
+ * @beta
+ * @param name - The name of the source to retrieve.
+ * @returns The source.
+ * @example
+ * ```tsx
+ * const source = useSource('my-source')
+ * ```
+ */
+export function useSource(options: DocumentHandle | DatasetHandle): DocumentSource | undefined {
+  const sources = useContext(SourcesContext)
+
+  // this might return the "default" source in the future once we implement it?
+  if (!options.sourceName && !options.source) {
+    return undefined
+  }
+
+  if (options.source) {
+    return options.source
+  }
+
+  if (options.sourceName && !Object.hasOwn(sources, options.sourceName)) {
+    throw new Error(
+      `There's no source named ${JSON.stringify(options.sourceName)} in context. Please use <SourceProvider>.`,
+    )
+  }
+
+  return options.sourceName ? sources[options.sourceName] : undefined
+}

package/src/hooks/dashboard/useDispatchIntent.test.ts

@@ -1,8 +1,7 @@
-import {canvasSource, type DocumentHandle, mediaLibrarySource} from '@sanity/sdk'
-import {renderHook} from '@testing-library/react'
+import {type DocumentHandle} from '@sanity/sdk'
 import {beforeEach, describe, expect, it, vi} from 'vitest'
 
-import {type DocumentHandleWithSource} from './types'
+import {renderHook} from '../../../test/test-utils'
 import {useDispatchIntent} from './useDispatchIntent'
 
 // Mock the useWindowConnection hook
@@ -62,9 +61,13 @@ describe('useDispatchIntent', () => {
   })
 
   it('should use memoized dispatchIntent function', () => {
-    const {result, rerender} = renderHook(({params}) => useDispatchIntent(params), {
-      initialProps: {params: {action: 'edit' as const, documentHandle: mockDocumentHandle}},
-    })
+    const params = {action: 'edit' as const, documentHandle: mockDocumentHandle}
+    const {result, rerender} = renderHook(
+      ({params: hookParams}: {params: typeof params}) => useDispatchIntent(hookParams),
+      {
+        initialProps: {params},
+      },
+    )
 
     const firstDispatchIntent = result.current.dispatchIntent
 
@@ -75,9 +78,12 @@ describe('useDispatchIntent', () => {
   })
 
   it('should create new dispatchIntent function when documentHandle changes', () => {
-    const {result, rerender} = renderHook(({params}) => useDispatchIntent(params), {
-      initialProps: {params: {action: 'edit' as const, documentHandle: mockDocumentHandle}},
-    })
+    const {result, rerender} = renderHook(
+      (params: {action: 'edit'; documentHandle: DocumentHandle}) => useDispatchIntent(params),
+      {
+        initialProps: {action: 'edit' as const, documentHandle: mockDocumentHandle},
+      },
+    )
 
     const firstDispatchIntent = result.current.dispatchIntent
 
@@ -88,7 +94,7 @@ describe('useDispatchIntent', () => {
       dataset: 'new-dataset',
     }
 
-    rerender({params: {action: 'edit' as const, documentHandle: newDocumentHandle}})
+    rerender({action: 'edit' as const, documentHandle: newDocumentHandle})
 
     expect(result.current.dispatchIntent).not.toBe(firstDispatchIntent)
   })
@@ -160,10 +166,10 @@ describe('useDispatchIntent', () => {
   })
 
   it('should send intent message with media library source', () => {
-    const mockMediaLibraryHandle: DocumentHandleWithSource = {
+    const mockMediaLibraryHandle: DocumentHandle = {
       documentId: 'test-asset-id',
       documentType: 'sanity.asset',
-      source: mediaLibrarySource('mlPGY7BEqt52'),
+      sourceName: 'media-library',
     }
 
     const {result} = renderHook(() =>
@@ -182,17 +188,17 @@ describe('useDispatchIntent', () => {
         type: 'sanity.asset',
       },
       resource: {
-        id: 'mlPGY7BEqt52',
+        id: 'media-library-id',
         type: 'media-library',
       },
     })
   })
 
   it('should send intent message with canvas source', () => {
-    const mockCanvasHandle: DocumentHandleWithSource = {
+    const mockCanvasHandle: DocumentHandle = {
       documentId: 'test-canvas-document-id',
       documentType: 'sanity.canvas.document',
-      source: canvasSource('canvas123'),
+      sourceName: 'canvas',
     }
 
     const {result} = renderHook(() =>
@@ -211,7 +217,7 @@ describe('useDispatchIntent', () => {
         type: 'sanity.canvas.document',
       },
       resource: {
-        id: 'canvas123',
+        id: 'canvas-id',
         type: 'canvas',
       },
     })
@@ -227,12 +233,12 @@ describe('useDispatchIntent', () => {
       const {result} = renderHook(() =>
         useDispatchIntent({
           action: 'edit',
-          documentHandle: invalidHandle as unknown as DocumentHandleWithSource,
+          documentHandle: invalidHandle as unknown as DocumentHandle,
         }),
       )
 
       expect(() => result.current.dispatchIntent()).toThrow(
-        'useDispatchIntent: Either `source` or both `projectId` and `dataset` must be provided in documentHandle.',
+        'useDispatchIntent: Either `sourceName` or both `projectId` and `dataset` must be provided in documentHandle.',
       )
     })
   })