@jetshop/ui 6.5.7 → 6.5.8-alpha.0

package/CloudflareImage/FlightImage.js

@@ -32,7 +32,7 @@ function Error() {
 }
 function FlightImage(props) {
     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"]);
-    const { theme: { breakpoints }, useMobileImageSizes = false } = useShopConfig();
+    const { theme: { breakpoints }, useMobileImageSizes = false, useLowQualityImagePlaceholder = false } = useShopConfig();
     // The baseUrl will change based on the currently-selected channel.
     // We need it to correctly construct the image url
     const { selectedChannel } = React.useContext(ChannelContext);
@@ -48,6 +48,7 @@ function FlightImage(props) {
         quality,
         sharpen,
         critical,
+        isPlaceholderEnabled: useLowQualityImagePlaceholder,
         modifiedDate,
         breakpoints,
         baseUrl,

package/CloudflareImage/FlightImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":"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"}

package/CloudflareImage/FlightImage.test.js

@@ -28,22 +28,37 @@ const transparent =
 
 global.__IN_SERVER__ = false;
 
+// The framework no longer requests a placeholder unless the shop opts in, so the
+// tests that read transform parameters off the placeholder URL ask for one.
+const withPlaceholder = { useLowQualityImagePlaceholder: true };
+
 describe('Hooks image component', () => {
   describe('on initial load', () => {
     beforeAll(() => {
       useInView.mockImplementation(() => [null, false]);
     });
-    it('renders a lqip version of the image by default', () => {
+    it('does not request a lqip by default', () => {
       const { placeholderImage } = setup();
 
       const src = placeholderImage.getAttribute('src');
 
+      expect(src).toEqual(transparent);
+    });
+
+    it('renders a lqip version of the image when the shop opts in', () => {
+      const { placeholderImage } = setup({ shopConfig: withPlaceholder });
+
+      const src = placeholderImage.getAttribute('src');
+
       expect(src).toEqual(expect.stringContaining('sigma=2.5'));
       expect(src).toEqual(expect.stringContaining('minampl=0.5'));
     });
 
     it('sets the lqip to the smallest of the calculated sizes', () => {
-      const { placeholderImage } = setup({ sizes: [0.5, 0.85, 1] });
+      const { placeholderImage } = setup({
+        sizes: [0.5, 0.85, 1],
+        shopConfig: withPlaceholder
+      });
       // Should be 160
       // The smallest breakpoint is 20rem, which is 360px.
       // 0.5 x 360 = 160
@@ -54,7 +69,10 @@ describe('Hooks image component', () => {
     });
 
     it('does not render an lqip if critical is true', () => {
-      const { placeholderImage } = setup({ critical: true });
+      const { placeholderImage } = setup({
+        critical: true,
+        shopConfig: withPlaceholder
+      });
 
       const src = placeholderImage.getAttribute('src');
 
@@ -63,7 +81,10 @@ describe('Hooks image component', () => {
     });
 
     it('accepts sizes as pixel values', () => {
-      const { placeholderImage } = setup({ sizes: [123] });
+      const { placeholderImage } = setup({
+        sizes: [123],
+        shopConfig: withPlaceholder
+      });
 
       const src = placeholderImage.getAttribute('src');
 
@@ -82,7 +103,10 @@ describe('Hooks image component', () => {
       const { placeholderImage } = setup();
     });
     it('to fit if an aspect ratio is provided', () => {
-      const { placeholderImage } = setup({ aspect: '1:1' });
+      const { placeholderImage } = setup({
+        aspect: '1:1',
+        shopConfig: withPlaceholder
+      });
 
       expect(placeholderImage.getAttribute('src')).toEqual(
         expect.stringContaining('&height=320')
@@ -92,7 +116,11 @@ describe('Hooks image component', () => {
       );
     });
     it('to crop if crop prop is true', () => {
-      const { placeholderImage } = setup({ aspect: '1:1', crop: true });
+      const { placeholderImage } = setup({
+        aspect: '1:1',
+        crop: true,
+        shopConfig: withPlaceholder
+      });
 
       expect(placeholderImage.getAttribute('src')).toEqual(
         expect.stringContaining('&method=crop')
@@ -242,6 +270,7 @@ function setup({
   sizes,
   aspect,
   cover,
+  shopConfig,
   ...rest
 } = {}) {
   const channelHandler = new ChannelHandler({
@@ -250,7 +279,7 @@ function setup({
   });
   const utils = render(
     <ChannelProvider channelHandler={channelHandler}>
-      <ConfigProvider config={mockShopConfig}>
+      <ConfigProvider config={{ ...mockShopConfig, ...shopConfig }}>
         <Image
           src={falsySrc ? imageSrc : imageSrc || 'default.png'}
           error={error}

package/CloudflareImage/useConstructImage.d.ts

@@ -30,6 +30,12 @@ interface ImageParameters {
      */
     aspect?: string;
     critical?: boolean;
+    /**
+     * Whether to request a blurred placeholder to show while the full image
+     * loads. Off by default. The placeholder is a separate transform request per
+     * image, so leaving it on roughly doubles the image requests a page makes.
+     */
+    isPlaceholderEnabled?: boolean;
     modifiedDate?: string;
     breakpoints: Record<string, string>;
     baseUrl: string;
@@ -38,9 +44,10 @@ interface ImageParameters {
 }
 /**
  * Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
- * Also generates a LQIP using query parameters, to display while the full image loads.
+ * Also generates a LQIP using query parameters, to display while the full image
+ * loads, when the shop has opted into one.
  */
-export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, sharpen, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
+export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, isPlaceholderEnabled, quality, sharpen, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
     srcset: string;
     sizes: string;
     sizesMobile: string;

package/CloudflareImage/useConstructImage.js

@@ -8,9 +8,10 @@ import { getSrcSetFromWidths } from './utils/getSrcSetFromWidths';
 import React from 'react';
 /**
  * Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
- * Also generates a LQIP using query parameters, to display while the full image loads.
+ * Also generates a LQIP using query parameters, to display while the full image
+ * loads, when the shop has opted into one.
  */
-export function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, sharpen, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }) {
+export function useConstructImage({ gravity, crop, src, sizes, aspect, critical, isPlaceholderEnabled = false, quality, sharpen, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }) {
     // Warn if gravity was provided but crop was not
     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.');
     // Warn if the src is a falsy value
@@ -70,8 +71,9 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
         };
         const srcset = getSrcSetFromWidths(imageSrc, widths, aspect, imageOptions, modifiedDate, baseUrl);
         const srcsetMobile = getSrcSetFromWidths(imageSrc, mobileWidths, aspect, imageOptions, modifiedDate, baseUrl);
-        // If this is a critical image, don't calculate LQIP
-        const lqip = critical
+        // A critical image renders its real source straight away, and every other
+        // image only gets a placeholder if the shop asked for one.
+        const lqip = critical || !isPlaceholderEnabled
             ? null
             : getLQIP(imageSrc, widths, aspect, crop, modifiedDate, baseUrl);
         const sizesMap = getSizesMap(breakpoints, sizes);
@@ -94,6 +96,7 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
         sharpen,
         sizes,
         critical,
+        isPlaceholderEnabled,
         modifiedDate,
         focalPointX,
         focalPointY

package/CloudflareImage/useConstructImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"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"}

package/Image/FlightImage.js

@@ -32,7 +32,7 @@ function Error() {
 }
 function FlightImage(props) {
     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"]);
-    const { theme: { breakpoints }, useMobileImageSizes = false } = useShopConfig();
+    const { theme: { breakpoints }, useMobileImageSizes = false, useLowQualityImagePlaceholder = false } = useShopConfig();
     // The baseUrl will change based on the currently-selected channel.
     // We need it to correctly construct the image url
     const { selectedChannel } = React.useContext(ChannelContext);
@@ -47,6 +47,7 @@ function FlightImage(props) {
         aspect,
         quality,
         critical,
+        isPlaceholderEnabled: useLowQualityImagePlaceholder,
         modifiedDate,
         breakpoints,
         baseUrl,

package/Image/FlightImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":"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"}

package/Image/FlightImage.test.js

@@ -28,22 +28,37 @@ const transparent =
 
 global.__IN_SERVER__ = false;
 
+// The framework no longer requests a placeholder unless the shop opts in, so the
+// tests that read transform parameters off the placeholder URL ask for one.
+const withPlaceholder = { useLowQualityImagePlaceholder: true };
+
 describe('Hooks image component', () => {
   describe('on initial load', () => {
     beforeAll(() => {
       useInView.mockImplementation(() => [null, false]);
     });
-    it('renders a lqip version of the image by default', () => {
+    it('does not request a lqip by default', () => {
       const { placeholderImage } = setup();
 
       const src = placeholderImage.getAttribute('src');
 
+      expect(src).toEqual(transparent);
+    });
+
+    it('renders a lqip version of the image when the shop opts in', () => {
+      const { placeholderImage } = setup({ shopConfig: withPlaceholder });
+
+      const src = placeholderImage.getAttribute('src');
+
       expect(src).toEqual(expect.stringContaining('sigma=2.5'));
       expect(src).toEqual(expect.stringContaining('minampl=0.5'));
     });
 
     it('sets the lqip to the smallest of the calculated sizes', () => {
-      const { placeholderImage } = setup({ sizes: [0.5, 0.85, 1] });
+      const { placeholderImage } = setup({
+        sizes: [0.5, 0.85, 1],
+        shopConfig: withPlaceholder
+      });
       // Should be 160
       // The smallest breakpoint is 20rem, which is 360px.
       // 0.5 x 360 = 160
@@ -54,7 +69,10 @@ describe('Hooks image component', () => {
     });
 
     it('does not render an lqip if critical is true', () => {
-      const { placeholderImage } = setup({ critical: true });
+      const { placeholderImage } = setup({
+        critical: true,
+        shopConfig: withPlaceholder
+      });
 
       const src = placeholderImage.getAttribute('src');
 
@@ -63,7 +81,10 @@ describe('Hooks image component', () => {
     });
 
     it('accepts sizes as pixel values', () => {
-      const { placeholderImage } = setup({ sizes: [123] });
+      const { placeholderImage } = setup({
+        sizes: [123],
+        shopConfig: withPlaceholder
+      });
 
       const src = placeholderImage.getAttribute('src');
 
@@ -82,7 +103,10 @@ describe('Hooks image component', () => {
       const { placeholderImage } = setup();
     });
     it('to fit if an aspect ratio is provided', () => {
-      const { placeholderImage } = setup({ aspect: '1:1' });
+      const { placeholderImage } = setup({
+        aspect: '1:1',
+        shopConfig: withPlaceholder
+      });
 
       expect(placeholderImage.getAttribute('src')).toEqual(
         expect.stringContaining('&height=320')
@@ -92,7 +116,11 @@ describe('Hooks image component', () => {
       );
     });
     it('to crop if crop prop is true', () => {
-      const { placeholderImage } = setup({ aspect: '1:1', crop: true });
+      const { placeholderImage } = setup({
+        aspect: '1:1',
+        crop: true,
+        shopConfig: withPlaceholder
+      });
 
       expect(placeholderImage.getAttribute('src')).toEqual(
         expect.stringContaining('&method=crop')
@@ -242,6 +270,7 @@ function setup({
   sizes,
   aspect,
   cover,
+  shopConfig,
   ...rest
 } = {}) {
   const channelHandler = new ChannelHandler({
@@ -250,7 +279,7 @@ function setup({
   });
   const utils = render(
     <ChannelProvider channelHandler={channelHandler}>
-      <ConfigProvider config={mockShopConfig}>
+      <ConfigProvider config={{ ...mockShopConfig, ...shopConfig }}>
         <Image
           src={falsySrc ? imageSrc : imageSrc || 'default.png'}
           error={error}

package/Image/useConstructImage.d.ts

@@ -25,6 +25,12 @@ interface ImageParameters {
      */
     aspect?: string;
     critical?: boolean;
+    /**
+     * Whether to request a blurred placeholder to show while the full image
+     * loads. Off by default. The placeholder is a separate transform request per
+     * image, so leaving it on roughly doubles the image requests a page makes.
+     */
+    isPlaceholderEnabled?: boolean;
     modifiedDate?: string;
     breakpoints: Record<string, string>;
     baseUrl: string;
@@ -33,9 +39,10 @@ interface ImageParameters {
 }
 /**
  * Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
- * Also generates a LQIP using query parameters, to display while the full image loads.
+ * Also generates a LQIP using query parameters, to display while the full image
+ * loads, when the shop has opted into one.
  */
-export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
+export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, isPlaceholderEnabled, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
     srcset: string;
     webpSrcset: string;
     sizes: string;

package/Image/useConstructImage.js

@@ -8,9 +8,10 @@ import { getSrcSetFromWidths } from './utils/getSrcSetFromWidths';
 import React from 'react';
 /**
  * Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
- * Also generates a LQIP using query parameters, to display while the full image loads.
+ * Also generates a LQIP using query parameters, to display while the full image
+ * loads, when the shop has opted into one.
  */
-export function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }) {
+export function useConstructImage({ gravity, crop, src, sizes, aspect, critical, isPlaceholderEnabled = false, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }) {
     // Warn if gravity was provided but crop was not
     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.');
     // Warn if the src is a falsy value
@@ -78,8 +79,9 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
         const webpSrcset = srcSetFromWidths({ webp: true });
         const srcsetMobile = mobileSrcSetFromWidths({ webp: false });
         const webpSrcsetMobile = mobileSrcSetFromWidths({ webp: true });
-        // If this is a critical image, don't calculate LQIP
-        const lqip = critical
+        // A critical image renders its real source straight away, and every other
+        // image only gets a placeholder if the shop asked for one.
+        const lqip = critical || !isPlaceholderEnabled
             ? null
             : getLQIP(imageSrc, widths, aspect, crop, modifiedDate);
         const sizesMap = getSizesMap(breakpoints, sizes);
@@ -103,6 +105,7 @@ export function useConstructImage({ gravity, crop, src, sizes, aspect, critical,
         quality,
         sizes,
         critical,
+        isPlaceholderEnabled,
         modifiedDate,
         focalPointX,
         focalPointY

package/Image/useConstructImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetshop/ui",
-  "version": "6.5.7",
+  "version": "6.5.8-alpha.0+8de2285cd",
   "license": "MIT",
   "files": [
     "**/*.js",
@@ -61,5 +61,5 @@
     "react": "^18",
     "react-dom": "^18"
   },
-  "gitHead": "574c07d00304a61e0e4ac368ea9a682069a99998"
+  "gitHead": "8de2285cd5f0d20028bb6e170f4bddee62954ad8"
 }