@prismicio/next 0.2.0-alpha.0 → 0.2.0

package/README.md

@@ -10,7 +10,7 @@
 Helpers to integrate Prismic into Next.js apps.
 
 - 👁️  Easily set up Prismic Preview
-- _More features coming!_
+- 🖼️  Render optimized images using [`next/image`][next-image] and Prismic's built-in [Imgix][imgix] integration
 
 ## Install
 
@@ -57,6 +57,8 @@ For more clarity on this project and its structure you can also check out the de
 <!-- Links -->
 
 [prismic]: https://prismic.io
+[imgix]: https://imgix.com/
+[next-image]: https://nextjs.org/docs/basic-features/image-optimization
 
 <!-- TODO: Replace link with a more useful one if available -->
 

package/dist/PrismicNextImage.cjs

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Image = require("next/image");
+const imgixUrlBuilder = require("imgix-url-builder");
+const prismicH = require("@prismicio/helpers");
+const __PRODUCTION__ = require("./lib/__PRODUCTION__.cjs");
+const devMsg = require("./lib/devMsg.cjs");
+const imgixLoader = require("./imgixLoader.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const prismicH__namespace = /* @__PURE__ */ _interopNamespaceDefault(prismicH);
+const castInt = (input) => {
+  if (typeof input === "number" || typeof input === "undefined") {
+    return input;
+  } else {
+    const parsed = Number.parseInt(input);
+    if (Number.isNaN(parsed)) {
+      return void 0;
+    } else {
+      return parsed;
+    }
+  }
+};
+const PrismicNextImage = ({
+  field,
+  imgixParams = {},
+  alt,
+  fallbackAlt,
+  fill,
+  width,
+  height,
+  fallback = null,
+  ...restProps
+}) => {
+  if (!__PRODUCTION__.__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.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.devMsg("alt-must-be-an-empty-string")}`);
+    }
+  }
+  if (prismicH__namespace.isFilled.imageThumbnail(field)) {
+    const src = imgixUrlBuilder.buildURL(field.url, imgixParams);
+    const ar = field.dimensions.width / field.dimensions.height;
+    const castedWidth = castInt(width);
+    const castedHeight = castInt(height);
+    let resolvedWidth = castedWidth != null ? castedWidth : field.dimensions.width;
+    let resolvedHeight = castedHeight != null ? castedHeight : field.dimensions.width;
+    if (castedWidth != null && castedHeight == null) {
+      resolvedHeight = castedWidth / ar;
+    } else if (castedWidth == null && castedHeight != null) {
+      resolvedWidth = castedHeight * ar;
+    }
+    return jsxRuntime.jsx(Image, {
+      src,
+      width: fill ? void 0 : resolvedWidth,
+      height: fill ? void 0 : resolvedHeight,
+      alt: alt != null ? alt : field.alt || fallbackAlt,
+      fill,
+      loader: imgixLoader.imgixLoader,
+      ...restProps
+    });
+  } else {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: fallback
+    });
+  }
+};
+exports.PrismicNextImage = PrismicNextImage;
+//# sourceMappingURL=PrismicNextImage.cjs.map

package/dist/PrismicNextImage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismicNextImage.cjs","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["import Image, { ImageProps } from \"next/image\";\nimport { buildURL, ImgixURLParams } from \"imgix-url-builder\";\nimport * as prismicH from \"@prismicio/helpers\";\nimport * as prismicT from \"@prismicio/types\";\n\nimport { __PRODUCTION__ } from \"./lib/__PRODUCTION__\";\nimport { devMsg } from \"./lib/devMsg\";\n\nimport { imgixLoader } from \"./imgixLoader\";\n\nconst castInt = (input: string | number | undefined): number | undefined => {\n\tif (typeof input === \"number\" || typeof input === \"undefined\") {\n\t\treturn input;\n\t} else {\n\t\tconst parsed = Number.parseInt(input);\n\n\t\tif (Number.isNaN(parsed)) {\n\t\t\treturn undefined;\n\t\t} else {\n\t\t\treturn parsed;\n\t\t}\n\t}\n};\n\nexport type PrismicNextImageProps = Omit<ImageProps, \"src\" | \"alt\"> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismicT.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * @see https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: ImgixURLParams;\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n\n\t/**\n\t * Rendered when the field is empty. If a fallback is not given, `null` will\n\t * be rendered.\n\t */\n\tfallback?: React.ReactNode;\n};\n\n/**\n * React component that renders an image from a Prismic Image field or one of\n * its thumbnails using `next/image`. It will automatically set the `alt`\n * attribute using the Image field's `alt` property.\n *\n * It uses an Imgix URL-based loader by default. A custom loader can be provided\n * with the `loader` prop. If you would like to use the Next.js Image\n * Optimization API instead, set `loader={undefined}`.\n *\n * @param props - Props for the component.\n *\n * @returns A responsive image component using `next/image` for the given Image\n *   field.\n * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image\n */\nexport const PrismicNextImage = ({\n\tfield,\n\timgixParams = {},\n\talt,\n\tfallbackAlt,\n\tfill,\n\twidth,\n\theight,\n\tfallback = null,\n\t...restProps\n}: PrismicNextImageProps): JSX.Element => {\n\tif (!__PRODUCTION__) {\n\t\tif (typeof alt === \"string\" && alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[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(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (typeof fallbackAlt === \"string\" && fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[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(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\t}\n\n\tif (prismicH.isFilled.imageThumbnail(field)) {\n\t\tconst src = buildURL(field.url, imgixParams);\n\n\t\tconst ar = field.dimensions.width / field.dimensions.height;\n\n\t\tconst castedWidth = castInt(width);\n\t\tconst castedHeight = castInt(height);\n\n\t\tlet resolvedWidth = castedWidth ?? field.dimensions.width;\n\t\tlet resolvedHeight = castedHeight ?? field.dimensions.width;\n\n\t\tif (castedWidth != null && castedHeight == null) {\n\t\t\tresolvedHeight = castedWidth / ar;\n\t\t} else if (castedWidth == null && castedHeight != null) {\n\t\t\tresolvedWidth = castedHeight * ar;\n\t\t}\n\n\t\treturn (\n\t\t\t<Image\n\t\t\t\tsrc={src}\n\t\t\t\twidth={fill ? undefined : resolvedWidth}\n\t\t\t\theight={fill ? undefined : resolvedHeight}\n\t\t\t\t// A non-null assertion is required since we\n\t\t\t\t// can't statically know if an alt attribute is\n\t\t\t\t// available.\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\talt={(alt ?? (field.alt || fallbackAlt))!}\n\t\t\t\tfill={fill}\n\t\t\t\tloader={imgixLoader}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn <>{fallback}</>;\n\t}\n};\n"],"names":["castInt","input","parsed","Number","parseInt","isNaN","undefined","PrismicNextImage","field","imgixParams","alt","fallbackAlt","fill","width","height","fallback","restProps","__PRODUCTION__","console","warn","devMsg","prismicH","isFilled","imageThumbnail","src","buildURL","url","ar","dimensions","castedWidth","castedHeight","resolvedWidth","resolvedHeight","_jsx","Image","loader","imgixLoader","_Fragment","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,UAAWC,CAA0D,UAAA;AAC1E,MAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,aAAa;AACvDA,WAAAA;AAAAA,EAAAA,OACD;AACAC,UAAAA,SAASC,OAAOC,SAASH,KAAK;AAEhCE,QAAAA,OAAOE,MAAMH,MAAM,GAAG;AAClBI,aAAAA;AAAAA,IAAAA,OACD;AACCJ,aAAAA;AAAAA,IACP;AAAA,EACD;AACF;AAsDO,MAAMK,mBAAmB,CAAC;AAAA,EAChCC;AAAAA,EACAC,cAAc,CAAE;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,KACRC;AAAS,MAC4B;AACxC,MAAI,CAACC,eAAAA,gBAAgB;AACpB,QAAI,OAAOP,QAAQ,YAAYA,QAAQ,IAAI;AAC1CQ,cAAQC,KACkQ,yQAAAC,OACxQ,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAOT,gBAAgB,YAAYA,gBAAgB,IAAI;AAC1DO,cAAQC,KACkS,ySAAAC,OACxS,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAAA,EACD;AAED,MAAIC,oBAASC,SAASC,eAAef,KAAK,GAAG;AAC5C,UAAMgB,MAAMC,gBAAAA,SAASjB,MAAMkB,KAAKjB,WAAW;AAE3C,UAAMkB,KAAKnB,MAAMoB,WAAWf,QAAQL,MAAMoB,WAAWd;AAE/Ce,UAAAA,cAAc7B,QAAQa,KAAK;AAC3BiB,UAAAA,eAAe9B,QAAQc,MAAM;AAE/BiB,QAAAA,gBAAgBF,oCAAerB,MAAMoB,WAAWf;AAChDmB,QAAAA,iBAAiBF,sCAAgBtB,MAAMoB,WAAWf;AAElDgB,QAAAA,eAAe,QAAQC,gBAAgB,MAAM;AAChDE,uBAAiBH,cAAcF;AAAAA,IACrBE,WAAAA,eAAe,QAAQC,gBAAgB,MAAM;AACvDC,sBAAgBD,eAAeH;AAAAA,IAC/B;AAED,WACCM,WAAAA,IAACC,OAAK;AAAA,MACLV;AAAAA,MACAX,OAAOD,OAAON,SAAYyB;AAAAA,MAC1BjB,QAAQF,OAAON,SAAY0B;AAAAA,MAK3BtB,KAAMA,oBAAQF,MAAME,OAAOC;AAAAA,MAC3BC;AAAAA,MACAuB,QAAQC,YAAAA;AAAAA,MACJ,GAAApB;AAAAA,IAAAA,CACH;AAAA,EAAA,OAEG;AACN,WAAOiB,WAAAA,IAAAI,WAAAA,UAAA;AAAA,MAAAC,UAAGvB;AAAAA,IAAAA,CAAQ;AAAA,EAClB;AACF;;"}

package/dist/PrismicNextImage.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import { ImageProps } from "next/image";
+import { ImgixURLParams } from "imgix-url-builder";
+import * as prismicT from "@prismicio/types";
+export declare type PrismicNextImageProps = Omit<ImageProps, "src" | "alt"> & {
+    /**
+     * 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?: "";
+    /**
+     * Rendered when the field is empty. If a fallback is not given, `null` will
+     * be rendered.
+     */
+    fallback?: React.ReactNode;
+};
+/**
+ * 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
+ */
+export declare const PrismicNextImage: ({ field, imgixParams, alt, fallbackAlt, fill, width, height, fallback, ...restProps }: PrismicNextImageProps) => JSX.Element;

package/dist/PrismicNextImage.js

@@ -0,0 +1,69 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import Image from "next/image";
+import { buildURL } from "imgix-url-builder";
+import * as prismicH from "@prismicio/helpers";
+import { __PRODUCTION__ } from "./lib/__PRODUCTION__.js";
+import { devMsg } from "./lib/devMsg.js";
+import { imgixLoader } from "./imgixLoader.js";
+const castInt = (input) => {
+  if (typeof input === "number" || typeof input === "undefined") {
+    return input;
+  } else {
+    const parsed = Number.parseInt(input);
+    if (Number.isNaN(parsed)) {
+      return void 0;
+    } else {
+      return parsed;
+    }
+  }
+};
+const PrismicNextImage = ({
+  field,
+  imgixParams = {},
+  alt,
+  fallbackAlt,
+  fill,
+  width,
+  height,
+  fallback = null,
+  ...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.isFilled.imageThumbnail(field)) {
+    const src = buildURL(field.url, imgixParams);
+    const ar = field.dimensions.width / field.dimensions.height;
+    const castedWidth = castInt(width);
+    const castedHeight = castInt(height);
+    let resolvedWidth = castedWidth != null ? castedWidth : field.dimensions.width;
+    let resolvedHeight = castedHeight != null ? castedHeight : field.dimensions.width;
+    if (castedWidth != null && castedHeight == null) {
+      resolvedHeight = castedWidth / ar;
+    } else if (castedWidth == null && castedHeight != null) {
+      resolvedWidth = castedHeight * ar;
+    }
+    return jsx(Image, {
+      src,
+      width: fill ? void 0 : resolvedWidth,
+      height: fill ? void 0 : resolvedHeight,
+      alt: alt != null ? alt : field.alt || fallbackAlt,
+      fill,
+      loader: imgixLoader,
+      ...restProps
+    });
+  } else {
+    return jsx(Fragment, {
+      children: fallback
+    });
+  }
+};
+export {
+  PrismicNextImage
+};
+//# sourceMappingURL=PrismicNextImage.js.map

package/dist/PrismicNextImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismicNextImage.js","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["import Image, { ImageProps } from \"next/image\";\nimport { buildURL, ImgixURLParams } from \"imgix-url-builder\";\nimport * as prismicH from \"@prismicio/helpers\";\nimport * as prismicT from \"@prismicio/types\";\n\nimport { __PRODUCTION__ } from \"./lib/__PRODUCTION__\";\nimport { devMsg } from \"./lib/devMsg\";\n\nimport { imgixLoader } from \"./imgixLoader\";\n\nconst castInt = (input: string | number | undefined): number | undefined => {\n\tif (typeof input === \"number\" || typeof input === \"undefined\") {\n\t\treturn input;\n\t} else {\n\t\tconst parsed = Number.parseInt(input);\n\n\t\tif (Number.isNaN(parsed)) {\n\t\t\treturn undefined;\n\t\t} else {\n\t\t\treturn parsed;\n\t\t}\n\t}\n};\n\nexport type PrismicNextImageProps = Omit<ImageProps, \"src\" | \"alt\"> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismicT.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * @see https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: ImgixURLParams;\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n\n\t/**\n\t * Rendered when the field is empty. If a fallback is not given, `null` will\n\t * be rendered.\n\t */\n\tfallback?: React.ReactNode;\n};\n\n/**\n * React component that renders an image from a Prismic Image field or one of\n * its thumbnails using `next/image`. It will automatically set the `alt`\n * attribute using the Image field's `alt` property.\n *\n * It uses an Imgix URL-based loader by default. A custom loader can be provided\n * with the `loader` prop. If you would like to use the Next.js Image\n * Optimization API instead, set `loader={undefined}`.\n *\n * @param props - Props for the component.\n *\n * @returns A responsive image component using `next/image` for the given Image\n *   field.\n * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image\n */\nexport const PrismicNextImage = ({\n\tfield,\n\timgixParams = {},\n\talt,\n\tfallbackAlt,\n\tfill,\n\twidth,\n\theight,\n\tfallback = null,\n\t...restProps\n}: PrismicNextImageProps): JSX.Element => {\n\tif (!__PRODUCTION__) {\n\t\tif (typeof alt === \"string\" && alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[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(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (typeof fallbackAlt === \"string\" && fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[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(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\t}\n\n\tif (prismicH.isFilled.imageThumbnail(field)) {\n\t\tconst src = buildURL(field.url, imgixParams);\n\n\t\tconst ar = field.dimensions.width / field.dimensions.height;\n\n\t\tconst castedWidth = castInt(width);\n\t\tconst castedHeight = castInt(height);\n\n\t\tlet resolvedWidth = castedWidth ?? field.dimensions.width;\n\t\tlet resolvedHeight = castedHeight ?? field.dimensions.width;\n\n\t\tif (castedWidth != null && castedHeight == null) {\n\t\t\tresolvedHeight = castedWidth / ar;\n\t\t} else if (castedWidth == null && castedHeight != null) {\n\t\t\tresolvedWidth = castedHeight * ar;\n\t\t}\n\n\t\treturn (\n\t\t\t<Image\n\t\t\t\tsrc={src}\n\t\t\t\twidth={fill ? undefined : resolvedWidth}\n\t\t\t\theight={fill ? undefined : resolvedHeight}\n\t\t\t\t// A non-null assertion is required since we\n\t\t\t\t// can't statically know if an alt attribute is\n\t\t\t\t// available.\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\talt={(alt ?? (field.alt || fallbackAlt))!}\n\t\t\t\tfill={fill}\n\t\t\t\tloader={imgixLoader}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn <>{fallback}</>;\n\t}\n};\n"],"names":["castInt","input","parsed","Number","parseInt","isNaN","undefined","PrismicNextImage","field","imgixParams","alt","fallbackAlt","fill","width","height","fallback","restProps","__PRODUCTION__","console","warn","devMsg","prismicH","isFilled","imageThumbnail","src","buildURL","url","ar","dimensions","castedWidth","castedHeight","resolvedWidth","resolvedHeight","_jsx","Image","loader","imgixLoader","_Fragment","children"],"mappings":";;;;;;;AAUA,MAAMA,UAAWC,CAA0D,UAAA;AAC1E,MAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,aAAa;AACvDA,WAAAA;AAAAA,EAAAA,OACD;AACAC,UAAAA,SAASC,OAAOC,SAASH,KAAK;AAEhCE,QAAAA,OAAOE,MAAMH,MAAM,GAAG;AAClBI,aAAAA;AAAAA,IAAAA,OACD;AACCJ,aAAAA;AAAAA,IACP;AAAA,EACD;AACF;AAsDO,MAAMK,mBAAmB,CAAC;AAAA,EAChCC;AAAAA,EACAC,cAAc,CAAE;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,KACRC;AAAS,MAC4B;AACxC,MAAI,CAACC,gBAAgB;AACpB,QAAI,OAAOP,QAAQ,YAAYA,QAAQ,IAAI;AAC1CQ,cAAQC,KACkQ,yQAAAC,OACxQ,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAOT,gBAAgB,YAAYA,gBAAgB,IAAI;AAC1DO,cAAQC,KACkS,ySAAAC,OACxS,6BAA6B,GAC3B;AAAA,IAEJ;AAAA,EACD;AAED,MAAIC,SAASC,SAASC,eAAef,KAAK,GAAG;AAC5C,UAAMgB,MAAMC,SAASjB,MAAMkB,KAAKjB,WAAW;AAE3C,UAAMkB,KAAKnB,MAAMoB,WAAWf,QAAQL,MAAMoB,WAAWd;AAE/Ce,UAAAA,cAAc7B,QAAQa,KAAK;AAC3BiB,UAAAA,eAAe9B,QAAQc,MAAM;AAE/BiB,QAAAA,gBAAgBF,oCAAerB,MAAMoB,WAAWf;AAChDmB,QAAAA,iBAAiBF,sCAAgBtB,MAAMoB,WAAWf;AAElDgB,QAAAA,eAAe,QAAQC,gBAAgB,MAAM;AAChDE,uBAAiBH,cAAcF;AAAAA,IACrBE,WAAAA,eAAe,QAAQC,gBAAgB,MAAM;AACvDC,sBAAgBD,eAAeH;AAAAA,IAC/B;AAED,WACCM,IAACC,OAAK;AAAA,MACLV;AAAAA,MACAX,OAAOD,OAAON,SAAYyB;AAAAA,MAC1BjB,QAAQF,OAAON,SAAY0B;AAAAA,MAK3BtB,KAAMA,oBAAQF,MAAME,OAAOC;AAAAA,MAC3BC;AAAAA,MACAuB,QAAQC;AAAAA,MACJ,GAAApB;AAAAA,IAAAA,CACH;AAAA,EAAA,OAEG;AACN,WAAOiB,IAAAI,UAAA;AAAA,MAAAC,UAAGvB;AAAAA,IAAAA,CAAQ;AAAA,EAClB;AACF;"}

package/dist/PrismicPreview.cjs

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const router = require("next/router");
+const Script = require("next/script");
+const getPrismicPreviewCookie = require("./lib/getPrismicPreviewCookie.cjs");
+const getPreviewCookieRepositoryName = require("./lib/getPreviewCookieRepositoryName.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function PrismicPreview({
+  repositoryName,
+  children,
+  updatePreviewURL = "/api/preview",
+  exitPreviewURL = "/api/exit-preview"
+}) {
+  const router$1 = router.useRouter();
+  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?`);
+      }
+    };
+    const handlePrismicPreviewUpdate = async (event) => {
+      event.preventDefault();
+      await startPreviewMode();
+    };
+    const handlePrismicPreviewEnd = async (event) => {
+      event.preventDefault();
+      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 (router$1.isPreview) {
+      window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+      window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
+    } else {
+      const prismicPreviewCookie = getPrismicPreviewCookie.getPrismicPreviewCookie(globalThis.document.cookie);
+      if (prismicPreviewCookie) {
+        const locationIsDescendantOfBasePath = window.location.href.startsWith(window.location.origin + router$1.basePath);
+        const prismicPreviewCookieRepositoryName = getPreviewCookieRepositoryName.getPreviewCookieRepositoryName(prismicPreviewCookie);
+        if (locationIsDescendantOfBasePath && prismicPreviewCookieRepositoryName === repositoryName) {
+          startPreviewMode();
+        }
+      }
+    }
+    return () => {
+      window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+      window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
+    };
+  }, [repositoryName, resolvedExitPreviewURL, resolvedUpdatePreviewURL, router$1.isPreview, router$1.basePath]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [children, jsxRuntime.jsx(Script, {
+      src: `https://static.cdn.prismic.io/prismic.js?repo=${repositoryName}&new=true`,
+      strategy: "lazyOnload"
+    })]
+  });
+}
+exports.PrismicPreview = PrismicPreview;
+//# sourceMappingURL=PrismicPreview.cjs.map

