@prismicio/next 0.1.2 → 0.1.3

package/dist/index.cjs

@@ -6,6 +6,8 @@ const prismic = require('@prismicio/client');
 const React = require('react');
 const react = require('@prismicio/react');
 const router = require('next/router');
+const Image = require('next/image');
+const prismicH = require('@prismicio/helpers');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,7 +30,9 @@ function _interopNamespace(e) {
 }
 
 const prismic__namespace = /*#__PURE__*/_interopNamespace(prismic);
-const React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+const Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
+const prismicH__namespace = /*#__PURE__*/_interopNamespace(prismicH);
 
 function setPreviewData({ req, res }) {
   const ref = req.query.token || req.cookies[prismic__namespace.cookie.preview];
@@ -38,65 +42,29 @@ function setPreviewData({ req, res }) {
 }
 
 function exitPreview(config) {
-  const { req } = config;
   config.res.clearPreviewData();
-  if (req.headers.referer) {
-    const url = new URL(req.headers.referer);
-    if (url.pathname !== "/api/exit-preview") {
-      config.res.redirect(req.headers.referer);
-      return;
-    }
-  }
-  config.res.redirect("/");
+  config.res.json({ success: true });
 }
 
 const readValue = (value) => {
   return value.replace(/%3B/g, ";");
 };
-const parse = (cookieString) => {
-  const result = {};
-  const cookies = cookieString.split("; ");
+const getCookie = (name, cookieJar) => {
+  const cookies = cookieJar.split("; ");
   for (const cookie of cookies) {
     const parts = cookie.split("=");
-    const value = parts.slice(1).join("=");
-    const name = readValue(parts[0]).replace(/%3D/g, "=");
-    result[name] = readValue(value);
-  }
-  return result;
-};
-const getAll = (cookieStore) => parse(cookieStore);
-const getCookie = (name, cookieStore) => getAll(cookieStore)[name];
-
-const extractFirstSubdomain = (host) => host.split(".")[0];
-const extractRepositoryNameFromObjectRef = (previewRef) => {
-  try {
-    const parsed = JSON.parse(decodeURIComponent(previewRef));
-    const keys = Object.keys(parsed);
-    const domainKey = keys.find((key) => /\.prismic\.io$/.test(key));
-    if (domainKey) {
-      return extractFirstSubdomain(domainKey);
-    } else {
-      return void 0;
+    const thisName = readValue(parts[0]).replace(/%3D/g, "=");
+    if (thisName === name) {
+      const value = parts.slice(1).join("=");
+      return readValue(value);
     }
-  } catch (e) {
-    return void 0;
   }
 };
-const extractRepositoryNameFromURLRef = (previewRef) => {
-  try {
-    const url = new URL(previewRef);
-    return extractFirstSubdomain(url.host);
-  } catch (e) {
-    return void 0;
-  }
-};
-const extractPreviewRefRepositoryName = (previewRef) => {
-  return extractRepositoryNameFromObjectRef(previewRef) || extractRepositoryNameFromURLRef(previewRef);
-};
 
-const isPrismicUpdateToolbarEvent = (event) => {
-  return "detail" in event && typeof event.detail.ref === "string";
+const getPreviewCookieRepositoryName = (previewCookie) => {
+  return (decodeURIComponent(previewCookie).match(/"(.+).prismic.io"/) || [])[1];
 };
+
 function PrismicPreview({
   repositoryName,
   children,
@@ -104,41 +72,57 @@ function PrismicPreview({
   exitPreviewURL = "/api/exit-preview"
 }) {
   const router$1 = router.useRouter();
-  React.useEffect(() => {
-    const previewRefRepositoryName = extractPreviewRefRepositoryName(getCookie("io.prismic.preview", globalThis.document.cookie));
-    const startPreviewIfLoadedFromSharedLink = async () => {
-      if (previewRefRepositoryName === repositoryName && !router$1.isPreview) {
-        await fetch(updatePreviewURL);
-        window.location.reload();
+  const resolvedUpdatePreviewURL = router$1.basePath + updatePreviewURL;
+  const resolvedExitPreviewURL = router$1.basePath + exitPreviewURL;
+  React__namespace.useEffect(() => {
+    const startPreviewMode = async () => {
+      const res = await globalThis.fetch(resolvedUpdatePreviewURL);
+      if (res.ok) {
+        globalThis.location.reload();
+      } else {
+        console.error(`[<PrismicPreview>] Failed to start or update Preview Mode using the "${resolvedUpdatePreviewURL}" API endpoint. Does it exist?`);
       }
     };
-    startPreviewIfLoadedFromSharedLink();
     const handlePrismicPreviewUpdate = async (event) => {
-      if (isPrismicUpdateToolbarEvent(event)) {
-        event.preventDefault();
-        await fetch(updatePreviewURL);
-        window.location.reload();
-      }
+      event.preventDefault();
+      await startPreviewMode();
     };
     const handlePrismicPreviewEnd = async (event) => {
       event.preventDefault();
-      await fetch(exitPreviewURL);
-      window.location.reload();
+      const res = await globalThis.fetch(resolvedExitPreviewURL);
+      if (res.ok) {
+        globalThis.location.reload();
+      } else {
+        console.error(`[<PrismicPreview>] Failed to exit Preview Mode using the "${resolvedExitPreviewURL}" API endpoint. Does it exist?`);
+      }
     };
-    if (window) {
+    if (router$1.isPreview) {
       window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
       window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
+    } else {
+      const prismicPreviewCookie = getCookie(prismic__namespace.cookie.preview, globalThis.document.cookie);
+      if (prismicPreviewCookie) {
+        const locationIsDescendantOfBasePath = window.location.href.startsWith(window.location.origin + router$1.basePath);
+        const prismicPreviewCookieRepositoryName = getPreviewCookieRepositoryName(prismicPreviewCookie);
+        if (locationIsDescendantOfBasePath && prismicPreviewCookieRepositoryName === repositoryName) {
+          startPreviewMode();
+        }
+      }
     }
     return () => {
-      if (window) {
-        window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
-        window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-      }
+      window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+      window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
     };
-  }, []);
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(react.PrismicToolbar, {
+  }, [
+    repositoryName,
+    resolvedExitPreviewURL,
+    resolvedUpdatePreviewURL,
+    router$1.isPreview,
+    router$1.basePath
+  ]);
+  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, children, /* @__PURE__ */ React__namespace.createElement(react.PrismicToolbar, {
     repositoryName
-  }), children);
+  }));
 }
 
 const isPrismicNextPreviewData = (previewData) => {
@@ -155,28 +139,104 @@ const enableAutoPreviews = (config) => {
   }
 };
 
-const isPrismicNextQuery = (query) => typeof query.documentId === "string" && typeof query.token === "string";
-async function redirectToPreviewURL({
-  req,
-  res,
-  client,
-  linkResolver,
-  defaultURL = "/"
-}) {
-  if (isPrismicNextQuery(req.query)) {
-    const { documentId, token } = req.query;
-    const previewUrl = await client.resolvePreviewURL({
-      linkResolver,
+const isPrismicNextQuery = (query) => {
+  return typeof query.documentId === "string" && typeof query.token === "string";
+};
+async function redirectToPreviewURL(config) {
+  const defaultURL = config.defaultURL || "/";
+  const basePath = config.basePath || "";
+  if (isPrismicNextQuery(config.req.query)) {
+    const previewUrl = await config.client.resolvePreviewURL({
+      linkResolver: config.linkResolver,
       defaultURL,
-      documentID: documentId,
-      previewToken: token
+      documentID: config.req.query.documentId,
+      previewToken: config.req.query.token
     });
-    res.redirect(previewUrl);
+    config.res.redirect(basePath + previewUrl);
     return;
   }
-  res.redirect(defaultURL);
+  config.res.redirect(basePath + defaultURL);
 }
 
+const camelCaseToParamCase = (input) => {
+  return input.replace(/[A-Z]/g, (match) => {
+    return `-${match.toLowerCase()}`;
+  });
+};
+const buildURL = (url, params) => {
+  const instance = new URL(url);
+  for (const camelCasedParamKey in params) {
+    const paramKey = camelCaseToParamCase(camelCasedParamKey);
+    const paramValue = params[camelCasedParamKey];
+    if (paramValue === void 0) {
+      instance.searchParams.delete(paramKey);
+    } else if (Array.isArray(paramValue)) {
+      instance.searchParams.set(paramKey, paramValue.join(","));
+    } else {
+      instance.searchParams.set(paramKey, `${paramValue}`);
+    }
+  }
+  const s = instance.searchParams.get("s");
+  if (s) {
+    instance.searchParams.delete("s");
+    instance.searchParams.append("s", s);
+  }
+  return instance.toString();
+};
+
+const __PRODUCTION__ = process.env.NODE_ENV === "production";
+
+var version = "0.1.3";
+
+const devMsg = (slug) => {
+  return `https://prismic.dev/msg/next/v${version}/${slug}`;
+};
+
+const imgixLoader = (args) => {
+  const url = new URL(args.src);
+  const params = {
+    fit: url.searchParams.get("fit") || "max",
+    w: args.width,
+    h: void 0
+  };
+  if (args.quality) {
+    params.q = args.quality;
+  }
+  return buildURL(args.src, params);
+};
+const PrismicNextImage = ({
+  field,
+  imgixParams = {},
+  alt,
+  fallbackAlt,
+  layout,
+  ...restProps
+}) => {
+  if (!__PRODUCTION__) {
+    if (typeof alt === "string" && alt !== "") {
+      console.warn(`[PrismicNextImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg("alt-must-be-an-empty-string")}`);
+    }
+    if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
+      console.warn(`[PrismicNextImage] The "fallbackAlt" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt="") but was provided a non-empty string. You can resolve this warning by removing the "fallbackAlt" prop or changing it to fallbackAlt="". For more details, see ${devMsg("alt-must-be-an-empty-string")}`);
+    }
+  }
+  if (prismicH__namespace.isFilled.imageThumbnail(field)) {
+    const src = buildURL(field.url, imgixParams);
+    return /* @__PURE__ */ React__namespace.createElement(Image__default["default"], {
+      src,
+      width: layout === "fill" ? void 0 : field.dimensions.width,
+      height: layout === "fill" ? void 0 : field.dimensions.height,
+      alt: alt != null ? alt : field.alt || fallbackAlt,
+      loader: imgixLoader,
+      layout,
+      ...restProps
+    });
+  } else {
+    return null;
+  }
+};
+
+exports.PrismicNextImage = PrismicNextImage;
 exports.PrismicPreview = PrismicPreview;
 exports.enableAutoPreviews = enableAutoPreviews;
 exports.exitPreview = exitPreview;

package/dist/index.d.ts

@@ -1,7 +1,10 @@
 import { NextApiRequest, NextApiResponse, PreviewData } from 'next';
+import * as React from 'react';
 import { Client, HttpRequestLike } from '@prismicio/client';
-import React from 'react';
 import { LinkResolverFunction } from '@prismicio/helpers';
+import { ImageProps } from 'next/image';
+import { ImgixURLParams } from 'imgix-url-builder';
+import * as prismicT from '@prismicio/types';
 
 /**
  * Configuration for `setPreviewData`.
@@ -32,42 +35,6 @@ declare type SetPreviewDataConfig = {
  */
 declare function setPreviewData({ req, res }: SetPreviewDataConfig): void;
 
-/**
- * Configuration for `enableAutoPreviews`.
- *
- * @typeParam TPreviewData - Next.js preview data object.
- */
-declare type EnableAutoPreviewsConfig<TPreviewData extends PreviewData = PreviewData> = {
-    /**
-     * Prismic client with which automatic previews will be enabled.
-     */
-    client: Client;
-} & ({
-    /**
-     * A Next.js context object (such as the context object from
-     * `getStaticProps` or `getServerSideProps`).
-     *
-     * Pass a `context` object when using `enableAutoPreviews` outside a
-     * Next.js API endpoint.
-     */
-    previewData?: TPreviewData;
-} | {
-    /**
-     * A Next.js API endpoint request object.
-     *
-     * Pass a `req` object when using `enableAutoPreviews` in a Next.js API endpoint.
-     */
-    req?: HttpRequestLike;
-});
-/**
- * Configures a Prismic client to automatically query draft content during a
- * preview session. It either takes in a Next.js `getStaticProps` context object
- * or a Next.js API endpoint request object.
- *
- * @param config - Configuration for the function.
- */
-declare const enableAutoPreviews: <TPreviewData extends PreviewData>(config: EnableAutoPreviewsConfig<TPreviewData>) => void;
-
 /**
  * Configuration for `exitPreview`.
  */
@@ -79,9 +46,7 @@ declare type ExitPreviewConfig = {
      * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
      */
     req: {
-        headers: {
-            referer?: NextApiRequest["headers"]["referer"];
-        };
+        headers: NextApiRequest["headers"];
     };
     /**
      * The `res` object from a Next.js API route. This is given as a parameter to
@@ -91,14 +56,15 @@ declare type ExitPreviewConfig = {
      */
     res: {
         clearPreviewData: NextApiResponse["clearPreviewData"];
-        redirect: NextApiResponse["redirect"];
+        json: NextApiResponse["json"];
     };
+    /**
+     * @deprecated - This property is no longer used. It can be deleted safely.
+     */
+    exitPreviewURL?: string;
 };
 /**
  * Exits Next.js's Preview Mode from within a Next.js API route.
- *
- * If the user was sent to the endpoint from a page, the user will be redirected
- * back to that page after exiting Preview Mode.
  */
 declare function exitPreview(config: ExitPreviewConfig): void;
 
@@ -114,13 +80,23 @@ declare type PrismicPreviewProps = {
     /**
      * The URL of your app's Prismic preview endpoint (default: `/api/preview`).
      * This URL will be fetched on preview update events.
+     *
+     * **Note**: If your `next.config.js` file contains a `basePath`, it is
+     * automatically included.
      */
     updatePreviewURL?: string;
     /**
      * The URL of your app's exit preview endpoint (default: `/api/exit-preview`).
      * This URL will be fetched on preview exit events.
+     *
+     * **Note**: If your `next.config.js` file contains a `basePath`, it is
+     * automatically included.
      */
     exitPreviewURL?: string;
+    /**
+     * Children to render adjacent to the Prismic Toolbar. The Prismic Toolbar
+     * will be rendered last.
+     */
     children?: React.ReactNode;
 };
 /**
@@ -135,34 +111,45 @@ declare type PrismicPreviewProps = {
 declare function PrismicPreview({ repositoryName, children, updatePreviewURL, exitPreviewURL, }: PrismicPreviewProps): JSX.Element;
 
 /**
- * Redirects a user to the URL of a previewed Prismic document from within a
- * Next.js API route.
- */
-declare function redirectToPreviewURL<TLinkResolverFunction extends LinkResolverFunction<any>>({ req, res, client, linkResolver, defaultURL, }: PreviewConfig<TLinkResolverFunction>): Promise<void>;
-
-/**
- * Configuration for creating a Prismic client with automatic preview support in
- * Next.js apps.
+ * Configuration for `enableAutoPreviews`.
+ *
+ * @typeParam TPreviewData - Next.js preview data object.
  */
-declare type CreateClientConfig = {
+declare type EnableAutoPreviewsConfig<TPreviewData extends PreviewData = PreviewData> = {
     /**
-     * Preview data coming from Next.js context object. This context object comes
-     * from `getStaticProps` or `getServerSideProps`.
+     * Prismic client with which automatic previews will be enabled.
+     */
+    client: Client;
+} & ({
+    /**
+     * A Next.js context object (such as the context object from
+     * `getStaticProps` or `getServerSideProps`).
      *
-     * Pass `previewData` when using outside a Next.js API endpoint.
+     * Pass a `context` object when using `enableAutoPreviews` outside a
+     * Next.js API endpoint.
      */
-    previewData?: PreviewData;
+    previewData?: TPreviewData;
+} | {
     /**
      * A Next.js API endpoint request object.
      *
-     * Pass a `req` object when using in a Next.js API endpoint.
+     * Pass a `req` object when using `enableAutoPreviews` in a Next.js API endpoint.
      */
-    req?: NextApiRequest;
-};
+    req?: HttpRequestLike;
+});
+/**
+ * Configures a Prismic client to automatically query draft content during a
+ * preview session. It either takes in a Next.js `getStaticProps` context object
+ * or a Next.js API endpoint request object.
+ *
+ * @param config - Configuration for the function.
+ */
+declare const enableAutoPreviews: <TPreviewData extends PreviewData>(config: EnableAutoPreviewsConfig<TPreviewData>) => void;
+
 /**
  * Preview config for enabling previews with redirectToPreviewURL
  */
-declare type PreviewConfig<TLinkResolverFunction extends LinkResolverFunction<any> = LinkResolverFunction> = {
+declare type RedirectToPreviewURLConfig<TLinkResolverFunction extends LinkResolverFunction<any> = LinkResolverFunction> = {
     /**
      * The `req` object from a Next.js API route. This is given as a parameter to
      * the API route.
@@ -193,8 +180,90 @@ declare type PreviewConfig<TLinkResolverFunction extends LinkResolverFunction<an
     linkResolver?: TLinkResolverFunction;
     /**
      * The default redirect URL if a URL cannot be determined for the previewed document.
+     *
+     * **Note**: If you `next.config.js` file contains a `basePath`, the
+     * `defaultURL` option must _not_ include it. Instead, provide the `basePath`
+     * property using the `basePath` option.
      */
     defaultURL?: string;
+    /**
+     * The `basePath` for the Next.js app as it is defined in `next.config.js`.
+     * This option can be omitted if the app does not have a `basePath`.
+     *
+     * @remarks
+     * The API route is unable to detect the app's `basePath` automatically. It
+     * must be provided to `redirectToPreviewURL()` manually.
+     */
+    basePath?: string;
+};
+/**
+ * Redirects a user to the URL of a previewed Prismic document from within a
+ * Next.js API route.
+ */
+declare function redirectToPreviewURL<TLinkResolverFunction extends LinkResolverFunction<any>>(config: RedirectToPreviewURLConfig<TLinkResolverFunction>): Promise<void>;
+
+declare type PrismicNextImageProps = Omit<ImageProps, "src" | "alt" | "width" | "height"> & {
+    /**
+     * The Prismic Image field or thumbnail to render.
+     */
+    field: prismicT.ImageFieldImage | null | undefined;
+    /**
+     * An object of Imgix URL API parameters to transform the image.
+     *
+     * @see https://docs.imgix.com/apis/rendering
+     */
+    imgixParams?: ImgixURLParams;
+    /**
+     * Declare an image as decorative by providing `alt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    alt?: "";
+    /**
+     * Declare an image as decorative only if the Image field does not have
+     * alternative text by providing `fallbackAlt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    fallbackAlt?: "";
+};
+/**
+ * React component that renders an image from a Prismic Image field or one of
+ * its thumbnails using `next/image`. It will automatically set the `alt`
+ * attribute using the Image field's `alt` property.
+ *
+ * It uses an Imgix URL-based loader by default. A custom loader can be provided
+ * with the `loader` prop. If you would like to use the Next.js Image
+ * Optimization API instead, set `loader={undefined}`.
+ *
+ * @param props - Props for the component.
+ *
+ * @returns A responsive image component using `next/image` for the given Image field.
+ *
+ * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image
+ */
+declare const PrismicNextImage: ({ field, imgixParams, alt, fallbackAlt, layout, ...restProps }: PrismicNextImageProps) => JSX.Element | null;
+
+/**
+ * Configuration for creating a Prismic client with automatic preview support in
+ * Next.js apps.
+ */
+declare type CreateClientConfig = {
+    /**
+     * Preview data coming from Next.js context object. This context object comes
+     * from `getStaticProps` or `getServerSideProps`.
+     *
+     * Pass `previewData` when using outside a Next.js API endpoint.
+     */
+    previewData?: PreviewData;
+    /**
+     * A Next.js API endpoint request object.
+     *
+     * Pass a `req` object when using in a Next.js API endpoint.
+     */
+    req?: NextApiRequest;
 };
 
-export { CreateClientConfig, EnableAutoPreviewsConfig, ExitPreviewConfig as ExitPreviewParams, PreviewConfig, PrismicPreview, PrismicPreviewProps, SetPreviewDataConfig, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };
+export { CreateClientConfig, EnableAutoPreviewsConfig, ExitPreviewConfig, PrismicNextImage, PrismicNextImageProps, PrismicPreview, PrismicPreviewProps, RedirectToPreviewURLConfig, SetPreviewDataConfig, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };