@shopify/hydrogen-react 2026.4.3 → 2026.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/dist/browser-dev/ShopifyProvider.mjs.map +1 -1
  2. package/dist/browser-dev/analytics-schema-custom-storefront-customer-tracking.mjs +1 -1
  3. package/dist/browser-dev/load-script.mjs +1 -1
  4. package/dist/browser-dev/packages/hydrogen-react/package.mjs +1 -1
  5. package/dist/browser-dev/packages/hydrogen-react/package.mjs.map +1 -1
  6. package/dist/browser-dev/tracking-utils.mjs +17 -58
  7. package/dist/browser-dev/tracking-utils.mjs.map +1 -1
  8. package/dist/browser-dev/useShopifyCookies.mjs +34 -97
  9. package/dist/browser-dev/useShopifyCookies.mjs.map +1 -1
  10. package/dist/browser-prod/ShopifyProvider.mjs.map +1 -1
  11. package/dist/browser-prod/analytics-schema-custom-storefront-customer-tracking.mjs +1 -1
  12. package/dist/browser-prod/load-script.mjs +1 -1
  13. package/dist/browser-prod/packages/hydrogen-react/package.mjs +1 -1
  14. package/dist/browser-prod/packages/hydrogen-react/package.mjs.map +1 -1
  15. package/dist/browser-prod/tracking-utils.mjs +17 -58
  16. package/dist/browser-prod/tracking-utils.mjs.map +1 -1
  17. package/dist/browser-prod/useShopifyCookies.mjs +34 -97
  18. package/dist/browser-prod/useShopifyCookies.mjs.map +1 -1
  19. package/dist/node-dev/ShopifyProvider.js.map +1 -1
  20. package/dist/node-dev/ShopifyProvider.mjs.map +1 -1
  21. package/dist/node-dev/analytics-schema-custom-storefront-customer-tracking.js +1 -1
  22. package/dist/node-dev/analytics-schema-custom-storefront-customer-tracking.mjs +1 -1
  23. package/dist/node-dev/load-script.js +2 -0
  24. package/dist/node-dev/load-script.js.map +1 -1
  25. package/dist/node-dev/load-script.mjs +1 -1
  26. package/dist/node-dev/packages/hydrogen-react/package.js +1 -1
  27. package/dist/node-dev/packages/hydrogen-react/package.js.map +1 -1
  28. package/dist/node-dev/packages/hydrogen-react/package.mjs +1 -1
  29. package/dist/node-dev/packages/hydrogen-react/package.mjs.map +1 -1
  30. package/dist/node-dev/tracking-utils.js +17 -58
  31. package/dist/node-dev/tracking-utils.js.map +1 -1
  32. package/dist/node-dev/tracking-utils.mjs +17 -58
  33. package/dist/node-dev/tracking-utils.mjs.map +1 -1
  34. package/dist/node-dev/useShopifyCookies.js +34 -97
  35. package/dist/node-dev/useShopifyCookies.js.map +1 -1
  36. package/dist/node-dev/useShopifyCookies.mjs +34 -97
  37. package/dist/node-dev/useShopifyCookies.mjs.map +1 -1
  38. package/dist/node-prod/ShopifyProvider.js.map +1 -1
  39. package/dist/node-prod/ShopifyProvider.mjs.map +1 -1
  40. package/dist/node-prod/analytics-schema-custom-storefront-customer-tracking.js +1 -1
  41. package/dist/node-prod/analytics-schema-custom-storefront-customer-tracking.mjs +1 -1
  42. package/dist/node-prod/load-script.js +2 -0
  43. package/dist/node-prod/load-script.js.map +1 -1
  44. package/dist/node-prod/load-script.mjs +1 -1
  45. package/dist/node-prod/packages/hydrogen-react/package.js +1 -1
  46. package/dist/node-prod/packages/hydrogen-react/package.js.map +1 -1
  47. package/dist/node-prod/packages/hydrogen-react/package.mjs +1 -1
  48. package/dist/node-prod/packages/hydrogen-react/package.mjs.map +1 -1
  49. package/dist/node-prod/tracking-utils.js +17 -58
  50. package/dist/node-prod/tracking-utils.js.map +1 -1
  51. package/dist/node-prod/tracking-utils.mjs +17 -58
  52. package/dist/node-prod/tracking-utils.mjs.map +1 -1
  53. package/dist/node-prod/useShopifyCookies.js +34 -97
  54. package/dist/node-prod/useShopifyCookies.js.map +1 -1
  55. package/dist/node-prod/useShopifyCookies.mjs +34 -97
  56. package/dist/node-prod/useShopifyCookies.mjs.map +1 -1
  57. package/dist/types/ShopifyProvider.d.ts +3 -0
  58. package/dist/types/tracking-utils.d.ts +5 -4
  59. package/dist/types/useShopifyCookies.d.ts +14 -33
  60. package/dist/umd/hydrogen-react.dev.js +55 -162
  61. package/dist/umd/hydrogen-react.dev.js.map +1 -1
  62. package/dist/umd/hydrogen-react.prod.js +4 -4
  63. package/dist/umd/hydrogen-react.prod.js.map +1 -1
  64. package/package.json +1 -1
