@sanity/sdk-react 0.0.0-alpha.3 → 0.0.0-alpha.5

package/dist/hooks.d.ts

@@ -3,8 +3,58 @@ import {AuthState} from '@sanity/sdk'
 import {CurrentUser} from '@sanity/types'
 import {DocumentHandle} from '@sanity/sdk'
 import {DocumentListOptions} from '@sanity/sdk'
+import {FrameMessage} from '@sanity/sdk'
 import {PreviewValue} from '@sanity/sdk'
-import type {SanityInstance} from '@sanity/sdk'
+import {SanityInstance} from '@sanity/sdk'
+import {WindowMessage} from '@sanity/sdk'
+
+/**
+ * @public
+ */
+export declare interface DocumentCollection {
+  /** Retrieve more documents matching the provided options */
+  loadMore: () => void
+  /** The retrieved document handles of the documents matching the provided options */
+  results: DocumentHandle[]
+  /** Whether a retrieval of documents is in flight */
+  isPending: boolean
+  /** Whether more documents exist that match the provided options than have been retrieved */
+  hasMore: boolean
+  /** The total number of documents in the collection */
+  count: number
+}
+
+/**
+ * @public
+ */
+export declare interface FrameConnection<TFrameMessage extends FrameMessage> {
+  connect: (frameWindow: Window) => () => void
+  sendMessage: <T extends TFrameMessage['type']>(
+    ...params: Extract<
+      TFrameMessage,
+      {
+        type: T
+      }
+    >['data'] extends undefined
+      ? [type: T]
+      : [
+          type: T,
+          data: Extract<
+            TFrameMessage,
+            {
+              type: T
+            }
+          >['data'],
+        ]
+  ) => void
+}
+
+/**
+ * @public
+ */
+export declare type MessageHandler<TWindowMessage extends WindowMessage> = (
+  event: TWindowMessage['data'],
+) => TWindowMessage['response'] | Promise<TWindowMessage['response']>
 
 /**
  * A React hook that subscribes to authentication state changes.
@@ -46,24 +96,73 @@ export declare const useCurrentUser: () => CurrentUser | null
 
 /**
  * @public
+ *
+ * The `useDocuments` hook retrieves and provides access to a live collection of documents, optionally filtered, sorted, and matched to a given Content Lake perspective.
+ * Because the returned document collection is live, the results will update in real time until the component invoking the hook is unmounted.
+ *
+ * @param options - Options for narrowing and sorting the document collection
+ * @returns The collection of documents matching the provided options (if any), as well as properties describing the collection and a function to load more.
+ *
+ * @example Retrieving all documents of type 'movie'
+ * ```
+ * const { results, isPending } = useDocuments({ filter: '_type == "movie"' })
+ *
+ * return (
+ *   <div>
+ *     <h1>Movies</h1>
+ *     {results && (
+ *       <ul>
+ *         {results.map(movie => (<li key={movie._id}>…</li>))}
+ *       </ul>
+ *     )}
+ *     {isPending && <div>Loading movies…</div>}
+ *   </div>
+ * )
+ * ```
+ *
+ * @example Retrieving all movies released since 1980, sorted by release date
+ * ```
+ * const { results } = useDocuments({
+ *   filter: '_type == "movie" && releaseDate >= "1980-01-01"',
+ *   sort: [
+ *     {
+ *       field: 'releaseDate',
+ *       sort: 'asc',
+ *     },
+ *   ],
+ * })
+ *
+ * return (
+ *   <div>
+ *      <h1>Movies released since 1980</h1>
+ *      {results && (
+ *        <ol>
+ *          {results.map(movie => (<li key={movie._id}>…</li>))}
+ *        </ol>
+ *     )}
+ *   </div>
+ * )
+ * ```
  */
-export declare interface UseDocuments {
-  loadMore: () => void
-  results: DocumentHandle[]
-  isPending: boolean
-  hasMore: boolean
-  count: number
-}
+export declare function useDocuments(options?: DocumentListOptions): DocumentCollection
 
 /**
- * Hook to get the list of documents for specified options
- *
  * @public
- *
- * @param options - options for the document list
- * @returns result of the document list and function to load more
  */
