@prismicio/next 0.1.7 → 1.0.0-alpha.0

package/dist/PrismicNextImage.cjs

@@ -56,7 +56,6 @@ const PrismicNextImage = ({
   imgixParams = {},
   alt,
   fallbackAlt,
-  layout = "intrinsic",
   ...restProps
 }) => {
   if (!__PRODUCTION__.__PRODUCTION__) {
@@ -72,6 +71,7 @@ const PrismicNextImage = ({
     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);
@@ -90,7 +90,6 @@ const PrismicNextImage = ({
       height: layout === "fill" ? void 0 : resolvedHeight,
       alt: alt != null ? alt : field.alt || fallbackAlt,
       loader: imgixLoader,
-      layout,
       ...restProps
     });
   } else {

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

package/dist/PrismicNextImage.d.ts

@@ -2,7 +2,7 @@
 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"> & {
+export declare type PrismicNextImageProps = Omit<ImageProps, "src" | "alt"> & {
     /**
      * The Prismic Image field or thumbnail to render.
      */
@@ -28,11 +28,7 @@ export declare type PrismicNextImageProps = Omit<ImageProps, "src" | "alt" | "wi
      * 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`
@@ -48,4 +44,4 @@ export declare type PrismicNextImageProps = Omit<ImageProps, "src" | "alt" | "wi
  *   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;
+export declare const PrismicNextImage: ({ field, imgixParams, alt, fallbackAlt, ...restProps }: PrismicNextImageProps) => JSX.Element | null;

package/dist/PrismicNextImage.js

@@ -33,7 +33,6 @@ const PrismicNextImage = ({
   imgixParams = {},
   alt,
   fallbackAlt,
-  layout = "intrinsic",
   ...restProps
 }) => {
   if (!__PRODUCTION__) {
@@ -49,6 +48,7 @@ const PrismicNextImage = ({
     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);
@@ -67,7 +67,6 @@ const PrismicNextImage = ({
       height: layout === "fill" ? void 0 : resolvedHeight,
       alt: alt != null ? alt : field.alt || fallbackAlt,
       loader: imgixLoader,
-      layout,
       ...restProps
     });
   } else {

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

package/dist/package.cjs

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

package/dist/package.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/next",
-	"version": "0.1.7",
+	"version": "1.0.0-alpha.0",
 	"description": "Helpers to integrate Prismic into Next.js apps",
 	"keywords": [
 		"typescript",
@@ -66,7 +66,7 @@
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-tsdoc": "^0.2.17",
 		"happy-dom": "^7.5.13",
-		"next": "^12.1.4",
+		"next": "^13.0.0",
 		"nyc": "^15.1.0",
 		"prettier": "^2.7.1",
 		"prettier-plugin-jsdoc": "^0.4.2",
@@ -81,7 +81,7 @@
 	},
 	"peerDependencies": {
 		"@prismicio/client": "^6.0.0",
-		"next": "^11 || ^12",
+		"next": "^11 || ^12 | ^13",
 		"react": "^17 || ^18"
 	},
 	"engines": {

package/src/PrismicNextImage.tsx

@@ -6,6 +6,13 @@ 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";
+
 const castInt = (input: string | number | undefined): number | undefined => {
 	if (typeof input === "number" || typeof input === "undefined") {
 		return input;
@@ -43,10 +50,7 @@ const imgixLoader = (args: ImageLoaderProps): string => {
 	return buildURL(args.src, params);
 };
 
-export type PrismicNextImageProps = Omit<
-	ImageProps,
-	"src" | "alt" | "width" | "height" | "layout"
-> & {
+export type PrismicNextImageProps = Omit<ImageProps, "src" | "alt"> & {
 	/**
 	 * The Prismic Image field or thumbnail to render.
 	 */
@@ -75,14 +79,7 @@ export type PrismicNextImageProps = Omit<
 	 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
 	 */
 	fallbackAlt?: "";
-} & (
-		| ({
-				layout?: "intrinsic" | "fixed";
-		  } & Pick<ImageProps, "width" | "height">)
-		| {
-				layout: "responsive" | "fill";
-		  }
-	);
+};
 
 /**
  * React component that renders an image from a Prismic Image field or one of
@@ -104,7 +101,6 @@ export const PrismicNextImage = ({
 	imgixParams = {},
 	alt,
 	fallbackAlt,
-	layout = "intrinsic",
 	...restProps
 }: PrismicNextImageProps) => {
 	if (!__PRODUCTION__) {
@@ -132,6 +128,13 @@ export const PrismicNextImage = ({
 		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)
@@ -155,9 +158,12 @@ export const PrismicNextImage = ({
 				src={src}
 				width={layout === "fill" ? undefined : resolvedWidth}
 				height={layout === "fill" ? undefined : resolvedHeight}
-				alt={alt ?? (field.alt || fallbackAlt)}
+				// 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))!}
 				loader={imgixLoader}
-				layout={layout}
 				{...restProps}
 			/>
 		);