@shopify/hydrogen-react 2024.10.0 → 2024.10.2

package/dist/node-dev/getProductOptions.mjs

@@ -0,0 +1,239 @@
+import { isOptionValueCombinationInEncodedVariant } from "./optionValueDecoder.mjs";
+function mapProductOptions(options) {
+  return options.map((option) => {
+    return Object.assign(
+      {},
+      ...(option == null ? void 0 : option.optionValues) ? option.optionValues.map((value, index) => {
+        return { [value.name]: index };
+      }) : []
+    );
+  });
+}
+function mapSelectedProductOptionToObject(options) {
+  return Object.assign(
+    {},
+    ...options.map((key) => {
+      return { [key.name]: key.value };
+    })
+  );
+}
+function mapSelectedProductOptionToObjectAsString(options) {
+  return JSON.stringify(mapSelectedProductOptionToObject(options));
+}
+function encodeSelectedProductOptionAsKey(selectedOption, productOptionMappings) {
+  if (Array.isArray(selectedOption)) {
+    return JSON.stringify(
+      selectedOption.map((key, index) => {
+        return productOptionMappings[index][key.value];
+      })
+    );
+  } else {
+    return JSON.stringify(
+      Object.keys(selectedOption).map((key, index) => {
+        return productOptionMappings[index][selectedOption[key]];
+      })
+    );
+  }
+}
+function mapVariants(variants, productOptionMappings) {
+  return Object.assign(
+    {},
+    ...variants.map((variant) => {
+      const variantKey = encodeSelectedProductOptionAsKey(
+        variant.selectedOptions || [],
+        productOptionMappings
+      );
+      return { [variantKey]: variant };
+    })
+  );
+}
+const PRODUCT_INPUTS = [
+  "options",
+  "selectedOrFirstAvailableVariant",
+  "adjacentVariants"
+];
+const PRODUCT_INPUTS_EXTRA = [
+  "handle",
+  "encodedVariantExistence",
+  "encodedVariantAvailability"
+];
+function logErrorAndReturnFalse(key) {
+  console.error(
+    `[h2:error:getProductOptions] product.${key} is missing. Make sure you query for this field from the Storefront API.`
+  );
+  return false;
+}
+function checkProductParam(product, checkAll = false) {
+  var _a;
+  let validParam = true;
+  const productKeys = Object.keys(product);
+  (checkAll ? [...PRODUCT_INPUTS, ...PRODUCT_INPUTS_EXTRA] : PRODUCT_INPUTS).forEach((key) => {
+    if (!productKeys.includes(key)) {
+      validParam = logErrorAndReturnFalse(key);
+    }
+  });
+  if (product.options) {
+    const firstOption = product == null ? void 0 : product.options[0];
+    if (checkAll && !(firstOption == null ? void 0 : firstOption.name)) {
+      validParam = logErrorAndReturnFalse("options.name");
+    }
+    if ((_a = product == null ? void 0 : product.options[0]) == null ? void 0 : _a.optionValues) {
+      const firstOptionValues = product.options[0].optionValues[0];
+      if (checkAll && !(firstOptionValues == null ? void 0 : firstOptionValues.name)) {
+        validParam = logErrorAndReturnFalse("options.optionValues.name");
+      }
+      if (firstOptionValues == null ? void 0 : firstOptionValues.firstSelectableVariant) {
+        validParam = checkProductVariantParam(
+          firstOptionValues.firstSelectableVariant,
+          "options.optionValues.firstSelectableVariant",
+          validParam,
+          checkAll
+        );
+      } else {
+        validParam = logErrorAndReturnFalse(
+          "options.optionValues.firstSelectableVariant"
+        );
+      }
+    } else {
+      validParam = logErrorAndReturnFalse("options.optionValues");
+    }
+  }
+  if (product.selectedOrFirstAvailableVariant) {
+    validParam = checkProductVariantParam(
+      product.selectedOrFirstAvailableVariant,
+      "selectedOrFirstAvailableVariant",
+      validParam,
+      checkAll
+    );
+  }
+  if (!!product.adjacentVariants && product.adjacentVariants[0]) {
+    validParam = checkProductVariantParam(
+      product.adjacentVariants[0],
+      "adjacentVariants",
+      validParam,
+      checkAll
+    );
+  }
+  return validParam ? product : {};
+}
+function checkProductVariantParam(variant, key, currentValidParamState, checkAll) {
+  var _a;
+  let validParam = currentValidParamState;
+  if (checkAll && !((_a = variant.product) == null ? void 0 : _a.handle)) {
+    validParam = logErrorAndReturnFalse(`${key}.product.handle`);
+  }
+  if (variant.selectedOptions) {
+    const firstSelectedOption = variant.selectedOptions[0];
+    if (!(firstSelectedOption == null ? void 0 : firstSelectedOption.name)) {
+      validParam = logErrorAndReturnFalse(`${key}.selectedOptions.name`);
+    }
+    if (!(firstSelectedOption == null ? void 0 : firstSelectedOption.value)) {
+      validParam = logErrorAndReturnFalse(`${key}.selectedOptions.value`);
+    }
+  } else {
+    validParam = logErrorAndReturnFalse(`${key}.selectedOptions`);
+  }
+  return validParam;
+}
+function getAdjacentAndFirstAvailableVariants(product) {
+  const checkedProduct = checkProductParam(product);
+  if (!checkedProduct.options)
+    return [];
+  const availableVariants = {};
+  checkedProduct.options.map((option) => {
+    var _a;
+    (_a = option.optionValues) == null ? void 0 : _a.map((value) => {
+      if (value.firstSelectableVariant) {
+        const variantKey = mapSelectedProductOptionToObjectAsString(
+          value.firstSelectableVariant.selectedOptions
+        );
+        availableVariants[variantKey] = value.firstSelectableVariant;
+      }
+    });
+  });
+  checkedProduct.adjacentVariants.map((variant) => {
+    const variantKey = mapSelectedProductOptionToObjectAsString(
+      variant.selectedOptions
+    );
+    availableVariants[variantKey] = variant;
+  });
+  const selectedVariant = checkedProduct.selectedOrFirstAvailableVariant;
+  if (selectedVariant) {
+    const variantKey = mapSelectedProductOptionToObjectAsString(
+      selectedVariant.selectedOptions
+    );
+    availableVariants[variantKey] = selectedVariant;
+  }
+  return Object.values(availableVariants);
+}
+function getProductOptions(product) {
+  const checkedProduct = checkProductParam(product, true);
+  if (!checkedProduct.options)
+    return [];
+  const {
+    options,
+    selectedOrFirstAvailableVariant: selectedVariant,
+    adjacentVariants,
+    encodedVariantExistence,
+    encodedVariantAvailability,
+    handle: productHandle
+  } = checkedProduct;
+  const productOptionMappings = mapProductOptions(options);
+  const variants = mapVariants(
+    selectedVariant ? [selectedVariant, ...adjacentVariants] : adjacentVariants,
+    productOptionMappings
+  );
+  const selectedOptions = mapSelectedProductOptionToObject(
+    selectedVariant ? selectedVariant.selectedOptions : []
+  );
+  const productOptions = options.map((option, optionIndex) => {
+    return {
+      ...option,
+      optionValues: option.optionValues.map((value) => {
+        var _a;
+        const targetOptionParams = { ...selectedOptions };
+        targetOptionParams[option.name] = value.name;
+        const targetKey = encodeSelectedProductOptionAsKey(
+          targetOptionParams || [],
+          productOptionMappings
+        );
+        const topDownKey = JSON.parse(targetKey).slice(
+          0,
+          optionIndex + 1
+        );
+        const exists = isOptionValueCombinationInEncodedVariant(
+          topDownKey,
+          encodedVariantExistence || ""
+        );
+        const available = isOptionValueCombinationInEncodedVariant(
+          topDownKey,
+          encodedVariantAvailability || ""
+        );
+        const variant = variants[targetKey] || value.firstSelectableVariant;
+        const variantOptionParam = mapSelectedProductOptionToObject(
+          variant.selectedOptions || []
+        );
+        const searchParams = new URLSearchParams(variantOptionParam);
+        const handle = (_a = variant == null ? void 0 : variant.product) == null ? void 0 : _a.handle;
+        return {
+          ...value,
+          variant,
+          handle,
+          variantUriQuery: searchParams.toString(),
+          selected: selectedOptions[option.name] === value.name,
+          exists,
+          available,
+          isDifferentProduct: handle !== productHandle
+        };
+      })
+    };
+  });
+  return productOptions;
+}
+export {
+  checkProductParam,
+  getAdjacentAndFirstAvailableVariants,
+  getProductOptions,
+  mapSelectedProductOptionToObject
+};
+//# sourceMappingURL=getProductOptions.mjs.map