package/dist/PrismicPreview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismicPreview.cjs","sources":["../src/PrismicPreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRouter } from \"next/router\";\nimport Script from \"next/script\";\n\nimport { getPrismicPreviewCookie } from \"./lib/getPrismicPreviewCookie\";\nimport { getPreviewCookieRepositoryName } from \"./lib/getPreviewCookieRepositoryName\";\n\n/**\n * Props for `<PrismicPreview>`.\n */\nexport type PrismicPreviewProps = {\n\t/**\n\t * The name of your Prismic repository. A Prismic Toolbar will be registered\n\t * using this repository.\n\t */\n\trepositoryName: string;\n\n\t/**\n\t * The URL of your app's Prismic preview endpoint (default: `/api/preview`).\n\t * This URL will be fetched on preview update events.\n\t *\n\t * **Note**: If your `next.config.js` file contains a `basePath`, it is\n\t * automatically included.\n\t */\n\tupdatePreviewURL?: string;\n\n\t/**\n\t * The URL of your app's exit preview endpoint (default: `/api/exit-preview`).\n\t * This URL will be fetched on preview exit events.\n\t *\n\t * **Note**: If your `next.config.js` file contains a `basePath`, it is\n\t * automatically included.\n\t */\n\texitPreviewURL?: string;\n\n\t/**\n\t * Children to render adjacent to the Prismic Toolbar. The Prismic Toolbar\n\t * will be rendered last.\n\t */\n\tchildren?: React.ReactNode;\n};\n\n/**\n * React component that sets up Prismic Previews using the Prismic Toolbar. When\n * the Prismic Toolbar send events to the browser, such as on preview updates\n * and exiting, this component will automatically update the Next.js preview\n * cookie and refresh the page.\n *\n * This component can be wrapped around your app or added anywhere in your app's\n * tree. It must be rendered on every page.\n */\nexport function PrismicPreview({\n\trepositoryName,\n\tchildren,\n\tupdatePreviewURL = \"/api/preview\",\n\texitPreviewURL = \"/api/exit-preview\",\n}: PrismicPreviewProps): React.ReactNode {\n\tconst router = useRouter();\n\n\tconst resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;\n\tconst resolvedExitPreviewURL = router.basePath + exitPreviewURL;\n\n\tReact.useEffect(() => {\n\t\t/**\n\t\t * Starts Preview Mode and refreshes the page's props.\n\t\t */\n\t\tconst startPreviewMode = async () => {\n\t\t\t// Start Next.js Preview Mode via the given preview API endpoint.\n\t\t\tconst res = await globalThis.fetch(resolvedUpdatePreviewURL);\n\n\t\t\tif (res.ok) {\n\t\t\t\tglobalThis.location.reload();\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[<PrismicPreview>] Failed to start or update Preview Mode using the \"${resolvedUpdatePreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst handlePrismicPreviewUpdate = async (event: Event) => {\n\t\t\t// Prevent the toolbar from reloading the page.\n\t\t\tevent.preventDefault();\n\n\t\t\tawait startPreviewMode();\n\t\t};\n\n\t\tconst handlePrismicPreviewEnd = async (event: Event) => {\n\t\t\t// Prevent the toolbar from reloading the page.\n\t\t\tevent.preventDefault();\n\n\t\t\t// Exit Next.js Preview Mode via the given preview API endpoint.\n\t\t\tconst res = await globalThis.fetch(resolvedExitPreviewURL);\n\n\t\t\tif (res.ok) {\n\t\t\t\tglobalThis.location.reload();\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[<PrismicPreview>] Failed to exit Preview Mode using the \"${resolvedExitPreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tif (router.isPreview) {\n\t\t\t// Register Prismic Toolbar event handlers.\n\t\t\twindow.addEventListener(\n\t\t\t\t\"prismicPreviewUpdate\",\n\t\t\t\thandlePrismicPreviewUpdate,\n\t\t\t);\n\t\t\twindow.addEventListener(\"prismicPreviewEnd\", handlePrismicPreviewEnd);\n\t\t} else {\n\t\t\tconst prismicPreviewCookie = getPrismicPreviewCookie(\n\t\t\t\tglobalThis.document.cookie,\n\t\t\t);\n\n\t\t\tif (prismicPreviewCookie) {\n\t\t\t\t// If a Prismic preview cookie is present, but Next.js Preview\n\t\t\t\t// Mode is not active, we must activate Preview Mode manually.\n\t\t\t\t//\n\t\t\t\t// This will happen when a visitor accesses the page using a\n\t\t\t\t// Prismic preview share link.\n\n\t\t\t\t/**\n\t\t\t\t * Determines if the current location is a descendant of the app's base\n\t\t\t\t * path.\n\t\t\t\t *\n\t\t\t\t * This is used to prevent infinite refrehes; when\n\t\t\t\t * `isDescendantOfBasePath` is `false`, `router.isPreview` is also\n\t\t\t\t * `false`.\n\t\t\t\t *\n\t\t\t\t * If the app does not have a base path, this should always be `true`.\n\t\t\t\t */\n\t\t\t\tconst locationIsDescendantOfBasePath = window.location.href.startsWith(\n\t\t\t\t\twindow.location.origin + router.basePath,\n\t\t\t\t);\n\n\t\t\t\tconst prismicPreviewCookieRepositoryName =\n\t\t\t\t\tgetPreviewCookieRepositoryName(prismicPreviewCookie);\n\n\t\t\t\tif (\n\t\t\t\t\tlocationIsDescendantOfBasePath &&\n\t\t\t\t\tprismicPreviewCookieRepositoryName === repositoryName\n\t\t\t\t) {\n\t\t\t\t\tstartPreviewMode();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// On cleanup, unregister Prismic Toolbar event handlers.\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\n\t\t\t\t\"prismicPreviewUpdate\",\n\t\t\t\thandlePrismicPreviewUpdate,\n\t\t\t);\n\t\t\twindow.removeEventListener(\"prismicPreviewEnd\", handlePrismicPreviewEnd);\n\t\t};\n\t}, [\n\t\trepositoryName,\n\t\tresolvedExitPreviewURL,\n\t\tresolvedUpdatePreviewURL,\n\t\trouter.isPreview,\n\t\trouter.basePath,\n\t]);\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t<Script\n\t\t\t\tsrc={`https://static.cdn.prismic.io/prismic.js?repo=${repositoryName}&new=true`}\n\t\t\t\tstrategy=\"lazyOnload\"\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],"names":["PrismicPreview","repositoryName","children","updatePreviewURL","exitPreviewURL","router","useRouter","resolvedUpdatePreviewURL","basePath","resolvedExitPreviewURL","React","useEffect","startPreviewMode","res","globalThis","fetch","ok","location","reload","error","handlePrismicPreviewUpdate","event","preventDefault","handlePrismicPreviewEnd","isPreview","addEventListener","prismicPreviewCookie","getPrismicPreviewCookie","document","cookie","locationIsDescendantOfBasePath","window","href","startsWith","origin","prismicPreviewCookieRepositoryName","getPreviewCookieRepositoryName","removeEventListener","_jsxs","_Fragment","_jsx","Script","src","strategy"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmDgB,SAAAA,eAAe;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC,mBAAmB;AAAA,EACnBC,iBAAiB;AACI,GAAA;AACrB,QAAMC,WAASC,OAAAA;AAETC,QAAAA,2BAA2BF,SAAOG,WAAWL;AAC7CM,QAAAA,yBAAyBJ,SAAOG,WAAWJ;AAEjDM,mBAAMC,UAAU,MAAK;AAIpB,UAAMC,mBAAmB,YAAW;AAEnC,YAAMC,MAAM,MAAMC,WAAWC,MAAMR,wBAAwB;AAE3D,UAAIM,IAAIG,IAAI;AACXF,mBAAWG,SAASC;MAAQ,OACtB;AACEC,gBAAAA,8EACiEZ,wDAAwD;AAAA,MAEjI;AAAA,IAAA;AAGIa,UAAAA,6BAA6B,OAAOC,UAAgB;AAEzDA,YAAMC,eAAgB;AAEtB,YAAMV,iBAAkB;AAAA,IAAA;AAGnBW,UAAAA,0BAA0B,OAAOF,UAAgB;AAEtDA,YAAMC,eAAgB;AAGtB,YAAMT,MAAM,MAAMC,WAAWC,MAAMN,sBAAsB;AAEzD,UAAII,IAAIG,IAAI;AACXF,mBAAWG,SAASC;MAAQ,OACtB;AACEC,gBAAAA,mEACsDV,sDAAsD;AAAA,MAEpH;AAAA,IAAA;AAGF,QAAIJ,SAAOmB,WAAW;AAEdC,aAAAA,iBACN,wBACAL,0BAA0B;AAEpBK,aAAAA,iBAAiB,qBAAqBF,uBAAuB;AAAA,IAAA,OAC9D;AACN,YAAMG,uBAAuBC,wBAAAA,wBAC5Bb,WAAWc,SAASC,MAAM;AAG3B,UAAIH,sBAAsB;AAiBnBI,cAAAA,iCAAiCC,OAAOd,SAASe,KAAKC,WAC3DF,OAAOd,SAASiB,SAAS7B,SAAOG,QAAQ;AAGnC2B,cAAAA,qCACLC,8DAA+BV,oBAAoB;AAGnDI,YAAAA,kCACAK,uCAAuClC,gBACtC;AACiB;QAClB;AAAA,MACD;AAAA,IACD;AAGD,WAAO,MAAK;AACJoC,aAAAA,oBACN,wBACAjB,0BAA0B;AAEpBiB,aAAAA,oBAAoB,qBAAqBd,uBAAuB;AAAA,IAAA;AAAA,EACxE,GACE,CACFtB,gBACAQ,wBACAF,0BACAF,SAAOmB,WACPnB,SAAOG,QAAQ,CACf;AAED,SACC8B,WAAAA,KACEC,WAAAA,UAAA;AAAA,IAAArC,UAAA,CAAAA,UACDsC,WAAAA,IAACC;MACAC,sDAAsDzC;AAAAA,MACtD0C,UAAS;AAAA,IAAA,CACR,CAAA;AAAA,EAAA,CAAA;AAGL;;"}

