@sanity/sdk-react 0.0.0-alpha.6 → 0.0.0-alpha.7

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.
@@ -1 +1 @@
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 a Sanity configuration instance.\n * This must wrap any Sanity SDK React component.\n * @public\n * @param props - Sanity project and dataset configuration\n * @returns Rendered component\n * @example\n * ```tsx\n * import {createSanityInstance} from '@sanity/sdk'\n * import {ExampleComponent, SanityProvider} from '@sanity/sdk-react'\n *\n * const sanityInstance = createSanityInstance({projectId: 'your-project-id', dataset: 'production'})\n *\n * export default function MyApp() {\n * return (\n * <SanityProvider sanityInstance={sanityInstance}>\n * <ExampleComponent />\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,GAwBjE,iBAAiB,CAAC,EAAC,UAAU,eAAc,0BAEnD,sBAAsB,UAAtB,EAA+B,OAAO,gBACpC,SACH,CAAA;"}
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 +1 @@
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 * Hook that provides the current Sanity instance from the 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 {getAuthState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\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 the component 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 = 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 * 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 * 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 * @public\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;ACMa,MAAA,eAAe,sBAAsB,YAAY;ACrBvD,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;AC6Ba,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;ACzCa,MAAA,YAAY,mBAAmB,MAAM;"}
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,5 +1,5 @@
1
1
  import {FallbackProps} from 'react-error-boundary'
2
- import {JSX} from 'react'
2
+ import {ReactElement} from 'react'
3
3
  import {SanityConfig} from '@sanity/sdk'
4
4
 
5
5
  /**
@@ -21,7 +21,7 @@ import {SanityConfig} from '@sanity/sdk'
21
21
  * }
22
22
  * ```
23
23
  *
24
- * @alpha
24
+ * @internal
25
25
  */
26
26
  export declare function AuthBoundary({
27
27
  LoginErrorComponent,
@@ -29,7 +29,7 @@ export declare function AuthBoundary({
29
29
  }: AuthBoundaryProps): React.ReactNode
30
30
 
31
31
  /**
32
- * @alpha
32
+ * @internal
33
33
  */
34
34
  declare interface AuthBoundaryProps extends LoginLayoutProps {
35
35
  /**
@@ -71,14 +71,41 @@ declare interface LoginLayoutProps {
71
71
  /**
72
72
  * @public
73
73
  *
74
- * @returns Rendered child component wrapped in a SanityProvider and AuthBoundary
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
+ * ```
75
100
  */
76
- export declare function SanityApp({
77
- sanityConfig,
78
- children,
79
- }: {
80
- children: React.ReactNode
101
+ export declare function SanityApp({sanityConfig, children}: SanityAppProps): ReactElement
102
+
103
+ /**
104
+ * @public
105
+ */
106
+ export declare interface SanityAppProps {
81
107
  sanityConfig: SanityConfig
82
- }): JSX.Element
108
+ children: React.ReactNode
109
+ }
83
110
 
84
111
  export {}
@@ -114,6 +114,7 @@ function LoginError({
114
114
  /* @__PURE__ */ jsx(Button, { mode: "ghost", onClick: handleRetry, text: "Retry", fontSize: 2 })
115
115
  ] }) });
116
116
  }
117
+ typeof window < "u" && window.self !== window.top && import("@sanity/os/bridge");
117
118
  function AuthBoundary({
118
119
  LoginErrorComponent = LoginError,
119
120
  ...props
@@ -141,10 +142,7 @@ function AuthSwitch({
141
142
  return /* @__PURE__ */ jsx(LoginComponent, { ...props });
142
143
  }
143
144
  }
144
- function SanityApp({
145
- sanityConfig,
146
- children
147
- }) {
145
+ function SanityApp({ sanityConfig, children }) {
148
146
  const sanityInstance = createSanityInstance(sanityConfig);
149
147
  return /* @__PURE__ */ jsx(SanityProvider, { sanityInstance, children: /* @__PURE__ */ jsx(AuthBoundary, { children }) });
150
148
  }
@@ -1 +1 @@
1
- {"version":3,"file":"components.js","sources":["../src/components/auth/AuthError.ts","../src/components/auth/LoginFooter.tsx","../src/components/auth/LoginLayout.tsx","../src/components/auth/Login.tsx","../src/components/auth/LoginCallback.tsx","../src/components/auth/LoginError.tsx","../src/components/auth/AuthBoundary.tsx","../src/components/SanityApp.tsx"],"sourcesContent":["/**\n * Error class for authentication-related errors. Wraps errors thrown during the\n * authentication flow.\n *\n * @remarks\n * This class provides a consistent error type for authentication failures while\n * preserving the original error as the cause. If the original error has a\n * message property, it will be used as the error message.\n *\n * @alpha\n */\nexport class AuthError extends Error {\n constructor(error: unknown) {\n if (\n typeof error === 'object' &&\n !!error &&\n 'message' in error &&\n typeof error.message === 'string'\n ) {\n super(error.message)\n } else {\n super()\n }\n\n this.cause = error\n }\n}\n","import {SanityLogo} from '@sanity/logos'\nimport {Box, Flex, Inline, Text} from '@sanity/ui'\n\nconst LINKS = [\n {\n url: 'https://slack.sanity.io/',\n i18nKey: 'workspaces.community-title',\n title: 'Community',\n },\n {\n url: 'https://www.sanity.io/docs',\n i18nKey: 'workspaces.docs-title',\n title: 'Docs',\n },\n {\n url: 'https://www.sanity.io/legal/privacy',\n i18nKey: 'workspaces.privacy-title',\n title: 'Privacy',\n },\n {\n url: 'https://www.sanity.io',\n i18nKey: 'workspaces.sanity-io-title',\n title: 'sanity.io',\n },\n]\n\n/**\n * Default footer component for login screens showing Sanity branding and legal\n * links.\n *\n * @alpha\n */\nexport function LoginFooter(): React.ReactNode {\n return (\n <Box>\n <Flex justify=\"center\">\n <SanityLogo />\n </Flex>\n\n <Flex justify=\"center\">\n <Inline space={2} paddingY={3}>\n {LINKS.map((link) => (\n <Text size={0} key={link.url}>\n <a\n href={link.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n style={{color: 'inherit'}}\n >\n {link.title}\n </a>\n </Text>\n ))}\n </Inline>\n </Flex>\n </Box>\n )\n}\n","import {Card, Container} from '@sanity/ui'\n\nimport {LoginFooter} from './LoginFooter'\n\n/**\n * @alpha\n * @internal\n */\nexport interface LoginLayoutProps {\n /** Optional header content rendered at top of card */\n header?: React.ReactNode\n\n /** Optional footer content rendered below card. Defaults to an internal login footer */\n footer?: React.ReactNode\n\n /** Main content rendered in card body */\n children?: React.ReactNode\n}\n\n/**\n * Layout component for login-related screens providing consistent styling and structure.\n * Renders content in a centered card with optional header and footer sections.\n *\n * Can be used to build custom login screens for the AuthBoundary component, including:\n * - Login provider selection (LoginComponent)\n * - OAuth callback handling (CallbackComponent)\n * - Error states (LoginErrorComponent)\n *\n * @example\n * ```tsx\n * // Custom login screen using the layout\n * function CustomLogin({header, footer}: LoginLayoutProps) {\n * return (\n * <LoginLayout\n * header={header}\n * footer={footer}\n * >\n * <CustomLoginContent />\n * </LoginLayout>\n * )\n * }\n *\n * // Use with AuthBoundary\n * <AuthBoundary\n * LoginComponent={CustomLogin}\n * header={<Logo />}\n * >\n * <ProtectedContent />\n * </AuthBoundary>\n * ```\n *\n * @alpha\n */\nexport function LoginLayout({\n children,\n footer = <LoginFooter />,\n header,\n}: LoginLayoutProps): React.ReactNode {\n return (\n <Container width={0}>\n <Card shadow={1} radius={2} padding={4}>\n {header && header}\n\n {children && children}\n\n {footer}\n </Card>\n </Container>\n )\n}\n","import {Box, Button, Flex, Heading, Spinner, Stack} from '@sanity/ui'\nimport {type JSX, Suspense} from 'react'\n\nimport {useLoginUrls} from '../../hooks/auth/useLoginUrls'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * Login component that displays available authentication providers.\n * Renders a list of login options with a loading fallback while providers load.\n *\n * @alpha\n * @internal\n */\nexport function Login({header, footer}: LoginLayoutProps): JSX.Element {\n return (\n <LoginLayout header={header} footer={footer}>\n <Heading as=\"h6\" align=\"center\">\n Choose login provider:\n </Heading>\n\n <Suspense\n fallback={\n <Box padding={5}>\n <Flex align=\"center\" justify=\"center\">\n <Spinner />\n </Flex>\n </Box>\n }\n >\n <Providers />\n </Suspense>\n </LoginLayout>\n )\n}\n\nfunction Providers() {\n const loginUrls = useLoginUrls()\n\n return (\n <Stack space={3} marginY={5}>\n {loginUrls.map(({title, url}) => (\n <Button\n key={url}\n as=\"a\"\n href={url}\n mode=\"ghost\"\n text={title}\n textAlign=\"center\"\n fontSize={2}\n ></Button>\n ))}\n </Stack>\n )\n}\n","import {Flex, Heading, Spinner} from '@sanity/ui'\nimport {useEffect} from 'react'\n\nimport {useHandleCallback} from '../../hooks/auth/useHandleCallback'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n/**\n * Component shown during auth callback processing that handles login completion.\n * Automatically processes the auth callback when mounted and updates the URL\n * to remove callback parameters without triggering a page reload.\n *\n * @alpha\n */\nexport function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNode {\n const handleCallback = useHandleCallback()\n\n useEffect(() => {\n const url = new URL(location.href)\n handleCallback(url.toString()).then((replacementLocation) => {\n if (replacementLocation) {\n // history API with `replaceState` is used to prevent a reload but still\n // remove the short-lived token from the URL\n history.replaceState(null, '', replacementLocation)\n }\n })\n }, [handleCallback])\n\n return (\n <LoginLayout header={header} footer={footer}>\n <Heading as=\"h6\" align=\"center\">\n Logging you in…\n </Heading>\n <Flex paddingY={5} align=\"center\" justify=\"center\">\n <Spinner />\n </Flex>\n </LoginLayout>\n )\n}\n","import {Button, Heading, Stack, Text} from '@sanity/ui'\nimport {useCallback} from 'react'\nimport {type FallbackProps} from 'react-error-boundary'\n\nimport {useLogOut} from '../../hooks/auth/useLogOut'\nimport {AuthError} from './AuthError'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\n */\nexport type LoginErrorProps = FallbackProps & LoginLayoutProps\n\n/**\n * Displays authentication error details and provides retry functionality.\n * Only handles {@link AuthError} instances - rethrows other error types.\n *\n * @alpha\n */\nexport function LoginError({\n error,\n resetErrorBoundary,\n header,\n footer,\n}: LoginErrorProps): React.ReactNode {\n if (!(error instanceof AuthError)) throw error\n const logout = useLogOut()\n\n const handleRetry = useCallback(async () => {\n await logout()\n resetErrorBoundary()\n }, [logout, resetErrorBoundary])\n\n return (\n <LoginLayout header={header} footer={footer}>\n <Stack space={5} marginBottom={5}>\n <Heading as=\"h6\" align=\"center\">\n Authentication Error\n </Heading>\n <Text align=\"center\">Please try again or contact support if the problem persists.</Text>\n <Button mode=\"ghost\" onClick={handleRetry} text=\"Retry\" fontSize={2} />\n </Stack>\n </LoginLayout>\n )\n}\n","import {AuthStateType} from '@sanity/sdk'\nimport {useMemo} from 'react'\nimport {ErrorBoundary, type FallbackProps} from 'react-error-boundary'\n\nimport {useAuthState} from '../../hooks/auth/useAuthState'\nimport {AuthError} from './AuthError'\nimport {Login} from './Login'\nimport {LoginCallback} from './LoginCallback'\nimport {LoginError, type LoginErrorProps} from './LoginError'\nimport {type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\n */\ninterface AuthBoundaryProps extends LoginLayoutProps {\n /**\n * Custom component to render the login screen.\n * Receives all login layout props. Defaults to {@link Login}.\n */\n LoginComponent?: React.ComponentType<LoginLayoutProps>\n\n /**\n * Custom component to render during OAuth callback processing.\n * Receives all login layout props. Defaults to {@link LoginCallback}.\n */\n CallbackComponent?: React.ComponentType<LoginLayoutProps>\n\n /**\n * Custom component to render when authentication errors occur.\n * Receives login layout props and error boundary props. Defaults to\n * {@link LoginError}\n */\n LoginErrorComponent?: React.ComponentType<LoginErrorProps>\n}\n\n/**\n * A component that handles authentication flow and error boundaries for a\n * protected section of the application.\n *\n * @remarks\n * This component manages different authentication states and renders the\n * appropriate components based on that state.\n *\n * @example\n * ```tsx\n * function App() {\n * return (\n * <AuthBoundary header={<MyLogo />}>\n * <ProtectedContent />\n * </AuthBoundary>\n * )\n * }\n * ```\n *\n * @alpha\n */\nexport function AuthBoundary({\n LoginErrorComponent = LoginError,\n ...props\n}: AuthBoundaryProps): React.ReactNode {\n const {header, footer} = props\n const FallbackComponent = useMemo(() => {\n return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {\n return <LoginErrorComponent {...fallbackProps} header={header} footer={footer} />\n }\n }, [header, footer, LoginErrorComponent])\n\n return (\n <ErrorBoundary FallbackComponent={FallbackComponent}>\n <AuthSwitch {...props} />\n </ErrorBoundary>\n )\n}\n\ninterface AuthSwitchProps extends LoginLayoutProps {\n LoginComponent?: React.ComponentType<LoginLayoutProps>\n CallbackComponent?: React.ComponentType<LoginLayoutProps>\n}\n\nfunction AuthSwitch({\n LoginComponent = Login,\n CallbackComponent = LoginCallback,\n children,\n ...props\n}: AuthSwitchProps) {\n const authState = useAuthState()\n\n switch (authState.type) {\n case AuthStateType.ERROR: {\n throw new AuthError(authState.error)\n }\n case AuthStateType.LOGGING_IN: {\n return <CallbackComponent {...props} />\n }\n case AuthStateType.LOGGED_IN: {\n return children\n }\n default: {\n return <LoginComponent {...props} />\n }\n }\n}\n","import {createSanityInstance, type SanityConfig} from '@sanity/sdk'\nimport {type JSX} from 'react'\n\nimport {SanityProvider} from '../context/SanityProvider'\nimport {AuthBoundary} from './auth/AuthBoundary'\n\n/**\n * @public\n *\n * @returns Rendered child component wrapped in a SanityProvider and AuthBoundary\n */\nexport function SanityApp({\n sanityConfig,\n children,\n}: {\n children: React.ReactNode\n sanityConfig: SanityConfig\n}): JSX.Element {\n const sanityInstance = createSanityInstance(sanityConfig)\n\n return (\n <SanityProvider sanityInstance={sanityInstance}>\n <AuthBoundary>{children}</AuthBoundary>\n </SanityProvider>\n )\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"components.js","sources":["../src/components/auth/AuthError.ts","../src/components/auth/LoginFooter.tsx","../src/components/auth/LoginLayout.tsx","../src/components/auth/Login.tsx","../src/components/auth/LoginCallback.tsx","../src/components/auth/LoginError.tsx","../src/components/auth/AuthBoundary.tsx","../src/components/SanityApp.tsx"],"sourcesContent":["/**\n * Error class for authentication-related errors. Wraps errors thrown during the\n * authentication flow.\n *\n * @remarks\n * This class provides a consistent error type for authentication failures while\n * preserving the original error as the cause. If the original error has a\n * message property, it will be used as the error message.\n *\n * @alpha\n */\nexport class AuthError extends Error {\n constructor(error: unknown) {\n if (\n typeof error === 'object' &&\n !!error &&\n 'message' in error &&\n typeof error.message === 'string'\n ) {\n super(error.message)\n } else {\n super()\n }\n\n this.cause = error\n }\n}\n","import {SanityLogo} from '@sanity/logos'\nimport {Box, Flex, Inline, Text} from '@sanity/ui'\n\nconst LINKS = [\n {\n url: 'https://slack.sanity.io/',\n i18nKey: 'workspaces.community-title',\n title: 'Community',\n },\n {\n url: 'https://www.sanity.io/docs',\n i18nKey: 'workspaces.docs-title',\n title: 'Docs',\n },\n {\n url: 'https://www.sanity.io/legal/privacy',\n i18nKey: 'workspaces.privacy-title',\n title: 'Privacy',\n },\n {\n url: 'https://www.sanity.io',\n i18nKey: 'workspaces.sanity-io-title',\n title: 'sanity.io',\n },\n]\n\n/**\n * Default footer component for login screens showing Sanity branding and legal\n * links.\n *\n * @alpha\n */\nexport function LoginFooter(): React.ReactNode {\n return (\n <Box>\n <Flex justify=\"center\">\n <SanityLogo />\n </Flex>\n\n <Flex justify=\"center\">\n <Inline space={2} paddingY={3}>\n {LINKS.map((link) => (\n <Text size={0} key={link.url}>\n <a\n href={link.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n style={{color: 'inherit'}}\n >\n {link.title}\n </a>\n </Text>\n ))}\n </Inline>\n </Flex>\n </Box>\n )\n}\n","import {Card, Container} from '@sanity/ui'\n\nimport {LoginFooter} from './LoginFooter'\n\n/**\n * @alpha\n * @internal\n */\nexport interface LoginLayoutProps {\n /** Optional header content rendered at top of card */\n header?: React.ReactNode\n\n /** Optional footer content rendered below card. Defaults to an internal login footer */\n footer?: React.ReactNode\n\n /** Main content rendered in card body */\n children?: React.ReactNode\n}\n\n/**\n * Layout component for login-related screens providing consistent styling and structure.\n * Renders content in a centered card with optional header and footer sections.\n *\n * Can be used to build custom login screens for the AuthBoundary component, including:\n * - Login provider selection (LoginComponent)\n * - OAuth callback handling (CallbackComponent)\n * - Error states (LoginErrorComponent)\n *\n * @example\n * ```tsx\n * // Custom login screen using the layout\n * function CustomLogin({header, footer}: LoginLayoutProps) {\n * return (\n * <LoginLayout\n * header={header}\n * footer={footer}\n * >\n * <CustomLoginContent />\n * </LoginLayout>\n * )\n * }\n *\n * // Use with AuthBoundary\n * <AuthBoundary\n * LoginComponent={CustomLogin}\n * header={<Logo />}\n * >\n * <ProtectedContent />\n * </AuthBoundary>\n * ```\n *\n * @alpha\n */\nexport function LoginLayout({\n children,\n footer = <LoginFooter />,\n header,\n}: LoginLayoutProps): React.ReactNode {\n return (\n <Container width={0}>\n <Card shadow={1} radius={2} padding={4}>\n {header && header}\n\n {children && children}\n\n {footer}\n </Card>\n </Container>\n )\n}\n","import {Box, Button, Flex, Heading, Spinner, Stack} from '@sanity/ui'\nimport {type JSX, Suspense} from 'react'\n\nimport {useLoginUrls} from '../../hooks/auth/useLoginUrls'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * Login component that displays available authentication providers.\n * Renders a list of login options with a loading fallback while providers load.\n *\n * @alpha\n * @internal\n */\nexport function Login({header, footer}: LoginLayoutProps): JSX.Element {\n return (\n <LoginLayout header={header} footer={footer}>\n <Heading as=\"h6\" align=\"center\">\n Choose login provider:\n </Heading>\n\n <Suspense\n fallback={\n <Box padding={5}>\n <Flex align=\"center\" justify=\"center\">\n <Spinner />\n </Flex>\n </Box>\n }\n >\n <Providers />\n </Suspense>\n </LoginLayout>\n )\n}\n\nfunction Providers() {\n const loginUrls = useLoginUrls()\n\n return (\n <Stack space={3} marginY={5}>\n {loginUrls.map(({title, url}) => (\n <Button\n key={url}\n as=\"a\"\n href={url}\n mode=\"ghost\"\n text={title}\n textAlign=\"center\"\n fontSize={2}\n ></Button>\n ))}\n </Stack>\n )\n}\n","import {Flex, Heading, Spinner} from '@sanity/ui'\nimport {useEffect} from 'react'\n\nimport {useHandleCallback} from '../../hooks/auth/useHandleCallback'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n/**\n * Component shown during auth callback processing that handles login completion.\n * Automatically processes the auth callback when mounted and updates the URL\n * to remove callback parameters without triggering a page reload.\n *\n * @alpha\n */\nexport function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNode {\n const handleCallback = useHandleCallback()\n\n useEffect(() => {\n const url = new URL(location.href)\n handleCallback(url.toString()).then((replacementLocation) => {\n if (replacementLocation) {\n // history API with `replaceState` is used to prevent a reload but still\n // remove the short-lived token from the URL\n history.replaceState(null, '', replacementLocation)\n }\n })\n }, [handleCallback])\n\n return (\n <LoginLayout header={header} footer={footer}>\n <Heading as=\"h6\" align=\"center\">\n Logging you in…\n </Heading>\n <Flex paddingY={5} align=\"center\" justify=\"center\">\n <Spinner />\n </Flex>\n </LoginLayout>\n )\n}\n","import {Button, Heading, Stack, Text} from '@sanity/ui'\nimport {useCallback} from 'react'\nimport {type FallbackProps} from 'react-error-boundary'\n\nimport {useLogOut} from '../../hooks/auth/useLogOut'\nimport {AuthError} from './AuthError'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\n */\nexport type LoginErrorProps = FallbackProps & LoginLayoutProps\n\n/**\n * Displays authentication error details and provides retry functionality.\n * Only handles {@link AuthError} instances - rethrows other error types.\n *\n * @alpha\n */\nexport function LoginError({\n error,\n resetErrorBoundary,\n header,\n footer,\n}: LoginErrorProps): React.ReactNode {\n if (!(error instanceof AuthError)) throw error\n const logout = useLogOut()\n\n const handleRetry = useCallback(async () => {\n await logout()\n resetErrorBoundary()\n }, [logout, resetErrorBoundary])\n\n return (\n <LoginLayout header={header} footer={footer}>\n <Stack space={5} marginBottom={5}>\n <Heading as=\"h6\" align=\"center\">\n Authentication Error\n </Heading>\n <Text align=\"center\">Please try again or contact support if the problem persists.</Text>\n <Button mode=\"ghost\" onClick={handleRetry} text=\"Retry\" fontSize={2} />\n </Stack>\n </LoginLayout>\n )\n}\n","import {AuthStateType} from '@sanity/sdk'\nimport {useMemo} from 'react'\nimport {ErrorBoundary, type FallbackProps} from 'react-error-boundary'\n\nimport {useAuthState} from '../../hooks/auth/useAuthState'\nimport {AuthError} from './AuthError'\nimport {Login} from './Login'\nimport {LoginCallback} from './LoginCallback'\nimport {LoginError, type LoginErrorProps} from './LoginError'\nimport {type LoginLayoutProps} from './LoginLayout'\n\n// Only import bridge if we're in an iframe. This assumes that the app is\n// running withing SanityOS if it is in an iframe.\nif (typeof window !== 'undefined' && window.self !== window.top) {\n import('@sanity/os/bridge')\n}\n\n/**\n * @internal\n */\ninterface AuthBoundaryProps extends LoginLayoutProps {\n /**\n * Custom component to render the login screen.\n * Receives all login layout props. Defaults to {@link Login}.\n */\n LoginComponent?: React.ComponentType<LoginLayoutProps>\n\n /**\n * Custom component to render during OAuth callback processing.\n * Receives all login layout props. Defaults to {@link LoginCallback}.\n */\n CallbackComponent?: React.ComponentType<LoginLayoutProps>\n\n /**\n * Custom component to render when authentication errors occur.\n * Receives login layout props and error boundary props. Defaults to\n * {@link LoginError}\n */\n LoginErrorComponent?: React.ComponentType<LoginErrorProps>\n}\n\n/**\n * A component that handles authentication flow and error boundaries for a\n * protected section of the application.\n *\n * @remarks\n * This component manages different authentication states and renders the\n * appropriate components based on that state.\n *\n * @example\n * ```tsx\n * function App() {\n * return (\n * <AuthBoundary header={<MyLogo />}>\n * <ProtectedContent />\n * </AuthBoundary>\n * )\n * }\n * ```\n *\n * @internal\n */\nexport function AuthBoundary({\n LoginErrorComponent = LoginError,\n ...props\n}: AuthBoundaryProps): React.ReactNode {\n const {header, footer} = props\n const FallbackComponent = useMemo(() => {\n return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {\n return <LoginErrorComponent {...fallbackProps} header={header} footer={footer} />\n }\n }, [header, footer, LoginErrorComponent])\n\n return (\n <ErrorBoundary FallbackComponent={FallbackComponent}>\n <AuthSwitch {...props} />\n </ErrorBoundary>\n )\n}\n\ninterface AuthSwitchProps extends LoginLayoutProps {\n LoginComponent?: React.ComponentType<LoginLayoutProps>\n CallbackComponent?: React.ComponentType<LoginLayoutProps>\n}\n\nfunction AuthSwitch({\n LoginComponent = Login,\n CallbackComponent = LoginCallback,\n children,\n ...props\n}: AuthSwitchProps) {\n const authState = useAuthState()\n\n switch (authState.type) {\n case AuthStateType.ERROR: {\n throw new AuthError(authState.error)\n }\n case AuthStateType.LOGGING_IN: {\n return <CallbackComponent {...props} />\n }\n case AuthStateType.LOGGED_IN: {\n return children\n }\n default: {\n return <LoginComponent {...props} />\n }\n }\n}\n","import {createSanityInstance, type SanityConfig} from '@sanity/sdk'\nimport {type ReactElement} from 'react'\n\nimport {SanityProvider} from '../context/SanityProvider'\nimport {AuthBoundary} from './auth/AuthBoundary'\n\n/**\n * @public\n */\nexport interface SanityAppProps {\n sanityConfig: SanityConfig\n children: React.ReactNode\n}\n\n/**\n * @public\n *\n * The SanityApp component provides your Sanity application with access to your Sanity configuration,\n * as well as application context and state which is used by the Sanity React hooks. Your application\n * must be wrapped with the SanityApp component to function properly.\n *\n * @param props - Your Sanity configuration and the React children to render\n * @returns Your Sanity application, integrated with your Sanity configuration and application context\n *\n * @example\n * ```\n * import { SanityApp } from '@sanity/sdk-react\n *\n * import MyAppRoot from './Root'\n *\n * const mySanityConfig = {\n * procectId: 'my-project-id',\n * dataset: 'production',\n * }\n *\n * export default function MyApp() {\n * return (\n * <SanityApp sanityConfig={mySanityConfig}>\n * <MyAppRoot />\n * </SanityApp>\n * )\n * }\n * ```\n */\nexport function SanityApp({sanityConfig, children}: SanityAppProps): ReactElement {\n const sanityInstance = createSanityInstance(sanityConfig)\n\n return (\n <SanityProvider sanityInstance={sanityInstance}>\n <AuthBoundary>{children}</AuthBoundary>\n </SanityProvider>\n )\n}\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,kBAAkB,MAAM;AAAA,EACnC,YAAY,OAAgB;AAExB,WAAO,SAAU,YACf,SACF,aAAa,SACb,OAAO,MAAM,WAAY,WAEzB,MAAM,MAAM,OAAO,IAEnB,MAAM,GAGR,KAAK,QAAQ;AAAA,EAAA;AAEjB;ACvBA,MAAM,QAAQ;AAAA,EACZ;AAAA,IACE,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAEX;AAQO,SAAS,cAA+B;AAC7C,8BACG,KACC,EAAA,UAAA;AAAA,IAAA,oBAAC,MAAK,EAAA,SAAQ,UACZ,UAAA,oBAAC,aAAW,CAAA,GACd;AAAA,wBAEC,MAAK,EAAA,SAAQ,UACZ,UAAA,oBAAC,UAAO,OAAO,GAAG,UAAU,GACzB,gBAAM,IAAI,CAAC,SACT,oBAAA,MAAA,EAAK,MAAM,GACV,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,KAAK;AAAA,QACX,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,OAAO,EAAC,OAAO,UAAS;AAAA,QAEvB,UAAK,KAAA;AAAA,MAAA;AAAA,IAPU,EAAA,GAAA,KAAK,GASzB,CACD,EACH,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;ACJO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,6BAAU,aAAY,EAAA;AAAA,EACtB;AACF,GAAsC;AAElC,SAAA,oBAAC,WAAU,EAAA,OAAO,GAChB,UAAA,qBAAC,MAAK,EAAA,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAClC,UAAA;AAAA,IAAU,UAAA;AAAA,IAEV,YAAY;AAAA,IAEZ;AAAA,EAAA,EAAA,CACH,EACF,CAAA;AAEJ;ACxDO,SAAS,MAAM,EAAC,QAAQ,UAAwC;AAEnE,SAAA,qBAAC,aAAY,EAAA,QAAgB,QAC3B,UAAA;AAAA,IAAA,oBAAC,SAAQ,EAAA,IAAG,MAAK,OAAM,UAAS,UAEhC,0BAAA;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UACE,oBAAC,KAAI,EAAA,SAAS,GACZ,UAAC,oBAAA,MAAA,EAAK,OAAM,UAAS,SAAQ,UAC3B,UAAC,oBAAA,SAAA,CAAA,CAAQ,EACX,CAAA,GACF;AAAA,QAGF,8BAAC,WAAU,CAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACb,GACF;AAEJ;AAEA,SAAS,YAAY;AACnB,QAAM,YAAY,aAAa;AAE/B,SACG,oBAAA,OAAA,EAAM,OAAO,GAAG,SAAS,GACvB,UAAU,UAAA,IAAI,CAAC,EAAC,OAAO,IACtB,MAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,IAAG;AAAA,MACH,MAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,IANL;AAAA,EAQR,CAAA,GACH;AAEJ;ACvCO,SAAS,cAAc,EAAC,QAAQ,UAA4C;AACjF,QAAM,iBAAiB,kBAAkB;AAEzC,SAAA,UAAU,MAAM;AACd,UAAM,MAAM,IAAI,IAAI,SAAS,IAAI;AACjC,mBAAe,IAAI,SAAS,CAAC,EAAE,KAAK,CAAC,wBAAwB;AACvD,6BAGF,QAAQ,aAAa,MAAM,IAAI,mBAAmB;AAAA,IAAA,CAErD;AAAA,EAAA,GACA,CAAC,cAAc,CAAC,GAGhB,qBAAA,aAAA,EAAY,QAAgB,QAC3B,UAAA;AAAA,IAAA,oBAAC,SAAQ,EAAA,IAAG,MAAK,OAAM,UAAS,UAEhC,wBAAA;AAAA,IACA,oBAAC,MAAK,EAAA,UAAU,GAAG,OAAM,UAAS,SAAQ,UACxC,UAAC,oBAAA,SAAA,CAAQ,CAAA,EACX,CAAA;AAAA,EAAA,GACF;AAEJ;ACnBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqC;AAC/B,MAAA,EAAE,iBAAiB,WAAkB,OAAA;AACzC,QAAM,SAAS,UAAA,GAET,cAAc,YAAY,YAAY;AACpC,UAAA,UACN,mBAAmB;AAAA,EAAA,GAClB,CAAC,QAAQ,kBAAkB,CAAC;AAG7B,SAAA,oBAAC,eAAY,QAAgB,QAC3B,+BAAC,OAAM,EAAA,OAAO,GAAG,cAAc,GAC7B,UAAA;AAAA,IAAA,oBAAC,SAAQ,EAAA,IAAG,MAAK,OAAM,UAAS,UAEhC,wBAAA;AAAA,IACC,oBAAA,MAAA,EAAK,OAAM,UAAS,UAA4D,gEAAA;AAAA,IACjF,oBAAC,UAAO,MAAK,SAAQ,SAAS,aAAa,MAAK,SAAQ,UAAU,EAAG,CAAA;AAAA,EAAA,EAAA,CACvE,EACF,CAAA;AAEJ;AC/BI,OAAO,SAAW,OAAe,OAAO,SAAS,OAAO,OAC1D,OAAO,mBAAmB;AAgDrB,SAAS,aAAa;AAAA,EAC3B,sBAAsB;AAAA,EACtB,GAAG;AACL,GAAuC;AAC/B,QAAA,EAAC,QAAQ,WAAU,OACnB,oBAAoB,QAAQ,MACzB,SAAuC,eAA8B;AAC1E,WAAQ,oBAAA,qBAAA,EAAqB,GAAG,eAAe,QAAgB,QAAgB;AAAA,EAEhF,GAAA,CAAC,QAAQ,QAAQ,mBAAmB,CAAC;AAExC,6BACG,eAAc,EAAA,mBACb,8BAAC,YAAY,EAAA,GAAG,MAAO,CAAA,GACzB;AAEJ;AAOA,SAAS,WAAW;AAAA,EAClB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,YAAY,aAAa;AAE/B,UAAQ,UAAU,MAAM;AAAA,IACtB,KAAK,cAAc;AACX,YAAA,IAAI,UAAU,UAAU,KAAK;AAAA,IAErC,KAAK,cAAc;AACV,aAAA,oBAAC,mBAAmB,EAAA,GAAG,MAAO,CAAA;AAAA,IAEvC,KAAK,cAAc;AACV,aAAA;AAAA,IAET;AACS,aAAA,oBAAC,gBAAgB,EAAA,GAAG,MAAO,CAAA;AAAA,EAAA;AAGxC;AC/DO,SAAS,UAAU,EAAC,cAAc,YAAyC;AAC1E,QAAA,iBAAiB,qBAAqB,YAAY;AAExD,6BACG,gBAAe,EAAA,gBACd,UAAC,oBAAA,cAAA,EAAc,SAAS,CAAA,GAC1B;AAEJ;"}
package/dist/context.d.ts CHANGED
@@ -2,22 +2,28 @@ import {ReactElement} from 'react'
2
2
  import {SanityInstance} from '@sanity/sdk'
3
3
 
4
4
  /**
5
- * Top-level context provider that provides a Sanity configuration instance.
6
- * This must wrap any Sanity SDK React component.
7
- * @public
5
+ * Top-level context provider that provides access to the Sanity configuration instance.
6
+ * This must wrap any components making use of the Sanity SDK React hooks.
7
+ * @remarks In most cases, SanityApp should be used rather than SanityProvider directly; SanityApp bundles both SanityProvider and an authentication layer.
8
+ * @internal
8
9
  * @param props - Sanity project and dataset configuration
9
10
  * @returns Rendered component
10
11
  * @example
11
12
  * ```tsx
12
13
  * import {createSanityInstance} from '@sanity/sdk'
13
- * import {ExampleComponent, SanityProvider} from '@sanity/sdk-react'
14
+ * import {SanityProvider} from '@sanity/sdk-react'
15
+ *
16
+ * import MyAppRoot from './Root'
14
17
  *
15
- * const sanityInstance = createSanityInstance({projectId: 'your-project-id', dataset: 'production'})
18
+ * const sanityInstance = createSanityInstance({
19
+ * projectId: 'your-project-id',
20
+ * dataset: 'production',
21
+ * })
16
22
  *
17
23
  * export default function MyApp() {
18
24
  * return (
19
25
  * <SanityProvider sanityInstance={sanityInstance}>
20
- * <ExampleComponent />
26
+ * <MyAppRoot />
21
27
  * </SanityProvider>
22
28
  * )
23
29
  * }
package/dist/hooks.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import {AuthProvider} from '@sanity/sdk'
2
2
  import {AuthState} from '@sanity/sdk'
3
- import {CurrentUser} from '@sanity/types'
3
+ import {CurrentUser} from '@sanity/sdk'
4
4
  import {DocumentHandle} from '@sanity/sdk'
5
5
  import {DocumentListOptions} from '@sanity/sdk'
6
6
  import {FrameMessage} from '@sanity/sdk'
@@ -8,6 +8,8 @@ import {PreviewValue} from '@sanity/sdk'
8
8
  import {SanityInstance} from '@sanity/sdk'
9
9
  import {WindowMessage} from '@sanity/sdk'
10
10
 
11
+ export {CurrentUser}
12
+
11
13
  /**
12
14
  * @public
13
15
  */
@@ -25,7 +27,7 @@ export declare interface DocumentCollection {
25
27
  }
26
28
 
27
29
  /**
28
- * @public
30
+ * @internal
29
31
  */
30
32
  export declare interface FrameConnection<TFrameMessage extends FrameMessage> {
31
33
  connect: (frameWindow: Window) => () => void
@@ -50,17 +52,18 @@ export declare interface FrameConnection<TFrameMessage extends FrameMessage> {
50
52
  }
51
53
 
52
54
  /**
53
- * @public
55
+ * @internal
54
56
  */
55
57
  export declare type MessageHandler<TWindowMessage extends WindowMessage> = (
56
58
  event: TWindowMessage['data'],
57
59
  ) => TWindowMessage['response'] | Promise<TWindowMessage['response']>
58
60
 
59
61
  /**
62
+ * @internal
60
63
  * A React hook that subscribes to authentication state changes.
61
64
  *
62
65
  * This hook provides access to the current authentication state type from the Sanity auth store.
63
- * It automatically re-renders the component when the authentication state changes.
66
+ * It automatically re-renders when the authentication state changes.
64
67
  *
65
68
  * @remarks
66
69
  * The hook uses `useSyncExternalStore` to safely subscribe to auth state changes
@@ -82,15 +85,32 @@ export declare const useAuthState: () => AuthState
82
85
 
83
86
  /**
84
87
  * Hook to get the currently logged in user
85
- * @public
88
+ * @internal
86
89
  * @returns The current user or null if not authenticated
87
90
  */
88
91
  export declare const useAuthToken: () => string | null
89
92
 
90
93
  /**
91
- * Hook to get the currently logged in user
94
+ * @TODO This should suspend! And possibly not return `null`?
95
+ *
92
96
  * @public
93
- * @returns The current user or null if not authenticated
97
+ *
98
+ * The `useCurrentUser` hook returns the currently authenticated user’s profile information (their name, email, roles, etc).
99
+ * If no users are currently logged in, the hook returns null.
100
+ *
101
+ * @returns The current user data, or `null` if not authenticated
102
+ *
103
+ * @example Rendering a basic user profile
104
+ * ```
105
+ * const user = useCurrentUser()
106
+ *
107
+ * return (
108
+ * <figure>
109
+ * <img src={user?.profileImage} alt=`Profile image for ${user?.name}` />
110
+ * <h2>{user?.name}</h2>
111
+ * </figure>
112
+ * )
113
+ * ```
94
114
  */
95
115
  export declare const useCurrentUser: () => CurrentUser | null
96
116
 
@@ -148,7 +168,7 @@ export declare const useCurrentUser: () => CurrentUser | null
148
168
  export declare function useDocuments(options?: DocumentListOptions): DocumentCollection
149
169
 
150
170
  /**
151
- * @public
171
+ * @internal
152
172
  */
153
173
  export declare function useFrameConnection<
154
174
  TFrameMessage extends FrameMessage,
@@ -156,7 +176,7 @@ export declare function useFrameConnection<
156
176
  >(options: UseFrameConnectionOptions<TWindowMessage>): FrameConnection<TFrameMessage>
157
177
 
158
178
  /**
159
- * @public
179
+ * @internal
160
180
  */
161
181
  export declare interface UseFrameConnectionOptions<TWindowMessage extends WindowMessage> {
162
182
  name: string
@@ -166,6 +186,7 @@ export declare interface UseFrameConnectionOptions<TWindowMessage extends Window
166
186
  }
167
187
 
168
188
  /**
189
+ * @internal
169
190
  * A React hook that returns a function for handling authentication callbacks.
170
191
  *
171
192
  * @remarks
@@ -209,6 +230,7 @@ export declare const useHandleCallback: () => (
209
230
  ) => Promise<string | false>
210
231
 
211
232
  /**
233
+ * @internal
212
234
  * A React hook that retrieves the available authentication provider URLs for login.
213
235
  *
214
236
  * @remarks
@@ -250,7 +272,7 @@ export declare function useLoginUrls(): AuthProvider[]
250
272
 
251
273
  /**
252
274
  * Hook to log out of the current session
253
- * @public
275
+ * @internal
254
276
  * @returns A function to log out of the current session
255
277
  */
256
278
  export declare const useLogOut: () => () => Promise<void>
@@ -271,8 +293,8 @@ export declare const useLogOut: () => () => Promise<void>
271
293
  * // PreviewComponent.jsx
272
294
  * export default function PreviewComponent({ document }) {
273
295
  * const { results: { title, subtitle, media }, isPending } = usePreview({ document })
274
- * return isPending ? 'Loading…' : (
275
- * <article>
296
+ * return (
297
+ * <article style={{ opacity: isPending ? 0.5 : 1}}>
276
298
  * {media?.type === 'image-asset' ? <img src={media.url} alt='' /> : ''}
277
299
  * <h2>{title}</h2>
278
300
  * <p>{subtitle}</p>
@@ -322,10 +344,10 @@ export declare interface UsePreviewResults {
322
344
  }
323
345
 
324
346
  /**
325
- * Hook that provides the current Sanity instance from the context.
347
+ * `useSanityInstance` returns the current Sanity instance from the application context.
326
348
  * This must be called from within a `SanityProvider` component.
327
349
  * @public
328
- * @returns the current Sanity instance
350
+ * @returns The current Sanity instance
329
351
  * @example
330
352
  * ```tsx
331
353
  * const instance = useSanityInstance()
@@ -334,7 +356,7 @@ export declare interface UsePreviewResults {
334
356
  export declare const useSanityInstance: () => SanityInstance
335
357
 
336
358
  /**
337
- * @public
359
+ * @internal
338
360
  */
339
361
  export declare function useWindowConnection<
340
362
  TWindowMessage extends WindowMessage,
@@ -342,7 +364,7 @@ export declare function useWindowConnection<
342
364
  >(options: UseWindowConnectionOptions<TFrameMessage>): WindowConnection<TWindowMessage>
343
365
 
344
366
  /**
345
- * @public
367
+ * @internal
346
368
  */
347
369
  export declare interface UseWindowConnectionOptions<TMessage extends FrameMessage> {
348
370
  name: string
@@ -351,7 +373,7 @@ export declare interface UseWindowConnectionOptions<TMessage extends FrameMessag
351
373
  }
352
374
 
353
375
  /**
354
- * @public
376
+ * @internal
355
377
  */
356
378
  export declare interface WindowConnection<TMessage extends WindowMessage> {
357
379
  sendMessage: <TType extends TMessage['type']>(
@@ -366,7 +388,7 @@ export declare interface WindowConnection<TMessage extends WindowMessage> {
366
388
  }
367
389
 
368
390
  /**
369
- * @public
391
+ * @internal
370
392
  */
371
393
  export declare type WindowMessageHandler<TFrameMessage extends FrameMessage> = (
372
394
  event: TFrameMessage['data'],
package/dist/hooks.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hooks.js","sources":["../src/hooks/auth/useAuthToken.tsx","../src/hooks/auth/useCurrentUser.tsx","../src/hooks/comlink/useFrameConnection.ts","../src/hooks/comlink/useWindowConnection.ts","../src/hooks/documentCollection/useDocuments.ts","../src/hooks/preview/usePreview.tsx"],"sourcesContent":["import {getTokenState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * Hook to get the currently logged in user\n * @public\n * @returns The current user or null if not authenticated\n */\nexport const useAuthToken = createStateSourceHook(getTokenState)\n","import {getCurrentUserState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * Hook to get the currently logged in user\n * @public\n * @returns The current user or null if not authenticated\n */\nexport const useCurrentUser = createStateSourceHook(getCurrentUserState)\n","import {\n type FrameMessage,\n getOrCreateChannel,\n getOrCreateController,\n releaseChannel,\n type WindowMessage,\n} from '@sanity/sdk'\nimport {useCallback, useEffect, useMemo} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @public\n */\nexport type FrameMessageHandler<TWindowMessage extends WindowMessage> = (\n event: TWindowMessage['data'],\n) => TWindowMessage['response'] | Promise<TWindowMessage['response']>\n\n/**\n * @public\n */\nexport interface UseFrameConnectionOptions<TWindowMessage extends WindowMessage> {\n name: string\n connectTo: string\n targetOrigin: string\n onMessage?: Record<string, FrameMessageHandler<TWindowMessage>>\n}\n\n/**\n * @public\n */\nexport interface FrameConnection<TFrameMessage extends FrameMessage> {\n connect: (frameWindow: Window) => () => void // Return cleanup function\n sendMessage: <T extends TFrameMessage['type']>(\n ...params: Extract<TFrameMessage, {type: T}>['data'] extends undefined\n ? [type: T]\n : [type: T, data: Extract<TFrameMessage, {type: T}>['data']]\n ) => void\n}\n\n/**\n * @public\n */\nexport function useFrameConnection<\n TFrameMessage extends FrameMessage,\n TWindowMessage extends WindowMessage,\n>(options: UseFrameConnectionOptions<TWindowMessage>): FrameConnection<TFrameMessage> {\n const {onMessage, targetOrigin, name, connectTo} = options\n const instance = useSanityInstance()\n\n const controller = useMemo(\n () => getOrCreateController(instance, targetOrigin),\n [instance, targetOrigin],\n )\n\n const channel = useMemo(\n () =>\n getOrCreateChannel(instance, {\n name,\n connectTo,\n }),\n [instance, name, connectTo],\n )\n\n useEffect(() => {\n if (!channel || !onMessage) return\n\n const unsubscribers: Array<() => void> = []\n\n Object.entries(onMessage).forEach(([type, handler]) => {\n const unsubscribe = channel.on(type, handler)\n unsubscribers.push(unsubscribe)\n })\n\n return () => {\n unsubscribers.forEach((unsub) => unsub())\n }\n }, [channel, onMessage])\n\n const connect = useCallback(\n (frameWindow: Window) => {\n const removeTarget = controller?.addTarget(frameWindow)\n return () => {\n removeTarget?.()\n }\n },\n [controller],\n )\n\n const sendMessage = useCallback(\n <T extends TFrameMessage['type']>(\n type: T,\n data?: Extract<TFrameMessage, {type: T}>['data'],\n ) => {\n channel?.post(type, data)\n },\n [channel],\n )\n\n // cleanup channel on unmount\n useEffect(() => {\n return () => {\n releaseChannel(instance, name)\n }\n }, [name, instance])\n\n return {\n connect,\n sendMessage,\n }\n}\n","import {type FrameMessage, getOrCreateNode, releaseNode, type WindowMessage} from '@sanity/sdk'\nimport {useCallback, useEffect, useMemo} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @public\n */\nexport type WindowMessageHandler<TFrameMessage extends FrameMessage> = (\n event: TFrameMessage['data'],\n) => TFrameMessage['response']\n\n/**\n * @public\n */\nexport interface UseWindowConnectionOptions<TMessage extends FrameMessage> {\n name: string\n connectTo: string\n onMessage?: Record<TMessage['type'], WindowMessageHandler<TMessage>>\n}\n\n/**\n * @public\n */\nexport interface WindowConnection<TMessage extends WindowMessage> {\n sendMessage: <TType extends TMessage['type']>(\n type: TType,\n data?: Extract<TMessage, {type: TType}>['data'],\n ) => void\n}\n\n/**\n * @public\n */\nexport function useWindowConnection<\n TWindowMessage extends WindowMessage,\n TFrameMessage extends FrameMessage,\n>(options: UseWindowConnectionOptions<TFrameMessage>): WindowConnection<TWindowMessage> {\n const {name, onMessage, connectTo} = options\n const instance = useSanityInstance()\n\n const node = useMemo(\n () => getOrCreateNode(instance, {name, connectTo}),\n [instance, name, connectTo],\n )\n\n useEffect(() => {\n if (!onMessage) return\n\n const unsubscribers: Array<() => void> = []\n\n Object.entries(onMessage).forEach(([type, handler]) => {\n const unsubscribe = node.on(type, handler as WindowMessageHandler<TFrameMessage>)\n unsubscribers.push(unsubscribe)\n })\n\n return () => {\n unsubscribers.forEach((unsub) => unsub())\n }\n }, [node, onMessage])\n\n const sendMessage = useCallback(\n <TType extends WindowMessage['type']>(\n type: TType,\n data?: Extract<WindowMessage, {type: TType}>['data'],\n ) => {\n node?.post(type, data)\n },\n [node],\n )\n\n // cleanup node on unmount\n useEffect(() => {\n return () => {\n releaseNode(instance, name)\n }\n }, [instance, name])\n\n return {\n sendMessage,\n }\n}\n","import {createDocumentListStore, type DocumentHandle, type DocumentListOptions} from '@sanity/sdk'\nimport {useCallback, useEffect, useState, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @public\n */\nexport interface DocumentCollection {\n /** Retrieve more documents matching the provided options */\n loadMore: () => void\n /** The retrieved document handles of the documents matching the provided options */\n results: DocumentHandle[]\n /** Whether a retrieval of documents is in flight */\n isPending: boolean\n /** Whether more documents exist that match the provided options than have been retrieved */\n hasMore: boolean\n /** The total number of documents in the collection */\n count: number\n}\n\ntype DocumentListStore = ReturnType<typeof createDocumentListStore>\ntype DocumentListState = ReturnType<DocumentListStore['getState']>['getCurrent']\nconst STABLE_EMPTY = {\n results: [],\n isPending: false,\n hasMore: false,\n count: 0,\n}\n\n/**\n * @public\n *\n * The `useDocuments` hook retrieves and provides access to a live collection of documents, optionally filtered, sorted, and matched to a given Content Lake perspective.\n * Because the returned document collection is live, the results will update in real time until the component invoking the hook is unmounted.\n *\n * @param options - Options for narrowing and sorting the document collection\n * @returns The collection of documents matching the provided options (if any), as well as properties describing the collection and a function to load more.\n *\n * @example Retrieving all documents of type 'movie'\n * ```\n * const { results, isPending } = useDocuments({ filter: '_type == \"movie\"' })\n *\n * return (\n * <div>\n * <h1>Movies</h1>\n * {results && (\n * <ul>\n * {results.map(movie => (<li key={movie._id}>…</li>))}\n * </ul>\n * )}\n * {isPending && <div>Loading movies…</div>}\n * </div>\n * )\n * ```\n *\n * @example Retrieving all movies released since 1980, sorted by director’s last name\n * ```\n * const { results } = useDocuments({\n * filter: '_type == \"movie\" && releaseDate >= \"1980-01-01\"',\n * sort: [\n * {\n * // Expand the `director` reference field with the dereferencing operator `->`\n * field: 'director->lastName',\n * sort: 'asc',\n * },\n * ],\n * })\n *\n * return (\n * <div>\n * <h1>Movies released since 1980</h1>\n * {results && (\n * <ol>\n * {results.map(movie => (<li key={movie._id}>…</li>))}\n * </ol>\n * )}\n * </div>\n * )\n * ```\n */\nexport function useDocuments(options: DocumentListOptions = {}): DocumentCollection {\n const instance = useSanityInstance()\n\n // NOTE: useState is used because it guaranteed to return a stable reference\n // across renders\n const [ref] = useState<{\n storeInstance: DocumentListStore | null\n getCurrent: DocumentListState\n initialOptions: DocumentListOptions\n }>(() => ({\n storeInstance: null,\n getCurrent: () => STABLE_EMPTY,\n initialOptions: options,\n }))\n\n // serialize options to ensure it only calls `setOptions` when the values\n // themselves changes (in cases where devs put config inline)\n const serializedOptions = JSON.stringify(options)\n useEffect(() => {\n ref.storeInstance?.setOptions(JSON.parse(serializedOptions))\n }, [ref, serializedOptions])\n\n const subscribe = useCallback(\n (onStoreChanged: () => void) => {\n // to match the lifecycle of `useSyncExternalState`, we create the store\n // instance after subscribe and mutate the ref to connect everything\n ref.storeInstance = createDocumentListStore(instance)\n ref.storeInstance.setOptions(ref.initialOptions)\n const state = ref.storeInstance.getState()\n ref.getCurrent = state.getCurrent\n const unsubscribe = state.subscribe(onStoreChanged)\n\n return () => {\n // unsubscribe to clean up the state subscriptions\n unsubscribe()\n // dispose of the instance\n ref.storeInstance?.dispose()\n }\n },\n [instance, ref],\n )\n\n const getSnapshot = useCallback(() => {\n return ref.getCurrent()\n }, [ref])\n\n const state = useSyncExternalStore(subscribe, getSnapshot)\n\n const loadMore = useCallback(() => {\n ref.storeInstance?.loadMore()\n }, [ref])\n\n return {loadMore, ...state}\n}\n","import {type DocumentHandle, getPreviewState, type PreviewValue, resolvePreview} from '@sanity/sdk'\nimport {useCallback, useMemo, useSyncExternalStore} from 'react'\nimport {distinctUntilChanged, EMPTY, Observable, startWith, switchMap} from 'rxjs'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @alpha\n */\nexport interface UsePreviewOptions {\n document: DocumentHandle\n ref?: React.RefObject<unknown>\n}\n\n/**\n * @alpha\n */\nexport interface UsePreviewResults {\n /** The results of resolving the document’s preview values */\n results: PreviewValue\n /** True when preview values are being refreshed */\n isPending: boolean\n}\n\n/**\n * @alpha\n *\n * The `usePreview` hook takes a document (via a `DocumentHandle`) and returns its resolved preview values,\n * including the document’s `title`, `subtitle`, `media`, and `status`. These values are live and will update in realtime.\n * To reduce unnecessary network requests for resolving the preview values, an optional `ref` can be passed to the hook so that preview\n * resolution will only occur if the `ref` is intersecting the current viewport.\n *\n * @param options - The document handle for the document you want to resolve preview values for, and an optional ref\n * @returns The preview values for the given document and a boolean to indicate whether the resolution is pending\n *\n * @example Combining with useDocuments to render a collection of document previews\n * ```\n * // PreviewComponent.jsx\n * export default function PreviewComponent({ document }) {\n * const { results: { title, subtitle, media }, isPending } = usePreview({ document })\n * return isPending ? 'Loading…' : (\n * <article>\n * {media?.type === 'image-asset' ? <img src={media.url} alt='' /> : ''}\n * <h2>{title}</h2>\n * <p>{subtitle}</p>\n * </article>\n * )\n * }\n *\n * // DocumentList.jsx\n * const { results, isPending } = useDocuments({ filter: '_type == \"movie\"' })\n * return (\n * <div>\n * <h1>Movies</h1>\n * <ul>\n * {isPending ? 'Loading…' : results.map(movie => (\n * <li key={movie._id}>\n * <Suspense fallback='Loading…'>\n * <PreviewComponent document={movie} />\n * </Suspense>\n * </li>\n * ))}\n * </ul>\n * </div>\n * )\n * ```\n */\nexport function usePreview({document: {_id, _type}, ref}: UsePreviewOptions): UsePreviewResults {\n const instance = useSanityInstance()\n\n const stateSource = useMemo(\n () => getPreviewState(instance, {document: {_id, _type}}),\n [instance, _id, _type],\n )\n\n // Create subscribe function for useSyncExternalStore\n const subscribe = useCallback(\n (onStoreChanged: () => void) => {\n const subscription = new Observable<boolean>((observer) => {\n // for environments that don't have an intersection observer\n if (typeof IntersectionObserver === 'undefined' || typeof HTMLElement === 'undefined') {\n return\n }\n\n const intersectionObserver = new IntersectionObserver(\n ([entry]) => observer.next(entry.isIntersecting),\n {rootMargin: '0px', threshold: 0},\n )\n if (ref?.current && ref.current instanceof HTMLElement) {\n intersectionObserver.observe(ref.current)\n }\n return () => intersectionObserver.disconnect()\n })\n .pipe(\n startWith(false),\n distinctUntilChanged(),\n switchMap((isVisible) =>\n isVisible\n ? new Observable<void>((obs) => {\n return stateSource.subscribe(() => obs.next())\n })\n : EMPTY,\n ),\n )\n .subscribe({next: onStoreChanged})\n\n return () => subscription.unsubscribe()\n },\n [stateSource, ref],\n )\n\n // Create getSnapshot function to return current state\n const getSnapshot = useCallback(() => {\n const currentState = stateSource.getCurrent()\n if (currentState.results === null) throw resolvePreview(instance, {document: {_id, _type}})\n return currentState as UsePreviewResults\n }, [_id, _type, instance, stateSource])\n\n return useSyncExternalStore(subscribe, getSnapshot)\n}\n"],"names":["state"],"mappings":"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"}
1
+ {"version":3,"file":"hooks.js","sources":["../src/hooks/auth/useAuthToken.tsx","../src/hooks/auth/useCurrentUser.tsx","../src/hooks/comlink/useFrameConnection.ts","../src/hooks/comlink/useWindowConnection.ts","../src/hooks/documentCollection/useDocuments.ts","../src/hooks/preview/usePreview.tsx"],"sourcesContent":["import {getTokenState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * Hook to get the currently logged in user\n * @internal\n * @returns The current user or null if not authenticated\n */\nexport const useAuthToken = createStateSourceHook(getTokenState)\n","import {type CurrentUser, getCurrentUserState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * @TODO This should suspend! And possibly not return `null`?\n *\n * @public\n *\n * The `useCurrentUser` hook returns the currently authenticated user’s profile information (their name, email, roles, etc).\n * If no users are currently logged in, the hook returns null.\n *\n * @returns The current user data, or `null` if not authenticated\n *\n * @example Rendering a basic user profile\n * ```\n * const user = useCurrentUser()\n *\n * return (\n * <figure>\n * <img src={user?.profileImage} alt=`Profile image for ${user?.name}` />\n * <h2>{user?.name}</h2>\n * </figure>\n * )\n * ```\n */\nexport const useCurrentUser: () => CurrentUser | null = createStateSourceHook(getCurrentUserState)\n","import {\n type FrameMessage,\n getOrCreateChannel,\n getOrCreateController,\n releaseChannel,\n type WindowMessage,\n} from '@sanity/sdk'\nimport {useCallback, useEffect, useMemo} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @internal\n */\nexport type FrameMessageHandler<TWindowMessage extends WindowMessage> = (\n event: TWindowMessage['data'],\n) => TWindowMessage['response'] | Promise<TWindowMessage['response']>\n\n/**\n * @internal\n */\nexport interface UseFrameConnectionOptions<TWindowMessage extends WindowMessage> {\n name: string\n connectTo: string\n targetOrigin: string\n onMessage?: Record<string, FrameMessageHandler<TWindowMessage>>\n}\n\n/**\n * @internal\n */\nexport interface FrameConnection<TFrameMessage extends FrameMessage> {\n connect: (frameWindow: Window) => () => void // Return cleanup function\n sendMessage: <T extends TFrameMessage['type']>(\n ...params: Extract<TFrameMessage, {type: T}>['data'] extends undefined\n ? [type: T]\n : [type: T, data: Extract<TFrameMessage, {type: T}>['data']]\n ) => void\n}\n\n/**\n * @internal\n */\nexport function useFrameConnection<\n TFrameMessage extends FrameMessage,\n TWindowMessage extends WindowMessage,\n>(options: UseFrameConnectionOptions<TWindowMessage>): FrameConnection<TFrameMessage> {\n const {onMessage, targetOrigin, name, connectTo} = options\n const instance = useSanityInstance()\n\n const controller = useMemo(\n () => getOrCreateController(instance, targetOrigin),\n [instance, targetOrigin],\n )\n\n const channel = useMemo(\n () =>\n getOrCreateChannel(instance, {\n name,\n connectTo,\n }),\n [instance, name, connectTo],\n )\n\n useEffect(() => {\n if (!channel || !onMessage) return\n\n const unsubscribers: Array<() => void> = []\n\n Object.entries(onMessage).forEach(([type, handler]) => {\n const unsubscribe = channel.on(type, handler)\n unsubscribers.push(unsubscribe)\n })\n\n return () => {\n unsubscribers.forEach((unsub) => unsub())\n }\n }, [channel, onMessage])\n\n const connect = useCallback(\n (frameWindow: Window) => {\n const removeTarget = controller?.addTarget(frameWindow)\n return () => {\n removeTarget?.()\n }\n },\n [controller],\n )\n\n const sendMessage = useCallback(\n <T extends TFrameMessage['type']>(\n type: T,\n data?: Extract<TFrameMessage, {type: T}>['data'],\n ) => {\n channel?.post(type, data)\n },\n [channel],\n )\n\n // cleanup channel on unmount\n useEffect(() => {\n return () => {\n releaseChannel(instance, name)\n }\n }, [name, instance])\n\n return {\n connect,\n sendMessage,\n }\n}\n","import {type FrameMessage, getOrCreateNode, releaseNode, type WindowMessage} from '@sanity/sdk'\nimport {useCallback, useEffect, useMemo} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @internal\n */\nexport type WindowMessageHandler<TFrameMessage extends FrameMessage> = (\n event: TFrameMessage['data'],\n) => TFrameMessage['response']\n\n/**\n * @internal\n */\nexport interface UseWindowConnectionOptions<TMessage extends FrameMessage> {\n name: string\n connectTo: string\n onMessage?: Record<TMessage['type'], WindowMessageHandler<TMessage>>\n}\n\n/**\n * @internal\n */\nexport interface WindowConnection<TMessage extends WindowMessage> {\n sendMessage: <TType extends TMessage['type']>(\n type: TType,\n data?: Extract<TMessage, {type: TType}>['data'],\n ) => void\n}\n\n/**\n * @internal\n */\nexport function useWindowConnection<\n TWindowMessage extends WindowMessage,\n TFrameMessage extends FrameMessage,\n>(options: UseWindowConnectionOptions<TFrameMessage>): WindowConnection<TWindowMessage> {\n const {name, onMessage, connectTo} = options\n const instance = useSanityInstance()\n\n const node = useMemo(\n () => getOrCreateNode(instance, {name, connectTo}),\n [instance, name, connectTo],\n )\n\n useEffect(() => {\n if (!onMessage) return\n\n const unsubscribers: Array<() => void> = []\n\n Object.entries(onMessage).forEach(([type, handler]) => {\n const unsubscribe = node.on(type, handler as WindowMessageHandler<TFrameMessage>)\n unsubscribers.push(unsubscribe)\n })\n\n return () => {\n unsubscribers.forEach((unsub) => unsub())\n }\n }, [node, onMessage])\n\n const sendMessage = useCallback(\n <TType extends WindowMessage['type']>(\n type: TType,\n data?: Extract<WindowMessage, {type: TType}>['data'],\n ) => {\n node?.post(type, data)\n },\n [node],\n )\n\n // cleanup node on unmount\n useEffect(() => {\n return () => {\n releaseNode(instance, name)\n }\n }, [instance, name])\n\n return {\n sendMessage,\n }\n}\n","import {createDocumentListStore, type DocumentHandle, type DocumentListOptions} from '@sanity/sdk'\nimport {useCallback, useEffect, useState, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @public\n */\nexport interface DocumentCollection {\n /** Retrieve more documents matching the provided options */\n loadMore: () => void\n /** The retrieved document handles of the documents matching the provided options */\n results: DocumentHandle[]\n /** Whether a retrieval of documents is in flight */\n isPending: boolean\n /** Whether more documents exist that match the provided options than have been retrieved */\n hasMore: boolean\n /** The total number of documents in the collection */\n count: number\n}\n\ntype DocumentListStore = ReturnType<typeof createDocumentListStore>\ntype DocumentListState = ReturnType<DocumentListStore['getState']>['getCurrent']\nconst STABLE_EMPTY = {\n results: [],\n isPending: false,\n hasMore: false,\n count: 0,\n}\n\n/**\n * @public\n *\n * The `useDocuments` hook retrieves and provides access to a live collection of documents, optionally filtered, sorted, and matched to a given Content Lake perspective.\n * Because the returned document collection is live, the results will update in real time until the component invoking the hook is unmounted.\n *\n * @param options - Options for narrowing and sorting the document collection\n * @returns The collection of documents matching the provided options (if any), as well as properties describing the collection and a function to load more.\n *\n * @example Retrieving all documents of type 'movie'\n * ```\n * const { results, isPending } = useDocuments({ filter: '_type == \"movie\"' })\n *\n * return (\n * <div>\n * <h1>Movies</h1>\n * {results && (\n * <ul>\n * {results.map(movie => (<li key={movie._id}>…</li>))}\n * </ul>\n * )}\n * {isPending && <div>Loading movies…</div>}\n * </div>\n * )\n * ```\n *\n * @example Retrieving all movies released since 1980, sorted by director’s last name\n * ```\n * const { results } = useDocuments({\n * filter: '_type == \"movie\" && releaseDate >= \"1980-01-01\"',\n * sort: [\n * {\n * // Expand the `director` reference field with the dereferencing operator `->`\n * field: 'director->lastName',\n * sort: 'asc',\n * },\n * ],\n * })\n *\n * return (\n * <div>\n * <h1>Movies released since 1980</h1>\n * {results && (\n * <ol>\n * {results.map(movie => (<li key={movie._id}>…</li>))}\n * </ol>\n * )}\n * </div>\n * )\n * ```\n */\nexport function useDocuments(options: DocumentListOptions = {}): DocumentCollection {\n const instance = useSanityInstance()\n\n // NOTE: useState is used because it guaranteed to return a stable reference\n // across renders\n const [ref] = useState<{\n storeInstance: DocumentListStore | null\n getCurrent: DocumentListState\n initialOptions: DocumentListOptions\n }>(() => ({\n storeInstance: null,\n getCurrent: () => STABLE_EMPTY,\n initialOptions: options,\n }))\n\n // serialize options to ensure it only calls `setOptions` when the values\n // themselves changes (in cases where devs put config inline)\n const serializedOptions = JSON.stringify(options)\n useEffect(() => {\n ref.storeInstance?.setOptions(JSON.parse(serializedOptions))\n }, [ref, serializedOptions])\n\n const subscribe = useCallback(\n (onStoreChanged: () => void) => {\n // to match the lifecycle of `useSyncExternalState`, we create the store\n // instance after subscribe and mutate the ref to connect everything\n ref.storeInstance = createDocumentListStore(instance)\n ref.storeInstance.setOptions(ref.initialOptions)\n const state = ref.storeInstance.getState()\n ref.getCurrent = state.getCurrent\n const unsubscribe = state.subscribe(onStoreChanged)\n\n return () => {\n // unsubscribe to clean up the state subscriptions\n unsubscribe()\n // dispose of the instance\n ref.storeInstance?.dispose()\n }\n },\n [instance, ref],\n )\n\n const getSnapshot = useCallback(() => {\n return ref.getCurrent()\n }, [ref])\n\n const state = useSyncExternalStore(subscribe, getSnapshot)\n\n const loadMore = useCallback(() => {\n ref.storeInstance?.loadMore()\n }, [ref])\n\n return {loadMore, ...state}\n}\n","import {type DocumentHandle, getPreviewState, type PreviewValue, resolvePreview} from '@sanity/sdk'\nimport {useCallback, useMemo, useSyncExternalStore} from 'react'\nimport {distinctUntilChanged, EMPTY, Observable, startWith, switchMap} from 'rxjs'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @alpha\n */\nexport interface UsePreviewOptions {\n document: DocumentHandle\n ref?: React.RefObject<unknown>\n}\n\n/**\n * @alpha\n */\nexport interface UsePreviewResults {\n /** The results of resolving the document’s preview values */\n results: PreviewValue\n /** True when preview values are being refreshed */\n isPending: boolean\n}\n\n/**\n * @alpha\n *\n * The `usePreview` hook takes a document (via a `DocumentHandle`) and returns its resolved preview values,\n * including the document’s `title`, `subtitle`, `media`, and `status`. These values are live and will update in realtime.\n * To reduce unnecessary network requests for resolving the preview values, an optional `ref` can be passed to the hook so that preview\n * resolution will only occur if the `ref` is intersecting the current viewport.\n *\n * @param options - The document handle for the document you want to resolve preview values for, and an optional ref\n * @returns The preview values for the given document and a boolean to indicate whether the resolution is pending\n *\n * @example Combining with useDocuments to render a collection of document previews\n * ```\n * // PreviewComponent.jsx\n * export default function PreviewComponent({ document }) {\n * const { results: { title, subtitle, media }, isPending } = usePreview({ document })\n * return (\n * <article style={{ opacity: isPending ? 0.5 : 1}}>\n * {media?.type === 'image-asset' ? <img src={media.url} alt='' /> : ''}\n * <h2>{title}</h2>\n * <p>{subtitle}</p>\n * </article>\n * )\n * }\n *\n * // DocumentList.jsx\n * const { results, isPending } = useDocuments({ filter: '_type == \"movie\"' })\n * return (\n * <div>\n * <h1>Movies</h1>\n * <ul>\n * {isPending ? 'Loading…' : results.map(movie => (\n * <li key={movie._id}>\n * <Suspense fallback='Loading…'>\n * <PreviewComponent document={movie} />\n * </Suspense>\n * </li>\n * ))}\n * </ul>\n * </div>\n * )\n * ```\n */\nexport function usePreview({document: {_id, _type}, ref}: UsePreviewOptions): UsePreviewResults {\n const instance = useSanityInstance()\n\n const stateSource = useMemo(\n () => getPreviewState(instance, {document: {_id, _type}}),\n [instance, _id, _type],\n )\n\n // Create subscribe function for useSyncExternalStore\n const subscribe = useCallback(\n (onStoreChanged: () => void) => {\n const subscription = new Observable<boolean>((observer) => {\n // for environments that don't have an intersection observer\n if (typeof IntersectionObserver === 'undefined' || typeof HTMLElement === 'undefined') {\n return\n }\n\n const intersectionObserver = new IntersectionObserver(\n ([entry]) => observer.next(entry.isIntersecting),\n {rootMargin: '0px', threshold: 0},\n )\n if (ref?.current && ref.current instanceof HTMLElement) {\n intersectionObserver.observe(ref.current)\n }\n return () => intersectionObserver.disconnect()\n })\n .pipe(\n startWith(false),\n distinctUntilChanged(),\n switchMap((isVisible) =>\n isVisible\n ? new Observable<void>((obs) => {\n return stateSource.subscribe(() => obs.next())\n })\n : EMPTY,\n ),\n )\n .subscribe({next: onStoreChanged})\n\n return () => subscription.unsubscribe()\n },\n [stateSource, ref],\n )\n\n // Create getSnapshot function to return current state\n const getSnapshot = useCallback(() => {\n const currentState = stateSource.getCurrent()\n if (currentState.results === null) throw resolvePreview(instance, {document: {_id, _type}})\n return currentState as UsePreviewResults\n }, [_id, _type, instance, stateSource])\n\n return useSyncExternalStore(subscribe, getSnapshot)\n}\n"],"names":["state"],"mappings":";;;;;AASa,MAAA,eAAe,sBAAsB,aAAa,GCiBlD,iBAA2C,sBAAsB,mBAAmB;ACiB1F,SAAS,mBAGd,SAAoF;AAC9E,QAAA,EAAC,WAAW,cAAc,MAAM,UAAA,IAAa,SAC7C,WAAW,qBAEX,aAAa;AAAA,IACjB,MAAM,sBAAsB,UAAU,YAAY;AAAA,IAClD,CAAC,UAAU,YAAY;AAAA,KAGnB,UAAU;AAAA,IACd,MACE,mBAAmB,UAAU;AAAA,MAC3B;AAAA,MACA;AAAA,IAAA,CACD;AAAA,IACH,CAAC,UAAU,MAAM,SAAS;AAAA,EAC5B;AAEA,YAAU,MAAM;AACV,QAAA,CAAC,WAAW,CAAC,UAAW;AAE5B,UAAM,gBAAmC,CAAC;AAEnC,WAAA,OAAA,QAAQ,SAAS,EAAE,QAAQ,CAAC,CAAC,MAAM,OAAO,MAAM;AACrD,YAAM,cAAc,QAAQ,GAAG,MAAM,OAAO;AAC5C,oBAAc,KAAK,WAAW;AAAA,IAC/B,CAAA,GAEM,MAAM;AACX,oBAAc,QAAQ,CAAC,UAAU,MAAA,CAAO;AAAA,IAC1C;AAAA,EAAA,GACC,CAAC,SAAS,SAAS,CAAC;AAEvB,QAAM,UAAU;AAAA,IACd,CAAC,gBAAwB;AACjB,YAAA,eAAe,YAAY,UAAU,WAAW;AACtD,aAAO,MAAM;AACI,uBAAA;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,KAGP,cAAc;AAAA,IAClB,CACE,MACA,SACG;AACM,eAAA,KAAK,MAAM,IAAI;AAAA,IAC1B;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAGA,SAAA,UAAU,MACD,MAAM;AACX,mBAAe,UAAU,IAAI;AAAA,EAAA,GAE9B,CAAC,MAAM,QAAQ,CAAC,GAEZ;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AC5EO,SAAS,oBAGd,SAAsF;AAChF,QAAA,EAAC,MAAM,WAAW,cAAa,SAC/B,WAAW,qBAEX,OAAO;AAAA,IACX,MAAM,gBAAgB,UAAU,EAAC,MAAM,WAAU;AAAA,IACjD,CAAC,UAAU,MAAM,SAAS;AAAA,EAC5B;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,UAAW;AAEhB,UAAM,gBAAmC,CAAC;AAEnC,WAAA,OAAA,QAAQ,SAAS,EAAE,QAAQ,CAAC,CAAC,MAAM,OAAO,MAAM;AACrD,YAAM,cAAc,KAAK,GAAG,MAAM,OAA8C;AAChF,oBAAc,KAAK,WAAW;AAAA,IAC/B,CAAA,GAEM,MAAM;AACX,oBAAc,QAAQ,CAAC,UAAU,MAAA,CAAO;AAAA,IAC1C;AAAA,EAAA,GACC,CAAC,MAAM,SAAS,CAAC;AAEpB,QAAM,cAAc;AAAA,IAClB,CACE,MACA,SACG;AACG,YAAA,KAAK,MAAM,IAAI;AAAA,IACvB;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAGA,SAAA,UAAU,MACD,MAAM;AACX,gBAAY,UAAU,IAAI;AAAA,EAAA,GAE3B,CAAC,UAAU,IAAI,CAAC,GAEZ;AAAA,IACL;AAAA,EACF;AACF;AC1DA,MAAM,eAAe;AAAA,EACnB,SAAS,CAAC;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AACT;AAqDgB,SAAA,aAAa,UAA+B,IAAwB;AAClF,QAAM,WAAW,kBAAkB,GAI7B,CAAC,GAAG,IAAI,SAIX,OAAO;AAAA,IACR,eAAe;AAAA,IACf,YAAY,MAAM;AAAA,IAClB,gBAAgB;AAAA,EAChB,EAAA,GAII,oBAAoB,KAAK,UAAU,OAAO;AAChD,YAAU,MAAM;AACd,QAAI,eAAe,WAAW,KAAK,MAAM,iBAAiB,CAAC;AAAA,EAAA,GAC1D,CAAC,KAAK,iBAAiB,CAAC;AAE3B,QAAM,YAAY;AAAA,IAChB,CAAC,mBAA+B;AAG1B,UAAA,gBAAgB,wBAAwB,QAAQ,GACpD,IAAI,cAAc,WAAW,IAAI,cAAc;AACzCA,YAAAA,SAAQ,IAAI,cAAc,SAAS;AACzC,UAAI,aAAaA,OAAM;AACjB,YAAA,cAAcA,OAAM,UAAU,cAAc;AAElD,aAAO,MAAM;AAEC,uBAEZ,IAAI,eAAe,QAAQ;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,UAAU,GAAG;AAAA,EAGV,GAAA,cAAc,YAAY,MACvB,IAAI,WAAW,GACrB,CAAC,GAAG,CAAC,GAEF,QAAQ,qBAAqB,WAAW,WAAW;AAMlD,SAAA,EAAC,UAJS,YAAY,MAAM;AACjC,QAAI,eAAe,SAAS;AAAA,KAC3B,CAAC,GAAG,CAAC,GAEU,GAAG,MAAK;AAC5B;ACnEgB,SAAA,WAAW,EAAC,UAAU,EAAC,KAAK,MAAK,GAAG,OAA4C;AACxF,QAAA,WAAW,qBAEX,cAAc;AAAA,IAClB,MAAM,gBAAgB,UAAU,EAAC,UAAU,EAAC,KAAK,MAAK,GAAE;AAAA,IACxD,CAAC,UAAU,KAAK,KAAK;AAAA,KAIjB,YAAY;AAAA,IAChB,CAAC,mBAA+B;AAC9B,YAAM,eAAe,IAAI,WAAoB,CAAC,aAAa;AAEzD,YAAI,OAAO,uBAAyB,OAAe,OAAO,cAAgB;AACxE;AAGF,cAAM,uBAAuB,IAAI;AAAA,UAC/B,CAAC,CAAC,KAAK,MAAM,SAAS,KAAK,MAAM,cAAc;AAAA,UAC/C,EAAC,YAAY,OAAO,WAAW,EAAC;AAAA,QAClC;AACA,eAAI,KAAK,WAAW,IAAI,mBAAmB,eACzC,qBAAqB,QAAQ,IAAI,OAAO,GAEnC,MAAM,qBAAqB,WAAW;AAAA,MAC9C,CAAA,EACE;AAAA,QACC,UAAU,EAAK;AAAA,QACf,qBAAqB;AAAA,QACrB;AAAA,UAAU,CAAC,cACT,YACI,IAAI,WAAiB,CAAC,QACb,YAAY,UAAU,MAAM,IAAI,KAAK,CAAC,CAC9C,IACD;AAAA,QAAA;AAAA,MAGP,EAAA,UAAU,EAAC,MAAM,gBAAe;AAE5B,aAAA,MAAM,aAAa,YAAY;AAAA,IACxC;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,EAAA,GAIb,cAAc,YAAY,MAAM;AAC9B,UAAA,eAAe,YAAY,WAAW;AAC5C,QAAI,aAAa,YAAY,KAAM,OAAM,eAAe,UAAU,EAAC,UAAU,EAAC,KAAK,MAAK,EAAA,CAAE;AACnF,WAAA;AAAA,KACN,CAAC,KAAK,OAAO,UAAU,WAAW,CAAC;AAE/B,SAAA,qBAAqB,WAAW,WAAW;AACpD;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sanity/sdk-react",
3
- "version": "0.0.0-alpha.6",
3
+ "version": "0.0.0-alpha.7",
4
4
  "private": false,
5
5
  "description": "Sanity SDK React toolkit for Content OS",
6
6
  "keywords": [
@@ -68,34 +68,35 @@
68
68
  "prettier": "@sanity/prettier-config",
69
69
  "dependencies": {
70
70
  "@sanity/logos": "^2.1.13",
71
+ "@sanity/os": "^0.2.0",
71
72
  "@sanity/ui": "^2.8.19",
72
73
  "react-error-boundary": "^4.1.2",
73
74
  "rxjs": "^7.8.1",
74
- "@sanity/sdk": "0.0.0-alpha.6"
75
+ "@sanity/sdk": "0.0.0-alpha.7"
75
76
  },
76
77
  "devDependencies": {
77
- "@sanity/client": "^6.24.1",
78
- "@sanity/comlink": "^2.0.2",
78
+ "@sanity/client": "^6.27.2",
79
+ "@sanity/comlink": "^2.0.5",
79
80
  "@sanity/pkg-utils": "^6.12.2",
80
81
  "@sanity/prettier-config": "^1.0.3",
81
82
  "@testing-library/jest-dom": "^6.6.3",
82
- "@testing-library/react": "^16.1.0",
83
- "@types/react": "^19.0.3",
84
- "@types/react-dom": "^19.0.2",
83
+ "@testing-library/react": "^16.2.0",
84
+ "@types/react": "^19.0.8",
85
+ "@types/react-dom": "^19.0.3",
85
86
  "@vitejs/plugin-react": "^4.3.4",
86
- "@vitest/coverage-v8": "2.1.8",
87
+ "@vitest/coverage-v8": "3.0.5",
87
88
  "eslint": "^9.17.0",
88
89
  "jsdom": "^25.0.1",
89
90
  "prettier": "^3.4.2",
90
91
  "react": "^19.0.0",
91
92
  "react-dom": "^19.0.0",
92
93
  "typescript": "^5.7.2",
93
- "vite": "^5.4.11",
94
- "vitest": "^2.1.8",
95
- "@repo/package.config": "0.0.1",
96
- "@repo/tsconfig": "0.0.1",
94
+ "vite": "^5.4.14",
95
+ "vitest": "^3.0.5",
96
+ "@repo/config-eslint": "0.0.0",
97
97
  "@repo/config-test": "0.0.1",
98
- "@repo/config-eslint": "0.0.0"
98
+ "@repo/package.config": "0.0.1",
99
+ "@repo/tsconfig": "0.0.1"
99
100
  },
100
101
  "peerDependencies": {
101
102
  "react": "^18.0.0 || ^19.0.0",
@@ -1,2 +1,2 @@
1
1
  export {AuthBoundary} from '../components/auth/AuthBoundary'
2
- export {SanityApp} from '../components/SanityApp'
2
+ export {SanityApp, type SanityAppProps} from '../components/SanityApp'
@@ -23,3 +23,4 @@ export {
23
23
  type UsePreviewOptions,
24
24
  type UsePreviewResults,
25
25
  } from '../hooks/preview/usePreview'
26
+ export {type CurrentUser} from '@sanity/sdk'
@@ -1,21 +1,48 @@
1
1
  import {createSanityInstance, type SanityConfig} from '@sanity/sdk'
2
- import {type JSX} from 'react'
2
+ import {type ReactElement} from 'react'
3
3
 
4
4
  import {SanityProvider} from '../context/SanityProvider'
5
5
  import {AuthBoundary} from './auth/AuthBoundary'
6
6
 
7
7
  /**
8
8
  * @public
9
- *
10
- * @returns Rendered child component wrapped in a SanityProvider and AuthBoundary
11
9
  */
12
- export function SanityApp({
13
- sanityConfig,
14
- children,
15
- }: {
16
- children: React.ReactNode
10
+ export interface SanityAppProps {
17
11
  sanityConfig: SanityConfig
18
- }): JSX.Element {
12
+ children: React.ReactNode
13
+ }
14
+
15
+ /**
16
+ * @public
17
+ *
18
+ * The SanityApp component provides your Sanity application with access to your Sanity configuration,
19
+ * as well as application context and state which is used by the Sanity React hooks. Your application
20
+ * must be wrapped with the SanityApp component to function properly.
21
+ *
22
+ * @param props - Your Sanity configuration and the React children to render
23
+ * @returns Your Sanity application, integrated with your Sanity configuration and application context
24
+ *
25
+ * @example
26
+ * ```
27
+ * import { SanityApp } from '@sanity/sdk-react
28
+ *
29
+ * import MyAppRoot from './Root'
30
+ *
31
+ * const mySanityConfig = {
32
+ * procectId: 'my-project-id',
33
+ * dataset: 'production',
34
+ * }
35
+ *
36
+ * export default function MyApp() {
37
+ * return (
38
+ * <SanityApp sanityConfig={mySanityConfig}>
39
+ * <MyAppRoot />
40
+ * </SanityApp>
41
+ * )
42
+ * }
43
+ * ```
44
+ */
45
+ export function SanityApp({sanityConfig, children}: SanityAppProps): ReactElement {
19
46
  const sanityInstance = createSanityInstance(sanityConfig)
20
47
 
21
48
  return (
@@ -9,8 +9,14 @@ import {LoginCallback} from './LoginCallback'
9
9
  import {LoginError, type LoginErrorProps} from './LoginError'
10
10
  import {type LoginLayoutProps} from './LoginLayout'
11
11
 
12
+ // Only import bridge if we're in an iframe. This assumes that the app is
13
+ // running withing SanityOS if it is in an iframe.
14
+ if (typeof window !== 'undefined' && window.self !== window.top) {
15
+ import('@sanity/os/bridge')
16
+ }
17
+
12
18
  /**
13
- * @alpha
19
+ * @internal
14
20
  */
15
21
  interface AuthBoundaryProps extends LoginLayoutProps {
16
22
  /**
@@ -52,7 +58,7 @@ interface AuthBoundaryProps extends LoginLayoutProps {
52
58
  * }
53
59
  * ```
54
60
  *
55
- * @alpha
61
+ * @internal
56
62
  */
57
63
  export function AuthBoundary({
58
64
  LoginErrorComponent = LoginError,
@@ -12,22 +12,28 @@ export interface SanityProviderProps {
12
12
  export const SanityInstanceContext = createContext<SanityInstance | null>(null)
13
13
 
14
14
  /**
15
- * Top-level context provider that provides a Sanity configuration instance.
16
- * This must wrap any Sanity SDK React component.
17
- * @public
15
+ * Top-level context provider that provides access to the Sanity configuration instance.
16
+ * This must wrap any components making use of the Sanity SDK React hooks.
17
+ * @remarks In most cases, SanityApp should be used rather than SanityProvider directly; SanityApp bundles both SanityProvider and an authentication layer.
18
+ * @internal
18
19
  * @param props - Sanity project and dataset configuration
19
20
  * @returns Rendered component
20
21
  * @example
21
22
  * ```tsx
22
23
  * import {createSanityInstance} from '@sanity/sdk'
23
- * import {ExampleComponent, SanityProvider} from '@sanity/sdk-react'
24
+ * import {SanityProvider} from '@sanity/sdk-react'
25
+ *
26
+ * import MyAppRoot from './Root'
24
27
  *
25
- * const sanityInstance = createSanityInstance({projectId: 'your-project-id', dataset: 'production'})
28
+ * const sanityInstance = createSanityInstance({
29
+ * projectId: 'your-project-id',
30
+ * dataset: 'production',
31
+ * })
26
32
  *
27
33
  * export default function MyApp() {
28
34
  * return (
29
35
  * <SanityProvider sanityInstance={sanityInstance}>
30
- * <ExampleComponent />
36
+ * <MyAppRoot />
31
37
  * </SanityProvider>
32
38
  * )
33
39
  * }
@@ -1,12 +1,13 @@
1
- import {getAuthState} from '@sanity/sdk'
1
+ import {type AuthState, getAuthState} from '@sanity/sdk'
2
2
 
3
3
  import {createStateSourceHook} from '../helpers/createStateSourceHook'
4
4
 
5
5
  /**
6
+ * @internal
6
7
  * A React hook that subscribes to authentication state changes.
7
8
  *
8
9
  * This hook provides access to the current authentication state type from the Sanity auth store.
9
- * It automatically re-renders the component when the authentication state changes.
10
+ * It automatically re-renders when the authentication state changes.
10
11
  *
11
12
  * @remarks
12
13
  * The hook uses `useSyncExternalStore` to safely subscribe to auth state changes
@@ -24,4 +25,4 @@ import {createStateSourceHook} from '../helpers/createStateSourceHook'
24
25
  *
25
26
  * @public
26
27
  */
27
- export const useAuthState = createStateSourceHook(getAuthState)
28
+ export const useAuthState: () => AuthState = createStateSourceHook(getAuthState)
@@ -4,7 +4,7 @@ import {createStateSourceHook} from '../helpers/createStateSourceHook'
4
4
 
5
5
  /**
6
6
  * Hook to get the currently logged in user
7
- * @public
7
+ * @internal
8
8
  * @returns The current user or null if not authenticated
9
9
  */
10
10
  export const useAuthToken = createStateSourceHook(getTokenState)
@@ -1,10 +1,27 @@
1
- import {getCurrentUserState} from '@sanity/sdk'
1
+ import {type CurrentUser, getCurrentUserState} from '@sanity/sdk'
2
2
 
3
3
  import {createStateSourceHook} from '../helpers/createStateSourceHook'
4
4
 
5
5
  /**
6
- * Hook to get the currently logged in user
6
+ * @TODO This should suspend! And possibly not return `null`?
7
+ *
7
8
  * @public
8
- * @returns The current user or null if not authenticated
9
+ *
10
+ * The `useCurrentUser` hook returns the currently authenticated user’s profile information (their name, email, roles, etc).
11
+ * If no users are currently logged in, the hook returns null.
12
+ *
13
+ * @returns The current user data, or `null` if not authenticated
14
+ *
15
+ * @example Rendering a basic user profile
16
+ * ```
17
+ * const user = useCurrentUser()
18
+ *
19
+ * return (
20
+ * <figure>
21
+ * <img src={user?.profileImage} alt=`Profile image for ${user?.name}` />
22
+ * <h2>{user?.name}</h2>
23
+ * </figure>
24
+ * )
25
+ * ```
9
26
  */
10
- export const useCurrentUser = createStateSourceHook(getCurrentUserState)
27
+ export const useCurrentUser: () => CurrentUser | null = createStateSourceHook(getCurrentUserState)
@@ -3,6 +3,7 @@ import {handleCallback} from '@sanity/sdk'
3
3
  import {createCallbackHook} from '../helpers/createCallbackHook'
4
4
 
5
5
  /**
6
+ * @internal
6
7
  * A React hook that returns a function for handling authentication callbacks.
7
8
  *
8
9
  * @remarks
@@ -4,7 +4,7 @@ import {createCallbackHook} from '../helpers/createCallbackHook'
4
4
 
5
5
  /**
6
6
  * Hook to log out of the current session
7
- * @public
7
+ * @internal
8
8
  * @returns A function to log out of the current session
9
9
  */
10
10
  export const useLogOut = createCallbackHook(logout)
@@ -4,6 +4,7 @@ import {useMemo, useSyncExternalStore} from 'react'
4
4
  import {useSanityInstance} from '../context/useSanityInstance'
5
5
 
6
6
  /**
7
+ * @internal
7
8
  * A React hook that retrieves the available authentication provider URLs for login.
8
9
  *
9
10
  * @remarks
@@ -10,14 +10,14 @@ import {useCallback, useEffect, useMemo} from 'react'
10
10
  import {useSanityInstance} from '../context/useSanityInstance'
11
11
 
12
12
  /**
13
- * @public
13
+ * @internal
14
14
  */
15
15
  export type FrameMessageHandler<TWindowMessage extends WindowMessage> = (
16
16
  event: TWindowMessage['data'],
17
17
  ) => TWindowMessage['response'] | Promise<TWindowMessage['response']>
18
18
 
19
19
  /**
20
- * @public
20
+ * @internal
21
21
  */
22
22
  export interface UseFrameConnectionOptions<TWindowMessage extends WindowMessage> {
23
23
  name: string
@@ -27,7 +27,7 @@ export interface UseFrameConnectionOptions<TWindowMessage extends WindowMessage>
27
27
  }
28
28
 
29
29
  /**
30
- * @public
30
+ * @internal
31
31
  */
32
32
  export interface FrameConnection<TFrameMessage extends FrameMessage> {
33
33
  connect: (frameWindow: Window) => () => void // Return cleanup function
@@ -39,7 +39,7 @@ export interface FrameConnection<TFrameMessage extends FrameMessage> {
39
39
  }
40
40
 
41
41
  /**
42
- * @public
42
+ * @internal
43
43
  */
44
44
  export function useFrameConnection<
45
45
  TFrameMessage extends FrameMessage,
@@ -4,14 +4,14 @@ import {useCallback, useEffect, useMemo} from 'react'
4
4
  import {useSanityInstance} from '../context/useSanityInstance'
5
5
 
6
6
  /**
7
- * @public
7
+ * @internal
8
8
  */
9
9
  export type WindowMessageHandler<TFrameMessage extends FrameMessage> = (
10
10
  event: TFrameMessage['data'],
11
11
  ) => TFrameMessage['response']
12
12
 
13
13
  /**
14
- * @public
14
+ * @internal
15
15
  */
16
16
  export interface UseWindowConnectionOptions<TMessage extends FrameMessage> {
17
17
  name: string
@@ -20,7 +20,7 @@ export interface UseWindowConnectionOptions<TMessage extends FrameMessage> {
20
20
  }
21
21
 
22
22
  /**
23
- * @public
23
+ * @internal
24
24
  */
25
25
  export interface WindowConnection<TMessage extends WindowMessage> {
26
26
  sendMessage: <TType extends TMessage['type']>(
@@ -30,7 +30,7 @@ export interface WindowConnection<TMessage extends WindowMessage> {
30
30
  }
31
31
 
32
32
  /**
33
- * @public
33
+ * @internal
34
34
  */
35
35
  export function useWindowConnection<
36
36
  TWindowMessage extends WindowMessage,
@@ -4,10 +4,10 @@ import {useContext} from 'react'
4
4
  import {SanityInstanceContext} from '../../context/SanityProvider'
5
5
 
6
6
  /**
7
- * Hook that provides the current Sanity instance from the context.
7
+ * `useSanityInstance` returns the current Sanity instance from the application context.
8
8
  * This must be called from within a `SanityProvider` component.
9
9
  * @public
10
- * @returns the current Sanity instance
10
+ * @returns The current Sanity instance
11
11
  * @example
12
12
  * ```tsx
13
13
  * const instance = useSanityInstance()
@@ -38,8 +38,8 @@ export interface UsePreviewResults {
38
38
  * // PreviewComponent.jsx
39
39
  * export default function PreviewComponent({ document }) {
40
40
  * const { results: { title, subtitle, media }, isPending } = usePreview({ document })
41
- * return isPending ? 'Loading…' : (
42
- * <article>
41
+ * return (
42
+ * <article style={{ opacity: isPending ? 0.5 : 1}}>
43
43
  * {media?.type === 'image-asset' ? <img src={media.url} alt='' /> : ''}
44
44
  * <h2>{title}</h2>
45
45
  * <p>{subtitle}</p>