Remove deprecated props (#1435)

Shopify · Oct 25, 2023 · 0ae7cbe · 0ae7cbe
1 parent 7fc088e
commit 0ae7cbe
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 119 deletions.
diff --git a/.changeset/sweet-points-walk.md b/.changeset/sweet-points-walk.md
@@ -0,0 +1,9 @@
+---
+'@shopify/hydrogen-react': patch
+'@shopify/hydrogen': patch
+---
+
+Remove deprecated props:
+
+- `createStorefrontClient`'s `buyerIp` and `requestGroupId`
+- `<Image>` component's `loaderOptions` and `widths`
diff --git a/packages/hydrogen-react/src/Image.stories.tsx b/packages/hydrogen-react/src/Image.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type {Story} from '@ladle/react';
-import {Image, ShopifyLoaderOptions, LoaderParams} from './Image.js';
+import {Image, LoaderParams} from './Image.js';
 import type {PartialDeep} from 'type-fest';
 import type {Image as ImageType} from './storefront-api-types.js';
 
@@ -28,7 +28,6 @@ const Template: Story<{
   config?: ImageConfig;
   alt?: string;
   loading?: 'lazy' | 'eager';
-  loaderOptions?: ShopifyLoaderOptions;
   widths?: (HtmlImageProps['width'] | ImageType['width'])[];
 }> = (props) => {
   return (
@@ -54,19 +53,6 @@ const Template: Story<{
       <Image {...props} width="30vw" sizes="30vw" />
       <Image {...props} width={100} height={200} />
       <Image {...props} width="5rem" />
-      <Image {...props} widths={[100, 200, 300]} />
-      <Image
-        {...props}
-        loaderOptions={{
-          crop: 'center',
-        }}
-        widths={[200, 300]}
-      />
-      <Image
-        sizes="100vw"
-        src="https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg"
-        widths={[100, 200, 300]}
-      />
     </>
   );
 };

diff --git a/packages/hydrogen-react/src/Image.test.tsx b/packages/hydrogen-react/src/Image.test.tsx
@@ -80,20 +80,6 @@ describe('<Image />', () => {
     });
   });
 
-  describe('srcSet', () => {
-    it('renders a `srcSet` attribute when the `widths` prop is provided', () => {
-      const widths = [100, 200, 300];
-
-      render(<Image {...defaultProps} widths={widths} />);
-      const img = screen.getByRole('img');
-
-      expect(img).toHaveAttribute('srcSet');
-      expect(img.getAttribute('srcSet')).toMatchInlineSnapshot(
-        '"https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=200&crop=center 200w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=400&crop=center 400w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=600&crop=center 600w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=800&crop=center 800w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=1000&crop=center 1000w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=1200&crop=center 1200w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=1400&crop=center 1400w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=1600&crop=center 1600w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=1800&crop=center 1800w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=2000&crop=center 2000w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=2200&crop=center 2200w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=2400&crop=center 2400w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=2600&crop=center 2600w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=2800&crop=center 2800w, https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=3000&crop=center 3000w"',
-      );
-    });
-  });
-
   describe('aspect-ratio', () => {
     // Assertion support is limited for aspectRatio
     // https://github.com/testing-library/jest-dom/issues/452
@@ -200,32 +186,6 @@ describe('<Image />', () => {
       render(<Image {...defaultProps} sizes={undefined} width={100} />);
       expect(console.warn).toHaveBeenCalledTimes(0);
     });
-
-    it('warns user if widths is provided', () => {
-      render(<Image {...defaultProps} widths={[]} />);
-
-      expect(console.warn).toHaveBeenCalledTimes(1);
-      expect(getWarnings()).toMatchInlineSnapshot(
-        `
-        [
-          "Deprecated property from original Image component in use: \`widths\` are now calculated automatically based on the config and width props. Image used is https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg",
-        ]
-      `,
-      );
-    });
-
-    it('warns user if loaderOptions are provided', () => {
-      render(<Image {...defaultProps} loaderOptions={{}} />);
-
-      expect(console.warn).toHaveBeenCalledTimes(1);
-      expect(getWarnings()).toMatchInlineSnapshot(
-        `
-        [
-          "Deprecated property from original Image component in use: Use the \`crop\`, \`width\`, \`height\`, and src props, or the \`data\` prop to achieve the same result. Image used is https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg",
-        ]
-      `,
-      );
-    });
   });
 });
 

