sanity-plugin-iframe-pane 2.6.1 → 2.6.2-canary.0

package/README.md

@@ -87,21 +87,24 @@ url: (doc) => resolveProductionUrl(doc),
 // OR a string
 url: `https://sanity.io`,
 
+// OR a configuration for usage with `@sanity/preview-url-secret` and Next.js Draft Mode
+url: {
+  origin: 'https://sanity.io' // or 'same-origin' if the app and studio are on the same origin
+  preview: (document) => document?.slug?.current ? `/posts/${document.slug.current}` : new Error('Missing slug'),
+  draftMode: '/api/draft' // the route you enable draft mode, see: https://github.com/sanity-io/visual-editing/tree/main/packages/preview-url-secret#sanitypreview-url-secret
+},
+
 // Optional: Display the Url in the pane
 showDisplayUrl: true // boolean. default `true`.
 
 // Optional: Set the default size
 defaultSize: `mobile`, // default `desktop`
 
-// Optional: Add a reload button, or reload on new document revisions
+// Optional: Add a reload button
 reload: {
   button: true, // default `undefined`
-  revision: true, // boolean | number. default `undefined`. If a number is provided, add a delay (in ms) before the automatic reload on document revision. If `true` then a curated delay is used. Use `0` to have zero delay.`
 },
 
-// Optional: Display a spinner while the iframe is loading
-loader: true // boolean | string. default `'Loading…'`. If a string is provided, it will be display below the spinner (e.g. Loading…)
-
 // Optional: Pass attributes to the underlying `iframe` element:
 // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
 attributes: {

package/lib/index.cjs

@@ -3,86 +3,25 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var utils = require('./_chunks/utils-HbzA_NjI.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@sanity/icons');
+var createSecret = require('@sanity/preview-url-secret/create-secret');
+var definePreviewUrl = require('@sanity/preview-url-secret/define-preview-url');
 var ui = require('@sanity/ui');
 var framerMotion = require('framer-motion');
 var react = require('react');
 var sanity = require('sanity');
-var isValidSecret = require('./_chunks/is-valid-secret-VKMJU99B.cjs');
+var suspendReact = require('suspend-react');
 var usehooksTs = require('usehooks-ts');
-function GetUrlSecret(props) {
-  const {
-    urlSecretId,
-    setUrlSecret,
-    urlSecret,
-    setError
-  } = props;
-  const client = sanity.useClient({
-    apiVersion: isValidSecret.apiVersion
-  });
-  const [secretExpiresAt, setSecretExpiresAt] = react.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, "` "));
-  }
-  react.useEffect(() => {
-    if (urlSecret) return;
-    async function getSecret(signal) {
-      const data = await client.fetch(isValidSecret.fetchSecretQuery, {
-        id: urlSecretId
-      }, {
-        signal,
-        tag: isValidSecret.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 utils.patchUrlSecret(client, urlSecretId, signal);
-          if (signal.aborted) return;
-          setUrlSecret(newSecret);
-          setSecretExpiresAt(utils.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(utils.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]);
-  react.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;
+var getRedirectTo = require('@sanity/preview-url-secret/get-redirect-to');
+function DisplayUrl(props) {
   const truncatedUrl = react.useMemo(() => {
-    const url = new URL(displayUrl);
-    if (url.searchParams.has("secret")) {
-      url.searchParams.delete("secret");
-      url.searchParams.append("secret", "***");
-    }
+    const url = getRedirectTo.getRedirectTo(props.url);
     return "".concat(url.origin === location.origin ? "" : url.origin).concat(url.pathname).concat(url.search);
-  }, [displayUrl]);
+  }, [props.url]);
   return /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
     size: 0,
     textOverflow: "ellipsis",
-    title: displayUrl,
     children: truncatedUrl
   });
 }
@@ -99,14 +38,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 = react.useRef(null);
   const {
     push: pushToast
@@ -120,7 +60,7 @@ function Toolbar(props) {
         opacity: 0
       },
       ref: input,
-      value: displayUrl,
+      value: validUrl ? url.toString() : "",
       readOnly: true,
       tabIndex: -1
     }), /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
@@ -143,7 +83,7 @@ function Toolbar(props) {
             padding: 2,
             placement: "bottom-start",
             children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-              disabled: !displayUrl,
+              disabled: !validUrl,
               fontSize: [1],
               padding: 2,
               mode: iframeSize === "mobile" ? "default" : "ghost",
@@ -153,8 +93,8 @@ function Toolbar(props) {
           })
         }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
           flex: 1,
-          children: showDisplayUrl && displayUrl && /* @__PURE__ */jsxRuntime.jsx(DisplayUrl, {
-            displayUrl
+          children: showUrl && validUrl && /* @__PURE__ */jsxRuntime.jsx(DisplayUrl, {
+            url
           })
         }), /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
           align: "center",
@@ -169,7 +109,7 @@ function Toolbar(props) {
             }),
             padding: 2,
             children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-              disabled: !displayUrl,