-export declare function useDocuments(options?: DocumentListOptions): UseDocuments
+export declare function useFrameConnection<
+  TFrameMessage extends FrameMessage,
+  TWindowMessage extends WindowMessage,
+>(options: UseFrameConnectionOptions<TWindowMessage>): FrameConnection<TFrameMessage>
+
+/**
+ * @public
+ */
+export declare interface UseFrameConnectionOptions<TWindowMessage extends WindowMessage> {
+  name: string
+  connectTo: string
+  targetOrigin: string
+  onMessage?: Record<string, MessageHandler<TWindowMessage>>
+}
 
 /**
  * A React hook that returns a function for handling authentication callbacks.
@@ -157,11 +256,49 @@ export declare const useLogOut: () => () => Promise<void>
 
 /**
  * @alpha
+ *
+ * The `usePreview` hook takes a document (via a `DocumentHandle`) and returns its resolved preview values,
+ * including the document’s `title`, `subtitle`, `media`, and `status`. These values are live and will update in realtime.
+ * To reduce unnecessary network requests for resolving the preview values, an optional `ref` can be passed to the hook so that preview
+ * resolution will only occur if the `ref` is intersecting the current viewport.
+ *
+ * @param options - The document handle for the document you want to resolve preview values for, and an optional ref
+ * @returns The preview values for the given document and a boolean to indicate whether the resolution is pending
+ *
+ * @example Combining with useDocuments to render a collection of document previews
+ * ```
+ * // PreviewComponent.jsx
+ * export default function PreviewComponent({ document }) {
+ *   const { results: { title, subtitle, media }, isPending } = usePreview({ document })
+ *   return isPending ? 'Loading…' : (
+ *     <article>
+ *       {media?.type === 'image-asset' ? <img src={media.url} alt='' /> : ''}
+ *       <h2>{title}</h2>
+ *       <p>{subtitle}</p>
+ *     </article>
+ *   )
+ * }
+ *
+ * // DocumentList.jsx
+ * const { results, isPending } = useDocuments({ filter: '_type == "movie"' })
+ * return (
+ *   <div>
+ *     <h1>Movies</h1>
+ *     <ul>
+ *       {isPending ? 'Loading…' : results.map(movie => (
+ *         <li key={movie._id}>
+ *           <PreviewComponent document={movie} />
+ *         </li>
+ *       ))}
+ *     </ul>
+ *   </div>
+ * )
+ * ```
  */
 export declare function usePreview({
   document: {_id, _type},
   ref,
-}: UsePreviewOptions): [PreviewValue, boolean]
+}: UsePreviewOptions): UsePreviewResults
 
 /**
  * @alpha
@@ -171,6 +308,16 @@ export declare interface UsePreviewOptions {
   ref: HTMLElement | null
 }
 
+/**
+ * @alpha
+ */
+export declare interface UsePreviewResults {
+  /** The results of resolving the document’s preview values */
+  results: PreviewValue
+  /** Whether the resolution of the preview values is pending */
+  isPending: boolean
+}
+
 /**
  * Hook that provides the current Sanity instance from the context.
  * This must be called from within a `SanityProvider` component.
@@ -183,4 +330,43 @@ export declare interface UsePreviewOptions {
  */
 export declare const useSanityInstance: () => SanityInstance
 
+/**
+ * @public
+ */
+export declare function useWindowConnection<
+  TWindowMessage extends WindowMessage,
+  TFrameMessage extends FrameMessage,
+>(options: UseWindowConnectionOptions<TFrameMessage>): WindowConnection<TWindowMessage>
+
+/**
+ * @public
+ */
+export declare interface UseWindowConnectionOptions<TMessage extends FrameMessage> {
+  name: string
+  connectTo: string
+  onMessage?: Record<TMessage['type'], WindowMessageHandler<TMessage>>
+}
+
+/**
+ * @public
+ */
+export declare interface WindowConnection<TMessage extends WindowMessage> {
+  sendMessage: <TType extends TMessage['type']>(
+    type: TType,
+    data?: Extract<
+      TMessage,
+      {
+        type: TType
+      }
+    >['data'],
+  ) => void
+}
+
+/**
+ * @public
+ */
+export declare type WindowMessageHandler<TFrameMessage extends FrameMessage> = (
+  event: TFrameMessage['data'],
+) => TFrameMessage['response']
+
 export {}

