@sanity/sdk-react 2.8.0 → 3.0.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "2.8.0",
+  "version": "3.0.0-rc.0",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -47,12 +47,10 @@
     "@sanity/message-protocol": "^0.18.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.8.0"
+    "@sanity/sdk": "3.0.0-rc.0"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
@@ -77,15 +75,15 @@
     "typescript": "^5.8.3",
     "vite": "^6.3.4",
     "vitest": "^3.2.4",
-    "@repo/package.bundle": "3.82.0",
     "@repo/config-eslint": "0.0.0",
     "@repo/config-test": "0.0.1",
-    "@repo/package.config": "0.0.1",
-    "@repo/tsconfig": "0.0.1"
+    "@repo/package.bundle": "3.82.0",
+    "@repo/tsconfig": "0.0.1",
+    "@repo/package.config": "0.0.1"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "engines": {
     "node": ">=20.19"

package/src/_exports/index.ts

@@ -1,2 +1,6 @@
 export * from './sdk-react.ts'
 export * from '@sanity/sdk'
+
+// Explicitly re-export React-layer handle types to resolve ambiguity with @sanity/sdk versions.
+// These shadow the core (strict) versions for @sanity/sdk-react consumers.
+export {type DocumentHandle, type DocumentTypeHandle, type ResourceHandle} from './sdk-react.ts'

package/src/_exports/sdk-react.ts

@@ -1,9 +1,17 @@
 /**
  * @module exports
  */
+
+// React-layer handle types (relaxed) — shadow core versions for @sanity/sdk-react consumers.
+// resource is optional and resolved from context when not provided.
 export {AuthBoundary, type AuthBoundaryProps} from '../components/auth/AuthBoundary'
 export {SanityApp, type SanityAppProps} from '../components/SanityApp'
 export {SDKProvider, type SDKProviderProps} from '../components/SDKProvider'
+export {
+  type DocumentHandle as DocumentHandle,
+  type DocumentTypeHandle as DocumentTypeHandle,
+  type ResourceHandle as ResourceHandle,
+} from '../config/handles'
 export {ComlinkTokenRefreshProvider} from '../context/ComlinkTokenRefresh'
 export {renderSanityApp} from '../context/renderSanityApp'
 export {ResourceProvider, type ResourceProviderProps} from '../context/ResourceProvider'
@@ -40,6 +48,7 @@ export {
   type WindowConnection,
   type WindowMessageHandler,
 } from '../hooks/comlink/useWindowConnection'
+export {useResource} from '../hooks/context/useDefaultResource'
 export {useSanityInstance} from '../hooks/context/useSanityInstance'
 export {useDashboardNavigate} from '../hooks/dashboard/useDashboardNavigate'
 export {useDispatchIntent} from '../hooks/dashboard/useDispatchIntent'
@@ -88,4 +97,11 @@ export {type UsersResult, useUsers} from '../hooks/users/useUsers'
 export {REACT_SDK_VERSION} from '../version'
 export {type DatasetsResponse, type SanityProjectMember} from '@sanity/client'
 export type {Status as ComlinkStatus} from '@sanity/comlink'
+
+// Strict core versions — available for users who need explicit resource
+export {
+  type DocumentHandle as StrictDocumentHandle,
+  type DocumentTypeHandle as StrictDocumentTypeHandle,
+  type ResourceHandle as StrictResourceHandle,
+} from '@sanity/sdk'
 export {type SanityDocument, type SortOrderingItem} from '@sanity/types'

package/src/components/SDKProvider.test.tsx

@@ -4,31 +4,16 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {SDKProvider} from './SDKProvider'
 
-// Mock ResourceProvider to test nesting behavior
 vi.mock('../context/ResourceProvider', () => ({
-  ResourceProvider: ({
-    children,
-    ...props
-  }: {
-    children: React.ReactNode
-    projectId?: string
-    dataset?: string
-  }) => {
+  ResourceProvider: ({children, resource}: {children: React.ReactNode; resource?: unknown}) => {
     return (
-      <div
-        data-testid="resource-provider"
-        data-config={JSON.stringify({
-          projectId: props.projectId,
-          dataset: props.dataset,
-        })}
-      >
+      <div data-testid="resource-provider" data-resource={JSON.stringify(resource ?? null)}>
         {children}
       </div>
     )
   },
 }))
 
-// Mock AuthBoundary
 vi.mock('./auth/AuthBoundary', () => ({
   AuthBoundary: ({children}: {children: React.ReactNode}) => {
     return <div data-testid="auth-boundary">{children}</div>
@@ -36,66 +21,46 @@ vi.mock('./auth/AuthBoundary', () => ({
 }))
 
 describe('SDKProvider', () => {
-  it('renders single ResourceProvider with AuthBoundary for a single config', () => {
-    const config = {
-      projectId: 'test-project',
-      dataset: 'production',
+  it('renders a single ResourceProvider with AuthBoundary', () => {
+    const config = {}
+    const resources = {
+      default: {projectId: 'test-project', dataset: 'production'},
     }
 
-    const {getAllByTestId, getByTestId} = render(
-      <SDKProvider config={[config]} fallback={<div>Loading...</div>}>
+    const {getByTestId} = render(
+      <SDKProvider config={config} resources={resources} fallback={<div>Loading...</div>}>
         <div>Child Content</div>
       </SDKProvider>,
     )
 
-    // Should create a single ResourceProvider
-    const providers = getAllByTestId('resource-provider')
-    expect(providers.length).toBe(1)
-
-    // Should create an AuthBoundary inside
+    const provider = getByTestId('resource-provider')
+    expect(provider).toBeInTheDocument()
     expect(getByTestId('auth-boundary')).toBeInTheDocument()
 
-    // Verify provider has the correct config
-    expect(JSON.parse(providers[0].getAttribute('data-config') || '{}')).toEqual({
+    // resource prop should be the default resource
+    expect(JSON.parse(provider.getAttribute('data-resource') || 'null')).toEqual({
       projectId: 'test-project',
       dataset: 'production',
     })
   })
 
-  it('renders nested ResourceProviders with AuthBoundary for multiple configs', () => {
-    const configs = [
-      {
-        projectId: 'project-1',
-        dataset: 'production',
-      },
-      {
-        projectId: 'project-2',
-        dataset: 'staging',
-      },
-    ]
+  it('renders with multiple named resources', () => {
+    const config = {}
+    const resources = {
+      default: {projectId: 'project-1', dataset: 'production'},
+      secondary: {projectId: 'project-2', dataset: 'staging'},
+    }
 
-    const {getAllByTestId, getByTestId} = render(
-      <SDKProvider config={configs} fallback={<div>Loading...</div>}>
+    const {getByTestId} = render(
+      <SDKProvider config={config} resources={resources} fallback={<div>Loading...</div>}>
         <div>Child Content</div>
       </SDKProvider>,
     )
 
-    // Should create two nested ResourceProviders
-    const providers = getAllByTestId('resource-provider')
-    expect(providers.length).toBe(2)
-
-    // Should create an AuthBoundary inside the innermost provider
-    expect(getByTestId('auth-boundary')).toBeInTheDocument()
-
-    // Verify each provider has the correct config - order is based on how SDKProvider creates nestings
-    // The first provider contains config[1]
-    expect(JSON.parse(providers[0].getAttribute('data-config') || '{}')).toEqual({
-      projectId: 'project-2',
-      dataset: 'staging',
-    })
+    const provider = getByTestId('resource-provider')
+    expect(provider).toBeInTheDocument()
 
-    // The second provider contains config[0]
-    expect(JSON.parse(providers[1].getAttribute('data-config') || '{}')).toEqual({
+    expect(JSON.parse(provider.getAttribute('data-resource') || 'null')).toEqual({
       projectId: 'project-1',
       dataset: 'production',
     })

package/src/components/SDKProvider.tsx

@@ -1,8 +1,13 @@
-import {type DocumentSource, type SanityConfig} from '@sanity/sdk'
+import {
+  DEFAULT_RESOURCE_NAME,
+  type DocumentResource,
+  isDatasetResource,
+  type SanityConfig,
+} from '@sanity/sdk'
 import {type ReactElement, type ReactNode, useMemo} from 'react'
 
 import {ResourceProvider} from '../context/ResourceProvider'
-import {SourcesContext} from '../context/SourcesContext'
+import {ResourcesContext} from '../context/ResourcesContext'
 import {AuthBoundary, type AuthBoundaryProps} from './auth/AuthBoundary'
 
 /**
@@ -10,48 +15,51 @@ import {AuthBoundary, type AuthBoundaryProps} from './auth/AuthBoundary'
  */
 export interface SDKProviderProps extends AuthBoundaryProps {
   children: ReactNode
-  config: SanityConfig | SanityConfig[]
+  config: SanityConfig
+  /**
+   * Named document resources map. Provided to `ResourcesContext` for
+   * name-based resource resolution in hooks.
+   */
+  resources?: Record<string, DocumentResource>
   fallback: ReactNode
-  sources?: Record<string, DocumentSource>
+}
+
+/**
+ * Collects unique project IDs from a resources map.
+ */
+function collectProjectIds(resources: Record<string, DocumentResource>): string[] {
+  const ids = new Set<string>()
+  for (const res of Object.values(resources)) {
+    if (isDatasetResource(res)) ids.add(res.projectId)
+  }
+  return [...ids]
 }
 
 /**
  * @internal
  *
  * Top-level context provider that provides access to the Sanity SDK.
- * Creates a hierarchy of ResourceProviders, each providing a SanityInstance that can be
- * accessed by hooks. The first configuration in the array becomes the default instance.
+ *
+ * Creates a single `ResourceProvider` (and therefore a single `SanityInstance`)
+ * for the given config. Resource resolution is handled by `ResourcesContext`
+ * and the `"default"` named resource.
  */
 export function SDKProvider({
   children,
   config,
+  resources = {},
   fallback,
   ...props
 }: SDKProviderProps): ReactElement {
-  // reverse because we want the first config to be the default, but the
-  // ResourceProvider nesting makes the last one the default
-  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])
+  const projectIds = useMemo(() => collectProjectIds(resources), [resources])
 
-  // Create a nested structure of ResourceProviders for each config
-  const createNestedProviders = (index: number): ReactElement => {
-    if (index >= configs.length) {
-      return (
-        <AuthBoundary {...props} projectIds={projectIds}>
-          <SourcesContext.Provider value={sourcesValue}>{children}</SourcesContext.Provider>
-        </AuthBoundary>
-      )
-    }
-
-    return (
-      <ResourceProvider {...configs[index]} fallback={fallback}>
-        {createNestedProviders(index + 1)}
-      </ResourceProvider>
-    )
-  }
+  const rootResource = useMemo(() => resources[DEFAULT_RESOURCE_NAME], [resources])
 
-  return createNestedProviders(0)
+  return (
+    <ResourceProvider {...config} resource={rootResource} fallback={fallback}>
+      <AuthBoundary {...props} projectIds={projectIds}>
+        <ResourcesContext.Provider value={resources}>{children}</ResourcesContext.Provider>
+      </AuthBoundary>
+    </ResourceProvider>
+  )
 }

package/src/components/SanityApp.test.tsx

@@ -58,14 +58,11 @@ describe('SanityApp', () => {
     mockSDKProviderComponent.mockClear()
   })
 
-  it('renders SDKProvider with a single config', () => {
-    const singleConfig = {
-      projectId: 'test-project',
-      dataset: 'production',
-    }
+  it('renders SDKProvider with a single resource', () => {
+    const singleResource = {projectId: 'test-project', dataset: 'production'}
 
     render(
-      <SanityApp config={singleConfig} fallback={<div>Loading...</div>}>
+      <SanityApp resources={{default: singleResource}} fallback={<div>Loading...</div>}>
         <div>Child Content</div>
       </SanityApp>,
     )
@@ -80,60 +77,17 @@ describe('SanityApp', () => {
     expect(firstCallArgs1).toBeDefined()
     expect(firstCallArgs1.length).toBeGreaterThan(0)
     const props = firstCallArgs1[0] as unknown as SDKProviderProps
-    const config = props?.config
 
-    // Config is now passed directly as an object for single configs
-    expect(config).toEqual(singleConfig)
+    expect(props.resources).toEqual({default: singleResource})
     expect(props.fallback).toBeTruthy()
   })
 
-  it('renders SDKProvider with multiple configs in original order', () => {
-    const multipleConfigs = [
-      {
-        projectId: 'project-1',
-        dataset: 'production',
-      },
-      {
-        projectId: 'project-2',
-        dataset: 'staging',
-      },
-      {
-        projectId: 'project-3',
-        dataset: 'development',
-      },
-    ]
-
-    render(
-      <SanityApp config={multipleConfigs} fallback={<div>Loading...</div>}>
-        <div>Child Content</div>
-      </SanityApp>,
-    )
-
-    // Check that the SDKProvider is rendered
-    expect(screen.getByTestId('sdk-provider')).toBeInTheDocument()
-
-    // Verify SDKProvider was called with the correct props
-    expect(mockSDKProviderComponent).toHaveBeenCalledTimes(1)
-    const sdkProviderCalls = mockSDKProviderComponent.mock.calls
-    const firstCallArgs2 = sdkProviderCalls[0]
-    expect(firstCallArgs2).toBeDefined()
-    expect(firstCallArgs2.length).toBeGreaterThan(0)
-    const props = firstCallArgs2[0] as unknown as SDKProviderProps
-    const config = props?.config
-
-    // Config should be passed directly to SDKProvider
-    expect(config).toEqual(multipleConfigs)
-  })
-
   it('handles iframe environment correctly', async () => {
     // Mock window.self and window.top to simulate iframe environment
     const originalTop = window.top
     const originalSelf = window.self
 
-    const mockSanityConfig: SanityConfig = {
-      projectId: 'test-project',
-      dataset: 'test-dataset',
-    }
+    const mockSanityConfig: SanityConfig = {}
 
     const mockTop = {}
     Object.defineProperty(window, 'top', {
@@ -146,7 +100,7 @@ describe('SanityApp', () => {
     })
 
     render(
-      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
+      <SanityApp config={mockSanityConfig} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )
@@ -177,10 +131,7 @@ describe('SanityApp', () => {
       href: 'http://sanity-test.app',
     }
 
-    const mockSanityConfig: SanityConfig = {
-      projectId: 'test-project',
-      dataset: 'test-dataset',
-    }
+    const mockSanityConfig: SanityConfig = {}
 
     Object.defineProperty(window, 'location', {
       value: mockLocation,
@@ -188,7 +139,7 @@ describe('SanityApp', () => {
     })
 
     render(
-      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
+      <SanityApp config={mockSanityConfig} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )
@@ -241,10 +192,7 @@ describe('SanityApp', () => {
   it('does not redirect to core if not inside iframe and local url', async () => {
     const originalLocation = window.location
 
-    const mockSanityConfig: SanityConfig = {
-      projectId: 'test-project',
-      dataset: 'test-dataset',
-    }
+    const mockSanityConfig: SanityConfig = {}
 
     const mockLocation = {
       replace: vi.fn(),
@@ -257,7 +205,7 @@ describe('SanityApp', () => {
     })
 
     render(
-      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
+      <SanityApp config={mockSanityConfig} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )
@@ -285,8 +233,6 @@ describe('SanityApp', () => {
     }
 
     const mockSanityConfig: SanityConfig = {
-      projectId: 'test-project',
-      dataset: 'test-dataset',
       studio: {},
     }
 
@@ -296,7 +242,7 @@ describe('SanityApp', () => {
     })
 
     render(
-      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
+      <SanityApp config={mockSanityConfig} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )
@@ -325,8 +271,6 @@ describe('SanityApp', () => {
     }
 
     const mockSanityConfig: SanityConfig = {
-      projectId: 'test-project',
-      dataset: 'test-dataset',
       studio: {},
     }
 
@@ -336,7 +280,7 @@ describe('SanityApp', () => {
     })
 
     render(
-      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
+      <SanityApp config={mockSanityConfig} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )