@shopify/hydrogen-react 2024.7.6 → 2024.10.1

package/dist/browser-dev/RichText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.mjs","sources":["../../src/RichText.tsx"],"sourcesContent":["import {createElement, Fragment, type ReactNode, useMemo} from 'react';\nimport type {RichTextASTNode} from './RichText.types.js';\nimport {\n  type CustomComponents,\n  RichTextComponents,\n} from './RichText.components.js';\n\nexport interface RichTextPropsBase<ComponentGeneric extends React.ElementType> {\n  /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n  as?: ComponentGeneric;\n  /** The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting). */\n  data: string;\n  /** Customize how rich text components are rendered */\n  components?: CustomComponents;\n  /** Remove rich text formatting and render plain text */\n  plain?: boolean;\n}\n\nexport function RichText<ComponentGeneric extends React.ElementType = 'div'>({\n  as,\n  data,\n  plain,\n  components,\n  ...passthroughProps\n}: RichTextProps<ComponentGeneric>): JSX.Element {\n  try {\n    const Wrapper = as ?? 'div';\n    const parsedData = useMemo(\n      () => JSON.parse(data) as RichTextASTNode,\n      [data],\n    );\n\n    return (\n      <Wrapper {...passthroughProps}>\n        {plain\n          ? richTextToString(parsedData)\n          : serializeRichTextASTNode(components, parsedData)}\n      </Wrapper>\n    );\n  } catch (e) {\n    throw new Error(\n      '[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield',\n      {\n        cause: e,\n      },\n    );\n  }\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type RichTextProps<ComponentGeneric extends React.ElementType> =\n  RichTextPropsBase<ComponentGeneric> &\n    Omit<\n      React.ComponentPropsWithoutRef<ComponentGeneric>,\n      keyof RichTextPropsBase<ComponentGeneric>\n    >;\n\nfunction serializeRichTextASTNode(\n  components: CustomComponents = {},\n  node: RichTextASTNode,\n  index = 0,\n): ReactNode {\n  let children;\n  if ('children' in node) {\n    children = node.children.map((child, childIndex) =>\n      serializeRichTextASTNode(components, child, childIndex),\n    );\n  }\n\n  const Component =\n    components[node.type === 'list-item' ? 'listItem' : node.type] ??\n    RichTextComponents[node.type];\n\n  switch (node.type) {\n    case 'root':\n      return createElement(\n        Component as Exclude<CustomComponents['root'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'root',\n            children,\n          },\n        },\n      );\n    case 'heading':\n      return createElement(\n        Component as Exclude<CustomComponents['heading'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'heading',\n            level: node.level,\n            children,\n          },\n        },\n      );\n    case 'paragraph':\n      return createElement(\n        Component as Exclude<CustomComponents['paragraph'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'paragraph',\n            children,\n          },\n        },\n      );\n    case 'text': {\n      const elements = (node.value ?? '')\n        .split('\\n')\n        .flatMap((value, subindex) => {\n          const key = `${index}-${value}-${subindex}`;\n          const textElement = createElement(\n            Component as Exclude<CustomComponents['text'], undefined>,\n            {\n              key,\n              node: {\n                type: 'text',\n                italic: node.italic,\n                bold: node.bold,\n                value,\n              },\n            },\n          );\n\n          // Add a `<br>` before each substring except the first one\n          return subindex === 0\n            ? textElement\n            : [createElement('br', {key: `${key}-br`}), textElement];\n        });\n\n      return elements.length > 1\n        ? createElement(Fragment, {key: index}, elements)\n        : elements[0];\n    }\n    case 'link':\n      return createElement(\n        Component as Exclude<CustomComponents['link'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'link',\n            url: node.url,\n            title: node.title,\n            target: node.target,\n            children,\n          },\n        },\n      );\n    case 'list':\n      return createElement(\n        Component as Exclude<CustomComponents['list'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'list',\n            listType: node.listType,\n            children,\n          },\n        },\n      );\n    case 'list-item':\n      return createElement(\n        Component as Exclude<CustomComponents['listItem'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'list-item',\n            children,\n          },\n        },\n      );\n  }\n}\n\nfunction richTextToString(\n  node: RichTextASTNode,\n  result: string[] = [],\n): string {\n  switch (node.type) {\n    case 'root':\n      node.children.forEach((child) => richTextToString(child, result));\n      break;\n    case 'heading':\n    case 'paragraph':\n      node.children.forEach((child) => richTextToString(child, result));\n      result.push(' ');\n      break;\n    case 'text':\n      result.push(node.value || '');\n      break;\n    case 'link':\n      node.children.forEach((child) => richTextToString(child, result));\n      break;\n    case 'list':\n      node.children.forEach((item) => {\n        if (item.children) {\n          item.children.forEach((child) => richTextToString(child, result));\n        }\n        result.push(' ');\n      });\n      break;\n    default:\n      throw new Error(`Unknown node encountered ${node.type}`);\n  }\n\n  return result.join('').trim();\n}\n\n// This is only for documenation purposes, and it is not used in the code.\nexport type RichTextPropsForDocs<AsType extends React.ElementType = 'div'> =\n  RichTextPropsBase<AsType>;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RichText.mjs","sources":["../../src/RichText.tsx"],"sourcesContent":["import {createElement, Fragment, type ReactNode, useMemo} from 'react';\nimport type {RichTextASTNode} from './RichText.types.js';\nimport {\n  type CustomComponents,\n  RichTextComponents,\n} from './RichText.components.js';\n\nexport interface RichTextPropsBase<ComponentGeneric extends React.ElementType> {\n  /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n  as?: ComponentGeneric;\n  /** The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting). */\n  data: string;\n  /** Customize how rich text components are rendered */\n  components?: CustomComponents;\n  /** Remove rich text formatting and render plain text */\n  plain?: boolean;\n}\n\nexport function RichText<ComponentGeneric extends React.ElementType = 'div'>({\n  as,\n  data,\n  plain,\n  components,\n  ...passthroughProps\n}: RichTextProps<ComponentGeneric>): JSX.Element {\n  try {\n    const Wrapper = as ?? 'div';\n    const parsedData = useMemo(\n      () => JSON.parse(data) as RichTextASTNode,\n      [data],\n    );\n\n    return (\n      <Wrapper {...passthroughProps}>\n        {plain\n          ? richTextToString(parsedData)\n          : serializeRichTextASTNode(components, parsedData)}\n      </Wrapper>\n    );\n  } catch (e) {\n    throw new Error(\n      '[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield',\n      {\n        cause: e,\n      },\n    );\n  }\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type RichTextProps<ComponentGeneric extends React.ElementType> =\n  RichTextPropsBase<ComponentGeneric> &\n    Omit<\n      React.ComponentPropsWithoutRef<ComponentGeneric>,\n      keyof RichTextPropsBase<ComponentGeneric>\n    >;\n\nfunction serializeRichTextASTNode(\n  components: CustomComponents = {},\n  node: RichTextASTNode,\n  index = 0,\n): ReactNode {\n  let children;\n  if ('children' in node) {\n    children = node.children.map((child, childIndex) =>\n      serializeRichTextASTNode(components, child, childIndex),\n    );\n  }\n\n  const Component =\n    components[node.type === 'list-item' ? 'listItem' : node.type] ??\n    RichTextComponents[node.type];\n\n  switch (node.type) {\n    case 'root':\n      return createElement(\n        Component as Exclude<CustomComponents['root'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'root',\n            children,\n          },\n        },\n      );\n    case 'heading':\n      return createElement(\n        Component as Exclude<CustomComponents['heading'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'heading',\n            level: node.level,\n            children,\n          },\n        },\n      );\n    case 'paragraph':\n      return createElement(\n        Component as Exclude<CustomComponents['paragraph'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'paragraph',\n            children,\n          },\n        },\n      );\n    case 'text': {\n      const elements = (node.value ?? '')\n        .split('\\n')\n        .flatMap((value, subindex) => {\n          const key = `${index}-${value}-${subindex}`;\n          const textElement = createElement(\n            Component as Exclude<CustomComponents['text'], undefined>,\n            {\n              key,\n              node: {\n                type: 'text',\n                italic: node.italic,\n                bold: node.bold,\n                value,\n              },\n            },\n          );\n\n          // Add a `<br>` before each substring except the first one\n          return subindex === 0\n            ? textElement\n            : [createElement('br', {key: `${key}-br`}), textElement];\n        });\n\n      return elements.length > 1\n        ? createElement(Fragment, {key: index}, elements)\n        : elements[0];\n    }\n    case 'link':\n      return createElement(\n        Component as Exclude<CustomComponents['link'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'link',\n            url: node.url,\n            title: node.title,\n            target: node.target,\n            children,\n          },\n        },\n      );\n    case 'list':\n      return createElement(\n        Component as Exclude<CustomComponents['list'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'list',\n            listType: node.listType,\n            children,\n          },\n        },\n      );\n    case 'list-item':\n      return createElement(\n        Component as Exclude<CustomComponents['listItem'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'list-item',\n            children,\n          },\n        },\n      );\n  }\n}\n\nfunction richTextToString(\n  node: RichTextASTNode,\n  result: string[] = [],\n): string {\n  switch (node.type) {\n    case 'root':\n      node.children.forEach((child) => richTextToString(child, result));\n      break;\n    case 'heading':\n    case 'paragraph':\n      node.children.forEach((child) => richTextToString(child, result));\n      result.push(' ');\n      break;\n    case 'text':\n      result.push(node.value || '');\n      break;\n    case 'link':\n      node.children.forEach((child) => richTextToString(child, result));\n      break;\n    case 'list':\n      node.children.forEach((item) => {\n        if (item.children) {\n          item.children.forEach((child) => richTextToString(child, result));\n        }\n        result.push(' ');\n      });\n      break;\n    default:\n      throw new Error(`Unknown node encountered ${node.type}`);\n  }\n\n  return result.join('').trim();\n}\n\n// This is only for documentation purposes, and it is not used in the code.\nexport type RichTextPropsForDocs<AsType extends React.ElementType = 'div'> =\n  RichTextPropsBase<AsType>;\n"],"names":[],"mappings":"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"}

package/dist/browser-dev/Video.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Video.mjs","sources":["../../src/Video.tsx"],"sourcesContent":["import {forwardRef, type HTMLAttributes} from 'react';\nimport {shopifyLoader} from './Image.js';\nimport type {Video as VideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface VideoProps {\n  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2024-07/objects/video). */\n  data: PartialDeep<VideoType, {recurseIntoArrays: true}>;\n  /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */\n  previewImageOptions?: Parameters<typeof shopifyLoader>[0];\n  /** Props that will be passed to the `video` element's `source` children elements. */\n  sourceProps?: HTMLAttributes<HTMLSourceElement> & {\n    'data-testid'?: string;\n  };\n}\n\n/**\n * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).\n */\nexport const Video = forwardRef<\n  HTMLVideoElement,\n  JSX.IntrinsicElements['video'] & VideoProps\n>((props, ref): JSX.Element => {\n  const {\n    data,\n    previewImageOptions,\n    id = data.id,\n    playsInline = true,\n    controls = true,\n    sourceProps = {},\n    ...passthroughProps\n  } = props;\n\n  const posterUrl = shopifyLoader({\n    src: data.previewImage?.url ?? '',\n    ...previewImageOptions,\n  });\n\n  if (!data.sources) {\n    throw new Error(`<Video/> requires a 'data.sources' array`);\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...passthroughProps}\n      id={id}\n      playsInline={playsInline}\n      controls={controls}\n      poster={posterUrl}\n      ref={ref}\n    >\n      {data.sources.map((source) => {\n        if (!(source?.url && source?.mimeType)) {\n          throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);\n        }\n        return (\n          <source\n            {...sourceProps}\n            key={source.url}\n            src={source.url}\n            type={source.mimeType}\n          />\n        );\n      })}\n    </video>\n  );\n});\n"],"names":[],"mappings":";;;AAmBO,MAAM,QAAQ,WAGnB,CAAC,OAAO,QAAqB;;AACvB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK,KAAK;AAAA,IACV,cAAc;AAAA,IACd,WAAW;AAAA,IACX,cAAc,CAAC;AAAA,IACf,GAAG;AAAA,EACD,IAAA;AAEJ,QAAM,YAAY,cAAc;AAAA,IAC9B,OAAK,UAAK,iBAAL,mBAAmB,QAAO;AAAA,IAC/B,GAAG;AAAA,EAAA,CACJ;AAEG,MAAA,CAAC,KAAK,SAAS;AACX,UAAA,IAAI,MAAM,0CAA0C;AAAA,EAC5D;AAEA;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QAEC,UAAK,KAAA,QAAQ,IAAI,CAAC,WAAW;AAC5B,cAAI,GAAE,iCAAQ,SAAO,iCAAQ,YAAW;AAChC,kBAAA,IAAI,MAAM,mDAAmD;AAAA,UACrE;AAEE,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACf,CAEH;AAAA,MAAA;AAAA,IACH;AAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Video.mjs","sources":["../../src/Video.tsx"],"sourcesContent":["import {forwardRef, type HTMLAttributes} from 'react';\nimport {shopifyLoader} from './Image.js';\nimport type {Video as VideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface VideoProps {\n  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2024-10/objects/video). */\n  data: PartialDeep<VideoType, {recurseIntoArrays: true}>;\n  /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */\n  previewImageOptions?: Parameters<typeof shopifyLoader>[0];\n  /** Props that will be passed to the `video` element's `source` children elements. */\n  sourceProps?: HTMLAttributes<HTMLSourceElement> & {\n    'data-testid'?: string;\n  };\n}\n\n/**\n * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).\n */\nexport const Video = forwardRef<\n  HTMLVideoElement,\n  JSX.IntrinsicElements['video'] & VideoProps\n>((props, ref): JSX.Element => {\n  const {\n    data,\n    previewImageOptions,\n    id = data.id,\n    playsInline = true,\n    controls = true,\n    sourceProps = {},\n    ...passthroughProps\n  } = props;\n\n  const posterUrl = shopifyLoader({\n    src: data.previewImage?.url ?? '',\n    ...previewImageOptions,\n  });\n\n  if (!data.sources) {\n    throw new Error(`<Video/> requires a 'data.sources' array`);\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...passthroughProps}\n      id={id}\n      playsInline={playsInline}\n      controls={controls}\n      poster={posterUrl}\n      ref={ref}\n    >\n      {data.sources.map((source) => {\n        if (!(source?.url && source?.mimeType)) {\n          throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);\n        }\n        return (\n          <source\n            {...sourceProps}\n            key={source.url}\n            src={source.url}\n            type={source.mimeType}\n          />\n        );\n      })}\n    </video>\n  );\n});\n"],"names":[],"mappings":";;;AAmBO,MAAM,QAAQ,WAGnB,CAAC,OAAO,QAAqB;;AACvB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK,KAAK;AAAA,IACV,cAAc;AAAA,IACd,WAAW;AAAA,IACX,cAAc,CAAC;AAAA,IACf,GAAG;AAAA,EACD,IAAA;AAEJ,QAAM,YAAY,cAAc;AAAA,IAC9B,OAAK,UAAK,iBAAL,mBAAmB,QAAO;AAAA,IAC/B,GAAG;AAAA,EAAA,CACJ;AAEG,MAAA,CAAC,KAAK,SAAS;AACX,UAAA,IAAI,MAAM,0CAA0C;AAAA,EAC5D;AAEA;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QAEC,UAAK,KAAA,QAAQ,IAAI,CAAC,WAAW;AAC5B,cAAI,GAAE,iCAAQ,SAAO,iCAAQ,YAAW;AAChC,kBAAA,IAAI,MAAM,mDAAmD;AAAA,UACrE;AAEE,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACf,CAEH;AAAA,MAAA;AAAA,IACH;AAAA;AAEJ,CAAC;"}

package/dist/browser-dev/codegen.helpers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"codegen.helpers.mjs","sources":["../../src/codegen.helpers.ts"],"sourcesContent":["/**\n * Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly.\n * Reference for the GraphQL types: https://shopify.dev/docs/api/storefront/2024-07/scalars/HTML\n * Note: JSON is generated as 'unknown' by default.\n */\nexport const storefrontApiCustomScalars = {\n  // Keep in sync with the definitions in the app/nextjs/codegen.ts!\n  DateTime: 'string',\n  Decimal: 'string',\n  HTML: 'string',\n  URL: 'string',\n  Color: 'string',\n  UnsignedInt64: 'string',\n};\n\n/**\n * Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly.\n * Reference for the GraphQL types: https://shopify.dev/docs/api/customer/2024-07/scalars/HTML\n * Note: JSON is generated as 'unknown' by default.\n */\nexport const customerAccountApiCustomScalars = {\n  DateTime: 'string',\n  Decimal: 'string',\n  HTML: 'string',\n  ISO8601DateTime: 'string',\n  URL: 'string',\n  UnsignedInt64: 'string',\n};\n"],"names":[],"mappings":"AAKO,MAAM,6BAA6B;AAAA;AAAA,EAExC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AACjB;AAOO,MAAM,kCAAkC;AAAA,EAC7C,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,KAAK;AAAA,EACL,eAAe;AACjB;"}
+{"version":3,"file":"codegen.helpers.mjs","sources":["../../src/codegen.helpers.ts"],"sourcesContent":["/**\n * Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly.\n * Reference for the GraphQL types: https://shopify.dev/docs/api/storefront/2024-10/scalars/HTML\n * Note: JSON is generated as 'unknown' by default.\n */\nexport const storefrontApiCustomScalars = {\n  // Keep in sync with the definitions in the app/nextjs/codegen.ts!\n  DateTime: 'string',\n  Decimal: 'string',\n  HTML: 'string',\n  URL: 'string',\n  Color: 'string',\n  UnsignedInt64: 'string',\n};\n\n/**\n * Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly.\n * Reference for the GraphQL types: https://shopify.dev/docs/api/customer/2024-10/scalars/HTML\n * Note: JSON is generated as 'unknown' by default.\n */\nexport const customerAccountApiCustomScalars = {\n  DateTime: 'string',\n  Decimal: 'string',\n  HTML: 'string',\n  ISO8601DateTime: 'string',\n  URL: 'string',\n  UnsignedInt64: 'string',\n};\n"],"names":[],"mappings":"AAKO,MAAM,6BAA6B;AAAA;AAAA,EAExC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AACjB;AAOO,MAAM,kCAAkC;AAAA,EAC7C,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,KAAK;AAAA,EACL,eAAe;AACjB;"}

