@shopify/hydrogen-react 2026.4.2 → 2026.4.4

package/dist/types/useShopifyCookies.d.ts

@@ -1,45 +1,26 @@
-type UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {
-    /**
-     * If set to `false`, Shopify cookies will be removed.
-     * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.
-     * Defaults to false.
-     **/
+type UseShopifyCookiesOptions = {
+    storefrontAccessToken?: string;
+    fetchTrackingValues?: boolean;
+    /** @deprecated No longer used. The Customer Privacy API manages Shopify cookies. */
     hasUserConsent?: boolean;
-    /**
-     * The domain scope of the cookie. Defaults to empty string.
-     **/
+    /** @deprecated No longer used. The Customer Privacy API manages cookie domains. */
     domain?: string;
-    /**
-     * 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.
-     */
+    /** The checkout domain used if the same-origin consent request fails. */
     checkoutDomain?: string;
-    /**
-     * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.
-     */
+    /** @deprecated No longer used. The Customer Privacy API expires deprecated cookies. */
     ignoreDeprecatedCookies?: boolean;
 };
 /**
- * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent
- * for backward compatibility support.
+ * Optionally refreshes backend-managed cookies for standalone integrations.
+ * The Customer Privacy API owns tracking values and legacy cookie expiration.
  *
- * If `fetchTrackingValues` is true, it makes a request to Storefront API
- * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.
- * Generally speaking, this should only be needed if you're not using Hydrogen's
- * built-in analytics components and hooks that already handle this automatically.
- * For example, set it to `true` if you are using `hydrogen-react` only with
- * a different framework and still need to make a same-domain request to
- * Storefront API to set cookies.
+ * If `fetchTrackingValues` is true, this sends a consent request through the
+ * Storefront API proxy, retrying against `checkoutDomain` if provided. Hydrogen's
+ * built-in analytics already delegates consent initialization to the Customer
+ * Privacy API and does not use this hook.
  *
- * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.
- * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.
- *
- * @returns `true` when cookies are set and ready.
+ * @returns `true` when the consent request has settled and cookies are ready.
  * @publicDocs
  */
 export declare function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean;
-type CoreShopifyCookiesOptions = {
-    storefrontAccessToken?: string;
-    fetchTrackingValues?: boolean;
-    checkoutDomain?: string;
-};
 export {};

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

@@ -178,7 +178,7 @@
 		};
 		return y;
 	}
