@shopify/hydrogen 0.22.1 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,383 @@
 # Changelog
 
+## 0.25.0
+
+### Minor Changes
+
+- [#1570](https://github.com/Shopify/hydrogen/pull/1570) [`36f26e54`](https://github.com/Shopify/hydrogen/commit/36f26e54a0b136fe4b21807756969e592934c9f2) Thanks [@frehner](https://github.com/frehner)! - `<Image/>` now takes into account a specific order for determining the width and height.
+
+  1. `loaderOptions`'s width/height
+  2. width/height bare props
+  3. `data`'s width/height
+
+  `getShopifyImageDimensions()` was also updated to handle this logic.
+
+* [#1506](https://github.com/Shopify/hydrogen/pull/1506) [`58d6ef55`](https://github.com/Shopify/hydrogen/commit/58d6ef55be2929c9a1680a6a372bb2e5fdfb7ee6) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Hydrogen now supports full-page caching out of the box. Previously, Hydrogen relied on the network edge to provide full-page caching for dynamic responses (HTML).
+
+- [#1346](https://github.com/Shopify/hydrogen/pull/1346) [`01814369`](https://github.com/Shopify/hydrogen/commit/018143693f96b7a200258665de570a9369ae8e65) Thanks [@lordofthecactus](https://github.com/lordofthecactus)! - Add `onClick` and `buttonRef` props to `AddToCartButton`, `BuyNowButton` and `CartLineQuantityAdjustButton`
+
+* [#1523](https://github.com/Shopify/hydrogen/pull/1523) [`4ef2e5b9`](https://github.com/Shopify/hydrogen/commit/4ef2e5b93cd537a213334211113c224194d9dd68) Thanks [@blittle](https://github.com/blittle)! - We've simplified the built-in Hydrogen caching strategies. Instead of `CacheSeconds`, `CacheMinutes`, `CacheHours`, `CacheDays`, `CacheMonths`, and `NoStore`, there is no simply `CacheLong`, `CacheShort`, and `CacheNone`. Please remember that you can [build your own caching strategies](https://shopify.dev/custom-storefronts/hydrogen/framework/cache#build-your-own-caching-strategies).
+
+- [#1513](https://github.com/Shopify/hydrogen/pull/1513) [`8d67b559`](https://github.com/Shopify/hydrogen/commit/8d67b559e8d59d02ca353ec43fb5b2b3ff2f5961) Thanks [@frandiox](https://github.com/frandiox)! - **Breaking change:** We are starting to use [`exports` property in `package.json`](https://nodejs.org/api/packages.html#package-entry-points) to list all the entry points in this package.
+
+  This might incur breaking changes in some rare cases when importing private properties from Hydrogen `dist` files. Notice that we **discourage** doing so for anything that is not publicly documented but, if your app was relying on some private properties, then this might help:
+
+  ```diff
+  -import {xyz} from '@shopify/hydrogen/dist/esnext/<internal-path>';
+  +import {xyz} from '@shopify/hydrogen/<internal-path>';
+  ```
+
+  Aside from that, it is recommended that TypeScript projects update the `tsconfig.json` file to use `compilerOptions.moduleResolution: "node16"` to make sure Hydrogen types are loaded in your editor.
+  For JavaScript projects, create or edit `<root>/jsconfig.json` file with the following information to improve typings:
+
+  ```json
+  {
+    "compilerOptions": {
+      "target": "es2020",
+      "module": "esnext",
+      "moduleResolution": "node16",
+      "lib": ["dom", "dom.iterable", "scripthost", "es2020"],
+      "jsx": "react",
+      "types": ["vite/client"]
+    },
+    "exclude": ["node_modules", "dist"],
+    "include": ["**/*.js", "**/*.jsx"]
+  }
+  ```
+
+* [#1528](https://github.com/Shopify/hydrogen/pull/1528) [`72d21b87`](https://github.com/Shopify/hydrogen/commit/72d21b87e48a682794889610741f03560bce0be7) Thanks [@frehner](https://github.com/frehner)! - Metafields have changed in Storefront API `2022-07`. We updated our code to work with that update, which means that the following changes will **only work if you're using `2022-07` or newer.**
+
+  ## Metafields changes
+
+  ### Storefront API `2022-07`
+
+  Metafields have changed how you access them in the Storefront API. See [the release notes](https://shopify.dev/api/release-notes/2022-07) for more details. In order to support the new way of querying metafields, Hydrogen has made the following updates:
+
+  ### `<Metafield/>`
+
+  Previously, the `<Metafield/>` component expected you to use `useParseMetafields()` before passing a metafield to it.
+
+  Now, `<Metafield/>` will use `parseMetafield()` itself so that you don't have to. However, this does mean that if you use `parseMetafield()` and then pass it to `<Metafield/>`, it will likely break because it will try to parse your metafield's value a second time.
+
+  ### `useParsedMetafields()` and `parseMetafield()`
+
+  Deprecated `useParsedMetafields()` in favor of `parseMetafield()`. `parseMetafield()` takes in a single metafield and returns a new object, and importantly it can be used on both the client _and_ the server.
+
+  If you need to memoize the value on the client, then you can do so using `React.memo`:
+
+  ```tsx
+  import {useMemo} from 'react';
+  import {parseMetafield} from '@shopify/hydrogen'x
+
+  function MyComponent() {
+    const parsedMetafield = useMemo(() => parseMetafield(metafield), [metafield]);
+  }
+  ```
+
+- [#1517](https://github.com/Shopify/hydrogen/pull/1517) [`68b8185e`](https://github.com/Shopify/hydrogen/commit/68b8185e74805a6453e246f01ce69a38988078ef) Thanks [@frandiox](https://github.com/frandiox)! - **Breaking change:** The utilities used in `hydrogen.config.js` file are now exported from `@shopiy/hydrogen/config` instead of `@shopify/hydrogen`:
+
+  ```diff
+  -import {defineConfig} from '@shopify/hydrogen/config';
+  import {
+  + defineConfig,
+    CookieSessionStorage,
+    PerformanceMetricsServerAnalyticsConnector,
+    ShopifyServerAnalyticsConnector,
+  -} from '@shopify/hydrogen';
+  +} from '@shopify/hydrogen/config'
+
+  export default defineConfig({
+    shopify: {/* ... */},
+    session: CookieSessionStorage('__session', {
+      path: '/',
+      /* ... */
+    }),
+    serverAnalyticsConnectors: [
+      PerformanceMetricsServerAnalyticsConnector,
+      ShopifyServerAnalyticsConnector,
+    ],
+  });
+  ```
+
+### Patch Changes
+
+- [#1494](https://github.com/Shopify/hydrogen/pull/1494) [`3b549439`](https://github.com/Shopify/hydrogen/commit/3b549439bae1ec43ae9171744c576c53d8e8f6f1) Thanks [@jplhomer](https://github.com/jplhomer)! - Update `flattenConnection` to accept `nodes` and `edges` payloads
+
+* [#1579](https://github.com/Shopify/hydrogen/pull/1579) [`2f75247c`](https://github.com/Shopify/hydrogen/commit/2f75247c071253ae27f6070a066897b5758a6a4f) Thanks [@frandiox](https://github.com/frandiox)! - Support renaming client component exports in intermediate/facade files.
+
+- [#1562](https://github.com/Shopify/hydrogen/pull/1562) [`d38f6413`](https://github.com/Shopify/hydrogen/commit/d38f6413361d1ecb49c52d8389547d2b064081f7) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Add storefront id to useShopQuery calls when available
+
+* [#1593](https://github.com/Shopify/hydrogen/pull/1593) [`ae35b70b`](https://github.com/Shopify/hydrogen/commit/ae35b70b0847e1a6270d1c63d2968a3578442e66) Thanks [@juanpprieto](https://github.com/juanpprieto)! - Ensure the effect that updates the `cart.buyerIdenity.countryCode` is run when `countyCode` prop changes
+
+- [#1504](https://github.com/Shopify/hydrogen/pull/1504) [`cc453242`](https://github.com/Shopify/hydrogen/commit/cc4532426509fd216f1bc036d5a095a18812b0cb) Thanks [@jplhomer](https://github.com/jplhomer)! - Fix read-only request.status in worker environments.
+
+* [#1548](https://github.com/Shopify/hydrogen/pull/1548) [`923cb140`](https://github.com/Shopify/hydrogen/commit/923cb140b44fe989388f8754a8ca88bbfc68ab71) Thanks [@cartogram](https://github.com/cartogram)! - Add new devTools interface for performance, settings and graphQL tracking
+
+- [#1375](https://github.com/Shopify/hydrogen/pull/1375) [`217b5f23`](https://github.com/Shopify/hydrogen/commit/217b5f23613da794bb6879ab0c897b66ef6204cf) Thanks [@blittle](https://github.com/blittle)! - Add a built-in healthcheck route available at `/__health`. It responds with a 200 and no body. Also suppresses server logs for built-in routes like healthcheck and analytics.
+
+* [#1541](https://github.com/Shopify/hydrogen/pull/1541) [`4fde81f9`](https://github.com/Shopify/hydrogen/commit/4fde81f9d9ee739a6fbe5a8a903d3e6901144bf0) Thanks [@frandiox](https://github.com/frandiox)! - Fix support for latest React@experimental version.
+
+- [#1497](https://github.com/Shopify/hydrogen/pull/1497) [`3364225f`](https://github.com/Shopify/hydrogen/commit/3364225ff62d283893643ea28c0135ff22af1dff) Thanks [@blittle](https://github.com/blittle)! - Improve waterfall detection
+
+  1. Show a summary in dev mode with instructions on getting details
+  2. Only show the waterfall warning the second time the page is loaded
+  3. Don't show the waterfall warning on preloaded queries
+
+* [#1519](https://github.com/Shopify/hydrogen/pull/1519) [`d54b1072`](https://github.com/Shopify/hydrogen/commit/d54b10725b635f4531e94b9391cfd56f31a1d2e5) Thanks [@frandiox](https://github.com/frandiox)! - Improve CPU performance of the `useMoney` hook.
+
+- [#1518](https://github.com/Shopify/hydrogen/pull/1518) [`f0b69477`](https://github.com/Shopify/hydrogen/commit/f0b6947762acdfd617c9ccd34615a36a64ab36f2) Thanks [@frandiox](https://github.com/frandiox)! - Compile code to latest supported ES version in workers and Node.
+
+* [#1571](https://github.com/Shopify/hydrogen/pull/1571) [`accdc78a`](https://github.com/Shopify/hydrogen/commit/accdc78a13cc1557826509545a322bfa04e6e288) Thanks [@jplhomer](https://github.com/jplhomer)! - Upgrade Hydrogen to React v18.2. To update your app, run `yarn add @shopify/hydrogen@latest react@latest react-dom@latest`.
+
+- [#1578](https://github.com/Shopify/hydrogen/pull/1578) [`f5290393`](https://github.com/Shopify/hydrogen/commit/f5290393264c523045cab4082495e81ec72d576d) Thanks [@frandiox](https://github.com/frandiox)! - Fix an issue where newly imported client components were not found in the browser.
+
+* [#1556](https://github.com/Shopify/hydrogen/pull/1556) [`06f3d174`](https://github.com/Shopify/hydrogen/commit/06f3d174ff286ece0a7175ac7c2ae37e574f73b0) Thanks [@blittle](https://github.com/blittle)! - Add support for `Request.formData()` within API Routes for Node 16-17. Example:
+
+  ```ts
+  export async function api(request) {
+    const formData = await request.formData();
+
+    const username = formData.get('user');
+    const password = formData.get('pass');
+
+    ...
+  }
+  ```
+
+## 0.24.0
+
+### Minor Changes
+
+- [#1489](https://github.com/Shopify/hydrogen/pull/1489) [`e2ee2d45`](https://github.com/Shopify/hydrogen/commit/e2ee2d4575613ae34727de9c1a6280904bb2e3ff) Thanks [@blittle](https://github.com/blittle)! - In an effort to be performant by default, the [preloaded queries](https://shopify.dev/custom-storefronts/hydrogen/framework/preloaded-queries) are turned on by default when caching is also enabled. By default, each query has caching enabled too, so `preload` will on universally by default.
+
+* [#1237](https://github.com/Shopify/hydrogen/pull/1237) [`356e75f3`](https://github.com/Shopify/hydrogen/commit/356e75f351c04ff393e996c34632005331ec0872) Thanks [@frehner](https://github.com/frehner)! - Updated Cart queries in two ways, one of which requires you to be using Storefront API `2022-07`:
+
+  1. [`CartLine`](https://shopify.dev/api/storefront/2022-04/objects/CartLine#fields) now uses [`CartLineEstimatedCost`'s `totalAmount`](https://shopify.dev/api/storefront/2022-04/objects/CartLineEstimatedCost) field for calculating the Line's total, instead of doing it manually.
+  2. Cart now uses [`totalQuantity`](https://shopify.dev/api/storefront/2022-07/objects/Cart#field-cart-totalquantity) for calculating how many items are in the cart, instead of doing this manually. **Note that this feature is only available in Storefront API `2022-07` and newer.**
+
+### Patch Changes
+
+- [#1473](https://github.com/Shopify/hydrogen/pull/1473) [`a7f3b4bf`](https://github.com/Shopify/hydrogen/commit/a7f3b4bfe0d66fb0440dff3d641a181372de313a) Thanks [@frandiox](https://github.com/frandiox)! - Reduce CPU consumption when rendering React Server Components.
+
+* [#1453](https://github.com/Shopify/hydrogen/pull/1453) [`84b9e6d3`](https://github.com/Shopify/hydrogen/commit/84b9e6d3516a74f94fab691d6ff7605623351f1e) Thanks [@jplhomer](https://github.com/jplhomer)! - Update `setSelectedVariant` types to allow `null` to be passed.
+
+- [#1484](https://github.com/Shopify/hydrogen/pull/1484) [`990bfd8b`](https://github.com/Shopify/hydrogen/commit/990bfd8b928425f2685901c1a02b686354d18d4d) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Fix ClientAnalytics losing subscriber object when passed as a param
+
+* [#1509](https://github.com/Shopify/hydrogen/pull/1509) [`05081b01`](https://github.com/Shopify/hydrogen/commit/05081b01283c023e9c751c04ed496003daf47091) Thanks [@jplhomer](https://github.com/jplhomer)! - Fix `<BuyNowButton>` so it can be rendered without being nested in a `<CartProvider>`
+
+- [#1469](https://github.com/Shopify/hydrogen/pull/1469) [`07d45290`](https://github.com/Shopify/hydrogen/commit/07d452905492bfa1bd58c681b8d56407fdc4716b) Thanks [@frandiox](https://github.com/frandiox)! - Fix path resolution when using aliases in server components.
+
+* [#1471](https://github.com/Shopify/hydrogen/pull/1471) [`5b4e08df`](https://github.com/Shopify/hydrogen/commit/5b4e08df97dd2343452b0d1f7ff59ac5bbf98d32) Thanks [@frandiox](https://github.com/frandiox)! - Added an experimental hook `useRequestContext` that provides server-only context for third party integrations.
+
+- [#1486](https://github.com/Shopify/hydrogen/pull/1486) [`a31e007d`](https://github.com/Shopify/hydrogen/commit/a31e007dbc2a1a6ce12e39ffc3f63f45e90abfa7) Thanks [@frehner](https://github.com/frehner)! - Fix `<ProductOptionsProvider/>`'s `setSelectedOptions()` function to update the `selectedVariant` as well
+
+## 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.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { BaseButtonProps } from '../BaseButton';
 interface AddToCartButtonProps {
     /** An array of cart line attributes that belong to the item being added to the cart. */
     attributes?: {
@@ -9,15 +9,12 @@ interface AddToCartButtonProps {
     variantId?: string | null;
     /** The item quantity. */
     quantity?: number;
-    /** Any ReactNode elements. */
-    children: ReactNode;
     /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */
     accessibleAddingToCartLabel?: string;
 }
-declare type PropsWeControl = 'onClick';
 /**
  * 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 declare function AddToCartButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & AddToCartButtonProps): JSX.Element;
+export declare function AddToCartButton(props: AddToCartButtonProps & BaseButtonProps): JSX.Element;
 export {};

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

@@ -1,20 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useCart } from '../CartProvider';
-import { useProduct } from '../ProductProvider';
+import { useProductOptions } from '../ProductOptionsProvider';
+import { BaseButton } from '../BaseButton';
 /**
  * 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;
     const [addingItem, setAddingItem] = useState(false);
-    const { variantId: explicitVariantId, quantity = 1, attributes, children, accessibleAddingToCartLabel, ...passthroughProps } = props;
+    const { variantId: explicitVariantId, quantity = 1, attributes, onClick, 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 = explicitVariantId ?? selectedVariant?.id ?? '';
     const disabled = explicitVariantId === null ||
         variantId === '' ||
-        (product === null || product === void 0 ? void 0 : product.selectedVariant) === null ||
+        selectedVariant === null ||
         addingItem ||
         passthroughProps.disabled;
     useEffect(() => {
@@ -22,17 +22,18 @@ export function AddToCartButton(props) {
             setAddingItem(false);
         }
     }, [status, addingItem]);
+    const handleAddItem = useCallback(() => {
+        setAddingItem(true);
+        linesAdd([
+            {
+                quantity,
+                merchandiseId: variantId,
+                attributes,
+            },
+        ]);
+    }, [linesAdd, quantity, variantId, attributes]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("button", { ...passthroughProps, disabled: disabled, onClick: () => {
-                setAddingItem(true);
-                linesAdd([
-                    {
-                        quantity,
-                        merchandiseId: variantId,
-                        attributes,
-                    },
-                ]);
-            } }, children),
+        React.createElement(BaseButton, { ...passthroughProps, disabled: disabled, onClick: onClick, defaultOnClick: handleAddItem }, children),
         accessibleAddingToCartLabel ? (React.createElement("p", { style: {
                 position: 'absolute',
                 width: '1px',

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

@@ -0,0 +1,14 @@
+import React, { ReactNode, Ref } from 'react';
+interface Props {
+    /** Any ReactNode elements. */
+    children: ReactNode;
+    /** Click event handler. Default behaviour triggers unless prevented */
+    onClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
+    /** A default onClick behaviour */
+    defaultOnClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
+    /** A ref to the underlying button */
+    buttonRef?: Ref<HTMLButtonElement>;
+}
+export declare type BaseButtonProps = Omit<JSX.IntrinsicElements['button'], 'onClick' | 'children'> & Props;
+export declare function BaseButton({ onClick, defaultOnClick, children, buttonRef, ...passthroughProps }: BaseButtonProps): JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useCallback } from 'react';
+export function BaseButton({ onClick, defaultOnClick, children, buttonRef, ...passthroughProps }) {
+    const handleOnClick = useCallback((event) => {
+        if (onClick) {
+            const clickShouldContinue = onClick(event);
+            if ((typeof clickShouldContinue === 'boolean' &&
+                clickShouldContinue === false) ||
+                event?.defaultPrevented)
+                return;
+        }
+        defaultOnClick?.(event);
+    }, [defaultOnClick, onClick]);
+    return (React.createElement("button", { ...passthroughProps, ref: buttonRef, onClick: handleOnClick }, children));
+}

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

@@ -0,0 +1 @@
+export { BaseButton, BaseButtonProps } from './BaseButton.client';

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

@@ -0,0 +1 @@
+export { BaseButton } from './BaseButton.client';

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { BaseButtonProps } from '../BaseButton';
 interface BuyNowButtonProps {
     /** The item quantity. Defaults to 1. */
     quantity?: number;
@@ -9,10 +9,7 @@ interface BuyNowButtonProps {
         key: string;
         value: string;
     }[];
-    /** Any `ReactNode` elements. */
-    children: ReactNode;
 }
-declare type PropsWeControl = 'onClick';
 /** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
-export declare function BuyNowButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & BuyNowButtonProps): JSX.Element;
+export declare function BuyNowButton(props: BuyNowButtonProps & BaseButtonProps): JSX.Element;
 export {};

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

@@ -1,10 +1,11 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useInstantCheckout } from '../CartProvider';
+import { BaseButton } from '../BaseButton';
 /** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
 export function BuyNowButton(props) {
     const { createInstantCheckout, checkoutUrl } = useInstantCheckout();
     const [loading, setLoading] = useState(false);
-    const { quantity, variantId, attributes, children, ...passthroughProps } = props;
+    const { quantity, variantId, onClick, attributes, children, ...passthroughProps } = props;
     useEffect(() => {
         if (checkoutUrl) {
             window.location.href = checkoutUrl;
@@ -15,12 +16,12 @@ export function BuyNowButton(props) {
         createInstantCheckout({
             lines: [
                 {
-                    quantity: quantity !== null && quantity !== void 0 ? quantity : 1,
+                    quantity: quantity ?? 1,
                     merchandiseId: variantId,
                     attributes,
                 },
             ],
         });
-    }, [setLoading, createInstantCheckout, quantity, variantId, attributes]);
-    return (React.createElement("button", { disabled: loading !== null && loading !== void 0 ? loading : passthroughProps.disabled, ...passthroughProps, onClick: handleBuyNow }, children));
+    }, [createInstantCheckout, quantity, variantId, attributes]);
+    return (React.createElement(BaseButton, { disabled: loading ?? passthroughProps.disabled, ...passthroughProps, onClick: onClick, defaultOnClick: handleBuyNow }, children));
 }

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

@@ -11,16 +11,16 @@ export function CartEstimatedCost(props) {
     const { amountType = 'total', children, ...passthroughProps } = props;
     let amount;
     if (amountType == 'total') {
-        amount = estimatedCost === null || estimatedCost === void 0 ? void 0 : estimatedCost.totalAmount;
+        amount = estimatedCost?.totalAmount;
     }
     else if (amountType == 'subtotal') {
-        amount = estimatedCost === null || estimatedCost === void 0 ? void 0 : estimatedCost.subtotalAmount;
+        amount = estimatedCost?.subtotalAmount;
     }
     else if (amountType == 'tax') {
-        amount = estimatedCost === null || estimatedCost === void 0 ? void 0 : estimatedCost.totalTaxAmount;
+        amount = estimatedCost?.totalTaxAmount;
     }
     else if (amountType == 'duty') {
-        amount = estimatedCost === null || estimatedCost === void 0 ? void 0 : estimatedCost.totalDutyAmount;
+        amount = estimatedCost?.totalDutyAmount;
     }
     if (amount == null) {
         return null;

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

@@ -8,14 +8,11 @@ import { Money } from '../Money';
 export function CartLinePrice(props) {
     const cartLine = useCartLine();
     const { priceType = 'regular', ...passthroughProps } = props;
-    const price = priceType === 'regular'
-        ? cartLine.merchandise.priceV2
-        : cartLine.merchandise.compareAtPriceV2;
-    if (price == null) {
+    const moneyV2 = priceType === 'regular'
+        ? cartLine.estimatedCost.totalAmount
+        : cartLine.estimatedCost.compareAtAmount;
+    if (moneyV2 == null) {
         return null;
     }
-    return (React.createElement(Money, { ...passthroughProps, data: {
-            amount: `${parseFloat(price.amount) * cartLine.quantity}`,
-            currencyCode: price.currencyCode,
-        } }));
+    return React.createElement(Money, { ...passthroughProps, data: moneyV2 });
 }

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

@@ -4,6 +4,16 @@ export declare const CartLineContext: import("react").Context<({
     attributes: ({
         __typename?: "Attribute" | undefined;
     } & Pick<import("../../storefront-api-types").Attribute, "key" | "value">)[];
+    estimatedCost: {
+        __typename?: "CartLineEstimatedCost" | undefined;
+    } & {
+        totalAmount: {
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">;
+        compareAtAmount?: import("../../storefront-api-types").Maybe<{
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">> | undefined;
+    };
     merchandise: {
         __typename?: "ProductVariant" | undefined;
     } & Pick<import("../../storefront-api-types").ProductVariant, "id" | "title" | "availableForSale" | "requiresShipping"> & {

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

@@ -1,14 +1,13 @@
-import { ReactNode, ElementType } from 'react';
+import { ElementType } from 'react';
 import { Props } from '../types';
-declare type PropsWeControl = 'onClick' | 'adjust';
+import { BaseButtonProps } from '../BaseButton';
+declare type PropsWeControl = 'adjust';
 /**
  * The `CartLineQuantityAdjustButton` component renders a button that adjusts the cart line's quantity when pressed.
  * It must be a descendent of a `CartLineProvider` component.
  */
 export declare function CartLineQuantityAdjustButton<TTag extends ElementType = 'button'>(props: Props<TTag, PropsWeControl> & {
-    /** Any `ReactNode` elements. */
-    children: ReactNode;
     /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */
     adjust?: 'increase' | 'decrease' | 'remove';
-}): JSX.Element;
+} & BaseButtonProps): JSX.Element;
 export {};