+              disabled: !validUrl,
               mode: "bleed",
               fontSize: [1],
               padding: 2,
@@ -189,7 +129,7 @@ function Toolbar(props) {
             padding: 2,
             children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
               mode: "bleed",
-              disabled: !displayUrl,
+              disabled: !validUrl,
               fontSize: [1],
               icon: icons.CopyIcon,
               padding: [2],
@@ -216,14 +156,14 @@ function Toolbar(props) {
             padding: 2,
             placement: "bottom-end",
             children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-              disabled: !displayUrl,
+              disabled: !validUrl,
               fontSize: [1],
               icon: icons.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
             })
           })]
         })]
@@ -233,38 +173,126 @@ function Toolbar(props) {
 }
 const MotionFlex = framerMotion.motion(ui.Flex);
 function Iframe(props) {
-  var _a;
-  const [error, setError] = react.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] = react.useState(((_a = sizes) == null ? void 0 : _a[defaultSize]) ? defaultSize : DEFAULT_SIZE);
-  const [workaroundEmptyDocument, setWorkaroundEmptyDocument] = react.useState(true);
+  const urlRef = react.useRef(options.url);
+  const [draftSnapshot, setDraftSnapshot] = react.useState(() => draft);
   react.useEffect(() => {
-    const timeout = setTimeout(() => setWorkaroundEmptyDocument(false), 1e3);
-    return () => clearTimeout(timeout);
-  }, []);
+    urlRef.current = options.url;
+  }, [options.url]);
+  react.useEffect(() => {
+    if (JSON.stringify(draft) !== JSON.stringify(draftSnapshot)) {
+      startTransition(() => setDraftSnapshot(draft));
+    }
+  }, [draft, draftSnapshot]);
+  const currentUser = sanity.useCurrentUser();
+  const client = sanity.useClient({
+    apiVersion: "2023-10-16"
+  });
+  const [expiresAt, setExpiresAt] = react.useState();
+  const previewSecretRef = react.useRef();
+  const [isResolvingUrl, startTransition] = react.useTransition();
+  const url = react.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 createSecret.createPreviewSecret(client, "sanity-plugin-iframe-pane", location.href, currentUser == null ? void 0 : currentUser.id);
+        previewSecretRef.current = secret;
+        startTransition(() => setExpiresAt(expiresAt2.getTime()));
+      }
+      const resolvePreviewUrl = definePreviewUrl.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]);
+  react.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__ */jsxRuntime.jsx(react.Suspense, {
+    fallback: /* @__PURE__ */jsxRuntime.jsx(Loading, {
+      iframeSize: "desktop"
+    }),
+    children: /* @__PURE__ */jsxRuntime.jsx(IframeInner, {
+      draftSnapshot,
+      url,
+      isResolvingUrl,
+      attributes,
+      defaultSize,
+      reload,
+      showDisplayUrl,
+      userId: currentUser == null ? void 0 : currentUser.id
+    })
+  });
+}
+const IframeInner = react.memo(function IframeInner2(props) {
+  var _a;
+  const {
+    isResolvingUrl,
+    defaultSize = DEFAULT_SIZE,
+    reload,
+    attributes = {},
+    showDisplayUrl = true,
+    draftSnapshot,
+    userId,
+    expiresAt
+  } = props;
+  const [iframeSize, setIframeSize] = react.useState(((_a = sizes) == null ? void 0 : _a[defaultSize]) ? defaultSize : DEFAULT_SIZE);
   const prefersReducedMotion = ui.usePrefersReducedMotion();
-  const [urlState, setUrlState] = react.useState(() => typeof url === "function" ? "" : url);
+  const url = suspendReact.suspend(() => props.url(draftSnapshot), [
+  // Cache based on a few specific conditions
+  "sanity-plugin-iframe-pane", draftSnapshot, userId, expiresAt, resolveUUID]);
   const [loading, setLoading] = react.useState(true);
-  const [reloading, setReloading] = react.useState(false);
+  const [_reloading, setReloading] = react.useState(false);
+  const reloading = _reloading || isResolvingUrl;
   const iframe = react.useRef(null);
-  const {
-    displayed
-  } = sanityDocument;
   const handleReload = react.useCallback(() => {
     if (!(iframe == null ? void 0 : iframe.current)) {
       return;
@@ -272,8 +300,6 @@ function Iframe(props) {
     iframe.current.src = iframe.current.src;
     setReloading(true);
   }, []);
-  const deferredRevision = react.useDeferredValue(displayed._rev);
-  const displayUrl = typeof urlState === "string" ? urlState : "";
   return /* @__PURE__ */jsxRuntime.jsx(framerMotion.MotionConfig, {
     transition: prefersReducedMotion ? {
       duration: 0
@@ -284,52 +310,42 @@ function Iframe(props) {
         height: "100%"
       },
       children: [/* @__PURE__ */jsxRuntime.jsx(Toolbar, {
-        displayUrl,
+        url,
         iframeSize,
         reloading,
         setIframeSize,
-        showDisplayUrl,
+        showUrl: showDisplayUrl,
         reloadButton: !!(reload == null ? void 0 : reload.button),
         handleReload
-      }), urlState === utils.MissingSlug && !workaroundEmptyDocument ? /* @__PURE__ */jsxRuntime.jsx(MissingSlugScreen, {}) : /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+      }), url instanceof Error ? /* @__PURE__ */jsxRuntime.jsx(ErrorCard, {
+        error: url
+      }) : /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
         tone: "transparent",
         style: {
           height: "100%"
         },
         children: /* @__PURE__ */jsxRuntime.jsx(Frame, {
           ref: iframe,
-          loader,
           loading,
           reloading,
           iframeSize,
           setReloading,
           setLoading,
-          displayUrl,
+          url,
           attributes
         })
-      }), typeof url === "function" && /* @__PURE__ */jsxRuntime.jsx(AsyncUrl, {
-        url,
-        displayed,
-        urlSecretId,
-        setDisplayUrl: setUrlState,
-        setError
-      }, deferredRevision), displayUrl && ((reload == null ? void 0 : reload.revision) || (reload == null ? void 0 : reload.revision) === 0) && /* @__PURE__ */jsxRuntime.jsx(ReloadOnRevision, {
-        revision: reload.revision,
-        _rev: deferredRevision,
-        handleReload
       })]
     })
   });