package/dist/hooks.js

@@ -1,9 +1,79 @@
 import { createStateSourceHook, useSanityInstance } from "./_chunks-es/useLogOut.js";
 import { useAuthState, useHandleCallback, useLogOut, useLoginUrls } from "./_chunks-es/useLogOut.js";
-import { getTokenState, getCurrentUserState, createDocumentListStore, getPreviewState, resolvePreview } from "@sanity/sdk";
-import { useState, useEffect, useCallback, useSyncExternalStore, useMemo } from "react";
+import { getTokenState, getCurrentUserState, getOrCreateController, getOrCreateChannel, releaseChannel, getOrCreateNode, releaseNode, createDocumentListStore, getPreviewState, resolvePreview } from "@sanity/sdk";
+import { useMemo, useEffect, useCallback, useState, useSyncExternalStore } from "react";
 import { Observable, startWith, distinctUntilChanged, switchMap, EMPTY } from "rxjs";
-const useAuthToken = createStateSourceHook(getTokenState), useCurrentUser = createStateSourceHook(getCurrentUserState), STABLE_EMPTY = {
+const useAuthToken = createStateSourceHook(getTokenState), useCurrentUser = createStateSourceHook(getCurrentUserState);
+function useFrameConnection(options) {
+  const { onMessage, targetOrigin, name, connectTo } = options, instance = useSanityInstance(), controller = useMemo(
+    () => getOrCreateController(instance, targetOrigin),
+    [instance, targetOrigin]
+  ), channel = useMemo(
+    () => getOrCreateChannel(instance, {
+      name,
+      connectTo
+    }),
+    [instance, name, connectTo]
+  );
+  useEffect(() => {
+    if (!channel || !onMessage) return;
+    const unsubscribers = [];
+    return Object.entries(onMessage).forEach(([type, handler]) => {
+      const unsubscribe = channel.on(type, handler);
+      unsubscribers.push(unsubscribe);
+    }), () => {
+      unsubscribers.forEach((unsub) => unsub());
+    };
+  }, [channel, onMessage]);
+  const connect = useCallback(
+    (frameWindow) => {
+      const removeTarget = controller?.addTarget(frameWindow);
+      return () => {
+        removeTarget?.();
+      };
+    },
+    [controller]
+  ), sendMessage = useCallback(
+    (type, data) => {
+      channel?.post(type, data);
+    },
+    [channel]
+  );
+  return useEffect(() => () => {
+    releaseChannel(instance, name);
+  }, [name, instance]), {
+    connect,
+    sendMessage
+  };
+}
+function useWindowConnection(options) {
+  const { name, onMessage, connectTo } = options, instance = useSanityInstance(), node = useMemo(
+    () => getOrCreateNode(instance, { name, connectTo }),
+    [instance, name, connectTo]
+  );
+  useEffect(() => {
+    if (!onMessage) return;
+    const unsubscribers = [];
+    return Object.entries(onMessage).forEach(([type, handler]) => {
+      const unsubscribe = node.on(type, handler);
+      unsubscribers.push(unsubscribe);
+    }), () => {
+      unsubscribers.forEach((unsub) => unsub());
+    };
+  }, [node, onMessage]);
+  const sendMessage = useCallback(
+    (type, data) => {
+      node?.post(type, data);
+    },
+    [node]
+  );
+  return useEffect(() => () => {
+    releaseNode(instance, name);
+  }, [instance, name]), {
+    sendMessage
+  };
+}
+const STABLE_EMPTY = {
   results: [],
   isPending: !1,
   hasMore: !1,
@@ -34,10 +104,7 @@ function useDocuments(options = {}) {
     ref.storeInstance?.loadMore();
   }, [ref]), ...state };
 }
