@prismicio/next 1.0.0-alpha.1 → 1.0.0-alpha.2

package/dist/PrismicNextImage.cjs

@@ -6,6 +6,7 @@ const imgixUrlBuilder = require("imgix-url-builder");
 const prismicH = require("@prismicio/helpers");
 const __PRODUCTION__ = require("./lib/__PRODUCTION__.cjs");
 const devMsg = require("./lib/devMsg.cjs");
+const imgixLoader = require("./imgixLoader.cjs");
 const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 function _interopNamespace(e) {
   if (e && e.__esModule)
@@ -39,23 +40,15 @@ const castInt = (input) => {
     }
   }
 };
-const imgixLoader = (args) => {
-  const url = new URL(args.src);
-  const params = {
-    fit: url.searchParams.get("fit") || "max",
-    w: args.width,
-    h: void 0
-  };
-  if (args.quality) {
-    params.q = args.quality;
-  }
-  return imgixUrlBuilder.buildURL(args.src, params);
-};
 const PrismicNextImage = ({
   field,
   imgixParams = {},
   alt,
   fallbackAlt,
+  fill,
+  width,
+  height,
+  fallback = null,
   ...restProps
 }) => {
   if (!__PRODUCTION__.__PRODUCTION__) {
@@ -69,31 +62,28 @@ const PrismicNextImage = ({
   if (prismicH__namespace.isFilled.imageThumbnail(field)) {
     const src = imgixUrlBuilder.buildURL(field.url, imgixParams);
     const ar = field.dimensions.width / field.dimensions.height;
-    let resolvedWidth = field.dimensions.width;
-    let resolvedHeight = field.dimensions.height;
-    const layout = restProps.layout;
-    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;
+    const castedWidth = castInt(width);
+    const castedHeight = castInt(height);
+    let resolvedWidth = castedWidth != null ? castedWidth : field.dimensions.width;
+    let resolvedHeight = castedHeight != null ? castedHeight : field.dimensions.width;
+    if (castedWidth != null && castedHeight == null) {
+      resolvedHeight = castedWidth / ar;
+    } else if (castedWidth == null && castedHeight != null) {
+      resolvedWidth = castedHeight * ar;
     }
     return jsxRuntime.jsx(Image__default.default, {
       src,
-      width: layout === "fill" ? void 0 : resolvedWidth,
-      height: layout === "fill" ? void 0 : resolvedHeight,
+      width: fill ? void 0 : resolvedWidth,
+      height: fill ? void 0 : resolvedHeight,
       alt: alt != null ? alt : field.alt || fallbackAlt,
-      loader: imgixLoader,
+      fill,
+      loader: imgixLoader.imgixLoader,
       ...restProps
     });
   } else {
-    return null;
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: fallback
+    });
   }
 };
 exports.PrismicNextImage = PrismicNextImage;

package/dist/PrismicNextImage.cjs.map

@@ -1 +1 @@
-{"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\n/**\n * Value for `next/image`'s `layout` prop which existed in Next 12 and lower.\n * `<PrismicNextImage>` is comatible with the current and legacy image\n * components, requiring us to handle both APIs.\n */\ntype LegacyImageLayout = \"intrinsic\" | \"fixed\" | \"responsive\" | \"fill\";\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<ImageProps, \"src\" | \"alt\"> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismicT.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * @see https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: ImgixURLParams;\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n};\n\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\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\t// If a layout prop is provied, we can assume this image is\n\t\t// using Next 12. We must handle the `width` and `height` props\n\t\t// in a unique way when using the legacy `next/image` component.\n\t\tconst layout: LegacyImageLayout =\n\t\t\t// @ts-expect-error - Layout does not exist in `next/image` as of Next 13.0.0.\n\t\t\trestProps.layout;\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\t// A non-null assertion is required since we\n\t\t\t\t// can't statically know if an alt attribute is\n\t\t\t\t// available.\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\talt={(alt ?? (field.alt || fallbackAlt))!}\n\t\t\t\tloader={imgixLoader}\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","restProps","__PRODUCTION__","console","warn","devMsg","prismicH","isFilled","imageThumbnail","ar","dimensions","height","resolvedWidth","resolvedHeight","layout","castedWidth","castedHeight","_jsx","Image","loader"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,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;AAgDO,MAAMU,mBAAmB,CAAC;AAAA,EAChCC;AAAAA,EACAC,cAAc;EACdC;AAAAA,EACAC;AAAAA,KACGC;AAAS,MACe;AAC3B,MAAI,CAACC,eAAAA,gBAAgB;AACpB,QAAI,OAAOH,QAAQ,YAAYA,QAAQ,IAAI;AAC1CI,cAAQC,KACkQ,yQAAAC,OACxQ,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAOL,gBAAgB,YAAYA,gBAAgB,IAAI;AAC1DG,cAAQC,KACkS,ySAAAC,OACxS,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAAA,EACD;AAED,MAAIC,oBAASC,SAASC,eAAeX,KAAK,GAAG;AAC5C,UAAMZ,MAAMU,gBAAAA,SAASE,MAAMd,KAAKe,WAAW;AAC3C,UAAMW,KAAKZ,MAAMa,WAAWnB,QAAQM,MAAMa,WAAWC;AAEjDC,QAAAA,gBAAgBf,MAAMa,WAAWnB;AACjCsB,QAAAA,iBAAiBhB,MAAMa,WAAWC;AAKtC,UAAMG,SAELb,UAAUa;AAEX,SACEA,WAAW,eAAeA,WAAW,aACrC,WAAWb,aAAa,YAAYA,YACpC;AACKc,YAAAA,cAAczC,QAAQ2B,UAAUV,KAAK;AACrCyB,YAAAA,eAAe1C,QAAQ2B,UAAUU,MAAM;AAE7C,UAAII,aAAa;AACAA,wBAAAA;AAAAA,MAAAA,OACV;AACN,YAAIC,cAAc;AACjBJ,0BAAgBH,KAAKO;AAAAA,QACrB;AAAA,MACD;AAEDH,uBAAiBD,gBAAgBH;AAAAA,IACjC;AAED,WACCQ,WAAAA,IAACC,eAAAA,SAAK;AAAA,MACLjC;AAAAA,MACAM,OAAOuB,WAAW,SAASlC,SAAYgC;AAAAA,MACvCD,QAAQG,WAAW,SAASlC,SAAYiC;AAAAA,MAKxCd,KAAMA,oBAAQF,MAAME,OAAOC;AAAAA,MAC3BmB,QAAQtC;AAAAA,SACJoB;AAAAA,IAAAA,CAAS;AAAA,EAAA,OAGT;AACC,WAAA;AAAA,EACP;AACF;;"}
+{"version":3,"file":"PrismicNextImage.cjs","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["import Image, { ImageProps } from \"next/image\";\nimport { buildURL, ImgixURLParams } from \"imgix-url-builder\";\nimport * as prismicH from \"@prismicio/helpers\";\nimport * as prismicT from \"@prismicio/types\";\n\nimport { __PRODUCTION__ } from \"./lib/__PRODUCTION__\";\nimport { devMsg } from \"./lib/devMsg\";\n\nimport { imgixLoader } from \"./imgixLoader\";\n\nconst castInt = (input: string | number | undefined): number | undefined => {\n\tif (typeof input === \"number\" || typeof input === \"undefined\") {\n\t\treturn input;\n\t} else {\n\t\tconst parsed = Number.parseInt(input);\n\n\t\tif (Number.isNaN(parsed)) {\n\t\t\treturn undefined;\n\t\t} else {\n\t\t\treturn parsed;\n\t\t}\n\t}\n};\n\nexport type PrismicNextImageProps = Omit<ImageProps, \"src\" | \"alt\"> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismicT.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * @see https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: ImgixURLParams;\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n\n\t/**\n\t * Rendered when the field is empty. If a fallback is not given, `null` will\n\t * be rendered.\n\t */\n\tfallback?: React.ReactNode;\n};\n\n/**\n * React component that renders an image from a Prismic Image field or one of\n * its thumbnails using `next/image`. It will automatically set the `alt`\n * attribute using the Image field's `alt` property.\n *\n * It uses an Imgix URL-based loader by default. A custom loader can be provided\n * with the `loader` prop. If you would like to use the Next.js Image\n * Optimization API instead, set `loader={undefined}`.\n *\n * @param props - Props for the component.\n *\n * @returns A responsive image component using `next/image` for the given Image\n *   field.\n * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image\n */\nexport const PrismicNextImage = ({\n\tfield,\n\timgixParams = {},\n\talt,\n\tfallbackAlt,\n\tfill,\n\twidth,\n\theight,\n\tfallback = null,\n\t...restProps\n}: PrismicNextImageProps): JSX.Element => {\n\tif (!__PRODUCTION__) {\n\t\tif (typeof alt === \"string\" && alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicNextImage] The \"alt\" prop can only be used to declare an image as decorative by passing an empty string (alt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"alt\" prop or changing it to alt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (typeof fallbackAlt === \"string\" && fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicNextImage] The \"fallbackAlt\" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"fallbackAlt\" prop or changing it to fallbackAlt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\t}\n\n\tif (prismicH.isFilled.imageThumbnail(field)) {\n\t\tconst src = buildURL(field.url, imgixParams);\n\n\t\tconst ar = field.dimensions.width / field.dimensions.height;\n\n\t\tconst castedWidth = castInt(width);\n\t\tconst castedHeight = castInt(height);\n\n\t\tlet resolvedWidth = castedWidth ?? field.dimensions.width;\n\t\tlet resolvedHeight = castedHeight ?? field.dimensions.width;\n\n\t\tif (castedWidth != null && castedHeight == null) {\n\t\t\tresolvedHeight = castedWidth / ar;\n\t\t} else if (castedWidth == null && castedHeight != null) {\n\t\t\tresolvedWidth = castedHeight * ar;\n\t\t}\n\n\t\treturn (\n\t\t\t<Image\n\t\t\t\tsrc={src}\n\t\t\t\twidth={fill ? undefined : resolvedWidth}\n\t\t\t\theight={fill ? undefined : resolvedHeight}\n\t\t\t\t// A non-null assertion is required since we\n\t\t\t\t// can't statically know if an alt attribute is\n\t\t\t\t// available.\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\talt={(alt ?? (field.alt || fallbackAlt))!}\n\t\t\t\tfill={fill}\n\t\t\t\tloader={imgixLoader}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn <>{fallback}</>;\n\t}\n};\n"],"names":["castInt","input","parsed","Number","parseInt","isNaN","undefined","PrismicNextImage","field","imgixParams","alt","fallbackAlt","fill","width","height","fallback","restProps","__PRODUCTION__","console","warn","devMsg","prismicH","isFilled","imageThumbnail","src","buildURL","url","ar","dimensions","castedWidth","castedHeight","resolvedWidth","resolvedHeight","_jsx","Image","loader","imgixLoader","_Fragment","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,UAAWC,CAA0D,UAAA;AAC1E,MAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,aAAa;AACvDA,WAAAA;AAAAA,EAAAA,OACD;AACAC,UAAAA,SAASC,OAAOC,SAASH,KAAK;AAEhCE,QAAAA,OAAOE,MAAMH,MAAM,GAAG;AAClBI,aAAAA;AAAAA,IAAAA,OACD;AACCJ,aAAAA;AAAAA,IACP;AAAA,EACD;AACF;AAsDO,MAAMK,mBAAmB,CAAC;AAAA,EAChCC;AAAAA,EACAC,cAAc,CAAE;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,KACRC;AAAS,MAC4B;AACxC,MAAI,CAACC,eAAAA,gBAAgB;AACpB,QAAI,OAAOP,QAAQ,YAAYA,QAAQ,IAAI;AAC1CQ,cAAQC,KACkQ,yQAAAC,OACxQ,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAOT,gBAAgB,YAAYA,gBAAgB,IAAI;AAC1DO,cAAQC,KACkS,ySAAAC,OACxS,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAAA,EACD;AAED,MAAIC,oBAASC,SAASC,eAAef,KAAK,GAAG;AAC5C,UAAMgB,MAAMC,gBAAAA,SAASjB,MAAMkB,KAAKjB,WAAW;AAE3C,UAAMkB,KAAKnB,MAAMoB,WAAWf,QAAQL,MAAMoB,WAAWd;AAE/Ce,UAAAA,cAAc7B,QAAQa,KAAK;AAC3BiB,UAAAA,eAAe9B,QAAQc,MAAM;AAE/BiB,QAAAA,gBAAgBF,oCAAerB,MAAMoB,WAAWf;AAChDmB,QAAAA,iBAAiBF,sCAAgBtB,MAAMoB,WAAWf;AAElDgB,QAAAA,eAAe,QAAQC,gBAAgB,MAAM;AAChDE,uBAAiBH,cAAcF;AAAAA,IACrBE,WAAAA,eAAe,QAAQC,gBAAgB,MAAM;AACvDC,sBAAgBD,eAAeH;AAAAA,IAC/B;AAED,WACCM,WAAAA,IAACC,eAAAA,SAAK;AAAA,MACLV;AAAAA,MACAX,OAAOD,OAAON,SAAYyB;AAAAA,MAC1BjB,QAAQF,OAAON,SAAY0B;AAAAA,MAK3BtB,KAAMA,oBAAQF,MAAME,OAAOC;AAAAA,MAC3BC;AAAAA,MACAuB,QAAQC,YAAAA;AAAAA,MACJ,GAAApB;AAAAA,IAAAA,CACH;AAAA,EAAA,OAEG;AACN,WAAOiB,WAAAA,IAAAI,WAAAA,UAAA;AAAA,MAAAC,UAAGvB;AAAAA,IAAAA,CAAQ;AAAA,EAClB;AACF;;"}

package/dist/PrismicNextImage.d.ts

@@ -28,6 +28,11 @@ export declare type PrismicNextImageProps = Omit<ImageProps, "src" | "alt"> & {
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
      */
     fallbackAlt?: "";
+    /**
+     * Rendered when the field is empty. If a fallback is not given, `null` will
+     * be rendered.
+     */
+    fallback?: React.ReactNode;
 };
 /**
  * React component that renders an image from a Prismic Image field or one of
@@ -44,4 +49,4 @@ export declare type PrismicNextImageProps = Omit<ImageProps, "src" | "alt"> & {
  *   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, ...restProps }: PrismicNextImageProps) => JSX.Element | null;
+export declare const PrismicNextImage: ({ field, imgixParams, alt, fallbackAlt, fill, width, height, fallback, ...restProps }: PrismicNextImageProps) => JSX.Element;

package/dist/PrismicNextImage.js

@@ -1,9 +1,10 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, Fragment } from "react/jsx-runtime";
 import Image from "next/image";
 import { buildURL } from "imgix-url-builder";
 import * as prismicH from "@prismicio/helpers";
 import { __PRODUCTION__ } from "./lib/__PRODUCTION__.js";
 import { devMsg } from "./lib/devMsg.js";
+import { imgixLoader } from "./imgixLoader.js";
 const castInt = (input) => {
   if (typeof input === "number" || typeof input === "undefined") {
     return input;
@@ -16,23 +17,15 @@ const castInt = (input) => {
     }
   }
 };
-const imgixLoader = (args) => {
-  const url = new URL(args.src);
-  const params = {
-    fit: url.searchParams.get("fit") || "max",
-    w: args.width,
-    h: void 0
-  };
-  if (args.quality) {
-    params.q = args.quality;
-  }
-  return buildURL(args.src, params);
-};
 const PrismicNextImage = ({
   field,
   imgixParams = {},
   alt,
   fallbackAlt,
+  fill,
+  width,
+  height,
+  fallback = null,
   ...restProps
 }) => {
   if (!__PRODUCTION__) {
@@ -46,31 +39,28 @@ 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;
-    const layout = restProps.layout;
-    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;
+    const castedWidth = castInt(width);
+    const castedHeight = castInt(height);
+    let resolvedWidth = castedWidth != null ? castedWidth : field.dimensions.width;
+    let resolvedHeight = castedHeight != null ? castedHeight : field.dimensions.width;
+    if (castedWidth != null && castedHeight == null) {
+      resolvedHeight = castedWidth / ar;
+    } else if (castedWidth == null && castedHeight != null) {
+      resolvedWidth = castedHeight * ar;
     }
     return jsx(Image, {
       src,
-      width: layout === "fill" ? void 0 : resolvedWidth,
-      height: layout === "fill" ? void 0 : resolvedHeight,
+      width: fill ? void 0 : resolvedWidth,
+      height: fill ? void 0 : resolvedHeight,
       alt: alt != null ? alt : field.alt || fallbackAlt,
+      fill,
       loader: imgixLoader,
       ...restProps
     });
   } else {
-    return null;
+    return jsx(Fragment, {
+      children: fallback
+    });
   }
 };
 export {

package/dist/PrismicNextImage.js.map

@@ -1 +1 @@
-{"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\n/**\n * Value for `next/image`'s `layout` prop which existed in Next 12 and lower.\n * `<PrismicNextImage>` is comatible with the current and legacy image\n * components, requiring us to handle both APIs.\n */\ntype LegacyImageLayout = \"intrinsic\" | \"fixed\" | \"responsive\" | \"fill\";\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<ImageProps, \"src\" | \"alt\"> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismicT.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * @see https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: ImgixURLParams;\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n};\n\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\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\t// If a layout prop is provied, we can assume this image is\n\t\t// using Next 12. We must handle the `width` and `height` props\n\t\t// in a unique way when using the legacy `next/image` component.\n\t\tconst layout: LegacyImageLayout =\n\t\t\t// @ts-expect-error - Layout does not exist in `next/image` as of Next 13.0.0.\n\t\t\trestProps.layout;\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\t// A non-null assertion is required since we\n\t\t\t\t// can't statically know if an alt attribute is\n\t\t\t\t// available.\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\talt={(alt ?? (field.alt || fallbackAlt))!}\n\t\t\t\tloader={imgixLoader}\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","restProps","__PRODUCTION__","console","warn","devMsg","prismicH","isFilled","imageThumbnail","ar","dimensions","height","resolvedWidth","resolvedHeight","layout","castedWidth","castedHeight","_jsx","Image","loader"],"mappings":";;;;;;AAeA,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;AAgDO,MAAMU,mBAAmB,CAAC;AAAA,EAChCC;AAAAA,EACAC,cAAc;EACdC;AAAAA,EACAC;AAAAA,KACGC;AAAS,MACe;AAC3B,MAAI,CAACC,gBAAgB;AACpB,QAAI,OAAOH,QAAQ,YAAYA,QAAQ,IAAI;AAC1CI,cAAQC,KACkQ,yQAAAC,OACxQ,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAOL,gBAAgB,YAAYA,gBAAgB,IAAI;AAC1DG,cAAQC,KACkS,ySAAAC,OACxS,6BAA6B,GAC3B;AAAA,IAEJ;AAAA,EACD;AAED,MAAIC,SAASC,SAASC,eAAeX,KAAK,GAAG;AAC5C,UAAMZ,MAAMU,SAASE,MAAMd,KAAKe,WAAW;AAC3C,UAAMW,KAAKZ,MAAMa,WAAWnB,QAAQM,MAAMa,WAAWC;AAEjDC,QAAAA,gBAAgBf,MAAMa,WAAWnB;AACjCsB,QAAAA,iBAAiBhB,MAAMa,WAAWC;AAKtC,UAAMG,SAELb,UAAUa;AAEX,SACEA,WAAW,eAAeA,WAAW,aACrC,WAAWb,aAAa,YAAYA,YACpC;AACKc,YAAAA,cAAczC,QAAQ2B,UAAUV,KAAK;AACrCyB,YAAAA,eAAe1C,QAAQ2B,UAAUU,MAAM;AAE7C,UAAII,aAAa;AACAA,wBAAAA;AAAAA,MAAAA,OACV;AACN,YAAIC,cAAc;AACjBJ,0BAAgBH,KAAKO;AAAAA,QACrB;AAAA,MACD;AAEDH,uBAAiBD,gBAAgBH;AAAAA,IACjC;AAED,WACCQ,IAACC,OAAK;AAAA,MACLjC;AAAAA,MACAM,OAAOuB,WAAW,SAASlC,SAAYgC;AAAAA,MACvCD,QAAQG,WAAW,SAASlC,SAAYiC;AAAAA,MAKxCd,KAAMA,oBAAQF,MAAME,OAAOC;AAAAA,MAC3BmB,QAAQtC;AAAAA,SACJoB;AAAAA,IAAAA,CAAS;AAAA,EAAA,OAGT;AACC,WAAA;AAAA,EACP;AACF;"}
+{"version":3,"file":"PrismicNextImage.js","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["import Image, { ImageProps } from \"next/image\";\nimport { buildURL, ImgixURLParams } from \"imgix-url-builder\";\nimport * as prismicH from \"@prismicio/helpers\";\nimport * as prismicT from \"@prismicio/types\";\n\nimport { __PRODUCTION__ } from \"./lib/__PRODUCTION__\";\nimport { devMsg } from \"./lib/devMsg\";\n\nimport { imgixLoader } from \"./imgixLoader\";\n\nconst castInt = (input: string | number | undefined): number | undefined => {\n\tif (typeof input === \"number\" || typeof input === \"undefined\") {\n\t\treturn input;\n\t} else {\n\t\tconst parsed = Number.parseInt(input);\n\n\t\tif (Number.isNaN(parsed)) {\n\t\t\treturn undefined;\n\t\t} else {\n\t\t\treturn parsed;\n\t\t}\n\t}\n};\n\nexport type PrismicNextImageProps = Omit<ImageProps, \"src\" | \"alt\"> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismicT.ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * @see https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: ImgixURLParams;\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n\n\t/**\n\t * Rendered when the field is empty. If a fallback is not given, `null` will\n\t * be rendered.\n\t */\n\tfallback?: React.ReactNode;\n};\n\n/**\n * React component that renders an image from a Prismic Image field or one of\n * its thumbnails using `next/image`. It will automatically set the `alt`\n * attribute using the Image field's `alt` property.\n *\n * It uses an Imgix URL-based loader by default. A custom loader can be provided\n * with the `loader` prop. If you would like to use the Next.js Image\n * Optimization API instead, set `loader={undefined}`.\n *\n * @param props - Props for the component.\n *\n * @returns A responsive image component using `next/image` for the given Image\n *   field.\n * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image\n */\nexport const PrismicNextImage = ({\n\tfield,\n\timgixParams = {},\n\talt,\n\tfallbackAlt,\n\tfill,\n\twidth,\n\theight,\n\tfallback = null,\n\t...restProps\n}: PrismicNextImageProps): JSX.Element => {\n\tif (!__PRODUCTION__) {\n\t\tif (typeof alt === \"string\" && alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicNextImage] The \"alt\" prop can only be used to declare an image as decorative by passing an empty string (alt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"alt\" prop or changing it to alt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (typeof fallbackAlt === \"string\" && fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicNextImage] The \"fallbackAlt\" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt=\"\") but was provided a non-empty string. You can resolve this warning by removing the \"fallbackAlt\" prop or changing it to fallbackAlt=\"\". For more details, see ${devMsg(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\t}\n\n\tif (prismicH.isFilled.imageThumbnail(field)) {\n\t\tconst src = buildURL(field.url, imgixParams);\n\n\t\tconst ar = field.dimensions.width / field.dimensions.height;\n\n\t\tconst castedWidth = castInt(width);\n\t\tconst castedHeight = castInt(height);\n\n\t\tlet resolvedWidth = castedWidth ?? field.dimensions.width;\n\t\tlet resolvedHeight = castedHeight ?? field.dimensions.width;\n\n\t\tif (castedWidth != null && castedHeight == null) {\n\t\t\tresolvedHeight = castedWidth / ar;\n\t\t} else if (castedWidth == null && castedHeight != null) {\n\t\t\tresolvedWidth = castedHeight * ar;\n\t\t}\n\n\t\treturn (\n\t\t\t<Image\n\t\t\t\tsrc={src}\n\t\t\t\twidth={fill ? undefined : resolvedWidth}\n\t\t\t\theight={fill ? undefined : resolvedHeight}\n\t\t\t\t// A non-null assertion is required since we\n\t\t\t\t// can't statically know if an alt attribute is\n\t\t\t\t// available.\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\talt={(alt ?? (field.alt || fallbackAlt))!}\n\t\t\t\tfill={fill}\n\t\t\t\tloader={imgixLoader}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn <>{fallback}</>;\n\t}\n};\n"],"names":["castInt","input","parsed","Number","parseInt","isNaN","undefined","PrismicNextImage","field","imgixParams","alt","fallbackAlt","fill","width","height","fallback","restProps","__PRODUCTION__","console","warn","devMsg","prismicH","isFilled","imageThumbnail","src","buildURL","url","ar","dimensions","castedWidth","castedHeight","resolvedWidth","resolvedHeight","_jsx","Image","loader","imgixLoader","_Fragment","children"],"mappings":";;;;;;;AAUA,MAAMA,UAAWC,CAA0D,UAAA;AAC1E,MAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,aAAa;AACvDA,WAAAA;AAAAA,EAAAA,OACD;AACAC,UAAAA,SAASC,OAAOC,SAASH,KAAK;AAEhCE,QAAAA,OAAOE,MAAMH,MAAM,GAAG;AAClBI,aAAAA;AAAAA,IAAAA,OACD;AACCJ,aAAAA;AAAAA,IACP;AAAA,EACD;AACF;AAsDO,MAAMK,mBAAmB,CAAC;AAAA,EAChCC;AAAAA,EACAC,cAAc,CAAE;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,KACRC;AAAS,MAC4B;AACxC,MAAI,CAACC,gBAAgB;AACpB,QAAI,OAAOP,QAAQ,YAAYA,QAAQ,IAAI;AAC1CQ,cAAQC,KACkQ,yQAAAC,OACxQ,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAOT,gBAAgB,YAAYA,gBAAgB,IAAI;AAC1DO,cAAQC,KACkS,ySAAAC,OACxS,6BAA6B,GAC3B;AAAA,IAEJ;AAAA,EACD;AAED,MAAIC,SAASC,SAASC,eAAef,KAAK,GAAG;AAC5C,UAAMgB,MAAMC,SAASjB,MAAMkB,KAAKjB,WAAW;AAE3C,UAAMkB,KAAKnB,MAAMoB,WAAWf,QAAQL,MAAMoB,WAAWd;AAE/Ce,UAAAA,cAAc7B,QAAQa,KAAK;AAC3BiB,UAAAA,eAAe9B,QAAQc,MAAM;AAE/BiB,QAAAA,gBAAgBF,oCAAerB,MAAMoB,WAAWf;AAChDmB,QAAAA,iBAAiBF,sCAAgBtB,MAAMoB,WAAWf;AAElDgB,QAAAA,eAAe,QAAQC,gBAAgB,MAAM;AAChDE,uBAAiBH,cAAcF;AAAAA,IACrBE,WAAAA,eAAe,QAAQC,gBAAgB,MAAM;AACvDC,sBAAgBD,eAAeH;AAAAA,IAC/B;AAED,WACCM,IAACC,OAAK;AAAA,MACLV;AAAAA,MACAX,OAAOD,OAAON,SAAYyB;AAAAA,MAC1BjB,QAAQF,OAAON,SAAY0B;AAAAA,MAK3BtB,KAAMA,oBAAQF,MAAME,OAAOC;AAAAA,MAC3BC;AAAAA,MACAuB,QAAQC;AAAAA,MACJ,GAAApB;AAAAA,IAAAA,CACH;AAAA,EAAA,OAEG;AACN,WAAOiB,IAAAI,UAAA;AAAA,MAAAC,UAAGvB;AAAAA,IAAAA,CAAQ;AAAA,EAClB;AACF;"}

