sanity-plugin-iframe-pane 2.6.1 → 3.0.0

package/lib/index.js

@@ -1,84 +1,22 @@
-import { patchUrlSecret, getExpiresAt, MissingSlug } from './_chunks/utils-j2CLEOFh.js';
-export { defineUrlResolver } from './_chunks/utils-j2CLEOFh.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { MobileDeviceIcon, RefreshIcon, CopyIcon, LaunchIcon, WarningOutlineIcon } from '@sanity/icons';
-import { Text, useToast, Card, Flex, Tooltip, Button, Box, Spinner, usePrefersReducedMotion, Container, Stack } from '@sanity/ui';
-import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
-import { useState, useEffect, useMemo, useRef, forwardRef, useCallback, useDeferredValue } from 'react';
-import { useClient } from 'sanity';
-import { apiVersion, fetchSecretQuery, tag } from './_chunks/is-valid-secret-zi24WaHG.js';
+import { createPreviewSecret } from '@sanity/preview-url-secret/create-secret';
+import { definePreviewUrl } from '@sanity/preview-url-secret/define-preview-url';
+import { Text, useToast, Card, Flex, Tooltip, Button, Box, usePrefersReducedMotion, Spinner, Container, Stack } from '@sanity/ui';
+import { motion, MotionConfig, AnimatePresence } from 'framer-motion';
+import { useMemo, useRef, memo, useState, useCallback, forwardRef, useEffect, useTransition, Suspense } from 'react';
+import { useCurrentUser, useClient } from 'sanity';
+import { suspend } from 'suspend-react';
 import { useCopyToClipboard } from 'usehooks-ts';
-function GetUrlSecret(props) {
-  const {
-    urlSecretId,
-    setUrlSecret,
-    urlSecret,
-    setError
-  } = props;
-  const client = useClient({
-    apiVersion
-  });
-  const [secretExpiresAt, setSecretExpiresAt] = useState(null);
-  if (!urlSecretId.includes(".")) {
-    throw new TypeError("`urlSecretId` must have a dot prefix, `".concat(urlSecretId, "` is not secure, add a prefix, for example `preview.").concat(urlSecretId, "` "));
-  }
-  useEffect(() => {
-    if (urlSecret) return;
-    async function getSecret(signal) {
-      const data = await client.fetch(fetchSecretQuery, {
-        id: urlSecretId
-      }, {
-        signal,
-        tag
-      });
-      if (signal.aborted) return;
-      if (!(data == null ? void 0 : data.secret) || !(data == null ? void 0 : data._updatedAt)) {
-        try {
-          const newUpdatedAt = /* @__PURE__ */new Date();
-          const newSecret = await patchUrlSecret(client, urlSecretId, signal);
-          if (signal.aborted) return;
-          setUrlSecret(newSecret);
-          setSecretExpiresAt(getExpiresAt(newUpdatedAt));
-        } catch (err) {
-          console.error("Failed to create a new preview secret. Ensure the `client` has a `token` specified that has `write` permissions.", err);
-        }
-        return;
-      }
-      if ((data == null ? void 0 : data.secret) !== urlSecret) {
-        setUrlSecret(data == null ? void 0 : data.secret);
-        setSecretExpiresAt(getExpiresAt(new Date(data == null ? void 0 : data._updatedAt)));
-      }
-    }
-    const abort = new AbortController();
-    getSecret(abort.signal).catch(error => error.name !== "AbortError" && setError(error));
-    return () => abort.abort();
-  }, [client, setError, setUrlSecret, urlSecret, urlSecretId]);
-  useEffect(() => {
-    if (!secretExpiresAt) return;
-    const timeout = setTimeout(() => {
-      setUrlSecret(null);
-      setSecretExpiresAt(null);
-    }, Math.max(0, secretExpiresAt.getTime() - /* @__PURE__ */new Date().getTime()));
-    return () => clearTimeout(timeout);
-  }, [secretExpiresAt, setUrlSecret]);
-  return null;
-}
-function DisplayUrl(_ref) {
-  let {
-    displayUrl
-  } = _ref;
+import { getRedirectTo } from '@sanity/preview-url-secret/get-redirect-to';
+function DisplayUrl(props) {
   const truncatedUrl = useMemo(() => {
-    const url = new URL(displayUrl);
-    if (url.searchParams.has("secret")) {
-      url.searchParams.delete("secret");
-      url.searchParams.append("secret", "***");
-    }
+    const url = getRedirectTo(props.url);
     return "".concat(url.origin === location.origin ? "" : url.origin).concat(url.pathname).concat(url.search);
-  }, [displayUrl]);
+  }, [props.url]);
   return /* @__PURE__ */jsx(Text, {
     size: 0,
     textOverflow: "ellipsis",
-    title: displayUrl,
     children: truncatedUrl
   });
 }
