@prismicio/next 2.0.0-alpha.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { FC } from "react";
1
+ import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
2
2
  import { ImageProps } from "next/image";
3
3
  import { ImgixURLParams } from "imgix-url-builder";
4
4
  import { ImageFieldImage } from "@prismicio/client";
@@ -51,4 +51,4 @@ export type PrismicNextImageProps = Omit<ImageProps, "src" | "alt" | "loader"> &
51
51
  *
52
52
  * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image
53
53
  */
54
- export declare const PrismicNextImage: FC<PrismicNextImageProps>;
54
+ export declare const PrismicNextImage: ForwardRefExoticComponent<PropsWithoutRef<PrismicNextImageProps> & RefAttributes<HTMLImageElement>>;
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import { jsx, Fragment } from "react/jsx-runtime";
3
+ import { forwardRef } from "react";
3
4
  import Image from "next/image";
4
5
  import { buildURL } from "imgix-url-builder";
5
6
  import { isFilled } from "@prismicio/client";
@@ -18,7 +19,7 @@ const castInt = (input) => {
18
19
  }
19
20
  }
20
21
  };
21
- const PrismicNextImage = ({ field, imgixParams = {}, alt, fallbackAlt, fill, width, height, fallback = null, loader = imgixLoader, ...restProps }) => {
22
+ const PrismicNextImage = forwardRef(function PrismicNextImage2({ field, imgixParams = {}, alt, fallbackAlt, fill, width, height, fallback = null, loader = imgixLoader, ...restProps }, ref) {
22
23
  if (DEV) {
23
24
  if (typeof alt === "string" && alt !== "") {
24
25
  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,37 +28,32 @@ const PrismicNextImage = ({ field, imgixParams = {}, alt, fallbackAlt, fill, wid
27
28
  console.warn(`[PrismicNextImage] The "fallbackAlt" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt="") but was provided a non-empty string. You can resolve this warning by removing the "fallbackAlt" prop or changing it to fallbackAlt="". For more details, see ${devMsg("alt-must-be-an-empty-string")}`);
28
29
  }
29
30
  }
30
- if (isFilled.imageThumbnail(field)) {
31
- const resolvedImgixParams = imgixParams;
32
- for (const x in imgixParams) {
33
- if (resolvedImgixParams[x] === null) {
34
- resolvedImgixParams[x] = void 0;
35
- }
36
- }
37
- const src = buildURL(field.url, imgixParams);
38
- const ar = field.dimensions.width / field.dimensions.height;
39
- const castedWidth = castInt(width);
40
- const castedHeight = castInt(height);
41
- let resolvedWidth = castedWidth ?? field.dimensions.width;
42
- let resolvedHeight = castedHeight ?? field.dimensions.height;
43
- if (castedWidth != null && castedHeight == null) {
44
- resolvedHeight = castedWidth / ar;
45
- } else if (castedWidth == null && castedHeight != null) {
46
- resolvedWidth = castedHeight * ar;
47
- }
48
- const resolvedAlt = alt ?? (field.alt || fallbackAlt);
49
- if (DEV && typeof resolvedAlt !== "string") {
50
- console.error(`[PrismicNextImage] The following image is missing an "alt" property. Please add Alternative Text to the image in Prismic. To mark the image as decorative instead, add one of \`alt=""\` or \`fallbackAlt=""\`.`, src);
51
- }
52
- let ResolvedImage = Image;
53
- if ("default" in ResolvedImage) {
54
- ResolvedImage = ResolvedImage.default;
55
- }
56
- return jsx(ResolvedImage, { src, width: fill ? void 0 : resolvedWidth, height: fill ? void 0 : resolvedHeight, alt: resolvedAlt, fill, loader: loader === null ? void 0 : loader, ...restProps });
57
- } else {
31
+ if (!isFilled.imageThumbnail(field)) {
58
32
  return jsx(Fragment, { children: fallback });
59
33
  }
60
- };
34
+ const resolvedImgixParams = imgixParams;
35
+ for (const x in imgixParams) {
36
+ if (resolvedImgixParams[x] === null) {
37
+ resolvedImgixParams[x] = void 0;
38
+ }
39
+ }
40
+ const src = buildURL(field.url, imgixParams);
41
+ const ar = field.dimensions.width / field.dimensions.height;
42
+ const castedWidth = castInt(width);
43
+ const castedHeight = castInt(height);
44
+ let resolvedWidth = castedWidth ?? field.dimensions.width;
45
+ let resolvedHeight = castedHeight ?? field.dimensions.height;
46
+ if (castedWidth != null && castedHeight == null) {
47
+ resolvedHeight = castedWidth / ar;
48
+ } else if (castedWidth == null && castedHeight != null) {
49
+ resolvedWidth = castedHeight * ar;
50
+ }
51
+ const resolvedAlt = alt ?? (field.alt || fallbackAlt);
52
+ if (DEV && typeof resolvedAlt !== "string") {
53
+ console.error(`[PrismicNextImage] The following image is missing an "alt" property. Please add Alternative Text to the image in Prismic. To mark the image as decorative instead, add one of \`alt=""\` or \`fallbackAlt=""\`.`, src);
54
+ }
55
+ return jsx(Image, { ref, src, width: fill ? void 0 : resolvedWidth, height: fill ? void 0 : resolvedHeight, alt: resolvedAlt, fill, loader: loader === null ? void 0 : loader, ...restProps });
56
+ });
61
57
  export {
62
58
  PrismicNextImage
63
59
  };
@@ -1 +1 @@
1
- {"version":3,"file":"PrismicNextImage.js","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["\"use client\";\n\nimport { FC } from \"react\";\nimport Image, { ImageProps } from \"next/image\";\nimport { buildURL, ImgixURLParams } from \"imgix-url-builder\";\nimport { ImageFieldImage, isFilled } from \"@prismicio/client\";\nimport { DEV } from \"esm-env\";\n\nimport { devMsg } from \"./lib/devMsg.js\";\n\nimport { imgixLoader } from \"./imgixLoader.js\";\n\nconst castInt = (input: string | number | undefined): number | undefined => {\n\tif (typeof input === \"number\" || typeof input === \"undefined\") {\n\t\treturn input;\n\t} else {\n\t\tconst parsed = Number.parseInt(input);\n\n\t\tif (Number.isNaN(parsed)) {\n\t\t\treturn undefined;\n\t\t} else {\n\t\t\treturn parsed;\n\t\t}\n\t}\n};\n\nexport type PrismicNextImageProps = Omit<\n\tImageProps,\n\t\"src\" | \"alt\" | \"loader\"\n> & {\n\t/** The Prismic Image field or thumbnail to render. */\n\tfield: 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?: { [P in keyof ImgixURLParams]: ImgixURLParams[P] | null };\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n\n\t/**\n\t * Rendered when the field is empty. If a fallback is not given, `null` will\n\t * be rendered.\n\t */\n\tfallback?: React.ReactNode;\n\n\tloader?: ImageProps[\"loader\"] | null;\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: FC<PrismicNextImageProps> = ({\n\tfield,\n\timgixParams = {},\n\talt,\n\tfallbackAlt,\n\tfill,\n\twidth,\n\theight,\n\tfallback = null,\n\tloader = imgixLoader,\n\t...restProps\n}) => {\n\tif (DEV) {\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 (isFilled.imageThumbnail(field)) {\n\t\tconst resolvedImgixParams = imgixParams;\n\t\tfor (const x in imgixParams) {\n\t\t\tif (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {\n\t\t\t\tresolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined;\n\t\t\t}\n\t\t}\n\n\t\tconst src = buildURL(field.url, imgixParams as ImgixURLParams);\n\n\t\tconst ar = field.dimensions.width / field.dimensions.height;\n\n\t\tconst castedWidth = castInt(width);\n\t\tconst castedHeight = castInt(height);\n\n\t\tlet resolvedWidth = castedWidth ?? field.dimensions.width;\n\t\tlet resolvedHeight = castedHeight ?? field.dimensions.height;\n\n\t\tif (castedWidth != null && castedHeight == null) {\n\t\t\tresolvedHeight = castedWidth / ar;\n\t\t} else if (castedWidth == null && castedHeight != null) {\n\t\t\tresolvedWidth = castedHeight * ar;\n\t\t}\n\n\t\t// A non-null assertion is required since we can't statically\n\t\t// know if an alt attribute is available.\n\n\t\tconst resolvedAlt = (alt ?? (field.alt || fallbackAlt))!;\n\n\t\tif (DEV && typeof resolvedAlt !== \"string\") {\n\t\t\tconsole.error(\n\t\t\t\t`[PrismicNextImage] The following image is missing an \"alt\" property. Please add Alternative Text to the image in Prismic. To mark the image as decorative instead, add one of \\`alt=\"\"\\` or \\`fallbackAlt=\"\"\\`.`,\n\t\t\t\tsrc,\n\t\t\t);\n\t\t}\n\n\t\t// TODO: Remove once https://github.com/vercel/next.js/issues/52216 is resolved.\n\t\t// `next/image` seems to be affected by a default + named export bundling bug.\n\t\tlet ResolvedImage = Image;\n\t\tif (\"default\" in ResolvedImage) {\n\t\t\tResolvedImage = (ResolvedImage as unknown as { default: typeof Image })\n\t\t\t\t.default;\n\t\t}\n\n\t\treturn (\n\t\t\t<ResolvedImage\n\t\t\t\tsrc={src}\n\t\t\t\twidth={fill ? undefined : resolvedWidth}\n\t\t\t\theight={fill ? undefined : resolvedHeight}\n\t\t\t\talt={resolvedAlt}\n\t\t\t\tfill={fill}\n\t\t\t\tloader={loader === null ? undefined : loader}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn <>{fallback}</>;\n\t}\n};\n"],"names":["_jsx","_Fragment"],"mappings":";;;;;;;;AAYA,MAAM,UAAU,CAAC,UAA0D;AAC1E,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,aAAa;AACvD,WAAA;AAAA,EAAA,OACD;AACA,UAAA,SAAS,OAAO,SAAS,KAAK;AAEhC,QAAA,OAAO,MAAM,MAAM,GAAG;AAClB,aAAA;AAAA,IAAA,OACD;AACC,aAAA;AAAA,IAAA;AAAA,EACR;AAEF;AA0DO,MAAM,mBAA8C,CAAC,EAC3D,OACA,cAAc,IACd,KACA,aACA,MACA,OACA,QACA,WAAW,MACX,SAAS,aACT,GAAG,gBACC;AACJ,MAAI,KAAK;AACR,QAAI,OAAO,QAAQ,YAAY,QAAQ,IAAI;AAC1C,cAAQ,KACP,yQAAyQ,OACxQ,6BAA6B,CAC7B,EAAE;AAAA,IAAA;AAIL,QAAI,OAAO,gBAAgB,YAAY,gBAAgB,IAAI;AAC1D,cAAQ,KACP,ySAAyS,OACxS,6BAA6B,CAC7B,EAAE;AAAA,IAAA;AAAA,EAEL;AAGG,MAAA,SAAS,eAAe,KAAK,GAAG;AACnC,UAAM,sBAAsB;AAC5B,eAAW,KAAK,aAAa;AACxB,UAAA,oBAAoB,CAAqC,MAAM,MAAM;AACxE,4BAAoB,CAAqC,IAAI;AAAA,MAAA;AAAA,IAC9D;AAGD,UAAM,MAAM,SAAS,MAAM,KAAK,WAA6B;AAE7D,UAAM,KAAK,MAAM,WAAW,QAAQ,MAAM,WAAW;AAE/C,UAAA,cAAc,QAAQ,KAAK;AAC3B,UAAA,eAAe,QAAQ,MAAM;AAE/B,QAAA,gBAAgB,eAAe,MAAM,WAAW;AAChD,QAAA,iBAAiB,gBAAgB,MAAM,WAAW;AAElD,QAAA,eAAe,QAAQ,gBAAgB,MAAM;AAChD,uBAAiB,cAAc;AAAA,IACrB,WAAA,eAAe,QAAQ,gBAAgB,MAAM;AACvD,sBAAgB,eAAe;AAAA,IAAA;AAM1B,UAAA,cAAe,QAAQ,MAAM,OAAO;AAEtC,QAAA,OAAO,OAAO,gBAAgB,UAAU;AACnC,cAAA,MACP,mNACA,GAAG;AAAA,IAAA;AAML,QAAI,gBAAgB;AACpB,QAAI,aAAa,eAAe;AAC/B,sBAAiB,cACf;AAAA,IAAA;AAIF,WAAAA,IAAC,eACA,EAAA,KACA,OAAO,OAAO,SAAY,eAC1B,QAAQ,OAAO,SAAY,gBAC3B,KAAK,aACL,MACA,QAAQ,WAAW,OAAO,SAAY,QAClC,GAAA,UAAA,CACH;AAAA,EAAA,OAEG;AACN,WAAOA,IAAAC,UAAA,EAAA,UAAG,UAAQ;AAAA,EAAA;AAEpB;"}
1
+ {"version":3,"file":"PrismicNextImage.js","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n\tforwardRef,\n\tForwardRefExoticComponent,\n\tPropsWithoutRef,\n\tRefAttributes,\n} from \"react\";\nimport Image, { ImageProps } from \"next/image\";\nimport { buildURL, ImgixURLParams } from \"imgix-url-builder\";\nimport { ImageFieldImage, isFilled } from \"@prismicio/client\";\nimport { DEV } from \"esm-env\";\n\nimport { devMsg } from \"./lib/devMsg.js\";\n\nimport { imgixLoader } from \"./imgixLoader.js\";\n\nconst castInt = (input: string | number | undefined): number | undefined => {\n\tif (typeof input === \"number\" || typeof input === \"undefined\") {\n\t\treturn input;\n\t} else {\n\t\tconst parsed = Number.parseInt(input);\n\n\t\tif (Number.isNaN(parsed)) {\n\t\t\treturn undefined;\n\t\t} else {\n\t\t\treturn parsed;\n\t\t}\n\t}\n};\n\nexport type PrismicNextImageProps = Omit<\n\tImageProps,\n\t\"src\" | \"alt\" | \"loader\"\n> & {\n\t/** The Prismic Image field or thumbnail to render. */\n\tfield: 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?: { [P in keyof ImgixURLParams]: ImgixURLParams[P] | null };\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n\n\t/**\n\t * Rendered when the field is empty. If a fallback is not given, `null` will\n\t * be rendered.\n\t */\n\tfallback?: React.ReactNode;\n\n\tloader?: ImageProps[\"loader\"] | null;\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 */\n// The type annotation is necessary to avoid a type reference issue.\nexport const PrismicNextImage: ForwardRefExoticComponent<\n\tPropsWithoutRef<PrismicNextImageProps> & RefAttributes<HTMLImageElement>\n> = forwardRef<HTMLImageElement, PrismicNextImageProps>(\n\tfunction PrismicNextImage(\n\t\t{\n\t\t\tfield,\n\t\t\timgixParams = {},\n\t\t\talt,\n\t\t\tfallbackAlt,\n\t\t\tfill,\n\t\t\twidth,\n\t\t\theight,\n\t\t\tfallback = null,\n\t\t\tloader = imgixLoader,\n\t\t\t...restProps\n\t\t},\n\t\tref,\n\t) {\n\t\tif (DEV) {\n\t\t\tif (typeof alt === \"string\" && alt !== \"\") {\n\t\t\t\tconsole.warn(\n\t\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\t\"alt-must-be-an-empty-string\",\n\t\t\t\t\t)}`,\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tif (typeof fallbackAlt === \"string\" && fallbackAlt !== \"\") {\n\t\t\t\tconsole.warn(\n\t\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\t\"alt-must-be-an-empty-string\",\n\t\t\t\t\t)}`,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\tif (!isFilled.imageThumbnail(field)) {\n\t\t\treturn <>{fallback}</>;\n\t\t}\n\n\t\tconst resolvedImgixParams = imgixParams;\n\t\tfor (const x in imgixParams) {\n\t\t\tif (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {\n\t\t\t\tresolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined;\n\t\t\t}\n\t\t}\n\n\t\tconst src = buildURL(field.url, imgixParams as ImgixURLParams);\n\n\t\tconst ar = field.dimensions.width / field.dimensions.height;\n\n\t\tconst castedWidth = castInt(width);\n\t\tconst castedHeight = castInt(height);\n\n\t\tlet resolvedWidth = castedWidth ?? field.dimensions.width;\n\t\tlet resolvedHeight = castedHeight ?? field.dimensions.height;\n\n\t\tif (castedWidth != null && castedHeight == null) {\n\t\t\tresolvedHeight = castedWidth / ar;\n\t\t} else if (castedWidth == null && castedHeight != null) {\n\t\t\tresolvedWidth = castedHeight * ar;\n\t\t}\n\n\t\t// A non-null assertion is required since we can't statically\n\t\t// know if an alt attribute is available.\n\t\tconst resolvedAlt = (alt ?? (field.alt || fallbackAlt))!;\n\n\t\tif (DEV && typeof resolvedAlt !== \"string\") {\n\t\t\tconsole.error(\n\t\t\t\t`[PrismicNextImage] The following image is missing an \"alt\" property. Please add Alternative Text to the image in Prismic. To mark the image as decorative instead, add one of \\`alt=\"\"\\` or \\`fallbackAlt=\"\"\\`.`,\n\t\t\t\tsrc,\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Image\n\t\t\t\tref={ref}\n\t\t\t\tsrc={src}\n\t\t\t\twidth={fill ? undefined : resolvedWidth}\n\t\t\t\theight={fill ? undefined : resolvedHeight}\n\t\t\t\talt={resolvedAlt}\n\t\t\t\tfill={fill}\n\t\t\t\tloader={loader === null ? undefined : loader}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":["PrismicNextImage","_jsx","_Fragment"],"mappings":";;;;;;;;;AAiBA,MAAM,UAAU,CAAC,UAA0D;AAC1E,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,aAAa;AACvD,WAAA;AAAA,EAAA,OACD;AACA,UAAA,SAAS,OAAO,SAAS,KAAK;AAEhC,QAAA,OAAO,MAAM,MAAM,GAAG;AAClB,aAAA;AAAA,IAAA,OACD;AACC,aAAA;AAAA,IAAA;AAAA,EACR;AAEF;AA2Da,MAAA,mBAET,WACH,SAASA,kBACR,EACC,OACA,cAAc,CAAA,GACd,KACA,aACA,MACA,OACA,QACA,WAAW,MACX,SAAS,aACT,GAAG,UAAS,GAEb,KAAG;AAEH,MAAI,KAAK;AACR,QAAI,OAAO,QAAQ,YAAY,QAAQ,IAAI;AAC1C,cAAQ,KACP,yQAAyQ,OACxQ,6BAA6B,CAC7B,EAAE;AAAA,IAAA;AAIL,QAAI,OAAO,gBAAgB,YAAY,gBAAgB,IAAI;AAC1D,cAAQ,KACP,ySAAyS,OACxS,6BAA6B,CAC7B,EAAE;AAAA,IAAA;AAAA,EAEL;AAGD,MAAI,CAAC,SAAS,eAAe,KAAK,GAAG;AACpC,WAAOC,IAAAC,UAAA,EAAA,UAAG,UAAQ;AAAA,EAAA;AAGnB,QAAM,sBAAsB;AAC5B,aAAW,KAAK,aAAa;AACxB,QAAA,oBAAoB,CAAqC,MAAM,MAAM;AACxE,0BAAoB,CAAqC,IAAI;AAAA,IAAA;AAAA,EAC9D;AAGD,QAAM,MAAM,SAAS,MAAM,KAAK,WAA6B;AAE7D,QAAM,KAAK,MAAM,WAAW,QAAQ,MAAM,WAAW;AAE/C,QAAA,cAAc,QAAQ,KAAK;AAC3B,QAAA,eAAe,QAAQ,MAAM;AAE/B,MAAA,gBAAgB,eAAe,MAAM,WAAW;AAChD,MAAA,iBAAiB,gBAAgB,MAAM,WAAW;AAElD,MAAA,eAAe,QAAQ,gBAAgB,MAAM;AAChD,qBAAiB,cAAc;AAAA,EACrB,WAAA,eAAe,QAAQ,gBAAgB,MAAM;AACvD,oBAAgB,eAAe;AAAA,EAAA;AAK1B,QAAA,cAAe,QAAQ,MAAM,OAAO;AAEtC,MAAA,OAAO,OAAO,gBAAgB,UAAU;AACnC,YAAA,MACP,mNACA,GAAG;AAAA,EAAA;AAKJ,SAAAD,IAAC,OAAK,EACL,KACA,KACA,OAAO,OAAO,SAAY,eAC1B,QAAQ,OAAO,SAAY,gBAC3B,KAAK,aACL,MACA,QAAQ,WAAW,OAAO,SAAY,QAAM,GACxC,UAAA,CAAS;AAGhB,CAAC;"}
@@ -1,4 +1,4 @@
1
- const version = "2.0.0-alpha.2";
1
+ const version = "2.0.0";
2
2
  export {
3
3
  version
4
4
  };
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "e2e-projects/*"
5
5
  ],
6
6
  "name": "@prismicio/next",
7
- "version": "2.0.0-alpha.2",
7
+ "version": "2.0.0",
8
8
  "description": "Helpers to integrate Prismic into Next.js apps",
9
9
  "keywords": [
10
10
  "typescript",
@@ -1,6 +1,11 @@
1
1
  "use client";
2
2
 
3
- import { FC } from "react";
3
+ import {
4
+ forwardRef,
5
+ ForwardRefExoticComponent,
6
+ PropsWithoutRef,
7
+ RefAttributes,
8
+ } from "react";
4
9
  import Image, { ImageProps } from "next/image";
5
10
  import { buildURL, ImgixURLParams } from "imgix-url-builder";
6
11
  import { ImageFieldImage, isFilled } from "@prismicio/client";
@@ -80,37 +85,47 @@ export type PrismicNextImageProps = Omit<
80
85
  *
81
86
  * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image
82
87
  */
83
- export const PrismicNextImage: FC<PrismicNextImageProps> = ({
84
- field,
85
- imgixParams = {},
86
- alt,
87
- fallbackAlt,
88
- fill,
89
- width,
90
- height,
91
- fallback = null,
92
- loader = imgixLoader,
93
- ...restProps
94
- }) => {
95
- if (DEV) {
96
- if (typeof alt === "string" && alt !== "") {
97
- console.warn(
98
- `[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(
99
- "alt-must-be-an-empty-string",
100
- )}`,
101
- );
88
+ // The type annotation is necessary to avoid a type reference issue.
89
+ export const PrismicNextImage: ForwardRefExoticComponent<
90
+ PropsWithoutRef<PrismicNextImageProps> & RefAttributes<HTMLImageElement>
91
+ > = forwardRef<HTMLImageElement, PrismicNextImageProps>(
92
+ function PrismicNextImage(
93
+ {
94
+ field,
95
+ imgixParams = {},
96
+ alt,
97
+ fallbackAlt,
98
+ fill,
99
+ width,
100
+ height,
101
+ fallback = null,
102
+ loader = imgixLoader,
103
+ ...restProps
104
+ },
105
+ ref,
106
+ ) {
107
+ if (DEV) {
108
+ if (typeof alt === "string" && alt !== "") {
109
+ console.warn(
110
+ `[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(
111
+ "alt-must-be-an-empty-string",
112
+ )}`,
113
+ );
114
+ }
115
+
116
+ if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
117
+ console.warn(
118
+ `[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(
119
+ "alt-must-be-an-empty-string",
120
+ )}`,
121
+ );
122
+ }
102
123
  }
103
124
 
104
- if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
105
- console.warn(
106
- `[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(
107
- "alt-must-be-an-empty-string",
108
- )}`,
109
- );
125
+ if (!isFilled.imageThumbnail(field)) {
126
+ return <>{fallback}</>;
110
127
  }
111
- }
112
128
 
113
- if (isFilled.imageThumbnail(field)) {
114
129
  const resolvedImgixParams = imgixParams;
115
130
  for (const x in imgixParams) {
116
131
  if (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {
@@ -136,7 +151,6 @@ export const PrismicNextImage: FC<PrismicNextImageProps> = ({
136
151
 
137
152
  // A non-null assertion is required since we can't statically
138
153
  // know if an alt attribute is available.
139
-
140
154
  const resolvedAlt = (alt ?? (field.alt || fallbackAlt))!;
141
155
 
142
156
  if (DEV && typeof resolvedAlt !== "string") {
@@ -146,16 +160,9 @@ export const PrismicNextImage: FC<PrismicNextImageProps> = ({
146
160
  );
147
161
  }
148
162
 
149
- // TODO: Remove once https://github.com/vercel/next.js/issues/52216 is resolved.
150
- // `next/image` seems to be affected by a default + named export bundling bug.
151
- let ResolvedImage = Image;
152
- if ("default" in ResolvedImage) {
153
- ResolvedImage = (ResolvedImage as unknown as { default: typeof Image })
154
- .default;
155
- }
156
-
157
163
  return (
158
- <ResolvedImage
164
+ <Image
165
+ ref={ref}
159
166
  src={src}
160
167
  width={fill ? undefined : resolvedWidth}
161
168
  height={fill ? undefined : resolvedHeight}
@@ -165,7 +172,5 @@ export const PrismicNextImage: FC<PrismicNextImageProps> = ({
165
172
  {...restProps}
166
173
  />
167
174
  );
168
- } else {
169
- return <>{fallback}</>;
170
- }
171
- };
175
+ },
176
+ );