@shopify/hydrogen 0.22.1 → 0.23.0

package/CHANGELOG.md

@@ -1,5 +1,212 @@
 # Changelog
 
+## 0.23.0
+
+### Minor Changes
+
+- [#1389](https://github.com/Shopify/hydrogen/pull/1389) [`9a21108f`](https://github.com/Shopify/hydrogen/commit/9a21108f6ff89474db9ff8bec26733fcbe744bdc) Thanks [@blittle](https://github.com/blittle)! - **Breaking change**
+
+  The utility `isClient` has been renamed to `isBrowser`. This is because the utility really checks if the running context is a browser, _not_ if the context is a client component.
+
+  All client components by default also run on the server when they are server rendered. If you don't want that to happen, use the `isBrowser()` hook. Remember that anything not server rendered will be unavailable for SEO bots.
+
+* [#1431](https://github.com/Shopify/hydrogen/pull/1431) [`6975bdb9`](https://github.com/Shopify/hydrogen/commit/6975bdb90cfdc03562d21cec09150c52ff31ff78) Thanks [@jplhomer](https://github.com/jplhomer)! - Add `scroll` prop to `Link` and `navigate` to allow the scroll restoration behavior to be disabled.
+
+  By default, when a `<Link>` component is clicked, Hydrogen emulates default browser behavior and attempts to restore the scroll position previously used in the visitor's session. For new pages, this defaults to scrolling to the top of the page.
+
+  However, if you are building a user interface that should fetch a new server components request and update the URL but not modify scroll position, then you can disable scroll restoration using the `scroll` prop:
+
+  ```jsx
+  import {Link} from '@shopify/hydrogen';
+  export default function Index({request}) {
+    const url = new URL(request.normalizedUrl);
+
+    return (
+      <>
+        <p>Current param is: {url.searchParams.get('param')}</p>
+        <Link to="/?param=foo" scroll={false}>
+          Update param to foo
+        </Link>
+      </>
+    );
+  }
+  ```
+
+- [#1325](https://github.com/Shopify/hydrogen/pull/1325) [`572c18d1`](https://github.com/Shopify/hydrogen/commit/572c18d1893b212cfc3f1be3043a67dcca251629) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - - Fix clientAnalytics not waiting for all server analytics data before sending page view event
+
+  - Fix server analytics connector erroring out after more than 1 server analytics connectors are attached
+  - Shopify analytics components
+
+  # Updates to server analytics connectors
+
+  The server analytics connector interface has updated to
+
+  ```jsx
+  export function request(
+    requestUrl: string,
+    requestHeader: Headers,
+    data?: any,
+    contentType?: string
+  ): void {
+    // Do something with the analytic event.
+  }
+  ```
+
+  # Introducing Shopify analytics
+
+  Optional analytics components that allows you to send ecommerce related analytics to
+  Shopify. Adding the Shopify analytics components will allow the Shopify admin - Analytics
+  dashboard to work.
+
+  For information, see [Shopify Analytics](https://shopify.dev/api/hydrogen/components/framework/shopifyanalytics)
+
+* [#1334](https://github.com/Shopify/hydrogen/pull/1334) [`58e039d4`](https://github.com/Shopify/hydrogen/commit/58e039d45cf69b670628f9f7ea62cb7c2d8425d9) Thanks [@blittle](https://github.com/blittle)! - With the introduction of authenticated pages, we also now provide the ability to prevent pages from being indexed by bots. You can do so by passing `noindex` to the `Seo` component:
+
+  ```jsx
+  <Seo type="noindex" data={{title: 'Login'}} />
+  ```
+
+- [#1397](https://github.com/Shopify/hydrogen/pull/1397) [`fbd185ab`](https://github.com/Shopify/hydrogen/commit/fbd185ab47e7335992b7844af0ef0b0aea6d70a5) Thanks [@frehner](https://github.com/frehner)! - ## `<ProductProvider/>` and `<ProductOptionsProvider/>`
+
+  - `<ProductProvider/>` has been removed
+    - `<ProductPrice/>` was the only component left that used it; now it requires a `data` prop that takes in the product object
+  - `<ProductOptionsProvider/>` now maintains and provides the state that `useProductOptions` used to keep track of by itself. This change enables you to use multiple `useProductOptions` hook calls and have them share the same state (such as selected variant, options, etc.)
+
+* [#1403](https://github.com/Shopify/hydrogen/pull/1403) [`979f8177`](https://github.com/Shopify/hydrogen/commit/979f81775a4bfa83276030da07cb012e6cb08e2f) Thanks [@frandiox](https://github.com/frandiox)! - **Breaking change**: The `setLogger` and `setLoggerOptions` utilities have been removed. The same information can now be passed under the `logger` property in Hydrogen config:
+
+  ```diff
+  // App.server.jsx
+
+  -import {setLogger, setLoggerOptions} from '@shopify/hydrogen';
+
+  -setLogger({
+  -  trace() {},
+  -  error() {},
+  -  // ...
+  -});
+
+  -setLoggerOptions({
+  -  showQueryTiming: true,
+  -  showCacheControlHeader: true,
+  -  // ...
+  -});
+
+  function App() {
+    // ...
+  }
+
+  export default renderHydrogen(App);
+  ```
+
+  ```diff
+  // hydrogen.config.js
+
+  export default defineConfig({
+    // ...
+  + logger: {
+  +   trace() {},
+  +   error() {},
+  +   showQueryTiming: true,
+  +   showCacheControlHeader: true,
+  +   // ...
+  + },
+  });
+  ```
+
+- [#1433](https://github.com/Shopify/hydrogen/pull/1433) [`cd354d3a`](https://github.com/Shopify/hydrogen/commit/cd354d3a6205b5a8ef14426040121ac620c8c158) Thanks [@frandiox](https://github.com/frandiox)! - The `response.writeHead` method has been removed, while `response.status` and `response.statusText` are now writable.
+
+  ```diff
+  function App({response}) {
+  - response.writeHead({
+  -   headers: {'custom-header': 'value'},
+  -   status: 404,
+  - });
+  + response.headers.set('custom-header', 'value');
+  + response.status = 404;
+  }
+  ```
+
+* [#1418](https://github.com/Shopify/hydrogen/pull/1418) [`512cb009`](https://github.com/Shopify/hydrogen/commit/512cb009fadeb1907fafa2cef8b568081799335f) Thanks [@frandiox](https://github.com/frandiox)! - **Breaking change**: The client configuration, including the `strictMode` option, has been moved from custom client entry handlers to the Hydrogen configuration file. If you had a custom client entry file just to pass client options, you can remove it and do the same in `hydrogen.config.js`:
+
+  ```diff
+  // Custom client entry handler
+
+  -renderHydrogen(ClientWrapper, {strictMode: false});
+  +renderHydrogen(ClientWrapper);
+  ```
+
+  ```diff
+  // hydrogen.config.jsx
+
+  export default defineConfig({
+  +  strictMode: false,
+  });
+  ```
+
+  To remove a custom client entry handler in case it's not needed anymore, delete the custom file and change `index.html`:
+
+  ```diff
+  <body>
+    <div id="root"></div>
+  - <script type="module" src="/src/custom-client-entry"></script>
+  + <script type="module" src="/@shopify/hydrogen/entry-client"></script>
+  </body>
+  ```
+
+- [#1401](https://github.com/Shopify/hydrogen/pull/1401) [`335b70ce`](https://github.com/Shopify/hydrogen/commit/335b70ce67f9f137875fcd18f32e00c1b1b4c533) Thanks [@frandiox](https://github.com/frandiox)! - **Breaking change**: The `enableStreaming` config option has been deprecated. The same feature can be done directly in the app:
+
+  ```diff
+  // hydrogen.config.js
+
+  export default defineConfig({
+    shopify: {
+      // ...
+    },
+  - enableStreaming: (req) => {
+  -   return req.headers.get('user-agent') !== 'custom bot';
+  - },
+  });
+  ```
+
+  ```diff
+  // App.server.jsx
+
+  -function App() {
+  +function App({request, response}) {
+  + if (request.headers.get('user-agent') === 'custom bot') {
+  +   response.doNotStream();
+  + }
+
+    return <Suspense fallback={'Loading...'}>{/*...*/}</Suspense>;
+  }
+
+  export default renderHydrogen(App);
+  ```
+
+### Patch Changes
+
+- [#1425](https://github.com/Shopify/hydrogen/pull/1425) [`e213aa86`](https://github.com/Shopify/hydrogen/commit/e213aa8656b17bf649fef714befa99b9618aae45) Thanks [@frandiox](https://github.com/frandiox)! - Rename internal Hydrogen global variables that could conflict with third party libraries that use the same names.
+
+* [#1361](https://github.com/Shopify/hydrogen/pull/1361) [`cf2ef664`](https://github.com/Shopify/hydrogen/commit/cf2ef664cd1e91bc53fc34698ac23797c398e74f) Thanks [@frandiox](https://github.com/frandiox)! - Improve component bundling to reduce the total amount of JS files downloaded in the browser.
+
+- [#1452](https://github.com/Shopify/hydrogen/pull/1452) [`ed1586a7`](https://github.com/Shopify/hydrogen/commit/ed1586a758fd36bddcc422a75db8a7971ce946d5) Thanks [@frandiox](https://github.com/frandiox)! - Reduce CPU consumption when rendering React Server Components.
+
+* [#1399](https://github.com/Shopify/hydrogen/pull/1399) [`583ce40c`](https://github.com/Shopify/hydrogen/commit/583ce40c97391bb22e6e15e736e6237e9a1ea085) Thanks [@frandiox](https://github.com/frandiox)! - Confusing warnings that are not actionable have been removed.
+
+- [#1460](https://github.com/Shopify/hydrogen/pull/1460) [`18056879`](https://github.com/Shopify/hydrogen/commit/18056879f1ea1dc54f146184bfdd4f01f24df636) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Fix doc links
+
+* [#1444](https://github.com/Shopify/hydrogen/pull/1444) [`0b4ee487`](https://github.com/Shopify/hydrogen/commit/0b4ee4876998923f206f6d28b1a3ef95c9616e59) Thanks [@blittle](https://github.com/blittle)! - Propagate a better error message when the response from the storefront API is not JSON parseable
+
+- [#1227](https://github.com/Shopify/hydrogen/pull/1227) [`8eae0a07`](https://github.com/Shopify/hydrogen/commit/8eae0a07ab02e61ac8742e42488825090ca0aa37) Thanks [@jplhomer](https://github.com/jplhomer)! - Enable streaming by default for all platforms
+
+* [#1427](https://github.com/Shopify/hydrogen/pull/1427) [`7115d7d8`](https://github.com/Shopify/hydrogen/commit/7115d7d8dc291b7e5b4dda200baf8a906a005cc8) Thanks [@jplhomer](https://github.com/jplhomer)! - Properly support Node v18
+
+- [#1424](https://github.com/Shopify/hydrogen/pull/1424) [`446c12bf`](https://github.com/Shopify/hydrogen/commit/446c12bffa08eadccfd27afe8b5f34c77a61d134) Thanks [@frandiox](https://github.com/frandiox)! - Custom loggers can return promises from their methods. Hydrogen will await for them after the current request is over but before the runtime instance ends.
+
+* [#1423](https://github.com/Shopify/hydrogen/pull/1423) [`aaf9efa4`](https://github.com/Shopify/hydrogen/commit/aaf9efa45dc9453e95be8e3020c259368ac5f4d0) Thanks [@frandiox](https://github.com/frandiox)! - Workers context (e.g. `waitUntil`) is now scoped to the current request instead of globally available.
+
+- [#1330](https://github.com/Shopify/hydrogen/pull/1330) [`c7dc6440`](https://github.com/Shopify/hydrogen/commit/c7dc644059206e7080c33d9f7e0096c168ae593e) Thanks [@ejfranco06](https://github.com/ejfranco06)! - [#1245] - Generate a default srcset for an image returned by the Shopify CDN on the Image component and allow using a custom set of `widths.`
+
 ## 0.22.1
 
 ### Patch Changes

package/dist/esnext/components/AddToCartButton/AddToCartButton.client.js

@@ -1,20 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import { useCart } from '../CartProvider';
-import { useProduct } from '../ProductProvider';
+import { useProductOptions } from '../ProductOptionsProvider';
 /**
  * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
  * It must be a descendent of the `CartProvider` component.
  */
 export function AddToCartButton(props) {
-    var _a, _b;
+    var _a;
     const [addingItem, setAddingItem] = useState(false);
     const { variantId: explicitVariantId, quantity = 1, attributes, children, accessibleAddingToCartLabel, ...passthroughProps } = props;
     const { status, linesAdd } = useCart();
-    const product = useProduct();
-    const variantId = (_b = explicitVariantId !== null && explicitVariantId !== void 0 ? explicitVariantId : (_a = product === null || product === void 0 ? void 0 : product.selectedVariant) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
+    const { selectedVariant } = useProductOptions();
+    const variantId = (_a = explicitVariantId !== null && explicitVariantId !== void 0 ? explicitVariantId : selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.id) !== null && _a !== void 0 ? _a : '';
     const disabled = explicitVariantId === null ||
         variantId === '' ||
-        (product === null || product === void 0 ? void 0 : product.selectedVariant) === null ||
+        selectedVariant === null ||
         addingItem ||
         passthroughProps.disabled;
     useEffect(() => {

package/dist/esnext/components/CartLines/index.d.ts

@@ -1 +1 @@
-export { CartLines } from './CartLines';
+export { CartLines } from './CartLines.client';

package/dist/esnext/components/CartLines/index.js

@@ -1 +1 @@
-export { CartLines } from './CartLines';
+export { CartLines } from './CartLines.client';

package/dist/esnext/components/DevTools.client.js

@@ -55,7 +55,7 @@ export default function DevTools() {
         React.createElement("path", { d: "M64.9548 106.281L27.1377 86.1894L40.0714 79.3723L54.6329 87.1049L66.851 80.6638L52.2895 72.9313L65.2231 66.0979L103.04 86.1894L90.1065 93.0064L76.35 85.6989L64.114 92.1563L77.8884 99.4638L64.9548 106.281Z", fill: "white" }),
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M65.2247 25L105.178 46.2267L90.105 54.1716L76.3488 46.8642L66.2525 52.1924L80.028 59.5005L64.9532 67.446L25 46.2196L40.0734 38.2748L54.6349 46.0073L64.713 40.6944L50.1533 32.9628L65.2247 25ZM54.4262 32.9673L68.9896 40.7008L54.6315 48.27L40.0699 40.5374L29.276 46.2267L64.9569 65.1833L75.7495 59.4947L61.9761 52.1878L76.3518 44.6012L90.1087 51.9088L100.902 46.2196L65.2221 27.2634L54.4262 32.9673Z", fill: "white" })));
     if (import.meta.env.DEV && hasMounted) {
-        return (React.createElement("div", { style: {
+        return (React.createElement("div", { id: "hydrogen-dev-tools", style: {
                 position: 'fixed',
                 right: open ? 0 : '2em',
                 left: open ? 0 : '2em',

package/dist/esnext/components/Image/Image.d.ts

@@ -37,6 +37,10 @@ export declare type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
      * 'src' shouldn't be passed when 'data' is used.
      */
     src?: never;
+    /**
+     * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.
+     */
+    widths?: (HtmlImageProps['width'] | ImageType['width'])[];
 };
 declare type LoaderProps<GenericLoaderOpts> = {
     /** A URL string. This string can be an absolute path or a relative path depending
@@ -80,5 +84,9 @@ declare type ExternalImageProps<GenericLoaderOpts> = SetRequired<HtmlImageProps,
      * 'data' shouldn't be passed when 'src' is used.
      */
     data?: never;
+    /**
+     * An array of pixel widths to generate a srcset. For example, `[300, 600, 800]`.
+     */
+    widths?: HtmlImageProps['width'][];
 };
 export {};

package/dist/esnext/components/Image/Image.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { getShopifyImageDimensions, shopifyImageLoader } from '../../utilities';
+import { getShopifyImageDimensions, shopifyImageLoader, addImageSizeParametersToUrl, } from '../../utilities';
 export function Image(props) {
     if (!props.data && !props.src) {
         throw new Error(`<Image/>: requires either a 'data' or 'src' prop.`);
     }
-    if (__DEV__ && props.data && props.src) {
+    if (__HYDROGEN_DEV__ && props.data && props.src) {
         console.warn(`<Image/>: using both 'data' and 'src' props is not supported; using the 'data' prop by default`);
     }
     if (props.data) {
@@ -14,16 +14,16 @@ export function Image(props) {
         return React.createElement(ExternalImage, { ...props });
     }
 }
-function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoader, loaderOptions, ...rest }) {
-    var _a, _b, _c, _d, _e, _f;
+function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoader, loaderOptions, widths, ...rest }) {
+    var _a, _b, _c, _d, _e, _f, _g;
     if (!data.url) {
         throw new Error(`<Image/>: the 'data' prop requires the 'url' property`);
     }
-    if (__DEV__ && !data.altText && !rest.alt) {
+    if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {
         console.warn(`<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. ${`Image: ${(_a = data.id) !== null && _a !== void 0 ? _a : data.url}`}`);
     }
     const { width: finalWidth, height: finalHeight } = getShopifyImageDimensions(data, loaderOptions);
-    if ((__DEV__ && !finalWidth) || !finalHeight) {
+    if ((__HYDROGEN_DEV__ && !finalWidth) || !finalHeight) {
         console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. ${`Image: ${(_b = data.id) !== null && _b !== void 0 ? _b : data.url}`}`);
     }
     let finalSrc = data.url;
@@ -38,17 +38,32 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
             throw new Error(`<Image/>: 'loader' did not return a valid string. ${`Image: ${(_c = data.id) !== null && _c !== void 0 ? _c : data.url}`}`);
         }
     }
+    // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width
+    // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original
+    const maxWidth = width && finalWidth && width < finalWidth ? width : finalWidth;
+    const finalSrcset = (_d = rest.srcSet) !== null && _d !== void 0 ? _d : internalImageSrcSet({
+        ...loaderOptions,
+        widths,
+        src: data.url,
+        width: maxWidth,
+        loader,
+    });
     /* eslint-disable hydrogen/prefer-image-component */
-    return (React.createElement("img", { id: (_d = data.id) !== null && _d !== void 0 ? _d : '', alt: (_f = (_e = data.altText) !== null && _e !== void 0 ? _e : rest.alt) !== null && _f !== void 0 ? _f : '', loading: loading !== null && loading !== void 0 ? loading : 'lazy', ...rest, src: finalSrc, width: finalWidth !== null && finalWidth !== void 0 ? finalWidth : undefined, height: finalHeight !== null && finalHeight !== void 0 ? finalHeight : undefined }));
+    return (React.createElement("img", { id: (_e = data.id) !== null && _e !== void 0 ? _e : '', alt: (_g = (_f = data.altText) !== null && _f !== void 0 ? _f : rest.alt) !== null && _g !== void 0 ? _g : '', loading: loading !== null && loading !== void 0 ? loading : 'lazy', ...rest, src: finalSrc, width: finalWidth !== null && finalWidth !== void 0 ? finalWidth : undefined, height: finalHeight !== null && finalHeight !== void 0 ? finalHeight : undefined, srcSet: finalSrcset }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
-function ExternalImage({ src, width, height, alt, loader, loaderOptions, loading, ...rest }) {
+function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths, loading, ...rest }) {
+    var _a, _b;
     if (!width || !height) {
         throw new Error(`<Image/>: when 'src' is provided, 'width' and 'height' are required and need to be valid values (i.e. greater than zero). Provided values: 'src': ${src}, 'width': ${width}, 'height': ${height}`);
     }
-    if (__DEV__ && !alt) {
+    if (__HYDROGEN_DEV__ && !alt) {
         console.warn(`<Image/>: when 'src' is provided, 'alt' should also be provided. ${`Image: ${src}`}`);
     }
+    if (widths &&
+        Array.isArray(widths) &&
+        widths.some((size) => isNaN(size)))
+        throw new Error(`<Image/>: the 'widths' property must be an array of numbers`);
     let finalSrc = src;
     if (loader) {
         finalSrc = loader({ src, width, height, ...loaderOptions });
@@ -56,7 +71,40 @@ function ExternalImage({ src, width, height, alt, loader, loaderOptions, loading
             throw new Error(`<Image/>: 'loader' did not return a valid string`);
         }
     }
+    let finalSrcset = (_a = rest.srcSet) !== null && _a !== void 0 ? _a : undefined;
+    if (!finalSrcset && loader && widths) {
+        // Height is a requirement in the LoaderProps, so  to keep the aspect ratio, we must determine the height based on the default values
+        const heightToWidthRatio = parseInt(height) / parseInt(width);
+        finalSrcset = (_b = widths === null || widths === void 0 ? void 0 : widths.map((width) => parseInt(width, 10))) === null || _b === void 0 ? void 0 : _b.map((width) => `${loader({
+            ...loaderOptions,
+            src,
+            width,
+            height: Math.floor(width * heightToWidthRatio),
+        })} ${width}w`).join(', ');
+    }
     /* eslint-disable hydrogen/prefer-image-component */
-    return (React.createElement("img", { ...rest, src: finalSrc, width: width, height: height, alt: alt !== null && alt !== void 0 ? alt : '', loading: loading !== null && loading !== void 0 ? loading : 'lazy' }));
+    return (React.createElement("img", { ...rest, src: finalSrc, width: width, height: height, alt: alt !== null && alt !== void 0 ? alt : '', loading: loading !== null && loading !== void 0 ? loading : 'lazy', srcSet: finalSrcset }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
+// based on the default width sizes used by the Shopify liquid HTML tag img_tag plus a 2560 width to account for 2k resolutions
+// reference: https://shopify.dev/api/liquid/filters/html-filters#image_tag
+const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];
+function internalImageSrcSet({ src, width, crop, scale, widths, loader, }) {
+    const hasCustomWidths = widths && Array.isArray(widths);
+    if (hasCustomWidths && widths.some((size) => isNaN(size)))
+        throw new Error(`<Image/>: the 'widths' must be an array of numbers`);
+    let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;
+    if (!hasCustomWidths &&
+        width &&
+        width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1])
+        setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);
+    const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
+    return setSizes
+        .map((size) => `${srcGenerator({
+        src,
+        width: size,
+        crop,
+        scale,
+    })} ${size}w`)
+        .join(', ');
+}

package/dist/esnext/components/Link/Link.client.d.ts

@@ -10,6 +10,8 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
     reloadDocument?: boolean;
     /** Whether to prefetch the link source when the user signals intent. Defaults to `true`. For more information, refer to [Prefetching a link source](https://shopify.dev/custom-storefronts/hydrogen/framework/routes#prefetching-a-link-source). */
     prefetch?: boolean;
+    /** Whether to emulate natural browser behavior and restore scroll position on navigation. Defaults to `true`. */
+    scroll?: boolean;
 }
 /**
  * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all

package/dist/esnext/components/Link/Link.client.js

@@ -18,7 +18,7 @@ export const Link = React.forwardRef(function Link(props, ref) {
      */
     const [shouldPrefetch, setShouldPrefetch] = useState(false);
     const [maybePrefetch, setMaybePrefetch] = useState(false);
-    const { reloadDocument, target, replace: _replace, to, onClick, clientState, prefetch = true, } = props;
+    const { reloadDocument, target, replace: _replace, to, onClick, clientState, prefetch = true, scroll = true, } = props;
     const internalClick = useCallback((e) => {
         if (onClick)
             onClick(e);
@@ -32,18 +32,20 @@ export const Link = React.forwardRef(function Link(props, ref) {
             const replace = !!_replace || createPath(location) === createPath({ pathname: to });
             navigate(to, {
                 replace,
+                scroll,
                 clientState,
             });
         }
     }, [
+        onClick,
         reloadDocument,
         target,
         _replace,
-        to,
-        clientState,
-        onClick,
         location,
+        to,
         navigate,
+        clientState,
+        scroll,
     ]);
     const signalPrefetchIntent = () => {
         /**
@@ -91,6 +93,7 @@ export const Link = React.forwardRef(function Link(props, ref) {
                 'clientState',
                 'reloadDocument',
                 'prefetch',
+                'scroll',
             ]), ref: ref, onClick: internalClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, href: props.to }, props.children),
         shouldPrefetch && React.createElement(Prefetch, { pathname: to })));
 });

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.js

@@ -2,7 +2,7 @@ import React from 'react';
 import LocalizationClientProvider from './LocalizationClientProvider.client';
 import { useShop } from '../../foundation/useShop';
 import { useShopQuery } from '../../hooks/useShopQuery';
-import { CacheDays } from '../../framework/CachingStrategy';
+import { CacheDays } from '../../foundation/Cache/strategies';
 import { useSession } from '../../foundation/useSession/useSession';
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's

package/dist/esnext/components/ProductOptionsProvider/ProductOptionsProvider.client.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { Product, ProductVariant as ProductVariantType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+declare type InitialVariantId = ProductVariantType['id'] | null;
+interface ProductOptionsProviderProps {
+    /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
+    data: PartialDeep<Product>;
+    /** A `ReactNode` element. */
+    children: React.ReactNode;
+    /**
+     * The initially selected variant.
+     * The following logic applies to `initialVariantId`:
+     * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.
+     * 2. If `initialVariantId` is provided but is `null`, then no variant is used.
+     * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.
+     * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.
+     */
+    initialVariantId?: InitialVariantId;
+}
+export declare function ProductOptionsProvider({ children, data: product, initialVariantId: explicitVariantId, }: ProductOptionsProviderProps): JSX.Element;
+export {};

package/dist/esnext/components/ProductOptionsProvider/ProductOptionsProvider.client.js

@@ -0,0 +1,140 @@
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import { ProductOptionsContext } from './context';
+import { getSelectedVariant, getOptions, } from '../../hooks/useProductOptions/helpers';
+export function ProductOptionsProvider({ children, data: product, initialVariantId: explicitVariantId, }) {
+    var _a, _b;
+    // The flattened variants
+    const variants = useMemo(() => { var _a; return (_a = product.variants) === null || _a === void 0 ? void 0 : _a.nodes; }, [(_a = product.variants) === null || _a === void 0 ? void 0 : _a.nodes]);
+    if (!isProductVariantArray(variants)) {
+        throw new Error(`<ProductOptionsProvider/> requires product.variants.nodes`);
+    }
+    // All the options available for a product, based on all the variants
+    const options = useMemo(() => getOptions(variants), [variants]);
+    /**
+     * Track the selectedVariant within the provider.
+     */
+    const [selectedVariant, setSelectedVariant] = useState(() => getVariantBasedOnIdProp(explicitVariantId, variants));
+    /**
+     * Track the selectedOptions within the provider. If a `initialVariantId`
+     * is passed, use that to select initial options.
+     */
+    const [selectedOptions, setSelectedOptions] = useState(() => getSelectedOptions(selectedVariant));
+    /**
+     * When the initialVariantId changes, we need to make sure we
+     * update the selected variant and selected options. If not,
+     * then the selected variant and options will reference incorrect
+     * values.
+     */
+    useEffect(() => {
+        const newSelectedVariant = getVariantBasedOnIdProp(explicitVariantId, variants);
+        setSelectedVariant(newSelectedVariant);
+        setSelectedOptions(getSelectedOptions(newSelectedVariant));
+    }, [explicitVariantId, variants]);
+    /**
+     * Allow the developer to select an option.
+     */
+    const setSelectedOption = useCallback((name, value) => {
+        setSelectedOptions((selectedOptions) => ({
+            ...selectedOptions,
+            [name]: value,
+        }));
+    }, [setSelectedOptions]);
+    const isOptionInStock = useCallback((option, value) => {
+        var _a;
+        const proposedVariant = getSelectedVariant(variants, {
+            ...selectedOptions,
+            ...{ [option]: value },
+        });
+        return (_a = proposedVariant === null || proposedVariant === void 0 ? void 0 : proposedVariant.availableForSale) !== null && _a !== void 0 ? _a : true;
+    }, [selectedOptions, variants]);
+    const sellingPlanGroups = useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = product.sellingPlanGroups) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.map((sellingPlanGroup) => {
+            var _a, _b;
+            return ({
+                ...sellingPlanGroup,
+                sellingPlans: (_b = (_a = sellingPlanGroup === null || sellingPlanGroup === void 0 ? void 0 : sellingPlanGroup.sellingPlans) === null || _a === void 0 ? void 0 : _a.nodes) !== null && _b !== void 0 ? _b : [],
+            });
+        });
+    }, [(_b = product.sellingPlanGroups) === null || _b === void 0 ? void 0 : _b.nodes]);
+    /**
+     * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`
+     * is passed, use that as an initial value. Look it up from the `selectedVariant`, since
+     * that is also a requirement.
+     */
+    const [selectedSellingPlan, setSelectedSellingPlan] = useState(undefined);
+    const selectedSellingPlanAllocation = useMemo(() => {
+        var _a, _b;
+        if (!selectedVariant || !selectedSellingPlan) {
+            return;
+        }
+        if (!((_a = selectedVariant.sellingPlanAllocations) === null || _a === void 0 ? void 0 : _a.nodes)) {
+            throw new Error(`<ProductOptionsProvider/>: You must include 'sellingPlanAllocations.nodes' in your variants in order to calculate selectedSellingPlanAllocation`);
+        }
+        return (_b = selectedVariant.sellingPlanAllocations.nodes) === null || _b === void 0 ? void 0 : _b.find((allocation) => { var _a; return ((_a = allocation === null || allocation === void 0 ? void 0 : allocation.sellingPlan) === null || _a === void 0 ? void 0 : _a.id) === selectedSellingPlan.id; });
+    }, [selectedVariant, selectedSellingPlan]);
+    const value = useMemo(() => ({
+        variants,
+        variantsConnection: product.variants,
+        options,
+        selectedVariant,
+        setSelectedVariant,
+        selectedOptions,
+        setSelectedOption,
+        setSelectedOptions,
+        isOptionInStock,
+        selectedSellingPlan,
+        setSelectedSellingPlan,
+        selectedSellingPlanAllocation,
+        sellingPlanGroups,
+        sellingPlanGroupsConnection: product.sellingPlanGroups,
+    }), [
+        isOptionInStock,
+        options,
+        product.sellingPlanGroups,
+        product.variants,
+        selectedOptions,
+        selectedSellingPlan,
+        selectedSellingPlanAllocation,
+        selectedVariant,
+        sellingPlanGroups,
+        setSelectedOption,
+        variants,
+    ]);
+    return (React.createElement(ProductOptionsContext.Provider, { value: value }, children));
+}
+function getVariantBasedOnIdProp(explicitVariantId, variants) {
+    // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above
+    // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.
+    if (explicitVariantId) {
+        const foundVariant = variants.find((variant) => (variant === null || variant === void 0 ? void 0 : variant.id) === explicitVariantId);
+        if (!foundVariant) {
+            console.warn(`<ProductOptionsProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`);
+        }
+        return foundVariant;
+    }
+    // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.
+    if (explicitVariantId === null) {
+        return null;
+    }
+    // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.
+    // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.
+    if (explicitVariantId === undefined) {
+        return variants.find((variant) => variant === null || variant === void 0 ? void 0 : variant.availableForSale) || variants[0];
+    }
+}
+function getSelectedOptions(selectedVariant) {
+    return (selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.selectedOptions)
+        ? selectedVariant.selectedOptions.reduce((memo, optionSet) => {
+            var _a, _b;
+            memo[(_a = optionSet === null || optionSet === void 0 ? void 0 : optionSet.name) !== null && _a !== void 0 ? _a : ''] = (_b = optionSet === null || optionSet === void 0 ? void 0 : optionSet.value) !== null && _b !== void 0 ? _b : '';
+            return memo;
+        }, {})
+        : {};
+}
+function isProductVariantArray(maybeVariantArray) {
+    if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {
+        return false;
+    }
+    return true;
+}

package/dist/esnext/components/ProductOptionsProvider/context.d.ts

@@ -0,0 +1,2 @@
+import { ProductOptionsHookValue } from '../../hooks';
+export declare const ProductOptionsContext: import("react").Context<ProductOptionsHookValue | null>;

package/dist/esnext/components/{ProductProvider → ProductOptionsProvider}/context.js

@@ -1,3 +1,2 @@
 import { createContext } from 'react';
-export const ProductContext = createContext(null);
 export const ProductOptionsContext = createContext(null);

package/dist/esnext/components/ProductOptionsProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { ProductOptionsProvider } from './ProductOptionsProvider.client';
+export { useProductOptions } from '../../hooks/useProductOptions/useProductOptions.client';

package/dist/esnext/components/ProductOptionsProvider/index.js

@@ -0,0 +1,2 @@
+export { ProductOptionsProvider } from './ProductOptionsProvider.client';
+export { useProductOptions } from '../../hooks/useProductOptions/useProductOptions.client';