-function usePreview({
-  document: { _id, _type },
-  ref
-}) {
+function usePreview({ document: { _id, _type }, ref }) {
   const instance = useSanityInstance(), stateSource = useMemo(
     () => getPreviewState(instance, { document: { _id, _type } }),
     [instance, _id, _type]
@@ -61,9 +128,9 @@ function usePreview({
     },
     [stateSource, ref]
   ), getSnapshot = useCallback(() => {
-    const previewTuple = stateSource.getCurrent();
-    if (!previewTuple[0]) throw resolvePreview(instance, { document: { _id, _type } });
-    return previewTuple;
+    const currentState = stateSource.getCurrent();
+    if (currentState.results === null) throw resolvePreview(instance, { document: { _id, _type } });
+    return currentState;
   }, [_id, _type, instance, stateSource]);
   return useSyncExternalStore(subscribe, getSnapshot);
 }
@@ -72,10 +139,12 @@ export {
   useAuthToken,
   useCurrentUser,
   useDocuments,
+  useFrameConnection,
   useHandleCallback,
   useLogOut,
   useLoginUrls,
   usePreview,
-  useSanityInstance
+  useSanityInstance,
+  useWindowConnection
 };
 //# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../src/hooks/auth/useAuthToken.tsx","../src/hooks/auth/useCurrentUser.tsx","../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 {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 UseDocuments {\n  loadMore: () => void\n  results: DocumentHandle[]\n  isPending: boolean\n  hasMore: boolean\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 * Hook to get the list of documents for specified options\n *\n * @public\n *\n * @param options - options for the document list\n * @returns result of the document list and function to load more\n */\nexport function useDocuments(options: DocumentListOptions = {}): UseDocuments {\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: HTMLElement | null\n}\n\n/**\n * @alpha\n */\nexport function usePreview({\n  document: {_id, _type},\n  ref,\n}: UsePreviewOptions): [PreviewValue, boolean] {\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') return\n\n        const intersectionObserver = new IntersectionObserver(\n          ([entry]) => observer.next(entry.isIntersecting),\n          {rootMargin: '0px', threshold: 0},\n        )\n        if (ref) intersectionObserver.observe(ref)\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 previewTuple = stateSource.getCurrent()\n    if (!previewTuple[0]) throw resolvePreview(instance, {document: {_id, _type}})\n    return previewTuple as [PreviewValue, boolean]\n  }, [_id, _type, instance, stateSource])\n\n  return useSyncExternalStore(subscribe, getSnapshot)\n}\n"],"names":["state"],"mappings":";;;;;AASa,MAAA,eAAe,sBAAsB,aAAa,GCAlD,iBAAiB,sBAAsB,mBAAmB,GCSjE,eAAe;AAAA,EACnB,SAAS,CAAC;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AACT;AAUgB,SAAA,aAAa,UAA+B,IAAkB;AAC5E,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;ACrEO,SAAS,WAAW;AAAA,EACzB,UAAU,EAAC,KAAK,MAAK;AAAA,EACrB;AACF,GAA+C;AACvC,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;AAErD,YAAA,OAAO,uBAAyB,IAAa;AAEjD,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,OAAK,qBAAqB,QAAQ,GAAG,GAClC,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,CAAC,aAAa,CAAC,EAAS,OAAA,eAAe,UAAU,EAAC,UAAU,EAAC,KAAK,SAAO;AACtE,WAAA;AAAA,KACN,CAAC,KAAK,OAAO,UAAU,WAAW,CAAC;AAE/B,SAAA,qBAAqB,WAAW,WAAW;AACpD;"}
+{"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 release date\n * ```\n * const { results } = useDocuments({\n *   filter: '_type == \"movie\" && releaseDate >= \"1980-01-01\"',\n *   sort: [\n *     {\n *       field: 'releaseDate',\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: HTMLElement | null\n}\n\n/**\n * @alpha\n */\nexport interface UsePreviewResults {\n  /** The results of resolving the document’s preview values */\n  results: PreviewValue\n  /** Whether the resolution of the preview values is pending */\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 *           <PreviewComponent document={movie} />\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') return\n\n        const intersectionObserver = new IntersectionObserver(\n          ([entry]) => observer.next(entry.isIntersecting),\n          {rootMargin: '0px', threshold: 0},\n        )\n        if (ref) intersectionObserver.observe(ref)\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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "0.0.0-alpha.3",
+  "version": "0.0.0-alpha.5",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -30,16 +30,21 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./components": {
-      "source": "./src/_exports/components.ts",
-      "import": "./dist/components.js",
-      "default": "./dist/components.js"
+    "./context": {
+      "source": "./src/_exports/context.ts",
+      "import": "./dist/context.js",
+      "default": "./dist/context.js"
     },
     "./hooks": {
       "source": "./src/_exports/hooks.ts",
       "import": "./dist/hooks.js",
       "default": "./dist/hooks.js"
     },
+    "./components": {
+      "source": "./src/_exports/components.ts",
+      "import": "./dist/components.js",
+      "default": "./dist/components.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
@@ -47,8 +52,8 @@
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
-      "components": [
-        "./dist/components.d.ts"
+      "context": [
+        "./dist/context.d.ts"
       ],
       "hooks": [
         "./dist/hooks.d.ts"
@@ -62,21 +67,17 @@
   "browserslist": "extends @sanity/browserslist-config",
   "prettier": "@sanity/prettier-config",
   "dependencies": {
-    "@paramour/css": "1.0.0-rc.2",
-    "@sanity/icons": "^3.5.2",
     "@sanity/logos": "^2.1.13",
     "@sanity/ui": "^2.8.19",
-    "inter-ui": "^4.1.0",
     "react-error-boundary": "^4.1.2",
-    "rollup-plugin-import-css": "^3.5.7",
     "rxjs": "^7.8.1",
-    "@sanity/sdk": "0.0.0-alpha.3"
+    "@sanity/sdk": "0.0.0-alpha.5"
   },
   "devDependencies": {
     "@sanity/client": "^6.24.1",
+    "@sanity/comlink": "^2.0.2",
     "@sanity/pkg-utils": "^6.12.2",
     "@sanity/prettier-config": "^1.0.3",
-    "@storybook/react": "^8.4.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.3",
@@ -92,7 +93,9 @@
     "vite": "^5.4.11",
     "vitest": "^2.1.8",
     "@repo/config-eslint": "0.0.0",
-    "@repo/package.config": "0.0.1"
+    "@repo/config-test": "0.0.1",
+    "@repo/package.config": "0.0.1",
+    "@repo/tsconfig": "0.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -111,7 +114,6 @@
     "docs": "typedoc --out docs --tsconfig ../../tsconfig.tsdoc.json",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
-    "paramour": "npx paramour --config=./src/css/css.config.js --output=./src/css/paramour.css",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",

package/src/_exports/components.ts

@@ -1,13 +1,2 @@
-export {AuthBoundary, type AuthBoundaryProps} from '../components/auth/AuthBoundary'
-export {AuthError} from '../components/auth/AuthError'
-export {Login} from '../components/auth/Login'
-export {LoginCallback} from '../components/auth/LoginCallback'
-export {LoginError, type LoginErrorProps} from '../components/auth/LoginError'
-export {LoginLayout, type LoginLayoutProps} from '../components/auth/LoginLayout'
-export type {SanityProviderProps} from '../components/context/SanityProvider'
-export {SanityProvider} from '../components/context/SanityProvider'
-export {DocumentGridLayout} from '../components/DocumentGridLayout/DocumentGridLayout'
-export {DocumentListLayout} from '../components/DocumentListLayout/DocumentListLayout'
-export {DocumentPreviewLayout} from '../components/DocumentPreviewLayout/DocumentPreviewLayout'
-export {type DocumentPreviewLayoutProps} from '../components/DocumentPreviewLayout/DocumentPreviewLayout'
-export {LoginLinks} from '../components/Login/LoginLinks'
+export {AuthBoundary} from '../components/auth/AuthBoundary'
+export {SanityApp} from '../components/SanityApp'

package/src/_exports/context.ts

@@ -0,0 +1,2 @@
+export type {SanityProviderProps} from '../context/SanityProvider'
+export {SanityProvider} from '../context/SanityProvider'

package/src/_exports/hooks.ts

@@ -4,6 +4,22 @@ export {useCurrentUser} from '../hooks/auth/useCurrentUser'
 export {useHandleCallback} from '../hooks/auth/useHandleCallback'
 export {useLoginUrls} from '../hooks/auth/useLoginUrls'
 export {useLogOut} from '../hooks/auth/useLogOut'
+export {
+  type FrameConnection,
+  type FrameMessageHandler as MessageHandler,
+  useFrameConnection,
+  type UseFrameConnectionOptions,
+} from '../hooks/comlink/useFrameConnection'
+export {
+  useWindowConnection,
+  type UseWindowConnectionOptions,
+  type WindowConnection,
+  type WindowMessageHandler,
+} from '../hooks/comlink/useWindowConnection'
 export {useSanityInstance} from '../hooks/context/useSanityInstance'
-export {type UseDocuments, useDocuments} from '../hooks/documentCollection/useDocuments'
-export {usePreview, type UsePreviewOptions} from '../hooks/preview/usePreview'
+export {type DocumentCollection, useDocuments} from '../hooks/documentCollection/useDocuments'
+export {
+  usePreview,
+  type UsePreviewOptions,
+  type UsePreviewResults,
+} from '../hooks/preview/usePreview'

package/src/components/SanityApp.test.tsx

@@ -0,0 +1,54 @@
+import {AuthStateType, type SanityConfig} from '@sanity/sdk'
+import {render, screen} from '@testing-library/react'
+import {describe, expect, it} from 'vitest'
+
+import {SanityApp} from './SanityApp'
+
+vi.mock('@sanity/sdk', async () => {
+  const actual = await vi.importActual('@sanity/sdk')
+  return {
+    ...actual,
+    createSanityInstance: vi.fn(() => ({
+      config: {},
+      auth: {
+        getSession: vi.fn(),
+        signIn: vi.fn(),
+        signOut: vi.fn(),
+      },
+      identity: {
+        projectId: 'test-project',
+        dataset: 'test-dataset',
+      },
+      dispose: vi.fn(),
+    })),
+  }
+})
+
+vi.mock('../hooks/auth/useAuthState', () => ({
+  useAuthState: () => ({
+    type: AuthStateType.LOGGED_IN,
+    session: {
+      user: {
+        id: 'test-user',
+      },
+    },
+  }),
+}))
+
+describe('SanityApp', () => {
+  const mockSanityConfig: SanityConfig = {
+    projectId: 'test-project',
+    dataset: 'test-dataset',
+  }
+
+  it('renders children correctly', async () => {
+    const testMessage = 'Test Child Component'
+    render(
+      <SanityApp sanityConfig={mockSanityConfig}>
+        <div>{testMessage}</div>
+      </SanityApp>,
+    )
+
+    expect(await screen.findByText(testMessage)).toBeInTheDocument()
+  })
+})

package/src/components/SanityApp.tsx

@@ -0,0 +1,26 @@
+import {createSanityInstance, type SanityConfig} from '@sanity/sdk'
+import {type JSX} from 'react'
+
+import {SanityProvider} from '../context/SanityProvider'
+import {AuthBoundary} from './auth/AuthBoundary'
+
+/**
+ * @public
+ *
+ * @returns Rendered child component wrapped in a SanityProvider and AuthBoundary
+ */
+export function SanityApp({
+  sanityConfig,
+  children,
+}: {
+  children: React.ReactNode
+  sanityConfig: SanityConfig
+}): JSX.Element {
+  const sanityInstance = createSanityInstance(sanityConfig)
+
+  return (
+    <SanityProvider sanityInstance={sanityInstance}>
+      <AuthBoundary>{children}</AuthBoundary>
+    </SanityProvider>
+  )
+}