@sanity/sdk-react 2.0.0 → 2.0.1

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://sanity.io">
-    <img src="https://cdn.sanity.io/images/3do82whm/next/1dfce9dde7a62ccaa8e8377254a1e919f6c07ad3-128x128.svg" />
+    <img src="https://cdn.sanity.io/images/3do82whm/next/d6cf401d52c33b7a5a354a14ab7de94dea2f0c02-192x192.svg" />
   </a>
   <h1 align="center">Sanity App SDK (React)</h1>
 </p>

package/dist/index.d.ts

@@ -21,7 +21,9 @@ import {PathChangeMessage} from '@sanity/message-protocol'
 import {PerspectiveHandle} from '@sanity/sdk'
 import {PreviewValue} from '@sanity/sdk'
 import {ProjectHandle} from '@sanity/sdk'
+import {PropsWithChildren} from 'react'
 import {QueryOptions} from '@sanity/sdk'
+import {default as React_2} from 'react'
 import {ReactElement} from 'react'
 import {ReactNode} from 'react'
 import {ReleaseDocument} from '@sanity/sdk'
@@ -118,6 +120,13 @@ export declare interface AuthBoundaryProps {
  */
 export declare type ComlinkStatus = 'idle' | 'handshaking' | 'connected' | 'disconnected'
 
+/**
+ * This provider is used to provide the Comlink token refresh feature.
+ * It is used to automatically request a new token on 401 error if enabled.
+ * @public
+ */
+export declare const ComlinkTokenRefreshProvider: React_2.FC<PropsWithChildren>
+
 declare interface DashboardResource {
   id: string
   name: string

package/dist/index.js

@@ -1,12 +1,12 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
-import { getAuthState, getLoginUrlState, observeOrganizationVerificationState, handleAuthCallback, logout, AuthStateType, createSanityInstance, getTokenState, getCurrentUserState, getDashboardOrganizationId, getClientState, getOrCreateController, getOrCreateChannel, releaseChannel, getNodeState, getFavoritesState, resolveFavoritesState, resolveDatasets, getDatasetsState, applyDocumentActions, resolveDocument, getDocumentState, subscribeDocumentEvents, getPermissionsState, getDocumentSyncStatus, editDocument, getQueryKey, parseQueryKey, getQueryState, resolveQuery, createGroqSearchFilter, getPreviewState, resolvePreview, getProjectionState, resolveProjection, resolveProject, getProjectState, resolveProjects, getProjectsState, getActiveReleasesState, getPerspectiveState, getUsersKey, parseUsersKey, getUsersState, resolveUsers, loadMoreUsers } from "@sanity/sdk";
+import { getAuthState, getNodeState, getIsInDashboardState, setAuthToken, AuthStateType, getLoginUrlState, observeOrganizationVerificationState, handleAuthCallback, logout, createSanityInstance, getTokenState, getCurrentUserState, getDashboardOrganizationId, getClientState, getOrCreateController, getOrCreateChannel, releaseChannel, getFavoritesState, resolveFavoritesState, resolveDatasets, getDatasetsState, applyDocumentActions, resolveDocument, getDocumentState, subscribeDocumentEvents, getPermissionsState, getDocumentSyncStatus, editDocument, getQueryKey, parseQueryKey, getQueryState, resolveQuery, createGroqSearchFilter, getPreviewState, resolvePreview, getProjectionState, resolveProjection, resolveProject, getProjectState, resolveProjects, getProjectsState, getActiveReleasesState, getPerspectiveState, getUsersKey, parseUsersKey, getUsersState, resolveUsers, loadMoreUsers } from "@sanity/sdk";
 export * from "@sanity/sdk";
-import { createContext, useContext, useSyncExternalStore, useState, useEffect, useRef, Suspense, useMemo, useCallback, useInsertionEffect, useTransition } from "react";
+import { createContext, useContext, useSyncExternalStore, useRef, useEffect, useState, Suspense, useMemo, useCallback, useInsertionEffect, useTransition } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { ClientError } from "@sanity/client";
-import { identity, firstValueFrom, filter, Observable, startWith, distinctUntilChanged, switchMap, EMPTY } from "rxjs";
 import { SDK_CHANNEL_NAME, SDK_NODE_NAME } from "@sanity/message-protocol";
+import { firstValueFrom, filter, identity, Observable, startWith, distinctUntilChanged, switchMap, EMPTY } from "rxjs";
+import { ClientError } from "@sanity/client";
 import { pick } from "lodash-es";
 const SanityInstanceContext = createContext(null), useSanityInstance = (config) => {
   const $ = c(3), instance = useContext(SanityInstanceContext);
@@ -38,7 +38,108 @@ function createStateSourceHook(options) {
   }
   return useHook;
 }
-const useAuthState = createStateSourceHook(getAuthState);
+const useAuthState = createStateSourceHook(getAuthState), useNodeState = createStateSourceHook({
+  getState: getNodeState,
+  shouldSuspend: (instance, nodeInput) => getNodeState(instance, nodeInput).getCurrent() === void 0,
+  suspender: (instance, nodeInput) => firstValueFrom(getNodeState(instance, nodeInput).observable.pipe(filter(Boolean)))
+});
+function useWindowConnection(t0) {
+  const $ = c(19), {
+    name,
+    connectTo,
+    onMessage
+  } = t0;
+  let t1;
+  $[0] !== connectTo || $[1] !== name ? (t1 = {
+    name,
+    connectTo
+  }, $[0] = connectTo, $[1] = name, $[2] = t1) : t1 = $[2];
+  const {
+    node
+  } = useNodeState(t1);
+  let t2;
+  $[3] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[3] = t2) : t2 = $[3];
+  const messageUnsubscribers = useRef(t2), instance = useSanityInstance();
+  let t3;
+  $[4] !== node || $[5] !== onMessage ? (t3 = () => (onMessage && Object.entries(onMessage).forEach((t42) => {
+    const [type, handler] = t42, messageUnsubscribe = node.on(type, handler);
+    messageUnsubscribe && messageUnsubscribers.current.push(messageUnsubscribe);
+  }), () => {
+    messageUnsubscribers.current.forEach(_temp$6), messageUnsubscribers.current = [];
+  }), $[4] = node, $[5] = onMessage, $[6] = t3) : t3 = $[6];
+  let t4;
+  $[7] !== instance || $[8] !== name || $[9] !== node || $[10] !== onMessage ? (t4 = [instance, name, onMessage, node], $[7] = instance, $[8] = name, $[9] = node, $[10] = onMessage, $[11] = t4) : t4 = $[11], useEffect(t3, t4);
+  let t5;
+  $[12] !== node ? (t5 = (type_0, data) => {
+    node.post(type_0, data);
+  }, $[12] = node, $[13] = t5) : t5 = $[13];
+  const sendMessage = t5;
+  let t6;
+  $[14] !== node ? (t6 = (type_1, data_0, fetchOptions) => node.fetch(type_1, data_0, fetchOptions ?? {}), $[14] = node, $[15] = t6) : t6 = $[15];
+  const fetch = t6;
+  let t7;
+  return $[16] !== fetch || $[17] !== sendMessage ? (t7 = {
+    sendMessage,
+    fetch
+  }, $[16] = fetch, $[17] = sendMessage, $[18] = t7) : t7 = $[18], t7;
+}
+function _temp$6(unsubscribe) {
+  return unsubscribe();
+}
+const DEFAULT_RESPONSE_TIMEOUT = 1e4;
+function DashboardTokenRefresh(t0) {
+  const $ = c(14), {
+    children
+  } = t0, instance = useSanityInstance(), isTokenRefreshInProgress = useRef(!1), timeoutRef = useRef(null), processed401ErrorRef = useRef(null), authState = useAuthState();
+  let t1;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => {
+    timeoutRef.current && (clearTimeout(timeoutRef.current), timeoutRef.current = null);
+  }, $[0] = t1) : t1 = $[0];
+  const clearRefreshTimeout = t1;
+  let t2;
+  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {
+    name: SDK_NODE_NAME,
+    connectTo: SDK_CHANNEL_NAME
+  }, $[1] = t2) : t2 = $[1];
+  const windowConnection = useWindowConnection(t2);
+  let t3;
+  $[2] !== instance || $[3] !== windowConnection ? (t3 = async () => {
+    if (!isTokenRefreshInProgress.current) {
+      isTokenRefreshInProgress.current = !0, clearRefreshTimeout(), timeoutRef.current = setTimeout(() => {
+        isTokenRefreshInProgress.current && (isTokenRefreshInProgress.current = !1), timeoutRef.current = null;
+      }, DEFAULT_RESPONSE_TIMEOUT);
+      try {
+        const res = await windowConnection.fetch("dashboard/v1/auth/tokens/create");
+        clearRefreshTimeout(), res.token && setAuthToken(instance, res.token), isTokenRefreshInProgress.current = !1;
+      } catch {
+        isTokenRefreshInProgress.current = !1, clearRefreshTimeout();
+      }
+    }
+  }, $[2] = instance, $[3] = windowConnection, $[4] = t3) : t3 = $[4];
+  const requestNewToken = t3;
+  let t4, t5;
+  $[5] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => () => {
+    clearRefreshTimeout();
+  }, t5 = [clearRefreshTimeout], $[5] = t4, $[6] = t5) : (t4 = $[5], t5 = $[6]), useEffect(t4, t5);
+  let t6;
+  $[7] !== authState.error || $[8] !== authState.type || $[9] !== requestNewToken ? (t6 = () => {
+    const has401Error = authState.type === AuthStateType.ERROR && authState.error && authState.error?.statusCode === 401 && !isTokenRefreshInProgress.current && processed401ErrorRef.current !== authState.error, isLoggedOut = authState.type === AuthStateType.LOGGED_OUT && !isTokenRefreshInProgress.current;
+    has401Error || isLoggedOut ? (processed401ErrorRef.current = authState.type === AuthStateType.ERROR ? authState.error : void 0, requestNewToken()) : (authState.type !== AuthStateType.ERROR || processed401ErrorRef.current !== (authState.type === AuthStateType.ERROR ? authState.error : void 0)) && (processed401ErrorRef.current = null);
+  }, $[7] = authState.error, $[8] = authState.type, $[9] = requestNewToken, $[10] = t6) : t6 = $[10];
+  let t7;
+  return $[11] !== authState || $[12] !== requestNewToken ? (t7 = [authState, requestNewToken], $[11] = authState, $[12] = requestNewToken, $[13] = t7) : t7 = $[13], useEffect(t6, t7), children;
+}
+const ComlinkTokenRefreshProvider = (t0) => {
+  const $ = c(2), {
+    children
+  } = t0, instance = useSanityInstance();
+  let t1;
+  if (t1 = getIsInDashboardState(instance).getCurrent(), t1) {
+    let t2;
+    return $[0] !== children ? (t2 = /* @__PURE__ */ jsx(DashboardTokenRefresh, { children }), $[0] = children, $[1] = t2) : t2 = $[1], t2;
+  }
+  return children;
+};
 function useLoginUrl() {
   const $ = c(2), instance = useSanityInstance();
   let t0, t1;
@@ -96,19 +197,19 @@ function LoginCallback() {
   let t0, t1;
   return $[0] !== handleAuthCallback2 ? (t0 = () => {
     const url = new URL(location.href);
-    handleAuthCallback2(url.toString()).then(_temp$6);
+    handleAuthCallback2(url.toString()).then(_temp$5);
   }, t1 = [handleAuthCallback2], $[0] = handleAuthCallback2, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1), null;
 }
-function _temp$6(replacementLocation) {
+function _temp$5(replacementLocation) {
   replacementLocation && history.replaceState(null, "", replacementLocation);
 }
 const useLogOut = createCallbackHook(logout);
 function LoginError(t0) {
-  const $ = c(24), {
+  const $ = c(23), {
     error,
     resetErrorBoundary
   } = t0;
-  if (!(error instanceof AuthError || error instanceof ConfigurationError))
+  if (!(error instanceof AuthError || error instanceof ConfigurationError || error instanceof ClientError))
     throw error;
   const logout2 = useLogOut(), authState = useAuthState(), [authErrorMessage, setAuthErrorMessage] = useState("Please try again or contact support if the problem persists.");
   let t1;
@@ -117,36 +218,36 @@ function LoginError(t0) {
   }, $[0] = logout2, $[1] = resetErrorBoundary, $[2] = t1) : t1 = $[2];
   const handleRetry = t1;
   let t2;
-  $[3] !== authState.error || $[4] !== authState.type || $[5] !== error || $[6] !== handleRetry ? (t2 = () => {
-    if (authState.type === AuthStateType.ERROR && authState.error instanceof ClientError) {
-      if (authState.error.statusCode === 401)
+  $[3] !== authState.type || $[4] !== error || $[5] !== handleRetry ? (t2 = () => {
+    if (error instanceof ClientError) {
+      if (error.statusCode === 401)
         handleRetry();
-      else if (authState.error.statusCode === 404) {
-        const errorMessage = authState.error.response.body.message || "";
+      else if (error.statusCode === 404) {
+        const errorMessage = error.response.body.message || "";
         errorMessage.startsWith("Session with sid") && errorMessage.endsWith("not found") ? setAuthErrorMessage("The session ID is invalid or expired.") : setAuthErrorMessage("The login link is invalid or expired. Please try again.");
       }
     }
     authState.type !== AuthStateType.ERROR && error instanceof ConfigurationError && setAuthErrorMessage(error.message);
-  }, $[3] = authState.error, $[4] = authState.type, $[5] = error, $[6] = handleRetry, $[7] = t2) : t2 = $[7];
+  }, $[3] = authState.type, $[4] = error, $[5] = handleRetry, $[6] = t2) : t2 = $[6];
   let t3;
-  $[8] !== authState || $[9] !== error || $[10] !== handleRetry ? (t3 = [authState, handleRetry, error], $[8] = authState, $[9] = error, $[10] = handleRetry, $[11] = t3) : t3 = $[11], useEffect(t2, t3);
+  $[7] !== authState || $[8] !== error || $[9] !== handleRetry ? (t3 = [authState, handleRetry, error], $[7] = authState, $[8] = error, $[9] = handleRetry, $[10] = t3) : t3 = $[10], useEffect(t2, t3);
   const t4 = error instanceof AuthError ? "Authentication Error" : "Configuration Error";
   let t5;
-  $[12] !== t4 ? (t5 = /* @__PURE__ */ jsx("h2", { className: "sc-login-error__title", children: t4 }), $[12] = t4, $[13] = t5) : t5 = $[13];
+  $[11] !== t4 ? (t5 = /* @__PURE__ */ jsx("h2", { className: "sc-login-error__title", children: t4 }), $[11] = t4, $[12] = t5) : t5 = $[12];
   let t6;
-  $[14] !== authErrorMessage ? (t6 = /* @__PURE__ */ jsx("p", { className: "sc-login-error__description", children: authErrorMessage }), $[14] = authErrorMessage, $[15] = t6) : t6 = $[15];
+  $[13] !== authErrorMessage ? (t6 = /* @__PURE__ */ jsx("p", { className: "sc-login-error__description", children: authErrorMessage }), $[13] = authErrorMessage, $[14] = t6) : t6 = $[14];
   let t7;
-  $[16] !== t5 || $[17] !== t6 ? (t7 = /* @__PURE__ */ jsxs("div", { className: "sc-login-error__content", children: [
+  $[15] !== t5 || $[16] !== t6 ? (t7 = /* @__PURE__ */ jsxs("div", { className: "sc-login-error__content", children: [
     t5,
     t6
-  ] }), $[16] = t5, $[17] = t6, $[18] = t7) : t7 = $[18];
+  ] }), $[15] = t5, $[16] = t6, $[17] = t7) : t7 = $[17];
   let t8;
-  $[19] !== handleRetry ? (t8 = /* @__PURE__ */ jsx("button", { className: "sc-login-error__button", onClick: handleRetry, children: "Retry" }), $[19] = handleRetry, $[20] = t8) : t8 = $[20];
+  $[18] !== handleRetry ? (t8 = /* @__PURE__ */ jsx("button", { className: "sc-login-error__button", onClick: handleRetry, children: "Retry" }), $[18] = handleRetry, $[19] = t8) : t8 = $[19];
   let t9;
-  return $[21] !== t7 || $[22] !== t8 ? (t9 = /* @__PURE__ */ jsxs("div", { className: "sc-login-error", children: [
+  return $[20] !== t7 || $[21] !== t8 ? (t9 = /* @__PURE__ */ jsxs("div", { className: "sc-login-error", children: [
     t7,
     t8
-  ] }), $[21] = t7, $[22] = t8, $[23] = t9) : t9 = $[23], t9;
+  ] }), $[20] = t7, $[21] = t8, $[22] = t9) : t9 = $[22], t9;
 }
 if (isInIframe() && !document.querySelector("[data-sanity-core]")) {
   const parsedUrl = new URL(window.location.href), mode = new URLSearchParams(parsedUrl.hash.slice(1)).get("mode"), script = document.createElement("script");
@@ -168,7 +269,7 @@ function AuthBoundary(t0) {
   let t4;
   $[5] !== props ? (t4 = /* @__PURE__ */ jsx(AuthSwitch, { ...props }), $[5] = props, $[6] = t4) : t4 = $[6];
   let t5;
-  return $[7] !== FallbackComponent || $[8] !== t4 ? (t5 = /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent, children: t4 }), $[7] = FallbackComponent, $[8] = t4, $[9] = t5) : t5 = $[9], t5;
+  return $[7] !== FallbackComponent || $[8] !== t4 ? (t5 = /* @__PURE__ */ jsx(ComlinkTokenRefreshProvider, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent, children: t4 }) }), $[7] = FallbackComponent, $[8] = t4, $[9] = t5) : t5 = $[9], t5;
 }
 function AuthSwitch(t0) {
   const $ = c(13);
@@ -260,9 +361,9 @@ function SanityApp(t0) {
 }
 function _temp2$1() {
   let timeout;
-  return !isInIframe() && !isLocalUrl(window) && (timeout = setTimeout(_temp$5, 1e3)), () => clearTimeout(timeout);
+  return !isInIframe() && !isLocalUrl(window) && (timeout = setTimeout(_temp$4, 1e3)), () => clearTimeout(timeout);
 }
-function _temp$5() {
+function _temp$4() {
   console.warn("Redirecting to core", REDIRECT_URL), window.location.replace(REDIRECT_URL);
 }
 const useAuthToken = createStateSourceHook(getTokenState), useCurrentUser = createStateSourceHook(getCurrentUserState);
@@ -304,7 +405,7 @@ function useFrameConnection(options) {
       const [type, handler] = t22, unsubscribe = channel.on(type, handler);
       messageUnsubscribers.push(unsubscribe);
     }), () => {
-      messageUnsubscribers.forEach(_temp$4), releaseChannel(instance, name), channelRef.current = null, controllerRef.current = null;
+      messageUnsubscribers.forEach(_temp$3), releaseChannel(instance, name), channelRef.current = null, controllerRef.current = null;
     };
   }, t1 = [targetOrigin, name, connectTo, heartbeat, onMessage, instance, onStatus], $[0] = connectTo, $[1] = heartbeat, $[2] = instance, $[3] = name, $[4] = onMessage, $[5] = onStatus, $[6] = targetOrigin, $[7] = t0, $[8] = t1) : (t0 = $[7], t1 = $[8]), useEffect(t0, t1);
   let t2;
