@prismicio/next 0.1.6-alpha.1 → 0.1.7

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

@@ -2,10 +2,11 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const react = require("@prismicio/react");
 const router = require("next/router");
+const Script = require("next/script");
 const getPrismicPreviewCookie = require("./lib/getPrismicPreviewCookie.cjs");
 const getPreviewCookieRepositoryName = require("./lib/getPreviewCookieRepositoryName.cjs");
+const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 function _interopNamespace(e) {
   if (e && e.__esModule)
     return e;
@@ -25,7 +26,13 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
-function PrismicPreview({ repositoryName, children, updatePreviewURL = "/api/preview", exitPreviewURL = "/api/exit-preview" }) {
+const Script__default = /* @__PURE__ */ _interopDefaultLegacy(Script);
+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 +75,13 @@ 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(Script__default.default, {
+      src: `https://static.cdn.prismic.io/prismic.js?repo=${repositoryName}&new=true`,
+      strategy: "lazyOnload"
+    })]
+  });
 }
 exports.PrismicPreview = PrismicPreview;
 //# sourceMappingURL=PrismicPreview.cjs.map

package/dist/PrismicPreview.cjs.map

@@ -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 { 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;;"}

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

@@ -1,10 +1,15 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { PrismicToolbar } from "@prismicio/react";
 import { useRouter } from "next/router";
+import Script from "next/script";
 import { getPrismicPreviewCookie } from "./lib/getPrismicPreviewCookie.js";
 import { getPreviewCookieRepositoryName } from "./lib/getPreviewCookieRepositoryName.js";
-function PrismicPreview({ repositoryName, children, updatePreviewURL = "/api/preview", exitPreviewURL = "/api/exit-preview" }) {
+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,13 @@ 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(Script, {
+      src: `https://static.cdn.prismic.io/prismic.js?repo=${repositoryName}&new=true`,
+      strategy: "lazyOnload"
+    })]
+  });
 }
 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 { 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;"}