gatsby-plugin-image 2.19.0-next.2 → 2.19.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.
Files changed (32) hide show
  1. package/dist/babel-helpers.js +66 -66
  2. package/dist/babel-plugin-parse-static-images.js +80 -80
  3. package/dist/components/gatsby-image.browser.js +173 -173
  4. package/dist/components/gatsby-image.server.js +106 -106
  5. package/dist/components/hooks.js +250 -250
  6. package/dist/components/intersection-observer.js +53 -53
  7. package/dist/components/layout-wrapper.js +95 -95
  8. package/dist/components/lazy-hydrate.js +218 -218
  9. package/dist/components/main-image.js +28 -28
  10. package/dist/components/picture.js +103 -103
  11. package/dist/components/placeholder.js +78 -78
  12. package/dist/components/static-image.server.js +111 -111
  13. package/dist/gatsby-node.js +58 -58
  14. package/dist/global.js +2 -2
  15. package/dist/image-utils.js +442 -442
  16. package/dist/index.js +32 -32
  17. package/dist/node-apis/image-processing.js +276 -276
  18. package/dist/node-apis/node-utils.js +11 -11
  19. package/dist/node-apis/parser.js +98 -98
  20. package/dist/node-apis/preprocess-source.js +117 -117
  21. package/dist/node-apis/watcher.js +129 -129
  22. package/dist/resolver-utils.js +120 -120
  23. package/dist/src/babel-helpers.d.ts +6 -6
  24. package/dist/src/babel-plugin-parse-static-images.d.ts +10 -10
  25. package/dist/src/gatsby-node.d.ts +5 -5
  26. package/dist/src/node-apis/image-processing.d.ts +29 -29
  27. package/dist/src/node-apis/node-utils.d.ts +1 -1
  28. package/dist/src/node-apis/parser.d.ts +11 -11
  29. package/dist/src/node-apis/preprocess-source.d.ts +2 -2
  30. package/dist/src/node-apis/watcher.d.ts +12 -12
  31. package/dist/src/resolver-utils.d.ts +21 -21
  32. package/package.json +5 -5