diff --git a/packages/hydrogen-react/src/Image.tsx b/packages/hydrogen-react/src/Image.tsx
@@ -46,19 +46,6 @@ export type LoaderParams = {
 
 export type Loader = (params: LoaderParams) => string;
 
-/** Legacy type for backwards compatibility *
- * @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop. Or pass a custom `loader` with `LoaderParams` */
-export type ShopifyLoaderOptions = {
-  /** The base URL of the image */
-  src?: ImageType['url'];
-  /** The URL param that controls width */
-  width?: HtmlImageProps['width'] | ImageType['width'];
-  /** The URL param that controls height */
-  height?: HtmlImageProps['height'] | ImageType['height'];
-  /** The URL param that controls the cropping region */
-  crop?: Crop;
-};
-
 /*
  * @TODO: Expand to include focal point support; and/or switch this to be an SF API type
  */
@@ -120,10 +107,6 @@ type HydrogenImageBaseProps = {
   loader?: Loader;
   /** An optional prop you can use to change the default srcSet generation behaviour */
   srcSetOptions?: SrcSetOptions;
-  /** @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop */
-  loaderOptions?: ShopifyLoaderOptions;
-  /** @deprecated Autocalculated, use only `width` prop, or srcSetOptions */
-  widths?: (HtmlImageProps['width'] | ImageType['width'])[];
 };
 
 /**
@@ -182,7 +165,6 @@ export const Image = React.forwardRef<HTMLImageElement, HydrogenImageProps>(
       decoding = 'async',
       height = 'auto',
       loader = shopifyLoader,
-      loaderOptions,
       loading = 'lazy',
       sizes,
       src,
@@ -193,40 +175,10 @@ export const Image = React.forwardRef<HTMLImageElement, HydrogenImageProps>(
         placeholderWidth: 100,
       },
       width = '100%',
-      widths,
       ...passthroughProps
     },
     ref,
   ) => {
-    /*
-     * Deprecated Props from original Image component
-     */
-    if (__HYDROGEN_DEV__) {
-      if (loaderOptions) {
-        console.warn(
-          [
-            `Deprecated property from original Image component in use:`,
-            `Use the \`crop\`, \`width\`, \`height\`, and src props, or`,
-            `the \`data\` prop to achieve the same result. Image used is ${
-              src || data?.url || passthroughProps?.key || 'unknown'
-            }`,
-          ].join(' '),
-        );
-      }
-
-      if (widths) {
-        console.warn(
-          [
-            `Deprecated property from original Image component in use:`,
-            `\`widths\` are now calculated automatically based on the`,
-            `config and width props. Image used is ${
-              src || data?.url || passthroughProps?.key || 'unknown'
-            }`,
-          ].join(' '),
-        );
-      }
-    }
-
     /*
      * Gets normalized values for width, height from data  prop
      */

diff --git a/packages/hydrogen/src/storefront.ts b/packages/hydrogen/src/storefront.ts
@@ -174,10 +174,6 @@ type HydrogenClientProps<TI18n> = {
   storefrontHeaders?: StorefrontHeaders;
   /** An instance that implements the [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache) */
   cache?: Cache;
-  /** @deprecated use storefrontHeaders instead */
-  buyerIp?: string;
-  /** @deprecated use storefrontHeaders instead */
-  requestGroupId?: string | null;
   /** The globally unique identifier for the Shop */
   storefrontId?: string;
   /** The `waitUntil` function is used to keep the current request/response lifecycle alive even after a response has been sent. It should be provided by your platform. */
@@ -239,9 +235,7 @@ export function createStorefrontClient<TI18n extends I18nBase>(
     storefrontHeaders,
     cache,
     waitUntil,
-    buyerIp,
     i18n,
-    requestGroupId,
     storefrontId,
     ...clientOptions
   } = options;
@@ -267,11 +261,11 @@ export function createStorefrontClient<TI18n extends I18nBase>(
 
   const defaultHeaders = getHeaders({
     contentType: 'json',
-    buyerIp: storefrontHeaders?.buyerIp || buyerIp,
+    buyerIp: storefrontHeaders?.buyerIp || '',
   });
 
   defaultHeaders[STOREFRONT_REQUEST_GROUP_ID_HEADER] =
-    storefrontHeaders?.requestGroupId || requestGroupId || generateUUID();
+    storefrontHeaders?.requestGroupId || generateUUID();
 
   if (storefrontId) defaultHeaders[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
   if (LIB_VERSION) defaultHeaders['user-agent'] = `Hydrogen ${LIB_VERSION}`;
@@ -285,14 +279,6 @@ export function createStorefrontClient<TI18n extends I18nBase>(
       defaultHeaders[SHOPIFY_STOREFRONT_S_HEADER] = cookies[SHOPIFY_S];
   }
 
-  // Deprecation warning
-  if (process.env.NODE_ENV === 'development' && !storefrontHeaders) {
-    warnOnce(
-      H2_PREFIX_WARN +
-        '`requestGroupId` and `buyerIp` will be deprecated in the next calendar release. Please use `getStorefrontHeaders`',
-    );
-  }
-
   async function fetchStorefrontApi<T>({
     query,
     mutation,