sanity 3.83.1-canary.23 → 3.84.1-next.0

package/src/presentation/usePreviewUrl.ts

@@ -0,0 +1,133 @@
+import {createPreviewSecret} from '@sanity/preview-url-secret/create-secret'
+import {definePreviewUrl} from '@sanity/preview-url-secret/define-preview-url'
+import {startTransition, useEffect, useMemo, useRef, useState} from 'react'
+import {type SanityClient, useActiveWorkspace, useClient, useCurrentUser} from 'sanity'
+import {suspend} from 'suspend-react'
+
+import {API_VERSION} from './constants'
+import {type PresentationPerspective, type PreviewUrlOption} from './types'
+import {encodeStudioPerspective} from './util/encodeStudioPerspective'
+
+export function usePreviewUrl(
+  previewUrl: PreviewUrlOption,
+  toolName: string,
+  studioPreviewPerspective: PresentationPerspective,
+  previewSearchParam: string | null,
+  canCreateUrlPreviewSecrets: boolean,
+): URL {
+  const client = useClient({apiVersion: API_VERSION})
+  const workspace = useActiveWorkspace()
+  const basePath = workspace?.activeWorkspace?.basePath || '/'
+  const workspaceName = workspace?.activeWorkspace?.name || 'default'
+  const deps = useSuspendCacheKeys(toolName, basePath, workspaceName, previewSearchParam)
+  const previewUrlSecret = usePreviewUrlSecret(
+    (canCreateUrlPreviewSecrets && typeof previewUrl === 'object') ||
+      typeof previewUrl === 'function',
+    deps,
+  )
+
+  return suspend(async () => {
+    if (typeof previewUrl === 'string') {
+      const resolvedUrl = new URL(previewUrl, location.origin)
+      let resultUrl = resolvedUrl
+      try {
+        if (previewSearchParam) {
+          const restoredUrl = new URL(previewSearchParam, resolvedUrl)
+          if (restoredUrl.origin === resolvedUrl.origin) {
+            resultUrl = restoredUrl
+          }
+        }
+      } catch {
+        // ignore
+      }
+      // Prevent infinite recursion
+      if (
+        location.origin === resultUrl.origin &&
+        (resultUrl.pathname.startsWith(`${basePath}/`) || resultUrl.pathname === basePath)
+      ) {
+        return resolvedUrl
+      }
+      return resultUrl
+    }
+    const resolvePreviewUrl =
+      typeof previewUrl === 'object' ? definePreviewUrl<SanityClient>(previewUrl) : previewUrl
+    const resolvedUrl = await resolvePreviewUrl({
+      client,
+      previewUrlSecret: previewUrlSecret!,
+      studioPreviewPerspective: encodeStudioPerspective(studioPreviewPerspective),
+      previewSearchParam,
+      studioBasePath: basePath,
+    })
+    return new URL(resolvedUrl, location.origin)
+  }, [...deps, previewUrlSecret]) satisfies URL
+}
+
+// https://github.com/pmndrs/suspend-react?tab=readme-ov-file#making-cache-keys-unique
+const resolveUUID = Symbol('sanity/presentation/resolveUUID')
+
+function useSuspendCacheKeys(
+  toolName: string,
+  basePath: string,
+  workspaceName: string,
+  previewSearchParam: string | null,
+) {
+  // Allow busting the cache when the Presentation Tool is reloaded, without causing it to suspend on every render that changes the `preview` parameter
+  const [cachedPreviewSearchParam, setCachedPreviewSearchParam] = useState(
+    () => previewSearchParam || '',
+  )
+  const timeoutRef = useRef(0)
+  useEffect(() => {
+    if (cachedPreviewSearchParam && previewSearchParam) {
+      // Handle resets, like when the Presentation Tool is clicked in the navbar
+      window.clearTimeout(timeoutRef.current)
+      return () => {
+        timeoutRef.current = window.setTimeout(() => {
+          setCachedPreviewSearchParam('')
+        }, 100)
+      }
+    }
+    return undefined
+  }, [cachedPreviewSearchParam, previewSearchParam])
+
+  const currentUser = useCurrentUser()
+  return useMemo(
+    () => [
+      // Cache based on a few specific conditions
+      'sanity/presentation',
+      basePath,
+      workspaceName,
+      toolName,
+      currentUser?.id,
+      resolveUUID,
+      cachedPreviewSearchParam,
+    ],
+    [basePath, currentUser?.id, toolName, workspaceName, cachedPreviewSearchParam],
+  )
+}
+
+function usePreviewUrlSecret(enabled: boolean, deps: (string | symbol | undefined)[]) {
+  const client = useClient({apiVersion: API_VERSION})
+  const currentUser = useCurrentUser()
+  const [secretLastExpiredAt, setSecretLastExpiredAt] = useState<string>('')
+
+  const previewUrlSecret = enabled
+    ? suspend(async () => {
+        return await createPreviewSecret(
+          client,
+          '@sanity/presentation',
+          typeof window === 'undefined' ? '' : location.href,
+          currentUser?.id,
+        )
+      }, [...deps, secretLastExpiredAt])
+    : null
+
+  useEffect(() => {
+    if (!previewUrlSecret) return undefined
+    const timeout = setTimeout(() => {
+      startTransition(() => setSecretLastExpiredAt(previewUrlSecret.expiresAt.toString()))
+    }, previewUrlSecret.expiresAt.getTime() - Date.now())
+    return () => clearTimeout(timeout)
+  }, [previewUrlSecret])
+
+  return previewUrlSecret?.secret || null
+}