package/dist/node-dev/getProductOptions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getProductOptions.mjs","sources":["../../src/getProductOptions.ts"],"sourcesContent":["import {isOptionValueCombinationInEncodedVariant} from './optionValueDecoder.js';\nimport type {\n  Product,\n  ProductOption,\n  ProductOptionValue,\n  ProductVariant,\n  SelectedOption,\n} from './storefront-api-types';\n\nexport type RecursivePartial<T> = {\n  [P in keyof T]?: RecursivePartial<T[P]>;\n};\ntype ProductOptionsMapping = Record<string, number>;\ntype ProductOptionValueState = {\n  variant: ProductVariant;\n  handle: string;\n  variantUriQuery: string;\n  selected: boolean;\n  exists: boolean;\n  available: boolean;\n  isDifferentProduct: boolean;\n};\ntype MappedProductOptionValue = ProductOptionValue & ProductOptionValueState;\n\n/**\n * Creates a mapping of product options to their index for matching encoded values\n * For example, a product option of\n *  [\n *    \\{\n *      name: 'Color',\n *      optionValues: [\\{name: 'Red'\\}, \\{name: 'Blue'\\}]\n *    \\},\n *    \\{\n *      name: 'Size',\n *      optionValues: [\\{name: 'Small'\\}, \\{name: 'Medium'\\}, \\{name: 'Large'\\}]\n *    \\}\n *  ]\n * Would return\n *  [\n *    \\{Red: 0, Blue: 1\\},\n *    \\{Small: 0, Medium: 1, Large: 2\\}\n *  ]\n */\nfunction mapProductOptions(options: ProductOption[]): ProductOptionsMapping[] {\n  return options.map((option: ProductOption) => {\n    return Object.assign(\n      {},\n      ...(option?.optionValues\n        ? option.optionValues.map((value, index) => {\n            return {[value.name]: index};\n          })\n        : []),\n    ) as ProductOptionsMapping;\n  });\n}\n\n/**\n * Converts the product option into an Object\\<key, value\\> for building query params\n * For example, a selected product option of\n *  [\n *    \\{\n *      name: 'Color',\n *      value: 'Red',\n *    \\},\n *    \\{\n *      name: 'Size',\n *      value: 'Medium',\n *    \\}\n *  ]\n * Would return\n *  \\{\n *    Color: 'Red',\n *    Size: 'Medium',\n *  \\}\n */\nexport function mapSelectedProductOptionToObject(\n  options: Pick<SelectedOption, 'name' | 'value'>[],\n): Record<string, string> {\n  return Object.assign(\n    {},\n    ...options.map((key) => {\n      return {[key.name]: key.value};\n    }),\n  ) as Record<string, string>;\n}\n\n/**\n * Returns the JSON stringify result of mapSelectedProductOptionToObject\n */\nfunction mapSelectedProductOptionToObjectAsString(\n  options: Pick<SelectedOption, 'name' | 'value'>[],\n): string {\n  return JSON.stringify(mapSelectedProductOptionToObject(options));\n}\n\n/**\n * Encode the selected product option as a key for mapping to the encoded variants\n * For example, a selected product option of\n *  [\n *    \\{\n *      name: 'Color',\n *      value: 'Red',\n *    \\},\n *    \\{\n *      name: 'Size',\n *      value: 'Medium',\n *    \\}\n *  ]\n * Would return\n *  [0,1]\n *\n * Also works with the result of mapSelectedProductOption. For example:\n *  \\{\n *    Color: 'Red',\n *    Size: 'Medium',\n *  \\}\n * Would return\n *  [0,1]\n *\n * @param selectedOption - The selected product option\n * @param productOptionMappings - The result of product option mapping from mapProductOptions\n * @returns\n */\nfunction encodeSelectedProductOptionAsKey(\n  selectedOption:\n    | Pick<SelectedOption, 'name' | 'value'>[]\n    | Record<string, string>,\n  productOptionMappings: ProductOptionsMapping[],\n): string {\n  if (Array.isArray(selectedOption)) {\n    return JSON.stringify(\n      selectedOption.map((key, index) => {\n        return productOptionMappings[index][key.value];\n      }),\n    );\n  } else {\n    return JSON.stringify(\n      Object.keys(selectedOption).map((key, index) => {\n        return productOptionMappings[index][selectedOption[key]];\n      }),\n    );\n  }\n}\n\n/**\n * Takes an array of product variants and maps them to an object with the encoded selected option values as the key.\n * For example, a product variant of\n * [\n *  \\{\n *    id: 1,\n *    selectedOptions: [\n *      \\{name: 'Color', value: 'Red'\\},\n *      \\{name: 'Size', value: 'Small'\\},\n *    ],\n *  \\},\n *  \\{\n *    id: 2,\n *    selectedOptions: [\n *      \\{name: 'Color', value: 'Red'\\},\n *      \\{name: 'Size', value: 'Medium'\\},\n *    ],\n *  \\}\n * ]\n * Would return\n * \\{\n *    '[0,0]': \\{id: 1, selectedOptions: [\\{name: 'Color', value: 'Red'\\}, \\{name: 'Size', value: 'Small'\\}]\\},\n *    '[0,1]': \\{id: 2, selectedOptions: [\\{name: 'Color', value: 'Red'\\}, \\{name: 'Size', value: 'Medium'\\}]\\},\n * \\}\n */\nfunction mapVariants(\n  variants: ProductVariant[],\n  productOptionMappings: ProductOptionsMapping[],\n): Record<string, ProductVariant> {\n  return Object.assign(\n    {},\n    ...variants.map((variant) => {\n      const variantKey = encodeSelectedProductOptionAsKey(\n        variant.selectedOptions || [],\n        productOptionMappings,\n      );\n      return {[variantKey]: variant};\n    }),\n  ) as Record<string, ProductVariant>;\n}\n\nexport type MappedProductOptions = Omit<ProductOption, 'optionValues'> & {\n  optionValues: MappedProductOptionValue[];\n};\n\nconst PRODUCT_INPUTS = [\n  'options',\n  'selectedOrFirstAvailableVariant',\n  'adjacentVariants',\n];\n\nconst PRODUCT_INPUTS_EXTRA = [\n  'handle',\n  'encodedVariantExistence',\n  'encodedVariantAvailability',\n];\n\nfunction logErrorAndReturnFalse(key: string): boolean {\n  console.error(\n    `[h2:error:getProductOptions] product.${key} is missing. Make sure you query for this field from the Storefront API.`,\n  );\n  return false;\n}\n\nexport function checkProductParam(\n  product: RecursivePartial<Product>,\n  checkAll = false,\n): Product {\n  let validParam = true;\n  const productKeys = Object.keys(product);\n\n  // Check product input\n  (checkAll\n    ? [...PRODUCT_INPUTS, ...PRODUCT_INPUTS_EXTRA]\n    : PRODUCT_INPUTS\n  ).forEach((key) => {\n    if (!productKeys.includes(key)) {\n      validParam = logErrorAndReturnFalse(key);\n    }\n  });\n\n  // Check for nested options requirements\n  if (product.options) {\n    const firstOption = product?.options[0];\n\n    if (checkAll && !firstOption?.name) {\n      validParam = logErrorAndReturnFalse('options.name');\n    }\n\n    // Check for options.optionValues\n    if (product?.options[0]?.optionValues) {\n      const firstOptionValues = product.options[0].optionValues[0];\n\n      // Check for options.optionValues.name\n      if (checkAll && !firstOptionValues?.name) {\n        validParam = logErrorAndReturnFalse('options.optionValues.name');\n      }\n\n      // Check for options.optionValues.firstSelectableVariant\n      if (firstOptionValues?.firstSelectableVariant) {\n        // check product variant\n        validParam = checkProductVariantParam(\n          firstOptionValues.firstSelectableVariant,\n          'options.optionValues.firstSelectableVariant',\n          validParam,\n          checkAll,\n        );\n      } else {\n        validParam = logErrorAndReturnFalse(\n          'options.optionValues.firstSelectableVariant',\n        );\n      }\n    } else {\n      validParam = logErrorAndReturnFalse('options.optionValues');\n    }\n  }\n\n  // Check for nested selectedOrFirstAvailableVariant requirements\n  if (product.selectedOrFirstAvailableVariant) {\n    validParam = checkProductVariantParam(\n      product.selectedOrFirstAvailableVariant,\n      'selectedOrFirstAvailableVariant',\n      validParam,\n      checkAll,\n    );\n  }\n\n  // Check for nested adjacentVariants requirements\n  if (!!product.adjacentVariants && product.adjacentVariants[0]) {\n    validParam = checkProductVariantParam(\n      product.adjacentVariants[0],\n      'adjacentVariants',\n      validParam,\n      checkAll,\n    );\n  }\n\n  return (validParam ? product : {}) as Product;\n}\n\nfunction checkProductVariantParam(\n  variant: RecursivePartial<ProductVariant>,\n  key: string,\n  currentValidParamState: boolean,\n  checkAll: boolean,\n): boolean {\n  let validParam = currentValidParamState;\n\n  if (checkAll && !variant.product?.handle) {\n    validParam = logErrorAndReturnFalse(`${key}.product.handle`);\n  }\n  if (variant.selectedOptions) {\n    const firstSelectedOption = variant.selectedOptions[0];\n    if (!firstSelectedOption?.name) {\n      validParam = logErrorAndReturnFalse(`${key}.selectedOptions.name`);\n    }\n    if (!firstSelectedOption?.value) {\n      validParam = logErrorAndReturnFalse(`${key}.selectedOptions.value`);\n    }\n  } else {\n    validParam = logErrorAndReturnFalse(`${key}.selectedOptions`);\n  }\n\n  return validParam;\n}\n\n/**\n * Finds all the variants provided by adjacentVariants, options.optionValues.firstAvailableVariant,\n * and selectedOrFirstAvailableVariant and return them in a single array\n */\nexport function getAdjacentAndFirstAvailableVariants(\n  product: RecursivePartial<Product>,\n): ProductVariant[] {\n  // Checks for valid product input\n  const checkedProduct = checkProductParam(product);\n\n  if (!checkedProduct.options) return [];\n\n  const availableVariants: Record<string, ProductVariant> = {};\n  checkedProduct.options.map((option) => {\n    option.optionValues?.map((value) => {\n      if (value.firstSelectableVariant) {\n        const variantKey = mapSelectedProductOptionToObjectAsString(\n          value.firstSelectableVariant.selectedOptions,\n        );\n        availableVariants[variantKey] = value.firstSelectableVariant;\n      }\n    });\n  });\n\n  checkedProduct.adjacentVariants.map((variant) => {\n    const variantKey = mapSelectedProductOptionToObjectAsString(\n      variant.selectedOptions,\n    );\n    availableVariants[variantKey] = variant;\n  });\n\n  const selectedVariant = checkedProduct.selectedOrFirstAvailableVariant;\n  if (selectedVariant) {\n    const variantKey = mapSelectedProductOptionToObjectAsString(\n      selectedVariant.selectedOptions,\n    );\n    availableVariants[variantKey] = selectedVariant;\n  }\n\n  return Object.values(availableVariants);\n}\n\n/**\n * Returns a product options array with its relevant information\n * about the variant\n */\nexport function getProductOptions(\n  product: RecursivePartial<Product>,\n): MappedProductOptions[] {\n  // Checks for valid product input\n  const checkedProduct = checkProductParam(product, true);\n\n  if (!checkedProduct.options) return [];\n\n  const {\n    options,\n    selectedOrFirstAvailableVariant: selectedVariant,\n    adjacentVariants,\n    encodedVariantExistence,\n    encodedVariantAvailability,\n    handle: productHandle,\n  } = checkedProduct;\n  // Get a mapping of product option names to their index for matching encoded values\n  const productOptionMappings = mapProductOptions(options);\n\n  // Get the adjacent variants mapped to the encoded selected option values\n  const variants = mapVariants(\n    selectedVariant ? [selectedVariant, ...adjacentVariants] : adjacentVariants,\n    productOptionMappings,\n  );\n\n  // Get the key:value version of selected options for building url query params\n  const selectedOptions = mapSelectedProductOptionToObject(\n    selectedVariant ? selectedVariant.selectedOptions : [],\n  );\n\n  const productOptions = options.map((option, optionIndex) => {\n    return {\n      ...option,\n      optionValues: option.optionValues.map((value) => {\n        const targetOptionParams = {...selectedOptions}; // Clones the selected options\n\n        // Modify the selected option value to the current option value\n        targetOptionParams[option.name] = value.name;\n\n        // Encode the new selected option values as a key for mapping to the product variants\n        const targetKey = encodeSelectedProductOptionAsKey(\n          targetOptionParams || [],\n          productOptionMappings,\n        );\n\n        // Top-down option check for existence and availability\n        const topDownKey = (JSON.parse(targetKey) as number[]).slice(\n          0,\n          optionIndex + 1,\n        );\n        const exists = isOptionValueCombinationInEncodedVariant(\n          topDownKey,\n          encodedVariantExistence || '',\n        );\n        const available = isOptionValueCombinationInEncodedVariant(\n          topDownKey,\n          encodedVariantAvailability || '',\n        );\n\n        // Get the variant for the current option value if exists, else use the first selectable variant\n        const variant: ProductVariant =\n          variants[targetKey] || value.firstSelectableVariant;\n\n        // Build the query params for this option value\n        const variantOptionParam = mapSelectedProductOptionToObject(\n          variant.selectedOptions || [],\n        );\n        const searchParams = new URLSearchParams(variantOptionParam);\n        const handle = variant?.product?.handle;\n\n        return {\n          ...value,\n          variant,\n          handle,\n          variantUriQuery: searchParams.toString(),\n          selected: selectedOptions[option.name] === value.name,\n          exists,\n          available,\n          isDifferentProduct: handle !== productHandle,\n        };\n      }),\n    };\n  });\n\n  return productOptions;\n}\n"],"names":[],"mappings":"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"}

package/dist/node-dev/index.js

@@ -16,6 +16,7 @@ const codegen_helpers = require("./codegen.helpers.js");
 const cookiesUtils = require("./cookies-utils.js");
 const ExternalVideo = require("./ExternalVideo.js");
 const flattenConnection = require("./flatten-connection.js");
+const getProductOptions = require("./getProductOptions.js");
 const Image = require("./Image.js");
 const loadScript = require("./load-script.js");
 const MediaFile = require("./MediaFile.js");
@@ -29,7 +30,9 @@ const RichText = require("./RichText.js");
 const ShopifyProvider = require("./ShopifyProvider.js");
 const ShopPayButton = require("./ShopPayButton.js");
 const storefrontClient = require("./storefront-client.js");
+const trackingUtils = require("./tracking-utils.js");
 const useMoney = require("./useMoney.js");
+const useSelectedOptionInUrlParam = require("./useSelectedOptionInUrlParam.js");
 const useShopifyCookies = require("./useShopifyCookies.js");
 const Video = require("./Video.js");
 exports.AddToCartButton = AddToCartButton.AddToCartButton;
@@ -58,6 +61,9 @@ exports.storefrontApiCustomScalars = codegen_helpers.storefrontApiCustomScalars;
 exports.getShopifyCookies = cookiesUtils.getShopifyCookies;
 exports.ExternalVideo = ExternalVideo.ExternalVideo;
 exports.flattenConnection = flattenConnection.flattenConnection;
+exports.getAdjacentAndFirstAvailableVariants = getProductOptions.getAdjacentAndFirstAvailableVariants;
+exports.getProductOptions = getProductOptions.getProductOptions;
+exports.mapSelectedProductOptionToObject = getProductOptions.mapSelectedProductOptionToObject;
 exports.IMAGE_FRAGMENT = Image.IMAGE_FRAGMENT;
 exports.Image = Image.Image;
 exports.useLoadScript = loadScript.useLoadScript;
@@ -75,7 +81,11 @@ exports.ShopifyProvider = ShopifyProvider.ShopifyProvider;
 exports.useShop = ShopifyProvider.useShop;
 exports.ShopPayButton = ShopPayButton.ShopPayButton;
 exports.createStorefrontClient = storefrontClient.createStorefrontClient;
+exports.SHOPIFY_UNIQUE_TOKEN_HEADER = trackingUtils.SHOPIFY_UNIQUE_TOKEN_HEADER;
+exports.SHOPIFY_VISIT_TOKEN_HEADER = trackingUtils.SHOPIFY_VISIT_TOKEN_HEADER;
+exports.getTrackingValues = trackingUtils.getTrackingValues;
 exports.useMoney = useMoney.useMoney;
+exports.useSelectedOptionInUrlParam = useSelectedOptionInUrlParam.useSelectedOptionInUrlParam;
 exports.useShopifyCookies = useShopifyCookies.useShopifyCookies;
 exports.Video = Video.Video;
 //# sourceMappingURL=index.js.map

package/dist/node-dev/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/node-dev/index.mjs

@@ -14,6 +14,7 @@ import { customerAccountApiCustomScalars, storefrontApiCustomScalars } from "./c
 import { getShopifyCookies } from "./cookies-utils.mjs";
 import { ExternalVideo } from "./ExternalVideo.mjs";
 import { flattenConnection } from "./flatten-connection.mjs";
+import { getAdjacentAndFirstAvailableVariants, getProductOptions, mapSelectedProductOptionToObject } from "./getProductOptions.mjs";
 import { IMAGE_FRAGMENT, Image } from "./Image.mjs";
 import { useLoadScript } from "./load-script.mjs";
 import { MediaFile } from "./MediaFile.mjs";
@@ -27,7 +28,9 @@ import { RichText } from "./RichText.mjs";
 import { ShopifyProvider, useShop } from "./ShopifyProvider.mjs";
 import { ShopPayButton } from "./ShopPayButton.mjs";
 import { createStorefrontClient } from "./storefront-client.mjs";
+import { SHOPIFY_UNIQUE_TOKEN_HEADER, SHOPIFY_VISIT_TOKEN_HEADER, getTrackingValues } from "./tracking-utils.mjs";
 import { useMoney } from "./useMoney.mjs";
+import { useSelectedOptionInUrlParam } from "./useSelectedOptionInUrlParam.mjs";
 import { useShopifyCookies } from "./useShopifyCookies.mjs";
 import { Video } from "./Video.mjs";
 export {
@@ -54,6 +57,8 @@ export {
   SHOPIFY_STOREFRONT_ID_HEADER,
   SHOPIFY_STOREFRONT_S_HEADER,
   SHOPIFY_STOREFRONT_Y_HEADER,
+  SHOPIFY_UNIQUE_TOKEN_HEADER,
+  SHOPIFY_VISIT_TOKEN_HEADER,
   SHOPIFY_Y,
   ShopPayButton,
   ShopifyProvider,
@@ -63,9 +68,13 @@ export {
   customerAccountApiCustomScalars,
   decodeEncodedVariant,
   flattenConnection,
+  getAdjacentAndFirstAvailableVariants,
   getClientBrowserParameters,
+  getProductOptions,
   getShopifyCookies,
+  getTrackingValues,
   isOptionValueCombinationInEncodedVariant,
+  mapSelectedProductOptionToObject,
   parseGid,
   parseMetafield,
   sendShopifyAnalytics,
@@ -75,6 +84,7 @@ export {
   useLoadScript,
   useMoney,
   useProduct,
+  useSelectedOptionInUrlParam,
   useShop,
   useShopifyCookies
 };

package/dist/node-dev/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/node-dev/packages/hydrogen-react/package.json.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const version = "2024.10.0";
+const version = "2024.10.2";
 exports.version = version;
 //# sourceMappingURL=package.json.js.map

package/dist/node-dev/packages/hydrogen-react/package.json.mjs

@@ -1,4 +1,4 @@
-const version = "2024.10.0";
+const version = "2024.10.2";
 export {
   version
 };

package/dist/node-dev/tracking-utils.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const SHOPIFY_VISIT_TOKEN_HEADER = "X-Shopify-VisitToken";
+const SHOPIFY_UNIQUE_TOKEN_HEADER = "X-Shopify-UniqueToken";
+const cachedTrackingValues = { current: null };
+function getTrackingValues(cookieString) {
+  var _a, _b, _c;
+  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;
+        const isMatch = (
+          // Same origin (exact host match)
+          matchedHost === currentHost || // Subdomain with SFAPI path
+          sfapiPath && (matchedHost == null ? void 0 : matchedHost.endsWith(`.${currentHost}`))
+        );
+        if (isMatch) {
+          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 cookieString === "string" ? cookieString : typeof document !== "undefined" ? document.cookie : "";
+    trackingValues = {
+      uniqueToken: ((_a = cookie.match(/\b_shopify_y=([^;]+)/)) == null ? void 0 : _a[1]) || "",
+      visitToken: ((_b = cookie.match(/\b_shopify_s=([^;]+)/)) == null ? void 0 : _b[1]) || "",
+      consent: ((_c = cookie.match(/\b_tracking_consent=([^;]+)/)) == null ? void 0 : _c[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;
+}
+exports.SHOPIFY_UNIQUE_TOKEN_HEADER = SHOPIFY_UNIQUE_TOKEN_HEADER;
+exports.SHOPIFY_VISIT_TOKEN_HEADER = SHOPIFY_VISIT_TOKEN_HEADER;
+exports.cachedTrackingValues = cachedTrackingValues;
+exports.getTrackingValues = getTrackingValues;
+//# sourceMappingURL=tracking-utils.js.map

package/dist/node-dev/tracking-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking-utils.js","sources":["../../src/tracking-utils.ts"],"sourcesContent":["/** Storefront API header for VisitToken */\nexport const SHOPIFY_VISIT_TOKEN_HEADER = 'X-Shopify-VisitToken';\n/** Storefront API header for UniqueToken */\nexport const SHOPIFY_UNIQUE_TOKEN_HEADER = 'X-Shopify-UniqueToken';\n\nexport type TrackingValues = {\n  /** Identifier for the unique user. Equivalent to the deprecated _shopify_y cookie */\n  uniqueToken: string;\n  /** Identifier for the current visit. Equivalent to the deprecated _shopify_s cookie */\n  visitToken: string;\n  /** Represents the consent given by the user or the default region consent configured in Admin */\n  consent: string;\n};\n\n// Cache values to avoid losing them when performance\n// entries are cleared from the buffer over time.\nexport const cachedTrackingValues: {\n  current: null | TrackingValues;\n} = {current: null};\n\n/**\n * Retrieves user session tracking values for analytics\n * and marketing from the browser environment.\n * @param cookieString - Optional cookie string to parse for deprecated cookie fallback.\n *   Used internally by getShopifyCookies for backward compatibility.\n */\nexport function getTrackingValues(cookieString?: string): TrackingValues {\n  // Overall behavior: Tracking values are returned in Server-Timing headers from\n  // Storefront API responses, and we want to find and return these tracking values.\n  //\n  // Search recent fetches for SFAPI requests matching either: same origin (proxy case)\n  // or a subdomain of the current host (eg: checkout subdomain, if there is no proxy).\n  // We consider SF API-like endpoints (/api/.../graphql.json) on subdomains, as well as\n  // any same-origin request. The reason for the latter is that Hydrogen server collects\n  // tracking values and returns them in any non-cached response, not just direct SF API\n  // responses. For example, a cart mutation in a server action could return tracking values.\n  //\n  // If we didn't find tracking values in fetch requests, we fall back to checking cached values,\n  // then the initial page navigation entry, and finally the deprecated `_shopify_s` and `_shopify_y`.\n\n  let trackingValues: TrackingValues | undefined;\n\n  if (\n    typeof window !== 'undefined' &&\n    typeof window.performance !== 'undefined'\n  ) {\n    try {\n      // RE to extract host and optionally match SFAPI pathname.\n      // Group 1: host (e.g. \"checkout.mystore.com\")\n      // Group 2: SFAPI path if present (e.g. \"/api/2024-01/graphql.json\")\n      const resourceRE =\n        /^https?:\\/\\/([^/]+)(\\/api\\/(?:unstable|2\\d{3}-\\d{2})\\/graphql\\.json(?=$|\\?))?/;\n\n      // Search backwards through resource entries to find the most recent match.\n      // Match criteria (first one with _y and _s values wins):\n      // - Same origin (exact host match) with tracking values, OR\n      // - Subdomain + SFAPI pathname with tracking values\n      const entries = performance.getEntriesByType(\n        'resource',\n      ) as PerformanceResourceTiming[];\n\n      let matchedValues: ReturnType<typeof extractFromPerformanceEntry>;\n\n      for (let i = entries.length - 1; i >= 0; i--) {\n        const entry = entries[i];\n\n        if (entry.initiatorType !== 'fetch') continue;\n\n        const currentHost = window.location.host;\n        const match = entry.name.match(resourceRE);\n        if (!match) continue;\n\n        const [, matchedHost, sfapiPath] = match;\n\n        const isMatch =\n          // Same origin (exact host match)\n          matchedHost === currentHost ||\n          // Subdomain with SFAPI path\n          (sfapiPath && matchedHost?.endsWith(`.${currentHost}`));\n\n        if (isMatch) {\n          const values = extractFromPerformanceEntry(entry);\n          if (values) {\n            matchedValues = values;\n            break;\n          }\n        }\n      }\n\n      if (matchedValues) {\n        trackingValues = matchedValues;\n      }\n\n      // Resource entries have a limited buffer and are removed over time.\n      // Cache the latest values for future calls if we find them.\n      // A cached resource entry is always newer than a navigation entry.\n      if (trackingValues) {\n        cachedTrackingValues.current = trackingValues;\n      } else if (cachedTrackingValues.current) {\n        // Fallback to cached values from previous calls:\n        trackingValues = cachedTrackingValues.current;\n      }\n\n      if (!trackingValues) {\n        // Fallback to navigation entry from full page rendering load:\n        const navigationEntries = performance.getEntriesByType(\n          'navigation',\n        )[0] as PerformanceNavigationTiming;\n\n        // Navigation entries might omit consent when the Hydrogen server generates it.\n        // In this case, we skip consent requirement and only extract _y and _s values.\n        trackingValues = extractFromPerformanceEntry(navigationEntries, false);\n      }\n      // eslint-disable-next-line no-empty\n    } catch {}\n  }\n\n  // Fallback to deprecated cookies to support transitioning:\n  if (!trackingValues) {\n    const cookie =\n      typeof cookieString === 'string'\n        ? cookieString\n        : typeof document !== 'undefined'\n        ? document.cookie\n        : '';\n\n    trackingValues = {\n      uniqueToken: cookie.match(/\\b_shopify_y=([^;]+)/)?.[1] || '',\n      visitToken: cookie.match(/\\b_shopify_s=([^;]+)/)?.[1] || '',\n      consent: cookie.match(/\\b_tracking_consent=([^;]+)/)?.[1] || '',\n    };\n  }\n\n  return trackingValues;\n}\n\nfunction extractFromPerformanceEntry(\n  entry: PerformanceNavigationTiming | PerformanceResourceTiming,\n  isConsentRequired = true,\n): TrackingValues | undefined {\n  let uniqueToken = '';\n  let visitToken = '';\n  let consent = '';\n\n  const serverTiming = entry.serverTiming;\n  // Quick check: we need at least 3 entries (_y, _s, _cmp)\n  if (serverTiming && serverTiming.length >= 3) {\n    // Iterate backwards since our headers are typically at the end\n    for (let i = serverTiming.length - 1; i >= 0; i--) {\n      const {name, description} = serverTiming[i];\n      if (!name || !description) continue;\n\n      if (name === '_y') {\n        uniqueToken = description;\n      } else if (name === '_s') {\n        visitToken = description;\n      } else if (name === '_cmp') {\n        // _cmp (consent management platform) holds the consent value\n        // used by consent-tracking-api and privacy-banner scripts.\n        consent = description;\n      }\n\n      if (uniqueToken && visitToken && consent) break;\n    }\n  }\n\n  return uniqueToken && visitToken && (isConsentRequired ? consent : true)\n    ? {uniqueToken, visitToken, consent}\n    : undefined;\n}\n"],"names":[],"mappings":";;AACO,MAAM,6BAA6B;AAEnC,MAAM,8BAA8B;AAa9B,MAAA,uBAET,EAAC,SAAS,KAAI;AAQX,SAAS,kBAAkB,cAAuC;;AAcnE,MAAA;AAEJ,MACE,OAAO,WAAW,eAClB,OAAO,OAAO,gBAAgB,aAC9B;AACI,QAAA;AAIF,YAAM,aACJ;AAMF,YAAM,UAAU,YAAY;AAAA,QAC1B;AAAA,MAAA;AAGE,UAAA;AAEJ,eAAS,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,KAAK;AACtC,cAAA,QAAQ,QAAQ,CAAC;AAEvB,YAAI,MAAM,kBAAkB;AAAS;AAE/B,cAAA,cAAc,OAAO,SAAS;AACpC,cAAM,QAAQ,MAAM,KAAK,MAAM,UAAU;AACzC,YAAI,CAAC;AAAO;AAEZ,cAAM,GAAG,aAAa,SAAS,IAAI;AAE7B,cAAA;AAAA;AAAA,UAEJ,gBAAgB;AAAA,UAEf,cAAa,2CAAa,SAAS,IAAI,WAAW;AAAA;AAErD,YAAI,SAAS;AACL,gBAAA,SAAS,4BAA4B,KAAK;AAChD,cAAI,QAAQ;AACM,4BAAA;AAChB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,UAAI,eAAe;AACA,yBAAA;AAAA,MACnB;AAKA,UAAI,gBAAgB;AAClB,6BAAqB,UAAU;AAAA,MAAA,WACtB,qBAAqB,SAAS;AAEvC,yBAAiB,qBAAqB;AAAA,MACxC;AAEA,UAAI,CAAC,gBAAgB;AAEnB,cAAM,oBAAoB,YAAY;AAAA,UACpC;AAAA,UACA,CAAC;AAIc,yBAAA,4BAA4B,mBAAmB,KAAK;AAAA,MACvE;AAAA,IAAA,QAEM;AAAA,IAAC;AAAA,EACX;AAGA,MAAI,CAAC,gBAAgB;AACb,UAAA,SACJ,OAAO,iBAAiB,WACpB,eACA,OAAO,aAAa,cACpB,SAAS,SACT;AAEW,qBAAA;AAAA,MACf,eAAa,YAAO,MAAM,sBAAsB,MAAnC,mBAAuC,OAAM;AAAA,MAC1D,cAAY,YAAO,MAAM,sBAAsB,MAAnC,mBAAuC,OAAM;AAAA,MACzD,WAAS,YAAO,MAAM,6BAA6B,MAA1C,mBAA8C,OAAM;AAAA,IAAA;AAAA,EAEjE;AAEO,SAAA;AACT;AAEA,SAAS,4BACP,OACA,oBAAoB,MACQ;AAC5B,MAAI,cAAc;AAClB,MAAI,aAAa;AACjB,MAAI,UAAU;AAEd,QAAM,eAAe,MAAM;AAEvB,MAAA,gBAAgB,aAAa,UAAU,GAAG;AAE5C,aAAS,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;AACjD,YAAM,EAAC,MAAM,YAAW,IAAI,aAAa,CAAC;AACtC,UAAA,CAAC,QAAQ,CAAC;AAAa;AAE3B,UAAI,SAAS,MAAM;AACH,sBAAA;AAAA,MAAA,WACL,SAAS,MAAM;AACX,qBAAA;AAAA,MAAA,WACJ,SAAS,QAAQ;AAGhB,kBAAA;AAAA,MACZ;AAEA,UAAI,eAAe,cAAc;AAAS;AAAA,IAC5C;AAAA,EACF;AAEO,SAAA,eAAe,eAAe,oBAAoB,UAAU,QAC/D,EAAC,aAAa,YAAY,QAC1B,IAAA;AACN;;;;;"}

package/dist/node-dev/tracking-utils.mjs

@@ -0,0 +1,92 @@
+const SHOPIFY_VISIT_TOKEN_HEADER = "X-Shopify-VisitToken";
+const SHOPIFY_UNIQUE_TOKEN_HEADER = "X-Shopify-UniqueToken";
+const cachedTrackingValues = { current: null };
+function getTrackingValues(cookieString) {
+  var _a, _b, _c;
+  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;
+        const isMatch = (
+          // Same origin (exact host match)
+          matchedHost === currentHost || // Subdomain with SFAPI path
+          sfapiPath && (matchedHost == null ? void 0 : matchedHost.endsWith(`.${currentHost}`))
+        );
+        if (isMatch) {
+          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 cookieString === "string" ? cookieString : typeof document !== "undefined" ? document.cookie : "";
+    trackingValues = {
+      uniqueToken: ((_a = cookie.match(/\b_shopify_y=([^;]+)/)) == null ? void 0 : _a[1]) || "",
+      visitToken: ((_b = cookie.match(/\b_shopify_s=([^;]+)/)) == null ? void 0 : _b[1]) || "",
+      consent: ((_c = cookie.match(/\b_tracking_consent=([^;]+)/)) == null ? void 0 : _c[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;
+}
+export {
+  SHOPIFY_UNIQUE_TOKEN_HEADER,
+  SHOPIFY_VISIT_TOKEN_HEADER,
+  cachedTrackingValues,
+  getTrackingValues
+};
+//# sourceMappingURL=tracking-utils.mjs.map

package/dist/node-dev/tracking-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking-utils.mjs","sources":["../../src/tracking-utils.ts"],"sourcesContent":["/** Storefront API header for VisitToken */\nexport const SHOPIFY_VISIT_TOKEN_HEADER = 'X-Shopify-VisitToken';\n/** Storefront API header for UniqueToken */\nexport const SHOPIFY_UNIQUE_TOKEN_HEADER = 'X-Shopify-UniqueToken';\n\nexport type TrackingValues = {\n  /** Identifier for the unique user. Equivalent to the deprecated _shopify_y cookie */\n  uniqueToken: string;\n  /** Identifier for the current visit. Equivalent to the deprecated _shopify_s cookie */\n  visitToken: string;\n  /** Represents the consent given by the user or the default region consent configured in Admin */\n  consent: string;\n};\n\n// Cache values to avoid losing them when performance\n// entries are cleared from the buffer over time.\nexport const cachedTrackingValues: {\n  current: null | TrackingValues;\n} = {current: null};\n\n/**\n * Retrieves user session tracking values for analytics\n * and marketing from the browser environment.\n * @param cookieString - Optional cookie string to parse for deprecated cookie fallback.\n *   Used internally by getShopifyCookies for backward compatibility.\n */\nexport function getTrackingValues(cookieString?: string): TrackingValues {\n  // Overall behavior: Tracking values are returned in Server-Timing headers from\n  // Storefront API responses, and we want to find and return these tracking values.\n  //\n  // Search recent fetches for SFAPI requests matching either: same origin (proxy case)\n  // or a subdomain of the current host (eg: checkout subdomain, if there is no proxy).\n  // We consider SF API-like endpoints (/api/.../graphql.json) on subdomains, as well as\n  // any same-origin request. The reason for the latter is that Hydrogen server collects\n  // tracking values and returns them in any non-cached response, not just direct SF API\n  // responses. For example, a cart mutation in a server action could return tracking values.\n  //\n  // If we didn't find tracking values in fetch requests, we fall back to checking cached values,\n  // then the initial page navigation entry, and finally the deprecated `_shopify_s` and `_shopify_y`.\n\n  let trackingValues: TrackingValues | undefined;\n\n  if (\n    typeof window !== 'undefined' &&\n    typeof window.performance !== 'undefined'\n  ) {\n    try {\n      // RE to extract host and optionally match SFAPI pathname.\n      // Group 1: host (e.g. \"checkout.mystore.com\")\n      // Group 2: SFAPI path if present (e.g. \"/api/2024-01/graphql.json\")\n      const resourceRE =\n        /^https?:\\/\\/([^/]+)(\\/api\\/(?:unstable|2\\d{3}-\\d{2})\\/graphql\\.json(?=$|\\?))?/;\n\n      // Search backwards through resource entries to find the most recent match.\n      // Match criteria (first one with _y and _s values wins):\n      // - Same origin (exact host match) with tracking values, OR\n      // - Subdomain + SFAPI pathname with tracking values\n      const entries = performance.getEntriesByType(\n        'resource',\n      ) as PerformanceResourceTiming[];\n\n      let matchedValues: ReturnType<typeof extractFromPerformanceEntry>;\n\n      for (let i = entries.length - 1; i >= 0; i--) {\n        const entry = entries[i];\n\n        if (entry.initiatorType !== 'fetch') continue;\n\n        const currentHost = window.location.host;\n        const match = entry.name.match(resourceRE);\n        if (!match) continue;\n\n        const [, matchedHost, sfapiPath] = match;\n\n        const isMatch =\n          // Same origin (exact host match)\n          matchedHost === currentHost ||\n          // Subdomain with SFAPI path\n          (sfapiPath && matchedHost?.endsWith(`.${currentHost}`));\n\n        if (isMatch) {\n          const values = extractFromPerformanceEntry(entry);\n          if (values) {\n            matchedValues = values;\n            break;\n          }\n        }\n      }\n\n      if (matchedValues) {\n        trackingValues = matchedValues;\n      }\n\n      // Resource entries have a limited buffer and are removed over time.\n      // Cache the latest values for future calls if we find them.\n      // A cached resource entry is always newer than a navigation entry.\n      if (trackingValues) {\n        cachedTrackingValues.current = trackingValues;\n      } else if (cachedTrackingValues.current) {\n        // Fallback to cached values from previous calls:\n        trackingValues = cachedTrackingValues.current;\n      }\n\n      if (!trackingValues) {\n        // Fallback to navigation entry from full page rendering load:\n        const navigationEntries = performance.getEntriesByType(\n          'navigation',\n        )[0] as PerformanceNavigationTiming;\n\n        // Navigation entries might omit consent when the Hydrogen server generates it.\n        // In this case, we skip consent requirement and only extract _y and _s values.\n        trackingValues = extractFromPerformanceEntry(navigationEntries, false);\n      }\n      // eslint-disable-next-line no-empty\n    } catch {}\n  }\n\n  // Fallback to deprecated cookies to support transitioning:\n  if (!trackingValues) {\n    const cookie =\n      typeof cookieString === 'string'\n        ? cookieString\n        : typeof document !== 'undefined'\n        ? document.cookie\n        : '';\n\n    trackingValues = {\n      uniqueToken: cookie.match(/\\b_shopify_y=([^;]+)/)?.[1] || '',\n      visitToken: cookie.match(/\\b_shopify_s=([^;]+)/)?.[1] || '',\n      consent: cookie.match(/\\b_tracking_consent=([^;]+)/)?.[1] || '',\n    };\n  }\n\n  return trackingValues;\n}\n\nfunction extractFromPerformanceEntry(\n  entry: PerformanceNavigationTiming | PerformanceResourceTiming,\n  isConsentRequired = true,\n): TrackingValues | undefined {\n  let uniqueToken = '';\n  let visitToken = '';\n  let consent = '';\n\n  const serverTiming = entry.serverTiming;\n  // Quick check: we need at least 3 entries (_y, _s, _cmp)\n  if (serverTiming && serverTiming.length >= 3) {\n    // Iterate backwards since our headers are typically at the end\n    for (let i = serverTiming.length - 1; i >= 0; i--) {\n      const {name, description} = serverTiming[i];\n      if (!name || !description) continue;\n\n      if (name === '_y') {\n        uniqueToken = description;\n      } else if (name === '_s') {\n        visitToken = description;\n      } else if (name === '_cmp') {\n        // _cmp (consent management platform) holds the consent value\n        // used by consent-tracking-api and privacy-banner scripts.\n        consent = description;\n      }\n\n      if (uniqueToken && visitToken && consent) break;\n    }\n  }\n\n  return uniqueToken && visitToken && (isConsentRequired ? consent : true)\n    ? {uniqueToken, visitToken, consent}\n    : undefined;\n}\n"],"names":[],"mappings":"AACO,MAAM,6BAA6B;AAEnC,MAAM,8BAA8B;AAa9B,MAAA,uBAET,EAAC,SAAS,KAAI;AAQX,SAAS,kBAAkB,cAAuC;AAzBlE;AAuCD,MAAA;AAEJ,MACE,OAAO,WAAW,eAClB,OAAO,OAAO,gBAAgB,aAC9B;AACI,QAAA;AAIF,YAAM,aACJ;AAMF,YAAM,UAAU,YAAY;AAAA,QAC1B;AAAA,MAAA;AAGE,UAAA;AAEJ,eAAS,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,KAAK;AACtC,cAAA,QAAQ,QAAQ,CAAC;AAEvB,YAAI,MAAM,kBAAkB;AAAS;AAE/B,cAAA,cAAc,OAAO,SAAS;AACpC,cAAM,QAAQ,MAAM,KAAK,MAAM,UAAU;AACzC,YAAI,CAAC;AAAO;AAEZ,cAAM,GAAG,aAAa,SAAS,IAAI;AAE7B,cAAA;AAAA;AAAA,UAEJ,gBAAgB;AAAA,UAEf,cAAa,2CAAa,SAAS,IAAI,WAAW;AAAA;AAErD,YAAI,SAAS;AACL,gBAAA,SAAS,4BAA4B,KAAK;AAChD,cAAI,QAAQ;AACM,4BAAA;AAChB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,UAAI,eAAe;AACA,yBAAA;AAAA,MACnB;AAKA,UAAI,gBAAgB;AAClB,6BAAqB,UAAU;AAAA,MAAA,WACtB,qBAAqB,SAAS;AAEvC,yBAAiB,qBAAqB;AAAA,MACxC;AAEA,UAAI,CAAC,gBAAgB;AAEnB,cAAM,oBAAoB,YAAY;AAAA,UACpC;AAAA,UACA,CAAC;AAIc,yBAAA,4BAA4B,mBAAmB,KAAK;AAAA,MACvE;AAAA,IAAA,QAEM;AAAA,IAAC;AAAA,EACX;AAGA,MAAI,CAAC,gBAAgB;AACb,UAAA,SACJ,OAAO,iBAAiB,WACpB,eACA,OAAO,aAAa,cACpB,SAAS,SACT;AAEW,qBAAA;AAAA,MACf,eAAa,YAAO,MAAM,sBAAsB,MAAnC,mBAAuC,OAAM;AAAA,MAC1D,cAAY,YAAO,MAAM,sBAAsB,MAAnC,mBAAuC,OAAM;AAAA,MACzD,WAAS,YAAO,MAAM,6BAA6B,MAA1C,mBAA8C,OAAM;AAAA,IAAA;AAAA,EAEjE;AAEO,SAAA;AACT;AAEA,SAAS,4BACP,OACA,oBAAoB,MACQ;AAC5B,MAAI,cAAc;AAClB,MAAI,aAAa;AACjB,MAAI,UAAU;AAEd,QAAM,eAAe,MAAM;AAEvB,MAAA,gBAAgB,aAAa,UAAU,GAAG;AAE5C,aAAS,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;AACjD,YAAM,EAAC,MAAM,YAAW,IAAI,aAAa,CAAC;AACtC,UAAA,CAAC,QAAQ,CAAC;AAAa;AAE3B,UAAI,SAAS,MAAM;AACH,sBAAA;AAAA,MAAA,WACL,SAAS,MAAM;AACX,qBAAA;AAAA,MAAA,WACJ,SAAS,QAAQ;AAGhB,kBAAA;AAAA,MACZ;AAEA,UAAI,eAAe,cAAc;AAAS;AAAA,IAC5C;AAAA,EACF;AAEO,SAAA,eAAe,eAAe,oBAAoB,UAAU,QAC/D,EAAC,aAAa,YAAY,QAC1B,IAAA;AACN;"}

package/dist/node-dev/useSelectedOptionInUrlParam.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const getProductOptions = require("./getProductOptions.js");
+function useSelectedOptionInUrlParam(selectedOptions) {
+  React.useEffect(() => {
+    const optionsSearchParams = new URLSearchParams(
+      getProductOptions.mapSelectedProductOptionToObject(selectedOptions || [])
+    );
+    const currentSearchParams = new URLSearchParams(window.location.search);
+    const combinedSearchParams = new URLSearchParams({
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ...Object.fromEntries(currentSearchParams),
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ...Object.fromEntries(optionsSearchParams)
+    });
+    if (combinedSearchParams.size > 0) {
+      window.history.replaceState(
+        {},
+        "",
+        `${window.location.pathname}?${combinedSearchParams.toString()}`
+      );
+    }
+  }, [JSON.stringify(selectedOptions)]);
+  return null;
+}
+exports.useSelectedOptionInUrlParam = useSelectedOptionInUrlParam;
+//# sourceMappingURL=useSelectedOptionInUrlParam.js.map

package/dist/node-dev/useSelectedOptionInUrlParam.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedOptionInUrlParam.js","sources":["../../src/useSelectedOptionInUrlParam.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {mapSelectedProductOptionToObject} from './getProductOptions.js';\nimport {SelectedOption} from './storefront-api-types.js';\n\nexport function useSelectedOptionInUrlParam(\n  selectedOptions: Pick<SelectedOption, 'name' | 'value'>[],\n): null {\n  useEffect(() => {\n    const optionsSearchParams = new URLSearchParams(\n      mapSelectedProductOptionToObject(selectedOptions || []),\n    );\n    const currentSearchParams = new URLSearchParams(window.location.search);\n\n    // ts ignoring the URLSearchParams not iterable error for now\n    // https://stackoverflow.com/questions/72522489/urlsearchparams-not-accepting-string#answer-72522838\n    // TODO: update ts lib\n    const combinedSearchParams = new URLSearchParams({\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      ...Object.fromEntries(currentSearchParams),\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      ...Object.fromEntries(optionsSearchParams),\n    });\n\n    if (combinedSearchParams.size > 0) {\n      window.history.replaceState(\n        {},\n        '',\n        `${window.location.pathname}?${combinedSearchParams.toString()}`,\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(selectedOptions)]);\n\n  return null;\n}\n"],"names":["useEffect","mapSelectedProductOptionToObject"],"mappings":";;;;AAIO,SAAS,4BACd,iBACM;AACNA,QAAAA,UAAU,MAAM;AACd,UAAM,sBAAsB,IAAI;AAAA,MAC9BC,kBAAA,iCAAiC,mBAAmB,EAAE;AAAA,IAAA;AAExD,UAAM,sBAAsB,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAKhE,UAAA,uBAAuB,IAAI,gBAAgB;AAAA;AAAA;AAAA,MAG/C,GAAG,OAAO,YAAY,mBAAmB;AAAA;AAAA;AAAA,MAGzC,GAAG,OAAO,YAAY,mBAAmB;AAAA,IAAA,CAC1C;AAEG,QAAA,qBAAqB,OAAO,GAAG;AACjC,aAAO,QAAQ;AAAA,QACb,CAAC;AAAA,QACD;AAAA,QACA,GAAG,OAAO,SAAS,QAAQ,IAAI,qBAAqB,UAAU;AAAA,MAAA;AAAA,IAElE;AAAA,KAEC,CAAC,KAAK,UAAU,eAAe,CAAC,CAAC;AAE7B,SAAA;AACT;;"}