@@ -1,442 +1,442 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __read = (this && this.__read) || function (o, n) {
14
- var m = typeof Symbol === "function" && o[Symbol.iterator];
15
- if (!m) return o;
16
- var i = m.call(o), r, ar = [], e;
17
- try {
18
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
19
- }
20
- catch (error) { e = { error: error }; }
21
- finally {
22
- try {
23
- if (r && !r.done && (m = i["return"])) m.call(i);
24
- }
25
- finally { if (e) throw e.error; }
26
- }
27
- return ar;
28
- };
29
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
30
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
31
- if (ar || !(i in from)) {
32
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
33
- ar[i] = from[i];
34
- }
35
- }
36
- return to.concat(ar || Array.prototype.slice.call(from));
37
- };
38
- var __importDefault = (this && this.__importDefault) || function (mod) {
39
- return (mod && mod.__esModule) ? mod : { "default": mod };
40
- };
41
- exports.__esModule = true;
42
- exports.getDimensionsAndAspectRatio = exports.responsiveImageSizes = exports.fixedImageSizes = exports.calculateImageSizes = exports.generateImageData = exports.getLowResolutionImageURL = exports.setDefaultDimensions = exports.formatFromFilename = exports.getSrcSet = exports.getSizes = exports.EVERY_BREAKPOINT = exports.DEFAULT_BREAKPOINTS = void 0;
43
- var camelcase_1 = __importDefault(require("camelcase"));
44
- var DEFAULT_PIXEL_DENSITIES = [0.25, 0.5, 1, 2];
45
- exports.DEFAULT_BREAKPOINTS = [750, 1080, 1366, 1920];
46
- exports.EVERY_BREAKPOINT = [
47
- 320, 654, 768, 1024, 1366, 1600, 1920, 2048, 2560, 3440, 3840, 4096,
48
- ];
49
- var DEFAULT_FLUID_WIDTH = 800;
50
- var DEFAULT_FIXED_WIDTH = 800;
51
- var DEFAULT_ASPECT_RATIO = 4 / 3;
52
- var warn = function (message) { return console.warn(message); };
53
- var sortNumeric = function (a, b) { return a - b; };
54
- var getSizes = function (width, layout) {
55
- switch (layout) {
56
- // If screen is wider than the max size, image width is the max size,
57
- // otherwise it's the width of the screen
58
- case "constrained":
59
- return "(min-width: ".concat(width, "px) ").concat(width, "px, 100vw");
60
- // Image is always the same width, whatever the size of the screen
61
- case "fixed":
62
- return "".concat(width, "px");
63
- // Image is always the width of the screen
64
- case "fullWidth":
65
- return "100vw";
66
- default:
67
- return undefined;
68
- }
69
- };
70
- exports.getSizes = getSizes;
71
- var getSrcSet = function (images) {
72
- return images.map(function (image) { return "".concat(image.src, " ").concat(image.width, "w"); }).join(",\n");
73
- };
74
- exports.getSrcSet = getSrcSet;
75
- function formatFromFilename(filename) {
76
- var dot = filename.lastIndexOf(".");
77
- if (dot !== -1) {
78
- var ext = filename.slice(dot + 1);
79
- if (ext === "jpeg") {
80
- return "jpg";
81
- }
82
- if (ext.length === 3 || ext.length === 4) {
83
- return ext;
84
- }
85
- }
86
- return undefined;
87
- }
88
- exports.formatFromFilename = formatFromFilename;
89
- function setDefaultDimensions(args) {
90
- var _a = args.layout, layout = _a === void 0 ? "constrained" : _a, width = args.width, height = args.height, sourceMetadata = args.sourceMetadata, breakpoints = args.breakpoints, aspectRatio = args.aspectRatio, _b = args.formats, formats = _b === void 0 ? ["auto", "webp"] : _b;
91
- formats = formats.map(function (format) { return format.toLowerCase(); });
92
- layout = (0, camelcase_1["default"])(layout);
93
- if (width && height) {
94
- return __assign(__assign({}, args), { formats: formats, layout: layout, aspectRatio: width / height });
95
- }
96
- if (sourceMetadata.width && sourceMetadata.height && !aspectRatio) {
97
- aspectRatio = sourceMetadata.width / sourceMetadata.height;
98
- }
99
- if (layout === "fullWidth") {
100
- width = width || sourceMetadata.width || breakpoints[breakpoints.length - 1];
101
- height = height || Math.round(width / (aspectRatio || DEFAULT_ASPECT_RATIO));
102
- }
103
- else {
104
- if (!width) {
105
- if (height && aspectRatio) {
106
- width = height * aspectRatio;
107
- }
108
- else if (sourceMetadata.width) {
109
- width = sourceMetadata.width;
110
- }
111
- else if (height) {
112
- width = Math.round(height / DEFAULT_ASPECT_RATIO);
113
- }
114
- else {
115
- width = DEFAULT_FIXED_WIDTH;
116
- }
117
- }
118
- if (aspectRatio && !height) {
119
- height = Math.round(width / aspectRatio);
120
- }
121
- else if (!aspectRatio) {
122
- aspectRatio = width / height;
123
- }
124
- }
125
- return __assign(__assign({}, args), { width: width, height: height, aspectRatio: aspectRatio, layout: layout, formats: formats });
126
- }
127
- exports.setDefaultDimensions = setDefaultDimensions;
128
- /**
129
- * Use this for getting an image for the blurred placeholder. This ensures the
130
- * aspect ratio and crop match the main image
131
- */
132
- function getLowResolutionImageURL(args, width) {
133
- var _a;
134
- if (width === void 0) { width = 20; }
135
- args = setDefaultDimensions(args);
136
- var generateImageSource = args.generateImageSource, filename = args.filename, aspectRatio = args.aspectRatio;
137
- return (_a = generateImageSource(filename, width, Math.round(width / aspectRatio), args.sourceMetadata.format || "jpg", args.fit, args.options)) === null || _a === void 0 ? void 0 : _a.src;
138
- }
139
- exports.getLowResolutionImageURL = getLowResolutionImageURL;
140
- function generateImageData(args) {
141
- args = setDefaultDimensions(args);
142
- var pluginName = args.pluginName, sourceMetadata = args.sourceMetadata, generateImageSource = args.generateImageSource, layout = args.layout, fit = args.fit, options = args.options, width = args.width, height = args.height, filename = args.filename, _a = args.reporter, reporter = _a === void 0 ? { warn: warn } : _a, backgroundColor = args.backgroundColor, placeholderURL = args.placeholderURL;
143
- if (!pluginName) {
144
- reporter.warn("[gatsby-plugin-image] \"generateImageData\" was not passed a plugin name");
145
- }
146
- if (typeof generateImageSource !== "function") {
147
- throw new Error("generateImageSource must be a function");
148
- }
149
- if (!sourceMetadata || (!sourceMetadata.width && !sourceMetadata.height)) {
150
- // No metadata means we let the CDN handle max size etc, aspect ratio etc
151
- sourceMetadata = {
152
- width: width,
153
- height: height,
154
- format: (sourceMetadata === null || sourceMetadata === void 0 ? void 0 : sourceMetadata.format) || formatFromFilename(filename) || "auto"
155
- };
156
- }
157
- else if (!sourceMetadata.format) {
158
- sourceMetadata.format = formatFromFilename(filename);
159
- }
160
- var formats = new Set(args.formats);
161
- if (formats.size === 0 || formats.has("auto") || formats.has("")) {
162
- formats["delete"]("auto");
163
- formats["delete"]("");
164
- formats.add(sourceMetadata.format);
165
- }
166
- if (formats.has("jpg") && formats.has("png")) {
167
- reporter.warn("[".concat(pluginName, "] Specifying both 'jpg' and 'png' formats is not supported. Using 'auto' instead"));
168
- if (sourceMetadata.format === "jpg") {
169
- formats["delete"]("png");
170
- }
171
- else {
172
- formats["delete"]("jpg");
173
- }
174
- }
175
- var imageSizes = calculateImageSizes(__assign(__assign({}, args), { sourceMetadata: sourceMetadata }));
176
- var result = {
177
- sources: []
178
- };
179
- var sizes = args.sizes;
180
- if (!sizes) {
181
- sizes = (0, exports.getSizes)(imageSizes.presentationWidth, layout);
182
- }
183
- formats.forEach(function (format) {
184
- var _a;
185
- var images = imageSizes.sizes
186
- .map(function (size) {
187
- var imageSrc = generateImageSource(filename, size, Math.round(size / imageSizes.aspectRatio), format, fit, options);
188
- if (!(imageSrc === null || imageSrc === void 0 ? void 0 : imageSrc.width) ||
189
- !imageSrc.height ||
190
- !imageSrc.src ||
191
- !imageSrc.format) {
192
- reporter.warn("[".concat(pluginName, "] The resolver for image ").concat(filename, " returned an invalid value."));
193
- return undefined;
194
- }
195
- return imageSrc;
196
- })
197
- .filter(Boolean);
198
- if (format === "jpg" || format === "png" || format === "auto") {
199
- var unscaled = images.find(function (img) { return img.width === imageSizes.unscaledWidth; }) || images[0];
200
- if (unscaled) {
201
- result.fallback = {
202
- src: unscaled.src,
203
- srcSet: (0, exports.getSrcSet)(images),
204
- sizes: sizes
205
- };
206
- }
207
- }
208
- else {
209
- (_a = result.sources) === null || _a === void 0 ? void 0 : _a.push({
210
- srcSet: (0, exports.getSrcSet)(images),
211
- sizes: sizes,
212
- type: "image/".concat(format)
213
- });
214
- }
215
- });
216
- var imageProps = {
217
- images: result,
218
- layout: layout,
219
- backgroundColor: backgroundColor
220
- };
221
- if (placeholderURL) {
222
- imageProps.placeholder = { fallback: placeholderURL };
223
- }
224
- switch (layout) {
225
- case "fixed":
226
- imageProps.width = imageSizes.presentationWidth;
227
- imageProps.height = imageSizes.presentationHeight;
228
- break;
229
- case "fullWidth":
230
- imageProps.width = 1;
231
- imageProps.height = 1 / imageSizes.aspectRatio;
232
- break;
233
- case "constrained":
234
- imageProps.width = args.width || imageSizes.presentationWidth || 1;
235
- imageProps.height = (imageProps.width || 1) / imageSizes.aspectRatio;
236
- }
237
- return imageProps;
238
- }
239
- exports.generateImageData = generateImageData;
240
- var dedupeAndSortDensities = function (values) {
241
- return Array.from(new Set(__spreadArray([1], __read(values), false))).sort(sortNumeric);
242
- };
243
- function calculateImageSizes(args) {
244
- var width = args.width, height = args.height, filename = args.filename, _a = args.layout, layout = _a === void 0 ? "constrained" : _a, imgDimensions = args.sourceMetadata, _b = args.reporter, reporter = _b === void 0 ? { warn: warn } : _b, _c = args.breakpoints, breakpoints = _c === void 0 ? exports.DEFAULT_BREAKPOINTS : _c;
245
- // check that all dimensions provided are positive
246
- var userDimensions = { width: width, height: height };
247
- var erroneousUserDimensions = Object.entries(userDimensions).filter(function (_a) {
248
- var _b = __read(_a, 2), _ = _b[0], size = _b[1];
249
- return typeof size === "number" && size < 1;
250
- });
251
- if (erroneousUserDimensions.length) {
252
- throw new Error("Specified dimensions for images must be positive numbers (> 0). Problem dimensions you have are ".concat(erroneousUserDimensions
253
- .map(function (dim) { return dim.join(": "); })
254
- .join(", ")));
255
- }
256
- if (layout === "fixed") {
257
- return fixedImageSizes(args);
258
- }
259
- else if (layout === "constrained") {
260
- return responsiveImageSizes(args);
261
- }
262
- else if (layout === "fullWidth") {
263
- return responsiveImageSizes(__assign({ breakpoints: breakpoints }, args));
264
- }
265
- else {
266
- reporter.warn("No valid layout was provided for the image at ".concat(filename, ". Valid image layouts are fixed, fullWidth, and constrained. Found ").concat(layout));
267
- return {
268
- sizes: [imgDimensions.width],
269
- presentationWidth: imgDimensions.width,
270
- presentationHeight: imgDimensions.height,
271
- aspectRatio: imgDimensions.width / imgDimensions.height,
272
- unscaledWidth: imgDimensions.width
273
- };
274
- }
275
- }
276
- exports.calculateImageSizes = calculateImageSizes;
277
- function fixedImageSizes(_a) {
278
- var filename = _a.filename, imgDimensions = _a.sourceMetadata, width = _a.width, height = _a.height, _b = _a.fit, fit = _b === void 0 ? "cover" : _b, _c = _a.outputPixelDensities, outputPixelDensities = _c === void 0 ? DEFAULT_PIXEL_DENSITIES : _c, _d = _a.reporter, reporter = _d === void 0 ? { warn: warn } : _d;
279
- var aspectRatio = imgDimensions.width / imgDimensions.height;
280
- // Sort, dedupe and ensure there's a 1
281
- var densities = dedupeAndSortDensities(outputPixelDensities);
282
- // If both are provided then we need to check the fit
283
- if (width && height) {
284
- var calculated = getDimensionsAndAspectRatio(imgDimensions, {
285
- width: width,
286
- height: height,
287
- fit: fit
288
- });
289
- width = calculated.width;
290
- height = calculated.height;
291
- aspectRatio = calculated.aspectRatio;
292
- }
293
- if (!width) {
294
- if (!height) {
295
- width = DEFAULT_FIXED_WIDTH;
296
- }
297
- else {
298
- width = Math.round(height * aspectRatio);
299
- }
300
- }
301
- else if (!height) {
302
- height = Math.round(width / aspectRatio);
303
- }
304
- var originalWidth = width; // will use this for presentationWidth, don't want to lose it
305
- var isTopSizeOverriden = imgDimensions.width < width || imgDimensions.height < height;
306
- // If the image is smaller than requested, warn the user that it's being processed as such
307
- // print out this message with the necessary information before we overwrite it for sizing
308
- if (isTopSizeOverriden) {
309
- var fixedDimension = imgDimensions.width < width ? "width" : "height";
310
- reporter.warn("\nThe requested ".concat(fixedDimension, " \"").concat(fixedDimension === "width" ? width : height, "px\" for the image ").concat(filename, " was larger than the actual image ").concat(fixedDimension, " of ").concat(imgDimensions[fixedDimension], "px. If possible, replace the current image with a larger one."));
311
- if (fixedDimension === "width") {
312
- width = imgDimensions.width;
313
- height = Math.round(width / aspectRatio);
314
- }
315
- else {
316
- height = imgDimensions.height;
317
- width = height * aspectRatio;
318
- }
319
- }
320
- var sizes = densities
321
- .filter(function (size) { return size >= 1; }) // remove smaller densities because fixed images don't need them
322
- .map(function (density) { return Math.round(density * width); })
323
- .filter(function (size) { return size <= imgDimensions.width; });
324
- return {
325
- sizes: sizes,
326
- aspectRatio: aspectRatio,
327
- presentationWidth: originalWidth,
328
- presentationHeight: Math.round(originalWidth / aspectRatio),
329
- unscaledWidth: width
330
- };
331
- }
332
- exports.fixedImageSizes = fixedImageSizes;
333
- function responsiveImageSizes(_a) {
334
- var imgDimensions = _a.sourceMetadata, width = _a.width, height = _a.height, _b = _a.fit, fit = _b === void 0 ? "cover" : _b, _c = _a.outputPixelDensities, outputPixelDensities = _c === void 0 ? DEFAULT_PIXEL_DENSITIES : _c, breakpoints = _a.breakpoints, layout = _a.layout;
335
- var sizes;
336
- var aspectRatio = imgDimensions.width / imgDimensions.height;
337
- // Sort, dedupe and ensure there's a 1
338
- var densities = dedupeAndSortDensities(outputPixelDensities);
339
- // If both are provided then we need to check the fit
340
- if (width && height) {
341
- var calculated = getDimensionsAndAspectRatio(imgDimensions, {
342
- width: width,
343
- height: height,
344
- fit: fit
345
- });
346
- width = calculated.width;
347
- height = calculated.height;
348
- aspectRatio = calculated.aspectRatio;
349
- }
350
- // Case 1: width of height were passed in, make sure it isn't larger than the actual image
351
- width = width && Math.min(width, imgDimensions.width);
352
- height = height && Math.min(height, imgDimensions.height);
353
- // Case 2: neither width or height were passed in, use default size
354
- if (!width && !height) {
355
- width = Math.min(DEFAULT_FLUID_WIDTH, imgDimensions.width);
356
- height = width / aspectRatio;
357
- }
358
- // if it still hasn't been found, calculate width from the derived height.
359
- // TS isn't smart enough to realise the type for height has been narrowed here
360
- if (!width) {
361
- width = height * aspectRatio;
362
- }
363
- var originalWidth = width;
364
- var isTopSizeOverriden = imgDimensions.width < width || imgDimensions.height < height;
365
- if (isTopSizeOverriden) {
366
- width = imgDimensions.width;
367
- height = imgDimensions.height;
368
- }
369
- width = Math.round(width);
370
- if ((breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.length) > 0) {
371
- sizes = breakpoints.filter(function (size) { return size <= imgDimensions.width; });
372
- // If a larger breakpoint has been filtered-out, add the actual image width instead
373
- if (sizes.length < breakpoints.length &&
374
- !sizes.includes(imgDimensions.width)) {
375
- sizes.push(imgDimensions.width);
376
- }
377
- }
378
- else {
379
- sizes = densities.map(function (density) { return Math.round(density * width); });
380
- sizes = sizes.filter(function (size) { return size <= imgDimensions.width; });
381
- }
382
- // ensure that the size passed in is included in the final output
383
- if (layout === "constrained" && !sizes.includes(width)) {
384
- sizes.push(width);
385
- }
386
- sizes = sizes.sort(sortNumeric);
387
- return {
388
- sizes: sizes,
389
- aspectRatio: aspectRatio,
390
- presentationWidth: originalWidth,
391
- presentationHeight: Math.round(originalWidth / aspectRatio),
392
- unscaledWidth: width
393
- };
394
- }
395
- exports.responsiveImageSizes = responsiveImageSizes;
396
- function getDimensionsAndAspectRatio(dimensions, options) {
397
- // Calculate the eventual width/height of the image.
398
- var imageAspectRatio = dimensions.width / dimensions.height;
399
- var width = options.width;
400
- var height = options.height;
401
- switch (options.fit) {
402
- case "fill": {
403
- width = options.width ? options.width : dimensions.width;
404
- height = options.height ? options.height : dimensions.height;
405
- break;
406
- }
407
- case "inside": {
408
- var widthOption = options.width
409
- ? options.width
410
- : Number.MAX_SAFE_INTEGER;
411
- var heightOption = options.height
412
- ? options.height
413
- : Number.MAX_SAFE_INTEGER;
414
- width = Math.min(widthOption, Math.round(heightOption * imageAspectRatio));
415
- height = Math.min(heightOption, Math.round(widthOption / imageAspectRatio));
416
- break;
417
- }
418
- case "outside": {
419
- var widthOption = options.width ? options.width : 0;
420
- var heightOption = options.height ? options.height : 0;
421
- width = Math.max(widthOption, Math.round(heightOption * imageAspectRatio));
422
- height = Math.max(heightOption, Math.round(widthOption / imageAspectRatio));
423
- break;
424
- }
425
- default: {
426
- if (options.width && !options.height) {
427
- width = options.width;
428
- height = Math.round(options.width / imageAspectRatio);
429
- }
430
- if (options.height && !options.width) {
431
- width = Math.round(options.height * imageAspectRatio);
432
- height = options.height;
433
- }
434
- }
435
- }
436
- return {
437
- width: width,
438
- height: height,
439
- aspectRatio: width / height
440
- };
441
- }
442
- exports.getDimensionsAndAspectRatio = getDimensionsAndAspectRatio;
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __read = (this && this.__read) || function (o, n) {
14
+ var m = typeof Symbol === "function" && o[Symbol.iterator];
15
+ if (!m) return o;
16
+ var i = m.call(o), r, ar = [], e;
17
+ try {
18
+ while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
19
+ }
20
+ catch (error) { e = { error: error }; }
21
+ finally {
22
+ try {
23
+ if (r && !r.done && (m = i["return"])) m.call(i);
24
+ }
25
+ finally { if (e) throw e.error; }
26
+ }
27
+ return ar;
28
+ };
29
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
30
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
31
+ if (ar || !(i in from)) {
32
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
33
+ ar[i] = from[i];
34
+ }
35
+ }
36
+ return to.concat(ar || Array.prototype.slice.call(from));
37
+ };
38
+ var __importDefault = (this && this.__importDefault) || function (mod) {
39
+ return (mod && mod.__esModule) ? mod : { "default": mod };
40
+ };
41
+ exports.__esModule = true;
42
+ exports.getDimensionsAndAspectRatio = exports.responsiveImageSizes = exports.fixedImageSizes = exports.calculateImageSizes = exports.generateImageData = exports.getLowResolutionImageURL = exports.setDefaultDimensions = exports.formatFromFilename = exports.getSrcSet = exports.getSizes = exports.EVERY_BREAKPOINT = exports.DEFAULT_BREAKPOINTS = void 0;
43
+ var camelcase_1 = __importDefault(require("camelcase"));
44
+ var DEFAULT_PIXEL_DENSITIES = [0.25, 0.5, 1, 2];
45
+ exports.DEFAULT_BREAKPOINTS = [750, 1080, 1366, 1920];
46
+ exports.EVERY_BREAKPOINT = [
47
+ 320, 654, 768, 1024, 1366, 1600, 1920, 2048, 2560, 3440, 3840, 4096,
48
+ ];
49
+ var DEFAULT_FLUID_WIDTH = 800;
50
+ var DEFAULT_FIXED_WIDTH = 800;
51
+ var DEFAULT_ASPECT_RATIO = 4 / 3;
52
+ var warn = function (message) { return console.warn(message); };
53
+ var sortNumeric = function (a, b) { return a - b; };
54
+ var getSizes = function (width, layout) {
55
+ switch (layout) {
56
+ // If screen is wider than the max size, image width is the max size,
57
+ // otherwise it's the width of the screen
58
+ case "constrained":
59
+ return "(min-width: ".concat(width, "px) ").concat(width, "px, 100vw");
60
+ // Image is always the same width, whatever the size of the screen
61
+ case "fixed":
62
+ return "".concat(width, "px");
63
+ // Image is always the width of the screen
64
+ case "fullWidth":
65
+ return "100vw";
66
+ default:
67
+ return undefined;
68
+ }
69
+ };
70
+ exports.getSizes = getSizes;
71
+ var getSrcSet = function (images) {
72
+ return images.map(function (image) { return "".concat(image.src, " ").concat(image.width, "w"); }).join(",\n");
73
+ };
74
+ exports.getSrcSet = getSrcSet;
75
+ function formatFromFilename(filename) {
76
+ var dot = filename.lastIndexOf(".");
77
+ if (dot !== -1) {
78
+ var ext = filename.slice(dot + 1);
79
+ if (ext === "jpeg") {
80
+ return "jpg";
81
+ }
82
+ if (ext.length === 3 || ext.length === 4) {
83
+ return ext;
84
+ }
85
+ }
86
+ return undefined;
87
+ }
88
+ exports.formatFromFilename = formatFromFilename;
89
+ function setDefaultDimensions(args) {
90
+ var _a = args.layout, layout = _a === void 0 ? "constrained" : _a, width = args.width, height = args.height, sourceMetadata = args.sourceMetadata, breakpoints = args.breakpoints, aspectRatio = args.aspectRatio, _b = args.formats, formats = _b === void 0 ? ["auto", "webp"] : _b;
91
+ formats = formats.map(function (format) { return format.toLowerCase(); });
92
+ layout = (0, camelcase_1["default"])(layout);
93
+ if (width && height) {
94
+ return __assign(__assign({}, args), { formats: formats, layout: layout, aspectRatio: width / height });
95
+ }
96
+ if (sourceMetadata.width && sourceMetadata.height && !aspectRatio) {
97
+ aspectRatio = sourceMetadata.width / sourceMetadata.height;
98
+ }
99
+ if (layout === "fullWidth") {
100
+ width = width || sourceMetadata.width || breakpoints[breakpoints.length - 1];
101
+ height = height || Math.round(width / (aspectRatio || DEFAULT_ASPECT_RATIO));
102
+ }
103
+ else {
104
+ if (!width) {
105
+ if (height && aspectRatio) {
106
+ width = height * aspectRatio;
107
+ }
108
+ else if (sourceMetadata.width) {
109
+ width = sourceMetadata.width;
110
+ }
111
+ else if (height) {
112
+ width = Math.round(height / DEFAULT_ASPECT_RATIO);
113
+ }
114
+ else {
115
+ width = DEFAULT_FIXED_WIDTH;
116
+ }
117
+ }
118
+ if (aspectRatio && !height) {
119
+ height = Math.round(width / aspectRatio);
120
+ }
121
+ else if (!aspectRatio) {
122
+ aspectRatio = width / height;
123
+ }
124
+ }
125
+ return __assign(__assign({}, args), { width: width, height: height, aspectRatio: aspectRatio, layout: layout, formats: formats });
126
+ }
127
+ exports.setDefaultDimensions = setDefaultDimensions;
128
+ /**
129
+ * Use this for getting an image for the blurred placeholder. This ensures the
130
+ * aspect ratio and crop match the main image
131
+ */
132
+ function getLowResolutionImageURL(args, width) {
133
+ var _a;
134
+ if (width === void 0) { width = 20; }
135
+ args = setDefaultDimensions(args);
136
+ var generateImageSource = args.generateImageSource, filename = args.filename, aspectRatio = args.aspectRatio;
137
+ return (_a = generateImageSource(filename, width, Math.round(width / aspectRatio), args.sourceMetadata.format || "jpg", args.fit, args.options)) === null || _a === void 0 ? void 0 : _a.src;
138
+ }
139
+ exports.getLowResolutionImageURL = getLowResolutionImageURL;
140
+ function generateImageData(args) {
141
+ args = setDefaultDimensions(args);
142
+ var pluginName = args.pluginName, sourceMetadata = args.sourceMetadata, generateImageSource = args.generateImageSource, layout = args.layout, fit = args.fit, options = args.options, width = args.width, height = args.height, filename = args.filename, _a = args.reporter, reporter = _a === void 0 ? { warn: warn } : _a, backgroundColor = args.backgroundColor, placeholderURL = args.placeholderURL;
143
+ if (!pluginName) {
144
+ reporter.warn("[gatsby-plugin-image] \"generateImageData\" was not passed a plugin name");
145
+ }
146
+ if (typeof generateImageSource !== "function") {
147
+ throw new Error("generateImageSource must be a function");
148
+ }
149
+ if (!sourceMetadata || (!sourceMetadata.width && !sourceMetadata.height)) {
150
+ // No metadata means we let the CDN handle max size etc, aspect ratio etc
151
+ sourceMetadata = {
152
+ width: width,
153
+ height: height,
154
+ format: (sourceMetadata === null || sourceMetadata === void 0 ? void 0 : sourceMetadata.format) || formatFromFilename(filename) || "auto"
155
+ };
156
+ }
157
+ else if (!sourceMetadata.format) {
158
+ sourceMetadata.format = formatFromFilename(filename);
159
+ }
160
+ var formats = new Set(args.formats);
161
+ if (formats.size === 0 || formats.has("auto") || formats.has("")) {
162
+ formats["delete"]("auto");
163
+ formats["delete"]("");
164
+ formats.add(sourceMetadata.format);
165
+ }
166
+ if (formats.has("jpg") && formats.has("png")) {
167
+ reporter.warn("[".concat(pluginName, "] Specifying both 'jpg' and 'png' formats is not supported. Using 'auto' instead"));
168
+ if (sourceMetadata.format === "jpg") {
169
+ formats["delete"]("png");
170
+ }
171
+ else {
172
+ formats["delete"]("jpg");
173
+ }
174
+ }
175
+ var imageSizes = calculateImageSizes(__assign(__assign({}, args), { sourceMetadata: sourceMetadata }));
176
+ var result = {
177
+ sources: []
178
+ };
179
+ var sizes = args.sizes;
180
+ if (!sizes) {
181
+ sizes = (0, exports.getSizes)(imageSizes.presentationWidth, layout);
182
+ }
183
+ formats.forEach(function (format) {
184
+ var _a;
185
+ var images = imageSizes.sizes
186
+ .map(function (size) {
187
+ var imageSrc = generateImageSource(filename, size, Math.round(size / imageSizes.aspectRatio), format, fit, options);
188
+ if (!(imageSrc === null || imageSrc === void 0 ? void 0 : imageSrc.width) ||
189
+ !imageSrc.height ||
190
+ !imageSrc.src ||
191
+ !imageSrc.format) {
192
+ reporter.warn("[".concat(pluginName, "] The resolver for image ").concat(filename, " returned an invalid value."));
193
+ return undefined;
194
+ }
195
+ return imageSrc;
196
+ })
197
+ .filter(Boolean);
198
+ if (format === "jpg" || format === "png" || format === "auto") {
199
+ var unscaled = images.find(function (img) { return img.width === imageSizes.unscaledWidth; }) || images[0];
200
+ if (unscaled) {
201
+ result.fallback = {
202
+ src: unscaled.src,
203
+ srcSet: (0, exports.getSrcSet)(images),
204
+ sizes: sizes
205
+ };
206
+ }
207
+ }
208
+ else {
209
+ (_a = result.sources) === null || _a === void 0 ? void 0 : _a.push({
210
+ srcSet: (0, exports.getSrcSet)(images),
211
+ sizes: sizes,
212
+ type: "image/".concat(format)
213
+ });
214
+ }
215
+ });
216
+ var imageProps = {
217
+ images: result,
218
+ layout: layout,
219
+ backgroundColor: backgroundColor
220
+ };
221
+ if (placeholderURL) {
222
+ imageProps.placeholder = { fallback: placeholderURL };
223
+ }
224
+ switch (layout) {
225
+ case "fixed":
226
+ imageProps.width = imageSizes.presentationWidth;
227
+ imageProps.height = imageSizes.presentationHeight;
228
+ break;
229
+ case "fullWidth":
230
+ imageProps.width = 1;
231
+ imageProps.height = 1 / imageSizes.aspectRatio;
232
+ break;
233
+ case "constrained":
234
+ imageProps.width = args.width || imageSizes.presentationWidth || 1;
235
+ imageProps.height = (imageProps.width || 1) / imageSizes.aspectRatio;
236
+ }
237
+ return imageProps;
238
+ }
239
+ exports.generateImageData = generateImageData;
240
+ var dedupeAndSortDensities = function (values) {
241
+ return Array.from(new Set(__spreadArray([1], __read(values), false))).sort(sortNumeric);
242
+ };
243
+ function calculateImageSizes(args) {
244
+ var width = args.width, height = args.height, filename = args.filename, _a = args.layout, layout = _a === void 0 ? "constrained" : _a, imgDimensions = args.sourceMetadata, _b = args.reporter, reporter = _b === void 0 ? { warn: warn } : _b, _c = args.breakpoints, breakpoints = _c === void 0 ? exports.DEFAULT_BREAKPOINTS : _c;
245
+ // check that all dimensions provided are positive
246
+ var userDimensions = { width: width, height: height };
247
+ var erroneousUserDimensions = Object.entries(userDimensions).filter(function (_a) {
248
+ var _b = __read(_a, 2), _ = _b[0], size = _b[1];
249
+ return typeof size === "number" && size < 1;
250
+ });
251
+ if (erroneousUserDimensions.length) {
252
+ throw new Error("Specified dimensions for images must be positive numbers (> 0). Problem dimensions you have are ".concat(erroneousUserDimensions
253
+ .map(function (dim) { return dim.join(": "); })
254
+ .join(", ")));
255
+ }
256
+ if (layout === "fixed") {
257
+ return fixedImageSizes(args);
258
+ }
259
+ else if (layout === "constrained") {
260
+ return responsiveImageSizes(args);
261
+ }
262
+ else if (layout === "fullWidth") {
263
+ return responsiveImageSizes(__assign({ breakpoints: breakpoints }, args));
264
+ }
265
+ else {
266
+ reporter.warn("No valid layout was provided for the image at ".concat(filename, ". Valid image layouts are fixed, fullWidth, and constrained. Found ").concat(layout));
267
+ return {
268
+ sizes: [imgDimensions.width],
269
+ presentationWidth: imgDimensions.width,
270
+ presentationHeight: imgDimensions.height,
271
+ aspectRatio: imgDimensions.width / imgDimensions.height,
272
+ unscaledWidth: imgDimensions.width
273
+ };
274
+ }
275
+ }
276
+ exports.calculateImageSizes = calculateImageSizes;
277
+ function fixedImageSizes(_a) {
278
+ var filename = _a.filename, imgDimensions = _a.sourceMetadata, width = _a.width, height = _a.height, _b = _a.fit, fit = _b === void 0 ? "cover" : _b, _c = _a.outputPixelDensities, outputPixelDensities = _c === void 0 ? DEFAULT_PIXEL_DENSITIES : _c, _d = _a.reporter, reporter = _d === void 0 ? { warn: warn } : _d;
279
+ var aspectRatio = imgDimensions.width / imgDimensions.height;
280
+ // Sort, dedupe and ensure there's a 1
281
+ var densities = dedupeAndSortDensities(outputPixelDensities);
282
+ // If both are provided then we need to check the fit
283
+ if (width && height) {
284
+ var calculated = getDimensionsAndAspectRatio(imgDimensions, {
285
+ width: width,
286
+ height: height,
287
+ fit: fit
288
+ });
289
+ width = calculated.width;
290
+ height = calculated.height;
291
+ aspectRatio = calculated.aspectRatio;
292
+ }
293
+ if (!width) {
294
+ if (!height) {
295
+ width = DEFAULT_FIXED_WIDTH;
296
+ }
297
+ else {
298
+ width = Math.round(height * aspectRatio);
299
+ }
300
+ }
301
+ else if (!height) {
302
+ height = Math.round(width / aspectRatio);
303
+ }
304
+ var originalWidth = width; // will use this for presentationWidth, don't want to lose it
305
+ var isTopSizeOverriden = imgDimensions.width < width || imgDimensions.height < height;
306
+ // If the image is smaller than requested, warn the user that it's being processed as such
307
+ // print out this message with the necessary information before we overwrite it for sizing
308
+ if (isTopSizeOverriden) {
309
+ var fixedDimension = imgDimensions.width < width ? "width" : "height";
310
+ reporter.warn("\nThe requested ".concat(fixedDimension, " \"").concat(fixedDimension === "width" ? width : height, "px\" for the image ").concat(filename, " was larger than the actual image ").concat(fixedDimension, " of ").concat(imgDimensions[fixedDimension], "px. If possible, replace the current image with a larger one."));
311
+ if (fixedDimension === "width") {
312
+ width = imgDimensions.width;
313
+ height = Math.round(width / aspectRatio);
314
+ }
315
+ else {
316
+ height = imgDimensions.height;
317
+ width = height * aspectRatio;
318
+ }
319
+ }
320
+ var sizes = densities
321
+ .filter(function (size) { return size >= 1; }) // remove smaller densities because fixed images don't need them
322
+ .map(function (density) { return Math.round(density * width); })
323
+ .filter(function (size) { return size <= imgDimensions.width; });
324
+ return {
325
+ sizes: sizes,
326
+ aspectRatio: aspectRatio,
327
+ presentationWidth: originalWidth,
328
+ presentationHeight: Math.round(originalWidth / aspectRatio),
329
+ unscaledWidth: width
330
+ };
331
+ }
332
+ exports.fixedImageSizes = fixedImageSizes;
333
+ function responsiveImageSizes(_a) {
334
+ var imgDimensions = _a.sourceMetadata, width = _a.width, height = _a.height, _b = _a.fit, fit = _b === void 0 ? "cover" : _b, _c = _a.outputPixelDensities, outputPixelDensities = _c === void 0 ? DEFAULT_PIXEL_DENSITIES : _c, breakpoints = _a.breakpoints, layout = _a.layout;
335
+ var sizes;
336
+ var aspectRatio = imgDimensions.width / imgDimensions.height;
337
+ // Sort, dedupe and ensure there's a 1
338
+ var densities = dedupeAndSortDensities(outputPixelDensities);
339
+ // If both are provided then we need to check the fit
340
+ if (width && height) {
341
+ var calculated = getDimensionsAndAspectRatio(imgDimensions, {
342
+ width: width,
343
+ height: height,
344
+ fit: fit
345
+ });
346
+ width = calculated.width;
347
+ height = calculated.height;
348
+ aspectRatio = calculated.aspectRatio;
349
+ }
350
+ // Case 1: width of height were passed in, make sure it isn't larger than the actual image
351
+ width = width && Math.min(width, imgDimensions.width);
352
+ height = height && Math.min(height, imgDimensions.height);
353
+ // Case 2: neither width or height were passed in, use default size
354
+ if (!width && !height) {
355
+ width = Math.min(DEFAULT_FLUID_WIDTH, imgDimensions.width);
356
+ height = width / aspectRatio;
357
+ }
358
+ // if it still hasn't been found, calculate width from the derived height.
359
+ // TS isn't smart enough to realise the type for height has been narrowed here
360
+ if (!width) {
361
+ width = height * aspectRatio;
362
+ }
363
+ var originalWidth = width;
364
+ var isTopSizeOverriden = imgDimensions.width < width || imgDimensions.height < height;
365
+ if (isTopSizeOverriden) {
366
+ width = imgDimensions.width;
367
+ height = imgDimensions.height;
368
+ }
369
+ width = Math.round(width);
370
+ if ((breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.length) > 0) {
371
+ sizes = breakpoints.filter(function (size) { return size <= imgDimensions.width; });
372
+ // If a larger breakpoint has been filtered-out, add the actual image width instead
373
+ if (sizes.length < breakpoints.length &&
374
+ !sizes.includes(imgDimensions.width)) {
375
+ sizes.push(imgDimensions.width);
376
+ }
377
+ }
378
+ else {
379
+ sizes = densities.map(function (density) { return Math.round(density * width); });
380
+ sizes = sizes.filter(function (size) { return size <= imgDimensions.width; });
381
+ }
382
+ // ensure that the size passed in is included in the final output
383
+ if (layout === "constrained" && !sizes.includes(width)) {
384
+ sizes.push(width);
385
+ }
386
+ sizes = sizes.sort(sortNumeric);
387
+ return {
388
+ sizes: sizes,
389
+ aspectRatio: aspectRatio,
390
+ presentationWidth: originalWidth,
391
+ presentationHeight: Math.round(originalWidth / aspectRatio),
392
+ unscaledWidth: width
393
+ };
394
+ }
395
+ exports.responsiveImageSizes = responsiveImageSizes;
396
+ function getDimensionsAndAspectRatio(dimensions, options) {
397
+ // Calculate the eventual width/height of the image.
398
+ var imageAspectRatio = dimensions.width / dimensions.height;
399
+ var width = options.width;
400
+ var height = options.height;
401
+ switch (options.fit) {
402
+ case "fill": {
403
+ width = options.width ? options.width : dimensions.width;
404
+ height = options.height ? options.height : dimensions.height;
405
+ break;
406
+ }
407
+ case "inside": {
408
+ var widthOption = options.width
409
+ ? options.width
410
+ : Number.MAX_SAFE_INTEGER;
411
+ var heightOption = options.height
412
+ ? options.height
413
+ : Number.MAX_SAFE_INTEGER;
414
+ width = Math.min(widthOption, Math.round(heightOption * imageAspectRatio));
415
+ height = Math.min(heightOption, Math.round(widthOption / imageAspectRatio));
416
+ break;
417
+ }
418
+ case "outside": {
419
+ var widthOption = options.width ? options.width : 0;
420
+ var heightOption = options.height ? options.height : 0;
421
+ width = Math.max(widthOption, Math.round(heightOption * imageAspectRatio));
422
+ height = Math.max(heightOption, Math.round(widthOption / imageAspectRatio));
423
+ break;
424
+ }
425
+ default: {
426
+ if (options.width && !options.height) {
427
+ width = options.width;
428
+ height = Math.round(options.width / imageAspectRatio);
429
+ }
430
+ if (options.height && !options.width) {
431
+ width = Math.round(options.height * imageAspectRatio);
432
+ height = options.height;
433
+ }
434
+ }
435
+ }
436
+ return {
437
+ width: width,
438
+ height: height,
439
+ aspectRatio: width / height
440
+ };
441
+ }
442
+ exports.getDimensionsAndAspectRatio = getDimensionsAndAspectRatio;