package/src/presentation/actors/create-preview-secret.ts

@@ -1,19 +0,0 @@
-import {createPreviewSecret} from '@sanity/preview-url-secret/create-secret'
-import {type SanityClient} from 'sanity'
-import {fromPromise, type PromiseActorLogic} from 'xstate'
-
-/** @internal */
-export function defineCreatePreviewSecretActor({
-  client,
-  currentUserId,
-}: {
-  client: SanityClient
-  currentUserId: string | undefined
-}): PromiseActorLogic<{
-  secret: string
-  expiresAt: Date
-}> {
-  return fromPromise(async () => {
-    return await createPreviewSecret(client, 'sanity/presentation', location.href, currentUserId)
-  })
-}

package/src/presentation/actors/read-shared-secret.ts

@@ -1,18 +0,0 @@
-import {fetchSharedAccessQuery} from '@sanity/preview-url-secret/constants'
-import {type SanityClient} from 'sanity'
-import {fromPromise, type PromiseActorLogic} from 'xstate'
-
-/** @internal */
-export function defineReadSharedSecretActor({
-  client,
-}: {
-  client: SanityClient
-}): PromiseActorLogic<string | null> {
-  return fromPromise(async () => {
-    return client.fetch<string | null>(
-      fetchSharedAccessQuery,
-      {},
-      {tag: 'presentation.fallback-to-shared-access-secret'},
-    )
-  })
-}

package/src/presentation/actors/resolve-allow-patterns.ts

@@ -1,55 +0,0 @@
-import {fromPromise, type PromiseActorLogic} from 'xstate'
-
-import {type PreviewUrlAllowOption, type PreviewUrlAllowOptionContext} from '../types'
-
-interface Context extends Pick<PreviewUrlAllowOptionContext, 'client'> {
-  allowOption: PreviewUrlAllowOption | undefined
-}
-type Input = Omit<PreviewUrlAllowOptionContext, 'client' | 'origin'>
-
-/** @internal */
-export function defineResolveAllowPatternsActor({
-  client,
-  allowOption,
-}: Context): PromiseActorLogic<URLPattern[], Input> {
-  return fromPromise<URLPattern[], Input>(async ({input}) => {
-    const {initialUrl} = input
-
-    /**
-     * Lazy load the URLPattern polyfill on-demand, if needed
-     */
-    if (typeof URLPattern === 'undefined') {
-      await import('urlpattern-polyfill')
-    }
-
-    /**
-     * If no allow option is provided, we use the initial URL to infer the pattern
-     */
-    if (!allowOption) {
-      return [new URLPattern(initialUrl.origin)]
-    }
-
-    const maybePatterns =
-      typeof allowOption === 'function'
-        ? await allowOption({client, origin, initialUrl})
-        : allowOption
-    const patterns = Array.isArray(maybePatterns) ? maybePatterns : [maybePatterns]
-    const urlPatterns = patterns.map((value) => {
-      const urlPattern = new URLPattern(value)
-      if (urlPattern.hostname === '*') {
-        throw new Error(
-          `It's insecure to allow any hostname, it could disclose data to a malicious site`,
-        )
-      }
-      return urlPattern
-    })
-    /**
-     * If the declared patterns don't consider the initial URL valid, we add it to the list of patterns
-     */
-    if (!urlPatterns.some((pattern) => pattern.test(initialUrl.origin))) {
-      return [...urlPatterns, new URLPattern(initialUrl.origin)]
-    }
-
-    return urlPatterns
-  })
-}