@@ -95,14 +33,15 @@ const sizes = {
 const DEFAULT_SIZE = "desktop";
 function Toolbar(props) {
   const {
-    displayUrl,
+    url,
     iframeSize,
     setIframeSize,
     reloading,
-    showDisplayUrl,
+    showUrl,
     reloadButton,
     handleReload
   } = props;
+  const validUrl = url instanceof URL;
   const input = useRef(null);
   const {
     push: pushToast
@@ -116,7 +55,7 @@ function Toolbar(props) {
         opacity: 0
       },
       ref: input,
-      value: displayUrl,
+      value: validUrl ? url.toString() : "",
       readOnly: true,
       tabIndex: -1
     }), /* @__PURE__ */jsx(Card, {
@@ -139,7 +78,7 @@ function Toolbar(props) {
             padding: 2,
             placement: "bottom-start",
             children: /* @__PURE__ */jsx(Button, {
-              disabled: !displayUrl,
+              disabled: !validUrl,
               fontSize: [1],
               padding: 2,
               mode: iframeSize === "mobile" ? "default" : "ghost",
@@ -149,8 +88,8 @@ function Toolbar(props) {
           })
         }), /* @__PURE__ */jsx(Box, {
           flex: 1,
-          children: showDisplayUrl && displayUrl && /* @__PURE__ */jsx(DisplayUrl, {
-            displayUrl
+          children: showUrl && validUrl && /* @__PURE__ */jsx(DisplayUrl, {
+            url
           })
         }), /* @__PURE__ */jsxs(Flex, {
           align: "center",
@@ -165,7 +104,7 @@ function Toolbar(props) {
             }),
             padding: 2,
             children: /* @__PURE__ */jsx(Button, {
-              disabled: !displayUrl,
+              disabled: !validUrl,
               mode: "bleed",
               fontSize: [1],
               padding: 2,
@@ -185,7 +124,7 @@ function Toolbar(props) {
             padding: 2,
             children: /* @__PURE__ */jsx(Button, {
               mode: "bleed",
-              disabled: !displayUrl,
+              disabled: !validUrl,
               fontSize: [1],
               icon: CopyIcon,
               padding: [2],
@@ -212,14 +151,14 @@ function Toolbar(props) {
             padding: 2,
             placement: "bottom-end",
             children: /* @__PURE__ */jsx(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()) : void 0
             })
           })]
         })]
@@ -229,38 +168,126 @@ function Toolbar(props) {
 }
 const MotionFlex = motion(Flex);
 function Iframe(props) {
-  var _a;
-  const [error, setError] = useState(null);
-  if (error) {
-    throw error;
-  }
   const {
-    document: sanityDocument,
+    document: {
+      published,
+      draft = published
+    },
     options
   } = props;
   const {
-    url,
-    urlSecretId,
     defaultSize = DEFAULT_SIZE,
     reload,
-    loader = "Loading\u2026",
-    attributes = {},
+    attributes,
     showDisplayUrl = true
   } = options;
-  const [iframeSize, setIframeSize] = useState(((_a = sizes) == null ? void 0 : _a[defaultSize]) ? defaultSize : DEFAULT_SIZE);
-  const [workaroundEmptyDocument, setWorkaroundEmptyDocument] = useState(true);
+  const urlRef = useRef(options.url);
+  const [draftSnapshot, setDraftSnapshot] = useState(() => draft);
   useEffect(() => {
-    const timeout = setTimeout(() => setWorkaroundEmptyDocument(false), 1e3);
-    return () => clearTimeout(timeout);
-  }, []);
+    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();
+  const previewSecretRef = useRef();
+  const [isResolvingUrl, startTransition] = useTransition();
+  const url = useCallback(
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  async draft2 => {
+    if (typeof location === "undefined") {
+      return void 0;
+    }
+    const urlProp = urlRef.current;
+    if (typeof urlProp === "string") {
+      return new URL(urlProp, location.origin);
+    }
+    if (typeof urlProp === "function") {
+      const url2 = await urlProp(draft2);
+      return typeof url2 === "string" ? new URL(url2, location.origin) : url2;
+    }
+    if (typeof urlProp === "object") {
+      const preview = typeof urlProp.preview === "function" ? await urlProp.preview(draft2) : urlProp.preview;
+      if (typeof preview !== "string") {
+        return preview;
+      }
+      if (!previewSecretRef.current) {
+        const {
+          secret,
+          expiresAt: expiresAt2
+        } = await createPreviewSecret(client, "sanity-plugin-iframe-pane", location.href, currentUser == null ? void 0 : currentUser.id);
+        previewSecretRef.current = secret;
+        startTransition(() => setExpiresAt(expiresAt2.getTime()));
+      }
+      const resolvePreviewUrl = definePreviewUrl({
+        origin: urlProp.origin === "same-origin" ? location.origin : urlProp.origin,
+        preview,
+        draftMode: {
+          enable: urlProp.draftMode
+        }
+      });
+      const url2 = await resolvePreviewUrl({
+        client,
+        previewUrlSecret: previewSecretRef.current,
+        previewSearchParam: null
+      });
+      return new URL(url2, location.origin);
+    }
+    return void 0;
+  }, [client, currentUser == null ? void 0 : currentUser.id]);
+  useEffect(() => {
+    if (expiresAt) {
+      const timeout = setTimeout(() => {
+        startTransition(() => setExpiresAt(void 0));
+        previewSecretRef.current = void 0;
+      }, Math.max(0, expiresAt - Date.now()));
+      return () => clearTimeout(timeout);
+    }
+    return void 0;
+  }, [expiresAt]);
+  return /* @__PURE__ */jsx(Suspense, {
+    fallback: /* @__PURE__ */jsx(Loading, {
+      iframeSize: "desktop"
+    }),
+    children: /* @__PURE__ */jsx(IframeInner, {
+      draftSnapshot,
+      url,
+      isResolvingUrl,
+      attributes,
+      defaultSize,
+      reload,
+      showDisplayUrl,
+      userId: currentUser == null ? void 0 : currentUser.id
+    })
+  });
+}
+const IframeInner = memo(function IframeInner2(props) {
+  var _a;
+  const {
+    isResolvingUrl,
+    defaultSize = DEFAULT_SIZE,
+    reload,
+    attributes = {},
+    showDisplayUrl = true,
+    draftSnapshot,
+    userId,
+    expiresAt
+  } = props;
+  const [iframeSize, setIframeSize] = useState(((_a = sizes) == null ? void 0 : _a[defaultSize]) ? defaultSize : DEFAULT_SIZE);
   const prefersReducedMotion = usePrefersReducedMotion();
-  const [urlState, setUrlState] = useState(() => 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(null);
-  const {
-    displayed
-  } = sanityDocument;
   const handleReload = useCallback(() => {
     if (!(iframe == null ? void 0 : iframe.current)) {
       return;
@@ -268,8 +295,6 @@ function Iframe(props) {
     iframe.current.src = iframe.current.src;
     setReloading(true);
   }, []);
-  const deferredRevision = useDeferredValue(displayed._rev);
-  const displayUrl = typeof urlState === "string" ? urlState : "";
   return /* @__PURE__ */jsx(MotionConfig, {
     transition: prefersReducedMotion ? {
       duration: 0
@@ -280,52 +305,42 @@ function Iframe(props) {
         height: "100%"
       },
       children: [/* @__PURE__ */jsx(Toolbar, {
-        displayUrl,
+        url,
         iframeSize,
         reloading,
         setIframeSize,
-        showDisplayUrl,
+        showUrl: showDisplayUrl,
         reloadButton: !!(reload == null ? void 0 : reload.button),
         handleReload
-      }), urlState === MissingSlug && !workaroundEmptyDocument ? /* @__PURE__ */jsx(MissingSlugScreen, {}) : /* @__PURE__ */jsx(Card, {
+      }), url instanceof Error ? /* @__PURE__ */jsx(ErrorCard, {
+        error: url
+      }) : /* @__PURE__ */jsx(Card, {
         tone: "transparent",
         style: {
           height: "100%"
         },
         children: /* @__PURE__ */jsx(Frame, {
           ref: iframe,
-          loader,
           loading,
           reloading,
           iframeSize,
           setReloading,
           setLoading,
-          displayUrl,
+          url,
           attributes
         })
-      }), typeof url === "function" && /* @__PURE__ */jsx(AsyncUrl, {
-        url,
-        displayed,
-        urlSecretId,
-        setDisplayUrl: setUrlState,
-        setError
-      }, deferredRevision), displayUrl && ((reload == null ? void 0 : reload.revision) || (reload == null ? void 0 : reload.revision) === 0) && /* @__PURE__ */jsx(ReloadOnRevision, {
-        revision: reload.revision,
-        _rev: deferredRevision,
-        handleReload
       })]
     })
   });
-}
+});
 const Frame = forwardRef(function Frame2(props, iframe) {
   const {
-    loader,
     loading,
     setLoading,
     iframeSize,
     attributes,
     reloading,
-    displayUrl,
+    url,
     setReloading
   } = props;
   function handleIframeLoad() {
@@ -343,7 +358,7 @@ const Frame = forwardRef(function Frame2(props, iframe) {
       position: "relative"
     },
     children: [/* @__PURE__ */jsx(AnimatePresence, {
-      children: loader && loading && /* @__PURE__ */jsx(MotionFlex, {
+      children: !url || loading && /* @__PURE__ */jsx(MotionFlex, {
         initial: "initial",
         animate: "animate",
         exit: "exit",
@@ -354,34 +369,21 @@ const Frame = forwardRef(function Frame2(props, iframe) {
           inset: "0",
           position: "absolute"
         },
-        children: /* @__PURE__ */jsxs(Flex, {
-          style: {
-            ...sizes[iframeSize]
-          },
-          justify: "center",
-          align: "center",
-          direction: "column",
-          gap: 4,
-          children: [/* @__PURE__ */jsx(Spinner, {
-            muted: true
-          }), loader && typeof loader === "string" && /* @__PURE__ */jsx(Text, {
-            muted: true,
-            size: 1,
-            children: loader
-          })]
+        children: /* @__PURE__ */jsx(Loading, {
+          iframeSize
         })
       })
-    }), /* @__PURE__ */jsx(motion.iframe, {
+    }), url && /* @__PURE__ */jsx(motion.iframe, {
       ref: iframe,
       title: "preview",
       frameBorder: "0",
       style: {
         maxHeight: "100%"
       },
-      src: displayUrl,
+      src: url.toString(),
       initial: ["background", iframeSize],
       variants: iframeVariants,
-      animate: [loader && loading ? "background" : "active", reloading ? "reloading" : "idle", iframeSize],
+      animate: [loading ? "background" : "active", reloading ? "reloading" : "idle", iframeSize],
       ...attributes,
       onLoad: handleIframeLoad
     })]
@@ -423,53 +425,31 @@ const iframeVariants = {
     scale: 1
   }
 };
-function ReloadOnRevision(props) {
-  const {
-    revision,
-    handleReload,
-    _rev
-  } = props;
-  const [initialRev] = useState(_rev);
-  useEffect(() => {
-    if (_rev !== initialRev) {
-      const timeout = setTimeout(handleReload, Number(revision === true ? 300 : revision));
-      return () => clearTimeout(timeout);
-    }
-  }, [_rev, revision, handleReload, initialRev]);
-  return null;
-}
-function AsyncUrl(props) {
-  const {
-    urlSecretId,
-    setDisplayUrl,
-    setError
-  } = props;
-  const [displayed] = useState(props.displayed);
-  const [url] = useState(() => props.url);
-  const [urlSecret, setUrlSecret] = useState(null);
-  useEffect(() => {
-    if (urlSecretId && !urlSecret) return;
-    const getUrl = async signal => {
-      const resolveUrl = await url(displayed, urlSecret, abort.signal);
-      if (!signal.aborted && resolveUrl) {
-        setDisplayUrl(resolveUrl);
-      }
-    };
-    const abort = new AbortController();
-    getUrl(abort.signal).catch(error => error.name !== "AbortError" && setError(error));
-    return () => abort.abort();
-  }, [displayed, setDisplayUrl, setError, url, urlSecret, urlSecretId]);
-  if (urlSecretId) {
-    return /* @__PURE__ */jsx(GetUrlSecret, {
-      urlSecretId,
-      urlSecret,
-      setUrlSecret,
-      setError
-    });
-  }
-  return null;
+function Loading(_ref) {
+  let {
+    iframeSize
+  } = _ref;
+  return /* @__PURE__ */jsxs(Flex, {
+    style: {
+      ...sizes[iframeSize]
+    },
+    justify: "center",
+    align: "center",
+    direction: "column",
+    gap: 4,
+    children: [/* @__PURE__ */jsx(Spinner, {
+      muted: true
+    }), /* @__PURE__ */jsx(Text, {
+      muted: true,
+      size: 1,
+      children: "Loading\u2026"
+    })]
+  });
 }
-function MissingSlugScreen() {
+function ErrorCard(_ref2) {
+  let {
+    error
+  } = _ref2;
   return /* @__PURE__ */jsx(Card, {
     height: "fill",
     children: /* @__PURE__ */jsx(Flex, {
@@ -499,12 +479,12 @@ function MissingSlugScreen() {
                 as: "h1",
                 size: 1,
                 weight: "bold",
-                children: "Missing slug"
+                children: error.name
               }), /* @__PURE__ */jsx(Text, {
                 as: "p",
                 muted: true,
                 size: 1,
-                children: "Add a slug to see the preview."
+                children: error.message
               })]
             })]
           })
@@ -513,5 +493,6 @@ function MissingSlugScreen() {
     })
   });
 }
-export { Iframe, Iframe as default };
+const resolveUUID = Symbol();
+export { Iframe };
 //# sourceMappingURL=index.js.map