@sanity/sdk-react 0.0.0-alpha.8 → 0.0.0-chore-react-18-compat.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/README.md +33 -126
  2. package/dist/index.d.ts +4811 -2
  3. package/dist/index.js +1069 -2
  4. package/dist/index.js.map +1 -1
  5. package/package.json +23 -45
  6. package/src/_exports/index.ts +66 -10
  7. package/src/components/Login/LoginLinks.test.tsx +90 -0
  8. package/src/components/Login/LoginLinks.tsx +58 -0
  9. package/src/components/SDKProvider.test.tsx +79 -0
  10. package/src/components/SDKProvider.tsx +42 -0
  11. package/src/components/SanityApp.test.tsx +104 -2
  12. package/src/components/SanityApp.tsx +54 -17
  13. package/src/components/auth/AuthBoundary.test.tsx +4 -4
  14. package/src/components/auth/AuthBoundary.tsx +13 -3
  15. package/src/components/auth/Login.test.tsx +1 -1
  16. package/src/components/auth/Login.tsx +11 -26
  17. package/src/components/auth/LoginCallback.test.tsx +3 -3
  18. package/src/components/auth/LoginCallback.tsx +8 -11
  19. package/src/components/auth/LoginError.tsx +12 -8
  20. package/src/components/auth/LoginFooter.tsx +13 -20
  21. package/src/components/auth/LoginLayout.tsx +8 -9
  22. package/src/components/auth/authTestHelpers.tsx +1 -8
  23. package/src/components/utils.ts +22 -0
  24. package/src/context/SanityInstanceContext.ts +4 -0
  25. package/src/context/SanityProvider.test.tsx +1 -1
  26. package/src/context/SanityProvider.tsx +10 -8
  27. package/src/hooks/_synchronous-groq-js.mjs +4 -0
  28. package/src/hooks/auth/useAuthState.tsx +0 -2
  29. package/src/hooks/auth/useCurrentUser.tsx +27 -20
  30. package/src/hooks/auth/useDashboardOrganizationId.test.tsx +42 -0
  31. package/src/hooks/auth/useDashboardOrganizationId.tsx +29 -0
  32. package/src/hooks/auth/useHandleAuthCallback.test.tsx +16 -0
  33. package/src/hooks/auth/{useHandleCallback.tsx → useHandleAuthCallback.tsx} +6 -6
  34. package/src/hooks/auth/useLogOut.test.tsx +2 -2
  35. package/src/hooks/client/useClient.ts +9 -30
  36. package/src/hooks/comlink/useFrameConnection.test.tsx +55 -10
  37. package/src/hooks/comlink/useFrameConnection.ts +39 -43
  38. package/src/hooks/comlink/useManageFavorite.test.ts +111 -0
  39. package/src/hooks/comlink/useManageFavorite.ts +130 -0
  40. package/src/hooks/comlink/useRecordDocumentHistoryEvent.test.ts +81 -0
  41. package/src/hooks/comlink/useRecordDocumentHistoryEvent.ts +106 -0
  42. package/src/hooks/comlink/useWindowConnection.test.ts +53 -12
  43. package/src/hooks/comlink/useWindowConnection.ts +69 -29
  44. package/src/hooks/context/useSanityInstance.test.tsx +1 -1
  45. package/src/hooks/context/useSanityInstance.ts +21 -5
  46. package/src/hooks/dashboard/useNavigateToStudioDocument.test.ts +178 -0
  47. package/src/hooks/dashboard/useNavigateToStudioDocument.ts +123 -0
  48. package/src/hooks/dashboard/useStudioWorkspacesByResourceId.test.tsx +278 -0
  49. package/src/hooks/dashboard/useStudioWorkspacesByResourceId.ts +92 -0
  50. package/src/hooks/datasets/useDatasets.ts +40 -0
  51. package/src/hooks/document/useApplyDocumentActions.test.ts +25 -0
  52. package/src/hooks/document/useApplyDocumentActions.ts +75 -0
  53. package/src/hooks/document/useDocument.test.ts +81 -0
  54. package/src/hooks/document/useDocument.ts +107 -0
  55. package/src/hooks/document/useDocumentEvent.test.ts +63 -0
  56. package/src/hooks/document/useDocumentEvent.ts +54 -0
  57. package/src/hooks/document/useDocumentPermissions.ts +84 -0
  58. package/src/hooks/document/useDocumentSyncStatus.test.ts +16 -0
  59. package/src/hooks/document/useDocumentSyncStatus.ts +33 -0
  60. package/src/hooks/document/useEditDocument.test.ts +179 -0
  61. package/src/hooks/document/useEditDocument.ts +195 -0
  62. package/src/hooks/documents/useDocuments.test.tsx +152 -0
  63. package/src/hooks/documents/useDocuments.ts +174 -0
  64. package/src/hooks/helpers/createCallbackHook.tsx +3 -2
  65. package/src/hooks/helpers/createStateSourceHook.test.tsx +66 -0
  66. package/src/hooks/helpers/createStateSourceHook.tsx +29 -10
  67. package/src/hooks/paginatedDocuments/usePaginatedDocuments.test.tsx +259 -0
  68. package/src/hooks/paginatedDocuments/usePaginatedDocuments.ts +290 -0
  69. package/src/hooks/preview/usePreview.test.tsx +6 -6
  70. package/src/hooks/preview/usePreview.tsx +12 -9
  71. package/src/hooks/projection/useProjection.test.tsx +218 -0
  72. package/src/hooks/projection/useProjection.ts +147 -0
  73. package/src/hooks/projects/useProject.ts +48 -0
  74. package/src/hooks/projects/useProjects.ts +45 -0
  75. package/src/hooks/query/useQuery.test.tsx +188 -0
  76. package/src/hooks/query/useQuery.ts +103 -0
  77. package/src/hooks/users/useUsers.test.ts +163 -0
  78. package/src/hooks/users/useUsers.ts +107 -0
  79. package/src/utils/getEnv.ts +21 -0
  80. package/src/version.ts +8 -0
  81. package/dist/_chunks-es/context.js +0 -8
  82. package/dist/_chunks-es/context.js.map +0 -1
  83. package/dist/_chunks-es/useLogOut.js +0 -44
  84. package/dist/_chunks-es/useLogOut.js.map +0 -1
  85. package/dist/components.d.ts +0 -111
  86. package/dist/components.js +0 -153
  87. package/dist/components.js.map +0 -1
  88. package/dist/context.d.ts +0 -45
  89. package/dist/context.js +0 -5
  90. package/dist/context.js.map +0 -1
  91. package/dist/hooks.d.ts +0 -3485
  92. package/dist/hooks.js +0 -167
  93. package/dist/hooks.js.map +0 -1
  94. package/src/_exports/components.ts +0 -2
  95. package/src/_exports/context.ts +0 -2
  96. package/src/_exports/hooks.ts +0 -27
  97. package/src/hooks/auth/useHandleCallback.test.tsx +0 -16
  98. package/src/hooks/client/useClient.test.tsx +0 -130
  99. package/src/hooks/documentCollection/useDocuments.test.ts +0 -130
  100. package/src/hooks/documentCollection/useDocuments.ts +0 -135