package/dist/PrismicPreview.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+/**
+ * Props for `<PrismicPreview>`.
+ */
+export declare type PrismicPreviewProps = {
+    /**
+     * The name of your Prismic repository. A Prismic Toolbar will be registered
+     * using this repository.
+     */
+    repositoryName: string;
+    /**
+     * 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;
+};
+/**
+ * React component that sets up Prismic Previews using the Prismic Toolbar. When
+ * the Prismic Toolbar send events to the browser, such as on preview updates
+ * and exiting, this component will automatically update the Next.js preview
+ * cookie and refresh the page.
+ *
+ * This component can be wrapped around your app or added anywhere in your app's
+ * tree. It must be rendered on every page.
+ */
+export declare function PrismicPreview({ repositoryName, children, updatePreviewURL, exitPreviewURL, }: PrismicPreviewProps): React.ReactNode;

package/dist/PrismicPreview.js

@@ -0,0 +1,66 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useRouter } from "next/router";
+import Script from "next/script";
+import { getPrismicPreviewCookie } from "./lib/getPrismicPreviewCookie.js";
+import { getPreviewCookieRepositoryName } from "./lib/getPreviewCookieRepositoryName.js";
+function PrismicPreview({
+  repositoryName,
+  children,
+  updatePreviewURL = "/api/preview",
+  exitPreviewURL = "/api/exit-preview"
+}) {
+  const router = useRouter();
+  const resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;
+  const resolvedExitPreviewURL = router.basePath + exitPreviewURL;
+  React.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?`);
+      }
+    };
+    const handlePrismicPreviewUpdate = async (event) => {
+      event.preventDefault();
+      await startPreviewMode();
+    };
+    const handlePrismicPreviewEnd = async (event) => {
+      event.preventDefault();
+      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 (router.isPreview) {
+      window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+      window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
+    } else {
+      const prismicPreviewCookie = getPrismicPreviewCookie(globalThis.document.cookie);
+      if (prismicPreviewCookie) {
+        const locationIsDescendantOfBasePath = window.location.href.startsWith(window.location.origin + router.basePath);
+        const prismicPreviewCookieRepositoryName = getPreviewCookieRepositoryName(prismicPreviewCookie);
+        if (locationIsDescendantOfBasePath && prismicPreviewCookieRepositoryName === repositoryName) {
+          startPreviewMode();
+        }
+      }
+    }
+    return () => {
+      window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+      window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
+    };
+  }, [repositoryName, resolvedExitPreviewURL, resolvedUpdatePreviewURL, router.isPreview, router.basePath]);
+  return jsxs(Fragment, {
+    children: [children, jsx(Script, {
+      src: `https://static.cdn.prismic.io/prismic.js?repo=${repositoryName}&new=true`,
+      strategy: "lazyOnload"
+    })]
+  });
+}
+export {
+  PrismicPreview
+};
+//# sourceMappingURL=PrismicPreview.js.map

