@jetshop/ui 6.5.8-alpha.1 → 6.5.8
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/FlightImage.js +2 -1
- package/CloudflareImage/FlightImage.js.map +1 -1
- package/CloudflareImage/FlightImage.test.js +13 -1
- package/CloudflareImage/useConstructImage.d.ts +9 -2
- package/CloudflareImage/useConstructImage.js +7 -4
- package/CloudflareImage/useConstructImage.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
|
@@ -32,7 +32,7 @@ function Error() {
|
|
|
32
32
|
}
|
|
33
33
|
function FlightImage(props) {
|
|
34
34
|
const { gravity, crop, src: originalSrc, sizes: sizesArray = [1], aspect, quality, sharpen, critical, modifiedDate, error: ErrorComp = Error, focalPointX, focalPointY } = props, rest = __rest(props, ["gravity", "crop", "src", "sizes", "aspect", "quality", "sharpen", "critical", "modifiedDate", "error", "focalPointX", "focalPointY"]);
|
|
35
|
-
const { theme: { breakpoints }, useMobileImageSizes = false } = useShopConfig();
|
|
35
|
+
const { theme: { breakpoints }, useMobileImageSizes = false, useLowQualityImagePlaceholder = true } = useShopConfig();
|
|
36
36
|
// The baseUrl will change based on the currently-selected channel.
|
|
37
37
|
// We need it to correctly construct the image url
|
|
38
38
|
const { selectedChannel } = React.useContext(ChannelContext);
|
|
@@ -48,6 +48,7 @@ function FlightImage(props) {
|
|
|
48
48
|
quality,
|
|
49
49
|
sharpen,
|
|
50
50
|
critical,
|
|
51
|
+
isPlaceholderEnabled: useLowQualityImagePlaceholder,
|
|
51
52
|
modifiedDate,
|
|
52
53
|
breakpoints,
|
|
53
54
|
baseUrl,
|
|
@@ -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;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAQvC,MAAM,CAAC,MAAM,kBAAkB,GAC7B,oHAAoH,CAAC;AA4EvH,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,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,KAAK,EAAE,SAAS,GAAG,KAAK,EACxB,WAAW,EACX,WAAW,KAET,KAAK,EADJ,IAAI,UACL,KAAK,EAdH,sIAcL,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EAAE,EAAE,WAAW,EAAE,EACtB,mBAAmB,GAAG,KAAK,
|
|
1
|
+
{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -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}
|
|
@@ -30,6 +30,12 @@ interface ImageParameters {
|
|
|
30
30
|
*/
|
|
31
31
|
aspect?: string;
|
|
32
32
|
critical?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Whether to request a blurred placeholder to show while the full image
|
|
35
|
+
* loads. On by default. The placeholder is a separate transform request per
|
|
36
|
+
* image, so turning it off roughly halves the image requests a page makes.
|
|
37
|
+
*/
|
|
38
|
+
isPlaceholderEnabled?: boolean;
|
|
33
39
|
modifiedDate?: string;
|
|
34
40
|
breakpoints: Record<string, string>;
|
|
35
41
|
baseUrl: string;
|
|
@@ -38,9 +44,10 @@ interface ImageParameters {
|
|
|
38
44
|
}
|
|
39
45
|
/**
|
|
40
46
|
* Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
|
|
41
|
-
* Also generates a LQIP using query parameters, to display while the full image
|
|
47
|
+
* Also generates a LQIP using query parameters, to display while the full image
|
|
48
|
+
* loads, when the shop has opted into one.
|
|
42
49
|
*/
|
|
43
|
-
export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, sharpen, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
|
|
50
|
+
export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, isPlaceholderEnabled, quality, sharpen, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
|
|
44
51
|
srcset: string;
|
|
45
52
|
sizes: string;
|
|
46
53
|
sizesMobile: 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, sharpen, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }) {
|
|
14
|
+
export function useConstructImage({ gravity, crop, src, sizes, aspect, critical, isPlaceholderEnabled = true, quality, sharpen, 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
|
|
@@ -70,8 +71,9 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
70
71
|
};
|
|
71
72
|
const srcset = getSrcSetFromWidths(imageSrc, widths, aspect, imageOptions, modifiedDate, baseUrl);
|
|
72
73
|
const srcsetMobile = getSrcSetFromWidths(imageSrc, mobileWidths, aspect, imageOptions, modifiedDate, baseUrl);
|
|
73
|
-
//
|
|
74
|
-
|
|
74
|
+
// A critical image renders its real source straight away, and every other
|
|
75
|
+
// image only gets a placeholder if the shop asked for one.
|
|
76
|
+
const lqip = critical || !isPlaceholderEnabled
|
|
75
77
|
? null
|
|
76
78
|
: getLQIP(imageSrc, widths, aspect, crop, modifiedDate, baseUrl);
|
|
77
79
|
const sizesMap = getSizesMap(breakpoints, sizes);
|
|
@@ -94,6 +96,7 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
94
96
|
sharpen,
|
|
95
97
|
sizes,
|
|
96
98
|
critical,
|
|
99
|
+
isPlaceholderEnabled,
|
|
97
100
|
modifiedDate,
|
|
98
101
|
focalPointX,
|
|
99
102
|
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/Image/FlightImage.js
CHANGED
|
@@ -32,7 +32,7 @@ function Error() {
|
|
|
32
32
|
}
|
|
33
33
|
function FlightImage(props) {
|
|
34
34
|
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"]);
|
|
35
|
-
const { theme: { breakpoints }, useMobileImageSizes = false } = useShopConfig();
|
|
35
|
+
const { theme: { breakpoints }, useMobileImageSizes = false, useLowQualityImagePlaceholder = true } = useShopConfig();
|
|
36
36
|
// The baseUrl will change based on the currently-selected channel.
|
|
37
37
|
// We need it to correctly construct the image url
|
|
38
38
|
const { selectedChannel } = React.useContext(ChannelContext);
|
|
@@ -47,6 +47,7 @@ function FlightImage(props) {
|
|
|
47
47
|
aspect,
|
|
48
48
|
quality,
|
|
49
49
|
critical,
|
|
50
|
+
isPlaceholderEnabled: useLowQualityImagePlaceholder,
|
|
50
51
|
modifiedDate,
|
|
51
52
|
breakpoints,
|
|
52
53
|
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;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAQvC,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,mBAAmB,GAAG,KAAK,
|
|
1
|
+
{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -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
|
|
@@ -78,8 +79,9 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
78
79
|
const webpSrcset = srcSetFromWidths({ webp: true });
|
|
79
80
|
const srcsetMobile = mobileSrcSetFromWidths({ webp: false });
|
|
80
81
|
const webpSrcsetMobile = mobileSrcSetFromWidths({ webp: true });
|
|
81
|
-
//
|
|
82
|
-
|
|
82
|
+
// A critical image renders its real source straight away, and every other
|
|
83
|
+
// image only gets a placeholder if the shop asked for one.
|
|
84
|
+
const lqip = critical || !isPlaceholderEnabled
|
|
83
85
|
? null
|
|
84
86
|
: getLQIP(imageSrc, widths, aspect, crop, modifiedDate);
|
|
85
87
|
const sizesMap = getSizesMap(breakpoints, sizes);
|
|
@@ -103,6 +105,7 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
|
|
|
103
105
|
quality,
|
|
104
106
|
sizes,
|
|
105
107
|
critical,
|
|
108
|
+
isPlaceholderEnabled,
|
|
106
109
|
modifiedDate,
|
|
107
110
|
focalPointX,
|
|
108
111
|
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": "6.5.8
|
|
3
|
+
"version": "6.5.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
6
|
"**/*.js",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"react": "^18",
|
|
62
62
|
"react-dom": "^18"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "4f2e8964a7c031860b2b2b5f8cc7ab9884d6b1ec"
|
|
65
65
|
}
|