-}
+});
 const Frame = react.forwardRef(function Frame2(props, iframe) {
   const {
-    loader,
     loading,
     setLoading,
     iframeSize,
     attributes,
     reloading,
-    displayUrl,
+    url,
     setReloading
   } = props;
   function handleIframeLoad() {
@@ -347,7 +363,7 @@ const Frame = react.forwardRef(function Frame2(props, iframe) {
       position: "relative"
     },
     children: [/* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
-      children: loader && loading && /* @__PURE__ */jsxRuntime.jsx(MotionFlex, {
+      children: !url || loading && /* @__PURE__ */jsxRuntime.jsx(MotionFlex, {
         initial: "initial",
         animate: "animate",
         exit: "exit",
@@ -358,34 +374,21 @@ const Frame = react.forwardRef(function Frame2(props, iframe) {
           inset: "0",
           position: "absolute"
         },
-        children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-          style: {
-            ...sizes[iframeSize]
-          },
-          justify: "center",
-          align: "center",
-          direction: "column",
-          gap: 4,
-          children: [/* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {
-            muted: true
-          }), loader && typeof loader === "string" && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-            muted: true,
-            size: 1,
-            children: loader
-          })]
+        children: /* @__PURE__ */jsxRuntime.jsx(Loading, {
+          iframeSize
         })
       })
-    }), /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.iframe, {
+    }), url && /* @__PURE__ */jsxRuntime.jsx(framerMotion.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
     })]
@@ -427,53 +430,31 @@ const iframeVariants = {
     scale: 1
   }
 };
-function ReloadOnRevision(props) {
-  const {
-    revision,
-    handleReload,
-    _rev
-  } = props;
-  const [initialRev] = react.useState(_rev);
-  react.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] = react.useState(props.displayed);
-  const [url] = react.useState(() => props.url);
-  const [urlSecret, setUrlSecret] = react.useState(null);
-  react.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__ */jsxRuntime.jsx(GetUrlSecret, {
-      urlSecretId,
-      urlSecret,
-      setUrlSecret,
-      setError
-    });
-  }
-  return null;
+function Loading(_ref) {
+  let {
+    iframeSize
+  } = _ref;
+  return /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+    style: {
+      ...sizes[iframeSize]
+    },
+    justify: "center",
+    align: "center",
+    direction: "column",
+    gap: 4,
+    children: [/* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {
+      muted: true
+    }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+      muted: true,
+      size: 1,
+      children: "Loading\u2026"
+    })]
+  });
 }
-function MissingSlugScreen() {
+function ErrorCard(_ref2) {
+  let {
+    error
+  } = _ref2;
   return /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
     height: "fill",
     children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
@@ -503,12 +484,12 @@ function MissingSlugScreen() {
                 as: "h1",
                 size: 1,
                 weight: "bold",
-                children: "Missing slug"
+                children: error.name
               }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
                 as: "p",
                 muted: true,
                 size: 1,
-                children: "Add a slug to see the preview."
+                children: error.message
               })]
             })]
           })
@@ -517,7 +498,6 @@ function MissingSlugScreen() {
     })
   });
 }
-exports.defineUrlResolver = utils.defineUrlResolver;
+const resolveUUID = Symbol();
 exports.Iframe = Iframe;
-exports.default = Iframe;
 //# sourceMappingURL=index.cjs.map

package/lib/index.cjs.js

@@ -1,6 +1,4 @@
 import cjs from './index.cjs';
 
-export const defineUrlResolver = cjs.defineUrlResolver;
 export const Iframe = cjs.Iframe;
 
-export default cjs.default;