package/dist/PrismicPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrismicPreview.js","sources":["../src/PrismicPreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRouter } from \"next/router\";\nimport Script from \"next/script\";\n\nimport { getPrismicPreviewCookie } from \"./lib/getPrismicPreviewCookie\";\nimport { getPreviewCookieRepositoryName } from \"./lib/getPreviewCookieRepositoryName\";\n\n/**\n * Props for `<PrismicPreview>`.\n */\nexport type PrismicPreviewProps = {\n\t/**\n\t * The name of your Prismic repository. A Prismic Toolbar will be registered\n\t * using this repository.\n\t */\n\trepositoryName: string;\n\n\t/**\n\t * The URL of your app's Prismic preview endpoint (default: `/api/preview`).\n\t * This URL will be fetched on preview update events.\n\t *\n\t * **Note**: If your `next.config.js` file contains a `basePath`, it is\n\t * automatically included.\n\t */\n\tupdatePreviewURL?: string;\n\n\t/**\n\t * The URL of your app's exit preview endpoint (default: `/api/exit-preview`).\n\t * This URL will be fetched on preview exit events.\n\t *\n\t * **Note**: If your `next.config.js` file contains a `basePath`, it is\n\t * automatically included.\n\t */\n\texitPreviewURL?: string;\n\n\t/**\n\t * Children to render adjacent to the Prismic Toolbar. The Prismic Toolbar\n\t * will be rendered last.\n\t */\n\tchildren?: React.ReactNode;\n};\n\n/**\n * React component that sets up Prismic Previews using the Prismic Toolbar. When\n * the Prismic Toolbar send events to the browser, such as on preview updates\n * and exiting, this component will automatically update the Next.js preview\n * cookie and refresh the page.\n *\n * This component can be wrapped around your app or added anywhere in your app's\n * tree. It must be rendered on every page.\n */\nexport function PrismicPreview({\n\trepositoryName,\n\tchildren,\n\tupdatePreviewURL = \"/api/preview\",\n\texitPreviewURL = \"/api/exit-preview\",\n}: PrismicPreviewProps): React.ReactNode {\n\tconst router = useRouter();\n\n\tconst resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;\n\tconst resolvedExitPreviewURL = router.basePath + exitPreviewURL;\n\n\tReact.useEffect(() => {\n\t\t/**\n\t\t * Starts Preview Mode and refreshes the page's props.\n\t\t */\n\t\tconst startPreviewMode = async () => {\n\t\t\t// Start Next.js Preview Mode via the given preview API endpoint.\n\t\t\tconst res = await globalThis.fetch(resolvedUpdatePreviewURL);\n\n\t\t\tif (res.ok) {\n\t\t\t\tglobalThis.location.reload();\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[<PrismicPreview>] Failed to start or update Preview Mode using the \"${resolvedUpdatePreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst handlePrismicPreviewUpdate = async (event: Event) => {\n\t\t\t// Prevent the toolbar from reloading the page.\n\t\t\tevent.preventDefault();\n\n\t\t\tawait startPreviewMode();\n\t\t};\n\n\t\tconst handlePrismicPreviewEnd = async (event: Event) => {\n\t\t\t// Prevent the toolbar from reloading the page.\n\t\t\tevent.preventDefault();\n\n\t\t\t// Exit Next.js Preview Mode via the given preview API endpoint.\n\t\t\tconst res = await globalThis.fetch(resolvedExitPreviewURL);\n\n\t\t\tif (res.ok) {\n\t\t\t\tglobalThis.location.reload();\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[<PrismicPreview>] Failed to exit Preview Mode using the \"${resolvedExitPreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tif (router.isPreview) {\n\t\t\t// Register Prismic Toolbar event handlers.\n\t\t\twindow.addEventListener(\n\t\t\t\t\"prismicPreviewUpdate\",\n\t\t\t\thandlePrismicPreviewUpdate,\n\t\t\t);\n\t\t\twindow.addEventListener(\"prismicPreviewEnd\", handlePrismicPreviewEnd);\n\t\t} else {\n\t\t\tconst prismicPreviewCookie = getPrismicPreviewCookie(\n\t\t\t\tglobalThis.document.cookie,\n\t\t\t);\n\n\t\t\tif (prismicPreviewCookie) {\n\t\t\t\t// If a Prismic preview cookie is present, but Next.js Preview\n\t\t\t\t// Mode is not active, we must activate Preview Mode manually.\n\t\t\t\t//\n\t\t\t\t// This will happen when a visitor accesses the page using a\n\t\t\t\t// Prismic preview share link.\n\n\t\t\t\t/**\n\t\t\t\t * Determines if the current location is a descendant of the app's base\n\t\t\t\t * path.\n\t\t\t\t *\n\t\t\t\t * This is used to prevent infinite refrehes; when\n\t\t\t\t * `isDescendantOfBasePath` is `false`, `router.isPreview` is also\n\t\t\t\t * `false`.\n\t\t\t\t *\n\t\t\t\t * If the app does not have a base path, this should always be `true`.\n\t\t\t\t */\n\t\t\t\tconst locationIsDescendantOfBasePath = window.location.href.startsWith(\n\t\t\t\t\twindow.location.origin + router.basePath,\n\t\t\t\t);\n\n\t\t\t\tconst prismicPreviewCookieRepositoryName =\n\t\t\t\t\tgetPreviewCookieRepositoryName(prismicPreviewCookie);\n\n\t\t\t\tif (\n\t\t\t\t\tlocationIsDescendantOfBasePath &&\n\t\t\t\t\tprismicPreviewCookieRepositoryName === repositoryName\n\t\t\t\t) {\n\t\t\t\t\tstartPreviewMode();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// On cleanup, unregister Prismic Toolbar event handlers.\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\n\t\t\t\t\"prismicPreviewUpdate\",\n\t\t\t\thandlePrismicPreviewUpdate,\n\t\t\t);\n\t\t\twindow.removeEventListener(\"prismicPreviewEnd\", handlePrismicPreviewEnd);\n\t\t};\n\t}, [\n\t\trepositoryName,\n\t\tresolvedExitPreviewURL,\n\t\tresolvedUpdatePreviewURL,\n\t\trouter.isPreview,\n\t\trouter.basePath,\n\t]);\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t<Script\n\t\t\t\tsrc={`https://static.cdn.prismic.io/prismic.js?repo=${repositoryName}&new=true`}\n\t\t\t\tstrategy=\"lazyOnload\"\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],"names":["PrismicPreview","repositoryName","children","updatePreviewURL","exitPreviewURL","router","useRouter","resolvedUpdatePreviewURL","basePath","resolvedExitPreviewURL","React","useEffect","startPreviewMode","res","globalThis","fetch","ok","location","reload","error","handlePrismicPreviewUpdate","event","preventDefault","handlePrismicPreviewEnd","isPreview","addEventListener","prismicPreviewCookie","getPrismicPreviewCookie","document","cookie","locationIsDescendantOfBasePath","window","href","startsWith","origin","prismicPreviewCookieRepositoryName","getPreviewCookieRepositoryName","removeEventListener","_jsxs","_Fragment","_jsx","Script","src","strategy"],"mappings":";;;;;;AAmDgB,SAAAA,eAAe;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC,mBAAmB;AAAA,EACnBC,iBAAiB;AACI,GAAA;AACrB,QAAMC,SAASC;AAETC,QAAAA,2BAA2BF,OAAOG,WAAWL;AAC7CM,QAAAA,yBAAyBJ,OAAOG,WAAWJ;AAEjDM,QAAMC,UAAU,MAAK;AAIpB,UAAMC,mBAAmB,YAAW;AAEnC,YAAMC,MAAM,MAAMC,WAAWC,MAAMR,wBAAwB;AAE3D,UAAIM,IAAIG,IAAI;AACXF,mBAAWG,SAASC;MAAQ,OACtB;AACEC,gBAAAA,8EACiEZ,wDAAwD;AAAA,MAEjI;AAAA,IAAA;AAGIa,UAAAA,6BAA6B,OAAOC,UAAgB;AAEzDA,YAAMC,eAAgB;AAEtB,YAAMV,iBAAkB;AAAA,IAAA;AAGnBW,UAAAA,0BAA0B,OAAOF,UAAgB;AAEtDA,YAAMC,eAAgB;AAGtB,YAAMT,MAAM,MAAMC,WAAWC,MAAMN,sBAAsB;AAEzD,UAAII,IAAIG,IAAI;AACXF,mBAAWG,SAASC;MAAQ,OACtB;AACEC,gBAAAA,mEACsDV,sDAAsD;AAAA,MAEpH;AAAA,IAAA;AAGF,QAAIJ,OAAOmB,WAAW;AAEdC,aAAAA,iBACN,wBACAL,0BAA0B;AAEpBK,aAAAA,iBAAiB,qBAAqBF,uBAAuB;AAAA,IAAA,OAC9D;AACN,YAAMG,uBAAuBC,wBAC5Bb,WAAWc,SAASC,MAAM;AAG3B,UAAIH,sBAAsB;AAiBnBI,cAAAA,iCAAiCC,OAAOd,SAASe,KAAKC,WAC3DF,OAAOd,SAASiB,SAAS7B,OAAOG,QAAQ;AAGnC2B,cAAAA,qCACLC,+BAA+BV,oBAAoB;AAGnDI,YAAAA,kCACAK,uCAAuClC,gBACtC;AACiB;QAClB;AAAA,MACD;AAAA,IACD;AAGD,WAAO,MAAK;AACJoC,aAAAA,oBACN,wBACAjB,0BAA0B;AAEpBiB,aAAAA,oBAAoB,qBAAqBd,uBAAuB;AAAA,IAAA;AAAA,EACxE,GACE,CACFtB,gBACAQ,wBACAF,0BACAF,OAAOmB,WACPnB,OAAOG,QAAQ,CACf;AAED,SACC8B,KACEC,UAAA;AAAA,IAAArC,UAAA,CAAAA,UACDsC,IAACC;MACAC,sDAAsDzC;AAAAA,MACtD0C,UAAS;AAAA,IAAA,CACR,CAAA;AAAA,EAAA,CAAA;AAGL;"}

