@shopify/hydrogen-react 2026.1.1 → 2026.4.0

package/dist/types/useCartAPIStateMachine.d.ts

@@ -11,11 +11,11 @@ export declare function useCartAPIStateMachine({ numCartLines, onCartActionEntry
     onCartActionOptimisticUI?: (context: CartMachineContext, event: CartMachineEvent) => Partial<CartMachineContext>;
     /** A callback that is invoked after a Cart API completes. */
     onCartActionComplete?: (context: CartMachineContext, event: CartMachineFetchResultEvent) => void;
-    /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/2026-01/objects/cart). */
+    /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/2026-04/objects/cart). */
     data?: PartialDeep<CartType, {
         recurseIntoArrays: true;
     }>;
-    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2026-01/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
+    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2026-04/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
     cartFragment: string;
     /** The ISO country code for i18n. */
     countryCode?: CountryCode;

package/dist/types/useCartActions.d.ts

@@ -6,12 +6,12 @@ type CartResponse = PartialDeep<CartType, {
 /**
  * The `useCartActions` hook returns helper graphql functions for Storefront Cart API
  *
- * See [cart API graphql mutations](https://shopify.dev/api/storefront/2026-01/objects/Cart)
+ * See [cart API graphql mutations](https://shopify.dev/api/storefront/2026-04/objects/Cart)
  */
 export declare function useCartActions({ numCartLines, cartFragment, countryCode, languageCode, }: {
     /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
     numCartLines?: number;
-    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2026-01/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
+    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2026-04/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
     cartFragment: string;
     /** The ISO country code for i18n. Default to `US` */
     countryCode?: CountryCode;

package/dist/types/useMachine.d.ts

@@ -0,0 +1,11 @@
+import { StateMachine, EventObject } from '@xstate/fsm';
+export declare function useMachine<TC extends object, TE extends EventObject, TS extends {
+    value: any;
+    context: TC;
+}>(stateMachine: StateMachine.Machine<TC, TE, TS>, options?: {
+    actions?: StateMachine.ActionMap<TC, TE>;
+}): readonly [
+    StateMachine.State<TC, TE, TS>,
+    StateMachine.Service<TC, TE, TS>['send'],
+    StateMachine.Service<TC, TE, TS>
+];

package/dist/types/useMoney.d.ts

@@ -59,8 +59,8 @@ export type UseMoneyValue = {
     withoutTrailingZerosAndCurrency: string;
 };
 /**
- * The `useMoney` hook takes a [MoneyV2 object from the Storefront API](https://shopify.dev/docs/api/storefront/2026-01/objects/MoneyV2)
- * or a [MoneyV2 object from the Customer Account API](https://shopify.dev/docs/api/customer/2026-01/objects/moneyv2) and returns a
+ * The `useMoney` hook takes a [MoneyV2 object from the Storefront API](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)
+ * or a [MoneyV2 object from the Customer Account API](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2) and returns a
  * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by
  * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
  * Uses `locale` from `ShopifyProvider`

package/dist/umd/hydrogen-react.dev.js

@@ -163,261 +163,66 @@
     } };
     return c2;
   }
-  var index = React$1.useLayoutEffect;
-  var withSelector = { exports: {} };
-  var withSelector_development = {};
-  var shim = { exports: {} };
-  var useSyncExternalStoreShim_development = {};
-  var hasRequiredUseSyncExternalStoreShim_development;
-  function requireUseSyncExternalStoreShim_development() {
-    if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
-    hasRequiredUseSyncExternalStoreShim_development = 1;
-    /**
-     * @license React
-     * use-sync-external-store-shim.development.js
-     *
-     * Copyright (c) Meta Platforms, Inc. and affiliates.
-     *
-     * This source code is licensed under the MIT license found in the
-     * LICENSE file in the root directory of this source tree.
-     */
-    (function() {
-      function is(x, y) {
-        return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
-      }
-      function useSyncExternalStore$2(subscribe, getSnapshot) {
-        didWarnOld18Alpha || void 0 === React2.startTransition || (didWarnOld18Alpha = true, console.error(
-          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
-        ));
-        var value = getSnapshot();
-        if (!didWarnUncachedGetSnapshot) {
-          var cachedValue = getSnapshot();
-          objectIs(value, cachedValue) || (console.error(
-            "The result of getSnapshot should be cached to avoid an infinite loop"
-          ), didWarnUncachedGetSnapshot = true);
-        }
-        cachedValue = useState({
-          inst: { value, getSnapshot }
-        });
-        var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
-        useLayoutEffect(
-          function() {
-            inst.value = value;
-            inst.getSnapshot = getSnapshot;
-            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
-          },
-          [subscribe, value, getSnapshot]
-        );
-        useEffect(
-          function() {
-            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
-            return subscribe(function() {
-              checkIfSnapshotChanged(inst) && forceUpdate({ inst });
-            });
-          },
-          [subscribe]
-        );
-        useDebugValue(value);
-        return value;
-      }
-      function checkIfSnapshotChanged(inst) {
-        var latestGetSnapshot = inst.getSnapshot;
-        inst = inst.value;
-        try {
-          var nextValue = latestGetSnapshot();
-          return !objectIs(inst, nextValue);
-        } catch (error) {
-          return true;
-        }
-      }
-      function useSyncExternalStore$1(subscribe, getSnapshot) {
-        return getSnapshot();
-      }
-      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React2 = React$1, objectIs = "function" === typeof Object.is ? Object.is : is, useState = React2.useState, useEffect = React2.useEffect, useLayoutEffect = React2.useLayoutEffect, useDebugValue = React2.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
-      useSyncExternalStoreShim_development.useSyncExternalStore = void 0 !== React2.useSyncExternalStore ? React2.useSyncExternalStore : shim2;
-      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-    })();
-    return useSyncExternalStoreShim_development;
-  }
-  var hasRequiredShim;
-  function requireShim() {
-    if (hasRequiredShim) return shim.exports;
-    hasRequiredShim = 1;
-    {
-      shim.exports = requireUseSyncExternalStoreShim_development();
-    }
-    return shim.exports;
-  }
-  var hasRequiredWithSelector_development;
-  function requireWithSelector_development() {
-    if (hasRequiredWithSelector_development) return withSelector_development;
-    hasRequiredWithSelector_development = 1;
-    /**
-     * @license React
-     * use-sync-external-store-shim/with-selector.development.js
-     *
-     * Copyright (c) Meta Platforms, Inc. and affiliates.
-     *
-     * This source code is licensed under the MIT license found in the
-     * LICENSE file in the root directory of this source tree.
-     */
-    (function() {
-      function is(x, y) {
-        return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
-      }
-      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React2 = React$1, shim2 = requireShim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim2.useSyncExternalStore, useRef = React2.useRef, useEffect = React2.useEffect, useMemo = React2.useMemo, useDebugValue = React2.useDebugValue;
-      withSelector_development.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual2) {
-        var instRef = useRef(null);
-        if (null === instRef.current) {
-          var inst = { hasValue: false, value: null };
-          instRef.current = inst;
-        } else inst = instRef.current;
-        instRef = useMemo(
-          function() {
-            function memoizedSelector(nextSnapshot) {
-              if (!hasMemo) {
-                hasMemo = true;
-                memoizedSnapshot = nextSnapshot;
-                nextSnapshot = selector(nextSnapshot);
-                if (void 0 !== isEqual2 && inst.hasValue) {
-                  var currentSelection = inst.value;
-                  if (isEqual2(currentSelection, nextSnapshot))
-                    return memoizedSelection = currentSelection;
-                }
-                return memoizedSelection = nextSnapshot;
-              }
-              currentSelection = memoizedSelection;
-              if (objectIs(memoizedSnapshot, nextSnapshot))
-                return currentSelection;
-              var nextSelection = selector(nextSnapshot);
-              if (void 0 !== isEqual2 && isEqual2(currentSelection, nextSelection))
-                return memoizedSnapshot = nextSnapshot, currentSelection;
-              memoizedSnapshot = nextSnapshot;
-              return memoizedSelection = nextSelection;
-            }
-            var hasMemo = false, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
-            return [
-              function() {
-                return memoizedSelector(getSnapshot());
-              },
-              null === maybeGetServerSnapshot ? void 0 : function() {
-                return memoizedSelector(maybeGetServerSnapshot());
-              }
-            ];
-          },
-          [getSnapshot, getServerSnapshot, selector, isEqual2]
-        );
-        var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
-        useEffect(
-          function() {
-            inst.hasValue = true;
-            inst.value = value;
-          },
-          [value]
-        );
-        useDebugValue(value);
-        return value;
-      };
-      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-    })();
-    return withSelector_development;
-  }
-  var hasRequiredWithSelector;
-  function requireWithSelector() {
-    if (hasRequiredWithSelector) return withSelector.exports;
-    hasRequiredWithSelector = 1;
-    {
-      withSelector.exports = requireWithSelector_development();
-    }
-    return withSelector.exports;
-  }
-  var withSelectorExports = requireWithSelector();
+  const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;
   function useConstant(fn) {
-    var ref = React__namespace.useRef();
+    const ref = React$1.useRef();
     if (!ref.current) {
       ref.current = { v: fn() };
     }
     return ref.current.v;
   }
-  var __read = function(o2, n2) {
-    var m = typeof Symbol === "function" && o2[Symbol.iterator];
-    if (!m) return o2;
-    var i2 = m.call(o2), r2, ar = [], e2;
-    try {
-      while ((n2 === void 0 || n2-- > 0) && !(r2 = i2.next()).done) ar.push(r2.value);
-    } catch (error) {
-      e2 = { error };
-    } finally {
-      try {
-        if (r2 && !r2.done && (m = i2["return"])) m.call(i2);
-      } finally {
-        if (e2) throw e2.error;
-      }
-    }
-    return ar;
-  };
-  function identity(a2) {
-    return a2;
-  }
-  var getServiceState = function(service) {
-    var currentValue;
-    service.subscribe(function(state) {
-      currentValue = state;
-    }).unsubscribe();
+  function getServiceState(service) {
+    let currentValue;
+    service.subscribe((state) => currentValue = state).unsubscribe();
     return currentValue;
-  };
+  }
   function useMachine(stateMachine, options) {
-    var persistedStateRef = React$1.useRef();
-    {
-      var _a = __read(React$1.useState(stateMachine), 1), initialMachine = _a[0];
-      if (stateMachine !== initialMachine) {
-        console.warn("Machine given to `useMachine` has changed between renders. This is not supported and might lead to unexpected results.\nPlease make sure that you pass the same Machine as argument each time.");
-      }
-    }
-    var _b = __read(useConstant(function() {
-      var queue2 = [];
-      var service2 = v(s(stateMachine.config, options ? options : stateMachine._options));
-      var send = service2.send;
-      service2.send = function(event) {
-        if (service2.status === n.NotStarted) {
-          queue2.push(event);
+    const persistedStateRef = React$1.useRef();
+    const [service, queue] = useConstant(() => {
+      const eventQueue = [];
+      const svc = v(
+        s(
+          stateMachine.config,
+          options ? options : stateMachine._options
+        )
+      );
+      const originalSend = svc.send;
+      svc.send = (event) => {
+        if (svc.status === n.NotStarted) {
+          eventQueue.push(event);
           return;
         }
-        send(event);
-        persistedStateRef.current = service2.state;
+        originalSend(event);
+        persistedStateRef.current = svc.state;
       };
-      return [service2, queue2];
-    }), 2), service = _b[0], queue = _b[1];
-    index(function() {
+      return [svc, eventQueue];
+    });
+    useIsomorphicLayoutEffect(() => {
       if (options) {
         service._machine._options = options;
       }
     });
-    var useServiceResult = useService(service);
-    React$1.useEffect(function() {
+    const getSnapshot = React$1.useCallback(() => getServiceState(service), [service]);
+    const subscribe = React$1.useCallback(
+      (handleStoreChange) => {
+        const { unsubscribe } = service.subscribe(handleStoreChange);
+        return unsubscribe;
+      },
+      [service]
+    );
+    const storeSnapshot = React$1.useSyncExternalStore(
+      subscribe,
+      getSnapshot,
+      getSnapshot
+    );
+    React$1.useEffect(() => {
       service.start(persistedStateRef.current);
       queue.forEach(service.send);
       persistedStateRef.current = service.state;
-      return function() {
+      return () => {
         service.stop();
       };
     }, []);
-    return useServiceResult;
-  }
-  var isEqual = function(_prevState, nextState) {
-    return nextState.changed === false;
-  };
-  function useService(service) {
-    var getSnapshot = React$1.useCallback(function() {
-      return getServiceState(service);
-    }, [service]);
-    var subscribe = React$1.useCallback(function(handleStoreChange) {
-      var unsubscribe = service.subscribe(handleStoreChange).unsubscribe;
-      return unsubscribe;
-    }, [service]);
-    var storeSnapshot = withSelectorExports.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
     return [storeSnapshot, service.send, service];
   }
   function flattenConnection(connection) {
@@ -782,7 +587,7 @@
   }
 `
   );
-  const SFAPI_VERSION = "2026-01";
+  const SFAPI_VERSION = "2026-04";
   const MOCK_SHOP_DOMAIN = "mock.shop";
   const isMockShop = (domain) => domain.includes(MOCK_SHOP_DOMAIN);
   function createStorefrontClient({
@@ -2478,7 +2283,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     }
     return false;
   }
-  const version = "2026.1.1";
+  const version = "2026.4.0";
   const SCHEMA_ID = "custom_storefront_customer_tracking/1.2";
   const PAGE_RENDERED_EVENT_NAME = "page_rendered";
   const COLLECTION_PAGE_RENDERED_EVENT_NAME = "collection_page_rendered";
@@ -3284,7 +3089,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
   const stripVersion = (encodedVariantField) => encodedVariantField.replace(/^v1_/, "");
   function v1Decoder(encodedVariantField) {
     const tokenizer = /[ :,-]/g;
-    let index2 = 0;
+    let index = 0;
     let token;
     const options = [];
     const currentOptionValue = [];
@@ -3292,7 +3097,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     let rangeStart = null;
     while (token = tokenizer.exec(encodedVariantField)) {
       const operation = token[0];
-      const optionValueIndex = Number.parseInt(encodedVariantField.slice(index2, token.index)) || 0;
+      const optionValueIndex = Number.parseInt(encodedVariantField.slice(index, token.index)) || 0;
       if (rangeStart !== null) {
         for (; rangeStart < optionValueIndex; rangeStart++) {
           currentOptionValue[depth] = rangeStart;
@@ -3314,7 +3119,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
           depth--;
         }
       }
-      index2 = tokenizer.lastIndex;
+      index = tokenizer.lastIndex;
     }
     const encodingEndsWithIndex = encodedVariantField.match(/\d+$/g);
     if (encodingEndsWithIndex) {
@@ -3337,8 +3142,8 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         return {
           [option.name]: Object.assign(
             {},
-            ...(option == null ? void 0 : option.optionValues) ? option.optionValues.map((value, index2) => {
-              return { [value.name]: index2 };
+            ...(option == null ? void 0 : option.optionValues) ? option.optionValues.map((value, index) => {
+              return { [value.name]: index };
             }) : []
           )
         };
@@ -4474,7 +4279,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
       );
     }
   }
-  function serializeRichTextASTNode(components = {}, node, index2 = 0) {
+  function serializeRichTextASTNode(components = {}, node, index = 0) {
     let children;
     if ("children" in node) {
       children = node.children.map(
@@ -4487,7 +4292,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         return React$1.createElement(
           Component,
           {
-            key: index2,
+            key: index,
             node: {
               type: "root",
               children
@@ -4498,7 +4303,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         return React$1.createElement(
           Component,
           {
-            key: index2,
+            key: index,
             node: {
               type: "heading",
               level: node.level,
@@ -4510,7 +4315,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         return React$1.createElement(
           Component,
           {
-            key: index2,
+            key: index,
             node: {
               type: "paragraph",
               children
@@ -4519,7 +4324,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         );
       case "text": {
         const elements = (node.value ?? "").split("\n").flatMap((value, subindex) => {
-          const key = `${index2}-${value}-${subindex}`;
+          const key = `${index}-${value}-${subindex}`;
           const textElement = React$1.createElement(
             Component,
             {
@@ -4534,13 +4339,13 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
           );
           return subindex === 0 ? textElement : [React$1.createElement("br", { key: `${key}-br` }), textElement];
         });
-        return elements.length > 1 ? React$1.createElement(React$1.Fragment, { key: index2 }, elements) : elements[0];
+        return elements.length > 1 ? React$1.createElement(React$1.Fragment, { key: index }, elements) : elements[0];
       }
       case "link":
         return React$1.createElement(
           Component,
           {
-            key: index2,
+            key: index,
             node: {
               type: "link",
               url: node.url,
@@ -4554,7 +4359,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         return React$1.createElement(
           Component,
           {
-            key: index2,
+            key: index,
             node: {
               type: "list",
               listType: node.listType,
@@ -4566,7 +4371,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         return React$1.createElement(
           Component,
           {
-            key: index2,
+            key: index,
             node: {
               type: "list-item",
               children
@@ -4727,8 +4532,8 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         const checkoutDomainParts = checkoutDomain.split(".").reverse();
         const currentDomainParts = currentDomain.split(".").reverse();
         const sameDomainParts = [];
-        checkoutDomainParts.forEach((part, index2) => {
-          if (part === currentDomainParts[index2]) {
+        checkoutDomainParts.forEach((part, index) => {
+          if (part === currentDomainParts[index]) {
             sameDomainParts.push(part);
           }
         });