sanity-plugin-iframe-pane 2.6.1 → 3.0.0

package/src/Iframe.tsx

@@ -1,27 +1,57 @@
-/* eslint-disable react/jsx-no-bind */
 import {WarningOutlineIcon} from '@sanity/icons'
+import {createPreviewSecret} from '@sanity/preview-url-secret/create-secret'
+import {definePreviewUrl} from '@sanity/preview-url-secret/define-preview-url'
 import {Box, Card, Container, Flex, Spinner, Stack, Text, usePrefersReducedMotion} from '@sanity/ui'
 import {AnimatePresence, motion, MotionConfig} from 'framer-motion'
-import React, {forwardRef, useCallback, useDeferredValue, useEffect, useRef, useState} from 'react'
+import React, {
+  forwardRef,
+  memo,
+  Suspense,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useTransition,
+} from 'react'
 import {HTMLAttributeReferrerPolicy} from 'react'
-import {SanityDocument} from 'sanity'
+import {SanityDocument, useClient, useCurrentUser} from 'sanity'
+import {suspend} from 'suspend-react'
 
-import {UrlResolver} from './defineUrlResolver'
-import {GetUrlSecret} from './GetUrlSecret'
-import {UrlSecretId} from './isValidSecret'
 import {DEFAULT_SIZE, sizes, Toolbar} from './Toolbar'
-import {IframeSizeKey, MissingSlug, SetError, type UrlState} from './types'
+import {IframeSizeKey} from './types'
 
-export type {IframeSizeKey, UrlResolver, UrlSecretId}
+export type UrlResolver = (
+  document: SanityDocument | null,
+) => string | Error | undefined | Promise<string | Error | undefined>
 
