@shopify/hydrogen 2024.4.7 → 2024.7.2

package/dist/development/index.cjs

@@ -102,22 +102,6 @@ var init_log_seo_tags = __esm({
   }
 });
 
-// src/utils/hash.ts
-function hashKey(queryKey) {
-  const rawKeys = Array.isArray(queryKey) ? queryKey : [queryKey];
-  let hash = "";
-  for (const key of rawKeys) {
-    if (key != null) {
-      if (typeof key === "object") {
-        hash += JSON.stringify(key);
-      } else {
-        hash += key.toString();
-      }
-    }
-  }
-  return encodeURIComponent(hash);
-}
-
 // src/cache/strategies.ts
 var PUBLIC = "public";
 var PRIVATE = "private";
@@ -187,13 +171,11 @@ function CacheCustom(overrideOptions) {
 
 // src/utils/parse-json.ts
 function parseJSON(json) {
-  if (String(json).includes("__proto__"))
-    return JSON.parse(json, noproto);
+  if (String(json).includes("__proto__")) return JSON.parse(json, noproto);
   return JSON.parse(json);
 }
 function noproto(k, v) {
-  if (k !== "__proto__")
-    return v;
+  if (k !== "__proto__") return v;
 }
 function getCacheControlSetting(userCacheOptions, options) {
   if (userCacheOptions && options) {
@@ -209,8 +191,7 @@ function generateDefaultCacheControlHeader(userCacheOptions) {
   return generateCacheControlHeader(getCacheControlSetting(userCacheOptions));
 }
 async function getItem(cache, request) {
-  if (!cache)
-    return;
+  if (!cache) return;
   const response = await cache.match(request);
   if (!response) {
     return;
@@ -218,8 +199,7 @@ async function getItem(cache, request) {
   return response;
 }
 async function setItem(cache, request, response, userCacheOptions) {
-  if (!cache)
-    return;
+  if (!cache) return;
   const cacheControl = getCacheControlSetting(userCacheOptions);
   const paddedCacheControlString = generateDefaultCacheControlHeader(
     getCacheControlSetting(cacheControl, {
@@ -231,12 +211,11 @@ async function setItem(cache, request, response, userCacheOptions) {
   );
   response.headers.set("cache-control", paddedCacheControlString);
   response.headers.set("real-cache-control", cacheControlString);
-  response.headers.set("cache-put-date", (/* @__PURE__ */ new Date()).toUTCString());
+  response.headers.set("cache-put-date", String(Date.now()));
   await cache.put(request, response);
 }
 async function deleteItem(cache, request) {
-  if (!cache)
-    return;
+  if (!cache) return;
   await cache.delete(request);
 }
 function calculateAge(response, responseDate) {
@@ -248,7 +227,7 @@ function calculateAge(response, responseDate) {
       responseMaxAge = parseFloat(maxAgeMatch[1]);
     }
   }
-  const ageInMs = (/* @__PURE__ */ new Date()).valueOf() - new Date(responseDate).valueOf();
+  const ageInMs = Date.now() - Number(responseDate);
   return [ageInMs / 1e3, responseMaxAge];
 }
 function isStale(request, response) {
@@ -276,8 +255,7 @@ function getCacheOption(userCacheOptions) {
   return userCacheOptions || CacheDefault();
 }
 async function getItemFromCache(cache, key) {
-  if (!cache)
-    return;
+  if (!cache) return;
   const url = getKeyUrl(key);
   const request = new Request(url);
   const response = await CacheAPI.get(cache, request);
@@ -292,8 +270,7 @@ async function getItemFromCache(cache, key) {
   }
 }
 async function setItemInCache(cache, key, value, userCacheOptions) {
-  if (!cache)
-    return;
+  if (!cache) return;
   const url = getKeyUrl(key);
   const request = new Request(url);
   const response = new Response(JSON.stringify(value));
@@ -308,21 +285,23 @@ function isStale2(key, response) {
   return CacheAPI.isStale(new Request(getKeyUrl(key)), response);
 }
 
-// src/cache/fetch.ts
-function toSerializableResponse(body, response) {
-  return [
-    body,
-    {
-      status: response.status,
-      statusText: response.statusText,
-      headers: Array.from(response.headers.entries())
+// src/utils/hash.ts
+function hashKey(queryKey) {
+  const rawKeys = Array.isArray(queryKey) ? queryKey : [queryKey];
+  let hash = "";
+  for (const key of rawKeys) {
+    if (key != null) {
+      if (typeof key === "object") {
+        hash += JSON.stringify(key);
+      } else {
+        hash += key.toString();
+      }
     }
-  ];
-}
-function fromSerializableResponse([body, init]) {
-  return [body, new Response(body, init)];
+  }
+  return encodeURIComponent(hash);
 }
-var checkGraphQLErrors = (body, response) => !body?.errors && response.status < 400;
+
+// src/cache/run-with-cache.ts
 var swrLock = /* @__PURE__ */ new Set();
 async function runWithCache(cacheKey, actionFn, {
   strategy = CacheShort(),
@@ -445,6 +424,22 @@ async function runWithCache(cacheKey, actionFn, {
   }
   return result;
 }
+
+// src/cache/server-fetch.ts
+function toSerializableResponse(body, response) {
+  return [
+    body,
+    {
+      status: response.status,
+      statusText: response.statusText,
+      headers: Array.from(response.headers.entries())
+    }
+  ];
+}
+function fromSerializableResponse([body, init]) {
+  return [body, new Response(body, init)];
+}
+var checkGraphQLErrors = (body, response) => !body?.errors && response.status < 400;
 async function fetchWithServerCache(url, requestInit, {
   cacheInstance,
   cache: cacheOptions,
@@ -483,20 +478,12 @@ async function fetchWithServerCache(url, requestInit, {
   ).then(fromSerializableResponse);
 }
 
-// src/version.ts
-var LIB_VERSION = "2024.4.7";
-
 // src/constants.ts
 var STOREFRONT_REQUEST_GROUP_ID_HEADER = "Custom-Storefront-Request-Group-ID";
 var STOREFRONT_ACCESS_TOKEN_HEADER = "X-Shopify-Storefront-Access-Token";
 var SDK_VARIANT_HEADER = "X-SDK-Variant";
 var SDK_VARIANT_SOURCE_HEADER = "X-SDK-Variant-Source";
 var SDK_VERSION_HEADER = "X-SDK-Version";
-var DEFAULT_CUSTOMER_API_VERSION = "2024-04";
-var USER_AGENT = `Shopify Hydrogen ${LIB_VERSION}`;
-var CUSTOMER_API_CLIENT_ID = "30243aa5-17c1-465a-8493-944bcc4e88aa";
-var CUSTOMER_ACCOUNT_SESSION_KEY = "customerAccount";
-var BUYER_SESSION_KEY = "buyer";
 
 // src/utils/uuid.ts
 function generateUUID() {
@@ -523,6 +510,9 @@ var errorOnce = (string) => {
   }
 };
 
+// src/version.ts
+var LIB_VERSION = "2024.7.2";
+
 // src/utils/graphql.ts
 function minifyQuery(string) {
   return string.replace(/\s*#.*$/gm, "").replace(/\s+/gm, " ").trim();
@@ -580,8 +570,7 @@ var GraphQLError = class extends Error {
         }
       });
     } catch {
-      if (options.cause)
-        this.cause = options.cause;
+      if (options.cause) this.cause = options.cause;
     }
   }
   get [Symbol.toStringTag]() {
@@ -625,12 +614,9 @@ var GraphQLError = class extends Error {
     {
       formatted.name = this.name;
       formatted.message = "Development: " + this.message;
-      if (this.path)
-        formatted.path = this.path;
-      if (this.locations)
-        formatted.locations = this.locations;
-      if (this.extensions)
-        formatted.extensions = this.extensions;
+      if (this.path) formatted.path = this.path;
+      if (this.locations) formatted.locations = this.locations;
+      if (this.extensions) formatted.extensions = this.extensions;
     }
     return formatted;
   }
@@ -671,15 +657,13 @@ function withSyncStack(promise, options = {}) {
       result.errors.forEach((error) => {
         if (error) {
           error.stack = getSyncStack(error.message, error.name);
-          if (logErrors(error))
-            console.error(error);
+          if (logErrors(error)) console.error(error);
         }
       });
     }
     return result;
   }).catch((error) => {
-    if (error)
-      error.stack = getSyncStack(error.message, error.name);
+    if (error) error.stack = getSyncStack(error.message, error.name);
     throw error;
   });
 }
@@ -733,8 +717,7 @@ function createStorefrontClient(options) {
     buyerIp: storefrontHeaders?.buyerIp || ""
   });
   defaultHeaders[STOREFRONT_REQUEST_GROUP_ID_HEADER] = storefrontHeaders?.requestGroupId || generateUUID();
-  if (storefrontId)
-    defaultHeaders[hydrogenReact.SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
+  if (storefrontId) defaultHeaders[hydrogenReact.SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
   defaultHeaders["user-agent"] = `Hydrogen ${LIB_VERSION}`;
   if (storefrontHeaders && storefrontHeaders.cookie) {
     const cookies = hydrogenReact.getShopifyCookies(storefrontHeaders.cookie ?? "");
@@ -927,7 +910,7 @@ function getDebugHeaders(request) {
   };
 }
 
-// src/with-cache.ts
+// src/cache/create-with-cache.ts
 function createWithCache({
   cache,
   waitUntil,
@@ -981,8 +964,7 @@ var InMemoryCache = class {
     });
   }
   async match(request) {
-    if (request.method !== "GET")
-      return;
+    if (request.method !== "GET") return;
     const match = this.#store.get(request.url);
     if (!match) {
       return;
@@ -1032,8 +1014,7 @@ var InMemoryCache = class {
 
 // src/utils/get-redirect-url.ts
 function getRedirectUrl(requestUrl) {
-  if (!requestUrl)
-    return;
+  if (!requestUrl) return;
   const { pathname, search } = new URL(requestUrl);
   const redirectFrom = pathname + search;
   const searchParams = new URLSearchParams(search);
@@ -1923,8 +1904,7 @@ function recursivelyInvokeOrReturn(value, ...rest) {
 function getSeoMeta(...seoInputs) {
   let tagResults = [];
   const dedupedSeoInput = seoInputs.reduce((acc, current) => {
-    if (!current)
-      return acc;
+    if (!current) return acc;
     Object.keys(current).forEach(
       (key) => !current[key] && delete current[key]
     );
@@ -2310,6 +2290,13 @@ function getPaginationVariables(request, options = { pageBy: 20 }) {
   return variables;
 }
 
+// src/customer/constants.ts
+var DEFAULT_CUSTOMER_API_VERSION = "2024-07";
+var USER_AGENT = `Shopify Hydrogen ${LIB_VERSION}`;
+var CUSTOMER_API_CLIENT_ID = "30243aa5-17c1-465a-8493-944bcc4e88aa";
+var CUSTOMER_ACCOUNT_SESSION_KEY = "customerAccount";
+var BUYER_SESSION_KEY = "buyer";
+
 // src/customer/BadRequest.ts
 var BadRequest = class extends Response {
   constructor(message, helpMessage, headers) {
@@ -2395,7 +2382,11 @@ async function refreshToken({
       }
     });
   }
-  const { access_token, expires_in, refresh_token } = await response.json();
+  const {
+    access_token,
+    expires_in,
+    refresh_token
+  } = await response.json();
   const accessToken = await exchangeAccessToken(
     access_token,
     customerAccountId,
@@ -2446,10 +2437,7 @@ async function checkExpires({
       } else {
         throw new BadRequest(
           "Unauthorized",
-          "Login before querying the Customer Account API.",
-          {
-            "Set-Cookie": await session.commit()
-          }
+          "Login before querying the Customer Account API."
         );
       }
     }
@@ -2564,8 +2552,7 @@ var DEFAULT_LOGIN_URL = "/account/login";
 var DEFAULT_AUTH_URL = "/account/authorize";
 var DEFAULT_REDIRECT_PATH = "/account";
 function defaultAuthStatusHandler(request) {
-  if (!request.url)
-    return DEFAULT_LOGIN_URL;
+  if (!request.url) return DEFAULT_LOGIN_URL;
   const { pathname } = new URL(request.url);
   const redirectTo = DEFAULT_LOGIN_URL + `?${new URLSearchParams({ return_to: pathname }).toString()}`;
   return redirect(redirectTo);
@@ -2647,9 +2634,6 @@ function createCustomerAccountClient({
       if (response.status === 401) {
         clearSession(session);
         const authFailResponse = authStatusHandler();
-        if (authFailResponse instanceof Response) {
-          authFailResponse.headers.set("Set-Cookie", await session.commit());
-        }
         throw authFailResponse;
       }
       let errors2;
@@ -2678,13 +2662,11 @@ function createCustomerAccountClient({
     }
   }
   async function isLoggedIn() {
-    if (!customerAccountUrl || !customerAccountId)
-      return false;
+    if (!customerAccountUrl || !customerAccountId) return false;
     const customerAccount = session.get(CUSTOMER_ACCOUNT_SESSION_KEY);
     const accessToken = customerAccount?.accessToken;
     const expiresAt = customerAccount?.expiresAt;
-    if (!accessToken || !expiresAt)
-      return false;
+    if (!accessToken || !expiresAt) return false;
     const stackInfo = getCallerStackLine?.();
     try {
       await checkExpires({
@@ -2800,11 +2782,7 @@ function createCustomerAccountClient({
       });
       loginUrl.searchParams.append("code_challenge", challenge);
       loginUrl.searchParams.append("code_challenge_method", "S256");
-      return redirect(loginUrl.toString(), {
-        headers: {
-          "Set-Cookie": await session.commit()
-        }
-      });
+      return redirect(loginUrl.toString());
     },
     logout: async (options) => {
       ifInvalidCredentialThrowError(customerAccountUrl, customerAccountId);
@@ -2821,11 +2799,7 @@ function createCustomerAccountClient({
         ]).toString()}`
       ).toString() : postLogoutRedirectUri;
       clearSession(session);
-      return redirect(logoutUrl, {
-        headers: {
-          "Set-Cookie": await session.commit()
-        }
-      });
+      return redirect(logoutUrl);
     },
     isLoggedIn,
     handleAuthStatus,
@@ -2841,20 +2815,14 @@ function createCustomerAccountClient({
         clearSession(session);
         throw new BadRequest(
           "Unauthorized",
-          "No code or state parameter found in the redirect URL.",
-          {
-            "Set-Cookie": await session.commit()
-          }
+          "No code or state parameter found in the redirect URL."
         );
       }
       if (session.get(CUSTOMER_ACCOUNT_SESSION_KEY)?.state !== state) {
         clearSession(session);
         throw new BadRequest(
           "Unauthorized",
-          "The session state does not match the state parameter. Make sure that the session is configured correctly and passed to `createCustomerAccountClient`.",
-          {
-            "Set-Cookie": await session.commit()
-          }
+          "The session state does not match the state parameter. Make sure that the session is configured correctly and passed to `createCustomerAccountClient`."
         );
       }
       const clientId = customerAccountId;
@@ -2902,7 +2870,12 @@ function createCustomerAccountClient({
           }
         });
       }
-      const { access_token, expires_in, id_token, refresh_token } = await response.json();
+      const {
+        access_token,
+        expires_in,
+        id_token,
+        refresh_token
+      } = await response.json();
       const sessionNonce = session.get(CUSTOMER_ACCOUNT_SESSION_KEY)?.nonce;
       const responseNonce = await getNonce(id_token);
       if (sessionNonce !== responseNonce) {
@@ -2932,11 +2905,7 @@ function createCustomerAccountClient({
         idToken: id_token
       });
       await exchangeForStorefrontCustomerAccessToken();
-      return redirect(redirectPath || DEFAULT_REDIRECT_PATH, {
-        headers: {
-          "Set-Cookie": await session.commit()
-        }
-      });
+      return redirect(redirectPath || DEFAULT_REDIRECT_PATH);
     },
     UNSTABLE_setBuyer: setBuyer,
     UNSTABLE_getBuyer: getBuyer
@@ -2944,8 +2913,7 @@ function createCustomerAccountClient({
 }
 function ifInvalidCredentialThrowError(customerAccountUrl, customerAccountId) {
   try {
-    if (!customerAccountUrl || !customerAccountId)
-      throw Error();
+    if (!customerAccountUrl || !customerAccountId) throw Error();
     new URL(customerAccountUrl);
   } catch {
     console.error(
@@ -3087,32 +3055,22 @@ function cartGetDefault({
 }) {
   return async (cartInput) => {
     const cartId = getCartId();
-    if (!cartId)
-      return null;
+    if (!cartId) return null;
     const [isCustomerLoggedIn, { cart, errors: errors2 }] = await Promise.all([
       customerAccount ? customerAccount.isLoggedIn() : false,
       storefront.query(CART_QUERY(cartFragment), {
-        variables: {
-          cartId,
-          ...cartInput
-        },
+        variables: { cartId, ...cartInput },
         cache: storefront.CacheNone()
       })
     ]);
-    return formatAPIResult(
-      addCustomerLoggedInParam(isCustomerLoggedIn, cart),
-      errors2
-    );
+    if (isCustomerLoggedIn && cart?.checkoutUrl) {
+      const finalCheckoutUrl = new URL(cart.checkoutUrl);
+      finalCheckoutUrl.searchParams.set("logged_in", "true");
+      cart.checkoutUrl = finalCheckoutUrl.toString();
+    }
+    return cart || errors2 ? formatAPIResult(cart, errors2) : null;
   };
 }
-function addCustomerLoggedInParam(isCustomerLoggedIn, cart) {
-  if (isCustomerLoggedIn && cart && cart.checkoutUrl) {
-    const finalCheckoutUrl = new URL(cart.checkoutUrl);
-    finalCheckoutUrl.searchParams.set("logged_in", "true");
-    cart.checkoutUrl = finalCheckoutUrl.toString();
-  }
-  return cart;
-}
 var CART_QUERY = (cartFragment = DEFAULT_CART_FRAGMENT) => `#graphql
   query CartQuery(
     $cartId: ID!
@@ -3718,14 +3676,12 @@ function createCartHandler(options) {
 }
 function useOptimisticCart(cart) {
   const fetchers = react$1.useFetchers();
-  if (!fetchers || !fetchers.length)
-    return cart;
+  if (!fetchers || !fetchers.length) return cart;
   const optimisticCart = cart?.lines ? structuredClone(cart) : { lines: { nodes: [] } };
   const cartLines = optimisticCart.lines.nodes;
   let isOptimistic = false;
   for (const { formData } of fetchers) {
-    if (!formData)
-      continue;
+    if (!formData) continue;
     const cartFormData = CartForm.getFormInput(formData);
     if (cartFormData.action === CartForm.ACTIONS.LinesAdd) {
       for (const input of cartFormData.inputs.lines) {
@@ -3804,12 +3760,14 @@ function VariantSelector({
   options = [],
   variants: _variants = [],
   productPath = "products",
+  waitForNavigation = false,
   children
 }) {
   const variants = _variants instanceof Array ? _variants : hydrogenReact.flattenConnection(_variants);
   const { searchParams, path, alreadyOnProductPage } = useVariantPath(
     handle,
-    productPath
+    productPath,
+    waitForNavigation
   );
   const optionsWithOnlyOneValue = options.filter(
     (option) => option?.values?.length === 1
@@ -3818,7 +3776,7 @@ function VariantSelector({
     react.Fragment,
     null,
     ...react.useMemo(() => {
-      return options.filter((option) => option?.values?.length > 1).map((option) => {
+      return options.map((option) => {
         let activeValue;
         let availableValues = [];
         for (let value of option.values) {
@@ -3873,14 +3831,21 @@ var getSelectedProductOptions = (request) => {
   });
   return selectedOptions;
 };
-function useVariantPath(handle, productPath) {
+function useVariantPath(handle, productPath, waitForNavigation) {
   const { pathname, search } = react$1.useLocation();
+  const navigation = react$1.useNavigation();
   return react.useMemo(() => {
     const match = /(\/[a-zA-Z]{2}-[a-zA-Z]{2}\/)/g.exec(pathname);
     const isLocalePathname = match && match.length > 0;
     productPath = productPath.startsWith("/") ? productPath.substring(1) : productPath;
     const path = isLocalePathname ? `${match[0]}${productPath}/${handle}` : `/${productPath}/${handle}`;
-    const searchParams = new URLSearchParams(search);
+    const searchParams = new URLSearchParams(
+      // Remix doesn't update the location until pending loaders complete.
+      // By default we use the destination search params to make selecting a variant
+      // instant, but `waitForNavigation` makes the UI wait to update by only using
+      // the active browser search params.
+      waitForNavigation || navigation.state !== "loading" ? search : navigation.location.search
+    );
     return {
       searchParams,
       // If the current pathname matches the product page, we need to make sure
@@ -3889,7 +3854,56 @@ function useVariantPath(handle, productPath) {
       alreadyOnProductPage: path === pathname,
       path
     };
-  }, [pathname, search, handle, productPath]);
+  }, [pathname, search, waitForNavigation, handle, productPath, navigation]);
+}
+function useOptimisticVariant(selectedVariant, variants) {
+  const navigation = react$1.useNavigation();
+  const [resolvedVariants, setResolvedVariants] = react.useState([]);
+  react.useEffect(() => {
+    Promise.resolve(variants).then((productWithVariants) => {
+      if (productWithVariants) {
+        setResolvedVariants(
+          productWithVariants instanceof Array ? productWithVariants : productWithVariants.product?.variants?.nodes || []
+        );
+      }
+    }).catch((error) => {
+      reportError(
+        new Error(
+          "[h2:error:useOptimisticVariant] An error occurred while resolving the variants for the optimistic product hook.",
+          {
+            cause: error
+          }
+        )
+      );
+    });
+  }, [variants]);
+  if (navigation.state === "loading") {
+    const queryParams = new URLSearchParams(navigation.location.search);
+    let reportedError = false;
+    const matchingVariant = resolvedVariants.find((variant) => {
+      if (!variant.selectedOptions) {
+        if (!reportedError) {
+          reportedError = true;
+          reportError(
+            new Error(
+              "[h2:error:useOptimisticVariant] The optimistic product hook requires your product query to include variants with the selectedOptions field."
+            )
+          );
+        }
+        return false;
+      }
+      return variant.selectedOptions.every((option) => {
+        return queryParams.get(option.name) === option.value;
+      });
+    });
+    if (matchingVariant) {
+      return {
+        ...matchingVariant,
+        isOptimistic: true
+      };
+    }
+  }
+  return selectedVariant;
 }
 var NonceContext = react.createContext(void 0);
 var NonceProvider = NonceContext.Provider;
@@ -4034,8 +4048,7 @@ function AnalyticsView(props) {
     shop
   };
   react.useEffect(() => {
-    if (!shop?.shopId)
-      return;
+    if (!shop?.shopId) return;
     viewPayload2 = {
       ...viewPayload2,
       url: window.location.href
@@ -4119,14 +4132,11 @@ function useCustomerPrivacy(props) {
     };
   }, [onVisitorConsentCollected]);
   react.useEffect(() => {
-    if (scriptStatus !== "done" || loadedEvent.current)
-      return;
+    if (scriptStatus !== "done" || loadedEvent.current) return;
     loadedEvent.current = true;
     const { checkoutDomain, storefrontAccessToken } = consentConfig;
-    if (!checkoutDomain)
-      logMissingConfig("checkoutDomain");
-    if (!storefrontAccessToken)
-      logMissingConfig("storefrontAccessToken");
+    if (!checkoutDomain) logMissingConfig("checkoutDomain");
+    if (!storefrontAccessToken) logMissingConfig("storefrontAccessToken");
     if (storefrontAccessToken.startsWith("shpat_") || storefrontAccessToken.length !== 32) {
       console.error(
         `[h2:error:useCustomerPrivacy] It looks like you passed a private access token, make sure to use the public token`
@@ -4154,8 +4164,7 @@ function useCustomerPrivacy(props) {
     if (withPrivacyBanner && window?.privacyBanner) {
       window.privacyBanner?.loadBanner(config);
     }
-    if (!window.Shopify?.customerPrivacy)
-      return;
+    if (!window.Shopify?.customerPrivacy) return;
     const originalSetTrackingConsent = window.Shopify.customerPrivacy.setTrackingConsent;
     function overrideSetTrackingConsent(consent, callback) {
       originalSetTrackingConsent(
@@ -4270,11 +4279,9 @@ function prepareBasePageViewPayload(payload) {
   return eventPayload;
 }
 function prepareBaseCartPayload(payload, cart) {
-  if (cart === null)
-    return;
+  if (cart === null) return;
   const pageViewPayload = prepareBasePageViewPayload(payload);
-  if (!pageViewPayload)
-    return;
+  if (!pageViewPayload) return;
   const eventPayload = {
     ...pageViewPayload,
     cartId: cart.id
@@ -4284,8 +4291,7 @@ function prepareBaseCartPayload(payload, cart) {
 var viewPayload = {};
 function pageViewHandler(payload) {
   const eventPayload = prepareBasePageViewPayload(payload);
-  if (!eventPayload)
-    return;
+  if (!eventPayload) return;
   hydrogenReact.sendShopifyAnalytics({
     eventName: hydrogenReact.AnalyticsEventName.PAGE_VIEW_2,
     payload: {
@@ -4319,8 +4325,7 @@ function productViewHandler(payload) {
 }
 function collectionViewHandler(payload) {
   let eventPayload = prepareBasePageViewPayload(payload);
-  if (!eventPayload)
-    return;
+  if (!eventPayload) return;
   viewPayload = {
     pageType: hydrogenReact.AnalyticsPageType.collection,
     resourceId: payload.collection.id
@@ -4337,8 +4342,7 @@ function collectionViewHandler(payload) {
 }
 function searchViewHandler(payload) {
   let eventPayload = prepareBasePageViewPayload(payload);
-  if (!eventPayload)
-    return;
+  if (!eventPayload) return;
   viewPayload = {
     pageType: hydrogenReact.AnalyticsPageType.search
   };
@@ -4355,8 +4359,7 @@ function searchViewHandler(payload) {
 function productAddedToCartHandler(payload) {
   const { cart, currentLine } = payload;
   const eventPayload = prepareBaseCartPayload(payload, cart);
-  if (!eventPayload || !currentLine?.id)
-    return;
+  if (!eventPayload || !currentLine?.id) return;
   sendCartAnalytics({
     matchedLine: currentLine,
     eventPayload
@@ -4451,10 +4454,8 @@ function formatProduct(products) {
       quantity: product.quantity || 1,
       category: product.productType
     };
-    if (product.sku)
-      formattedProduct.sku = product.sku;
-    if (product.productType)
-      formattedProduct.category = product.productType;
+    if (product.sku) formattedProduct.sku = product.sku;
+    if (product.productType) formattedProduct.category = product.productType;
     return formattedProduct;
   });
 }
@@ -4470,8 +4471,7 @@ function CartAnalytics({
   const { publish: publish2, shop, customData, canTrack, cart, prevCart } = useAnalytics();
   const lastEventId = react.useRef(null);
   react.useEffect(() => {
-    if (!currentCart)
-      return;
+    if (!currentCart) return;
     Promise.resolve(currentCart).then((updatedCart) => {
       if (updatedCart && updatedCart.lines) {
         if (!updatedCart.id) {
@@ -4484,19 +4484,15 @@ function CartAnalytics({
         }
       }
       setCarts(({ cart: cart2, prevCart: prevCart2 }) => {
-        if (updatedCart?.updatedAt !== cart2?.updatedAt)
-          return { cart: updatedCart, prevCart: cart2 };
-        return { cart: cart2, prevCart: prevCart2 };
+        return updatedCart?.updatedAt !== cart2?.updatedAt ? { cart: updatedCart, prevCart: cart2 } : { cart: cart2, prevCart: prevCart2 };
       });
     });
     return () => {
     };
   }, [setCarts, currentCart]);
   react.useEffect(() => {
-    if (!cart || !cart?.updatedAt)
-      return;
-    if (cart?.updatedAt === prevCart?.updatedAt)
-      return;
+    if (!cart || !cart?.updatedAt) return;
+    if (cart?.updatedAt === prevCart?.updatedAt) return;
     let cartLastUpdatedAt;
     try {
       cartLastUpdatedAt = JSON.parse(
@@ -4514,8 +4510,7 @@ function CartAnalytics({
       shop,
       customData
     };
-    if (cart.updatedAt === lastEventId.current)
-      return;
+    if (cart.updatedAt === lastEventId.current) return;
     lastEventId.current = cart.updatedAt;
     publish2("cart_updated", payload);
     localStorage.setItem(
@@ -4567,6 +4562,44 @@ function CartAnalytics({
   }, [cart, prevCart, publish2, shop, customData, canTrack]);
   return null;
 }
+var PERF_KIT_UNSTABLE = "https://cdn.shopify.com/shopifycloud/perf-kit/shopify-perf-kit-1bd852a.min.js";
+function PerfKit({ shop }) {
+  const loadedEvent = react.useRef(false);
+  const { subscribe: subscribe2, register: register2 } = useAnalytics();
+  const { ready } = register2("Internal_Shopify_Perf_Kit");
+  const scriptStatus = hydrogenReact.useLoadScript(PERF_KIT_UNSTABLE, {
+    attributes: {
+      id: "perfkit",
+      "data-application": "hydrogen",
+      "data-shop-id": hydrogenReact.parseGid(shop.shopId).id.toString(),
+      "data-storefront-id": shop.hydrogenSubchannelId,
+      "data-monorail-region": "global",
+      "data-spa-mode": "true",
+      "data-resource-timing-sampling-rate": "100"
+    }
+  });
+  react.useEffect(() => {
+    if (scriptStatus !== "done" || loadedEvent.current) return;
+    loadedEvent.current = true;
+    subscribe2(AnalyticsEvent.PAGE_VIEWED, () => {
+      window.PerfKit?.navigate();
+    });
+    subscribe2(AnalyticsEvent.PRODUCT_VIEWED, () => {
+      window.PerfKit?.setPageType("product");
+    });
+    subscribe2(AnalyticsEvent.COLLECTION_VIEWED, () => {
+      window.PerfKit?.setPageType("collection");
+    });
+    subscribe2(AnalyticsEvent.SEARCH_VIEWED, () => {
+      window.PerfKit?.setPageType("search");
+    });
+    subscribe2(AnalyticsEvent.CART_VIEWED, () => {
+      window.PerfKit?.setPageType("cart");
+    });
+    ready();
+  }, [subscribe2, ready, scriptStatus]);
+  return null;
+}
 var defaultAnalyticsContext = {
   canTrack: () => false,
   cart: null,
@@ -4728,7 +4761,8 @@ function AnalyticsProvider({
         },
         domain: cookieDomain
       }
-    )
+    ),
+    !!shop && /* @__PURE__ */ jsxRuntime.jsx(PerfKit, { shop })
   ] });
 }
 function useAnalytics() {
@@ -4823,89 +4857,89 @@ var RichText = function(props) {
 //! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartNoteUpdate
 //! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartSelectedDeliveryOptionsUpdate
 //! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartMetafieldsSet
-//! @see https://shopify.dev/docs/api/storefront/2024-04/mutations/cartMetafieldDelete
+//! @see https://shopify.dev/docs/api/storefront/2024-07/mutations/cartMetafieldDelete
 
-Object.defineProperty(exports, 'AnalyticsEventName', {
+Object.defineProperty(exports, "AnalyticsEventName", {
   enumerable: true,
   get: function () { return hydrogenReact.AnalyticsEventName; }
 });
-Object.defineProperty(exports, 'AnalyticsPageType', {
+Object.defineProperty(exports, "AnalyticsPageType", {
   enumerable: true,
   get: function () { return hydrogenReact.AnalyticsPageType; }
 });
-Object.defineProperty(exports, 'ExternalVideo', {
+Object.defineProperty(exports, "ExternalVideo", {
   enumerable: true,
   get: function () { return hydrogenReact.ExternalVideo; }
 });
-Object.defineProperty(exports, 'IMAGE_FRAGMENT', {
+Object.defineProperty(exports, "IMAGE_FRAGMENT", {
   enumerable: true,
   get: function () { return hydrogenReact.IMAGE_FRAGMENT; }
 });
-Object.defineProperty(exports, 'Image', {
+Object.defineProperty(exports, "Image", {
   enumerable: true,
   get: function () { return hydrogenReact.Image; }
 });
-Object.defineProperty(exports, 'MediaFile', {
+Object.defineProperty(exports, "MediaFile", {
   enumerable: true,
   get: function () { return hydrogenReact.MediaFile; }
 });
-Object.defineProperty(exports, 'ModelViewer', {
+Object.defineProperty(exports, "ModelViewer", {
   enumerable: true,
   get: function () { return hydrogenReact.ModelViewer; }
 });
-Object.defineProperty(exports, 'Money', {
+Object.defineProperty(exports, "Money", {
   enumerable: true,
   get: function () { return hydrogenReact.Money; }
 });
-Object.defineProperty(exports, 'ShopifySalesChannel', {
+Object.defineProperty(exports, "ShopifySalesChannel", {
   enumerable: true,
   get: function () { return hydrogenReact.ShopifySalesChannel; }
 });
-Object.defineProperty(exports, 'Video', {
+Object.defineProperty(exports, "Video", {
   enumerable: true,
   get: function () { return hydrogenReact.Video; }
 });
-Object.defineProperty(exports, 'customerAccountApiCustomScalars', {
+Object.defineProperty(exports, "customerAccountApiCustomScalars", {
   enumerable: true,
   get: function () { return hydrogenReact.customerAccountApiCustomScalars; }
 });
-Object.defineProperty(exports, 'flattenConnection', {
+Object.defineProperty(exports, "flattenConnection", {
   enumerable: true,
   get: function () { return hydrogenReact.flattenConnection; }
 });
-Object.defineProperty(exports, 'getClientBrowserParameters', {
+Object.defineProperty(exports, "getClientBrowserParameters", {
   enumerable: true,
   get: function () { return hydrogenReact.getClientBrowserParameters; }
 });
-Object.defineProperty(exports, 'getShopifyCookies', {
+Object.defineProperty(exports, "getShopifyCookies", {
   enumerable: true,
   get: function () { return hydrogenReact.getShopifyCookies; }
 });
-Object.defineProperty(exports, 'parseGid', {
+Object.defineProperty(exports, "parseGid", {
   enumerable: true,
   get: function () { return hydrogenReact.parseGid; }
 });
-Object.defineProperty(exports, 'parseMetafield', {
+Object.defineProperty(exports, "parseMetafield", {
   enumerable: true,
   get: function () { return hydrogenReact.parseMetafield; }
 });
-Object.defineProperty(exports, 'sendShopifyAnalytics', {
+Object.defineProperty(exports, "sendShopifyAnalytics", {
   enumerable: true,
   get: function () { return hydrogenReact.sendShopifyAnalytics; }
 });
-Object.defineProperty(exports, 'storefrontApiCustomScalars', {
+Object.defineProperty(exports, "storefrontApiCustomScalars", {
   enumerable: true,
   get: function () { return hydrogenReact.storefrontApiCustomScalars; }
 });
-Object.defineProperty(exports, 'useLoadScript', {
+Object.defineProperty(exports, "useLoadScript", {
   enumerable: true,
   get: function () { return hydrogenReact.useLoadScript; }
 });
-Object.defineProperty(exports, 'useMoney', {
+Object.defineProperty(exports, "useMoney", {
   enumerable: true,
   get: function () { return hydrogenReact.useMoney; }
 });
-Object.defineProperty(exports, 'useShopifyCookies', {
+Object.defineProperty(exports, "useShopifyCookies", {
   enumerable: true,
   get: function () { return hydrogenReact.useShopifyCookies; }
 });
@@ -4958,5 +4992,6 @@ exports.useCustomerPrivacy = useCustomerPrivacy;
 exports.useNonce = useNonce;
 exports.useOptimisticCart = useOptimisticCart;
 exports.useOptimisticData = useOptimisticData;
+exports.useOptimisticVariant = useOptimisticVariant;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.cjs.map