@@ -1,45 +1,26 @@
1
- type UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {
2
- /**
3
- * If set to `false`, Shopify cookies will be removed.
4
- * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.
5
- * Defaults to false.
6
- **/
1
+ type UseShopifyCookiesOptions = {
2
+ storefrontAccessToken?: string;
3
+ fetchTrackingValues?: boolean;
4
+ /** @deprecated No longer used. The Customer Privacy API manages Shopify cookies. */
7
5
  hasUserConsent?: boolean;
8
- /**
9
- * The domain scope of the cookie. Defaults to empty string.
10
- **/
6
+ /** @deprecated No longer used. The Customer Privacy API manages cookie domains. */
11
7
  domain?: string;
12
- /**
13
- * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.
14
- */
8
+ /** The checkout domain used if the same-origin consent request fails. */
15
9
  checkoutDomain?: string;
16
- /**
17
- * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.
18
- */
10
+ /** @deprecated No longer used. The Customer Privacy API expires deprecated cookies. */
19
11
  ignoreDeprecatedCookies?: boolean;
20
12
  };
21
13
  /**
22
- * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent
23
- * for backward compatibility support.
14
+ * Optionally refreshes backend-managed cookies for standalone integrations.
15
+ * The Customer Privacy API owns tracking values and legacy cookie expiration.
24
16
  *
25
- * If `fetchTrackingValues` is true, it makes a request to Storefront API
26
- * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.
27
- * Generally speaking, this should only be needed if you're not using Hydrogen's
28
- * built-in analytics components and hooks that already handle this automatically.
29
- * For example, set it to `true` if you are using `hydrogen-react` only with
30
- * a different framework and still need to make a same-domain request to
31
- * Storefront API to set cookies.
17
+ * If `fetchTrackingValues` is true, this sends a consent request through the
18
+ * Storefront API proxy, retrying against `checkoutDomain` if provided. Hydrogen's
19
+ * built-in analytics already delegates consent initialization to the Customer
20
+ * Privacy API and does not use this hook.
32
21
  *
33
- * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.
34
- * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.
35
- *
36
- * @returns `true` when cookies are set and ready.
22
+ * @returns `true` when the consent request has settled and cookies are ready.
37
23
  * @publicDocs
38
24
  */
39
25
  export declare function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean;
40
- type CoreShopifyCookiesOptions = {
41
- storefrontAccessToken?: string;
42
- fetchTrackingValues?: boolean;
43
- checkoutDomain?: string;
44
- };
45
26
  export {};
@@ -178,7 +178,7 @@
178
178
  };
179
179
  return y;
180
180
  }
