UNPKG

@prismicio/next

Version:

Helpers to integrate Prismic into Next.js apps

1 lines 7.7 kB
{"version":3,"file":"PrismicNextImage.cjs","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\";\n\nimport { devMsg } from \"./lib/devMsg\";\nimport { resolveDefaultExport } from \"./lib/resolveDefaultExport\";\n\nimport { imgixLoader } from \"./imgixLoader\";\n\nconst castInt = (input: string | number | undefined): number | undefined => {\n\tif (typeof input === \"number\" || typeof input === \"undefined\") {\n\t\treturn input;\n\t} else {\n\t\tconst parsed = Number.parseInt(input);\n\n\t\tif (Number.isNaN(parsed)) {\n\t\t\treturn undefined;\n\t\t} else {\n\t\t\treturn parsed;\n\t\t}\n\t}\n};\n\nexport type PrismicNextImageProps = Omit<\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 (process.env.NODE_ENV === \"development\") {\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 (\n\t\t\tprocess.env.NODE_ENV === \"development\" &&\n\t\t\ttypeof resolvedAlt !== \"string\"\n\t\t) {\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\tconst ResolvedImage = resolveDefaultExport(Image);\n\n\t\treturn (\n\t\t\t<ResolvedImage\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":["forwardRef","PrismicNextImage","imgixLoader","devMsg","isFilled","_jsx","_Fragment","buildURL","resolveDefaultExport"],"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,mBAETA,MAAAA,WACH,SAASC,kBACR,EACC,OACA,cAAc,CAAA,GACd,KACA,aACA,MACA,OACA,QACA,WAAW,MACX,SAASC,yBACT,GAAG,UAAS,GAEb,KAAG;AAEC,MAAA,QAAQ,IAAI,aAAa,eAAe;AAC3C,QAAI,OAAO,QAAQ,YAAY,QAAQ,IAAI;AAC1C,cAAQ,KACP,yQAAyQC,OAAAA,OACxQ,6BAA6B,CAC7B,EAAE;AAAA,IAAA;AAIL,QAAI,OAAO,gBAAgB,YAAY,gBAAgB,IAAI;AAC1D,cAAQ,KACP,ySAAySA,OAAAA,OACxS,6BAA6B,CAC7B,EAAE;AAAA,IAAA;AAAA,EAEL;AAGD,MAAI,CAACC,OAAA,SAAS,eAAe,KAAK,GAAG;AACpC,WAAOC,WAAA,IAAAC,WAAA,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,MAAMC,gBAAA,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;AAE1C,MACC,QAAQ,IAAI,aAAa,iBACzB,OAAO,gBAAgB,UACtB;AACO,YAAA,MACP,mNACA,GAAG;AAAA,EAAA;AAIC,QAAA,gBAAgBC,0CAAqB,KAAK;AAG/C,SAAAH,eAAC,eAAa,EACb,KACA,KACA,OAAO,OAAO,SAAY,eAC1B,QAAQ,OAAO,SAAY,gBAC3B,KAAK,aACL,MACA,QAAQ,WAAW,OAAO,SAAY,QAAM,GACxC,UAAA,CAAS;AAGhB,CAAC;;"}