package/dist/enableAutoPreviews.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const isPrismicNextPreviewData = (previewData) => {
+  return typeof previewData === "object" && "ref" in previewData;
+};
+const enableAutoPreviews = (config) => {
+  if ("previewData" in config && config.previewData) {
+    const { previewData } = config;
+    if (isPrismicNextPreviewData(previewData) && previewData.ref) {
+      config.client.queryContentFromRef(previewData.ref);
+    }
+  } else if ("req" in config && config.req) {
+    config.client.enableAutoPreviewsFromReq(config.req);
+  }
+};
+exports.enableAutoPreviews = enableAutoPreviews;
+//# sourceMappingURL=enableAutoPreviews.cjs.map

package/dist/enableAutoPreviews.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"enableAutoPreviews.cjs","sources":["../src/enableAutoPreviews.ts"],"sourcesContent":["import { PreviewData } from \"next\";\nimport { Client, HttpRequestLike } from \"@prismicio/client\";\n\ninterface PrismicNextPreviewData {\n\tref: string;\n}\n\n/**\n * Determines if a Next.js preview data object contains Prismic preview data.\n *\n * @param previewData - The Next.js preview data object to check.\n *\n * @returns `true` if `previewData` contains Prismic preview data, `false`\n *   otherwise.\n */\nconst isPrismicNextPreviewData = (\n\tpreviewData: PreviewData,\n): previewData is PrismicNextPreviewData => {\n\treturn typeof previewData === \"object\" && \"ref\" in previewData;\n};\n\n/**\n * Configuration for `enableAutoPreviews`.\n *\n * @typeParam TPreviewData - Next.js preview data object.\n */\nexport type EnableAutoPreviewsConfig<\n\tTPreviewData extends PreviewData = PreviewData,\n> = {\n\t/**\n\t * Prismic client with which automatic previews will be enabled.\n\t */\n\tclient: Client;\n} & (\n\t| {\n\t\t\t/**\n\t\t\t * A Next.js context object (such as the context object from\n\t\t\t * `getStaticProps` or `getServerSideProps`).\n\t\t\t *\n\t\t\t * Pass a `context` object when using `enableAutoPreviews` outside a\n\t\t\t * Next.js API endpoint.\n\t\t\t */\n\t\t\tpreviewData?: TPreviewData;\n\t  }\n\t| {\n\t\t\t/**\n\t\t\t * A Next.js API endpoint request object.\n\t\t\t *\n\t\t\t * Pass a `req` object when using `enableAutoPreviews` in a Next.js API\n\t\t\t * endpoint.\n\t\t\t */\n\t\t\treq?: HttpRequestLike;\n\t  }\n);\n/**\n * Configures a Prismic client to automatically query draft content during a\n * preview session. It either takes in a Next.js `getStaticProps` context object\n * or a Next.js API endpoint request object.\n *\n * @param config - Configuration for the function.\n */\nexport const enableAutoPreviews = <TPreviewData extends PreviewData>(\n\tconfig: EnableAutoPreviewsConfig<TPreviewData>,\n): void => {\n\tif (\"previewData\" in config && config.previewData) {\n\t\t// If preview data is being passed from Next Context then use queryContentFromRef\n\n\t\tconst { previewData } = config;\n\n\t\tif (isPrismicNextPreviewData(previewData) && previewData.ref) {\n\t\t\tconfig.client.queryContentFromRef(previewData.ref);\n\t\t}\n\t} else if (\"req\" in config && config.req) {\n\t\t// If the req object is passed then use enableAutoPreviewsFromReq\n\n\t\tconfig.client.enableAutoPreviewsFromReq(config.req);\n\t}\n};\n"],"names":[],"mappings":";;AAeA,MAAM,2BAA2B,CAChC,gBAC0C;AACnC,SAAA,OAAO,gBAAgB,YAAY,SAAS;AACpD;AA0Ca,MAAA,qBAAqB,CACjC,WACS;AACL,MAAA,iBAAiB,UAAU,OAAO,aAAa;AAG5C,UAAA,EAAE,YAAgB,IAAA;AAExB,QAAI,yBAAyB,WAAW,KAAK,YAAY,KAAK;AACtD,aAAA,OAAO,oBAAoB,YAAY,GAAG;AAAA,IACjD;AAAA,EACS,WAAA,SAAS,UAAU,OAAO,KAAK;AAGlC,WAAA,OAAO,0BAA0B,OAAO,GAAG;AAAA,EAClD;AACF;;"}