package/dist/PrismicPreview.cjs.map

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

package/dist/PrismicPreview.d.ts

@@ -39,4 +39,4 @@ export declare type PrismicPreviewProps = {
  * 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;
+export declare function PrismicPreview({ repositoryName, children, updatePreviewURL, exitPreviewURL, }: PrismicPreviewProps): React.ReactNode;

package/dist/PrismicPreview.js.map

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

package/dist/imgixLoader.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const imgixUrlBuilder = require("imgix-url-builder");
+const imgixLoader = (args) => {
+  const url = new URL(args.src);
+  const params = {
+    fit: url.searchParams.get("fit") || "max",
+    w: args.width,
+    h: void 0
+  };
+  if (args.quality) {
+    params.q = args.quality;
+  }
+  return imgixUrlBuilder.buildURL(args.src, params);
+};
+exports.imgixLoader = imgixLoader;
+//# sourceMappingURL=imgixLoader.cjs.map

package/dist/imgixLoader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"imgixLoader.cjs","sources":["../src/imgixLoader.ts"],"sourcesContent":["import { ImageLoaderProps } from \"next/image\";\nimport { buildURL, ImgixURLParams } from \"imgix-url-builder\";\n\n/**\n * 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 */\nexport const 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"],"names":["buildURL"],"mappings":";;;AAUa,MAAA,cAAc,CAAC,SAAkC;AAC7D,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;;"}