-	var l$1 = function(t, n) {
+	var l = function(t, n) {
 		return t.actions.forEach((function(e) {
 			var r = e.exec;
 			return r && r(t.context, n);
@@ -188,7 +188,7 @@
 		var r = t.initialState, i = n.NotStarted, o = /* @__PURE__ */ new Set(), c = {
 			_machine: t,
 			send: function(e) {
-				i === n.Running && (r = t.transition(r, e), l$1(r, u(e)), o.forEach((function(t) {
+				i === n.Running && (r = t.transition(r, e), l(r, u(e)), o.forEach((function(t) {
 					return t(r);
 				})));
 			},
@@ -210,7 +210,7 @@
 						matches: a(u.value)
 					};
 				} else r = t.initialState;
-				return i = n.Running, l$1(r, e), c;
+				return i = n.Running, l(r, e), c;
 			},
 			stop: function() {
 				return i = n.Stopped, o.clear(), c;
@@ -715,68 +715,27 @@
 	var SHOPIFY_VISIT_TOKEN_HEADER = "X-Shopify-VisitToken";
 	/** Storefront API header for UniqueToken */
 	var SHOPIFY_UNIQUE_TOKEN_HEADER = "X-Shopify-UniqueToken";
-	var cachedTrackingValues = { current: null };
 	/**
-	* Retrieves user session tracking values for analytics and marketing from the browser environment.
+	* Retrieves user session tracking values for analytics and marketing from the
+	* browser environment. Customer Privacy API token readers are authoritative
+	* when available, including when consent denies tracking. Deprecated
+	* `_shopify_y`/`_shopify_s` cookies are read only without an API token reader.
+	* Consent comes from CTA's cache or the legacy `_tracking_consent` cookie.
 	* @publicDocs
 	*/
 	function getTrackingValues() {
-		let trackingValues;
-		if (typeof window !== "undefined" && typeof window.performance !== "undefined") try {
-			const resourceRE = /^https?:\/\/([^/]+)(\/api\/(?:unstable|2\d{3}-\d{2})\/graphql\.json(?=$|\?))?/;
-			const entries = performance.getEntriesByType("resource");
-			let matchedValues;
-			for (let i = entries.length - 1; i >= 0; i--) {
-				const entry = entries[i];
-				if (entry.initiatorType !== "fetch") continue;
-				const currentHost = window.location.host;
-				const match = entry.name.match(resourceRE);
-				if (!match) continue;
-				const [, matchedHost, sfapiPath] = match;
-				if (matchedHost === currentHost || sfapiPath && matchedHost?.endsWith(`.${currentHost}`)) {
-					const values = extractFromPerformanceEntry(entry);
-					if (values) {
-						matchedValues = values;
-						break;
-					}
-				}
-			}
-			if (matchedValues) trackingValues = matchedValues;
-			if (trackingValues) cachedTrackingValues.current = trackingValues;
-			else if (cachedTrackingValues.current) trackingValues = cachedTrackingValues.current;
-			if (!trackingValues) {
-				const navigationEntries = performance.getEntriesByType("navigation")[0];
-				trackingValues = extractFromPerformanceEntry(navigationEntries, false);
-			}
-		} catch {}
-		if (!trackingValues) {
-			const cookie = typeof arguments[0] === "string" ? arguments[0] : typeof document !== "undefined" ? document.cookie : "";
-			trackingValues = {
-				uniqueToken: cookie.match(/\b_shopify_y=([^;]+)/)?.[1] || "",
-				visitToken: cookie.match(/\b_shopify_s=([^;]+)/)?.[1] || "",
-				consent: cookie.match(/\b_tracking_consent=([^;]+)/)?.[1] || ""
-			};
-		}
-		return trackingValues;
-	}
-	function extractFromPerformanceEntry(entry, isConsentRequired = true) {
-		let uniqueToken = "";
-		let visitToken = "";
-		let consent = "";
-		const serverTiming = entry.serverTiming;
-		if (serverTiming && serverTiming.length >= 3) for (let i = serverTiming.length - 1; i >= 0; i--) {
-			const { name, description } = serverTiming[i];
-			if (!name || !description) continue;
-			if (name === "_y") uniqueToken = description;
-			else if (name === "_s") visitToken = description;
-			else if (name === "_cmp") consent = description;
-			if (uniqueToken && visitToken && consent) break;
-		}
-		return uniqueToken && visitToken && (isConsentRequired ? consent : true) ? {
-			uniqueToken,
-			visitToken,
-			consent
-		} : void 0;
+		const cookie = typeof arguments[0] === "string" ? arguments[0] : typeof document !== "undefined" ? document.cookie : "";
+		const customerPrivacy = typeof window === "undefined" ? void 0 : window.Shopify?.customerPrivacy;
+		const internal = customerPrivacy?.__internal;
+		const tokenOptions = {
+			generateFallback: customerPrivacy?.config?.asyncConsent === true,
+			tag: "hydrogen:classic"
+		};
+		return {
+			uniqueToken: internal?.uniqueToken ? internal.uniqueToken(tokenOptions) ?? "" : cookie.match(/\b_shopify_y=([^;]+)/)?.[1] ?? "",
+			visitToken: internal?.visitToken ? internal.visitToken(tokenOptions) ?? "" : cookie.match(/\b_shopify_s=([^;]+)/)?.[1] ?? "",
+			consent: customerPrivacy?.cachedConsent ?? cookie.match(/\b_tracking_consent=([^;]+)/)?.[1] ?? ""
+		};
 	}
 	//#endregion
 	//#region src/cart-hooks.tsx
@@ -2061,7 +2020,7 @@
 		const payloadWithPrivacy = payload;
 		return {
 			source: payload.shopifySalesChannel || ShopifySalesChannel.headless,
-			asset_version_id: payload.assetVersionId || "2026.4.2",
+			asset_version_id: payload.assetVersionId || "2026.4.4",
 			hydrogenSubchannelId: payload.storefrontId || payload.hydrogenSubchannelId || "0",
 			is_persistent_cookie: payload.hasUserConsent,
 			deprecated_visit_token: payload.visitToken,
@@ -3190,7 +3149,7 @@
 				width: intWidth,
 				aspectRatio: fixedAspectRatio,
 				height: fixedHeight,
-				srcSet: generateSrcSet(normalizedProps.src, sizesArray, loader),
+				srcSet: generateSrcSet(normalizedProps.src, sizesArray, loader, "density"),
 				src: loader({
 					src: normalizedProps.src,
 					width: intWidth,
@@ -3348,9 +3307,10 @@
 	* @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg
 	* @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\{width: 200, height: 200, crop: 'center'\}, \{width: 400, height: 400, crop: 'center'\}]
 	* @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters
+	* @param descriptorType - Whether to use `w` (width) or `x` (density) descriptors in the srcset. Use `'density'` for fixed-width images and `'width'` (default) for fluid images.
 	* @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'
 	*/
-	function generateSrcSet(src, sizesArray, loader = shopifyLoader) {
+	function generateSrcSet(src, sizesArray, loader = shopifyLoader, descriptorType = "width") {
 		if (!src) return "";
 		if (sizesArray?.length === 0 || !sizesArray) return src;
 		return sizesArray.map((size, i) => `${loader({
@@ -3358,7 +3318,7 @@
 			width: size.width,
 			height: size.height,
 			crop: size.crop
-		})} ${sizesArray.length === 3 ? `${i + 1}x` : `${size.width ?? 0}w`}`).join(`, `);
+		})} ${descriptorType === "density" ? `${i + 1}x` : `${size.width ?? 0}w`}`).join(`, `);
 	}
 	/**
 	* This function generates an array of sizes for Shopify images, for both fixed and responsive images.
@@ -3991,88 +3951,50 @@
 		return null;
 	}
 	//#endregion
-	//#region ../../node_modules/.pnpm/worktop@0.7.3/node_modules/worktop/cookie/index.mjs
-	function l(a, r, e = {}) {
-		let t = a + "=" + encodeURIComponent(r);
-		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;
-	}
-	//#endregion
 	//#region src/useShopifyCookies.tsx
-	var longTermLength = 3600 * 24 * 360 * 1;
-	var shortTermLength = 1800;
+	var CONSENT_MANAGEMENT_MARKER_HEADER = "Shopify-Storefront-Consent-Management";
 	/**
-	* Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent
-	* for backward compatibility support.
-	*
-	* If `fetchTrackingValues` is true, it makes a request to Storefront API
-	* to fetch or refresh Shopiy analytics and marketing cookies and tracking values.
-	* Generally speaking, this should only be needed if you're not using Hydrogen's
-	* built-in analytics components and hooks that already handle this automatically.
-	* For example, set it to `true` if you are using `hydrogen-react` only with
-	* a different framework and still need to make a same-domain request to
-	* Storefront API to set cookies.
+	* Optionally refreshes backend-managed cookies for standalone integrations.
+	* The Customer Privacy API owns tracking values and legacy cookie expiration.
 	*
-	* If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.
-	* Useful when you only want to use the newer tracking values and not rely on the deprecated ones.
+	* If `fetchTrackingValues` is true, this sends a consent request through the
+	* Storefront API proxy, retrying against `checkoutDomain` if provided. Hydrogen's
+	* built-in analytics already delegates consent initialization to the Customer
+	* Privacy API and does not use this hook.
 	*
-	* @returns `true` when cookies are set and ready.
+	* @returns `true` when the consent request has settled and cookies are ready.
 	* @publicDocs
 	*/
 	function useShopifyCookies(options) {
-		const { hasUserConsent, domain = "", checkoutDomain = "", storefrontAccessToken, fetchTrackingValues, ignoreDeprecatedCookies = false } = options || {};
-		const coreCookiesReady = useCoreShopifyCookies({
-			storefrontAccessToken,
-			fetchTrackingValues,
-			checkoutDomain
-		});
+		const { checkoutDomain, storefrontAccessToken, fetchTrackingValues = false } = options ?? {};
+		const [cookiesReady, setCookiesReady] = (0, react.useState)(!fetchTrackingValues);
+		const hasFetchedTrackingValues = (0, react.useRef)(false);
 		(0, react.useEffect)(() => {
-			if (ignoreDeprecatedCookies || !coreCookiesReady) return;
-			/**
-			* Setting cookie with domain
-			*
-			* If no domain is provided, the cookie will be set for the current host.
-			* For Shopify, we need to ensure this domain is set with a leading dot.
-			*/
-			let currentDomain = domain || window.location.host;
-			if (checkoutDomain) {
-				const checkoutDomainParts = checkoutDomain.split(".").reverse();
-				const currentDomainParts = currentDomain.split(".").reverse();
-				const sameDomainParts = [];
-				checkoutDomainParts.forEach((part, index) => {
-					if (part === currentDomainParts[index]) sameDomainParts.push(part);
-				});
-				currentDomain = sameDomainParts.reverse().join(".");
-			}
-			if (/^localhost/.test(currentDomain)) currentDomain = "";
-			const domainWithLeadingDot = currentDomain ? /^\./.test(currentDomain) ? currentDomain : `.${currentDomain}` : "";
-			/**
-			* Set user and session cookies and refresh the expiry time
-			*/
-			if (hasUserConsent) {
-				const trackingValues = getTrackingValues();
-				if ((trackingValues.uniqueToken || trackingValues.visitToken || "").startsWith("00000000-")) return;
-				setCookie(SHOPIFY_Y, trackingValues.uniqueToken || buildUUID(), longTermLength, domainWithLeadingDot);
-				setCookie(SHOPIFY_S, trackingValues.visitToken || buildUUID(), shortTermLength, domainWithLeadingDot);
-			} else {
-				setCookie(SHOPIFY_Y, "", 0, domainWithLeadingDot);
-				setCookie(SHOPIFY_S, "", 0, domainWithLeadingDot);
+			if (!fetchTrackingValues) {
+				setCookiesReady(true);
+				return;
 			}
+			if (hasFetchedTrackingValues.current) return;
+			hasFetchedTrackingValues.current = true;
+			const fetchConsentValues = async () => {
+				try {
+					return await fetchTrackingValuesFromBrowser(storefrontAccessToken);
+				} catch (sameOriginError) {
+					if (!checkoutDomain) throw sameOriginError;
+					return fetchTrackingValuesFromBrowser(storefrontAccessToken, checkoutDomain);
+				}
+			};
+			fetchConsentValues().catch((error) => {
+				console.warn("[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error)));
+			}).finally(() => {
+				setCookiesReady(true);
+			});
 		}, [
-			coreCookiesReady,
-			hasUserConsent,
-			domain,
 			checkoutDomain,
-			ignoreDeprecatedCookies
+			fetchTrackingValues,
+			storefrontAccessToken
 		]);
-		return coreCookiesReady;
-	}
-	function setCookie(name, value, maxage, domain) {
-		document.cookie = l(name, value, {
-			maxage,
-			domain,
-			samesite: "Lax",
-			path: "/"
-		});
+		return cookiesReady;
 	}
 	async function fetchTrackingValuesFromBrowser(storefrontAccessToken, storefrontApiDomain = "") {
 		const { uniqueToken, visitToken } = getTrackingValues();
@@ -4081,43 +4003,15 @@
 			headers: {
 				"Content-Type": "application/json",
 				...storefrontAccessToken && { "X-Shopify-Storefront-Access-Token": storefrontAccessToken },
+				...storefrontApiDomain ? void 0 : { [CONSENT_MANAGEMENT_MARKER_HEADER]: "1" },
 				...visitToken || uniqueToken ? {
 					[SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,
 					[SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken
 				} : void 0
 			},
-			body: JSON.stringify({ query: "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }" })
+			body: JSON.stringify({ query: "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { trackingConsentCookie cookieDomain shopifyUnique shopifyVisit } } }" })
 		});
 		if (!response.ok) throw new Error(`Failed to fetch consent from browser: ${response.status} ${response.statusText}`);
-		await response.json();
-		getTrackingValues();
-	}
-	/**
-	* Gets http-only cookies from Storefront API via same-origin fetch request.
-	* Falls back to checkout domain if provided to at least obtain the tracking
-	* values via server-timing headers.
-	*/
-	function useCoreShopifyCookies({ checkoutDomain, storefrontAccessToken, fetchTrackingValues = false }) {
-		const [cookiesReady, setCookiesReady] = (0, react.useState)(!fetchTrackingValues);
-		const hasFetchedTrackingValues = (0, react.useRef)(false);
-		(0, react.useEffect)(() => {
-			if (!fetchTrackingValues) {
-				setCookiesReady(true);
-				return;
-			}
-			if (hasFetchedTrackingValues.current) return;
-			hasFetchedTrackingValues.current = true;
-			fetchTrackingValuesFromBrowser(storefrontAccessToken).catch((error) => checkoutDomain ? fetchTrackingValuesFromBrowser(storefrontAccessToken, checkoutDomain) : Promise.reject(error)).catch((error) => {
-				console.warn("[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error)));
-			}).finally(() => {
-				setCookiesReady(true);
-			});
-		}, [
-			checkoutDomain,
-			fetchTrackingValues,
-			storefrontAccessToken
-		]);
-		return cookiesReady;
 	}
 	//#endregion
 	exports.AddToCartButton = AddToCartButton;