@prismicio/next
Version:
Helpers to integrate Prismic into Next.js apps
1 lines • 7.37 kB
Source Map (JSON)
{"version":3,"file":"PrismicNextImage.cjs","names":["imgixLoader","devMsg","isFilled","resolveDefaultExport","Image"],"sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ImageFieldImage } from \"@prismicio/client\"\nimport { isFilled } from \"@prismicio/client\"\nimport type { ImgixURLParams } from \"imgix-url-builder\"\nimport { buildURL } from \"imgix-url-builder\"\nimport type { ImageProps } from \"next/image\"\nimport Image from \"next/image\"\nimport type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from \"react\"\nimport { forwardRef } from \"react\"\n\nimport { imgixLoader } from \"./imgixLoader\"\nimport { devMsg } from \"./lib/devMsg\"\nimport { resolveDefaultExport } from \"./lib/resolveDefaultExport\"\n\nconst castInt = (input: string | number | undefined): number | undefined => {\n\tif (typeof input === \"number\" || typeof input === \"undefined\") {\n\t\treturn input\n\t} else {\n\t\tconst parsed = Number.parseInt(input)\n\n\t\tif (Number.isNaN(parsed)) {\n\t\t\treturn undefined\n\t\t} else {\n\t\t\treturn parsed\n\t\t}\n\t}\n}\n\nexport type PrismicNextImageProps = Omit<ImageProps, \"src\" | \"alt\" | \"loader\"> & {\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: 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 alternative text by\n\t * providing `fallbackAlt=\"\"`.\n\t *\n\t * See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\"\n\n\t/** Rendered when the field is empty. If a fallback is not given, `null` will be rendered. */\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 its thumbnails using\n * `next/image`. It will automatically set the `alt` attribute using the Image field's `alt`\n * property.\n *\n * It uses an Imgix URL-based loader by default. A custom loader can be provided with the `loader`\n * prop. If you would like to use the Next.js Image Optimization API instead, set\n * `loader={undefined}`.\n *\n * @param props - Props for the component.\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 */\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>(function PrismicNextImage(\n\t{\n\t\tfield,\n\t\timgixParams = {},\n\t\talt,\n\t\tfallbackAlt,\n\t\tfill,\n\t\twidth,\n\t\theight,\n\t\tfallback = null,\n\t\tloader = imgixLoader,\n\t\t...restProps\n\t},\n\tref,\n) {\n\tif (process.env.NODE_ENV === \"development\") {\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\treturn <>{fallback}</>\n\t}\n\n\tconst resolvedImgixParams = imgixParams\n\tfor (const x in imgixParams) {\n\t\tif (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {\n\t\t\tresolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined\n\t\t}\n\t}\n\n\tconst src = buildURL(field.url, imgixParams as ImgixURLParams)\n\n\tconst ar = field.dimensions.width / field.dimensions.height\n\n\tconst castedWidth = castInt(width)\n\tconst castedHeight = castInt(height)\n\n\tlet resolvedWidth = castedWidth ?? field.dimensions.width\n\tlet resolvedHeight = castedHeight ?? field.dimensions.height\n\n\tif (castedWidth != null && castedHeight == null) {\n\t\tresolvedHeight = castedWidth / ar\n\t} else if (castedWidth == null && castedHeight != null) {\n\t\tresolvedWidth = castedHeight * ar\n\t}\n\n\t// A non-null assertion is required since we can't statically\n\t// know if an alt attribute is available.\n\tconst resolvedAlt = (alt ?? (field.alt || fallbackAlt))!\n\n\tif (process.env.NODE_ENV === \"development\" && typeof resolvedAlt !== \"string\") {\n\t\tconsole.error(\n\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\tsrc,\n\t\t)\n\t}\n\n\tconst ResolvedImage = resolveDefaultExport(Image)\n\n\treturn (\n\t\t<ResolvedImage\n\t\t\tref={ref}\n\t\t\tsrc={src}\n\t\t\twidth={fill ? undefined : resolvedWidth}\n\t\t\theight={fill ? undefined : resolvedHeight}\n\t\t\talt={resolvedAlt}\n\t\t\tfill={fill}\n\t\t\tloader={loader === null ? undefined : loader}\n\t\t\t{...restProps}\n\t\t/>\n\t)\n})\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,WAAW,UAA2D;AAC3E,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,YACjD,QAAO;MACD;EACN,MAAM,SAAS,OAAO,SAAS,MAAM;AAErC,MAAI,OAAO,MAAM,OAAO,CACvB;MAEA,QAAO;;;;;;;;;;;;;;;;;AAoDV,MAAa,oBAAA,GAAA,MAAA,YAE2C,SAAS,iBAChE,EACC,OACA,cAAc,EAAE,EAChB,KACA,aACA,MACA,OACA,QACA,WAAW,MACX,SAASA,oBAAAA,aACT,GAAG,aAEJ,KACC;AACD,KAAI,QAAQ,IAAI,aAAa,eAAe;AAC3C,MAAI,OAAO,QAAQ,YAAY,QAAQ,GACtC,SAAQ,KACP,yQAAyQC,eAAAA,OACxQ,8BACA,GACD;AAGF,MAAI,OAAO,gBAAgB,YAAY,gBAAgB,GACtD,SAAQ,KACP,ySAAySA,eAAAA,OACxS,8BACA,GACD;;AAIH,KAAI,CAACC,kBAAAA,SAAS,eAAe,MAAM,CAClC,QAAO,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UAAG,UAAY,CAAA;CAGvB,MAAM,sBAAsB;AAC5B,MAAK,MAAM,KAAK,YACf,KAAI,oBAAoB,OAA2C,KAClE,qBAAoB,KAAyC,KAAA;CAI/D,MAAM,OAAA,GAAA,kBAAA,UAAe,MAAM,KAAK,YAA8B;CAE9D,MAAM,KAAK,MAAM,WAAW,QAAQ,MAAM,WAAW;CAErD,MAAM,cAAc,QAAQ,MAAM;CAClC,MAAM,eAAe,QAAQ,OAAO;CAEpC,IAAI,gBAAgB,eAAe,MAAM,WAAW;CACpD,IAAI,iBAAiB,gBAAgB,MAAM,WAAW;AAEtD,KAAI,eAAe,QAAQ,gBAAgB,KAC1C,kBAAiB,cAAc;UACrB,eAAe,QAAQ,gBAAgB,KACjD,iBAAgB,eAAe;CAKhC,MAAM,cAAe,QAAQ,MAAM,OAAO;AAE1C,KAAI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,gBAAgB,SACpE,SAAQ,MACP,mNACA,IACA;AAKF,QACC,iBAAA,GAAA,kBAAA,KAHqBC,6BAAAA,qBAAqBC,cAAAA,QAAM,EAGhD;EACM;EACA;EACL,OAAO,OAAO,KAAA,IAAY;EAC1B,QAAQ,OAAO,KAAA,IAAY;EAC3B,KAAK;EACC;EACN,QAAQ,WAAW,OAAO,KAAA,IAAY;EACtC,GAAI;EACH,CAAA;EAEF"}