package/src/presentation/actors/resolve-initial-url.ts

@@ -1,65 +0,0 @@
-import {type SanityClient} from 'sanity'
-import {fromPromise, type PromiseActorLogic} from 'xstate'
-
-import {type PresentationPerspective, type PreviewUrlOption} from '../types'
-import {encodeStudioPerspective} from '../util/encodeStudioPerspective'
-
-/** @internal */
-export function defineResolveInitialUrlActor({
-  client,
-  studioBasePath,
-  previewUrlOption,
-  perspective,
-}: {
-  client: SanityClient
-  studioBasePath: string
-  previewUrlOption: PreviewUrlOption | undefined
-  perspective: PresentationPerspective
-}): PromiseActorLogic<URL, {previewSearchParam: string | null}> {
-  return fromPromise<URL, {previewSearchParam: string | null}>(
-    async ({input}: {input: {previewSearchParam: string | null}}) => {
-      const {origin} = location
-      /**
-       * If the previewUrlOption is a function, we need to resolve it and maintain backwards compatibility
-       */
-      if (typeof previewUrlOption === 'function') {
-        const initial = await previewUrlOption({
-          client,
-          studioBasePath,
-          // @TODO handle checking permissions here, and then generating a secret
-          previewUrlSecret: '',
-          studioPreviewPerspective: encodeStudioPerspective(perspective),
-          previewSearchParam: input.previewSearchParam,
-        })
-        return new URL(initial, origin)
-      }
-
-      /**
-       * Provide backwards compatibility for versions where `previewUrl` where optional
-       */
-      if (!previewUrlOption) {
-        return new URL('/', origin)
-      }
-      /**
-       * Support setting `previewUrl` as a string shorthand
-       */
-      if (typeof previewUrlOption === 'string') {
-        return new URL(previewUrlOption, origin)
-      }
-
-      if (typeof previewUrlOption.initial === 'function') {
-        const initial = await previewUrlOption.initial({
-          client,
-          origin,
-        })
-        return new URL(initial, origin)
-      }
-
-      if (typeof previewUrlOption.initial === 'string') {
-        return new URL(previewUrlOption.initial, origin)
-      }
-
-      return new URL(previewUrlOption.preview || '/', previewUrlOption.origin || origin)
-    },
-  )
-}

package/src/presentation/actors/resolve-preview-mode-url.ts

@@ -1,72 +0,0 @@
-import {
-  urlSearchParamPreviewPathname,
-  urlSearchParamPreviewPerspective,
-  urlSearchParamPreviewSecret,
-} from '@sanity/preview-url-secret/constants'
-import {type SanityClient} from 'sanity'
-import {fromPromise, type PromiseActorLogic} from 'xstate'
-
-import {
-  type PresentationPerspective,
-  type PreviewUrlOption,
-  type PreviewUrlPreviewMode,
-} from '../types'
-import {encodeStudioPerspective} from '../util/encodeStudioPerspective'
-
-/** @internal */
-export interface ResolvePreviewModeUrlInput {
-  previewUrlSecret: string
-  resolvedPreviewMode: PreviewUrlPreviewMode
-  initialUrl: URL
-}
-
-/** @internal */
-export function defineResolvePreviewModeUrlActor({
-  client,
-  studioBasePath,
-  previewUrlOption,
-  perspective,
-}: {
-  client: SanityClient
-  studioBasePath: string
-  previewUrlOption: PreviewUrlOption | undefined
-  perspective: PresentationPerspective
-}): PromiseActorLogic<URL, ResolvePreviewModeUrlInput> {
-  return fromPromise<URL, ResolvePreviewModeUrlInput>(async ({input}) => {
-    const {previewUrlSecret, resolvedPreviewMode, initialUrl} = input
-
-    /**
-     * If the previewUrlOption is a function, we need to resolve it and maintain backwards compatibility
-     */
-    if (typeof previewUrlOption === 'function') {
-      const initial = await previewUrlOption({
-        client,
-        studioBasePath,
-        previewUrlSecret,
-        studioPreviewPerspective: encodeStudioPerspective(perspective),
-        previewSearchParam: initialUrl.toString(),
-      })
-      return new URL(initial, initialUrl)
-    }
-
-    /**
-     * If the resolved preview mode is false then we have an unexpected state that shouldn't be possible
-     */
-    if (!resolvedPreviewMode) {
-      throw new Error('Resolved preview mode is false')
-    }
-
-    const url = new URL(resolvedPreviewMode.enable, initialUrl)
-
-    url.searchParams.set(urlSearchParamPreviewSecret, previewUrlSecret)
-    url.searchParams.set(urlSearchParamPreviewPerspective, encodeStudioPerspective(perspective))
-    if (initialUrl.pathname !== url.pathname) {
-      url.searchParams.set(
-        urlSearchParamPreviewPathname,
-        `${initialUrl.pathname}${initialUrl.search}${initialUrl.hash}`,
-      )
-    }
-
-    return url
-  })
-}