package/dist/imgixLoader.d.ts

@@ -0,0 +1,9 @@
+import { ImageLoaderProps } from "next/image";
+/**
+ * A `next/image` loader for Imgix, which Prismic uses, with an optional
+ * collection of default Imgix parameters.
+ *
+ * @see To learn about `next/image` loaders: https://nextjs.org/docs/api-reference/next/image#loader
+ * @see To learn about Imgix's URL API: https://docs.imgix.com/apis/rendering
+ */
+export declare const imgixLoader: (args: ImageLoaderProps) => string;

package/dist/imgixLoader.js

@@ -0,0 +1,17 @@
+import { buildURL } from "imgix-url-builder";
+const imgixLoader = (args) => {
+  const url = new URL(args.src);
+  const params = {
+    fit: url.searchParams.get("fit") || "max",
+    w: args.width,
+    h: void 0
+  };
+  if (args.quality) {
+    params.q = args.quality;
+  }
+  return buildURL(args.src, params);
+};
+export {
+  imgixLoader
+};
+//# sourceMappingURL=imgixLoader.js.map

package/dist/imgixLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imgixLoader.js","sources":["../src/imgixLoader.ts"],"sourcesContent":["import { ImageLoaderProps } from \"next/image\";\nimport { buildURL, ImgixURLParams } from \"imgix-url-builder\";\n\n/**\n * 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 */\nexport const 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"],"names":[],"mappings":";AAUa,MAAA,cAAc,CAAC,SAAkC;AAC7D,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;"}

