@prismicio/client/dist/helpers/asImageWidthSrcSet.cjs.map

The official JavaScript + TypeScript client library for Prismic

{"version":3,"file":"asImageWidthSrcSet.cjs","names":["responsiveViewObjects: ImageFieldImage<\"filled\">[]"],"sources":["../../src/helpers/asImageWidthSrcSet.ts"],"sourcesContent":["import type { BuildWidthSrcSetParams } from \"imgix-url-builder\"\nimport { buildURL, buildWidthSrcSet } from \"imgix-url-builder\"\n\nimport type { ImageFieldImage } from \"../types/value/image\"\n\nimport * as isFilled from \"./isFilled\"\n\n/**\n * The default widths used to generate a `srcset` value.\n */\nconst DEFAULT_WIDTHS = [640, 828, 1200, 2048, 3840]\n\n/**\n * The return type of `asImageWidthSrcSet()`.\n */\ntype AsImageWidthSrcSetReturnType<\n\tField extends ImageFieldImage | null | undefined,\n> =\n\tField extends ImageFieldImage<\"filled\">\n\t\t? {\n\t\t\t\t/**\n\t\t\t\t * The image field's URL with imgix URL parameters (if given).\n\t\t\t\t */\n\t\t\t\tsrc: string\n\n\t\t\t\t/**\n\t\t\t\t * A width-based `srcset` attribute value for the image field with imgix\n\t\t\t\t * URL parameters (if given).\n\t\t\t\t */\n\t\t\t\tsrcset: string\n\t\t\t}\n\t\t: null\n\n/**\n * Configuration for `asImageWidthSrcSet()`.\n */\ntype AsImageWidthSrcSetConfig = Omit<BuildWidthSrcSetParams, \"widths\"> & {\n\twidths?: \"thumbnails\" | BuildWidthSrcSetParams[\"widths\"]\n}\n\n/**\n * Creates a width-based `srcset` from an image field with optional image\n * transformations via imgix URL parameters.\n *\n * If a `widths` parameter is not given, the following widths (in pixels) will\n * be used by default: 640, 750, 828, 1080, 1200, 1920, 2048, 3840.\n *\n * If the image field contains responsive views, each responsive view can be\n * used as a width in the resulting `srcset` by passing `\"thumbnails\"` as the\n * `widths` parameter.\n *\n * @example\n *\n * ```ts\n * const srcset = asImageWidthSrcSet(document.data.photo, {\n * \twidths: [400, 800, 1600],\n * \tsat: -100,\n * })\n * // => {\n * //   src: \"https://images.prismic.io/repo/image.png?sat=-100\",\n * //   srcset: \"https://images.prismic.io/repo/image.png?sat=-100&width=400 400w, \" +\n * //           \"https://images.prismic.io/repo/image.png?sat=-100&width=800 800w, \" +\n * //           \"https://images.prismic.io/repo/image.png?sat=-100&width=1600 1600w\"\n * // }\n * ```\n *\n * @param field - An image field (or one of its responsive views) from which to\n *   get an image URL.\n * @param config - An object of imgix URL API parameters. The `widths` parameter\n *   defines the resulting `srcset` widths. Pass `\"thumbnails\"` to automatically\n *   use the field's responsive views.\n *\n * @returns A `srcset` attribute value for the image field with imgix URL\n *   parameters, or `null` if the field is empty.\n *\n * @see Learn how to optimize images with imgix: {@link https://prismic.io/docs/fields/image}\n * @see imgix URL parameters reference: {@link https://docs.imgix.com/apis/rendering}\n */\nexport const asImageWidthSrcSet = <\n\tField extends ImageFieldImage | null | undefined,\n>(\n\tfield: Field,\n\tconfig: AsImageWidthSrcSetConfig = {},\n): AsImageWidthSrcSetReturnType<Field> => {\n\tif (field && isFilled.imageThumbnail(field)) {\n\t\t// We are using destructuring to omit `widths` from the object\n\t\t// we will pass to `buildURL()`.\n\t\tlet { widths = DEFAULT_WIDTHS, ...imgixParams } = config\n\t\tconst {\n\t\t\turl,\n\t\t\tdimensions,\n\t\t\tid: _id,\n\t\t\talt: _alt,\n\t\t\tcopyright: _copyright,\n\t\t\tedit: _edit,\n\t\t\t...responsiveViews\n\t\t} = field\n\n\t\t// The Prismic Rest API will always return thumbnail values if\n\t\t// the base size is filled.\n\t\tconst responsiveViewObjects: ImageFieldImage<\"filled\">[] =\n\t\t\tObject.values(responsiveViews)\n\n\t\t// If this `asImageWidthSrcSet()` call is configured to use\n\t\t// thumbnail widths, but the field does not have thumbnails, we\n\t\t// fall back to the default set of widths.\n\t\tif (widths === \"thumbnails\" && responsiveViewObjects.length < 1) {\n\t\t\twidths = DEFAULT_WIDTHS\n\t\t}\n\n\t\treturn {\n\t\t\tsrc: buildURL(url, imgixParams),\n\t\t\tsrcset:\n\t\t\t\t// By this point, we know `widths` can only be\n\t\t\t\t// `\"thubmanils\"` if the field has thumbnails.\n\t\t\t\twidths === \"thumbnails\"\n\t\t\t\t\t? [\n\t\t\t\t\t\t\tbuildWidthSrcSet(url, {\n\t\t\t\t\t\t\t\t...imgixParams,\n\t\t\t\t\t\t\t\twidths: [dimensions.width],\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t...responsiveViewObjects.map((thumbnail) => {\n\t\t\t\t\t\t\t\treturn buildWidthSrcSet(thumbnail.url, {\n\t\t\t\t\t\t\t\t\t...imgixParams,\n\t\t\t\t\t\t\t\t\twidths: [thumbnail.dimensions.width],\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t].join(\", \")\n\t\t\t\t\t: buildWidthSrcSet(field.url, {\n\t\t\t\t\t\t\t...imgixParams,\n\t\t\t\t\t\t\twidths,\n\t\t\t\t\t\t}),\n\t\t} as AsImageWidthSrcSetReturnType<Field>\n\t} else {\n\t\treturn null as AsImageWidthSrcSetReturnType<Field>\n\t}\n}\n"],"mappings":";;;;;;;AAUA,MAAM,iBAAiB;CAAC;CAAK;CAAK;CAAM;CAAM;CAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEnD,MAAa,sBAGZ,OACA,SAAmC,EAAE,KACI;AACzC,KAAI,yCAAiC,MAAM,EAAE;EAG5C,IAAI,EAAE,SAAS,eAAgB,GAAG,gBAAgB;EAClD,MAAM,EACL,KACA,YACA,IAAI,KACJ,KAAK,MACL,WAAW,YACX,MAAM,MACN,GAAG,oBACA;EAIJ,MAAMA,wBACL,OAAO,OAAO,gBAAgB;AAK/B,MAAI,WAAW,gBAAgB,sBAAsB,SAAS,EAC7D,UAAS;AAGV,SAAO;GACN,qCAAc,KAAK,YAAY;GAC/B,QAGC,WAAW,eACR,yCACiB,KAAK;IACrB,GAAG;IACH,QAAQ,CAAC,WAAW,MAAM;IAC1B,CAAC,EACF,GAAG,sBAAsB,KAAK,cAAc;AAC3C,mDAAwB,UAAU,KAAK;KACtC,GAAG;KACH,QAAQ,CAAC,UAAU,WAAW,MAAM;KACpC,CAAC;KACD,CACF,CAAC,KAAK,KAAK,2CACM,MAAM,KAAK;IAC5B,GAAG;IACH;IACA,CAAC;GACL;OAED,QAAO"}