package/src/presentation/actors/resolve-preview-mode.ts

@@ -1,66 +0,0 @@
-import {fromPromise, type PromiseActorLogic} from 'xstate'
-
-import {
-  type PreviewUrlOption,
-  type PreviewUrlPreviewMode,
-  type PreviewUrlPreviewModeOptionContext,
-} from '../types'
-
-type Options = Omit<PreviewUrlPreviewModeOptionContext, 'origin'>
-
-interface Context extends Pick<Options, 'client'> {
-  previewUrlOption: PreviewUrlOption | undefined
-}
-type Input = Omit<Options, 'client'>
-
-/** @internal */
-export function defineResolvePreviewModeActor({
-  client,
-  previewUrlOption,
-}: Context): PromiseActorLogic<PreviewUrlPreviewMode | false, Input> {
-  return fromPromise<PreviewUrlPreviewMode | false, Input>(async ({input}) => {
-    const {targetOrigin} = input
-
-    /**
-     * Handle legacy draftMode options
-     */
-    if (typeof previewUrlOption === 'object' && previewUrlOption?.draftMode) {
-      return {
-        enable: previewUrlOption.draftMode.enable,
-        shareAccess: previewUrlOption.draftMode.shareAccess ?? true,
-      }
-    }
-
-    /**
-     * If no preview mode option is provided, we disable preview mode
-     */
-    if (
-      !previewUrlOption ||
-      typeof previewUrlOption === 'string' ||
-      typeof previewUrlOption === 'function' ||
-      !previewUrlOption.previewMode
-    ) {
-      return false
-    }
-
-    /**
-     * If the option is a function, we resolve it
-     */
-    const previewMode =
-      typeof previewUrlOption.previewMode === 'function'
-        ? await previewUrlOption.previewMode({client, origin, targetOrigin})
-        : previewUrlOption.previewMode
-
-    if (previewMode === false) {
-      return false
-    }
-
-    /**
-     * Return only supported preview mode options, filter out unknowns
-     */
-    return {
-      enable: previewMode.enable,
-      shareAccess: previewMode.shareAccess ?? true,
-    }
-  })
-}

package/src/presentation/actors/resolve-url-from-preview-search-param.ts

@@ -1,29 +0,0 @@
-import {fromPromise} from 'xstate'
-
-/** @internal */
-export const resolveUrlFromPreviewSearchParamActor = fromPromise<
-  URL,
-  {initialUrl: URL; previewSearchParam: string | null | undefined; allowOrigins: URLPattern[]}
->(async ({input}) => {
-  const {previewSearchParam, initialUrl, allowOrigins} = input
-
-  /**
-   * If the preview search param is falsy we can skip
-   */
-  if (!previewSearchParam) {
-    return initialUrl
-  }
-
-  /**
-   * Validate the previewSearchParam
-   */
-  try {
-    const previewSearchParamUrl = new URL(previewSearchParam, initialUrl.origin)
-    if (!allowOrigins.some((pattern) => pattern.test(previewSearchParamUrl.origin))) {
-      return initialUrl
-    }
-    return previewSearchParamUrl
-  } catch (err) {
-    return initialUrl
-  }
-})

package/src/presentation/machines/presentation-machine.ts

