@shopify/hydrogen-react 2024.10.1 → 2025.1.0

package/dist/node-prod/ModelViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelViewer.js","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'model-viewer': PartialDeep<\n        ModelViewerElement,\n        {recurseIntoArrays: true}\n      >;\n    }\n  }\n}\n\ntype ModelViewerProps = Omit<\n  PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n  'src'\n> &\n  ModelViewerBaseProps;\n\ntype ModelViewerBaseProps = {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2024-10/objects/model3d). */\n  data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n  /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n  onError?: (event: Event) => void;\n  /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n  onLoad?: (event: Event) => void;\n  /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n  onPreload?: (event: Event) => void;\n  /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n  onModelVisibility?: (event: Event) => void;\n  /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n  onProgress?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n  onArStatus?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n  onArTracking?: (event: Event) => void;\n  /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n  onQuickLookButtonTapped?: (event: Event) => void;\n  /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n  onCameraChange?: (event: Event) => void;\n  /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange).  */\n  onEnvironmentChange?: (event: Event) => void;\n  /**  The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n  onPlay?: (event: Event) => void;\n  /**  The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n  onPause?: (event: Event) => void;\n  /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n  onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps): JSX.Element | null {\n  const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n    undefined,\n  );\n  const callbackRef = useCallback((node: HTMLElement) => {\n    setModelViewer(node);\n  }, []);\n  const {data, children, className, ...passthroughProps} = props;\n\n  const modelViewerLoadedStatus = useLoadScript(\n    'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n    {\n      module: true,\n    },\n  );\n\n  useEffect(() => {\n    const hydrogenEventListener = {\n      error: passthroughProps.onError,\n      load: passthroughProps.onLoad,\n      preload: passthroughProps.onPreload,\n      'model-visibility': passthroughProps.onModelVisibility,\n      progress: passthroughProps.onProgress,\n      'ar-status': passthroughProps.onArStatus,\n      'ar-tracking': passthroughProps.onArTracking,\n      'quick-look-button-tapped': passthroughProps.onQuickLookButtonTapped,\n      'camera-change': passthroughProps.onCameraChange,\n      'environment-change': passthroughProps.onEnvironmentChange,\n      play: passthroughProps.onPlay,\n      pause: passthroughProps.onPause,\n      'scene-graph-ready': passthroughProps.onSceneGraphReady,\n    };\n\n    if (!modelViewer) {\n      return;\n    }\n    Object.entries(hydrogenEventListener).forEach(\n      ([eventName, callbackFunc]) => {\n        if (callbackFunc) {\n          modelViewer.addEventListener(eventName, callbackFunc);\n        }\n      },\n    );\n\n    return () => {\n      if (modelViewer == null) {\n        return;\n      }\n      Object.entries(hydrogenEventListener).forEach(\n        ([eventName, callbackFunc]) => {\n          if (callbackFunc) {\n            modelViewer.removeEventListener(eventName, callbackFunc);\n          }\n        },\n      );\n    };\n  }, [\n    modelViewer,\n    passthroughProps.onArStatus,\n    passthroughProps.onArTracking,\n    passthroughProps.onCameraChange,\n    passthroughProps.onEnvironmentChange,\n    passthroughProps.onError,\n    passthroughProps.onLoad,\n    passthroughProps.onModelVisibility,\n    passthroughProps.onPause,\n    passthroughProps.onPlay,\n    passthroughProps.onPreload,\n    passthroughProps.onProgress,\n    passthroughProps.onQuickLookButtonTapped,\n    passthroughProps.onSceneGraphReady,\n  ]);\n\n  if (modelViewerLoadedStatus !== 'done') {\n    // TODO: What do we want to display while the model-viewer library loads?\n    return null;\n  }\n\n  if (!data.sources?.[0]?.url) {\n    const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(sourcesUrlError);\n    } else {\n      console.error(sourcesUrlError);\n      return null;\n    }\n  }\n\n  if (__HYDROGEN_DEV__ && !data.alt) {\n    console.warn(\n      `<ModelViewer/> requires the 'data.alt' prop for accessibility`,\n    );\n  }\n\n  return (\n    <model-viewer\n      ref={callbackRef}\n      {...passthroughProps}\n      // @ts-expect-error src should exist\n      // @eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      class={className}\n      id={passthroughProps.id ?? data.id}\n      src={data.sources[0].url}\n      alt={data.alt ?? null}\n      camera-controls={passthroughProps.cameraControls ?? true}\n      poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n      autoplay={passthroughProps.autoplay ?? true}\n      loading={passthroughProps.loading}\n      reveal={passthroughProps.reveal}\n      ar={passthroughProps.ar}\n      ar-modes={passthroughProps.arModes}\n      ar-scale={passthroughProps.arScale}\n      // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      ar-placement={passthroughProps.arPlacement}\n      ios-src={passthroughProps.iosSrc}\n      touch-action={passthroughProps.touchAction}\n      disable-zoom={passthroughProps.disableZoom}\n      orbit-sensitivity={passthroughProps.orbitSensitivity}\n      auto-rotate={passthroughProps.autoRotate}\n      auto-rotate-delay={passthroughProps.autoRotateDelay}\n      // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      rotation-per-second={passthroughProps.rotationPerSecond}\n      interaction-policy={passthroughProps.interactionPolicy}\n      interaction-prompt={passthroughProps.interactionPrompt}\n      interaction-prompt-style={passthroughProps.interactionPromptStyle}\n      interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n      camera-orbit={passthroughProps.cameraOrbit}\n      camera-target={passthroughProps.cameraTarget}\n      field-of-view={passthroughProps.fieldOfView}\n      max-camera-orbit={passthroughProps.maxCameraOrbit}\n      min-camera-orbit={passthroughProps.minCameraOrbit}\n      max-field-of-view={passthroughProps.maxFieldOfView}\n      min-field-of-view={passthroughProps.minFieldOfView}\n      bounds={passthroughProps.bounds}\n      interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n      skybox-image={passthroughProps.skyboxImage}\n      environment-image={passthroughProps.environmentImage}\n      exposure={passthroughProps.exposure}\n      shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n      shadow-softness={passthroughProps.shadowSoftness ?? 0}\n      animation-name={passthroughProps.animationName}\n      animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n      variant-name={passthroughProps.variantName}\n      orientation={passthroughProps.orientation}\n      scale={passthroughProps.scale}\n    >\n      {children}\n    </model-viewer>\n  );\n}\n"],"names":["useState","useCallback","useLoadScript","useEffect","jsx"],"mappings":";;;;;AA+DO,SAAS,YAAY,OAA6C;;AACjE,QAAA,CAAC,aAAa,cAAc,IAAIA,MAAA;AAAA,IACpC;AAAA,EAAA;AAEI,QAAA,cAAcC,kBAAY,CAAC,SAAsB;AACrD,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAE,CAAA;AACL,QAAM,EAAC,MAAM,UAAU,WAAW,GAAG,iBAAoB,IAAA;AAEzD,QAAM,0BAA0BC,WAAA;AAAA,IAC9B;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,IACV;AAAA,EAAA;AAGFC,QAAAA,UAAU,MAAM;AACd,UAAM,wBAAwB;AAAA,MAC5B,OAAO,iBAAiB;AAAA,MACxB,MAAM,iBAAiB;AAAA,MACvB,SAAS,iBAAiB;AAAA,MAC1B,oBAAoB,iBAAiB;AAAA,MACrC,UAAU,iBAAiB;AAAA,MAC3B,aAAa,iBAAiB;AAAA,MAC9B,eAAe,iBAAiB;AAAA,MAChC,4BAA4B,iBAAiB;AAAA,MAC7C,iBAAiB,iBAAiB;AAAA,MAClC,sBAAsB,iBAAiB;AAAA,MACvC,MAAM,iBAAiB;AAAA,MACvB,OAAO,iBAAiB;AAAA,MACxB,qBAAqB,iBAAiB;AAAA,IAAA;AAGxC,QAAI,CAAC,aAAa;AAChB;AAAA,IACF;AACO,WAAA,QAAQ,qBAAqB,EAAE;AAAA,MACpC,CAAC,CAAC,WAAW,YAAY,MAAM;AAC7B,YAAI,cAAc;AACJ,sBAAA,iBAAiB,WAAW,YAAY;AAAA,QACtD;AAAA,MACF;AAAA,IAAA;AAGF,WAAO,MAAM;AACX,UAAI,eAAe,MAAM;AACvB;AAAA,MACF;AACO,aAAA,QAAQ,qBAAqB,EAAE;AAAA,QACpC,CAAC,CAAC,WAAW,YAAY,MAAM;AAC7B,cAAI,cAAc;AACJ,wBAAA,oBAAoB,WAAW,YAAY;AAAA,UACzD;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF,GACC;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,EAAA,CAClB;AAED,MAAI,4BAA4B,QAAQ;AAE/B,WAAA;AAAA,EACT;AAEA,MAAI,GAAC,gBAAK,YAAL,mBAAe,OAAf,mBAAmB,MAAK;AAC3B,UAAM,kBAAkB;AAGjB;AACL,cAAQ,MAAM,eAAe;AACtB,aAAA;AAAA,IACT;AAAA,EACF;AASE,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG;AAAA,MAGJ,OAAO;AAAA,MACP,IAAI,iBAAiB,MAAM,KAAK;AAAA,MAChC,KAAK,KAAK,QAAQ,CAAC,EAAE;AAAA,MACrB,KAAK,KAAK,OAAO;AAAA,MACjB,mBAAiB,iBAAiB,kBAAkB;AAAA,MACpD,SAAS,iBAAiB,YAAU,UAAK,iBAAL,mBAAmB,SAAQ;AAAA,MAC/D,UAAU,iBAAiB,YAAY;AAAA,MACvC,SAAS,iBAAiB;AAAA,MAC1B,QAAQ,iBAAiB;AAAA,MACzB,IAAI,iBAAiB;AAAA,MACrB,YAAU,iBAAiB;AAAA,MAC3B,YAAU,iBAAiB;AAAA,MAG3B,gBAAc,iBAAiB;AAAA,MAC/B,WAAS,iBAAiB;AAAA,MAC1B,gBAAc,iBAAiB;AAAA,MAC/B,gBAAc,iBAAiB;AAAA,MAC/B,qBAAmB,iBAAiB;AAAA,MACpC,eAAa,iBAAiB;AAAA,MAC9B,qBAAmB,iBAAiB;AAAA,MAGpC,uBAAqB,iBAAiB;AAAA,MACtC,sBAAoB,iBAAiB;AAAA,MACrC,sBAAoB,iBAAiB;AAAA,MACrC,4BAA0B,iBAAiB;AAAA,MAC3C,gCAA8B,iBAAiB;AAAA,MAC/C,gBAAc,iBAAiB;AAAA,MAC/B,iBAAe,iBAAiB;AAAA,MAChC,iBAAe,iBAAiB;AAAA,MAChC,oBAAkB,iBAAiB;AAAA,MACnC,oBAAkB,iBAAiB;AAAA,MACnC,qBAAmB,iBAAiB;AAAA,MACpC,qBAAmB,iBAAiB;AAAA,MACpC,QAAQ,iBAAiB;AAAA,MACzB,uBAAqB,iBAAiB,sBAAsB;AAAA,MAC5D,gBAAc,iBAAiB;AAAA,MAC/B,qBAAmB,iBAAiB;AAAA,MACpC,UAAU,iBAAiB;AAAA,MAC3B,oBAAkB,iBAAiB,mBAAmB;AAAA,MACtD,mBAAiB,iBAAiB,kBAAkB;AAAA,MACpD,kBAAgB,iBAAiB;AAAA,MACjC,gCAA8B,iBAAiB;AAAA,MAC/C,gBAAc,iBAAiB;AAAA,MAC/B,aAAa,iBAAiB;AAAA,MAC9B,OAAO,iBAAiB;AAAA,MAEvB;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
+{"version":3,"file":"ModelViewer.js","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'model-viewer': PartialDeep<\n        ModelViewerElement,\n        {recurseIntoArrays: true}\n      >;\n    }\n  }\n}\n\ntype ModelViewerProps = Omit<\n  PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n  'src'\n> &\n  ModelViewerBaseProps;\n\ntype ModelViewerBaseProps = {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2025-01/objects/model3d). */\n  data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n  /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n  onError?: (event: Event) => void;\n  /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n  onLoad?: (event: Event) => void;\n  /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n  onPreload?: (event: Event) => void;\n  /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n  onModelVisibility?: (event: Event) => void;\n  /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n  onProgress?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n  onArStatus?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n  onArTracking?: (event: Event) => void;\n  /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n  onQuickLookButtonTapped?: (event: Event) => void;\n  /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n  onCameraChange?: (event: Event) => void;\n  /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange).  */\n  onEnvironmentChange?: (event: Event) => void;\n  /**  The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n  onPlay?: (event: Event) => void;\n  /**  The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n  onPause?: (event: Event) => void;\n  /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n  onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps): JSX.Element | null {\n  const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n    undefined,\n  );\n  const callbackRef = useCallback((node: HTMLElement) => {\n    setModelViewer(node);\n  }, []);\n  const {data, children, className, ...passthroughProps} = props;\n\n  const modelViewerLoadedStatus = useLoadScript(\n    'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n    {\n      module: true,\n    },\n  );\n\n  useEffect(() => {\n    const hydrogenEventListener = {\n      error: passthroughProps.onError,\n      load: passthroughProps.onLoad,\n      preload: passthroughProps.onPreload,\n      'model-visibility': passthroughProps.onModelVisibility,\n      progress: passthroughProps.onProgress,\n      'ar-status': passthroughProps.onArStatus,\n      'ar-tracking': passthroughProps.onArTracking,\n      'quick-look-button-tapped': passthroughProps.onQuickLookButtonTapped,\n      'camera-change': passthroughProps.onCameraChange,\n      'environment-change': passthroughProps.onEnvironmentChange,\n      play: passthroughProps.onPlay,\n      pause: passthroughProps.onPause,\n      'scene-graph-ready': passthroughProps.onSceneGraphReady,\n    };\n\n    if (!modelViewer) {\n      return;\n    }\n    Object.entries(hydrogenEventListener).forEach(\n      ([eventName, callbackFunc]) => {\n        if (callbackFunc) {\n          modelViewer.addEventListener(eventName, callbackFunc);\n        }\n      },\n    );\n\n    return () => {\n      if (modelViewer == null) {\n        return;\n      }\n      Object.entries(hydrogenEventListener).forEach(\n        ([eventName, callbackFunc]) => {\n          if (callbackFunc) {\n            modelViewer.removeEventListener(eventName, callbackFunc);\n          }\n        },\n      );\n    };\n  }, [\n    modelViewer,\n    passthroughProps.onArStatus,\n    passthroughProps.onArTracking,\n    passthroughProps.onCameraChange,\n    passthroughProps.onEnvironmentChange,\n    passthroughProps.onError,\n    passthroughProps.onLoad,\n    passthroughProps.onModelVisibility,\n    passthroughProps.onPause,\n    passthroughProps.onPlay,\n    passthroughProps.onPreload,\n    passthroughProps.onProgress,\n    passthroughProps.onQuickLookButtonTapped,\n    passthroughProps.onSceneGraphReady,\n  ]);\n\n  if (modelViewerLoadedStatus !== 'done') {\n    // TODO: What do we want to display while the model-viewer library loads?\n    return null;\n  }\n\n  if (!data.sources?.[0]?.url) {\n    const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(sourcesUrlError);\n    } else {\n      console.error(sourcesUrlError);\n      return null;\n    }\n  }\n\n  if (__HYDROGEN_DEV__ && !data.alt) {\n    console.warn(\n      `<ModelViewer/> requires the 'data.alt' prop for accessibility`,\n    );\n  }\n\n  return (\n    <model-viewer\n      ref={callbackRef}\n      {...passthroughProps}\n      // @ts-expect-error src should exist\n      // @eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      class={className}\n      id={passthroughProps.id ?? data.id}\n      src={data.sources[0].url}\n      alt={data.alt ?? null}\n      camera-controls={passthroughProps.cameraControls ?? true}\n      poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n      autoplay={passthroughProps.autoplay ?? true}\n      loading={passthroughProps.loading}\n      reveal={passthroughProps.reveal}\n      ar={passthroughProps.ar}\n      ar-modes={passthroughProps.arModes}\n      ar-scale={passthroughProps.arScale}\n      // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      ar-placement={passthroughProps.arPlacement}\n      ios-src={passthroughProps.iosSrc}\n      touch-action={passthroughProps.touchAction}\n      disable-zoom={passthroughProps.disableZoom}\n      orbit-sensitivity={passthroughProps.orbitSensitivity}\n      auto-rotate={passthroughProps.autoRotate}\n      auto-rotate-delay={passthroughProps.autoRotateDelay}\n      // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      rotation-per-second={passthroughProps.rotationPerSecond}\n      interaction-policy={passthroughProps.interactionPolicy}\n      interaction-prompt={passthroughProps.interactionPrompt}\n      interaction-prompt-style={passthroughProps.interactionPromptStyle}\n      interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n      camera-orbit={passthroughProps.cameraOrbit}\n      camera-target={passthroughProps.cameraTarget}\n      field-of-view={passthroughProps.fieldOfView}\n      max-camera-orbit={passthroughProps.maxCameraOrbit}\n      min-camera-orbit={passthroughProps.minCameraOrbit}\n      max-field-of-view={passthroughProps.maxFieldOfView}\n      min-field-of-view={passthroughProps.minFieldOfView}\n      bounds={passthroughProps.bounds}\n      interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n      skybox-image={passthroughProps.skyboxImage}\n      environment-image={passthroughProps.environmentImage}\n      exposure={passthroughProps.exposure}\n      shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n      shadow-softness={passthroughProps.shadowSoftness ?? 0}\n      animation-name={passthroughProps.animationName}\n      animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n      variant-name={passthroughProps.variantName}\n      orientation={passthroughProps.orientation}\n      scale={passthroughProps.scale}\n    >\n      {children}\n    </model-viewer>\n  );\n}\n"],"names":["useState","useCallback","useLoadScript","useEffect","jsx"],"mappings":"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"}

package/dist/node-prod/ModelViewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModelViewer.mjs","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'model-viewer': PartialDeep<\n        ModelViewerElement,\n        {recurseIntoArrays: true}\n      >;\n    }\n  }\n}\n\ntype ModelViewerProps = Omit<\n  PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n  'src'\n> &\n  ModelViewerBaseProps;\n\ntype ModelViewerBaseProps = {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2024-10/objects/model3d). */\n  data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n  /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n  onError?: (event: Event) => void;\n  /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n  onLoad?: (event: Event) => void;\n  /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n  onPreload?: (event: Event) => void;\n  /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n  onModelVisibility?: (event: Event) => void;\n  /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n  onProgress?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n  onArStatus?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n  onArTracking?: (event: Event) => void;\n  /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n  onQuickLookButtonTapped?: (event: Event) => void;\n  /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n  onCameraChange?: (event: Event) => void;\n  /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange).  */\n  onEnvironmentChange?: (event: Event) => void;\n  /**  The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n  onPlay?: (event: Event) => void;\n  /**  The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n  onPause?: (event: Event) => void;\n  /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n  onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps): JSX.Element | null {\n  const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n    undefined,\n  );\n  const callbackRef = useCallback((node: HTMLElement) => {\n    setModelViewer(node);\n  }, []);\n  const {data, children, className, ...passthroughProps} = props;\n\n  const modelViewerLoadedStatus = useLoadScript(\n    'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n    {\n      module: true,\n    },\n  );\n\n  useEffect(() => {\n    const hydrogenEventListener = {\n      error: passthroughProps.onError,\n      load: passthroughProps.onLoad,\n      preload: passthroughProps.onPreload,\n      'model-visibility': passthroughProps.onModelVisibility,\n      progress: passthroughProps.onProgress,\n      'ar-status': passthroughProps.onArStatus,\n      'ar-tracking': passthroughProps.onArTracking,\n      'quick-look-button-tapped': passthroughProps.onQuickLookButtonTapped,\n      'camera-change': passthroughProps.onCameraChange,\n      'environment-change': passthroughProps.onEnvironmentChange,\n      play: passthroughProps.onPlay,\n      pause: passthroughProps.onPause,\n      'scene-graph-ready': passthroughProps.onSceneGraphReady,\n    };\n\n    if (!modelViewer) {\n      return;\n    }\n    Object.entries(hydrogenEventListener).forEach(\n      ([eventName, callbackFunc]) => {\n        if (callbackFunc) {\n          modelViewer.addEventListener(eventName, callbackFunc);\n        }\n      },\n    );\n\n    return () => {\n      if (modelViewer == null) {\n        return;\n      }\n      Object.entries(hydrogenEventListener).forEach(\n        ([eventName, callbackFunc]) => {\n          if (callbackFunc) {\n            modelViewer.removeEventListener(eventName, callbackFunc);\n          }\n        },\n      );\n    };\n  }, [\n    modelViewer,\n    passthroughProps.onArStatus,\n    passthroughProps.onArTracking,\n    passthroughProps.onCameraChange,\n    passthroughProps.onEnvironmentChange,\n    passthroughProps.onError,\n    passthroughProps.onLoad,\n    passthroughProps.onModelVisibility,\n    passthroughProps.onPause,\n    passthroughProps.onPlay,\n    passthroughProps.onPreload,\n    passthroughProps.onProgress,\n    passthroughProps.onQuickLookButtonTapped,\n    passthroughProps.onSceneGraphReady,\n  ]);\n\n  if (modelViewerLoadedStatus !== 'done') {\n    // TODO: What do we want to display while the model-viewer library loads?\n    return null;\n  }\n\n  if (!data.sources?.[0]?.url) {\n    const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(sourcesUrlError);\n    } else {\n      console.error(sourcesUrlError);\n      return null;\n    }\n  }\n\n  if (__HYDROGEN_DEV__ && !data.alt) {\n    console.warn(\n      `<ModelViewer/> requires the 'data.alt' prop for accessibility`,\n    );\n  }\n\n  return (\n    <model-viewer\n      ref={callbackRef}\n      {...passthroughProps}\n      // @ts-expect-error src should exist\n      // @eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      class={className}\n      id={passthroughProps.id ?? data.id}\n      src={data.sources[0].url}\n      alt={data.alt ?? null}\n      camera-controls={passthroughProps.cameraControls ?? true}\n      poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n      autoplay={passthroughProps.autoplay ?? true}\n      loading={passthroughProps.loading}\n      reveal={passthroughProps.reveal}\n      ar={passthroughProps.ar}\n      ar-modes={passthroughProps.arModes}\n      ar-scale={passthroughProps.arScale}\n      // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      ar-placement={passthroughProps.arPlacement}\n      ios-src={passthroughProps.iosSrc}\n      touch-action={passthroughProps.touchAction}\n      disable-zoom={passthroughProps.disableZoom}\n      orbit-sensitivity={passthroughProps.orbitSensitivity}\n      auto-rotate={passthroughProps.autoRotate}\n      auto-rotate-delay={passthroughProps.autoRotateDelay}\n      // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      rotation-per-second={passthroughProps.rotationPerSecond}\n      interaction-policy={passthroughProps.interactionPolicy}\n      interaction-prompt={passthroughProps.interactionPrompt}\n      interaction-prompt-style={passthroughProps.interactionPromptStyle}\n      interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n      camera-orbit={passthroughProps.cameraOrbit}\n      camera-target={passthroughProps.cameraTarget}\n      field-of-view={passthroughProps.fieldOfView}\n      max-camera-orbit={passthroughProps.maxCameraOrbit}\n      min-camera-orbit={passthroughProps.minCameraOrbit}\n      max-field-of-view={passthroughProps.maxFieldOfView}\n      min-field-of-view={passthroughProps.minFieldOfView}\n      bounds={passthroughProps.bounds}\n      interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n      skybox-image={passthroughProps.skyboxImage}\n      environment-image={passthroughProps.environmentImage}\n      exposure={passthroughProps.exposure}\n      shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n      shadow-softness={passthroughProps.shadowSoftness ?? 0}\n      animation-name={passthroughProps.animationName}\n      animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n      variant-name={passthroughProps.variantName}\n      orientation={passthroughProps.orientation}\n      scale={passthroughProps.scale}\n    >\n      {children}\n    </model-viewer>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ModelViewer.mjs","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'model-viewer': PartialDeep<\n        ModelViewerElement,\n        {recurseIntoArrays: true}\n      >;\n    }\n  }\n}\n\ntype ModelViewerProps = Omit<\n  PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n  'src'\n> &\n  ModelViewerBaseProps;\n\ntype ModelViewerBaseProps = {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2025-01/objects/model3d). */\n  data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n  /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */\n  onError?: (event: Event) => void;\n  /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */\n  onLoad?: (event: Event) => void;\n  /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */\n  onPreload?: (event: Event) => void;\n  /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */\n  onModelVisibility?: (event: Event) => void;\n  /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */\n  onProgress?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */\n  onArStatus?: (event: Event) => void;\n  /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */\n  onArTracking?: (event: Event) => void;\n  /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */\n  onQuickLookButtonTapped?: (event: Event) => void;\n  /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */\n  onCameraChange?: (event: Event) => void;\n  /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange).  */\n  onEnvironmentChange?: (event: Event) => void;\n  /**  The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */\n  onPlay?: (event: Event) => void;\n  /**  The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */\n  onPause?: (event: Event) => void;\n  /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */\n  onSceneGraphReady?: (event: Event) => void;\n};\n\n/**\n * The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n *\n * The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n *\n * ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps): JSX.Element | null {\n  const [modelViewer, setModelViewer] = useState<undefined | HTMLElement>(\n    undefined,\n  );\n  const callbackRef = useCallback((node: HTMLElement) => {\n    setModelViewer(node);\n  }, []);\n  const {data, children, className, ...passthroughProps} = props;\n\n  const modelViewerLoadedStatus = useLoadScript(\n    'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n    {\n      module: true,\n    },\n  );\n\n  useEffect(() => {\n    const hydrogenEventListener = {\n      error: passthroughProps.onError,\n      load: passthroughProps.onLoad,\n      preload: passthroughProps.onPreload,\n      'model-visibility': passthroughProps.onModelVisibility,\n      progress: passthroughProps.onProgress,\n      'ar-status': passthroughProps.onArStatus,\n      'ar-tracking': passthroughProps.onArTracking,\n      'quick-look-button-tapped': passthroughProps.onQuickLookButtonTapped,\n      'camera-change': passthroughProps.onCameraChange,\n      'environment-change': passthroughProps.onEnvironmentChange,\n      play: passthroughProps.onPlay,\n      pause: passthroughProps.onPause,\n      'scene-graph-ready': passthroughProps.onSceneGraphReady,\n    };\n\n    if (!modelViewer) {\n      return;\n    }\n    Object.entries(hydrogenEventListener).forEach(\n      ([eventName, callbackFunc]) => {\n        if (callbackFunc) {\n          modelViewer.addEventListener(eventName, callbackFunc);\n        }\n      },\n    );\n\n    return () => {\n      if (modelViewer == null) {\n        return;\n      }\n      Object.entries(hydrogenEventListener).forEach(\n        ([eventName, callbackFunc]) => {\n          if (callbackFunc) {\n            modelViewer.removeEventListener(eventName, callbackFunc);\n          }\n        },\n      );\n    };\n  }, [\n    modelViewer,\n    passthroughProps.onArStatus,\n    passthroughProps.onArTracking,\n    passthroughProps.onCameraChange,\n    passthroughProps.onEnvironmentChange,\n    passthroughProps.onError,\n    passthroughProps.onLoad,\n    passthroughProps.onModelVisibility,\n    passthroughProps.onPause,\n    passthroughProps.onPlay,\n    passthroughProps.onPreload,\n    passthroughProps.onProgress,\n    passthroughProps.onQuickLookButtonTapped,\n    passthroughProps.onSceneGraphReady,\n  ]);\n\n  if (modelViewerLoadedStatus !== 'done') {\n    // TODO: What do we want to display while the model-viewer library loads?\n    return null;\n  }\n\n  if (!data.sources?.[0]?.url) {\n    const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(sourcesUrlError);\n    } else {\n      console.error(sourcesUrlError);\n      return null;\n    }\n  }\n\n  if (__HYDROGEN_DEV__ && !data.alt) {\n    console.warn(\n      `<ModelViewer/> requires the 'data.alt' prop for accessibility`,\n    );\n  }\n\n  return (\n    <model-viewer\n      ref={callbackRef}\n      {...passthroughProps}\n      // @ts-expect-error src should exist\n      // @eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      class={className}\n      id={passthroughProps.id ?? data.id}\n      src={data.sources[0].url}\n      alt={data.alt ?? null}\n      camera-controls={passthroughProps.cameraControls ?? true}\n      poster={(passthroughProps.poster || data.previewImage?.url) ?? null}\n      autoplay={passthroughProps.autoplay ?? true}\n      loading={passthroughProps.loading}\n      reveal={passthroughProps.reveal}\n      ar={passthroughProps.ar}\n      ar-modes={passthroughProps.arModes}\n      ar-scale={passthroughProps.arScale}\n      // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      ar-placement={passthroughProps.arPlacement}\n      ios-src={passthroughProps.iosSrc}\n      touch-action={passthroughProps.touchAction}\n      disable-zoom={passthroughProps.disableZoom}\n      orbit-sensitivity={passthroughProps.orbitSensitivity}\n      auto-rotate={passthroughProps.autoRotate}\n      auto-rotate-delay={passthroughProps.autoRotateDelay}\n      // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      rotation-per-second={passthroughProps.rotationPerSecond}\n      interaction-policy={passthroughProps.interactionPolicy}\n      interaction-prompt={passthroughProps.interactionPrompt}\n      interaction-prompt-style={passthroughProps.interactionPromptStyle}\n      interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n      camera-orbit={passthroughProps.cameraOrbit}\n      camera-target={passthroughProps.cameraTarget}\n      field-of-view={passthroughProps.fieldOfView}\n      max-camera-orbit={passthroughProps.maxCameraOrbit}\n      min-camera-orbit={passthroughProps.minCameraOrbit}\n      max-field-of-view={passthroughProps.maxFieldOfView}\n      min-field-of-view={passthroughProps.minFieldOfView}\n      bounds={passthroughProps.bounds}\n      interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n      skybox-image={passthroughProps.skyboxImage}\n      environment-image={passthroughProps.environmentImage}\n      exposure={passthroughProps.exposure}\n      shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n      shadow-softness={passthroughProps.shadowSoftness ?? 0}\n      animation-name={passthroughProps.animationName}\n      animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n      variant-name={passthroughProps.variantName}\n      orientation={passthroughProps.orientation}\n      scale={passthroughProps.scale}\n    >\n      {children}\n    </model-viewer>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/node-prod/Money.js.map

@@ -1 +1 @@
-{"version":3,"file":"Money.js","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface MoneyPropsBase<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  /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */\n  data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n  /** Whether to remove the currency symbol from the output. */\n  withoutCurrency?: boolean;\n  /** Whether to remove trailing zeros (fractional money) from the output. */\n  withoutTrailingZeros?: boolean;\n  /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2024-10/objects/unitpricemeasurement). */\n  measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n  /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */\n  measurementSeparator?: ReactNode;\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 MoneyProps<ComponentGeneric extends React.ElementType> =\n  MoneyPropsBase<ComponentGeneric> &\n    (ComponentGeneric extends keyof React.JSX.IntrinsicElements\n      ? Omit<\n          React.ComponentPropsWithoutRef<ComponentGeneric>,\n          keyof MoneyPropsBase<ComponentGeneric>\n        >\n      : React.ComponentPropsWithoutRef<ComponentGeneric>);\n\n/**\n * The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2)\n * according to the `locale` in the `ShopifyProvider` component.\n * &nbsp;\n * @see {@link https://shopify.dev/api/hydrogen/components/money}\n * @example basic usage, outputs: $100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} />\n * ```\n * &nbsp;\n *\n * @example without currency, outputs: 100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />\n * ```\n * &nbsp;\n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />\n * ```\n * &nbsp;\n *\n * @example with per-unit measurement, outputs: $100.00 per G\n * ```ts\n * <Money\n *   data={{amount: '100.00', currencyCode: 'USD'}}\n *   measurement={{referenceUnit: 'G'}}\n *   measurementSeparator=\" per \"\n * />\n * ```\n */\nexport function Money<ComponentGeneric extends React.ElementType = 'div'>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>): JSX.Element {\n  if (!isMoney(data)) {\n    throw new Error(\n      `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`,\n    );\n  }\n  const moneyObject = useMoney(data);\n  const Wrapper = as ?? 'div';\n\n  let output = moneyObject.localizedString;\n\n  if (withoutCurrency || withoutTrailingZeros) {\n    if (withoutCurrency && !withoutTrailingZeros) {\n      output = moneyObject.amount;\n    } else if (!withoutCurrency && withoutTrailingZeros) {\n      output = moneyObject.withoutTrailingZeros;\n    } else {\n      // both\n      output = moneyObject.withoutTrailingZerosAndCurrency;\n    }\n  }\n\n  return (\n    <Wrapper {...passthroughProps}>\n      {output}\n      {measurement && measurement.referenceUnit && (\n        <>\n          {measurementSeparator}\n          {measurement.referenceUnit}\n        </>\n      )}\n    </Wrapper>\n  );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n  maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>,\n): maybeMoney is MoneyV2 {\n  return (\n    typeof maybeMoney.amount === 'string' &&\n    !!maybeMoney.amount &&\n    typeof maybeMoney.currencyCode === 'string' &&\n    !!maybeMoney.currencyCode\n  );\n}\n"],"names":["useMoney","jsxs","Fragment"],"mappings":";;;;AA+DO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AACxC,MAAA,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACM,QAAA,cAAcA,kBAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AACvC,QAAA,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IAAA,WACZ,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IAAA,OAChB;AAEL,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAGE,SAAAC,2BAAA,KAAC,SAAS,EAAA,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAEvBA,2BAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,GACf;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAGA,SAAS,QACP,YACuB;AACvB,SACE,OAAO,WAAW,WAAW,YAC7B,CAAC,CAAC,WAAW,UACb,OAAO,WAAW,iBAAiB,YACnC,CAAC,CAAC,WAAW;AAEjB;;"}
+{"version":3,"file":"Money.js","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface MoneyPropsBase<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  /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */\n  data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n  /** Whether to remove the currency symbol from the output. */\n  withoutCurrency?: boolean;\n  /** Whether to remove trailing zeros (fractional money) from the output. */\n  withoutTrailingZeros?: boolean;\n  /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2025-01/objects/unitpricemeasurement). */\n  measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n  /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */\n  measurementSeparator?: ReactNode;\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 MoneyProps<ComponentGeneric extends React.ElementType> =\n  MoneyPropsBase<ComponentGeneric> &\n    (ComponentGeneric extends keyof React.JSX.IntrinsicElements\n      ? Omit<\n          React.ComponentPropsWithoutRef<ComponentGeneric>,\n          keyof MoneyPropsBase<ComponentGeneric>\n        >\n      : React.ComponentPropsWithoutRef<ComponentGeneric>);\n\n/**\n * The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2)\n * according to the `locale` in the `ShopifyProvider` component.\n * &nbsp;\n * @see {@link https://shopify.dev/api/hydrogen/components/money}\n * @example basic usage, outputs: $100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} />\n * ```\n * &nbsp;\n *\n * @example without currency, outputs: 100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />\n * ```\n * &nbsp;\n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />\n * ```\n * &nbsp;\n *\n * @example with per-unit measurement, outputs: $100.00 per G\n * ```ts\n * <Money\n *   data={{amount: '100.00', currencyCode: 'USD'}}\n *   measurement={{referenceUnit: 'G'}}\n *   measurementSeparator=\" per \"\n * />\n * ```\n */\nexport function Money<ComponentGeneric extends React.ElementType = 'div'>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>): JSX.Element {\n  if (!isMoney(data)) {\n    throw new Error(\n      `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`,\n    );\n  }\n  const moneyObject = useMoney(data);\n  const Wrapper = as ?? 'div';\n\n  let output = moneyObject.localizedString;\n\n  if (withoutCurrency || withoutTrailingZeros) {\n    if (withoutCurrency && !withoutTrailingZeros) {\n      output = moneyObject.amount;\n    } else if (!withoutCurrency && withoutTrailingZeros) {\n      output = moneyObject.withoutTrailingZeros;\n    } else {\n      // both\n      output = moneyObject.withoutTrailingZerosAndCurrency;\n    }\n  }\n\n  return (\n    <Wrapper {...passthroughProps}>\n      {output}\n      {measurement && measurement.referenceUnit && (\n        <>\n          {measurementSeparator}\n          {measurement.referenceUnit}\n        </>\n      )}\n    </Wrapper>\n  );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n  maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>,\n): maybeMoney is MoneyV2 {\n  return (\n    typeof maybeMoney.amount === 'string' &&\n    !!maybeMoney.amount &&\n    typeof maybeMoney.currencyCode === 'string' &&\n    !!maybeMoney.currencyCode\n  );\n}\n"],"names":["useMoney","jsxs","Fragment"],"mappings":";;;;AA+DO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AACxC,MAAA,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACM,QAAA,cAAcA,kBAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AACvC,QAAA,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IAAA,WACZ,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IAAA,OAChB;AAEL,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAGE,SAAAC,2BAAA,KAAC,SAAS,EAAA,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAEvBA,2BAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,GACf;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAGA,SAAS,QACP,YACuB;AACvB,SACE,OAAO,WAAW,WAAW,YAC7B,CAAC,CAAC,WAAW,UACb,OAAO,WAAW,iBAAiB,YACnC,CAAC,CAAC,WAAW;AAEjB;;"}

package/dist/node-prod/Money.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Money.mjs","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface MoneyPropsBase<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  /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */\n  data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n  /** Whether to remove the currency symbol from the output. */\n  withoutCurrency?: boolean;\n  /** Whether to remove trailing zeros (fractional money) from the output. */\n  withoutTrailingZeros?: boolean;\n  /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2024-10/objects/unitpricemeasurement). */\n  measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n  /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */\n  measurementSeparator?: ReactNode;\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 MoneyProps<ComponentGeneric extends React.ElementType> =\n  MoneyPropsBase<ComponentGeneric> &\n    (ComponentGeneric extends keyof React.JSX.IntrinsicElements\n      ? Omit<\n          React.ComponentPropsWithoutRef<ComponentGeneric>,\n          keyof MoneyPropsBase<ComponentGeneric>\n        >\n      : React.ComponentPropsWithoutRef<ComponentGeneric>);\n\n/**\n * The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2)\n * according to the `locale` in the `ShopifyProvider` component.\n * &nbsp;\n * @see {@link https://shopify.dev/api/hydrogen/components/money}\n * @example basic usage, outputs: $100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} />\n * ```\n * &nbsp;\n *\n * @example without currency, outputs: 100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />\n * ```\n * &nbsp;\n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />\n * ```\n * &nbsp;\n *\n * @example with per-unit measurement, outputs: $100.00 per G\n * ```ts\n * <Money\n *   data={{amount: '100.00', currencyCode: 'USD'}}\n *   measurement={{referenceUnit: 'G'}}\n *   measurementSeparator=\" per \"\n * />\n * ```\n */\nexport function Money<ComponentGeneric extends React.ElementType = 'div'>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>): JSX.Element {\n  if (!isMoney(data)) {\n    throw new Error(\n      `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`,\n    );\n  }\n  const moneyObject = useMoney(data);\n  const Wrapper = as ?? 'div';\n\n  let output = moneyObject.localizedString;\n\n  if (withoutCurrency || withoutTrailingZeros) {\n    if (withoutCurrency && !withoutTrailingZeros) {\n      output = moneyObject.amount;\n    } else if (!withoutCurrency && withoutTrailingZeros) {\n      output = moneyObject.withoutTrailingZeros;\n    } else {\n      // both\n      output = moneyObject.withoutTrailingZerosAndCurrency;\n    }\n  }\n\n  return (\n    <Wrapper {...passthroughProps}>\n      {output}\n      {measurement && measurement.referenceUnit && (\n        <>\n          {measurementSeparator}\n          {measurement.referenceUnit}\n        </>\n      )}\n    </Wrapper>\n  );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n  maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>,\n): maybeMoney is MoneyV2 {\n  return (\n    typeof maybeMoney.amount === 'string' &&\n    !!maybeMoney.amount &&\n    typeof maybeMoney.currencyCode === 'string' &&\n    !!maybeMoney.currencyCode\n  );\n}\n"],"names":[],"mappings":";;AA+DO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AACxC,MAAA,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACM,QAAA,cAAc,SAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AACvC,QAAA,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IAAA,WACZ,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IAAA,OAChB;AAEL,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAGE,SAAA,qBAAC,SAAS,EAAA,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAEvB,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,GACf;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAGA,SAAS,QACP,YACuB;AACvB,SACE,OAAO,WAAW,WAAW,YAC7B,CAAC,CAAC,WAAW,UACb,OAAO,WAAW,iBAAiB,YACnC,CAAC,CAAC,WAAW;AAEjB;"}
+{"version":3,"file":"Money.mjs","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface MoneyPropsBase<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  /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */\n  data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n  /** Whether to remove the currency symbol from the output. */\n  withoutCurrency?: boolean;\n  /** Whether to remove trailing zeros (fractional money) from the output. */\n  withoutTrailingZeros?: boolean;\n  /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2025-01/objects/unitpricemeasurement). */\n  measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n  /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */\n  measurementSeparator?: ReactNode;\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 MoneyProps<ComponentGeneric extends React.ElementType> =\n  MoneyPropsBase<ComponentGeneric> &\n    (ComponentGeneric extends keyof React.JSX.IntrinsicElements\n      ? Omit<\n          React.ComponentPropsWithoutRef<ComponentGeneric>,\n          keyof MoneyPropsBase<ComponentGeneric>\n        >\n      : React.ComponentPropsWithoutRef<ComponentGeneric>);\n\n/**\n * The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2)\n * according to the `locale` in the `ShopifyProvider` component.\n * &nbsp;\n * @see {@link https://shopify.dev/api/hydrogen/components/money}\n * @example basic usage, outputs: $100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} />\n * ```\n * &nbsp;\n *\n * @example without currency, outputs: 100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />\n * ```\n * &nbsp;\n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />\n * ```\n * &nbsp;\n *\n * @example with per-unit measurement, outputs: $100.00 per G\n * ```ts\n * <Money\n *   data={{amount: '100.00', currencyCode: 'USD'}}\n *   measurement={{referenceUnit: 'G'}}\n *   measurementSeparator=\" per \"\n * />\n * ```\n */\nexport function Money<ComponentGeneric extends React.ElementType = 'div'>({\n  data,\n  as,\n  withoutCurrency,\n  withoutTrailingZeros,\n  measurement,\n  measurementSeparator = '/',\n  ...passthroughProps\n}: MoneyProps<ComponentGeneric>): JSX.Element {\n  if (!isMoney(data)) {\n    throw new Error(\n      `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`,\n    );\n  }\n  const moneyObject = useMoney(data);\n  const Wrapper = as ?? 'div';\n\n  let output = moneyObject.localizedString;\n\n  if (withoutCurrency || withoutTrailingZeros) {\n    if (withoutCurrency && !withoutTrailingZeros) {\n      output = moneyObject.amount;\n    } else if (!withoutCurrency && withoutTrailingZeros) {\n      output = moneyObject.withoutTrailingZeros;\n    } else {\n      // both\n      output = moneyObject.withoutTrailingZerosAndCurrency;\n    }\n  }\n\n  return (\n    <Wrapper {...passthroughProps}>\n      {output}\n      {measurement && measurement.referenceUnit && (\n        <>\n          {measurementSeparator}\n          {measurement.referenceUnit}\n        </>\n      )}\n    </Wrapper>\n  );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n  maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>,\n): maybeMoney is MoneyV2 {\n  return (\n    typeof maybeMoney.amount === 'string' &&\n    !!maybeMoney.amount &&\n    typeof maybeMoney.currencyCode === 'string' &&\n    !!maybeMoney.currencyCode\n  );\n}\n"],"names":[],"mappings":";;AA+DO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AACxC,MAAA,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACM,QAAA,cAAc,SAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AACvC,QAAA,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IAAA,WACZ,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IAAA,OAChB;AAEL,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAGE,SAAA,qBAAC,SAAS,EAAA,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAEvB,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,GACf;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAGA,SAAS,QACP,YACuB;AACvB,SACE,OAAO,WAAW,WAAW,YAC7B,CAAC,CAAC,WAAW,UACb,OAAO,WAAW,iBAAiB,YACnC,CAAC,CAAC,WAAW;AAEjB;"}

package/dist/node-prod/Video.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.js","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":["forwardRef","shopifyLoader","jsx","createElement"],"mappings":";;;;;AAmBO,MAAM,QAAQA,MAAA,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,YAAYC,MAAAA,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,IAEEC,2BAAA;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,iBAAAC,sBAAA;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.js","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/2025-01/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":["forwardRef","shopifyLoader","jsx","createElement"],"mappings":";;;;;AAmBO,MAAM,QAAQA,MAAA,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,YAAYC,MAAAA,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,IAEEC,2BAAA;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,iBAAAC,sBAAA;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/node-prod/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-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;"}
+{"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/2025-01/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/node-prod/codegen.helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"codegen.helpers.js","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;;;"}
+{"version":3,"file":"codegen.helpers.js","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/2025-01/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/2025-01/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/node-prod/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-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;"}
+{"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/2025-01/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/2025-01/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/node-prod/getProductOptions.js

@@ -80,10 +80,13 @@ function checkProductParam(product, checkAll = false) {
       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];
+      let firstOptionValues = product.options[0].optionValues[0];
       if (checkAll && !(firstOptionValues == null ? void 0 : firstOptionValues.name)) {
         validParam = logErrorAndReturnFalse("options.optionValues.name");
       }
+      firstOptionValues = product.options[0].optionValues.filter(
+        (value) => !!(value == null ? void 0 : value.firstSelectableVariant)
+      )[0];
       if (firstOptionValues == null ? void 0 : firstOptionValues.firstSelectableVariant) {
         validParam = checkProductVariantParam(
           firstOptionValues.firstSelectableVariant,
@@ -91,10 +94,6 @@ function checkProductParam(product, checkAll = false) {
           validParam,
           checkAll
         );
-      } else {
-        validParam = logErrorAndReturnFalse(
-          "options.optionValues.firstSelectableVariant"
-        );
       }
     } else {
       validParam = logErrorAndReturnFalse("options.optionValues");
@@ -212,11 +211,14 @@ function getProductOptions(product) {
           encodedVariantAvailability || ""
         );
         const variant = variants[targetKey] || value.firstSelectableVariant;
-        const variantOptionParam = mapSelectedProductOptionToObject(
-          variant.selectedOptions || []
-        );
+        let variantOptionParam = {};
+        if (variant) {
+          variantOptionParam = mapSelectedProductOptionToObject(
+            variant.selectedOptions || []
+          );
+        }
         const searchParams = new URLSearchParams(variantOptionParam);
-        const handle = (_a = variant == null ? void 0 : variant.product) == null ? void 0 : _a.handle;
+        const handle = ((_a = variant == null ? void 0 : variant.product) == null ? void 0 : _a.handle) || productHandle;
         return {
           ...value,
           variant,

package/dist/node-prod/getProductOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"getProductOptions.js","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":["isOptionValueCombinationInEncodedVariant"],"mappings":"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"}
+{"version":3,"file":"getProductOptions.js","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      let 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      // It is possible for firstSelectableVariant to be null\n      firstOptionValues = product.options[0].optionValues.filter(\n        (value) => !!value?.firstSelectableVariant,\n      )[0];\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      }\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        let variantOptionParam = {};\n        if (variant) {\n          variantOptionParam = mapSelectedProductOptionToObject(\n            variant.selectedOptions || [],\n          );\n        }\n        const searchParams = new URLSearchParams(variantOptionParam);\n        const handle = variant?.product?.handle || productHandle;\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":["isOptionValueCombinationInEncodedVariant"],"mappings":"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"}

package/dist/node-prod/getProductOptions.mjs

@@ -78,10 +78,13 @@ function checkProductParam(product, checkAll = false) {
       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];
+      let firstOptionValues = product.options[0].optionValues[0];
       if (checkAll && !(firstOptionValues == null ? void 0 : firstOptionValues.name)) {
         validParam = logErrorAndReturnFalse("options.optionValues.name");
       }
+      firstOptionValues = product.options[0].optionValues.filter(
+        (value) => !!(value == null ? void 0 : value.firstSelectableVariant)
+      )[0];
       if (firstOptionValues == null ? void 0 : firstOptionValues.firstSelectableVariant) {
         validParam = checkProductVariantParam(
           firstOptionValues.firstSelectableVariant,
@@ -89,10 +92,6 @@ function checkProductParam(product, checkAll = false) {
           validParam,
           checkAll
         );
-      } else {
-        validParam = logErrorAndReturnFalse(
-          "options.optionValues.firstSelectableVariant"
-        );
       }
     } else {
       validParam = logErrorAndReturnFalse("options.optionValues");
@@ -210,11 +209,14 @@ function getProductOptions(product) {
           encodedVariantAvailability || ""
         );
         const variant = variants[targetKey] || value.firstSelectableVariant;
-        const variantOptionParam = mapSelectedProductOptionToObject(
-          variant.selectedOptions || []
-        );
+        let variantOptionParam = {};
+        if (variant) {
+          variantOptionParam = mapSelectedProductOptionToObject(
+            variant.selectedOptions || []
+          );
+        }
         const searchParams = new URLSearchParams(variantOptionParam);
-        const handle = (_a = variant == null ? void 0 : variant.product) == null ? void 0 : _a.handle;
+        const handle = ((_a = variant == null ? void 0 : variant.product) == null ? void 0 : _a.handle) || productHandle;
         return {
           ...value,
           variant,

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

@@ -1 +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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"}
+{"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      let 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      // It is possible for firstSelectableVariant to be null\n      firstOptionValues = product.options[0].optionValues.filter(\n        (value) => !!value?.firstSelectableVariant,\n      )[0];\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      }\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        let variantOptionParam = {};\n        if (variant) {\n          variantOptionParam = mapSelectedProductOptionToObject(\n            variant.selectedOptions || [],\n          );\n        }\n        const searchParams = new URLSearchParams(variantOptionParam);\n        const handle = variant?.product?.handle || productHandle;\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-prod/optionValueDecoder.js

@@ -74,14 +74,16 @@ function v1Decoder(encodedVariantField) {
     }
     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]);
+  const encodingEndsWithIndex = encodedVariantField.match(/\d+$/g);
+  if (encodingEndsWithIndex) {
+    const finalValueIndex = parseInt(encodingEndsWithIndex[0]);
+    if (rangeStart != null) {
+      for (; rangeStart <= finalValueIndex; rangeStart++) {
+        currentOptionValue[depth] = rangeStart;
+        options.push([...currentOptionValue]);
+      }
+    } else {
+      options.push([finalValueIndex]);
     }
   }
   return options;