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

The official JavaScript + TypeScript client library for Prismic

{"version":3,"file":"asImageWidthSrcSet.cjs","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 image 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's image\n\t\t\t\t * with Imgix 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 will be used by\n * 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.imageField, {\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 - Image field (or one of its responsive views) from which to get\n *   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 (if given). If the image field is empty, `null` is returned.\n *\n * @see Imgix URL parameters reference: 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 {\n\t\t\twidths = DEFAULT_WIDTHS,\n\t\t\t// eslint-disable-next-line prefer-const\n\t\t\t...imgixParams\n\t\t} = 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"],"names":["isFilled.imageThumbnail","buildURL","buildWidthSrcSet"],"mappings":";;;;AAUA,MAAM,iBAAiB,CAAC,KAAK,KAAK,MAAM,MAAM,IAAI;AAmE3C,MAAM,qBAAqB,CAGjC,OACA,SAAmC,OACK;AACxC,MAAI,SAASA,wBAAwB,KAAK,GAAG;AAGxC,QAAA;AAAA,MACH,SAAS;AAAA;AAAA,MAET,GAAG;AAAA,IAAA,IACA;AACJ,UAAM,EACL,KACA,YACA,IAAI,KACJ,KAAK,MACL,WAAW,YACX,MAAM,OACN,GAAG,gBACA,IAAA;AAIE,UAAA,wBACL,OAAO,OAAO,eAAe;AAK9B,QAAI,WAAW,gBAAgB,sBAAsB,SAAS,GAAG;AACvD,eAAA;AAAA,IAAA;AAGH,WAAA;AAAA,MACN,KAAKC,gBAAAA,SAAS,KAAK,WAAW;AAAA,MAC9B;AAAA;AAAA;AAAA,QAGC,WAAW,eACR;AAAA,UACAC,gBAAAA,iBAAiB,KAAK;AAAA,YACrB,GAAG;AAAA,YACH,QAAQ,CAAC,WAAW,KAAK;AAAA,UAAA,CACzB;AAAA,UACD,GAAG,sBAAsB,IAAI,CAAC,cAAa;AACnC,mBAAAA,gBAAA,iBAAiB,UAAU,KAAK;AAAA,cACtC,GAAG;AAAA,cACH,QAAQ,CAAC,UAAU,WAAW,KAAK;AAAA,YAAA,CACnC;AAAA,UACD,CAAA;AAAA,UACA,KAAK,IAAI,IACVA,gBAAAA,iBAAiB,MAAM,KAAK;AAAA,UAC5B,GAAG;AAAA,UACH;AAAA,QACA,CAAA;AAAA;AAAA;SAEC;AACC,WAAA;AAAA,EAAA;AAET;;"}