@@ -1,101 +0,0 @@
-import {type ActorRefFrom, assign, setup} from 'xstate'
-
-interface Context {
-  url: URL | null
-  error: Error | null
-  visualEditingOverlaysEnabled: boolean
-}
-
-type Event =
-  | {type: 'toggle visual editing overlays'; enabled: boolean}
-  | {type: 'iframe loaded'}
-  | {type: 'iframe refresh'}
-  | {type: 'iframe reload'}
-
-export const presentationMachine = setup({
-  types: {} as {
-    context: Context
-    events: Event
-    tags: 'busy' | 'error'
-  },
-  actions: {
-    //
-  },
-  actors: {
-    //
-  },
-  guards: {
-    //
-  },
-}).createMachine({
-  // eslint-disable-next-line tsdoc/syntax
-  /** @xstate-layout N4IgpgJg5mDOIC5QAUBOcwDsAuBDbAlgPaYAEAKkUQDYDEBAZqrgLZinrVG4QDaADAF1EoAA5FYBQiREgAHogAsAJgA0IAJ6IAHAEYAdIoCcJowFY9R-vzPLlAX3vq0GHPmJlKNfVx4FMUPRMrOy+EJACwkgg4pLSmLIKCLoAbIr6Zoop2tqKAMxpJnnF6loIZkbK+uZ5umapKXmK-Cm6js7osFh48RRU1D7c4RC02ERQUNTsAG4EsACuuNSkkFL+UKRE02Co1LgasJGysWsy0UnaZinVyrpGAOx1Rim2efeliPe3hma1Zvy6XT8W4OJwgFxdNy9LwDMKQILMNgcMBMOAACyO0RO8USiAK930LWU-3uiiB9yaKXemkQjW01V+txS-GKqUe7XBnW67hIfW8cJGjER7E4Q0xYgkpwS5zxVMJKWJ-FJ5Mp1LKFn4Pz+DSaLTaYIh3Oh-UGPEg+nQqNgaPWCJCpAF4pikpxMoQKWZ+gp+TSZLy1hSH3deXpNSZLNqVP1HVcPQ8fNhQ3Nor8ATtSMdQmOLo8uPdnu9BUUfoDQY1WrqOuarUcYMwRHC8Gihqh8Zh2biubdAFpAzSEL2OS247yYfodqgiKgO1K8yog7ptATFL9dFljMDrHkh1zW6OTWF1jPXaAkmY1YgKnktfxtC9dPd+Io9DvYzzPAekxBj13T3i7vKirKkqqpBsYVQ1HUFjFs0t6KK+kIjh+-JfvoBAQFMP5nH+CDaMo16KjYyjMvUNh5GWOT6MoLL8A8ygrk0dQIUabafmaEAWiinQ2gEWHSjhjJUYuj73Pcd63noQaNEYFb-Dk2S0cxe7IYm7GcYevFYjm2HyJeeQQb8tFkikVjGNoFGajUt73o+z61vYQA */
-  id: 'Presentation Tool',
-  context: {
-    url: null,
-    error: null,
-    visualEditingOverlaysEnabled: false,
-  },
-
-  on: {
-    'iframe reload': {
-      actions: assign({url: null}),
-      target: '.loading',
-    },
-  },
-
-  states: {
-    error: {
-      description:
-        'Failed to load, either because of a misconfiguration, a network error, or an unexpected error',
-      tags: ['error'],
-    },
-    loading: {
-      on: {
-        'iframe loaded': {
-          target: 'loaded',
-        },
-      },
-      tags: ['busy'],
-    },
-    loaded: {
-      on: {
-        'toggle visual editing overlays': {
-          actions: assign({
-            visualEditingOverlaysEnabled: ({event}) => event.enabled,
-          }),
-        },
-        'iframe refresh': {
-          target: '.refreshing',
-        },
-        'iframe reload': {
-          target: '.reloading',
-        },
-      },
-
-      states: {
-        idle: {},
-        refreshing: {
-          on: {
-            'iframe loaded': {
-              target: 'idle',
-            },
-          },
-          tags: ['busy'],
-        },
-        reloading: {
-          on: {
-            'iframe loaded': {
-              target: 'idle',
-            },
-          },
-          tags: ['busy'],
-        },
-      },
-      initial: 'idle',
-    },
-  },
-  initial: 'loading',
-})
-
-export type PresentationMachineRef = ActorRefFrom<typeof presentationMachine>