package/dist/index.cjs

@@ -6,10 +6,12 @@ const PrismicPreview = require("./PrismicPreview.cjs");
 const enableAutoPreviews = require("./enableAutoPreviews.cjs");
 const redirectToPreviewURL = require("./redirectToPreviewURL.cjs");
 const PrismicNextImage = require("./PrismicNextImage.cjs");
+const imgixLoader = require("./imgixLoader.cjs");
 exports.setPreviewData = setPreviewData.setPreviewData;
 exports.exitPreview = exitPreview.exitPreview;
 exports.PrismicPreview = PrismicPreview.PrismicPreview;
 exports.enableAutoPreviews = enableAutoPreviews.enableAutoPreviews;
 exports.redirectToPreviewURL = redirectToPreviewURL.redirectToPreviewURL;
 exports.PrismicNextImage = PrismicNextImage.PrismicNextImage;
+exports.imgixLoader = imgixLoader.imgixLoader;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -1,13 +1,8 @@
-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, SetPreviewDataConfig } from "./setPreviewData";
+export { exitPreview, ExitPreviewConfig } from "./exitPreview";
+export { PrismicPreview, PrismicPreviewProps } from "./PrismicPreview";
+export { EnableAutoPreviewsConfig, enableAutoPreviews, } from "./enableAutoPreviews";
+export { RedirectToPreviewURLConfig, redirectToPreviewURL, } from "./redirectToPreviewURL";
+export { PrismicNextImage, PrismicNextImageProps } from "./PrismicNextImage";
+export { imgixLoader } from "./imgixLoader";
+export { CreateClientConfig } from "./types";