@@ -326,57 +427,9 @@ function useFrameConnection(options) {
     sendMessage
   }, $[11] = t4) : t4 = $[11], t4;
 }
-function _temp$4(unsub) {
+function _temp$3(unsub) {
   return unsub();
 }
-const useNodeState = createStateSourceHook({
-  getState: getNodeState,
-  shouldSuspend: (instance, nodeInput) => getNodeState(instance, nodeInput).getCurrent() === void 0,
-  suspender: (instance, nodeInput) => firstValueFrom(getNodeState(instance, nodeInput).observable.pipe(filter(Boolean)))
-});
-function useWindowConnection(t0) {
-  const $ = c(19), {
-    name,
-    connectTo,
-    onMessage
-  } = t0;
-  let t1;
-  $[0] !== connectTo || $[1] !== name ? (t1 = {
-    name,
-    connectTo
-  }, $[0] = connectTo, $[1] = name, $[2] = t1) : t1 = $[2];
-  const {
-    node
-  } = useNodeState(t1);
-  let t2;
-  $[3] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[3] = t2) : t2 = $[3];
-  const messageUnsubscribers = useRef(t2), instance = useSanityInstance();
-  let t3;
-  $[4] !== node || $[5] !== onMessage ? (t3 = () => (onMessage && Object.entries(onMessage).forEach((t42) => {
-    const [type, handler] = t42, messageUnsubscribe = node.on(type, handler);
-    messageUnsubscribe && messageUnsubscribers.current.push(messageUnsubscribe);
-  }), () => {
-    messageUnsubscribers.current.forEach(_temp$3), messageUnsubscribers.current = [];
-  }), $[4] = node, $[5] = onMessage, $[6] = t3) : t3 = $[6];
-  let t4;
-  $[7] !== instance || $[8] !== name || $[9] !== node || $[10] !== onMessage ? (t4 = [instance, name, onMessage, node], $[7] = instance, $[8] = name, $[9] = node, $[10] = onMessage, $[11] = t4) : t4 = $[11], useEffect(t3, t4);
-  let t5;
-  $[12] !== node ? (t5 = (type_0, data) => {
-    node.post(type_0, data);
-  }, $[12] = node, $[13] = t5) : t5 = $[13];
-  const sendMessage = t5;
-  let t6;
-  $[14] !== node ? (t6 = (type_1, data_0, fetchOptions) => node.fetch(type_1, data_0, fetchOptions ?? {}), $[14] = node, $[15] = t6) : t6 = $[15];
-  const fetch = t6;
-  let t7;
-  return $[16] !== fetch || $[17] !== sendMessage ? (t7 = {
-    sendMessage,
-    fetch
-  }, $[16] = fetch, $[17] = sendMessage, $[18] = t7) : t7 = $[18], t7;
-}
-function _temp$3(unsubscribe) {
-  return unsubscribe();
-}
 function useDashboardNavigate(navigateFn) {
   const $ = c(2);
   let t0;
@@ -1059,7 +1112,7 @@ function useUsers(options) {
     loadMore
   };
 }
-var version = "2.0.0";
+var version = "2.0.1";
 function getEnv(key) {
   if (typeof import.meta < "u" && import.meta.env)
     return import.meta.env[key];
@@ -1071,6 +1124,7 @@ function getEnv(key) {
 const REACT_SDK_VERSION = getEnv("PKG_VERSION") || `${version}-development`;
 export {
   AuthBoundary,
+  ComlinkTokenRefreshProvider,
   REACT_SDK_VERSION,
   ResourceProvider,
   SDKProvider,