From 0ae7cbe280d8351126e11dc13f35d7277d9b2d86 Mon Sep 17 00:00:00 2001 From: Helen Lin Date: Wed, 25 Oct 2023 14:57:26 -0700 Subject: [PATCH] Remove deprecated props (#1435) --- .changeset/sweet-points-walk.md | 9 ++++ packages/hydrogen-react/src/Image.stories.tsx | 16 +------ packages/hydrogen-react/src/Image.test.tsx | 40 ---------------- packages/hydrogen-react/src/Image.tsx | 48 ------------------- packages/hydrogen/src/storefront.ts | 18 +------ 5 files changed, 12 insertions(+), 119 deletions(-) create mode 100644 .changeset/sweet-points-walk.md diff --git a/.changeset/sweet-points-walk.md b/.changeset/sweet-points-walk.md new file mode 100644 index 0000000000..2667bc0fa9 --- /dev/null +++ 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` +- `` component's `loaderOptions` and `widths` diff --git a/packages/hydrogen-react/src/Image.stories.tsx b/packages/hydrogen-react/src/Image.stories.tsx index 2132aacf33..946f5febd3 100644 --- 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<{ - - - ); }; diff --git a/packages/hydrogen-react/src/Image.test.tsx b/packages/hydrogen-react/src/Image.test.tsx index 8d6a3fa7e7..f2c872f306 100644 --- a/packages/hydrogen-react/src/Image.test.tsx +++ b/packages/hydrogen-react/src/Image.test.tsx @@ -80,20 +80,6 @@ describe('', () => { }); }); - describe('srcSet', () => { - it('renders a `srcSet` attribute when the `widths` prop is provided', () => { - const widths = [100, 200, 300]; - - render(); - 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('', () => { render(); expect(console.warn).toHaveBeenCalledTimes(0); }); - - it('warns user if widths is provided', () => { - render(); - - 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(); - - 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 index dcccb85ab3..7a5e1c3061 100644 --- 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( decoding = 'async', height = 'auto', loader = shopifyLoader, - loaderOptions, loading = 'lazy', sizes, src, @@ -193,40 +175,10 @@ export const Image = React.forwardRef( 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 index 51ad2d0806..05a9fa5884 100644 --- a/packages/hydrogen/src/storefront.ts +++ b/packages/hydrogen/src/storefront.ts @@ -174,10 +174,6 @@ type HydrogenClientProps = { 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( storefrontHeaders, cache, waitUntil, - buyerIp, i18n, - requestGroupId, storefrontId, ...clientOptions } = options; @@ -267,11 +261,11 @@ export function createStorefrontClient( 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( 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({ query, mutation,