package/dist/enableAutoPreviews.d.ts

@@ -0,0 +1,38 @@
+import { PreviewData } from "next";
+import { Client, HttpRequestLike } from "@prismicio/client";
+/**
+ * Configuration for `enableAutoPreviews`.
+ *
+ * @typeParam TPreviewData - Next.js preview data object.
+ */
+export 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.
+ */
+export declare const enableAutoPreviews: <TPreviewData extends PreviewData>(config: EnableAutoPreviewsConfig<TPreviewData>) => void;

package/dist/enableAutoPreviews.js

@@ -0,0 +1,17 @@
+const isPrismicNextPreviewData = (previewData) => {
+  return typeof previewData === "object" && "ref" in previewData;
+};
+const enableAutoPreviews = (config) => {
+  if ("previewData" in config && config.previewData) {
+    const { previewData } = config;
+    if (isPrismicNextPreviewData(previewData) && previewData.ref) {
+      config.client.queryContentFromRef(previewData.ref);
+    }
+  } else if ("req" in config && config.req) {
+    config.client.enableAutoPreviewsFromReq(config.req);
+  }
+};
+export {
+  enableAutoPreviews
+};
+//# sourceMappingURL=enableAutoPreviews.js.map

package/dist/enableAutoPreviews.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enableAutoPreviews.js","sources":["../src/enableAutoPreviews.ts"],"sourcesContent":["import { PreviewData } from \"next\";\nimport { Client, HttpRequestLike } from \"@prismicio/client\";\n\ninterface PrismicNextPreviewData {\n\tref: string;\n}\n\n/**\n * Determines if a Next.js preview data object contains Prismic preview data.\n *\n * @param previewData - The Next.js preview data object to check.\n *\n * @returns `true` if `previewData` contains Prismic preview data, `false`\n *   otherwise.\n */\nconst isPrismicNextPreviewData = (\n\tpreviewData: PreviewData,\n): previewData is PrismicNextPreviewData => {\n\treturn typeof previewData === \"object\" && \"ref\" in previewData;\n};\n\n/**\n * Configuration for `enableAutoPreviews`.\n *\n * @typeParam TPreviewData - Next.js preview data object.\n */\nexport type EnableAutoPreviewsConfig<\n\tTPreviewData extends PreviewData = PreviewData,\n> = {\n\t/**\n\t * Prismic client with which automatic previews will be enabled.\n\t */\n\tclient: Client;\n} & (\n\t| {\n\t\t\t/**\n\t\t\t * A Next.js context object (such as the context object from\n\t\t\t * `getStaticProps` or `getServerSideProps`).\n\t\t\t *\n\t\t\t * Pass a `context` object when using `enableAutoPreviews` outside a\n\t\t\t * Next.js API endpoint.\n\t\t\t */\n\t\t\tpreviewData?: TPreviewData;\n\t  }\n\t| {\n\t\t\t/**\n\t\t\t * A Next.js API endpoint request object.\n\t\t\t *\n\t\t\t * Pass a `req` object when using `enableAutoPreviews` in a Next.js API\n\t\t\t * endpoint.\n\t\t\t */\n\t\t\treq?: HttpRequestLike;\n\t  }\n);\n/**\n * Configures a Prismic client to automatically query draft content during a\n * preview session. It either takes in a Next.js `getStaticProps` context object\n * or a Next.js API endpoint request object.\n *\n * @param config - Configuration for the function.\n */\nexport const enableAutoPreviews = <TPreviewData extends PreviewData>(\n\tconfig: EnableAutoPreviewsConfig<TPreviewData>,\n): void => {\n\tif (\"previewData\" in config && config.previewData) {\n\t\t// If preview data is being passed from Next Context then use queryContentFromRef\n\n\t\tconst { previewData } = config;\n\n\t\tif (isPrismicNextPreviewData(previewData) && previewData.ref) {\n\t\t\tconfig.client.queryContentFromRef(previewData.ref);\n\t\t}\n\t} else if (\"req\" in config && config.req) {\n\t\t// If the req object is passed then use enableAutoPreviewsFromReq\n\n\t\tconfig.client.enableAutoPreviewsFromReq(config.req);\n\t}\n};\n"],"names":[],"mappings":"AAeA,MAAM,2BAA2B,CAChC,gBAC0C;AACnC,SAAA,OAAO,gBAAgB,YAAY,SAAS;AACpD;AA0Ca,MAAA,qBAAqB,CACjC,WACS;AACL,MAAA,iBAAiB,UAAU,OAAO,aAAa;AAG5C,UAAA,EAAE,YAAgB,IAAA;AAExB,QAAI,yBAAyB,WAAW,KAAK,YAAY,KAAK;AACtD,aAAA,OAAO,oBAAoB,YAAY,GAAG;AAAA,IACjD;AAAA,EACS,WAAA,SAAS,UAAU,OAAO,KAAK;AAGlC,WAAA,OAAO,0BAA0B,OAAO,GAAG;AAAA,EAClD;AACF;"}