-export type IframeOptions = {
-  urlSecretId?: UrlSecretId
-  url: UrlState | UrlResolver
+export type {IframeSizeKey}
+
+export interface IframeOptions {
+  url:
+    | string
+    | UrlResolver
+    | {
+        /**
+         * The URL origin of where the preview is hosted, for example `https://example.com`.
+         * If it's an embedded Studio then set it to `'same-origin'`.
+         */
+        origin: 'same-origin' | string
+        /**
+         * The route to redirect to after enabling Draft Mode.
+         * If you don't have enough data to build the URL, return an `Error` instance to show an error message.
+         * @example `return new Error('Missing slug')`
+         * To prolong the loading state, return `undefined`
+         */
+        preview: string | UrlResolver
+        /**
+         * The route that enables Draft Mode
+         * @example '/api/draft'
+         */
+        draftMode: string
+      }
   defaultSize?: IframeSizeKey
-  loader?: string | boolean
   showDisplayUrl?: boolean
   reload?: {
-    revision?: boolean | number
     button?: boolean
   }
   attributes?: Partial<{
@@ -36,44 +66,155 @@ const MotionFlex = motion(Flex)
 
 export interface IframeProps {
   document: {
-    displayed: SanityDocument
+    draft: SanityDocument | null
+    published: SanityDocument | null
   }
   options: IframeOptions
 }
 
 export function Iframe(props: IframeProps) {
-  const [error, setError] = useState<unknown>(null)
-  if (error) {
-    throw error
-  }
+  const {
+    document: {published, draft = published},
+    options,
+  } = props
+  const {defaultSize = DEFAULT_SIZE, reload, attributes, showDisplayUrl = true} = options
+
+  const urlRef = useRef(options.url)
+  const [draftSnapshot, setDraftSnapshot] = useState(() => draft)
+  useEffect(() => {
+    urlRef.current = options.url
+  }, [options.url])
+  useEffect(() => {
+    if (JSON.stringify(draft) !== JSON.stringify(draftSnapshot)) {
+      startTransition(() => setDraftSnapshot(draft))
+    }
+  }, [draft, draftSnapshot])
+  const currentUser = useCurrentUser()
+  const client = useClient({apiVersion: '2023-10-16'})
+  const [expiresAt, setExpiresAt] = useState<number | undefined>()
+  const previewSecretRef = useRef<string | undefined>()
+  const [isResolvingUrl, startTransition] = useTransition()
+  const url = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    async (draft: SanityDocument | null) => {
+      if (typeof location === 'undefined') {
+        return undefined
+      }
+      const urlProp = urlRef.current
+      if (typeof urlProp === 'string') {
+        return new URL(urlProp, location.origin)
+      }
+      if (typeof urlProp === 'function') {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const url = await urlProp(draft)
+        return typeof url === 'string' ? new URL(url, location.origin) : url
+      }
+      if (typeof urlProp === 'object') {
+        const preview =
+          typeof urlProp.preview === 'function' ? await urlProp.preview(draft) : urlProp.preview
+        if (typeof preview !== 'string') {
+          return preview
+        }
+        if (!previewSecretRef.current) {
+          // eslint-disable-next-line @typescript-eslint/no-shadow
+          const {secret, expiresAt} = await createPreviewSecret(
+            client,
+            'sanity-plugin-iframe-pane',
+            location.href,
+            currentUser?.id,
+          )
+          previewSecretRef.current = secret
+          startTransition(() => setExpiresAt(expiresAt.getTime()))
+        }
 
-  const {document: sanityDocument, options} = props
+        const resolvePreviewUrl = definePreviewUrl({
+          origin: urlProp.origin === 'same-origin' ? location.origin : urlProp.origin,
+          preview,
+          draftMode: {
+            enable: urlProp.draftMode,
+          },
+        })
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const url = await resolvePreviewUrl({
+          client,
+          previewUrlSecret: previewSecretRef.current,
+          previewSearchParam: null,
+        })
+        return new URL(url, location.origin)
+      }
+      return undefined
+    },
+    [client, currentUser?.id],
+  )
+  useEffect(() => {
+    if (expiresAt) {
+      const timeout = setTimeout(
+        () => {
+          startTransition(() => setExpiresAt(undefined))
+          previewSecretRef.current = undefined
+        },
+        Math.max(0, expiresAt - Date.now()),
+      )
+      return () => clearTimeout(timeout)
+    }
+    return undefined
+  }, [expiresAt])
+
+  return (
+    <Suspense fallback={<Loading iframeSize="desktop" />}>
+      <IframeInner
+        draftSnapshot={draftSnapshot}
+        url={url}
+        isResolvingUrl={isResolvingUrl}
+        attributes={attributes}
+        defaultSize={defaultSize}
+        reload={reload}
+        showDisplayUrl={showDisplayUrl}
+        userId={currentUser?.id}
+      />
+    </Suspense>
+  )
+}
+
+export interface IframeInnerProps extends Omit<IframeOptions, 'url'> {
+  url: (draftSnapshot: SanityDocument | null) => Promise<URL | Error | undefined>
+  isResolvingUrl: boolean
+  draftSnapshot: SanityDocument | null
+  userId?: string
+  expiresAt?: number
+}
+const IframeInner = memo(function IframeInner(props: IframeInnerProps) {
   const {
-    url,
-    urlSecretId,
+    isResolvingUrl,
     defaultSize = DEFAULT_SIZE,
     reload,
-    loader = 'Loading…',
     attributes = {},
     showDisplayUrl = true,
-  } = options
+    draftSnapshot,
+    userId,
+    expiresAt,
+  } = props
   const [iframeSize, setIframeSize] = useState(sizes?.[defaultSize] ? defaultSize : DEFAULT_SIZE)
 
-  // Workaround documents that initially appears to be an empty new document but just hasen't loaded yet
-  const [workaroundEmptyDocument, setWorkaroundEmptyDocument] = useState(true)
-  useEffect(() => {
-    const timeout = setTimeout(() => setWorkaroundEmptyDocument(false), 1000)
-    return () => clearTimeout(timeout)
-  }, [])
-
   const prefersReducedMotion = usePrefersReducedMotion()
-  const [urlState, setUrlState] = useState<UrlState>(() => (typeof url === 'function' ? '' : url))
+
+  const url = suspend(
+    () => props.url(draftSnapshot),
+    [
+      // Cache based on a few specific conditions
+      'sanity-plugin-iframe-pane',
+      draftSnapshot,
+      userId,
+      expiresAt,
+      resolveUUID,
+    ],
+  )
 
   const [loading, setLoading] = useState(true)
-  const [reloading, setReloading] = useState(false)
+  const [_reloading, setReloading] = useState(false)
+  const reloading = _reloading || isResolvingUrl
 
   const iframe = useRef<HTMLIFrameElement>(null)
-  const {displayed} = sanityDocument
 
   const handleReload = useCallback(() => {
     if (!iframe?.current) {
@@ -87,78 +228,52 @@ export function Iframe(props: IframeProps) {
     setReloading(true)
   }, [])
 
-  const deferredRevision = useDeferredValue(displayed._rev)
-  const displayUrl = typeof urlState === 'string' ? urlState : ''
-
   return (
     <MotionConfig transition={prefersReducedMotion ? {duration: 0} : undefined}>
       <Flex direction="column" style={{height: `100%`}}>
         <Toolbar
-          displayUrl={displayUrl}
+          url={url}
           iframeSize={iframeSize}
           reloading={reloading}
           setIframeSize={setIframeSize}
-          showDisplayUrl={showDisplayUrl}
+          showUrl={showDisplayUrl}
           reloadButton={!!reload?.button}
           handleReload={handleReload}
         />
-        {urlState === MissingSlug && !workaroundEmptyDocument ? (
-          <MissingSlugScreen />
+        {url instanceof Error ? (
+          <ErrorCard error={url} />
         ) : (
           <Card tone="transparent" style={{height: `100%`}}>
             <Frame
               ref={iframe}
-              loader={loader}
               loading={loading}
               reloading={reloading}
               iframeSize={iframeSize}
               setReloading={setReloading}
               setLoading={setLoading}
-              displayUrl={displayUrl}
+              url={url}
               attributes={attributes}
             />
           </Card>
         )}
-        {typeof url === 'function' && (
-          <AsyncUrl
-            // We use the revision as a key, to force a re-render when the revision changes
-            // This allows us to respond to changed props (maybe the url function itself changes)
-            // But avoid calling async logic on every render accidentally
-            key={deferredRevision}
-            url={url}
-            displayed={displayed}
-            urlSecretId={urlSecretId}
-            setDisplayUrl={setUrlState}
-            setError={setError}
-          />
-        )}
-        {displayUrl && (reload?.revision || reload?.revision === 0) && (
-          <ReloadOnRevision
-            revision={reload.revision}
-            _rev={deferredRevision}
-            handleReload={handleReload}
-          />
-        )}
       </Flex>
     </MotionConfig>
   )
-}
+})
 
-interface FrameProps extends Required<Pick<IframeOptions, 'loader' | 'attributes'>> {
-  loader: string | boolean
+interface FrameProps extends Required<Pick<IframeOptions, 'attributes'>> {
   loading: boolean
   reloading: boolean
   setLoading: (loading: boolean) => void
   setReloading: (reloading: boolean) => void
   iframeSize: IframeSizeKey
-  displayUrl: string
+  url: URL | undefined
 }
 const Frame = forwardRef(function Frame(
   props: FrameProps,
   iframe: React.ForwardedRef<HTMLIFrameElement>,
 ) {
-  const {loader, loading, setLoading, iframeSize, attributes, reloading, displayUrl, setReloading} =
-    props
+  const {loading, setLoading, iframeSize, attributes, reloading, url, setReloading} = props
 
   function handleIframeLoad() {
     setLoading(false)
@@ -172,49 +287,39 @@ const Frame = forwardRef(function Frame(
   return (
     <Flex align="center" justify="center" style={{height: `100%`, position: `relative`}}>
       <AnimatePresence>
-        {loader && loading && (
-          <MotionFlex
-            initial="initial"
-            animate="animate"
-            exit="exit"
-            variants={spinnerVariants}
-            justify="center"
-            align="center"
-            style={{inset: `0`, position: `absolute`}}
-          >
-            <Flex
-              style={{...sizes[iframeSize]}}
+        {!url ||
+          (loading && (
+            <MotionFlex
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              variants={spinnerVariants}
               justify="center"
               align="center"
-              direction="column"
-              gap={4}
+              style={{inset: `0`, position: `absolute`}}
             >
-              <Spinner muted />
-              {loader && typeof loader === 'string' && (
-                <Text muted size={1}>
-                  {loader}
-                </Text>
-              )}
-            </Flex>
-          </MotionFlex>
-        )}
+              <Loading iframeSize={iframeSize} />
+            </MotionFlex>
+          ))}
       </AnimatePresence>
-      <motion.iframe
-        ref={iframe}
-        title="preview"
-        frameBorder="0"
-        style={{maxHeight: '100%'}}
-        src={displayUrl}
-        initial={['background', iframeSize]}
-        variants={iframeVariants}
-        animate={[
-          loader && loading ? 'background' : 'active',
-          reloading ? 'reloading' : 'idle',
-          iframeSize,
-        ]}
-        {...attributes}
-        onLoad={handleIframeLoad}
-      />
+      {url && (
+        <motion.iframe
+          ref={iframe}
+          title="preview"
+          frameBorder="0"
+          style={{maxHeight: '100%'}}
+          src={url.toString()}
+          initial={['background', iframeSize]}
+          variants={iframeVariants}
+          animate={[
+            loading ? 'background' : 'active',
+            reloading ? 'reloading' : 'idle',
+            iframeSize,
+          ]}
+          {...attributes}
+          onLoad={handleIframeLoad}
+        />
+      )}
     </Flex>
   )
 })
@@ -251,74 +356,18 @@ const iframeVariants = {
   },
 }
 
-interface ReloadOnRevisionProps {
-  _rev?: string
-  revision: number | boolean
-  handleReload: () => void
-}
-function ReloadOnRevision(props: ReloadOnRevisionProps) {
-  const {revision, handleReload, _rev} = props
-  const [initialRev] = useState(_rev)
-  // Reload on new revisions
-  // eslint-disable-next-line consistent-return
-  useEffect(() => {
-    if (_rev !== initialRev) {
-      const timeout = setTimeout(handleReload, Number(revision === true ? 300 : revision))
-      return () => clearTimeout(timeout)
-    }
-  }, [_rev, revision, handleReload, initialRev])
-
-  return null
-}
-
-interface AsyncUrlProps {
-  displayed: SanityDocument
-  url: UrlResolver
-  urlSecretId?: UrlSecretId
-  setDisplayUrl: (url: UrlState) => void
-  setError: SetError
-}
-function AsyncUrl(props: AsyncUrlProps) {
-  const {urlSecretId, setDisplayUrl, setError} = props
-  // Snapshot values we only care about when the revision changes, done by changing the `key` prop
-  const [displayed] = useState(props.displayed)
-  const [url] = useState(() => props.url)
-  const [urlSecret, setUrlSecret] = useState<null | string>(null)
-
-  // Set initial URL and refresh on new revisions
-  useEffect(() => {
-    if (urlSecretId && !urlSecret) return
-
-    const getUrl = async (signal: AbortSignal) => {
-      const resolveUrl = await url(displayed, urlSecret, abort.signal)
-
-      // Only update state if URL has changed
-      if (!signal.aborted && resolveUrl) {
-        setDisplayUrl(resolveUrl)
-      }
-    }
-
-    const abort = new AbortController()
-    getUrl(abort.signal).catch((error) => error.name !== 'AbortError' && setError(error))
-    // eslint-disable-next-line consistent-return
-    return () => abort.abort()
-  }, [displayed, setDisplayUrl, setError, url, urlSecret, urlSecretId])
-
-  if (urlSecretId) {
-    return (
-      <GetUrlSecret
-        urlSecretId={urlSecretId}
-        urlSecret={urlSecret}
-        setUrlSecret={setUrlSecret}
-        setError={setError}
-      />
-    )
-  }
-
-  return null
+function Loading({iframeSize}: {iframeSize: IframeSizeKey}) {
+  return (
+    <Flex style={{...sizes[iframeSize]}} justify="center" align="center" direction="column" gap={4}>
+      <Spinner muted />
+      <Text muted size={1}>
+        Loading…
+      </Text>
+    </Flex>
+  )
 }
 
-export function MissingSlugScreen() {
+export function ErrorCard({error}: {error: Error}) {
   return (
     <Card height="fill">
       <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
@@ -332,10 +381,10 @@ export function MissingSlugScreen() {
               </Box>
               <Stack flex={1} marginLeft={3} space={3}>
                 <Text as="h1" size={1} weight="bold">
-                  Missing slug
+                  {error.name}
                 </Text>
                 <Text as="p" muted size={1}>
-                  Add a slug to see the preview.
+                  {error.message}
                 </Text>
               </Stack>
             </Flex>
@@ -345,3 +394,6 @@ export function MissingSlugScreen() {
     </Card>
   )
 }
+
+// https://github.com/pmndrs/suspend-react?tab=readme-ov-file#making-cache-keys-unique
+const resolveUUID = Symbol()

package/src/Toolbar.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-bind */
 import {CopyIcon, LaunchIcon, MobileDeviceIcon, RefreshIcon} from '@sanity/icons'
 import {Box, Button, Card, Flex, Text, Tooltip, useToast} from '@sanity/ui'
 import React, {useRef} from 'react'
@@ -21,24 +20,17 @@ export const sizes: SizeProps = {
 export const DEFAULT_SIZE = `desktop`
 
 export interface ToolbarProps {
-  displayUrl: string
+  url: URL | Error | undefined
   iframeSize: IframeSizeKey
   setIframeSize: (size: IframeSizeKey) => void
-  showDisplayUrl: boolean
+  showUrl: boolean
   reloading: boolean
   reloadButton: boolean
   handleReload: () => void
 }
 export function Toolbar(props: ToolbarProps) {
-  const {
-    displayUrl,
-    iframeSize,
-    setIframeSize,
-    reloading,
-    showDisplayUrl,
-    reloadButton,
-    handleReload,
-  } = props
+  const {url, iframeSize, setIframeSize, reloading, showUrl, reloadButton, handleReload} = props
+  const validUrl = url instanceof URL
 
   const input = useRef<HTMLTextAreaElement>(null)
   const {push: pushToast} = useToast()
@@ -49,7 +41,7 @@ export function Toolbar(props: ToolbarProps) {
       <textarea
         style={{position: `absolute`, pointerEvents: `none`, opacity: 0}}
         ref={input}
-        value={displayUrl}
+        value={validUrl ? url.toString() : ''}
         readOnly
         tabIndex={-1}
       />
@@ -66,7 +58,7 @@ export function Toolbar(props: ToolbarProps) {
               placement="bottom-start"
             >
               <Button
-                disabled={!displayUrl}
+                disabled={!validUrl}
                 fontSize={[1]}
                 padding={2}
                 mode={iframeSize === 'mobile' ? 'default' : 'ghost'}
@@ -75,9 +67,7 @@ export function Toolbar(props: ToolbarProps) {
               />
             </Tooltip>
           </Flex>
-          <Box flex={1}>
-            {showDisplayUrl && displayUrl && <DisplayUrl displayUrl={displayUrl} />}
-          </Box>
+          <Box flex={1}>{showUrl && validUrl && <DisplayUrl url={url} />}</Box>
           <Flex align="center" gap={1}>
             {reloadButton ? (
               <Tooltip
@@ -89,7 +79,7 @@ export function Toolbar(props: ToolbarProps) {
                 padding={2}
               >
                 <Button
-                  disabled={!displayUrl}
+                  disabled={!validUrl}
                   mode="bleed"
                   fontSize={[1]}
                   padding={2}
@@ -110,7 +100,7 @@ export function Toolbar(props: ToolbarProps) {
             >
               <Button
                 mode="bleed"
-                disabled={!displayUrl}
+                disabled={!validUrl}
                 fontSize={[1]}
                 icon={CopyIcon}
                 padding={[2]}
@@ -137,14 +127,14 @@ export function Toolbar(props: ToolbarProps) {
               placement="bottom-end"
             >
               <Button
-                disabled={!displayUrl}
+                disabled={!validUrl}
                 fontSize={[1]}
                 icon={LaunchIcon}
                 mode="ghost"
                 paddingY={[2]}
                 text="Open"
                 aria-label="Open URL in a new tab"
-                onClick={() => window.open(displayUrl)}
+                onClick={validUrl ? () => window.open(url.toString()) : undefined}
               />
             </Tooltip>
           </Flex>

package/src/index.ts

@@ -1,15 +1,8 @@
 export {
-  defineUrlResolver,
-  type DefineUrlResolverOptions,
-  type UrlResolver,
-  type UrlState,
-} from './defineUrlResolver'
-export {
-  Iframe as default,
   Iframe,
   type IframeOptions,
   type IframeProps,
   type IframeSizeKey,
-  type UrlSecretId,
+  type UrlResolver,
 } from './Iframe'
 export type {Size, SizeProps} from './types'

package/src/types.ts

@@ -1,7 +1,3 @@
-export const MissingSlug = Symbol('MissingSlug')
-
-export type UrlState = string | typeof MissingSlug
-
 export type IframeSizeKey = keyof SizeProps
 
 export type Size = 'desktop' | 'mobile'
@@ -13,5 +9,3 @@ export type SizeProps = {
     height: string | number
   }
 }
-
-export type SetError = (error: unknown) => void