package/dist/index.js

@@ -4,11 +4,13 @@ import { PrismicPreview } from "./PrismicPreview.js";
 import { enableAutoPreviews } from "./enableAutoPreviews.js";
 import { redirectToPreviewURL } from "./redirectToPreviewURL.js";
 import { PrismicNextImage } from "./PrismicNextImage.js";
+import { imgixLoader } from "./imgixLoader.js";
 export {
   PrismicNextImage,
   PrismicPreview,
   enableAutoPreviews,
   exitPreview,
+  imgixLoader,
   redirectToPreviewURL,
   setPreviewData
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/package.cjs

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

package/dist/package.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/next",
-	"version": "1.0.0-alpha.1",
+	"version": "1.0.0-alpha.2",
 	"description": "Helpers to integrate Prismic into Next.js apps",
 	"keywords": [
 		"typescript",
@@ -46,12 +46,12 @@
 		"unit:watch": "vitest watch"
 	},
 	"dependencies": {
-		"@prismicio/client": "^6.7.1",
 		"@prismicio/helpers": "^2.3.5",
 		"@prismicio/types": "^0.2.3",
 		"imgix-url-builder": "^0.0.3"
 	},
 	"devDependencies": {
+		"@prismicio/client": "^6.7.1",
 		"@prismicio/mock": "^0.1.1",
 		"@size-limit/preset-small-lib": "^8.1.0",
 		"@types/react-test-renderer": "^18.0.0",
@@ -67,10 +67,10 @@
 		"eslint-plugin-tsdoc": "^0.2.17",
 		"happy-dom": "^7.5.13",
 		"next": "^13.0.0",
-		"nyc": "^15.1.0",
 		"prettier": "^2.7.1",
 		"prettier-plugin-jsdoc": "^0.4.2",
 		"react": "^18.1.0",
+		"react-dom": "^18.2.0",
 		"react-test-renderer": "^18.2.0",
 		"size-limit": "^8.1.0",
 		"standard-version": "^9.5.0",
@@ -80,9 +80,9 @@
 		"vitest": "^0.24.3"
 	},
 	"peerDependencies": {
-		"@prismicio/client": "^6.0.0",
-		"next": "^11 || ^12 || ^13",
-		"react": "^17 || ^18"
+		"@prismicio/client": "^6",
+		"next": "^13",
+		"react": "^18"
 	},
 	"engines": {
 		"node": ">=14.15.0"

package/src/PrismicNextImage.tsx

@@ -1,4 +1,4 @@
-import Image, { ImageProps, ImageLoaderProps } from "next/image";
+import Image, { ImageProps } from "next/image";
 import { buildURL, ImgixURLParams } from "imgix-url-builder";
 import * as prismicH from "@prismicio/helpers";
 import * as prismicT from "@prismicio/types";
@@ -6,12 +6,7 @@ import * as prismicT from "@prismicio/types";
 import { __PRODUCTION__ } from "./lib/__PRODUCTION__";
 import { devMsg } from "./lib/devMsg";
 
-/**
- * Value for `next/image`'s `layout` prop which existed in Next 12 and lower.
- * `<PrismicNextImage>` is comatible with the current and legacy image
- * components, requiring us to handle both APIs.
- */
-type LegacyImageLayout = "intrinsic" | "fixed" | "responsive" | "fill";
+import { imgixLoader } from "./imgixLoader";
 
 const castInt = (input: string | number | undefined): number | undefined => {
 	if (typeof input === "number" || typeof input === "undefined") {
@@ -27,29 +22,6 @@ const castInt = (input: string | number | undefined): number | undefined => {
 	}
 };
 
-/**
- * Creates a `next/image` loader for Imgix, which Prismic uses, with an optional
- * collection of default Imgix parameters.
- *
- * @see To learn about `next/image` loaders: https://nextjs.org/docs/api-reference/next/image#loader
- * @see To learn about Imgix's URL API: https://docs.imgix.com/apis/rendering
- */
-const imgixLoader = (args: ImageLoaderProps): string => {
-	const url = new URL(args.src);
-
-	const params: ImgixURLParams = {
-		fit: (url.searchParams.get("fit") as ImgixURLParams["fit"]) || "max",
-		w: args.width,
-		h: undefined,
-	};
-
-	if (args.quality) {
-		params.q = args.quality;
-	}
-
-	return buildURL(args.src, params);
-};
-
 export type PrismicNextImageProps = Omit<ImageProps, "src" | "alt"> & {
 	/**
 	 * The Prismic Image field or thumbnail to render.
@@ -79,6 +51,12 @@ export type PrismicNextImageProps = Omit<ImageProps, "src" | "alt"> & {
 	 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
 	 */
 	fallbackAlt?: "";
+
+	/**
+	 * Rendered when the field is empty. If a fallback is not given, `null` will
+	 * be rendered.
+	 */
+	fallback?: React.ReactNode;
 };
 
 /**
@@ -101,8 +79,12 @@ export const PrismicNextImage = ({
 	imgixParams = {},
 	alt,
 	fallbackAlt,
+	fill,
+	width,
+	height,
+	fallback = null,
 	...restProps
-}: PrismicNextImageProps) => {
+}: PrismicNextImageProps): JSX.Element => {
 	if (!__PRODUCTION__) {
 		if (typeof alt === "string" && alt !== "") {
 			console.warn(
@@ -123,51 +105,37 @@ 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 a layout prop is provied, we can assume this image is
-		// using Next 12. We must handle the `width` and `height` props
-		// in a unique way when using the legacy `next/image` component.
-		const layout: LegacyImageLayout =
-			// @ts-expect-error - Layout does not exist in `next/image` as of Next 13.0.0.
-			restProps.layout;
-
-		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;
+		const castedWidth = castInt(width);
+		const castedHeight = castInt(height);
+
+		let resolvedWidth = castedWidth ?? field.dimensions.width;
+		let resolvedHeight = castedHeight ?? field.dimensions.width;
+
+		if (castedWidth != null && castedHeight == null) {
+			resolvedHeight = castedWidth / ar;
+		} else if (castedWidth == null && castedHeight != null) {
+			resolvedWidth = castedHeight * ar;
 		}
 
 		return (
 			<Image
 				src={src}
-				width={layout === "fill" ? undefined : resolvedWidth}
-				height={layout === "fill" ? undefined : resolvedHeight}
+				width={fill ? undefined : resolvedWidth}
+				height={fill ? undefined : resolvedHeight}
 				// A non-null assertion is required since we
 				// can't statically know if an alt attribute is
 				// available.
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 				alt={(alt ?? (field.alt || fallbackAlt))!}
+				fill={fill}
 				loader={imgixLoader}
 				{...restProps}
 			/>
 		);
 	} else {
-		return null;
+		return <>{fallback}</>;
 	}
 };

package/src/PrismicPreview.tsx

@@ -54,7 +54,7 @@ export function PrismicPreview({
 	children,
 	updatePreviewURL = "/api/preview",
 	exitPreviewURL = "/api/exit-preview",
-}: PrismicPreviewProps): JSX.Element {
+}: PrismicPreviewProps): React.ReactNode {
 	const router = useRouter();
 
 	const resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;

package/src/imgixLoader.ts

@@ -0,0 +1,25 @@
+import { ImageLoaderProps } from "next/image";
+import { buildURL, ImgixURLParams } from "imgix-url-builder";
+
+/**
+ * A `next/image` loader for Imgix, which Prismic uses, with an optional
+ * collection of default Imgix parameters.
+ *
+ * @see To learn about `next/image` loaders: https://nextjs.org/docs/api-reference/next/image#loader
+ * @see To learn about Imgix's URL API: https://docs.imgix.com/apis/rendering
+ */
+export const imgixLoader = (args: ImageLoaderProps): string => {
+	const url = new URL(args.src);
+
+	const params: ImgixURLParams = {
+		fit: (url.searchParams.get("fit") as ImgixURLParams["fit"]) || "max",
+		w: args.width,
+		h: undefined,
+	};
+
+	if (args.quality) {
+		params.q = args.quality;
+	}
+
+	return buildURL(args.src, params);
+};

package/src/index.ts

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