@jetshop/ui 5.17.1 → 5.18.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.
- package/CloudflareImage/BaseImage.d.ts +0 -1
- package/CloudflareImage/BaseImage.js +2 -47
- package/CloudflareImage/BaseImage.js.map +1 -1
- package/CloudflareImage/FlightImage.js +4 -3
- package/CloudflareImage/FlightImage.js.map +1 -1
- package/CloudflareImage/FlightImage.test.js +13 -1
- package/CloudflareImage/useConstructImage.d.ts +9 -3
- package/CloudflareImage/useConstructImage.js +15 -13
- package/CloudflareImage/useConstructImage.js.map +1 -1
- package/CloudflareImage/utils/getImageWidths.js +30 -2
- package/CloudflareImage/utils/getImageWidths.js.map +1 -1
- package/CloudflareImage/utils/getLQIP.js +3 -2
- package/CloudflareImage/utils/getLQIP.js.map +1 -1
- package/CloudflareImage/utils/getSrcSetFromWidths.d.ts +0 -1
- package/CloudflareImage/utils/getSrcSetFromWidths.js +1 -1
- package/CloudflareImage/utils/getSrcSetFromWidths.js.map +1 -1
- package/CloudflareImage/utils/getSrcWithParams.js +7 -4
- package/CloudflareImage/utils/getSrcWithParams.js.map +1 -1
- package/Image/FlightImage.js +2 -1
- package/Image/FlightImage.js.map +1 -1
- package/Image/FlightImage.test.js +13 -1
- package/Image/useConstructImage.d.ts +9 -2
- package/Image/useConstructImage.js +7 -4
- package/Image/useConstructImage.js.map +1 -1
- package/package.json +2 -2
|
@@ -59,49 +59,6 @@ function useObjectFitPolyfill(imageRefs) {
|
|
|
59
59
|
}, [imageRefs]);
|
|
60
60
|
return polyfilled;
|
|
61
61
|
}
|
|
62
|
-
function getTypeByExtension(src) {
|
|
63
|
-
// Identifying type by extension, based on common image file types
|
|
64
|
-
// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
|
|
65
|
-
const extensionRegex = /\.(jpg|jpeg|jfif|pjpeg|pjp|png|gif|bmp|webp|svg|apng|ico|cur)(?:\?.*)?$/i;
|
|
66
|
-
const formatMatch = extensionRegex.exec(src);
|
|
67
|
-
if (!formatMatch)
|
|
68
|
-
return null;
|
|
69
|
-
let type = null;
|
|
70
|
-
switch (formatMatch[1]) {
|
|
71
|
-
case 'jpg':
|
|
72
|
-
case 'jpeg':
|
|
73
|
-
case 'jfif':
|
|
74
|
-
case 'pjpeg':
|
|
75
|
-
case 'pjp':
|
|
76
|
-
type = 'image/jpeg';
|
|
77
|
-
break;
|
|
78
|
-
case 'png':
|
|
79
|
-
type = 'image/png';
|
|
80
|
-
break;
|
|
81
|
-
case 'gif':
|
|
82
|
-
type = 'image/gif';
|
|
83
|
-
break;
|
|
84
|
-
case 'bmp':
|
|
85
|
-
type = 'image/bmp';
|
|
86
|
-
break;
|
|
87
|
-
case 'webp':
|
|
88
|
-
type = 'image/webp';
|
|
89
|
-
break;
|
|
90
|
-
case 'svg':
|
|
91
|
-
type = 'image/svg+xml';
|
|
92
|
-
break;
|
|
93
|
-
case 'apng':
|
|
94
|
-
type = 'image/apng';
|
|
95
|
-
break;
|
|
96
|
-
case 'ico':
|
|
97
|
-
case 'cur':
|
|
98
|
-
type = 'image/x-icon';
|
|
99
|
-
break;
|
|
100
|
-
default:
|
|
101
|
-
break;
|
|
102
|
-
}
|
|
103
|
-
return type;
|
|
104
|
-
}
|
|
105
62
|
const Img = React.forwardRef((props, ref) => {
|
|
106
63
|
const { sizes, srcSet, src, style, alt, onLoad, onError, objectFit, critical } = props, otherProps = __rest(props, ["sizes", "srcSet", "src", "style", "alt", "onLoad", "onError", "objectFit", "critical"]);
|
|
107
64
|
const imgStyle = Object.assign({ position: 'absolute', top: 0, left: 0, width: `100%`, height: `100%`, paddingTop: 0, objectPosition: `center`, objectFit }, style);
|
|
@@ -112,7 +69,7 @@ const Placeholder = React.forwardRef((props, ref) => {
|
|
|
112
69
|
React.createElement(Img, Object.assign({ loading: "lazy" }, props, { ref: ref }))));
|
|
113
70
|
});
|
|
114
71
|
const Image = function Image(_a) {
|
|
115
|
-
var { src, hasFalsySrc, lqip, sizes, srcset,
|
|
72
|
+
var { src, hasFalsySrc, lqip, sizes, srcset, critical, aspect, cover = false, alt = '', fillAvailableSpace = false, children, error: ErrorComp, className, badges, baseUrl, cfTransformer } = _a, rest = __rest(_a, ["src", "hasFalsySrc", "lqip", "sizes", "srcset", "critical", "aspect", "cover", "alt", "fillAvailableSpace", "children", "error", "className", "badges", "baseUrl", "cfTransformer"]);
|
|
116
73
|
// Set up the IntersectionObserver
|
|
117
74
|
const [ref, inView] = useInView({ triggerOnce: true });
|
|
118
75
|
// Check if the browser supports loading="lazy". In that case, we don't need
|
|
@@ -151,7 +108,6 @@ const Image = function Image(_a) {
|
|
|
151
108
|
const loaded = imgLoaded || hasFalsySrc || isCached;
|
|
152
109
|
const objectFit = cover || fillAvailableSpace ? 'cover' : 'contain';
|
|
153
110
|
const objectFitPolyfillStyles = { fontFamily: `"object-fit: ${objectFit}"` };
|
|
154
|
-
const type = getTypeByExtension(src);
|
|
155
111
|
return (React.createElement(React.Fragment, null,
|
|
156
112
|
React.createElement("div", Object.assign({ key: src, ref:
|
|
157
113
|
// If we have native lazyloading, by not applying the `ref` from
|
|
@@ -170,8 +126,7 @@ const Image = function Image(_a) {
|
|
|
170
126
|
error ? (React.createElement(ErrorComp, null)) : (React.createElement(React.Fragment, null,
|
|
171
127
|
React.createElement(Placeholder, { src: critical ? transparentDataImg : lqip || transparentDataImg, ref: placeholderRef, alt: "", "aria-hidden": "true", style: Object.assign({ objectFit, opacity: loaded ? 0 : 0.6, transitionDelay: `500ms` }, objectFitPolyfillStyles) }),
|
|
172
128
|
(inView || nativeLazyLoading || !hydrated || isCached) && (React.createElement("picture", { "data-flight-image": "" },
|
|
173
|
-
React.createElement("source", {
|
|
174
|
-
React.createElement("source", { type: type, srcSet: srcset, sizes: sizes }),
|
|
129
|
+
React.createElement("source", { srcSet: srcset, sizes: sizes }),
|
|
175
130
|
React.createElement(Img, { srcSet: srcset, src: src || transparentDataImg, sizes: sizes, onLoad: handleImgLoad, onError: handleImgError, alt: alt, ref: imageRef, style: Object.assign({ objectFit, opacity: loaded ? 1 : 0, transition: `opacity 500ms` }, objectFitPolyfillStyles), critical: critical, fetchpriority: critical ? 'high' : 'auto' }))),
|
|
176
131
|
React.createElement("noscript", null,
|
|
177
132
|
React.createElement("picture", null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseImage.js","sourceRoot":"","sources":["BaseImage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAStE,MAAM,CAAC,MAAM,kBAAkB,GAC7B,oHAAoH,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseImage.js","sourceRoot":"","sources":["BaseImage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -31,14 +31,14 @@ function Error() {
|
|
|
31
31
|
}
|
|
32
32
|
function FlightImage(props) {
|
|
33
33
|
const { gravity, crop, src: originalSrc, sizes: sizesArray = [1], aspect, quality, critical, modifiedDate, error: ErrorComp = Error, focalPointX, focalPointY } = props, rest = __rest(props, ["gravity", "crop", "src", "sizes", "aspect", "quality", "critical", "modifiedDate", "error", "focalPointX", "focalPointY"]);
|
|
34
|
-
const { theme: { breakpoints } } = useShopConfig();
|
|
34
|
+
const { theme: { breakpoints }, useLowQualityImagePlaceholder = true } = useShopConfig();
|
|
35
35
|
// The baseUrl will change based on the currently-selected channel.
|
|
36
36
|
// We need it to correctly construct the image url
|
|
37
37
|
const { selectedChannel } = React.useContext(ChannelContext);
|
|
38
38
|
const baseUrl = (selectedChannel === null || selectedChannel === void 0 ? void 0 : selectedChannel.imageUrl)
|
|
39
39
|
? String(selectedChannel.imageUrl)
|
|
40
40
|
: null;
|
|
41
|
-
const { src, hasFalsySrc, lqip, sizes, srcset
|
|
41
|
+
const { src, hasFalsySrc, lqip, sizes, srcset } = useConstructImage({
|
|
42
42
|
gravity,
|
|
43
43
|
crop,
|
|
44
44
|
src: originalSrc,
|
|
@@ -46,6 +46,7 @@ function FlightImage(props) {
|
|
|
46
46
|
aspect,
|
|
47
47
|
quality,
|
|
48
48
|
critical,
|
|
49
|
+
isPlaceholderEnabled: useLowQualityImagePlaceholder,
|
|
49
50
|
modifiedDate,
|
|
50
51
|
breakpoints,
|
|
51
52
|
baseUrl,
|
|
@@ -53,7 +54,7 @@ function FlightImage(props) {
|
|
|
53
54
|
focalPointY
|
|
54
55
|
});
|
|
55
56
|
// https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>
|
|
56
|
-
return (React.createElement(Image, Object.assign({}, rest, { cfTransformer: true, critical: critical, aspect: aspect, src: hasFalsySrc && typeof originalSrc === 'boolean' ? false : src, baseUrl: baseUrl, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: sizes, srcset: srcset,
|
|
57
|
+
return (React.createElement(Image, Object.assign({}, rest, { cfTransformer: true, critical: critical, aspect: aspect, src: hasFalsySrc && typeof originalSrc === 'boolean' ? false : src, baseUrl: baseUrl, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: sizes, srcset: srcset, error: ErrorComp })));
|
|
57
58
|
}
|
|
58
59
|
export default FlightImage;
|
|
59
60
|
//# sourceMappingURL=FlightImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,cAAc,MAAM,yCAAyC,CAAC;AAQrE,MAAM,CAAC,MAAM,kBAAkB,GAC7B,oHAAoH,CAAC;AAoEvH,SAAS,KAAK;IACZ,OAAO,CACL,6BACE,KAAK,EAAE;YACL,UAAU,EAAE,SAAS;YACrB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf,IAEA,CAAC,CAAC,iBAAiB,CAAC,CACjB,CACP,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,KAAiB;IACpC,MAAM,EACJ,OAAO,EACP,IAAI,EACJ,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC,EACvB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,KAAK,EAAE,SAAS,GAAG,KAAK,EACxB,WAAW,EACX,WAAW,KAET,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,2HAaL,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EAAE,EAAE,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,cAAc,MAAM,yCAAyC,CAAC;AAQrE,MAAM,CAAC,MAAM,kBAAkB,GAC7B,oHAAoH,CAAC;AAoEvH,SAAS,KAAK;IACZ,OAAO,CACL,6BACE,KAAK,EAAE;YACL,UAAU,EAAE,SAAS;YACrB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf,IAEA,CAAC,CAAC,iBAAiB,CAAC,CACjB,CACP,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,KAAiB;IACpC,MAAM,EACJ,OAAO,EACP,IAAI,EACJ,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC,EACvB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,KAAK,EAAE,SAAS,GAAG,KAAK,EACxB,WAAW,EACX,WAAW,KAET,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,2HAaL,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EAAE,EAAE,WAAW,EAAE,EACtB,6BAA6B,GAAG,IAAI,EACrC,GAAG,aAAa,EAAE,CAAC;IAEpB,mEAAmE;IACnE,kDAAkD;IAClD,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAC7D,MAAM,OAAO,GAAG,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ;QACvC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC;QAClC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAC7C,iBAAiB,CAAC;QAChB,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,WAAW;QAChB,KAAK,EAAE,UAAU;QACjB,MAAM;QACN,OAAO;QACP,QAAQ;QACR,oBAAoB,EAAE,6BAA6B;QACnD,YAAY;QACZ,WAAW;QACX,OAAO;QACP,WAAW;QACX,WAAW;KACZ,CAAC,CAAC;IAEL,wDAAwD;IAExD,OAAO,CACL,oBAAC,KAAK,oBACA,IAAI,IACR,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,WAAW,IAAI,OAAO,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAClE,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,SAAS,IAChB,CACH,CAAC;AACJ,CAAC;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -53,6 +53,17 @@ describe('Hooks image component', () => {
|
|
|
53
53
|
expect(src).toEqual(expect.stringContaining('width=160'));
|
|
54
54
|
});
|
|
55
55
|
|
|
56
|
+
it('does not request a lqip when the shop opts out', () => {
|
|
57
|
+
const { placeholderImage } = setup({
|
|
58
|
+
shopConfig: { useLowQualityImagePlaceholder: false }
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
const src = placeholderImage.getAttribute('src');
|
|
62
|
+
|
|
63
|
+
// Falls back to the transparent data image, same as a critical image does
|
|
64
|
+
expect(src).toEqual(transparent);
|
|
65
|
+
});
|
|
66
|
+
|
|
56
67
|
it('does not render an lqip if critical is true', () => {
|
|
57
68
|
const { placeholderImage } = setup({ critical: true });
|
|
58
69
|
|
|
@@ -242,6 +253,7 @@ function setup({
|
|
|
242
253
|
sizes,
|
|
243
254
|
aspect,
|
|
244
255
|
cover,
|
|
256
|
+
shopConfig,
|
|
245
257
|
...rest
|
|
246
258
|
} = {}) {
|
|
247
259
|
const channelHandler = new ChannelHandler({
|
|
@@ -250,7 +262,7 @@ function setup({
|
|
|
250
262
|
});
|
|
251
263
|
const utils = render(
|
|
252
264
|
<ChannelProvider channelHandler={channelHandler}>
|
|
253
|
-
<ConfigProvider config={mockShopConfig}>
|
|
265
|
+
<ConfigProvider config={{ ...mockShopConfig, ...shopConfig }}>
|
|
254
266
|
<Image
|
|
255
267
|
src={falsySrc ? imageSrc : imageSrc || 'default.png'}
|
|
256
268
|
error={error}
|
|
@@ -25,6 +25,12 @@ interface ImageParameters {
|
|
|
25
25
|
*/
|
|
26
26
|
aspect?: string;
|
|
27
27
|
critical?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Whether to request a blurred placeholder to show while the full image
|
|
30
|
+
* loads. On by default. The placeholder is a separate transform request per
|
|
31
|
+
* image, so turning it off roughly halves the image requests a page makes.
|
|
32
|
+
*/
|
|
33
|
+
isPlaceholderEnabled?: boolean;
|
|
28
34
|
modifiedDate?: string;
|
|
29
35
|
breakpoints: Record<string, string>;
|
|
30
36
|
baseUrl: string;
|
|
@@ -33,11 +39,11 @@ interface ImageParameters {
|
|
|
33
39
|
}
|
|
34
40
|
/**
|
|
35
41
|
* Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
|
|
36
|
-
* Also generates a LQIP using query parameters, to display while the full image
|
|
42
|
+
* Also generates a LQIP using query parameters, to display while the full image
|
|
43
|
+
* loads, when the shop has opted into one.
|
|
37
44
|
*/
|
|
38
|
-
export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
|
|
45
|
+
export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, isPlaceholderEnabled, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
|
|
39
46
|
srcset: string;
|
|
40
|
-
webpSrcset: string;
|
|
41
47
|
sizes: string;
|
|
42
48
|
lqip: string;
|
|
43
49
|
src: string;
|
|
@@ -8,9 +8,10 @@ import { getSrcSetFromWidths } from './utils/getSrcSetFromWidths';
|
|
|
8
8
|
import React from 'react';
|
|
9
9
|
/**
|
|
10
10
|
* Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
|
|
11
|
-
* Also generates a LQIP using query parameters, to display while the full image
|
|
11
|
+
* Also generates a LQIP using query parameters, to display while the full image
|
|
12
|
+
* loads, when the shop has opted into one.
|
|
12
13
|
*/
|
|
13
|
-
export function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }) {
|
|
14
|
+
export function useConstructImage({ gravity, crop, src, sizes, aspect, critical, isPlaceholderEnabled = true, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }) {
|
|
14
15
|
// Warn if gravity was provided but crop was not
|
|
15
16
|
useWarningInDev(gravity && !crop, 'You have provided a gravity without setting crop to true. Your image will not be cropped, and the `gravity` prop will do nothing. Please remove the `gravity` prop.');
|
|
16
17
|
// Warn if the src is a falsy value
|
|
@@ -51,28 +52,29 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
51
52
|
imageSrc = getFullUrl(src.value, baseUrl);
|
|
52
53
|
}
|
|
53
54
|
// useMemo so this runs only if the image props change. It calculates the
|
|
54
|
-
// strings used for `sizes`, `srcset`, and the `lqip
|
|
55
|
-
|
|
55
|
+
// strings used for `sizes`, `srcset`, and the `lqip`. Single srcset — Cloudflare's
|
|
56
|
+
// `format=auto` content-negotiates AVIF / WebP / JPEG on the same URL, so no
|
|
57
|
+
// separate webp srcset is needed.
|
|
58
|
+
const { sizesMap, srcset, lqip } = React.useMemo(() => {
|
|
56
59
|
if (hasFalsySrc) {
|
|
57
60
|
return {};
|
|
58
61
|
}
|
|
59
62
|
const widths = getImageWidths(breakpoints, sizes);
|
|
60
|
-
const
|
|
63
|
+
const imageOptions = {
|
|
61
64
|
crop,
|
|
62
65
|
gravity,
|
|
63
66
|
quality,
|
|
64
|
-
webp,
|
|
65
67
|
focalPointX,
|
|
66
68
|
focalPointY
|
|
67
|
-
}
|
|
68
|
-
const srcset =
|
|
69
|
-
|
|
70
|
-
//
|
|
71
|
-
const lqip = critical
|
|
69
|
+
};
|
|
70
|
+
const srcset = getSrcSetFromWidths(imageSrc, widths, aspect, imageOptions, modifiedDate, baseUrl);
|
|
71
|
+
// A critical image renders its real source straight away, and every other
|
|
72
|
+
// image only gets a placeholder if the shop asked for one.
|
|
73
|
+
const lqip = critical || !isPlaceholderEnabled
|
|
72
74
|
? null
|
|
73
75
|
: getLQIP(imageSrc, widths, aspect, crop, modifiedDate, baseUrl);
|
|
74
76
|
const sizesMap = getSizesMap(breakpoints, sizes);
|
|
75
|
-
return { sizesMap, srcset, lqip
|
|
77
|
+
return { sizesMap, srcset, lqip };
|
|
76
78
|
}, [
|
|
77
79
|
aspect,
|
|
78
80
|
breakpoints,
|
|
@@ -83,13 +85,13 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
83
85
|
quality,
|
|
84
86
|
sizes,
|
|
85
87
|
critical,
|
|
88
|
+
isPlaceholderEnabled,
|
|
86
89
|
modifiedDate,
|
|
87
90
|
focalPointX,
|
|
88
91
|
focalPointY
|
|
89
92
|
]);
|
|
90
93
|
return {
|
|
91
94
|
srcset,
|
|
92
|
-
webpSrcset,
|
|
93
95
|
sizes: sizesMap,
|
|
94
96
|
lqip,
|
|
95
97
|
src: imageSrc,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,28 @@
|
|
|
1
1
|
import { getImageWidth } from './getImageWidth';
|
|
2
2
|
import { remToPx } from './remToPx';
|
|
3
3
|
import { getSizeForBreakpoint } from './getSizeForBreakpoint';
|
|
4
|
+
// Snap responsive widths to this ladder so srcsets from different
|
|
5
|
+
// (breakpoint × DPR × sizes-fraction) products collapse onto a shared finite
|
|
6
|
+
// set of URLs. Increases CF Image Resizing cache reuse at the cost of small
|
|
7
|
+
// per-image pixel fidelity — modern browsers handle the resulting upscale/
|
|
8
|
+
// downscale gracefully. Fixed-pixel `sizes` (e.g. sizes={[200]} for a logo)
|
|
9
|
+
// bypass the ladder; their literal pixel intent is preserved.
|
|
10
|
+
const WIDTH_LADDER = [160, 320, 640, 960, 1280, 1600, 2560];
|
|
11
|
+
function snapToLadder(width) {
|
|
12
|
+
if (width <= WIDTH_LADDER[0])
|
|
13
|
+
return WIDTH_LADDER[0];
|
|
14
|
+
if (width >= WIDTH_LADDER[WIDTH_LADDER.length - 1])
|
|
15
|
+
return WIDTH_LADDER[WIDTH_LADDER.length - 1];
|
|
16
|
+
for (let i = 0; i < WIDTH_LADDER.length - 1; i++) {
|
|
17
|
+
const lo = WIDTH_LADDER[i];
|
|
18
|
+
const hi = WIDTH_LADDER[i + 1];
|
|
19
|
+
if (width >= lo && width <= hi) {
|
|
20
|
+
// Nearest in log space — picks the entry with smaller proportional gap.
|
|
21
|
+
return width / lo < hi / width ? lo : hi;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return WIDTH_LADDER[WIDTH_LADDER.length - 1];
|
|
25
|
+
}
|
|
4
26
|
export const getImageWidths = (breakpoints, sizes, mobile = false) => {
|
|
5
27
|
const all = new Set();
|
|
6
28
|
const breakpointArray = Object.entries(breakpoints).map(([key, value]) => ({
|
|
@@ -10,8 +32,14 @@ export const getImageWidths = (breakpoints, sizes, mobile = false) => {
|
|
|
10
32
|
for (let i = 0; i < breakpointArray.length; i++) {
|
|
11
33
|
const bpSize = getSizeForBreakpoint(sizes, i);
|
|
12
34
|
const px = remToPx(breakpointArray[i].value);
|
|
13
|
-
|
|
14
|
-
|
|
35
|
+
const w1 = getImageWidth(bpSize, px, 1);
|
|
36
|
+
const w2 = getImageWidth(bpSize, px, 2);
|
|
37
|
+
// bpSize > 2 means a literal pixel size (sizeToNumber leaves px values
|
|
38
|
+
// unchanged above 2 and returns fractions for ≤ 2). Pass those through
|
|
39
|
+
// verbatim so explicit pixel intents aren't inflated to the ladder.
|
|
40
|
+
const isFixed = bpSize > 2;
|
|
41
|
+
all.add(isFixed ? w1 : snapToLadder(w1));
|
|
42
|
+
all.add(isFixed ? w2 : snapToLadder(w2));
|
|
15
43
|
if (mobile && breakpointArray[i].key === 'sm') {
|
|
16
44
|
break;
|
|
17
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getImageWidths.js","sourceRoot":"","sources":["getImageWidths.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAmC,EACnC,KAA2B,EAC3B,MAAM,GAAG,KAAK,EACd,EAAE;IACF,MAAM,GAAG,GAAG,IAAI,GAAG,EAAU,CAAC;IAE9B,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QACzE,GAAG;QACH,KAAK;KACN,CAAC,CAAC,CAAC;IAEJ,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC/C,MAAM,MAAM,GAAG,oBAAoB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC9C,MAAM,EAAE,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAE7C,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"getImageWidths.js","sourceRoot":"","sources":["getImageWidths.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,kEAAkE;AAClE,6EAA6E;AAC7E,4EAA4E;AAC5E,2EAA2E;AAC3E,4EAA4E;AAC5E,8DAA8D;AAC9D,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAErE,SAAS,YAAY,CAAC,KAAa;IACjC,IAAI,KAAK,IAAI,YAAY,CAAC,CAAC,CAAC;QAAE,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC;IACrD,IAAI,KAAK,IAAI,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QAChD,OAAO,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC/C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;QAChD,MAAM,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;QAC3B,MAAM,EAAE,GAAG,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAC/B,IAAI,KAAK,IAAI,EAAE,IAAI,KAAK,IAAI,EAAE,EAAE;YAC9B,wEAAwE;YACxE,OAAO,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SAC1C;KACF;IACD,OAAO,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAmC,EACnC,KAA2B,EAC3B,MAAM,GAAG,KAAK,EACd,EAAE;IACF,MAAM,GAAG,GAAG,IAAI,GAAG,EAAU,CAAC;IAE9B,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QACzE,GAAG;QACH,KAAK;KACN,CAAC,CAAC,CAAC;IAEJ,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC/C,MAAM,MAAM,GAAG,oBAAoB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC9C,MAAM,EAAE,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAE7C,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;QACxC,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;QAExC,uEAAuE;QACvE,uEAAuE;QACvE,oEAAoE;QACpE,MAAM,OAAO,GAAG,MAAM,GAAG,CAAC,CAAC;QAC3B,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;QAEzC,IAAI,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,EAAE;YAC7C,MAAM;SACP;KACF;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAChC,CAAC,CAAC"}
|
|
@@ -17,12 +17,13 @@ export function getLQIP(src, widths, aspect, crop = false, modifiedDate, baseUrl
|
|
|
17
17
|
// the same perceptual range and lets the
|
|
18
18
|
// blurred result compress dramatically)
|
|
19
19
|
// quality=30 → quality=30 (passed through createSrcWithProperties)
|
|
20
|
-
// type=auto → format=auto (
|
|
20
|
+
// type=auto → format=auto (emitted by createSrcWithProperties; serves
|
|
21
|
+
// AVIF/WebP placeholders where supported)
|
|
21
22
|
const prop = createSrcWithProperties(smallestWidth, aspect, src, false, {
|
|
22
23
|
crop,
|
|
23
24
|
quality: 30
|
|
24
25
|
});
|
|
25
|
-
const finalSrc = `${baseUrl}/cdn-cgi/image/${prop},blur=50
|
|
26
|
+
const finalSrc = `${baseUrl}/cdn-cgi/image/${prop},blur=50/${src}${modifiedDate ? `?timestamp=${modifiedDate}` : ''}`;
|
|
26
27
|
return finalSrc;
|
|
27
28
|
}
|
|
28
29
|
//# sourceMappingURL=getLQIP.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getLQIP.js","sourceRoot":"","sources":["getLQIP.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CACrB,GAAW,EACX,MAAgB,EAChB,MAAc,EACd,IAAI,GAAG,KAAK,EACZ,YAAoB,EACpB,OAAe;IAEf,MAAM,WAAW,GACf,oHAAoH,CAAC;IACvH,IAAI,CAAC,GAAG;QAAE,OAAO,WAAW,CAAC;IAE7B,6FAA6F;IAC7F,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtD,+CAA+C;IAC/C,yFAAyF;IACzF,wFAAwF;IACxF,uFAAuF;IACvF,wFAAwF;IACxF,
|
|
1
|
+
{"version":3,"file":"getLQIP.js","sourceRoot":"","sources":["getLQIP.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CACrB,GAAW,EACX,MAAgB,EAChB,MAAc,EACd,IAAI,GAAG,KAAK,EACZ,YAAoB,EACpB,OAAe;IAEf,MAAM,WAAW,GACf,oHAAoH,CAAC;IACvH,IAAI,CAAC,GAAG;QAAE,OAAO,WAAW,CAAC;IAE7B,6FAA6F;IAC7F,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtD,+CAA+C;IAC/C,yFAAyF;IACzF,wFAAwF;IACxF,uFAAuF;IACvF,wFAAwF;IACxF,2FAA2F;IAC3F,yFAAyF;IACzF,MAAM,IAAI,GAAG,uBAAuB,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE;QACtE,IAAI;QACJ,OAAO,EAAE,EAAE;KACZ,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,GAAG,OAAO,kBAAkB,IAAI,YAAY,GAAG,GAC9D,YAAY,CAAC,CAAC,CAAC,cAAc,YAAY,EAAE,CAAC,CAAC,CAAC,EAChD,EAAE,CAAC;IAEH,OAAO,QAAQ,CAAC;AAClB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createSrcWithProperties } from './getSrcWithParams';
|
|
2
|
-
export const getSrcSetFromWidths = (src, widths, aspect, options = { crop: false
|
|
2
|
+
export const getSrcSetFromWidths = (src, widths, aspect, options = { crop: false }, modifiedDate, baseUrl) => {
|
|
3
3
|
const p = [];
|
|
4
4
|
for (const w of widths) {
|
|
5
5
|
const prop = createSrcWithProperties(w, aspect, src, true, options, modifiedDate);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSrcSetFromWidths.js","sourceRoot":"","sources":["getSrcSetFromWidths.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"getSrcSetFromWidths.js","sourceRoot":"","sources":["getSrcSetFromWidths.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAU7D,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,GAAW,EACX,MAAgB,EAChB,MAAmB,EACnB,UAA6B,EAAE,IAAI,EAAE,KAAK,EAAE,EAC5C,YAAqB,EACrB,OAAgB,EAChB,EAAE;IACF,MAAM,CAAC,GAAG,EAAE,CAAC;IAEb,KAAK,MAAM,CAAC,IAAI,MAAM,EAAE;QACtB,MAAM,IAAI,GAAG,uBAAuB,CAClC,CAAC,EACD,MAAM,EACN,GAAG,EACH,IAAI,EACJ,OAAO,EACP,YAAY,CACb,CAAC;QACF,CAAC,CAAC,IAAI,CACJ,GAAG,OAAO,kBAAkB,IAAI,IAAI,GAAG,GACrC,YAAY,CAAC,CAAC,CAAC,cAAc,YAAY,EAAE,CAAC,CAAC,CAAC,EAChD,IAAI,CAAC,GAAG,CACT,CAAC;KACH;IAED,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACtB,CAAC,CAAC"}
|
|
@@ -15,7 +15,7 @@ export function createSrcWithProperties(width, aspect,
|
|
|
15
15
|
// @ts-ignore
|
|
16
16
|
src,
|
|
17
17
|
// @ts-ignore
|
|
18
|
-
includeViewportSize = true, options = { crop: false
|
|
18
|
+
includeViewportSize = true, options = { crop: false },
|
|
19
19
|
// @ts-ignore
|
|
20
20
|
timestamp) {
|
|
21
21
|
// Always fit=cover — Cloudflare has no edge-pixel-sample analogue for Akamai's
|
|
@@ -50,9 +50,12 @@ timestamp) {
|
|
|
50
50
|
if (quality) {
|
|
51
51
|
properties.push(`quality=${quality}`);
|
|
52
52
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
// `format=auto` lets Cloudflare content-negotiate AVIF/WebP/JPEG per the request's
|
|
54
|
+
// Accept header. Counts as one billable transformation regardless of which output
|
|
55
|
+
// format is served (per developers.cloudflare.com/images/pricing). On URL
|
|
56
|
+
// transformations, CF preserves the source format unless `format` is explicitly
|
|
57
|
+
// set — auto is load-bearing, not decorative.
|
|
58
|
+
properties.push('format=auto');
|
|
56
59
|
return properties.toString();
|
|
57
60
|
}
|
|
58
61
|
//# sourceMappingURL=getSrcWithParams.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSrcWithParams.js","sourceRoot":"","sources":["getSrcWithParams.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIhE,uEAAuE;AAEvE,uDAAuD;AACvD,sFAAsF;AACtF,wDAAwD;AACxD,MAAM,WAAW,GAA4B;IAC3C,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,UAAU,uBAAuB,CACrC,KAAa,EACb,MAAmB;AACnB,aAAa;AACb,GAAW;AACX,aAAa;AACb,mBAAmB,GAAG,IAAI,EAC1B,UAA6B,EAAE,IAAI,EAAE,KAAK,EAAE
|
|
1
|
+
{"version":3,"file":"getSrcWithParams.js","sourceRoot":"","sources":["getSrcWithParams.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIhE,uEAAuE;AAEvE,uDAAuD;AACvD,sFAAsF;AACtF,wDAAwD;AACxD,MAAM,WAAW,GAA4B;IAC3C,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,UAAU,uBAAuB,CACrC,KAAa,EACb,MAAmB;AACnB,aAAa;AACb,GAAW;AACX,aAAa;AACb,mBAAmB,GAAG,IAAI,EAC1B,UAA6B,EAAE,IAAI,EAAE,KAAK,EAAE;AAC5C,aAAa;AACb,SAAkB;IAElB,+EAA+E;IAC/E,gFAAgF;IAChF,kFAAkF;IAClF,uEAAuE;IACvE,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAChC,MAAM,MAAM,GAAG,MAAM;QACnB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;QACnD,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,UAAU,GAAG,EAAE,CAAC;IAEtB,IAAI,MAAM,EAAE;QACV,UAAU,CAAC,IAAI,CAAC,SAAS,KAAK,WAAW,MAAM,YAAY,CAAC,CAAC;KAC9D;SAAM;QACL,UAAU,CAAC,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC;KAC7C;IAED,kFAAkF;IAClF,iFAAiF;IACjF,gFAAgF;IAChF,4BAA4B;IAC5B,IAAI,MAAM,EAAE;QACV,IAAI,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,WAAW,EAAE;YAC9C,UAAU,CAAC,IAAI,CACb,WAAW,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,WAAW,EAAE,CACxD,CAAC;SACH;aAAM,IAAI,OAAO,CAAC,OAAO,EAAE;YAC1B,UAAU,CAAC,IAAI,CAAC,WAAW,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;SAC5D;KACF;IAED,mFAAmF;IACnF,oFAAoF;IACpF,IAAI,OAAO,EAAE;QACX,UAAU,CAAC,IAAI,CAAC,WAAW,OAAO,EAAE,CAAC,CAAC;KACvC;IAED,mFAAmF;IACnF,kFAAkF;IAClF,0EAA0E;IAC1E,gFAAgF;IAChF,8CAA8C;IAC9C,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAE/B,OAAO,UAAU,CAAC,QAAQ,EAAE,CAAC;AAC/B,CAAC"}
|
package/Image/FlightImage.js
CHANGED
|
@@ -31,7 +31,7 @@ function Error() {
|
|
|
31
31
|
}
|
|
32
32
|
function FlightImage(props) {
|
|
33
33
|
const { gravity, crop, src: originalSrc, sizes: sizesArray = [1], aspect, quality, critical, modifiedDate, error: ErrorComp = Error, focalPointX, focalPointY } = props, rest = __rest(props, ["gravity", "crop", "src", "sizes", "aspect", "quality", "critical", "modifiedDate", "error", "focalPointX", "focalPointY"]);
|
|
34
|
-
const { theme: { breakpoints } } = useShopConfig();
|
|
34
|
+
const { theme: { breakpoints }, useLowQualityImagePlaceholder = true } = useShopConfig();
|
|
35
35
|
// The baseUrl will change based on the currently-selected channel.
|
|
36
36
|
// We need it to correctly construct the image url
|
|
37
37
|
const { selectedChannel } = React.useContext(ChannelContext);
|
|
@@ -46,6 +46,7 @@ function FlightImage(props) {
|
|
|
46
46
|
aspect,
|
|
47
47
|
quality,
|
|
48
48
|
critical,
|
|
49
|
+
isPlaceholderEnabled: useLowQualityImagePlaceholder,
|
|
49
50
|
modifiedDate,
|
|
50
51
|
breakpoints,
|
|
51
52
|
baseUrl,
|
package/Image/FlightImage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,cAAc,MAAM,yCAAyC,CAAC;AASrE,MAAM,CAAC,MAAM,kBAAkB,GAC7B,oHAAoH,CAAC;AA8CvH,SAAS,KAAK;IACZ,OAAO,CACL,6BACE,KAAK,EAAE;YACL,UAAU,EAAE,SAAS;YACrB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf,IAEA,CAAC,CAAC,iBAAiB,CAAC,CACjB,CACP,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,KAAiB;IACpC,MAAM,EACJ,OAAO,EACP,IAAI,EACJ,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC,EACvB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,KAAK,EAAE,SAAS,GAAG,KAAK,EACxB,WAAW,EACX,WAAW,KAET,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,2HAaL,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EAAE,EAAE,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,cAAc,MAAM,yCAAyC,CAAC;AASrE,MAAM,CAAC,MAAM,kBAAkB,GAC7B,oHAAoH,CAAC;AA8CvH,SAAS,KAAK;IACZ,OAAO,CACL,6BACE,KAAK,EAAE;YACL,UAAU,EAAE,SAAS;YACrB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf,IAEA,CAAC,CAAC,iBAAiB,CAAC,CACjB,CACP,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,KAAiB;IACpC,MAAM,EACJ,OAAO,EACP,IAAI,EACJ,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC,EACvB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,KAAK,EAAE,SAAS,GAAG,KAAK,EACxB,WAAW,EACX,WAAW,KAET,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,2HAaL,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EAAE,EAAE,WAAW,EAAE,EACtB,6BAA6B,GAAG,IAAI,EACrC,GAAG,aAAa,EAAE,CAAC;IAEpB,mEAAmE;IACnE,kDAAkD;IAClD,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAC7D,MAAM,OAAO,GAAG,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ;QACvC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC;QAClC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,GACzD,iBAAiB,CAAC;QAChB,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,WAAW;QAChB,KAAK,EAAE,UAAU;QACjB,MAAM;QACN,OAAO;QACP,QAAQ;QACR,oBAAoB,EAAE,6BAA6B;QACnD,YAAY;QACZ,WAAW;QACX,OAAO;QACP,WAAW;QACX,WAAW;KACZ,CAAC,CAAC;IAEL,OAAO,CACL,oBAAC,KAAK,oBACA,IAAI,IACR,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,WAAW,IAAI,OAAO,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAClE,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,SAAS,IAChB,CACH,CAAC;AACJ,CAAC;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -53,6 +53,17 @@ describe('Hooks image component', () => {
|
|
|
53
53
|
expect(src).toEqual(expect.stringContaining('width=160'));
|
|
54
54
|
});
|
|
55
55
|
|
|
56
|
+
it('does not request a lqip when the shop opts out', () => {
|
|
57
|
+
const { placeholderImage } = setup({
|
|
58
|
+
shopConfig: { useLowQualityImagePlaceholder: false }
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
const src = placeholderImage.getAttribute('src');
|
|
62
|
+
|
|
63
|
+
// Falls back to the transparent data image, same as a critical image does
|
|
64
|
+
expect(src).toEqual(transparent);
|
|
65
|
+
});
|
|
66
|
+
|
|
56
67
|
it('does not render an lqip if critical is true', () => {
|
|
57
68
|
const { placeholderImage } = setup({ critical: true });
|
|
58
69
|
|
|
@@ -242,6 +253,7 @@ function setup({
|
|
|
242
253
|
sizes,
|
|
243
254
|
aspect,
|
|
244
255
|
cover,
|
|
256
|
+
shopConfig,
|
|
245
257
|
...rest
|
|
246
258
|
} = {}) {
|
|
247
259
|
const channelHandler = new ChannelHandler({
|
|
@@ -250,7 +262,7 @@ function setup({
|
|
|
250
262
|
});
|
|
251
263
|
const utils = render(
|
|
252
264
|
<ChannelProvider channelHandler={channelHandler}>
|
|
253
|
-
<ConfigProvider config={mockShopConfig}>
|
|
265
|
+
<ConfigProvider config={{ ...mockShopConfig, ...shopConfig }}>
|
|
254
266
|
<Image
|
|
255
267
|
src={falsySrc ? imageSrc : imageSrc || 'default.png'}
|
|
256
268
|
error={error}
|
|
@@ -25,6 +25,12 @@ interface ImageParameters {
|
|
|
25
25
|
*/
|
|
26
26
|
aspect?: string;
|
|
27
27
|
critical?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Whether to request a blurred placeholder to show while the full image
|
|
30
|
+
* loads. On by default. The placeholder is a separate transform request per
|
|
31
|
+
* image, so turning it off roughly halves the image requests a page makes.
|
|
32
|
+
*/
|
|
33
|
+
isPlaceholderEnabled?: boolean;
|
|
28
34
|
modifiedDate?: string;
|
|
29
35
|
breakpoints: Record<string, string>;
|
|
30
36
|
baseUrl: string;
|
|
@@ -33,9 +39,10 @@ interface ImageParameters {
|
|
|
33
39
|
}
|
|
34
40
|
/**
|
|
35
41
|
* Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
|
|
36
|
-
* Also generates a LQIP using query parameters, to display while the full image
|
|
42
|
+
* Also generates a LQIP using query parameters, to display while the full image
|
|
43
|
+
* loads, when the shop has opted into one.
|
|
37
44
|
*/
|
|
38
|
-
export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
|
|
45
|
+
export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, isPlaceholderEnabled, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
|
|
39
46
|
srcset: string;
|
|
40
47
|
webpSrcset: string;
|
|
41
48
|
sizes: string;
|
|
@@ -8,9 +8,10 @@ import { getSrcSetFromWidths } from './utils/getSrcSetFromWidths';
|
|
|
8
8
|
import React from 'react';
|
|
9
9
|
/**
|
|
10
10
|
* Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
|
|
11
|
-
* Also generates a LQIP using query parameters, to display while the full image
|
|
11
|
+
* Also generates a LQIP using query parameters, to display while the full image
|
|
12
|
+
* loads, when the shop has opted into one.
|
|
12
13
|
*/
|
|
13
|
-
export function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }) {
|
|
14
|
+
export function useConstructImage({ gravity, crop, src, sizes, aspect, critical, isPlaceholderEnabled = true, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }) {
|
|
14
15
|
// Warn if gravity was provided but crop was not
|
|
15
16
|
useWarningInDev(gravity && !crop, 'You have provided a gravity without setting crop to true. Your image will not be cropped, and the `gravity` prop will do nothing. Please remove the `gravity` prop.');
|
|
16
17
|
// Warn if the src is a falsy value
|
|
@@ -67,8 +68,9 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
67
68
|
}, modifiedDate);
|
|
68
69
|
const srcset = srcSetFromWidths({ webp: false });
|
|
69
70
|
const webpSrcset = srcSetFromWidths({ webp: true });
|
|
70
|
-
//
|
|
71
|
-
|
|
71
|
+
// A critical image renders its real source straight away, and every other
|
|
72
|
+
// image only gets a placeholder if the shop asked for one.
|
|
73
|
+
const lqip = critical || !isPlaceholderEnabled
|
|
72
74
|
? null
|
|
73
75
|
: getLQIP(imageSrc, widths, aspect, crop, modifiedDate);
|
|
74
76
|
const sizesMap = getSizesMap(Object.values(breakpoints), sizes);
|
|
@@ -83,6 +85,7 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
83
85
|
quality,
|
|
84
86
|
sizes,
|
|
85
87
|
critical,
|
|
88
|
+
isPlaceholderEnabled,
|
|
86
89
|
modifiedDate,
|
|
87
90
|
focalPointX,
|
|
88
91
|
focalPointY
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jetshop/ui",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.18.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
6
|
"**/*.js",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"react": "^16.9.0",
|
|
66
66
|
"react-dom": "^16.9.0"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "9a871e9e7e96af13a7e42ef07b2a5664d272954b"
|
|
69
69
|
}
|