package/dist/browser-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/browser-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/browser-dev/index.mjs

@@ -14,11 +14,13 @@ 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";
 import { ModelViewer } from "./ModelViewer.mjs";
 import { Money } from "./Money.mjs";
+import { decodeEncodedVariant, isOptionValueCombinationInEncodedVariant } from "./optionValueDecoder.mjs";
 import { parseMetafield } from "./parse-metafield.mjs";
 import { ProductPrice } from "./ProductPrice.mjs";
 import { ProductProvider, useProduct } from "./ProductProvider.mjs";
@@ -27,6 +29,7 @@ import { ShopifyProvider, useShop } from "./ShopifyProvider.mjs";
 import { ShopPayButton } from "./ShopPayButton.mjs";
 import { createStorefrontClient } from "./storefront-client.mjs";
 import { useMoney } from "./useMoney.mjs";
+import { useSelectedOptionInUrlParam } from "./useSelectedOptionInUrlParam.mjs";
 import { useShopifyCookies } from "./useShopifyCookies.mjs";
 import { Video } from "./Video.mjs";
 export {
@@ -60,9 +63,14 @@ export {
   Video,
   createStorefrontClient,
   customerAccountApiCustomScalars,
+  decodeEncodedVariant,
   flattenConnection,
+  getAdjacentAndFirstAvailableVariants,
   getClientBrowserParameters,
+  getProductOptions,
   getShopifyCookies,
+  isOptionValueCombinationInEncodedVariant,
+  mapSelectedProductOptionToObject,
   parseGid,
   parseMetafield,
   sendShopifyAnalytics,
@@ -72,6 +80,7 @@ export {
   useLoadScript,
   useMoney,
   useProduct,
+  useSelectedOptionInUrlParam,
   useShop,
   useShopifyCookies
 };

package/dist/browser-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/browser-dev/optionValueDecoder.mjs

@@ -0,0 +1,91 @@
+const OPTION_VALUE_SEPARATOR = ",";
+const V1_CONTROL_CHARS = {
+  OPTION: ":",
+  END_OF_PREFIX: ",",
+  SEQUENCE_GAP: " ",
+  RANGE: "-"
+};
+const isOptionValueCombinationInEncodedVariant = /* @__PURE__ */ (() => {
+  const decodedOptionValues = /* @__PURE__ */ new Map();
+  return function(targetOptionValueCombination, encodedVariantField) {
+    var _a;
+    if (targetOptionValueCombination.length === 0) {
+      return false;
+    }
+    if (!decodedOptionValues.has(encodedVariantField)) {
+      const decodedOptionValuesSet = /* @__PURE__ */ new Set();
+      for (const optionValue of decodeEncodedVariant(encodedVariantField)) {
+        decodedOptionValuesSet.add(optionValue.join(OPTION_VALUE_SEPARATOR));
+        for (let i = 0; i < optionValue.length; i++) {
+          decodedOptionValuesSet.add(
+            optionValue.slice(0, i + 1).join(OPTION_VALUE_SEPARATOR)
+          );
+        }
+      }
+      decodedOptionValues.set(encodedVariantField, decodedOptionValuesSet);
+    }
+    return Boolean(
+      (_a = decodedOptionValues.get(encodedVariantField)) == null ? void 0 : _a.has(targetOptionValueCombination.join(OPTION_VALUE_SEPARATOR))
+    );
+  };
+})();
+function decodeEncodedVariant(encodedVariantField) {
+  if (!encodedVariantField)
+    return [];
+  if (encodedVariantField.startsWith("v1_")) {
+    return v1Decoder(stripVersion(encodedVariantField));
+  }
+  throw new Error("Unsupported option value encoding");
+}
+const stripVersion = (encodedVariantField) => encodedVariantField.replace(/^v1_/, "");
+function v1Decoder(encodedVariantField) {
+  const tokenizer = /[ :,-]/g;
+  let index = 0;
+  let token;
+  const options = [];
+  const currentOptionValue = [];
+  let depth = 0;
+  let rangeStart = null;
+  while (token = tokenizer.exec(encodedVariantField)) {
+    const operation = token[0];
+    const optionValueIndex = Number.parseInt(encodedVariantField.slice(index, token.index)) || 0;
+    if (rangeStart !== null) {
+      for (; rangeStart < optionValueIndex; rangeStart++) {
+        currentOptionValue[depth] = rangeStart;
+        options.push([...currentOptionValue]);
+      }
+      rangeStart = null;
+    }
+    currentOptionValue[depth] = optionValueIndex;
+    if (operation === V1_CONTROL_CHARS.RANGE) {
+      rangeStart = optionValueIndex;
+    } else if (operation === V1_CONTROL_CHARS.OPTION) {
+      depth++;
+    } else {
+      if (operation === V1_CONTROL_CHARS.SEQUENCE_GAP || operation === V1_CONTROL_CHARS.END_OF_PREFIX && encodedVariantField[token.index - 1] !== V1_CONTROL_CHARS.END_OF_PREFIX) {
+        options.push([...currentOptionValue]);
+      }
+      if (operation === V1_CONTROL_CHARS.END_OF_PREFIX) {
+        currentOptionValue.pop();
+        depth--;
+      }
+    }
+    index = tokenizer.lastIndex;
+  }
+  const lastRangeStartIndex = encodedVariantField.lastIndexOf("-");
+  if (rangeStart != null && lastRangeStartIndex > 0) {
+    const finalValueIndex = parseInt(
+      encodedVariantField.substring(lastRangeStartIndex + 1)
+    );
+    for (; rangeStart <= finalValueIndex; rangeStart++) {
+      currentOptionValue[depth] = rangeStart;
+      options.push([...currentOptionValue]);
+    }
+  }
+  return options;
+}
+export {
+  decodeEncodedVariant,
+  isOptionValueCombinationInEncodedVariant
+};
+//# sourceMappingURL=optionValueDecoder.mjs.map

package/dist/browser-dev/optionValueDecoder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"optionValueDecoder.mjs","sources":["../../src/optionValueDecoder.ts"],"sourcesContent":["/**\n * This file provides utility functions for determining whether or not an option value combination is present in an encoded option value string.\n *\n * In V1 of the encoding strategy, option value arrays are encoded as a trie with the following rules:\n *  - `:` `,` ` ` and `-` are control characters.\n *  - `:` indicates a new option. ex: 0:1 indicates value 0 for the option in position 1, value 1 for the option in position 2.\n *  - `,` indicates the end of a repeated prefix, mulitple consecutive commas indicate the end of multiple repeated prefixes.\n *  - ` ` indicates a gap in the sequence of option values. ex: `0 4` indicates option values in position 0 and 4 are present.\n *  - `-` indicates a continuous range of option values. ex: `0 1-3 4`. Ranges are only present encoded in the final option value position, so for example the trie for the set [[0,0,0],[0,0,1], ..., [0,2,2]] will be structured as `0:0:0-2,1:0-2,2:0-2`, not `0:0-2:0-2`.\n */\n\nimport {Product} from './storefront-api-types.js';\n\nconst OPTION_VALUE_SEPARATOR = ',';\n\nconst V1_CONTROL_CHARS = {\n  OPTION: ':',\n  END_OF_PREFIX: ',',\n  SEQUENCE_GAP: ' ',\n  RANGE: '-',\n};\n\nexport type IsOptionValueCombinationInEncodedVariant = (\n  targetOptionValueCombination: number[],\n  encodedVariantField: string,\n) => boolean;\n\n/**\n * Determine whether an option value combination is present in an encoded option value string. Function is memoized by encodedVariantField.\n *\n * @param targetOptionValueCombination - Indices of option values to look up in the encoded option value string. A partial set of indices may be passed to determine whether a node or any children is present. For example, if a product has 3 options, passing [0] will return true if any option value combination for the first option's option value is present in the encoded string.\n * @param encodedVariantField - Encoded option value string from the Storefront API, e.g. [product.encodedVariantExistence](/docs/api/storefront/2024-10/objects/Product#field-encodedvariantexistence) or [product.encodedVariantAvailability](/docs/api/storefront/2024-10/objects/Product#field-encodedvariantavailability)\n * @returns - True if a full or partial targetOptionValueIndices is present in the encoded option value string, false otherwise.\n */\nexport const isOptionValueCombinationInEncodedVariant: IsOptionValueCombinationInEncodedVariant =\n  ((): IsOptionValueCombinationInEncodedVariant => {\n    const decodedOptionValues = new Map<string, Set<string>>();\n\n    return function (\n      targetOptionValueCombination: number[],\n      encodedVariantField: string,\n    ): boolean {\n      if (targetOptionValueCombination.length === 0) {\n        return false;\n      }\n\n      if (!decodedOptionValues.has(encodedVariantField)) {\n        const decodedOptionValuesSet = new Set<string>();\n\n        for (const optionValue of decodeEncodedVariant(encodedVariantField)) {\n          // add the complete option value to the decoded option values set\n          decodedOptionValuesSet.add(optionValue.join(OPTION_VALUE_SEPARATOR));\n\n          // add all composite parts of the option value to the decoded option values set. e.g. if the option value is [0,1,2], add \"0\", \"0,1\", \"0,1,2\"\n          for (let i = 0; i < optionValue.length; i++) {\n            decodedOptionValuesSet.add(\n              optionValue.slice(0, i + 1).join(OPTION_VALUE_SEPARATOR),\n            );\n          }\n        }\n\n        decodedOptionValues.set(encodedVariantField, decodedOptionValuesSet);\n      }\n\n      return Boolean(\n        decodedOptionValues\n          .get(encodedVariantField)\n          ?.has(targetOptionValueCombination.join(OPTION_VALUE_SEPARATOR)),\n      );\n    };\n  })();\n\ntype EncodedVariantField =\n  | Product['encodedVariantAvailability']\n  | Product['encodedVariantExistence'];\ntype DecodedOptionValues = number[][];\n\n/**\n * For an encoded option value string, decode into option value combinations. Entries represent a valid combination formatted as an array of option value positions.\n * @param encodedVariantField - Encoded option value string from the Storefront API, e.g. [product.encodedVariantExistence](/docs/api/storefront/2024-10/objects/Product#field-encodedvariantexistence) or [product.encodedVariantAvailability](/docs/api/storefront/2024-10/objects/Product#field-encodedvariantavailability)\n * @returns Decoded option value combinations\n */\nexport function decodeEncodedVariant(\n  encodedVariantField: EncodedVariantField,\n): DecodedOptionValues {\n  if (!encodedVariantField) return [];\n\n  if (encodedVariantField.startsWith('v1_')) {\n    return v1Decoder(stripVersion(encodedVariantField));\n  }\n\n  throw new Error('Unsupported option value encoding');\n}\n\nconst stripVersion: (encodedVariantField: string) => string = (\n  encodedVariantField: string,\n) => encodedVariantField.replace(/^v1_/, '');\n\n/**\n * We encode an array of arrays representing variants, expressed in terms of options and option values, as a trie.\n *\n * This encoding strategy allows extremely large numbers of variants to be expressed in an extremely compact data structure.\n *\n * Integers represent option and values, so [0,0,0] represents option_value at array index 0 for the options at array indexes 0, 1 and 2\n *\n * `:`, `,`, ` ` and `-` are control characters.\n * `:` indicates a new option\n * `,` indicates the end of a repeated prefix, mulitple consecutive commas indicate the end of multiple repeated prefixes.\n * ` ` indicates a gap in the sequence of option values\n * `-` indicates a continuous range of option values\n *\n * Encoding process:\n *\n * example input array: [[0,0,0], [0,1,0], [0,1,1], [1,0,0], [1,0,1], [1,1,1], [2,0,1], [2,1,0]]\n *\n * step 1: encode as string: \"0:0:0,0:1:0,0:1:1,1:0:0,1:0:1,1:1:1,2:0:1,2:1:0,\"\n * step 2: combine nodes that share a prefix: \"0:0:0,0:1:0 1,1:0:0 1,1:1:1,2:0:1,2:1:0,\"\n * step 3: encode data as a trie so no prefixes need to be repeated: \"0:0:0,1:0 1,,1:0:0 1,1:1,,2:0:1,1:0,,\"\n * step 4: since the options are sorted, use a dash to express ranges: \"0:0:0,1:0-1,,1:0:0-1,1:1,,2:0:1,1:0,,\"\n */\nfunction v1Decoder(encodedVariantField: string): number[][] {\n  const tokenizer = /[ :,-]/g;\n  let index = 0;\n  let token: RegExpExecArray | null;\n  const options: number[][] = [];\n  const currentOptionValue: number[] = [];\n  let depth = 0;\n  let rangeStart: number | null = null;\n\n  // iterate over control characters\n  while ((token = tokenizer.exec(encodedVariantField))) {\n    const operation = token[0];\n    const optionValueIndex =\n      Number.parseInt(encodedVariantField.slice(index, token.index)) || 0;\n\n    if (rangeStart !== null) {\n      // If a range has been started, iterate over the range and add each option value to the list of options\n      // - `rangeStart` is set if the last control char was a dash, e.g. `0` for 0-2. It represents the numeric option value position for the start of the range.\n      // - `optionValueIndex` is the numeric option value position for the end of the range\n      for (; rangeStart < optionValueIndex; rangeStart++) {\n        currentOptionValue[depth] = rangeStart;\n        options.push([...currentOptionValue]);\n      }\n      // indicates the range has been processed\n      rangeStart = null;\n    }\n\n    currentOptionValue[depth] = optionValueIndex;\n\n    if (operation === V1_CONTROL_CHARS.RANGE) {\n      // dash operation indicates we are in a range. e.g. 0-2 means option values 0, 1, 2\n      rangeStart = optionValueIndex;\n    } else if (operation === V1_CONTROL_CHARS.OPTION) {\n      // colon operation indicates that we are moving down to the next layer of option values. e.g. 0:0:0-2 means we traverse down from option1 to option3 and represents [[0,0,0], [0,0,1], [0,0,2]]\n      depth++;\n    } else {\n      if (\n        operation === V1_CONTROL_CHARS.SEQUENCE_GAP ||\n        (operation === V1_CONTROL_CHARS.END_OF_PREFIX &&\n          encodedVariantField[token.index - 1] !==\n            V1_CONTROL_CHARS.END_OF_PREFIX)\n      ) {\n        // add the current option value to the list of options if we hit a gap in our sequence or we are at the end of our depth and need to move back up\n        options.push([...currentOptionValue]);\n      }\n      if (operation === V1_CONTROL_CHARS.END_OF_PREFIX) {\n        // go up an option level, trash the last item in currentOptionValue\n        currentOptionValue.pop();\n        depth--;\n      }\n    }\n    index = tokenizer.lastIndex;\n  }\n\n  // Because we iterate over control characters and the range processing happens in the while,\n  // if the last control char is a range we need to manually add the final range to the option list.\n  const lastRangeStartIndex = encodedVariantField.lastIndexOf('-');\n  if (rangeStart != null && lastRangeStartIndex > 0) {\n    const finalValueIndex = parseInt(\n      encodedVariantField.substring(lastRangeStartIndex + 1),\n    );\n    for (; rangeStart <= finalValueIndex; rangeStart++) {\n      currentOptionValue[depth] = rangeStart;\n      options.push([...currentOptionValue]);\n    }\n  }\n\n  return options;\n}\n"],"names":[],"mappings":"AAaA,MAAM,yBAAyB;AAE/B,MAAM,mBAAmB;AAAA,EACvB,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,cAAc;AAAA,EACd,OAAO;AACT;AAcO,MAAM,2CACsC,uBAAA;AACzC,QAAA,0CAA0B;AAEzB,SAAA,SACL,8BACA,qBACS;AA5Bf;AA6BU,QAAA,6BAA6B,WAAW,GAAG;AACtC,aAAA;AAAA,IACT;AAEA,QAAI,CAAC,oBAAoB,IAAI,mBAAmB,GAAG;AAC3C,YAAA,6CAA6B;AAExB,iBAAA,eAAe,qBAAqB,mBAAmB,GAAG;AAEnE,+BAAuB,IAAI,YAAY,KAAK,sBAAsB,CAAC;AAGnE,iBAAS,IAAI,GAAG,IAAI,YAAY,QAAQ,KAAK;AACpB,iCAAA;AAAA,YACrB,YAAY,MAAM,GAAG,IAAI,CAAC,EAAE,KAAK,sBAAsB;AAAA,UAAA;AAAA,QAE3D;AAAA,MACF;AAEoB,0BAAA,IAAI,qBAAqB,sBAAsB;AAAA,IACrE;AAEO,WAAA;AAAA,OACL,yBACG,IAAI,mBAAmB,MAD1B,mBAEI,IAAI,6BAA6B,KAAK,sBAAsB;AAAA,IAAC;AAAA,EACnE;AAEJ,GAAG;AAYE,SAAS,qBACd,qBACqB;AACrB,MAAI,CAAC;AAAqB,WAAO;AAE7B,MAAA,oBAAoB,WAAW,KAAK,GAAG;AAClC,WAAA,UAAU,aAAa,mBAAmB,CAAC;AAAA,EACpD;AAEM,QAAA,IAAI,MAAM,mCAAmC;AACrD;AAEA,MAAM,eAAwD,CAC5D,wBACG,oBAAoB,QAAQ,QAAQ,EAAE;AAwB3C,SAAS,UAAU,qBAAyC;AAC1D,QAAM,YAAY;AAClB,MAAI,QAAQ;AACR,MAAA;AACJ,QAAM,UAAsB,CAAA;AAC5B,QAAM,qBAA+B,CAAA;AACrC,MAAI,QAAQ;AACZ,MAAI,aAA4B;AAGhC,SAAQ,QAAQ,UAAU,KAAK,mBAAmB,GAAI;AAC9C,UAAA,YAAY,MAAM,CAAC;AACnB,UAAA,mBACJ,OAAO,SAAS,oBAAoB,MAAM,OAAO,MAAM,KAAK,CAAC,KAAK;AAEpE,QAAI,eAAe,MAAM;AAIhB,aAAA,aAAa,kBAAkB,cAAc;AAClD,2BAAmB,KAAK,IAAI;AAC5B,gBAAQ,KAAK,CAAC,GAAG,kBAAkB,CAAC;AAAA,MACtC;AAEa,mBAAA;AAAA,IACf;AAEA,uBAAmB,KAAK,IAAI;AAExB,QAAA,cAAc,iBAAiB,OAAO;AAE3B,mBAAA;AAAA,IAAA,WACJ,cAAc,iBAAiB,QAAQ;AAEhD;AAAA,IAAA,OACK;AACL,UACE,cAAc,iBAAiB,gBAC9B,cAAc,iBAAiB,iBAC9B,oBAAoB,MAAM,QAAQ,CAAC,MACjC,iBAAiB,eACrB;AAEA,gBAAQ,KAAK,CAAC,GAAG,kBAAkB,CAAC;AAAA,MACtC;AACI,UAAA,cAAc,iBAAiB,eAAe;AAEhD,2BAAmB,IAAI;AACvB;AAAA,MACF;AAAA,IACF;AACA,YAAQ,UAAU;AAAA,EACpB;AAIM,QAAA,sBAAsB,oBAAoB,YAAY,GAAG;AAC3D,MAAA,cAAc,QAAQ,sBAAsB,GAAG;AACjD,UAAM,kBAAkB;AAAA,MACtB,oBAAoB,UAAU,sBAAsB,CAAC;AAAA,IAAA;AAEhD,WAAA,cAAc,iBAAiB,cAAc;AAClD,yBAAmB,KAAK,IAAI;AAC5B,cAAQ,KAAK,CAAC,GAAG,kBAAkB,CAAC;AAAA,IACtC;AAAA,EACF;AAEO,SAAA;AACT;"}

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

@@ -1,4 +1,4 @@
-const version = "2024.7.6";
+const version = "2024.10.1";
 export {
   version
 };

package/dist/browser-dev/storefront-api-constants.mjs

@@ -1,4 +1,4 @@
-const SFAPI_VERSION = "2024-07";
+const SFAPI_VERSION = "2024-10";
 export {
   SFAPI_VERSION
 };

package/dist/browser-dev/storefront-api-constants.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"storefront-api-constants.mjs","sources":["../../src/storefront-api-constants.ts"],"sourcesContent":["export const SFAPI_VERSION = '2024-07';\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB;"}
+{"version":3,"file":"storefront-api-constants.mjs","sources":["../../src/storefront-api-constants.ts"],"sourcesContent":["export const SFAPI_VERSION = '2024-10';\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB;"}