package/dist/exitPreview.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function exitPreview(config) {
+  config.res.clearPreviewData();
+  config.res.status(205).json({ success: true });
+}
+exports.exitPreview = exitPreview;
+//# sourceMappingURL=exitPreview.cjs.map

package/dist/exitPreview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"exitPreview.cjs","sources":["../src/exitPreview.ts"],"sourcesContent":["import type { NextApiResponse, NextApiRequest } from \"next\";\n\n/**\n * Configuration for `exitPreview`.\n */\nexport type ExitPreviewConfig = {\n\t/**\n\t * The `req` object from a Next.js API route. This is given as a parameter to\n\t * the API route.\n\t *\n\t * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}\n\t */\n\t// `req` is no longer used in `exitPreview()`. It previously would\n\t// redirect the user to the referring URL, but it no longer has that\n\t// behavior.\n\t//\n\t// `req` is retained as a parameter to make setting up an exit preview\n\t// API route easier (this eliminates the awkward need to handle an\n\t// unused `req` param).\n\t//\n\t// It is also retained in case it is needed in the future, such as\n\t// reading headers or metadata about the request.\n\treq: {\n\t\theaders: NextApiRequest[\"headers\"];\n\t};\n\n\t/**\n\t * The `res` object from a Next.js API route. This is given as a parameter to\n\t * the API route.\n\t *\n\t * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}\n\t */\n\tres: {\n\t\tclearPreviewData: NextApiResponse[\"clearPreviewData\"];\n\t\tstatus: NextApiResponse[\"status\"];\n\t\tjson: NextApiResponse[\"json\"];\n\t};\n};\n\n/**\n * Exits Next.js's Preview Mode from within a Next.js API route.\n */\nexport function exitPreview(config: ExitPreviewConfig): void {\n\t// Exit the current user from Preview Mode.\n\tconfig.res.clearPreviewData();\n\n\t// 205 status is used to prevent CDN-level caching. The default 200\n\t// status code is typically treated as non-changing and cacheable.\n\tconfig.res.status(205).json({ success: true });\n}\n"],"names":[],"mappings":";;AA0CM,SAAU,YAAY,QAAyB;AAEpD,SAAO,IAAI;AAIJ,SAAA,IAAI,OAAO,GAAG,EAAE,KAAK,EAAE,SAAS,MAAM;AAC9C;;"}

package/dist/exitPreview.d.ts

@@ -0,0 +1,30 @@
+import type { NextApiResponse, NextApiRequest } from "next";
+/**
+ * Configuration for `exitPreview`.
+ */
+export declare type ExitPreviewConfig = {
+    /**
+     * The `req` object from a Next.js API route. This is given as a parameter to
+     * the API route.
+     *
+     * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
+     */
+    req: {
+        headers: NextApiRequest["headers"];
+    };
+    /**
+     * The `res` object from a Next.js API route. This is given as a parameter to
+     * the API route.
+     *
+     * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
+     */
+    res: {
+        clearPreviewData: NextApiResponse["clearPreviewData"];
+        status: NextApiResponse["status"];
+        json: NextApiResponse["json"];
+    };
+};
+/**
+ * Exits Next.js's Preview Mode from within a Next.js API route.
+ */
+export declare function exitPreview(config: ExitPreviewConfig): void;