181
- var l$1 = function(t, n) {
181
+ var l = function(t, n) {
182
182
  return t.actions.forEach((function(e) {
183
183
  var r = e.exec;
184
184
  return r && r(t.context, n);
@@ -188,7 +188,7 @@
188
188
  var r = t.initialState, i = n.NotStarted, o = /* @__PURE__ */ new Set(), c = {
189
189
  _machine: t,
190
190
  send: function(e) {
191
- i === n.Running && (r = t.transition(r, e), l$1(r, u(e)), o.forEach((function(t) {
191
+ i === n.Running && (r = t.transition(r, e), l(r, u(e)), o.forEach((function(t) {
192
192
  return t(r);
193
193
  })));
194
194
  },
@@ -210,7 +210,7 @@
210
210
  matches: a(u.value)
211
211
  };
212
212
  } else r = t.initialState;
213
- return i = n.Running, l$1(r, e), c;
213
+ return i = n.Running, l(r, e), c;
214
214
  },
215
215
  stop: function() {
216
216
  return i = n.Stopped, o.clear(), c;
@@ -715,68 +715,27 @@
715
715
  var SHOPIFY_VISIT_TOKEN_HEADER = "X-Shopify-VisitToken";
716
716
  /** Storefront API header for UniqueToken */
717
717
  var SHOPIFY_UNIQUE_TOKEN_HEADER = "X-Shopify-UniqueToken";
718
- var cachedTrackingValues = { current: null };
719
718
  /**
720
- * Retrieves user session tracking values for analytics and marketing from the browser environment.
719
+ * Retrieves user session tracking values for analytics and marketing from the
720
+ * browser environment. Customer Privacy API token readers are authoritative
721
+ * when available, including when consent denies tracking. Deprecated
722
+ * `_shopify_y`/`_shopify_s` cookies are read only without an API token reader.
723
+ * Consent comes from CTA's cache or the legacy `_tracking_consent` cookie.
721
724
  * @publicDocs
722
725
  */
723
726
  function getTrackingValues() {
724
- let trackingValues;
725
- if (typeof window !== "undefined" && typeof window.performance !== "undefined") try {
726
- const resourceRE = /^https?:\/\/([^/]+)(\/api\/(?:unstable|2\d{3}-\d{2})\/graphql\.json(?=$|\?))?/;
727
- const entries = performance.getEntriesByType("resource");
728
- let matchedValues;
729
- for (let i = entries.length - 1; i >= 0; i--) {
730
- const entry = entries[i];
731
- if (entry.initiatorType !== "fetch") continue;
732
- const currentHost = window.location.host;
733
- const match = entry.name.match(resourceRE);
734
- if (!match) continue;
735
- const [, matchedHost, sfapiPath] = match;
736
- if (matchedHost === currentHost || sfapiPath && matchedHost?.endsWith(`.${currentHost}`)) {
737
- const values = extractFromPerformanceEntry(entry);
738
- if (values) {
739
- matchedValues = values;
740
- break;
741
- }
742
- }
743
- }
744
- if (matchedValues) trackingValues = matchedValues;
745
- if (trackingValues) cachedTrackingValues.current = trackingValues;
746
- else if (cachedTrackingValues.current) trackingValues = cachedTrackingValues.current;
747
- if (!trackingValues) {
748
- const navigationEntries = performance.getEntriesByType("navigation")[0];
749
- trackingValues = extractFromPerformanceEntry(navigationEntries, false);
750
- }
751
- } catch {}
752
- if (!trackingValues) {
753
- const cookie = typeof arguments[0] === "string" ? arguments[0] : typeof document !== "undefined" ? document.cookie : "";
754
- trackingValues = {
755
- uniqueToken: cookie.match(/\b_shopify_y=([^;]+)/)?.[1] || "",
756
- visitToken: cookie.match(/\b_shopify_s=([^;]+)/)?.[1] || "",
757
- consent: cookie.match(/\b_tracking_consent=([^;]+)/)?.[1] || ""
758
- };
759
- }
760
- return trackingValues;
761
- }
762
- function extractFromPerformanceEntry(entry, isConsentRequired = true) {
763
- let uniqueToken = "";
764
- let visitToken = "";
765
- let consent = "";
766
- const serverTiming = entry.serverTiming;
767
- if (serverTiming && serverTiming.length >= 3) for (let i = serverTiming.length - 1; i >= 0; i--) {
768
- const { name, description } = serverTiming[i];
769
- if (!name || !description) continue;
770
- if (name === "_y") uniqueToken = description;
771
- else if (name === "_s") visitToken = description;
772
- else if (name === "_cmp") consent = description;
773
- if (uniqueToken && visitToken && consent) break;
774
- }
775
- return uniqueToken && visitToken && (isConsentRequired ? consent : true) ? {
776
- uniqueToken,
777
- visitToken,
778
- consent
779
- } : void 0;
727
+ const cookie = typeof arguments[0] === "string" ? arguments[0] : typeof document !== "undefined" ? document.cookie : "";
728
+ const customerPrivacy = typeof window === "undefined" ? void 0 : window.Shopify?.customerPrivacy;
729
+ const internal = customerPrivacy?.__internal;
730
+ const tokenOptions = {
731
+ generateFallback: customerPrivacy?.config?.asyncConsent === true,
732
+ tag: "hydrogen:classic"
733
+ };
734
+ return {
735
+ uniqueToken: internal?.uniqueToken ? internal.uniqueToken(tokenOptions) ?? "" : cookie.match(/\b_shopify_y=([^;]+)/)?.[1] ?? "",
736
+ visitToken: internal?.visitToken ? internal.visitToken(tokenOptions) ?? "" : cookie.match(/\b_shopify_s=([^;]+)/)?.[1] ?? "",
737
+ consent: customerPrivacy?.cachedConsent ?? cookie.match(/\b_tracking_consent=([^;]+)/)?.[1] ?? ""
738
+ };
780
739
  }
781
740
  //#endregion
782
741
  //#region src/cart-hooks.tsx
@@ -2061,7 +2020,7 @@
2061
2020
  const payloadWithPrivacy = payload;
2062
2021
  return {
2063
2022
  source: payload.shopifySalesChannel || ShopifySalesChannel.headless,
2064
- asset_version_id: payload.assetVersionId || "2026.4.3",
2023
+ asset_version_id: payload.assetVersionId || "2026.4.4",
2065
2024
  hydrogenSubchannelId: payload.storefrontId || payload.hydrogenSubchannelId || "0",
2066
2025
  is_persistent_cookie: payload.hasUserConsent,
2067
2026
  deprecated_visit_token: payload.visitToken,
@@ -3992,88 +3951,50 @@
3992
3951
  return null;
3993
3952
  }
3994
3953
  //#endregion
3995
- //#region ../../node_modules/.pnpm/worktop@0.7.3/node_modules/worktop/cookie/index.mjs
3996
- function l(a, r, e = {}) {
3997
- let t = a + "=" + encodeURIComponent(r);
3998
- return e.expires && (t += "; Expires=" + new Date(e.expires).toUTCString()), e.maxage != null && e.maxage >= 0 && (t += "; Max-Age=" + (e.maxage | 0)), e.domain && (t += "; Domain=" + e.domain), e.path && (t += "; Path=" + e.path), e.samesite && (t += "; SameSite=" + e.samesite), (e.secure || e.samesite === "None") && (t += "; Secure"), e.httponly && (t += "; HttpOnly"), t;
3999
- }
4000
- //#endregion
4001
3954
  //#region src/useShopifyCookies.tsx
4002
- var longTermLength = 3600 * 24 * 360 * 1;
4003
- var shortTermLength = 1800;
3955
+ var CONSENT_MANAGEMENT_MARKER_HEADER = "Shopify-Storefront-Consent-Management";
4004
3956
  /**
4005
- * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent
4006
- * for backward compatibility support.
4007
- *
4008
- * If `fetchTrackingValues` is true, it makes a request to Storefront API
4009
- * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.
4010
- * Generally speaking, this should only be needed if you're not using Hydrogen's
4011
- * built-in analytics components and hooks that already handle this automatically.
4012
- * For example, set it to `true` if you are using `hydrogen-react` only with
4013
- * a different framework and still need to make a same-domain request to
4014
- * Storefront API to set cookies.
3957
+ * Optionally refreshes backend-managed cookies for standalone integrations.
3958
+ * The Customer Privacy API owns tracking values and legacy cookie expiration.
4015
3959
  *
4016
- * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.
4017
- * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.
3960
+ * If `fetchTrackingValues` is true, this sends a consent request through the
3961
+ * Storefront API proxy, retrying against `checkoutDomain` if provided. Hydrogen's
3962
+ * built-in analytics already delegates consent initialization to the Customer
3963
+ * Privacy API and does not use this hook.
4018
3964
  *
4019
- * @returns `true` when cookies are set and ready.
3965
+ * @returns `true` when the consent request has settled and cookies are ready.
4020
3966
  * @publicDocs
4021
3967
  */
4022
3968
  function useShopifyCookies(options) {
4023
- const { hasUserConsent, domain = "", checkoutDomain = "", storefrontAccessToken, fetchTrackingValues, ignoreDeprecatedCookies = false } = options || {};
4024
- const coreCookiesReady = useCoreShopifyCookies({
4025
- storefrontAccessToken,
4026
- fetchTrackingValues,
4027
- checkoutDomain
4028
- });
3969
+ const { checkoutDomain, storefrontAccessToken, fetchTrackingValues = false } = options ?? {};
3970
+ const [cookiesReady, setCookiesReady] = (0, react.useState)(!fetchTrackingValues);
3971
+ const hasFetchedTrackingValues = (0, react.useRef)(false);
4029
3972
  (0, react.useEffect)(() => {
4030
- if (ignoreDeprecatedCookies || !coreCookiesReady) return;
4031
- /**
4032
- * Setting cookie with domain
4033
- *
4034
- * If no domain is provided, the cookie will be set for the current host.
4035
- * For Shopify, we need to ensure this domain is set with a leading dot.
4036
- */
4037
- let currentDomain = domain || window.location.host;
4038
- if (checkoutDomain) {
4039
- const checkoutDomainParts = checkoutDomain.split(".").reverse();
4040
- const currentDomainParts = currentDomain.split(".").reverse();
4041
- const sameDomainParts = [];
4042
- checkoutDomainParts.forEach((part, index) => {
4043
- if (part === currentDomainParts[index]) sameDomainParts.push(part);
4044
- });
4045
- currentDomain = sameDomainParts.reverse().join(".");
4046
- }
4047
- if (/^localhost/.test(currentDomain)) currentDomain = "";
4048
- const domainWithLeadingDot = currentDomain ? /^\./.test(currentDomain) ? currentDomain : `.${currentDomain}` : "";
4049
- /**
4050
- * Set user and session cookies and refresh the expiry time
4051
- */
4052
- if (hasUserConsent) {
4053
- const trackingValues = getTrackingValues();
4054
- if ((trackingValues.uniqueToken || trackingValues.visitToken || "").startsWith("00000000-")) return;
4055
- setCookie(SHOPIFY_Y, trackingValues.uniqueToken || buildUUID(), longTermLength, domainWithLeadingDot);
4056
- setCookie(SHOPIFY_S, trackingValues.visitToken || buildUUID(), shortTermLength, domainWithLeadingDot);
4057
- } else {
4058
- setCookie(SHOPIFY_Y, "", 0, domainWithLeadingDot);
4059
- setCookie(SHOPIFY_S, "", 0, domainWithLeadingDot);
3973
+ if (!fetchTrackingValues) {
3974
+ setCookiesReady(true);
3975
+ return;
4060
3976
  }
3977
+ if (hasFetchedTrackingValues.current) return;
3978
+ hasFetchedTrackingValues.current = true;
3979
+ const fetchConsentValues = async () => {
3980
+ try {
3981
+ return await fetchTrackingValuesFromBrowser(storefrontAccessToken);
3982
+ } catch (sameOriginError) {
3983
+ if (!checkoutDomain) throw sameOriginError;
3984
+ return fetchTrackingValuesFromBrowser(storefrontAccessToken, checkoutDomain);
3985
+ }
3986
+ };
3987
+ fetchConsentValues().catch((error) => {
3988
+ console.warn("[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error)));
3989
+ }).finally(() => {
3990
+ setCookiesReady(true);
3991
+ });
4061
3992
  }, [
4062
- coreCookiesReady,
4063
- hasUserConsent,
4064
- domain,
4065
3993
  checkoutDomain,
4066
- ignoreDeprecatedCookies
3994
+ fetchTrackingValues,
3995
+ storefrontAccessToken
4067
3996
  ]);
4068
- return coreCookiesReady;
4069
- }
4070
- function setCookie(name, value, maxage, domain) {
4071
- document.cookie = l(name, value, {
4072
- maxage,
4073
- domain,
4074
- samesite: "Lax",
4075
- path: "/"
4076
- });
3997
+ return cookiesReady;
4077
3998
  }
4078
3999
  async function fetchTrackingValuesFromBrowser(storefrontAccessToken, storefrontApiDomain = "") {
4079
4000
  const { uniqueToken, visitToken } = getTrackingValues();
@@ -4082,43 +4003,15 @@
4082
4003
  headers: {
4083
4004
  "Content-Type": "application/json",
4084
4005
  ...storefrontAccessToken && { "X-Shopify-Storefront-Access-Token": storefrontAccessToken },
4006
+ ...storefrontApiDomain ? void 0 : { [CONSENT_MANAGEMENT_MARKER_HEADER]: "1" },
4085
4007
  ...visitToken || uniqueToken ? {
4086
4008
  [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,
4087
4009
  [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken
4088
4010
  } : void 0
4089
4011
  },
4090
- body: JSON.stringify({ query: "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }" })
4012
+ body: JSON.stringify({ query: "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { trackingConsentCookie cookieDomain shopifyUnique shopifyVisit } } }" })
4091
4013
  });
4092
4014
  if (!response.ok) throw new Error(`Failed to fetch consent from browser: ${response.status} ${response.statusText}`);
4093
- await response.json();
4094
- getTrackingValues();
4095
- }
4096
- /**
4097
- * Gets http-only cookies from Storefront API via same-origin fetch request.
4098
- * Falls back to checkout domain if provided to at least obtain the tracking
4099
- * values via server-timing headers.
4100
- */
4101
- function useCoreShopifyCookies({ checkoutDomain, storefrontAccessToken, fetchTrackingValues = false }) {
4102
- const [cookiesReady, setCookiesReady] = (0, react.useState)(!fetchTrackingValues);
4103
- const hasFetchedTrackingValues = (0, react.useRef)(false);
4104
- (0, react.useEffect)(() => {
4105
- if (!fetchTrackingValues) {
4106
- setCookiesReady(true);
4107
- return;
4108
- }
4109
- if (hasFetchedTrackingValues.current) return;
4110
- hasFetchedTrackingValues.current = true;
4111
- fetchTrackingValuesFromBrowser(storefrontAccessToken).catch((error) => checkoutDomain ? fetchTrackingValuesFromBrowser(storefrontAccessToken, checkoutDomain) : Promise.reject(error)).catch((error) => {
4112
- console.warn("[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error)));
4113
- }).finally(() => {
4114
- setCookiesReady(true);
4115
- });
4116
- }, [
4117
- checkoutDomain,
4118
- fetchTrackingValues,
4119
- storefrontAccessToken
4120
- ]);
4121
- return cookiesReady;
4122
4015
  }
4123
4016
  //#endregion
4124
4017
  exports.AddToCartButton = AddToCartButton;