@prismicio/next 0.1.6-alpha.1 → 0.1.6

package/dist/PrismicNextImage.cjs

@@ -27,6 +27,18 @@ function _interopNamespace(e) {
 }
 const Image__default = /* @__PURE__ */ _interopDefaultLegacy(Image);
 const prismicH__namespace = /* @__PURE__ */ _interopNamespace(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 imgixLoader = (args) => {
   const url = new URL(args.src);
   const params = {
@@ -39,7 +51,14 @@ const imgixLoader = (args) => {
   }
   return imgixUrlBuilder.buildURL(args.src, params);
 };
-const PrismicNextImage = ({ field, imgixParams = {}, alt, fallbackAlt, layout, ...restProps }) => {
+const PrismicNextImage = ({
+  field,
+  imgixParams = {},
+  alt,
+  fallbackAlt,
+  layout = "intrinsic",
+  ...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")}`);
@@ -50,7 +69,30 @@ const PrismicNextImage = ({ field, imgixParams = {}, alt, fallbackAlt, layout, .
   }
   if (prismicH__namespace.isFilled.imageThumbnail(field)) {
     const src = imgixUrlBuilder.buildURL(field.url, imgixParams);
-    return jsxRuntime.jsx(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 });
+    const ar = field.dimensions.width / field.dimensions.height;
+    let resolvedWidth = field.dimensions.width;
+    let resolvedHeight = field.dimensions.height;
+    if ((layout === "intrinsic" || layout === "fixed") && ("width" in restProps || "height" in restProps)) {
+      const castedWidth = castInt(restProps.width);
+      const castedHeight = castInt(restProps.height);
+      if (castedWidth) {
+        resolvedWidth = castedWidth;
+      } else {
+        if (castedHeight) {
+          resolvedWidth = ar * castedHeight;
+        }
+      }
+      resolvedHeight = resolvedWidth / ar;
+    }
+    return jsxRuntime.jsx(Image__default.default, {
+      src,
+      width: layout === "fill" ? void 0 : resolvedWidth,
+      height: layout === "fill" ? void 0 : resolvedHeight,
+      alt: alt != null ? alt : field.alt || fallbackAlt,
+      loader: imgixLoader,
+      layout,
+      ...restProps
+    });
   } else {
     return null;
   }

package/dist/PrismicNextImage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PrismicNextImage.cjs","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport Image, { ImageProps, ImageLoaderProps } 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\n/**\n * Creates a `next/image` loader for Imgix, which Prismic uses, with an optional\n * collection of default Imgix parameters.\n *\n * @see To learn about `next/image` loaders: https://nextjs.org/docs/api-reference/next/image#loader\n * @see To learn about Imgix's URL API: https://docs.imgix.com/apis/rendering\n */\nconst imgixLoader = (args: ImageLoaderProps): string => {\n\tconst url = new URL(args.src);\n\n\tconst params: ImgixURLParams = {\n\t\tfit: (url.searchParams.get(\"fit\") as ImgixURLParams[\"fit\"]) || \"max\",\n\t\tw: args.width,\n\t\th: undefined,\n\t};\n\n\tif (args.quality) {\n\t\tparams.q = args.quality;\n\t}\n\n\treturn buildURL(args.src, params);\n};\n\nexport type PrismicNextImageProps = Omit<\n\tImageProps,\n\t\"src\" | \"alt\" | \"width\" | \"height\"\n> & {\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\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 *\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\tlayout,\n\t...restProps\n}: PrismicNextImageProps) => {\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\treturn (\n\t\t\t<Image\n\t\t\t\tsrc={src}\n\t\t\t\twidth={layout === \"fill\" ? undefined : field.dimensions.width}\n\t\t\t\theight={layout === \"fill\" ? undefined : field.dimensions.height}\n\t\t\t\talt={alt ?? (field.alt || fallbackAlt)}\n\t\t\t\tloader={imgixLoader}\n\t\t\t\tlayout={layout}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n"],"names":["buildURL","__PRODUCTION__","devMsg","prismicH","_jsx","Image"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,cAAc,CAAC,SAAkC;AACtD,QAAM,MAAM,IAAI,IAAI,KAAK,GAAG;AAE5B,QAAM,SAAyB;AAAA,IAC9B,KAAM,IAAI,aAAa,IAAI,KAAK,KAA+B;AAAA,IAC/D,GAAG,KAAK;AAAA,IACR,GAAG;AAAA,EAAA;AAGJ,MAAI,KAAK,SAAS;AACjB,WAAO,IAAI,KAAK;AAAA,EAChB;AAEM,SAAAA,yBAAS,KAAK,KAAK,MAAM;AACjC;AAoDa,MAAA,mBAAmB,CAAC,EAChC,OACA,cAAc,CAAA,GACd,KACA,aACA,WACG,gBACwB;AAC3B,MAAI,CAACC,eAAAA,gBAAgB;AACpB,QAAI,OAAO,QAAQ,YAAY,QAAQ,IAAI;AAC1C,cAAQ,KACP,yQAAyQC,OACxQ,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAO,gBAAgB,YAAY,gBAAgB,IAAI;AAC1D,cAAQ,KACP,ySAAySA,OACxS,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAAA,EACD;AAED,MAAIC,oBAAS,SAAS,eAAe,KAAK,GAAG;AAC5C,UAAM,MAAMH,gBAAA,SAAS,MAAM,KAAK,WAAW;AAE3C,WACCI,WAAC,IAAAC,eAAA,SAAK,EACL,KACA,OAAO,WAAW,SAAS,SAAY,MAAM,WAAW,OACxD,QAAQ,WAAW,SAAS,SAAY,MAAM,WAAW,QACzD,KAAK,oBAAQ,MAAM,OAAO,aAC1B,QAAQ,aACR,QAAc,GACV,UAAS,CAAA;AAAA,EAAA,OAGT;AACC,WAAA;AAAA,EACP;AACF;;"}
+{"version":3,"file":"PrismicNextImage.cjs","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["import Image, { ImageProps, ImageLoaderProps } 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\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\n/**\n * Creates a `next/image` loader for Imgix, which Prismic uses, with an optional\n * collection of default Imgix parameters.\n *\n * @see To learn about `next/image` loaders: https://nextjs.org/docs/api-reference/next/image#loader\n * @see To learn about Imgix's URL API: https://docs.imgix.com/apis/rendering\n */\nconst imgixLoader = (args: ImageLoaderProps): string => {\n\tconst url = new URL(args.src);\n\n\tconst params: ImgixURLParams = {\n\t\tfit: (url.searchParams.get(\"fit\") as ImgixURLParams[\"fit\"]) || \"max\",\n\t\tw: args.width,\n\t\th: undefined,\n\t};\n\n\tif (args.quality) {\n\t\tparams.q = args.quality;\n\t}\n\n\treturn buildURL(args.src, params);\n};\n\nexport type PrismicNextImageProps = Omit<\n\tImageProps,\n\t\"src\" | \"alt\" | \"width\" | \"height\" | \"layout\"\n> & {\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\t| ({\n\t\t\t\tlayout?: \"intrinsic\" | \"fixed\";\n\t\t  } & Pick<ImageProps, \"width\" | \"height\">)\n\t\t| {\n\t\t\t\tlayout: \"responsive\" | \"fill\";\n\t\t  }\n\t);\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\tlayout = \"intrinsic\",\n\t...restProps\n}: PrismicNextImageProps) => {\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\t\tconst ar = field.dimensions.width / field.dimensions.height;\n\n\t\tlet resolvedWidth = field.dimensions.width;\n\t\tlet resolvedHeight = field.dimensions.height;\n\n\t\tif (\n\t\t\t(layout === \"intrinsic\" || layout === \"fixed\") &&\n\t\t\t(\"width\" in restProps || \"height\" in restProps)\n\t\t) {\n\t\t\tconst castedWidth = castInt(restProps.width);\n\t\t\tconst castedHeight = castInt(restProps.height);\n\n\t\t\tif (castedWidth) {\n\t\t\t\tresolvedWidth = castedWidth;\n\t\t\t} else {\n\t\t\t\tif (castedHeight) {\n\t\t\t\t\tresolvedWidth = ar * castedHeight;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tresolvedHeight = resolvedWidth / ar;\n\t\t}\n\n\t\treturn (\n\t\t\t<Image\n\t\t\t\tsrc={src}\n\t\t\t\twidth={layout === \"fill\" ? undefined : resolvedWidth}\n\t\t\t\theight={layout === \"fill\" ? undefined : resolvedHeight}\n\t\t\t\talt={alt ?? (field.alt || fallbackAlt)}\n\t\t\t\tloader={imgixLoader}\n\t\t\t\tlayout={layout}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n"],"names":["castInt","input","parsed","Number","parseInt","isNaN","undefined","imgixLoader","args","url","URL","src","params","fit","searchParams","get","w","width","h","quality","q","buildURL","PrismicNextImage","field","imgixParams","alt","fallbackAlt","layout","restProps","__PRODUCTION__","console","warn","devMsg","prismicH","isFilled","imageThumbnail","ar","dimensions","height","resolvedWidth","resolvedHeight","castedWidth","castedHeight","_jsx","Image","loader"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,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;AASA,MAAMK,cAAeC,CAAkC,SAAA;AACtD,QAAMC,MAAM,IAAIC,IAAIF,KAAKG,GAAG;AAE5B,QAAMC,SAAyB;AAAA,IAC9BC,KAAMJ,IAAIK,aAAaC,IAAI,KAAK,KAA+B;AAAA,IAC/DC,GAAGR,KAAKS;AAAAA,IACRC,GAAGZ;AAAAA,EAAAA;AAGJ,MAAIE,KAAKW,SAAS;AACjBP,WAAOQ,IAAIZ,KAAKW;AAAAA,EAChB;AAEME,SAAAA,yBAASb,KAAKG,KAAKC,MAAM;AACjC;AA0DO,MAAMU,mBAAmB,CAAC;AAAA,EAChCC;AAAAA,EACAC,cAAc,CAAE;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,KACNC;AACoB,MAAI;AAC3B,MAAI,CAACC,eAAAA,gBAAgB;AACpB,QAAI,OAAOJ,QAAQ,YAAYA,QAAQ,IAAI;AAC1CK,cAAQC,KACkQ,yQAAAC,OACxQ,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAON,gBAAgB,YAAYA,gBAAgB,IAAI;AAC1DI,cAAQC,KACkS,ySAAAC,OACxS,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAAA,EACD;AAED,MAAIC,oBAASC,SAASC,eAAeZ,KAAK,GAAG;AAC5C,UAAMZ,MAAMU,gBAAAA,SAASE,MAAMd,KAAKe,WAAW;AAC3C,UAAMY,KAAKb,MAAMc,WAAWpB,QAAQM,MAAMc,WAAWC;AAEjDC,QAAAA,gBAAgBhB,MAAMc,WAAWpB;AACjCuB,QAAAA,iBAAiBjB,MAAMc,WAAWC;AAEtC,SACEX,WAAW,eAAeA,WAAW,aACrC,WAAWC,aAAa,YAAYA,YACpC;AACKa,YAAAA,cAAczC,QAAQ4B,UAAUX,KAAK;AACrCyB,YAAAA,eAAe1C,QAAQ4B,UAAUU,MAAM;AAE7C,UAAIG,aAAa;AACAA,wBAAAA;AAAAA,MAAAA,OACV;AACN,YAAIC,cAAc;AACjBH,0BAAgBH,KAAKM;AAAAA,QACrB;AAAA,MACD;AAEDF,uBAAiBD,gBAAgBH;AAAAA,IACjC;AAED,WACCO,WAAAA,IAACC,eAAAA,SACA;AAAA,MAAAjC;AAAAA,MACAM,OAAOU,WAAW,SAASrB,SAAYiC;AAAAA,MACvCD,QAAQX,WAAW,SAASrB,SAAYkC;AAAAA,MACxCf,KAAKA,oBAAQF,MAAME,OAAOC;AAAAA,MAC1BmB,QAAQtC;AAAAA,MACRoB;AAAAA,MACI,GAAAC;AAAAA,IAAAA,CACH;AAAA,EAAA,OAEG;AACC,WAAA;AAAA,EACP;AACF;;"}

package/dist/PrismicNextImage.d.ts

@@ -1,48 +1,51 @@
-/// <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" | "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
- */
-export declare const PrismicNextImage: ({ field, imgixParams, alt, fallbackAlt, layout, ...restProps }: PrismicNextImageProps) => JSX.Element | null;
+/// <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" | "width" | "height" | "layout"> & {
+    /**
+     * 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?: "";
+} & (({
+    layout?: "intrinsic" | "fixed";
+} & Pick<ImageProps, "width" | "height">) | {
+    layout: "responsive" | "fill";
+});
+/**
+ * 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, layout, ...restProps }: PrismicNextImageProps) => JSX.Element | null;

package/dist/PrismicNextImage.js

@@ -4,6 +4,18 @@ import { buildURL } from "imgix-url-builder";
 import * as prismicH from "@prismicio/helpers";
 import { __PRODUCTION__ } from "./lib/__PRODUCTION__.js";
 import { devMsg } from "./lib/devMsg.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 imgixLoader = (args) => {
   const url = new URL(args.src);
   const params = {
@@ -16,7 +28,14 @@ const imgixLoader = (args) => {
   }
   return buildURL(args.src, params);
 };
-const PrismicNextImage = ({ field, imgixParams = {}, alt, fallbackAlt, layout, ...restProps }) => {
+const PrismicNextImage = ({
+  field,
+  imgixParams = {},
+  alt,
+  fallbackAlt,
+  layout = "intrinsic",
+  ...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")}`);
@@ -27,7 +46,30 @@ const PrismicNextImage = ({ field, imgixParams = {}, alt, fallbackAlt, layout, .
   }
   if (prismicH.isFilled.imageThumbnail(field)) {
     const src = buildURL(field.url, imgixParams);
-    return jsx(Image, { 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 });
+    const ar = field.dimensions.width / field.dimensions.height;
+    let resolvedWidth = field.dimensions.width;
+    let resolvedHeight = field.dimensions.height;
+    if ((layout === "intrinsic" || layout === "fixed") && ("width" in restProps || "height" in restProps)) {
+      const castedWidth = castInt(restProps.width);
+      const castedHeight = castInt(restProps.height);
+      if (castedWidth) {
+        resolvedWidth = castedWidth;
+      } else {
+        if (castedHeight) {
+          resolvedWidth = ar * castedHeight;
+        }
+      }
+      resolvedHeight = resolvedWidth / ar;
+    }
+    return jsx(Image, {
+      src,
+      width: layout === "fill" ? void 0 : resolvedWidth,
+      height: layout === "fill" ? void 0 : resolvedHeight,
+      alt: alt != null ? alt : field.alt || fallbackAlt,
+      loader: imgixLoader,
+      layout,
+      ...restProps
+    });
   } else {
     return null;
   }

package/dist/PrismicNextImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrismicNextImage.js","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport Image, { ImageProps, ImageLoaderProps } 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\n/**\n * Creates a `next/image` loader for Imgix, which Prismic uses, with an optional\n * collection of default Imgix parameters.\n *\n * @see To learn about `next/image` loaders: https://nextjs.org/docs/api-reference/next/image#loader\n * @see To learn about Imgix's URL API: https://docs.imgix.com/apis/rendering\n */\nconst imgixLoader = (args: ImageLoaderProps): string => {\n\tconst url = new URL(args.src);\n\n\tconst params: ImgixURLParams = {\n\t\tfit: (url.searchParams.get(\"fit\") as ImgixURLParams[\"fit\"]) || \"max\",\n\t\tw: args.width,\n\t\th: undefined,\n\t};\n\n\tif (args.quality) {\n\t\tparams.q = args.quality;\n\t}\n\n\treturn buildURL(args.src, params);\n};\n\nexport type PrismicNextImageProps = Omit<\n\tImageProps,\n\t\"src\" | \"alt\" | \"width\" | \"height\"\n> & {\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\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 *\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\tlayout,\n\t...restProps\n}: PrismicNextImageProps) => {\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\treturn (\n\t\t\t<Image\n\t\t\t\tsrc={src}\n\t\t\t\twidth={layout === \"fill\" ? undefined : field.dimensions.width}\n\t\t\t\theight={layout === \"fill\" ? undefined : field.dimensions.height}\n\t\t\t\talt={alt ?? (field.alt || fallbackAlt)}\n\t\t\t\tloader={imgixLoader}\n\t\t\t\tlayout={layout}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAgBA,MAAM,cAAc,CAAC,SAAkC;AACtD,QAAM,MAAM,IAAI,IAAI,KAAK,GAAG;AAE5B,QAAM,SAAyB;AAAA,IAC9B,KAAM,IAAI,aAAa,IAAI,KAAK,KAA+B;AAAA,IAC/D,GAAG,KAAK;AAAA,IACR,GAAG;AAAA,EAAA;AAGJ,MAAI,KAAK,SAAS;AACjB,WAAO,IAAI,KAAK;AAAA,EAChB;AAEM,SAAA,SAAS,KAAK,KAAK,MAAM;AACjC;AAoDa,MAAA,mBAAmB,CAAC,EAChC,OACA,cAAc,CAAA,GACd,KACA,aACA,WACG,gBACwB;AAC3B,MAAI,CAAC,gBAAgB;AACpB,QAAI,OAAO,QAAQ,YAAY,QAAQ,IAAI;AAC1C,cAAQ,KACP,yQAAyQ,OACxQ,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAO,gBAAgB,YAAY,gBAAgB,IAAI;AAC1D,cAAQ,KACP,ySAAyS,OACxS,6BAA6B,GAC3B;AAAA,IAEJ;AAAA,EACD;AAED,MAAI,SAAS,SAAS,eAAe,KAAK,GAAG;AAC5C,UAAM,MAAM,SAAS,MAAM,KAAK,WAAW;AAE3C,WACCA,IAAC,OAAK,EACL,KACA,OAAO,WAAW,SAAS,SAAY,MAAM,WAAW,OACxD,QAAQ,WAAW,SAAS,SAAY,MAAM,WAAW,QACzD,KAAK,oBAAQ,MAAM,OAAO,aAC1B,QAAQ,aACR,QAAc,GACV,UAAS,CAAA;AAAA,EAAA,OAGT;AACC,WAAA;AAAA,EACP;AACF;"}
+{"version":3,"file":"PrismicNextImage.js","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["import Image, { ImageProps, ImageLoaderProps } 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\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\n/**\n * Creates a `next/image` loader for Imgix, which Prismic uses, with an optional\n * collection of default Imgix parameters.\n *\n * @see To learn about `next/image` loaders: https://nextjs.org/docs/api-reference/next/image#loader\n * @see To learn about Imgix's URL API: https://docs.imgix.com/apis/rendering\n */\nconst imgixLoader = (args: ImageLoaderProps): string => {\n\tconst url = new URL(args.src);\n\n\tconst params: ImgixURLParams = {\n\t\tfit: (url.searchParams.get(\"fit\") as ImgixURLParams[\"fit\"]) || \"max\",\n\t\tw: args.width,\n\t\th: undefined,\n\t};\n\n\tif (args.quality) {\n\t\tparams.q = args.quality;\n\t}\n\n\treturn buildURL(args.src, params);\n};\n\nexport type PrismicNextImageProps = Omit<\n\tImageProps,\n\t\"src\" | \"alt\" | \"width\" | \"height\" | \"layout\"\n> & {\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\t| ({\n\t\t\t\tlayout?: \"intrinsic\" | \"fixed\";\n\t\t  } & Pick<ImageProps, \"width\" | \"height\">)\n\t\t| {\n\t\t\t\tlayout: \"responsive\" | \"fill\";\n\t\t  }\n\t);\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\tlayout = \"intrinsic\",\n\t...restProps\n}: PrismicNextImageProps) => {\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\t\tconst ar = field.dimensions.width / field.dimensions.height;\n\n\t\tlet resolvedWidth = field.dimensions.width;\n\t\tlet resolvedHeight = field.dimensions.height;\n\n\t\tif (\n\t\t\t(layout === \"intrinsic\" || layout === \"fixed\") &&\n\t\t\t(\"width\" in restProps || \"height\" in restProps)\n\t\t) {\n\t\t\tconst castedWidth = castInt(restProps.width);\n\t\t\tconst castedHeight = castInt(restProps.height);\n\n\t\t\tif (castedWidth) {\n\t\t\t\tresolvedWidth = castedWidth;\n\t\t\t} else {\n\t\t\t\tif (castedHeight) {\n\t\t\t\t\tresolvedWidth = ar * castedHeight;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tresolvedHeight = resolvedWidth / ar;\n\t\t}\n\n\t\treturn (\n\t\t\t<Image\n\t\t\t\tsrc={src}\n\t\t\t\twidth={layout === \"fill\" ? undefined : resolvedWidth}\n\t\t\t\theight={layout === \"fill\" ? undefined : resolvedHeight}\n\t\t\t\talt={alt ?? (field.alt || fallbackAlt)}\n\t\t\t\tloader={imgixLoader}\n\t\t\t\tlayout={layout}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n"],"names":["castInt","input","parsed","Number","parseInt","isNaN","undefined","imgixLoader","args","url","URL","src","params","fit","searchParams","get","w","width","h","quality","q","buildURL","PrismicNextImage","field","imgixParams","alt","fallbackAlt","layout","restProps","__PRODUCTION__","console","warn","devMsg","prismicH","isFilled","imageThumbnail","ar","dimensions","height","resolvedWidth","resolvedHeight","castedWidth","castedHeight","_jsx","Image","loader"],"mappings":";;;;;;AAQA,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;AASA,MAAMK,cAAeC,CAAkC,SAAA;AACtD,QAAMC,MAAM,IAAIC,IAAIF,KAAKG,GAAG;AAE5B,QAAMC,SAAyB;AAAA,IAC9BC,KAAMJ,IAAIK,aAAaC,IAAI,KAAK,KAA+B;AAAA,IAC/DC,GAAGR,KAAKS;AAAAA,IACRC,GAAGZ;AAAAA,EAAAA;AAGJ,MAAIE,KAAKW,SAAS;AACjBP,WAAOQ,IAAIZ,KAAKW;AAAAA,EAChB;AAEME,SAAAA,SAASb,KAAKG,KAAKC,MAAM;AACjC;AA0DO,MAAMU,mBAAmB,CAAC;AAAA,EAChCC;AAAAA,EACAC,cAAc,CAAE;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,KACNC;AACoB,MAAI;AAC3B,MAAI,CAACC,gBAAgB;AACpB,QAAI,OAAOJ,QAAQ,YAAYA,QAAQ,IAAI;AAC1CK,cAAQC,KACkQ,yQAAAC,OACxQ,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAON,gBAAgB,YAAYA,gBAAgB,IAAI;AAC1DI,cAAQC,KACkS,ySAAAC,OACxS,6BAA6B,GAC3B;AAAA,IAEJ;AAAA,EACD;AAED,MAAIC,SAASC,SAASC,eAAeZ,KAAK,GAAG;AAC5C,UAAMZ,MAAMU,SAASE,MAAMd,KAAKe,WAAW;AAC3C,UAAMY,KAAKb,MAAMc,WAAWpB,QAAQM,MAAMc,WAAWC;AAEjDC,QAAAA,gBAAgBhB,MAAMc,WAAWpB;AACjCuB,QAAAA,iBAAiBjB,MAAMc,WAAWC;AAEtC,SACEX,WAAW,eAAeA,WAAW,aACrC,WAAWC,aAAa,YAAYA,YACpC;AACKa,YAAAA,cAAczC,QAAQ4B,UAAUX,KAAK;AACrCyB,YAAAA,eAAe1C,QAAQ4B,UAAUU,MAAM;AAE7C,UAAIG,aAAa;AACAA,wBAAAA;AAAAA,MAAAA,OACV;AACN,YAAIC,cAAc;AACjBH,0BAAgBH,KAAKM;AAAAA,QACrB;AAAA,MACD;AAEDF,uBAAiBD,gBAAgBH;AAAAA,IACjC;AAED,WACCO,IAACC,OACA;AAAA,MAAAjC;AAAAA,MACAM,OAAOU,WAAW,SAASrB,SAAYiC;AAAAA,MACvCD,QAAQX,WAAW,SAASrB,SAAYkC;AAAAA,MACxCf,KAAKA,oBAAQF,MAAME,OAAOC;AAAAA,MAC1BmB,QAAQtC;AAAAA,MACRoB;AAAAA,MACI,GAAAC;AAAAA,IAAAA,CACH;AAAA,EAAA,OAEG;AACC,WAAA;AAAA,EACP;AACF;"}

package/dist/PrismicPreview.cjs

@@ -25,7 +25,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
-function PrismicPreview({ repositoryName, children, updatePreviewURL = "/api/preview", exitPreviewURL = "/api/exit-preview" }) {
+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;
@@ -68,14 +73,12 @@ function PrismicPreview({ repositoryName, children, updatePreviewURL = "/api/pre
       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(react.PrismicToolbar, { repositoryName })] });
+  }, [repositoryName, resolvedExitPreviewURL, resolvedUpdatePreviewURL, router$1.isPreview, router$1.basePath]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [children, jsxRuntime.jsx(react.PrismicToolbar, {
+      repositoryName
+    })]
+  });
 }
 exports.PrismicPreview = PrismicPreview;
 //# sourceMappingURL=PrismicPreview.cjs.map

package/dist/PrismicPreview.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PrismicPreview.cjs","sources":["../src/PrismicPreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { PrismicToolbar } from \"@prismicio/react\";\nimport { useRouter } from \"next/router\";\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): JSX.Element {\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<PrismicToolbar repositoryName={repositoryName} />\n\t\t</>\n\t);\n}\n"],"names":["router","useRouter","React","getPrismicPreviewCookie","getPreviewCookieRepositoryName","_jsxs","_Fragment","_jsx","PrismicToolbar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDgB,SAAA,eAAe,EAC9B,gBACA,UACA,mBAAmB,gBACnB,iBAAiB,uBACI;AACrB,QAAMA,WAASC,OAAAA;AAET,QAAA,2BAA2BD,SAAO,WAAW;AAC7C,QAAA,yBAAyBA,SAAO,WAAW;AAEjDE,mBAAM,UAAU,MAAK;AAIpB,UAAM,mBAAmB,YAAW;AAEnC,YAAM,MAAM,MAAM,WAAW,MAAM,wBAAwB;AAE3D,UAAI,IAAI,IAAI;AACX,mBAAW,SAAS;aACd;AACE,gBAAA,MACP,wEAAwE,wDAAwD;AAAA,MAEjI;AAAA,IAAA;AAGI,UAAA,6BAA6B,OAAO,UAAgB;AAEzD,YAAM,eAAc;AAEpB,YAAM;;AAGD,UAAA,0BAA0B,OAAO,UAAgB;AAEtD,YAAM,eAAc;AAGpB,YAAM,MAAM,MAAM,WAAW,MAAM,sBAAsB;AAEzD,UAAI,IAAI,IAAI;AACX,mBAAW,SAAS;aACd;AACE,gBAAA,MACP,6DAA6D,sDAAsD;AAAA,MAEpH;AAAA,IAAA;AAGF,QAAIF,SAAO,WAAW;AAEd,aAAA,iBACN,wBACA,0BAA0B;AAEpB,aAAA,iBAAiB,qBAAqB,uBAAuB;AAAA,IAAA,OAC9D;AACN,YAAM,uBAAuBG,wBAAA,wBAC5B,WAAW,SAAS,MAAM;AAG3B,UAAI,sBAAsB;AAiBnB,cAAA,iCAAiC,OAAO,SAAS,KAAK,WAC3D,OAAO,SAAS,SAASH,SAAO,QAAQ;AAGnC,cAAA,qCACLI,8DAA+B,oBAAoB;AAGnD,YAAA,kCACA,uCAAuC,gBACtC;;QAED;AAAA,MACD;AAAA,IACD;AAGD,WAAO,MAAK;AACJ,aAAA,oBACN,wBACA,0BAA0B;AAEpB,aAAA,oBAAoB,qBAAqB,uBAAuB;AAAA,IAAA;AAAA,EACxE,GACE;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACAJ,SAAO;AAAA,IACPA,SAAO;AAAA,EAAA,CACP;AAED,SACCK,gBAAAC,WAAAA,UAAA,EAAA,UAAA,CACE,UACDC,eAACC,MAAAA,gBAAe,EAAA,gBAAkC,CAAA,EAAA,CAAA;AAGrD;;"}
+{"version":3,"file":"PrismicPreview.cjs","sources":["../src/PrismicPreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { PrismicToolbar } from \"@prismicio/react\";\nimport { useRouter } from \"next/router\";\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): JSX.Element {\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<PrismicToolbar repositoryName={repositoryName} />\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","PrismicToolbar"],"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,KAAAC,WAAAA,UAAA;AAAA,IAAArC,UAAA,CACEA,UACDsC,WAAAA,IAACC,sBAAe;AAAA,MAAAxC;AAAAA,IAAAA,CAAkC,CAAA;AAAA,EAAA,CAAA;AAGrD;;"}

package/dist/PrismicPreview.d.ts

@@ -1,42 +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): JSX.Element;
+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): JSX.Element;

package/dist/PrismicPreview.js

@@ -4,7 +4,12 @@ import { PrismicToolbar } from "@prismicio/react";
 import { useRouter } from "next/router";
 import { getPrismicPreviewCookie } from "./lib/getPrismicPreviewCookie.js";
 import { getPreviewCookieRepositoryName } from "./lib/getPreviewCookieRepositoryName.js";
-function PrismicPreview({ repositoryName, children, updatePreviewURL = "/api/preview", exitPreviewURL = "/api/exit-preview" }) {
+function PrismicPreview({
+  repositoryName,
+  children,
+  updatePreviewURL = "/api/preview",
+  exitPreviewURL = "/api/exit-preview"
+}) {
   const router = useRouter();
   const resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;
   const resolvedExitPreviewURL = router.basePath + exitPreviewURL;
@@ -47,14 +52,12 @@ function PrismicPreview({ repositoryName, children, updatePreviewURL = "/api/pre
       window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
       window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
     };
-  }, [
-    repositoryName,
-    resolvedExitPreviewURL,
-    resolvedUpdatePreviewURL,
-    router.isPreview,
-    router.basePath
-  ]);
-  return jsxs(Fragment, { children: [children, jsx(PrismicToolbar, { repositoryName })] });
+  }, [repositoryName, resolvedExitPreviewURL, resolvedUpdatePreviewURL, router.isPreview, router.basePath]);
+  return jsxs(Fragment, {
+    children: [children, jsx(PrismicToolbar, {
+      repositoryName
+    })]
+  });
 }
 export {
   PrismicPreview

package/dist/PrismicPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrismicPreview.js","sources":["../src/PrismicPreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { PrismicToolbar } from \"@prismicio/react\";\nimport { useRouter } from \"next/router\";\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): JSX.Element {\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<PrismicToolbar repositoryName={repositoryName} />\n\t\t</>\n\t);\n}\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAmDgB,SAAA,eAAe,EAC9B,gBACA,UACA,mBAAmB,gBACnB,iBAAiB,uBACI;AACrB,QAAM,SAAS;AAET,QAAA,2BAA2B,OAAO,WAAW;AAC7C,QAAA,yBAAyB,OAAO,WAAW;AAEjD,QAAM,UAAU,MAAK;AAIpB,UAAM,mBAAmB,YAAW;AAEnC,YAAM,MAAM,MAAM,WAAW,MAAM,wBAAwB;AAE3D,UAAI,IAAI,IAAI;AACX,mBAAW,SAAS;aACd;AACE,gBAAA,MACP,wEAAwE,wDAAwD;AAAA,MAEjI;AAAA,IAAA;AAGI,UAAA,6BAA6B,OAAO,UAAgB;AAEzD,YAAM,eAAc;AAEpB,YAAM;;AAGD,UAAA,0BAA0B,OAAO,UAAgB;AAEtD,YAAM,eAAc;AAGpB,YAAM,MAAM,MAAM,WAAW,MAAM,sBAAsB;AAEzD,UAAI,IAAI,IAAI;AACX,mBAAW,SAAS;aACd;AACE,gBAAA,MACP,6DAA6D,sDAAsD;AAAA,MAEpH;AAAA,IAAA;AAGF,QAAI,OAAO,WAAW;AAEd,aAAA,iBACN,wBACA,0BAA0B;AAEpB,aAAA,iBAAiB,qBAAqB,uBAAuB;AAAA,IAAA,OAC9D;AACN,YAAM,uBAAuB,wBAC5B,WAAW,SAAS,MAAM;AAG3B,UAAI,sBAAsB;AAiBnB,cAAA,iCAAiC,OAAO,SAAS,KAAK,WAC3D,OAAO,SAAS,SAAS,OAAO,QAAQ;AAGnC,cAAA,qCACL,+BAA+B,oBAAoB;AAGnD,YAAA,kCACA,uCAAuC,gBACtC;;QAED;AAAA,MACD;AAAA,IACD;AAGD,WAAO,MAAK;AACJ,aAAA,oBACN,wBACA,0BAA0B;AAEpB,aAAA,oBAAoB,qBAAqB,uBAAuB;AAAA,IAAA;AAAA,EACxE,GACE;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,EAAA,CACP;AAED,SACCA,KAAAC,UAAA,EAAA,UAAA,CACE,UACDC,IAAC,gBAAe,EAAA,gBAAkC,CAAA,EAAA,CAAA;AAGrD;"}
+{"version":3,"file":"PrismicPreview.js","sources":["../src/PrismicPreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { PrismicToolbar } from \"@prismicio/react\";\nimport { useRouter } from \"next/router\";\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): JSX.Element {\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<PrismicToolbar repositoryName={repositoryName} />\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","PrismicToolbar"],"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,KAAAC,UAAA;AAAA,IAAArC,UAAA,CACEA,UACDsC,IAACC,gBAAe;AAAA,MAAAxC;AAAAA,IAAAA,CAAkC,CAAA;AAAA,EAAA,CAAA;AAGrD;"}

package/dist/enableAutoPreviews.d.ts

@@ -1,38 +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;
+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/exitPreview.d.ts

@@ -1,34 +1,34 @@
-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"];
-    };
-    /**
-     * @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.
- */
-export declare function exitPreview(config: ExitPreviewConfig): void;
+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"];
+    };
+    /**
+     * @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.
+ */
+export declare function exitPreview(config: ExitPreviewConfig): void;

package/dist/index.d.ts

@@ -1,13 +1,13 @@
-export { setPreviewData } from "./setPreviewData";
-export type { SetPreviewDataConfig } from "./setPreviewData";
-export { exitPreview } from "./exitPreview";
-export type { ExitPreviewConfig } from "./exitPreview";
-export { PrismicPreview } from "./PrismicPreview";
-export type { PrismicPreviewProps } from "./PrismicPreview";
-export { enableAutoPreviews } from "./enableAutoPreviews";
-export type { EnableAutoPreviewsConfig } from "./enableAutoPreviews";
-export { redirectToPreviewURL } from "./redirectToPreviewURL";
-export type { RedirectToPreviewURLConfig } from "./redirectToPreviewURL";
-export { PrismicNextImage } from "./PrismicNextImage";
-export type { PrismicNextImageProps } from "./PrismicNextImage";
-export type { CreateClientConfig } from "./types";
+export { setPreviewData } from "./setPreviewData";
+export type { SetPreviewDataConfig } from "./setPreviewData";
+export { exitPreview } from "./exitPreview";
+export type { ExitPreviewConfig } from "./exitPreview";
+export { PrismicPreview } from "./PrismicPreview";
+export type { PrismicPreviewProps } from "./PrismicPreview";
+export { enableAutoPreviews } from "./enableAutoPreviews";
+export type { EnableAutoPreviewsConfig } from "./enableAutoPreviews";
+export { redirectToPreviewURL } from "./redirectToPreviewURL";
+export type { RedirectToPreviewURLConfig } from "./redirectToPreviewURL";
+export { PrismicNextImage } from "./PrismicNextImage";
+export type { PrismicNextImageProps } from "./PrismicNextImage";
+export type { CreateClientConfig } from "./types";

package/dist/lib/__PRODUCTION__.d.ts

@@ -1,7 +1,7 @@
-/**
- * `true` if in the production environment, `false` otherwise.
- *
- * This boolean can be used to perform actions only in development environments,
- * such as logging.
- */
-export declare const __PRODUCTION__: boolean;
+/**
+ * `true` if in the production environment, `false` otherwise.
+ *
+ * This boolean can be used to perform actions only in development environments,
+ * such as logging.
+ */
+export declare const __PRODUCTION__: boolean;

package/dist/lib/devMsg.d.ts

@@ -1,16 +1,16 @@
-/**
- * Returns a `prismic.dev/msg` URL for a given message slug.
- *
- * @example
- *
- * ```ts
- * devMsg("missing-param");
- * // => "https://prismic.dev/msg/next/v1.2.3/missing-param.md"
- * ```
- *
- * @param slug - Slug for the message. This corresponds to a Markdown file in
- *   the Git repository's `/messages` directory.
- *
- * @returns The `prismic.dev/msg` URL for the given slug.
- */
-export declare const devMsg: (slug: string) => string;
+/**
+ * Returns a `prismic.dev/msg` URL for a given message slug.
+ *
+ * @example
+ *
+ * ```ts
+ * devMsg("missing-param");
+ * // => "https://prismic.dev/msg/next/v1.2.3/missing-param.md"
+ * ```
+ *
+ * @param slug - Slug for the message. This corresponds to a Markdown file in
+ *   the Git repository's `/messages` directory.
+ *
+ * @returns The `prismic.dev/msg` URL for the given slug.
+ */
+export declare const devMsg: (slug: string) => string;

package/dist/lib/getPreviewCookieRepositoryName.d.ts

@@ -1,9 +1,9 @@
-/**
- * Extracts preview reference repo name from stringified Prismic preview cookie
- *
- * @param previewCookie - The Prismic preview cookie.
- *
- * @returns The repository name for the Prismic preview cookie. If the cookie
- *   represents an inactive preview session, `undefined` will be returned.
- */
-export declare const getPreviewCookieRepositoryName: (previewCookie: string) => string | undefined;
+/**
+ * Extracts preview reference repo name from stringified Prismic preview cookie
+ *
+ * @param previewCookie - The Prismic preview cookie.
+ *
+ * @returns The repository name for the Prismic preview cookie. If the cookie
+ *   represents an inactive preview session, `undefined` will be returned.
+ */
+export declare const getPreviewCookieRepositoryName: (previewCookie: string) => string | undefined;

package/dist/lib/getPrismicPreviewCookie.d.ts

@@ -1,9 +1,9 @@
-/**
- * Returns the value of a cookie from a given cookie store.
- *
- * @param cookieJar - The stringified cookie store from which to read the
- *   cookie.
- *
- * @returns The value of the cookie, if it exists.
- */
-export declare const getPrismicPreviewCookie: (cookieJar: string) => string | undefined;
+/**
+ * Returns the value of a cookie from a given cookie store.
+ *
+ * @param cookieJar - The stringified cookie store from which to read the
+ *   cookie.
+ *
+ * @returns The value of the cookie, if it exists.
+ */
+export declare const getPrismicPreviewCookie: (cookieJar: string) => string | undefined;

package/dist/package.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const version = "0.1.6-alpha.1";
+const version = "0.1.6";
 exports.version = version;
 //# sourceMappingURL=package.cjs.map

package/dist/package.js

@@ -1,4 +1,4 @@
-const version = "0.1.6-alpha.1";
+const version = "0.1.6";
 export {
   version
 };

package/dist/redirectToPreviewURL.d.ts

@@ -1,59 +1,59 @@
-import type { Client } from "@prismicio/client";
-import type { NextApiRequest, NextApiResponse } from "next";
-import type { LinkResolverFunction } from "@prismicio/helpers";
-/**
- * Preview config for enabling previews with redirectToPreviewURL
- */
-export 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.
-     *
-     * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
-     */
-    req: {
-        query: NextApiRequest["query"];
-    };
-    /**
-     * 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: {
-        redirect: NextApiResponse["redirect"];
-    };
-    /**
-     * The Prismic client configured for the preview session's repository.
-     */
-    client: Client;
-    /**
-     * A Link Resolver used to resolve the previewed document's URL.
-     *
-     * @see To learn more about Link Resolver: {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
-     */
-    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.
- */
-export declare function redirectToPreviewURL<TLinkResolverFunction extends LinkResolverFunction<any>>(config: RedirectToPreviewURLConfig<TLinkResolverFunction>): Promise<void>;
+import type { Client } from "@prismicio/client";
+import type { NextApiRequest, NextApiResponse } from "next";
+import type { LinkResolverFunction } from "@prismicio/helpers";
+/**
+ * Preview config for enabling previews with redirectToPreviewURL
+ */
+export 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.
+     *
+     * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
+     */
+    req: {
+        query: NextApiRequest["query"];
+    };
+    /**
+     * 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: {
+        redirect: NextApiResponse["redirect"];
+    };
+    /**
+     * The Prismic client configured for the preview session's repository.
+     */
+    client: Client;
+    /**
+     * A Link Resolver used to resolve the previewed document's URL.
+     *
+     * @see To learn more about Link Resolver: {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
+     */
+    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.
+ */
+export declare function redirectToPreviewURL<TLinkResolverFunction extends LinkResolverFunction<any>>(config: RedirectToPreviewURLConfig<TLinkResolverFunction>): Promise<void>;

package/dist/setPreviewData.d.ts

@@ -1,29 +1,29 @@
-import { NextApiResponse, NextApiRequest } from "next";
-/**
- * Configuration for `setPreviewData`.
- */
-export declare type SetPreviewDataConfig = {
-    /**
-     * 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: {
-        query: NextApiRequest["query"];
-        cookies: NextApiRequest["cookies"];
-    };
-    /**
-     * 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: {
-        setPreviewData: NextApiResponse["setPreviewData"];
-    };
-};
-/**
- * Set Prismic preview data for Next.js's Preview Mode.
- */
-export declare function setPreviewData({ req, res }: SetPreviewDataConfig): void;
+import { NextApiResponse, NextApiRequest } from "next";
+/**
+ * Configuration for `setPreviewData`.
+ */
+export declare type SetPreviewDataConfig = {
+    /**
+     * 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: {
+        query: NextApiRequest["query"];
+        cookies: NextApiRequest["cookies"];
+    };
+    /**
+     * 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: {
+        setPreviewData: NextApiResponse["setPreviewData"];
+    };
+};
+/**
+ * Set Prismic preview data for Next.js's Preview Mode.
+ */
+export declare function setPreviewData({ req, res }: SetPreviewDataConfig): void;

package/dist/types.d.ts

@@ -1,21 +1,21 @@
-import type { PreviewData, NextApiRequest } from "next";
-import type { ClientConfig } from "@prismicio/client";
-/**
- * Configuration for creating a Prismic client with automatic preview support in
- * Next.js apps.
- */
-export 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;
-} & ClientConfig;
+import type { PreviewData, NextApiRequest } from "next";
+import type { ClientConfig } from "@prismicio/client";
+/**
+ * Configuration for creating a Prismic client with automatic preview support in
+ * Next.js apps.
+ */
+export 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;
+} & ClientConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/next",
-	"version": "0.1.6-alpha.1",
+	"version": "0.1.6",
 	"description": "Helpers to integrate Prismic into Next.js apps",
 	"keywords": [
 		"typescript",
@@ -46,8 +46,8 @@
 		"unit:watch": "vitest watch"
 	},
 	"dependencies": {
-		"@prismicio/client": "^6.0.0",
-		"@prismicio/helpers": "^2.3.3",
+		"@prismicio/client": "^6.7.1",
+		"@prismicio/helpers": "^2.3.5",
 		"@prismicio/react": "^2.5.0",
 		"@prismicio/types": "^0.2.3",
 		"imgix-url-builder": "^0.0.3"
@@ -56,16 +56,17 @@
 		"@prismicio/mock": "^0.1.1",
 		"@size-limit/preset-small-lib": "^8.1.0",
 		"@types/react-test-renderer": "^18.0.0",
-		"@typescript-eslint/eslint-plugin": "^5.36.2",
-		"@typescript-eslint/parser": "^5.36.2",
-		"@vitest/coverage-c8": "^0.23.1",
-		"eslint": "^8.23.0",
+		"@typescript-eslint/eslint-plugin": "^5.40.0",
+		"@typescript-eslint/parser": "^5.40.0",
+		"@vitejs/plugin-react": "^2.1.0",
+		"@vitest/coverage-c8": "^0.24.1",
+		"eslint": "^8.25.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-react": "^7.31.7",
+		"eslint-plugin-react": "^7.31.10",
 		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-tsdoc": "^0.2.16",
-		"happy-dom": "^6.0.4",
+		"eslint-plugin-tsdoc": "^0.2.17",
+		"happy-dom": "^7.5.6",
 		"next": "^12.1.4",
 		"nyc": "^15.1.0",
 		"prettier": "^2.7.1",
@@ -74,10 +75,10 @@
 		"react-test-renderer": "^18.2.0",
 		"size-limit": "^8.1.0",
 		"standard-version": "^9.5.0",
-		"typescript": "^4.8.3",
-		"vite": "^3.1.1",
-		"vite-plugin-sdk": "^0.0.2",
-		"vitest": "^0.23.1"
+		"typescript": "^4.8.4",
+		"vite": "^3.1.7",
+		"vite-plugin-sdk": "^0.0.3",
+		"vitest": "^0.24.1"
 	},
 	"peerDependencies": {
 		"@prismicio/client": "^6.0.0",

package/src/PrismicNextImage.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import Image, { ImageProps, ImageLoaderProps } from "next/image";
 import { buildURL, ImgixURLParams } from "imgix-url-builder";
 import * as prismicH from "@prismicio/helpers";
@@ -7,6 +6,20 @@ import * as prismicT from "@prismicio/types";
 import { __PRODUCTION__ } from "./lib/__PRODUCTION__";
 import { devMsg } from "./lib/devMsg";
 
+const castInt = (input: string | number | undefined): number | undefined => {
+	if (typeof input === "number" || typeof input === "undefined") {
+		return input;
+	} else {
+		const parsed = Number.parseInt(input);
+
+		if (Number.isNaN(parsed)) {
+			return undefined;
+		} else {
+			return parsed;
+		}
+	}
+};
+
 /**
  * Creates a `next/image` loader for Imgix, which Prismic uses, with an optional
  * collection of default Imgix parameters.
@@ -32,7 +45,7 @@ const imgixLoader = (args: ImageLoaderProps): string => {
 
 export type PrismicNextImageProps = Omit<
 	ImageProps,
-	"src" | "alt" | "width" | "height"
+	"src" | "alt" | "width" | "height" | "layout"
 > & {
 	/**
 	 * The Prismic Image field or thumbnail to render.
@@ -62,7 +75,14 @@ export type PrismicNextImageProps = Omit<
 	 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
 	 */
 	fallbackAlt?: "";
-};
+} & (
+		| ({
+				layout?: "intrinsic" | "fixed";
+		  } & Pick<ImageProps, "width" | "height">)
+		| {
+				layout: "responsive" | "fill";
+		  }
+	);
 
 /**
  * React component that renders an image from a Prismic Image field or one of
@@ -77,7 +97,6 @@ export type PrismicNextImageProps = Omit<
  *
  * @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 const PrismicNextImage = ({
@@ -85,7 +104,7 @@ export const PrismicNextImage = ({
 	imgixParams = {},
 	alt,
 	fallbackAlt,
-	layout,
+	layout = "intrinsic",
 	...restProps
 }: PrismicNextImageProps) => {
 	if (!__PRODUCTION__) {
@@ -108,12 +127,34 @@ export const PrismicNextImage = ({
 
 	if (prismicH.isFilled.imageThumbnail(field)) {
 		const src = buildURL(field.url, imgixParams);
+		const ar = field.dimensions.width / field.dimensions.height;
+
+		let resolvedWidth = field.dimensions.width;
+		let resolvedHeight = field.dimensions.height;
+
+		if (
+			(layout === "intrinsic" || layout === "fixed") &&
+			("width" in restProps || "height" in restProps)
+		) {
+			const castedWidth = castInt(restProps.width);
+			const castedHeight = castInt(restProps.height);
+
+			if (castedWidth) {
+				resolvedWidth = castedWidth;
+			} else {
+				if (castedHeight) {
+					resolvedWidth = ar * castedHeight;
+				}
+			}
+
+			resolvedHeight = resolvedWidth / ar;
+		}
 
 		return (
 			<Image
 				src={src}
-				width={layout === "fill" ? undefined : field.dimensions.width}
-				height={layout === "fill" ? undefined : field.dimensions.height}
+				width={layout === "fill" ? undefined : resolvedWidth}
+				height={layout === "fill" ? undefined : resolvedHeight}
 				alt={alt ?? (field.alt || fallbackAlt)}
 				loader={imgixLoader}
 				layout={layout}