@@ -0,0 +1,103 @@
1
+ import {
2
+ getQueryKey,
3
+ getQueryState,
4
+ parseQueryKey,
5
+ type QueryOptions,
6
+ resolveQuery,
7
+ } from '@sanity/sdk'
8
+ import {useEffect, useMemo, useState, useSyncExternalStore, useTransition} from 'react'
9
+
10
+ import {useSanityInstance} from '../context/useSanityInstance'
11
+
12
+ /**
13
+ * Executes GROQ queries against a Sanity dataset.
14
+ *
15
+ * This hook provides a convenient way to fetch and subscribe to real-time updates
16
+ * for your Sanity content. Changes made to the dataset’s content will trigger
17
+ * automatic updates.
18
+ *
19
+ * @remarks
20
+ * The returned `isPending` flag indicates when a React transition is in progress,
21
+ * which can be used to show loading states for query changes.
22
+ *
23
+ * @beta
24
+ * @category GROQ
25
+ * @param query - GROQ query string to execute
26
+ * @param options - Optional configuration for the query
27
+ * @returns Object containing the query result and a pending state flag
28
+ *
29
+ * @example Basic usage
30
+ * ```tsx
31
+ * const {data, isPending} = useQuery<Movie[]>('*[_type == "movie"]')
32
+ * ```
33
+ *
34
+ * @example Using parameters
35
+ * ```tsx
36
+ * // With parameters
37
+ * const {data} = useQuery<Movie>('*[_type == "movie" && _id == $id][0]', {
38
+ * params: { id: 'movie-123' }
39
+ * })
40
+ * ```
41
+ *
42
+ * @example With a loading state for transitions
43
+ * ```tsx
44
+ * const {data, isPending} = useQuery<Movie[]>('*[_type == "movie"]')
45
+ * return (
46
+ * <div>
47
+ * {isPending && <div>Updating...</div>}
48
+ * <ul>
49
+ * {data.map(movie => <li key={movie._id}>{movie.title}</li>)}
50
+ * </ul>
51
+ * </div>
52
+ * )
53
+ * ```
54
+ *
55
+ */
56
+ export function useQuery<T>(query: string, options?: QueryOptions): {data: T; isPending: boolean} {
57
+ const instance = useSanityInstance(options?.resourceId)
58
+ // Use React's useTransition to avoid UI jank when queries change
59
+ const [isPending, startTransition] = useTransition()
60
+
61
+ // Get the unique key for this query and its options
62
+ const queryKey = getQueryKey(query, options)
63
+ // Use a deferred state to avoid immediate re-renders when the query changes
64
+ const [deferredQueryKey, setDeferredQueryKey] = useState(queryKey)
65
+ // Parse the deferred query key back into a query and options
66
+ const deferred = useMemo(() => parseQueryKey(deferredQueryKey), [deferredQueryKey])
67
+
68
+ // Create an AbortController to cancel in-flight requests when needed
69
+ const [ref, setRef] = useState<AbortController>(new AbortController())
70
+
71
+ // When the query or options change, start a transition to update the query
72
+ useEffect(() => {
73
+ if (queryKey === deferredQueryKey) return
74
+
75
+ startTransition(() => {
76
+ // Abort any in-flight requests for the previous query
77
+ if (ref && !ref.signal.aborted) {
78
+ ref.abort()
79
+ setRef(new AbortController())
80
+ }
81
+
82
+ setDeferredQueryKey(queryKey)
83
+ })
84
+ }, [deferredQueryKey, queryKey, ref])
85
+
86
+ // Get the state source for this query from the query store
87
+ const {getCurrent, subscribe} = useMemo(
88
+ () => getQueryState(instance, deferred.query, deferred.options),
89
+ [instance, deferred],
90
+ )
91
+
92
+ // If data isn't available yet, suspend rendering until it is
93
+ // This is the React Suspense integration - throwing a promise
94
+ // will cause React to show the nearest Suspense fallback
95
+ if (getCurrent() === undefined) {
96
+ throw resolveQuery(instance, deferred.query, {...deferred.options, signal: ref.signal})
97
+ }
98
+
99
+ // Subscribe to updates and get the current data
100
+ // useSyncExternalStore ensures the component re-renders when the data changes
101
+ const data = useSyncExternalStore(subscribe, getCurrent) as T
102
+ return {data, isPending}
103
+ }
@@ -0,0 +1,163 @@
1
+ import {createUsersStore, type ResourceType, type SanityUser} from '@sanity/sdk'
2
+ import {act, renderHook} from '@testing-library/react'
3
+ import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
4
+
5
+ import {useSanityInstance} from '../context/useSanityInstance'
6
+ import {useUsers} from './useUsers'
7
+
8
+ vi.mock('@sanity/sdk')
9
+ vi.mock('../context/useSanityInstance')
10
+
11
+ describe('useUsers', () => {
12
+ const mockInstance = {}
13
+ const mockUser: SanityUser = {
14
+ profile: {
15
+ id: 'user1',
16
+ displayName: 'Test User',
17
+ email: 'test@test.com',
18
+ provider: 'test',
19
+ createdAt: '2021-01-01',
20
+ },
21
+ sanityUserId: 'user1',
22
+ memberships: [],
23
+ }
24
+
25
+ const getCurrent = vi.fn().mockReturnValue({
26
+ users: [],
27
+ totalCount: 0,
28
+ nextCursor: null,
29
+ hasMore: false,
30
+ initialFetchCompleted: false,
31
+ options: {
32
+ resourceType: '' as ResourceType,
33
+ resourceId: '',
34
+ limit: 100,
35
+ },
36
+ })
37
+ const unsubscribe = vi.fn()
38
+ const subscribe = vi.fn().mockReturnValue(unsubscribe)
39
+ const dispose = vi.fn()
40
+
41
+ const mockUsersStore: ReturnType<typeof createUsersStore> = {
42
+ setOptions: vi.fn(),
43
+ loadMore: vi.fn(),
44
+ resolveUsers: vi.fn(),
45
+ getState: vi.fn().mockReturnValue({getCurrent, subscribe}),
46
+ dispose,
47
+ }
48
+
49
+ beforeEach(() => {
50
+ vi.mocked(useSanityInstance).mockReturnValue(
51
+ mockInstance as unknown as ReturnType<typeof useSanityInstance>,
52
+ )
53
+ vi.mocked(createUsersStore).mockReturnValue(
54
+ mockUsersStore as unknown as ReturnType<typeof createUsersStore>,
55
+ )
56
+ })
57
+
58
+ afterEach(() => {
59
+ vi.clearAllMocks()
60
+ })
61
+
62
+ it('should initialize with given params', () => {
63
+ renderHook(() =>
64
+ useUsers({
65
+ resourceType: 'project',
66
+ resourceId: 'proj1',
67
+ }),
68
+ )
69
+
70
+ expect(createUsersStore).toHaveBeenCalledWith(mockInstance)
71
+ expect(mockUsersStore.setOptions).toHaveBeenCalledWith({
72
+ resourceType: 'project',
73
+ resourceId: 'proj1',
74
+ })
75
+ })
76
+
77
+ it('should subscribe to users store changes', () => {
78
+ renderHook(() =>
79
+ useUsers({
80
+ resourceType: 'organization',
81
+ resourceId: 'org1',
82
+ }),
83
+ )
84
+ expect(subscribe).toHaveBeenCalledTimes(1)
85
+ })
86
+
87
+ it('should return current users state', () => {
88
+ const mockState = {users: [mockUser], hasMore: true}
89
+ getCurrent.mockReturnValue(mockState)
90
+
91
+ const {result} = renderHook(() =>
92
+ useUsers({
93
+ resourceType: 'project',
94
+ resourceId: 'proj1',
95
+ }),
96
+ )
97
+ expect(result.current).toMatchObject(mockState)
98
+ })
99
+
100
+ it('should call loadMore when loadMore is invoked', () => {
101
+ const {result} = renderHook(() =>
102
+ useUsers({
103
+ resourceType: 'project',
104
+ resourceId: 'proj1',
105
+ }),
106
+ )
107
+
108
+ act(() => {
109
+ result.current.loadMore()
110
+ })
111
+
112
+ expect(mockUsersStore.loadMore).toHaveBeenCalled()
113
+ })
114
+
115
+ it('should update options when params change', () => {
116
+ const initialParams = {resourceType: 'project' as ResourceType, resourceId: 'proj1'}
117
+ const {rerender} = renderHook(({params}) => useUsers(params), {
118
+ initialProps: {params: initialParams},
119
+ })
120
+
121
+ const newParams = {resourceType: 'organization' as ResourceType, resourceId: 'org1'}
122
+ rerender({params: newParams})
123
+
124
+ expect(mockUsersStore.setOptions).toHaveBeenCalledWith(newParams)
125
+ })
126
+
127
+ it('should resolve users if initial fetch not completed', () => {
128
+ getCurrent.mockReturnValue({initialFetchCompleted: false})
129
+
130
+ renderHook(() =>
131
+ useUsers({
132
+ resourceType: 'project',
133
+ resourceId: 'proj1',
134
+ }),
135
+ )
136
+ expect(mockUsersStore.resolveUsers).toHaveBeenCalled()
137
+ })
138
+
139
+ it('should not resolve users if initial fetch already completed', () => {
140
+ getCurrent.mockReturnValue({initialFetchCompleted: true})
141
+
142
+ renderHook(() =>
143
+ useUsers({
144
+ resourceType: 'project',
145
+ resourceId: 'proj1',
146
+ }),
147
+ )
148
+ expect(mockUsersStore.resolveUsers).not.toHaveBeenCalled()
149
+ })
150
+
151
+ it('should clean up store on unmount', () => {
152
+ const {unmount} = renderHook(() =>
153
+ useUsers({
154
+ resourceType: 'project',
155
+ resourceId: 'proj1',
156
+ }),
157
+ )
158
+
159
+ unmount()
160
+ expect(mockUsersStore.dispose).toHaveBeenCalled()
161
+ expect(unsubscribe).toHaveBeenCalled()
162
+ })
163
+ })
@@ -0,0 +1,107 @@
1
+ import {createUsersStore, type ResourceType, type SanityUser} from '@sanity/sdk'
2
+ import {useCallback, useEffect, useState, useSyncExternalStore} from 'react'
3
+
4
+ import {useSanityInstance} from '../context/useSanityInstance'
5
+
6
+ /**
7
+ * @public
8
+ * @category Types
9
+ */
10
+ export interface UseUsersParams {
11
+ /**
12
+ * The type of resource to fetch users for.
13
+ */
14
+ resourceType: ResourceType
15
+ /**
16
+ * The ID of the resource to fetch users for.
17
+ */
18
+ resourceId: string
19
+ /**
20
+ * The limit of users to fetch.
21
+ */
22
+ limit?: number
23
+ }
24
+
25
+ /**
26
+ * @public
27
+ * @category Types
28
+ */
29
+ export interface UseUsersResult {
30
+ /**
31
+ * The users fetched.
32
+ */
33
+ users: SanityUser[]
34
+ /**
35
+ * Whether there are more users to fetch.
36
+ */
37
+ hasMore: boolean
38
+ /**
39
+ * Load more users.
40
+ */
41
+ loadMore: () => void
42
+ }
43
+
44
+ /**
45
+ *
46
+ * @public
47
+ *
48
+ * Retrieves the users for a given resource (either a project or an organization).
49
+ *
50
+ * @category Users
51
+ * @param params - The resource type and its ID, and the limit of users to fetch
52
+ * @returns A list of users, a boolean indicating whether there are more users to fetch, and a function to load more users
53
+ *
54
+ * @example
55
+ * ```
56
+ * const { users, hasMore, loadMore } = useUsers({
57
+ * resourceType: 'organization',
58
+ * resourceId: 'my-org-id',
59
+ * limit: 10,
60
+ * })
61
+ *
62
+ * return (
63
+ * <div>
64
+ * {users.map(user => (
65
+ * <figure key={user.sanityUserId}>
66
+ * <img src={user.profile.imageUrl} alt='' />
67
+ * <figcaption>{user.profile.displayName}</figcaption>
68
+ * <address>{user.profile.email}</address>
69
+ * </figure>
70
+ * ))}
71
+ * {hasMore && <button onClick={loadMore}>Load More</button>}
72
+ * </div>
73
+ * )
74
+ * ```
75
+ */
76
+ export function useUsers(params: UseUsersParams): UseUsersResult {
77
+ const instance = useSanityInstance(params.resourceId)
78
+ const [store] = useState(() => createUsersStore(instance))
79
+
80
+ useEffect(() => {
81
+ store.setOptions({
82
+ resourceType: params.resourceType,
83
+ resourceId: params.resourceId,
84
+ })
85
+ }, [params.resourceType, params.resourceId, store])
86
+
87
+ const subscribe = useCallback(
88
+ (onStoreChanged: () => void) => {
89
+ if (store.getState().getCurrent().initialFetchCompleted === false) {
90
+ store.resolveUsers()
91
+ }
92
+ const unsubscribe = store.getState().subscribe(onStoreChanged)
93
+
94
+ return () => {
95
+ unsubscribe()
96
+ store.dispose()
97
+ }
98
+ },
99
+ [store],
100
+ )
101
+
102
+ const getSnapshot = useCallback(() => store.getState().getCurrent(), [store])
103
+
104
+ const {users, hasMore} = useSyncExternalStore(subscribe, getSnapshot) || {}
105
+
106
+ return {users, hasMore, loadMore: store.loadMore}
107
+ }
@@ -0,0 +1,21 @@
1
+ // Local type declaration for Remix
2
+ type WindowWithEnv = Window &
3
+ typeof globalThis & {
4
+ ENV?: Record<string, unknown>
5
+ }
6
+
7
+ type KnownEnvVar = 'DEV' | 'PKG_VERSION'
8
+
9
+ export function getEnv(key: KnownEnvVar): unknown {
10
+ if (typeof import.meta !== 'undefined' && import.meta.env) {
11
+ // Vite environment variables
12
+ return (import.meta.env as unknown as Record<string, unknown>)[key]
13
+ } else if (typeof process !== 'undefined' && process.env) {
14
+ // Node.js or server-side environment variables
15
+ return process.env[key]
16
+ } else if (typeof window !== 'undefined' && (window as WindowWithEnv).ENV) {
17
+ // Remix-style client-side environment variables
18
+ return (window as WindowWithEnv).ENV?.[key]
19
+ }
20
+ return undefined
21
+ }
package/src/version.ts ADDED
@@ -0,0 +1,8 @@
1
+ import {version} from '../package.json'
2
+ import {getEnv} from './utils/getEnv'
3
+
4
+ /**
5
+ * This version is provided by pkg-utils at build time
6
+ * @internal
7
+ */
8
+ export const REACT_SDK_VERSION = getEnv('PKG_VERSION') || `${version}-development`
@@ -1,8 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { createContext } from "react";
3
- const SanityInstanceContext = createContext(null), SanityProvider = ({ children, sanityInstance }) => /* @__PURE__ */ jsx(SanityInstanceContext.Provider, { value: sanityInstance, children });
4
- export {
5
- SanityInstanceContext,
6
- SanityProvider
7
- };
8
- //# sourceMappingURL=context.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"context.js","sources":["../../src/context/SanityProvider.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {createContext, type ReactElement} from 'react'\n\n/**\n * @public\n */\nexport interface SanityProviderProps {\n children: React.ReactNode\n sanityInstance: SanityInstance\n}\n\nexport const SanityInstanceContext = createContext<SanityInstance | null>(null)\n\n/**\n * Top-level context provider that provides access to the Sanity configuration instance.\n * This must wrap any components making use of the Sanity SDK React hooks.\n * @remarks In most cases, SanityApp should be used rather than SanityProvider directly; SanityApp bundles both SanityProvider and an authentication layer.\n * @internal\n * @param props - Sanity project and dataset configuration\n * @returns Rendered component\n * @example\n * ```tsx\n * import {createSanityInstance} from '@sanity/sdk'\n * import {SanityProvider} from '@sanity/sdk-react'\n *\n * import MyAppRoot from './Root'\n *\n * const sanityInstance = createSanityInstance({\n * projectId: 'your-project-id',\n * dataset: 'production',\n * })\n *\n * export default function MyApp() {\n * return (\n * <SanityProvider sanityInstance={sanityInstance}>\n * <MyAppRoot />\n * </SanityProvider>\n * )\n * }\n * ```\n */\nexport const SanityProvider = ({children, sanityInstance}: SanityProviderProps): ReactElement => {\n return (\n <SanityInstanceContext.Provider value={sanityInstance}>\n {children}\n </SanityInstanceContext.Provider>\n )\n}\n"],"names":[],"mappings":";;AAWO,MAAM,wBAAwB,cAAqC,IAAI,GA8BjE,iBAAiB,CAAC,EAAC,UAAU,eAAc,0BAEnD,sBAAsB,UAAtB,EAA+B,OAAO,gBACpC,SACH,CAAA;"}
@@ -1,44 +0,0 @@
1
- import { getAuthState, handleCallback, getLoginUrlsState, fetchLoginUrls, logout } from "@sanity/sdk";
2
- import { useContext, useMemo, useSyncExternalStore, useCallback } from "react";
3
- import { SanityInstanceContext } from "./context.js";
4
- const useSanityInstance = () => {
5
- const sanityInstance = useContext(SanityInstanceContext);
6
- if (!sanityInstance)
7
- throw new Error("useSanityInstance must be called from within the SanityProvider");
8
- return sanityInstance;
9
- };
10
- function createStateSourceHook(stateSourceFactory) {
11
- function useHook(...params) {
12
- const instance = useSanityInstance(), { subscribe, getCurrent } = useMemo(
13
- () => stateSourceFactory(instance, ...params),
14
- // eslint-disable-next-line react-hooks/exhaustive-deps
15
- [instance, ...params]
16
- );
17
- return useSyncExternalStore(subscribe, getCurrent);
18
- }
19
- return useHook;
20
- }
21
- const useAuthState = createStateSourceHook(getAuthState);
22
- function createCallbackHook(callback) {
23
- function useHook() {
24
- const instance = useSanityInstance();
25
- return useCallback((...params) => callback(instance, ...params), [instance]);
26
- }
27
- return useHook;
28
- }
29
- const useHandleCallback = createCallbackHook(handleCallback);
30
- function useLoginUrls() {
31
- const instance = useSanityInstance(), { subscribe, getCurrent } = useMemo(() => getLoginUrlsState(instance), [instance]);
32
- if (!getCurrent()) throw fetchLoginUrls(instance);
33
- return useSyncExternalStore(subscribe, getCurrent);
34
- }
35
- const useLogOut = createCallbackHook(logout);
36
- export {
37
- createStateSourceHook,
38
- useAuthState,
39
- useHandleCallback,
40
- useLogOut,
41
- useLoginUrls,
42
- useSanityInstance
43
- };
44
- //# sourceMappingURL=useLogOut.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useLogOut.js","sources":["../../src/hooks/context/useSanityInstance.ts","../../src/hooks/helpers/createStateSourceHook.tsx","../../src/hooks/auth/useAuthState.tsx","../../src/hooks/helpers/createCallbackHook.tsx","../../src/hooks/auth/useHandleCallback.tsx","../../src/hooks/auth/useLoginUrls.tsx","../../src/hooks/auth/useLogOut.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {useContext} from 'react'\n\nimport {SanityInstanceContext} from '../../context/SanityProvider'\n\n/**\n * `useSanityInstance` returns the current Sanity instance from the application context.\n * This must be called from within a `SanityProvider` component.\n * @public\n * @returns The current Sanity instance\n * @example\n * ```tsx\n * const instance = useSanityInstance()\n * ```\n */\nexport const useSanityInstance = (): SanityInstance => {\n const sanityInstance = useContext(SanityInstanceContext)\n if (!sanityInstance) {\n throw new Error('useSanityInstance must be called from within the SanityProvider')\n }\n\n return sanityInstance\n}\n","import {type SanityInstance, type StateSource} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\nexport function createStateSourceHook<TParams extends unknown[], TState>(\n stateSourceFactory: (instance: SanityInstance, ...params: TParams) => StateSource<TState>,\n): (...params: TParams) => TState {\n function useHook(...params: TParams) {\n const instance = useSanityInstance()\n const {subscribe, getCurrent} = useMemo(\n () => stateSourceFactory(instance, ...params),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [instance, ...params],\n )\n\n return useSyncExternalStore(subscribe, getCurrent)\n }\n\n return useHook\n}\n","import {type AuthState, getAuthState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * @internal\n * A React hook that subscribes to authentication state changes.\n *\n * This hook provides access to the current authentication state type from the Sanity auth store.\n * It automatically re-renders when the authentication state changes.\n *\n * @remarks\n * The hook uses `useSyncExternalStore` to safely subscribe to auth state changes\n * and ensure consistency between server and client rendering.\n *\n * @returns The current authentication state type\n *\n * @example\n * ```tsx\n * function AuthStatus() {\n * const authState = useAuthState()\n * return <div>Current auth state: {authState}</div>\n * }\n * ```\n *\n * @public\n */\nexport const useAuthState: () => AuthState = createStateSourceHook(getAuthState)\n","import {type SanityInstance} from '@sanity/sdk'\nimport {useCallback} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\nexport function createCallbackHook<TParams extends unknown[], TReturn>(\n callback: (instance: SanityInstance, ...params: TParams) => TReturn,\n): () => (...params: TParams) => TReturn {\n function useHook() {\n const instance = useSanityInstance()\n return useCallback((...params: TParams) => callback(instance, ...params), [instance])\n }\n\n return useHook\n}\n","import {handleCallback} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * @internal\n * A React hook that returns a function for handling authentication callbacks.\n *\n * @remarks\n * This hook provides access to the authentication store's callback handler,\n * which processes auth redirects by extracting the session ID and fetching the\n * authentication token. If fetching the long-lived token is successful,\n * `handleCallback` will return a Promise that resolves a new location that\n * removes the short-lived token from the URL. Use this in combination with\n * `history.replaceState` or your own router's `replace` function to update the\n * current location without triggering a reload.\n *\n * @example\n * ```tsx\n * function AuthCallback() {\n * const handleCallback = useHandleCallback()\n * const router = useRouter() // Example router\n *\n * useEffect(() => {\n * async function processCallback() {\n * // Handle the callback and get the cleaned URL\n * const newUrl = await handleCallback(window.location.href)\n *\n * if (newUrl) {\n * // Replace URL without triggering navigation\n * router.replace(newUrl, {shallow: true})\n * }\n * }\n *\n * processCallback().catch(console.error)\n * }, [handleCallback, router])\n *\n * return <div>Completing login...</div>\n * }\n * ```\n *\n * @returns A callback handler function that processes OAuth redirects\n * @public\n */\nexport const useHandleCallback = createCallbackHook(handleCallback)\n","import {type AuthProvider, fetchLoginUrls, getLoginUrlsState} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @internal\n * A React hook that retrieves the available authentication provider URLs for login.\n *\n * @remarks\n * This hook fetches the login URLs from the Sanity auth store when the component mounts.\n * Each provider object contains information about an authentication method, including its URL.\n * The hook will suspend if the login URLs have not yet loaded.\n *\n * @example\n * ```tsx\n * // LoginProviders component that uses the hook\n * function LoginProviders() {\n * const providers = useLoginUrls()\n *\n * return (\n * <div>\n * {providers.map((provider) => (\n * <a key={provider.name} href={provider.url}>\n * Login with {provider.title}\n * </a>\n * ))}\n * </div>\n * )\n * }\n *\n * // Parent component with Suspense boundary\n * function LoginPage() {\n * return (\n * <Suspense fallback={<div>Loading authentication providers...</div>}>\n * <LoginProviders />\n * </Suspense>\n * )\n * }\n * ```\n *\n * @returns An array of {@link AuthProvider} objects containing login URLs and provider information\n * @public\n */\nexport function useLoginUrls(): AuthProvider[] {\n const instance = useSanityInstance()\n const {subscribe, getCurrent} = useMemo(() => getLoginUrlsState(instance), [instance])\n\n if (!getCurrent()) throw fetchLoginUrls(instance)\n\n return useSyncExternalStore(subscribe, getCurrent as () => AuthProvider[])\n}\n","import {logout} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * Hook to log out of the current session\n * @internal\n * @returns A function to log out of the current session\n */\nexport const useLogOut = createCallbackHook(logout)\n"],"names":[],"mappings":";;;AAeO,MAAM,oBAAoB,MAAsB;AAC/C,QAAA,iBAAiB,WAAW,qBAAqB;AACvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,iEAAiE;AAG5E,SAAA;AACT;ACjBO,SAAS,sBACd,oBACgC;AAChC,WAAS,WAAW,QAAiB;AACnC,UAAM,WAAW,kBAAkB,GAC7B,EAAC,WAAW,WAAc,IAAA;AAAA,MAC9B,MAAM,mBAAmB,UAAU,GAAG,MAAM;AAAA;AAAA,MAE5C,CAAC,UAAU,GAAG,MAAM;AAAA,IACtB;AAEO,WAAA,qBAAqB,WAAW,UAAU;AAAA,EAAA;AAG5C,SAAA;AACT;ACOa,MAAA,eAAgC,sBAAsB,YAAY;ACtBxE,SAAS,mBACd,UACuC;AACvC,WAAS,UAAU;AACjB,UAAM,WAAW,kBAAkB;AAC5B,WAAA,YAAY,IAAI,WAAoB,SAAS,UAAU,GAAG,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAA,EAAA;AAG/E,SAAA;AACT;AC8Ba,MAAA,oBAAoB,mBAAmB,cAAc;ACA3D,SAAS,eAA+B;AAC7C,QAAM,WAAW,qBACX,EAAC,WAAW,WAAU,IAAI,QAAQ,MAAM,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAErF,MAAI,CAAC,WAAA,EAAc,OAAM,eAAe,QAAQ;AAEzC,SAAA,qBAAqB,WAAW,UAAkC;AAC3E;AC1Ca,MAAA,YAAY,mBAAmB,MAAM;"}
@@ -1,111 +0,0 @@
1
- import {FallbackProps} from 'react-error-boundary'
2
- import {ReactElement} from 'react'
3
- import {SanityConfig} from '@sanity/sdk'
4
-
5
- /**
6
- * A component that handles authentication flow and error boundaries for a
7
- * protected section of the application.
8
- *
9
- * @remarks
10
- * This component manages different authentication states and renders the
11
- * appropriate components based on that state.
12
- *
13
- * @example
14
- * ```tsx
15
- * function App() {
16
- * return (
17
- * <AuthBoundary header={<MyLogo />}>
18
- * <ProtectedContent />
19
- * </AuthBoundary>
20
- * )
21
- * }
22
- * ```
23
- *
24
- * @internal
25
- */
26
- export declare function AuthBoundary({
27
- LoginErrorComponent,
28
- ...props
29
- }: AuthBoundaryProps): React.ReactNode
30
-
31
- /**
32
- * @internal
33
- */
34
- declare interface AuthBoundaryProps extends LoginLayoutProps {
35
- /**
36
- * Custom component to render the login screen.
37
- * Receives all login layout props. Defaults to {@link Login}.
38
- */
39
- LoginComponent?: React.ComponentType<LoginLayoutProps>
40
- /**
41
- * Custom component to render during OAuth callback processing.
42
- * Receives all login layout props. Defaults to {@link LoginCallback}.
43
- */
44
- CallbackComponent?: React.ComponentType<LoginLayoutProps>
45
- /**
46
- * Custom component to render when authentication errors occur.
47
- * Receives login layout props and error boundary props. Defaults to
48
- * {@link LoginError}
49
- */
50
- LoginErrorComponent?: React.ComponentType<LoginErrorProps>
51
- }
52
-
53
- /**
54
- * @alpha
55
- */
56
- declare type LoginErrorProps = FallbackProps & LoginLayoutProps
57
-
58
- /**
59
- * @alpha
60
- * @internal
61
- */
62
- declare interface LoginLayoutProps {
63
- /** Optional header content rendered at top of card */
64
- header?: React.ReactNode
65
- /** Optional footer content rendered below card. Defaults to an internal login footer */
66
- footer?: React.ReactNode
67
- /** Main content rendered in card body */
68
- children?: React.ReactNode
69
- }
70
-
71
- /**
72
- * @public
73
- *
74
- * The SanityApp component provides your Sanity application with access to your Sanity configuration,
75
- * as well as application context and state which is used by the Sanity React hooks. Your application
76
- * must be wrapped with the SanityApp component to function properly.
77
- *
78
- * @param props - Your Sanity configuration and the React children to render
79
- * @returns Your Sanity application, integrated with your Sanity configuration and application context
80
- *
81
- * @example
82
- * ```
83
- * import { SanityApp } from '@sanity/sdk-react
84
- *
85
- * import MyAppRoot from './Root'
86
- *
87
- * const mySanityConfig = {
88
- * procectId: 'my-project-id',
89
- * dataset: 'production',
90
- * }
91
- *
92
- * export default function MyApp() {
93
- * return (
94
- * <SanityApp sanityConfig={mySanityConfig}>
95
- * <MyAppRoot />
96
- * </SanityApp>
97
- * )
98
- * }
99
- * ```
100
- */
101
- export declare function SanityApp({sanityConfig, children}: SanityAppProps): ReactElement
102
-
103
- /**
104
- * @public
105
- */
106
- export declare interface SanityAppProps {
107
- sanityConfig: SanityConfig
108
- children: React.ReactNode
109
- }
110
-
111
- export {}