@shopify/hydrogen-react 2023.4.2 → 2023.4.4

package/dist/node-dev/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/2023-04/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    if (!modelViewer) {\n      return;\n    }\n    if (passthroughProps.onError)\n      modelViewer.addEventListener('error', passthroughProps.onError);\n    if (passthroughProps.onLoad)\n      modelViewer.addEventListener('load', passthroughProps.onLoad);\n    if (passthroughProps.onPreload)\n      modelViewer.addEventListener('preload', passthroughProps.onPreload);\n    if (passthroughProps.onModelVisibility)\n      modelViewer.addEventListener(\n        'model-visibility',\n        passthroughProps.onModelVisibility,\n      );\n    if (passthroughProps.onProgress)\n      modelViewer.addEventListener('progress', passthroughProps.onProgress);\n    if (passthroughProps.onArStatus)\n      modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n    if (passthroughProps.onArTracking)\n      modelViewer.addEventListener(\n        'ar-tracking',\n        passthroughProps.onArTracking,\n      );\n    if (passthroughProps.onQuickLookButtonTapped)\n      modelViewer.addEventListener(\n        'quick-look-button-tapped',\n        passthroughProps.onQuickLookButtonTapped,\n      );\n    if (passthroughProps.onCameraChange)\n      modelViewer.addEventListener(\n        'camera-change',\n        passthroughProps.onCameraChange,\n      );\n    if (passthroughProps.onEnvironmentChange)\n      modelViewer.addEventListener(\n        'environment-change',\n        passthroughProps.onEnvironmentChange,\n      );\n    if (passthroughProps.onPlay)\n      modelViewer.addEventListener('play', passthroughProps.onPlay);\n    if (passthroughProps.onPause)\n      modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n    if (passthroughProps.onSceneGraphReady)\n      modelViewer.addEventListener(\n        'scene-graph-ready',\n        passthroughProps.onSceneGraphReady,\n      );\n\n    return () => {\n      if (modelViewer == null) {\n        return;\n      }\n      if (passthroughProps.onError)\n        modelViewer.removeEventListener('error', passthroughProps.onError);\n      if (passthroughProps.onLoad)\n        modelViewer.removeEventListener('load', passthroughProps.onLoad);\n      if (passthroughProps.onPreload)\n        modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n      if (passthroughProps.onModelVisibility)\n        modelViewer.removeEventListener(\n          'model-visibility',\n          passthroughProps.onModelVisibility,\n        );\n      if (passthroughProps.onProgress)\n        modelViewer.removeEventListener(\n          'progress',\n          passthroughProps.onProgress,\n        );\n      if (passthroughProps.onArStatus)\n        modelViewer.removeEventListener(\n          'ar-status',\n          passthroughProps.onArStatus,\n        );\n      if (passthroughProps.onArTracking)\n        modelViewer.removeEventListener(\n          'ar-tracking',\n          passthroughProps.onArTracking,\n        );\n      if (passthroughProps.onQuickLookButtonTapped)\n        modelViewer.removeEventListener(\n          'quick-look-button-tapped',\n          passthroughProps.onQuickLookButtonTapped,\n        );\n      if (passthroughProps.onCameraChange)\n        modelViewer.removeEventListener(\n          'camera-change',\n          passthroughProps.onCameraChange,\n        );\n      if (passthroughProps.onEnvironmentChange)\n        modelViewer.removeEventListener(\n          'environment-change',\n          passthroughProps.onEnvironmentChange,\n        );\n      if (passthroughProps.onPlay)\n        modelViewer.removeEventListener('play', passthroughProps.onPlay);\n      if (passthroughProps.onPause)\n        modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n      if (passthroughProps.onSceneGraphReady)\n        modelViewer.removeEventListener(\n          'scene-graph-ready',\n          passthroughProps.onSceneGraphReady,\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      // @ts-expect-error ref should exist\n      ref={callbackRef}\n      {...passthroughProps}\n      className={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,QAAI,CAAC,aAAa;AAChB;AAAA,IACF;AACA,QAAI,iBAAiB;AACP,kBAAA,iBAAiB,SAAS,iBAAiB,OAAO;AAChE,QAAI,iBAAiB;AACP,kBAAA,iBAAiB,QAAQ,iBAAiB,MAAM;AAC9D,QAAI,iBAAiB;AACP,kBAAA,iBAAiB,WAAW,iBAAiB,SAAS;AACpE,QAAI,iBAAiB;AACP,kBAAA;AAAA,QACV;AAAA,QACA,iBAAiB;AAAA,MAAA;AAErB,QAAI,iBAAiB;AACP,kBAAA,iBAAiB,YAAY,iBAAiB,UAAU;AACtE,QAAI,iBAAiB;AACP,kBAAA,iBAAiB,aAAa,iBAAiB,UAAU;AACvE,QAAI,iBAAiB;AACP,kBAAA;AAAA,QACV;AAAA,QACA,iBAAiB;AAAA,MAAA;AAErB,QAAI,iBAAiB;AACP,kBAAA;AAAA,QACV;AAAA,QACA,iBAAiB;AAAA,MAAA;AAErB,QAAI,iBAAiB;AACP,kBAAA;AAAA,QACV;AAAA,QACA,iBAAiB;AAAA,MAAA;AAErB,QAAI,iBAAiB;AACP,kBAAA;AAAA,QACV;AAAA,QACA,iBAAiB;AAAA,MAAA;AAErB,QAAI,iBAAiB;AACP,kBAAA,iBAAiB,QAAQ,iBAAiB,MAAM;AAC9D,QAAI,iBAAiB;AACP,kBAAA,iBAAiB,aAAa,iBAAiB,OAAO;AACpE,QAAI,iBAAiB;AACP,kBAAA;AAAA,QACV;AAAA,QACA,iBAAiB;AAAA,MAAA;AAGrB,WAAO,MAAM;AACX,UAAI,eAAe,MAAM;AACvB;AAAA,MACF;AACA,UAAI,iBAAiB;AACP,oBAAA,oBAAoB,SAAS,iBAAiB,OAAO;AACnE,UAAI,iBAAiB;AACP,oBAAA,oBAAoB,QAAQ,iBAAiB,MAAM;AACjE,UAAI,iBAAiB;AACP,oBAAA,oBAAoB,WAAW,iBAAiB,SAAS;AACvE,UAAI,iBAAiB;AACP,oBAAA;AAAA,UACV;AAAA,UACA,iBAAiB;AAAA,QAAA;AAErB,UAAI,iBAAiB;AACP,oBAAA;AAAA,UACV;AAAA,UACA,iBAAiB;AAAA,QAAA;AAErB,UAAI,iBAAiB;AACP,oBAAA;AAAA,UACV;AAAA,UACA,iBAAiB;AAAA,QAAA;AAErB,UAAI,iBAAiB;AACP,oBAAA;AAAA,UACV;AAAA,UACA,iBAAiB;AAAA,QAAA;AAErB,UAAI,iBAAiB;AACP,oBAAA;AAAA,UACV;AAAA,UACA,iBAAiB;AAAA,QAAA;AAErB,UAAI,iBAAiB;AACP,oBAAA;AAAA,UACV;AAAA,UACA,iBAAiB;AAAA,QAAA;AAErB,UAAI,iBAAiB;AACP,oBAAA;AAAA,UACV;AAAA,UACA,iBAAiB;AAAA,QAAA;AAErB,UAAI,iBAAiB;AACP,oBAAA,oBAAoB,QAAQ,iBAAiB,MAAM;AACjE,UAAI,iBAAiB;AACP,oBAAA,oBAAoB,aAAa,iBAAiB,OAAO;AACvE,UAAI,iBAAiB;AACP,oBAAA;AAAA,UACV;AAAA,UACA,iBAAiB;AAAA,QAAA;AAAA,IACnB;AAAA,EACJ,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;AACF;AACd,YAAA,IAAI,MAAM,eAAe;AAAA,IAIjC;AAAA,EACF;AAEI,MAAoB,CAAC,KAAK,KAAK;AACzB,YAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAGE,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,KAAK;AAAA,MACJ,GAAG;AAAA,MACJ;AAAA,MACA,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/2023-04/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    if (!modelViewer) {\n      return;\n    }\n    if (passthroughProps.onError)\n      modelViewer.addEventListener('error', passthroughProps.onError);\n    if (passthroughProps.onLoad)\n      modelViewer.addEventListener('load', passthroughProps.onLoad);\n    if (passthroughProps.onPreload)\n      modelViewer.addEventListener('preload', passthroughProps.onPreload);\n    if (passthroughProps.onModelVisibility)\n      modelViewer.addEventListener(\n        'model-visibility',\n        passthroughProps.onModelVisibility,\n      );\n    if (passthroughProps.onProgress)\n      modelViewer.addEventListener('progress', passthroughProps.onProgress);\n    if (passthroughProps.onArStatus)\n      modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n    if (passthroughProps.onArTracking)\n      modelViewer.addEventListener(\n        'ar-tracking',\n        passthroughProps.onArTracking,\n      );\n    if (passthroughProps.onQuickLookButtonTapped)\n      modelViewer.addEventListener(\n        'quick-look-button-tapped',\n        passthroughProps.onQuickLookButtonTapped,\n      );\n    if (passthroughProps.onCameraChange)\n      modelViewer.addEventListener(\n        'camera-change',\n        passthroughProps.onCameraChange,\n      );\n    if (passthroughProps.onEnvironmentChange)\n      modelViewer.addEventListener(\n        'environment-change',\n        passthroughProps.onEnvironmentChange,\n      );\n    if (passthroughProps.onPlay)\n      modelViewer.addEventListener('play', passthroughProps.onPlay);\n    if (passthroughProps.onPause)\n      modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n    if (passthroughProps.onSceneGraphReady)\n      modelViewer.addEventListener(\n        'scene-graph-ready',\n        passthroughProps.onSceneGraphReady,\n      );\n\n    return () => {\n      if (modelViewer == null) {\n        return;\n      }\n      if (passthroughProps.onError)\n        modelViewer.removeEventListener('error', passthroughProps.onError);\n      if (passthroughProps.onLoad)\n        modelViewer.removeEventListener('load', passthroughProps.onLoad);\n      if (passthroughProps.onPreload)\n        modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n      if (passthroughProps.onModelVisibility)\n        modelViewer.removeEventListener(\n          'model-visibility',\n          passthroughProps.onModelVisibility,\n        );\n      if (passthroughProps.onProgress)\n        modelViewer.removeEventListener(\n          'progress',\n          passthroughProps.onProgress,\n        );\n      if (passthroughProps.onArStatus)\n        modelViewer.removeEventListener(\n          'ar-status',\n          passthroughProps.onArStatus,\n        );\n      if (passthroughProps.onArTracking)\n        modelViewer.removeEventListener(\n          'ar-tracking',\n          passthroughProps.onArTracking,\n        );\n      if (passthroughProps.onQuickLookButtonTapped)\n        modelViewer.removeEventListener(\n          'quick-look-button-tapped',\n          passthroughProps.onQuickLookButtonTapped,\n        );\n      if (passthroughProps.onCameraChange)\n        modelViewer.removeEventListener(\n          'camera-change',\n          passthroughProps.onCameraChange,\n        );\n      if (passthroughProps.onEnvironmentChange)\n        modelViewer.removeEventListener(\n          'environment-change',\n          passthroughProps.onEnvironmentChange,\n        );\n      if (passthroughProps.onPlay)\n        modelViewer.removeEventListener('play', passthroughProps.onPlay);\n      if (passthroughProps.onPause)\n        modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n      if (passthroughProps.onSceneGraphReady)\n        modelViewer.removeEventListener(\n          'scene-graph-ready',\n          passthroughProps.onSceneGraphReady,\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-dev/ModelViewer.mjs

@@ -154,7 +154,7 @@ function ModelViewer(props) {
     {
       ref: callbackRef,
       ...passthroughProps,
-      className,
+      class: className,
       id: passthroughProps.id ?? data.id,
       src: data.sources[0].url,
       alt: data.alt ?? null,

package/dist/node-dev/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/2023-04/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    if (!modelViewer) {\n      return;\n    }\n    if (passthroughProps.onError)\n      modelViewer.addEventListener('error', passthroughProps.onError);\n    if (passthroughProps.onLoad)\n      modelViewer.addEventListener('load', passthroughProps.onLoad);\n    if (passthroughProps.onPreload)\n      modelViewer.addEventListener('preload', passthroughProps.onPreload);\n    if (passthroughProps.onModelVisibility)\n      modelViewer.addEventListener(\n        'model-visibility',\n        passthroughProps.onModelVisibility,\n      );\n    if (passthroughProps.onProgress)\n      modelViewer.addEventListener('progress', passthroughProps.onProgress);\n    if (passthroughProps.onArStatus)\n      modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n    if (passthroughProps.onArTracking)\n      modelViewer.addEventListener(\n        'ar-tracking',\n        passthroughProps.onArTracking,\n      );\n    if (passthroughProps.onQuickLookButtonTapped)\n      modelViewer.addEventListener(\n        'quick-look-button-tapped',\n        passthroughProps.onQuickLookButtonTapped,\n      );\n    if (passthroughProps.onCameraChange)\n      modelViewer.addEventListener(\n        'camera-change',\n        passthroughProps.onCameraChange,\n      );\n    if (passthroughProps.onEnvironmentChange)\n      modelViewer.addEventListener(\n        'environment-change',\n        passthroughProps.onEnvironmentChange,\n      );\n    if (passthroughProps.onPlay)\n      modelViewer.addEventListener('play', passthroughProps.onPlay);\n    if (passthroughProps.onPause)\n      modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n    if (passthroughProps.onSceneGraphReady)\n      modelViewer.addEventListener(\n        'scene-graph-ready',\n        passthroughProps.onSceneGraphReady,\n      );\n\n    return () => {\n      if (modelViewer == null) {\n        return;\n      }\n      if (passthroughProps.onError)\n        modelViewer.removeEventListener('error', passthroughProps.onError);\n      if (passthroughProps.onLoad)\n        modelViewer.removeEventListener('load', passthroughProps.onLoad);\n      if (passthroughProps.onPreload)\n        modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n      if (passthroughProps.onModelVisibility)\n        modelViewer.removeEventListener(\n          'model-visibility',\n          passthroughProps.onModelVisibility,\n        );\n      if (passthroughProps.onProgress)\n        modelViewer.removeEventListener(\n          'progress',\n          passthroughProps.onProgress,\n        );\n      if (passthroughProps.onArStatus)\n        modelViewer.removeEventListener(\n          'ar-status',\n          passthroughProps.onArStatus,\n        );\n      if (passthroughProps.onArTracking)\n        modelViewer.removeEventListener(\n          'ar-tracking',\n          passthroughProps.onArTracking,\n        );\n      if (passthroughProps.onQuickLookButtonTapped)\n        modelViewer.removeEventListener(\n          'quick-look-button-tapped',\n          passthroughProps.onQuickLookButtonTapped,\n        );\n      if (passthroughProps.onCameraChange)\n        modelViewer.removeEventListener(\n          'camera-change',\n          passthroughProps.onCameraChange,\n        );\n      if (passthroughProps.onEnvironmentChange)\n        modelViewer.removeEventListener(\n          'environment-change',\n          passthroughProps.onEnvironmentChange,\n        );\n      if (passthroughProps.onPlay)\n        modelViewer.removeEventListener('play', passthroughProps.onPlay);\n      if (passthroughProps.onPause)\n        modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n      if (passthroughProps.onSceneGraphReady)\n        modelViewer.removeEventListener(\n          'scene-graph-ready',\n          passthroughProps.onSceneGraphReady,\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      // @ts-expect-error ref should exist\n      ref={callbackRef}\n      {...passthroughProps}\n      className={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/2023-04/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    if (!modelViewer) {\n      return;\n    }\n    if (passthroughProps.onError)\n      modelViewer.addEventListener('error', passthroughProps.onError);\n    if (passthroughProps.onLoad)\n      modelViewer.addEventListener('load', passthroughProps.onLoad);\n    if (passthroughProps.onPreload)\n      modelViewer.addEventListener('preload', passthroughProps.onPreload);\n    if (passthroughProps.onModelVisibility)\n      modelViewer.addEventListener(\n        'model-visibility',\n        passthroughProps.onModelVisibility,\n      );\n    if (passthroughProps.onProgress)\n      modelViewer.addEventListener('progress', passthroughProps.onProgress);\n    if (passthroughProps.onArStatus)\n      modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n    if (passthroughProps.onArTracking)\n      modelViewer.addEventListener(\n        'ar-tracking',\n        passthroughProps.onArTracking,\n      );\n    if (passthroughProps.onQuickLookButtonTapped)\n      modelViewer.addEventListener(\n        'quick-look-button-tapped',\n        passthroughProps.onQuickLookButtonTapped,\n      );\n    if (passthroughProps.onCameraChange)\n      modelViewer.addEventListener(\n        'camera-change',\n        passthroughProps.onCameraChange,\n      );\n    if (passthroughProps.onEnvironmentChange)\n      modelViewer.addEventListener(\n        'environment-change',\n        passthroughProps.onEnvironmentChange,\n      );\n    if (passthroughProps.onPlay)\n      modelViewer.addEventListener('play', passthroughProps.onPlay);\n    if (passthroughProps.onPause)\n      modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n    if (passthroughProps.onSceneGraphReady)\n      modelViewer.addEventListener(\n        'scene-graph-ready',\n        passthroughProps.onSceneGraphReady,\n      );\n\n    return () => {\n      if (modelViewer == null) {\n        return;\n      }\n      if (passthroughProps.onError)\n        modelViewer.removeEventListener('error', passthroughProps.onError);\n      if (passthroughProps.onLoad)\n        modelViewer.removeEventListener('load', passthroughProps.onLoad);\n      if (passthroughProps.onPreload)\n        modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n      if (passthroughProps.onModelVisibility)\n        modelViewer.removeEventListener(\n          'model-visibility',\n          passthroughProps.onModelVisibility,\n        );\n      if (passthroughProps.onProgress)\n        modelViewer.removeEventListener(\n          'progress',\n          passthroughProps.onProgress,\n        );\n      if (passthroughProps.onArStatus)\n        modelViewer.removeEventListener(\n          'ar-status',\n          passthroughProps.onArStatus,\n        );\n      if (passthroughProps.onArTracking)\n        modelViewer.removeEventListener(\n          'ar-tracking',\n          passthroughProps.onArTracking,\n        );\n      if (passthroughProps.onQuickLookButtonTapped)\n        modelViewer.removeEventListener(\n          'quick-look-button-tapped',\n          passthroughProps.onQuickLookButtonTapped,\n        );\n      if (passthroughProps.onCameraChange)\n        modelViewer.removeEventListener(\n          'camera-change',\n          passthroughProps.onCameraChange,\n        );\n      if (passthroughProps.onEnvironmentChange)\n        modelViewer.removeEventListener(\n          'environment-change',\n          passthroughProps.onEnvironmentChange,\n        );\n      if (passthroughProps.onPlay)\n        modelViewer.removeEventListener('play', passthroughProps.onPlay);\n      if (passthroughProps.onPause)\n        modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n      if (passthroughProps.onSceneGraphReady)\n        modelViewer.removeEventListener(\n          'scene-graph-ready',\n          passthroughProps.onSceneGraphReady,\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-dev/flatten-connection.js.map

@@ -1 +1 @@
-{"version":3,"file":"flatten-connection.js","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<\n  ConnectionGeneric extends\n    | PartialDeep<ConnectionEdges, {recurseIntoArrays: true}>\n    | PartialDeep<ConnectionNodes, {recurseIntoArrays: true}>\n    | ConnectionEdges\n    | ConnectionNodes,\n>(\n  connection?: ConnectionGeneric,\n): ConnectionGeneric extends\n  | {\n      edges: {node: Array<infer ConnectionBaseType>};\n    }\n  | {\n      nodes: Array<infer ConnectionBaseType>;\n    }\n  ? // if it's not a PartialDeep, then return the infered type\n    ConnectionBaseType[]\n  : ConnectionGeneric extends\n      | PartialDeep<\n          {edges: {node: Array<infer ConnectionBaseType>}},\n          {recurseIntoArrays: true}\n        >\n      | PartialDeep<\n          {\n            nodes: Array<infer ConnectionBaseType>;\n          },\n          {recurseIntoArrays: true}\n        >\n  ? // if it is a PartialDeep, return a PartialDeep inferred type\n    PartialDeep<ConnectionBaseType[], {recurseIntoArrays: true}>\n  : never {\n  if (!connection) {\n    const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${\n      connection ?? ''\n    }' instead.`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noConnectionErr);\n    } else {\n      console.error(noConnectionErr + ` Returning an empty array`);\n      // @ts-expect-error We don't want to crash prod, so return an empty array\n      return [];\n    }\n  }\n\n  if ('nodes' in connection) {\n    // @ts-expect-error return type is failing\n    return connection.nodes;\n  }\n\n  if ('edges' in connection && Array.isArray(connection.edges)) {\n    // @ts-expect-error return type is failing\n    return connection.edges.map((edge) => {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      if (!edge?.node) {\n        throw new Error(\n          'flattenConnection(): Connection edges must contain nodes',\n        );\n      }\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access\n      return edge.node;\n    }) as Array<unknown>;\n  }\n\n  if (__HYDROGEN_DEV__) {\n    console.warn(\n      `flattenConnection(): The connection did not contain either \"nodes\" or \"edges.node\". Returning an empty array.`,\n    );\n  }\n\n  // @ts-expect-error We don't want to crash prod, so return an empty array\n  return [];\n}\n\ntype ConnectionEdges = {\n  edges: {node: Array<unknown>};\n};\n\ntype ConnectionNodes = {\n  nodes: Array<unknown>;\n};\n\n// This is only for documentation purposes, and it is not used in the code.\nexport interface ConnectionGenericForDoc {\n  connection?: ConnectionEdges | ConnectionNodes;\n}\nexport type FlattenConnectionReturnForDoc = Array<unknown>;\n"],"names":[],"mappings":";;AAQO,SAAS,kBAOd,YAuBQ;AACR,MAAI,CAAC,YAAY;AACT,UAAA,kBAAkB,uEACtB,cAAc;AAEM;AACd,YAAA,IAAI,MAAM,eAAe;AAAA,IAKjC;AAAA,EACF;AAEA,MAAI,WAAW,YAAY;AAEzB,WAAO,WAAW;AAAA,EACpB;AAEA,MAAI,WAAW,cAAc,MAAM,QAAQ,WAAW,KAAK,GAAG;AAE5D,WAAO,WAAW,MAAM,IAAI,CAAC,SAAS;AAEhC,UAAA,EAAC,6BAAM,OAAM;AACf,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEA,aAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AAEsB;AACZ,YAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAGA,SAAO;AACT;;"}
+{"version":3,"file":"flatten-connection.js","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<\n  ConnectionGeneric extends\n    | PartialDeep<ConnectionEdges, {recurseIntoArrays: true}>\n    | PartialDeep<ConnectionNodes, {recurseIntoArrays: true}>\n    | ConnectionEdges\n    | ConnectionNodes,\n>(\n  connection?: ConnectionGeneric,\n): ConnectionGeneric extends\n  | {\n      edges: Array<{node: infer ConnectionBaseType}>;\n    }\n  | {\n      nodes: Array<infer ConnectionBaseType>;\n    }\n  ? // if it's not a PartialDeep, then return the infered type\n    ConnectionBaseType[]\n  : ConnectionGeneric extends\n      | PartialDeep<\n          {edges: {node: Array<infer ConnectionBaseType>}},\n          {recurseIntoArrays: true}\n        >\n      | PartialDeep<\n          {\n            nodes: Array<infer ConnectionBaseType>;\n          },\n          {recurseIntoArrays: true}\n        >\n  ? // if it is a PartialDeep, return a PartialDeep inferred type\n    PartialDeep<ConnectionBaseType[], {recurseIntoArrays: true}>\n  : never {\n  if (!connection) {\n    const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${\n      connection ?? ''\n    }' instead.`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noConnectionErr);\n    } else {\n      console.error(noConnectionErr + ` Returning an empty array`);\n      // @ts-expect-error We don't want to crash prod, so return an empty array\n      return [];\n    }\n  }\n\n  if ('nodes' in connection) {\n    // @ts-expect-error return type is failing\n    return connection.nodes;\n  }\n\n  if ('edges' in connection && Array.isArray(connection.edges)) {\n    // @ts-expect-error return type is failing\n    return connection.edges.map((edge) => {\n      if (!edge?.node) {\n        throw new Error(\n          'flattenConnection(): Connection edges must contain nodes',\n        );\n      }\n      return edge.node;\n    }) as Array<unknown>;\n  }\n\n  if (__HYDROGEN_DEV__) {\n    console.warn(\n      `flattenConnection(): The connection did not contain either \"nodes\" or \"edges.node\". Returning an empty array.`,\n    );\n  }\n\n  // @ts-expect-error We don't want to crash prod, so return an empty array\n  return [];\n}\n\ntype ConnectionEdges = {\n  edges: Array<{node: unknown}>;\n};\n\ntype ConnectionNodes = {\n  nodes: Array<unknown>;\n};\n\n// This is only for documentation purposes, and it is not used in the code.\nexport interface ConnectionGenericForDoc {\n  connection?: ConnectionEdges | ConnectionNodes;\n}\nexport type FlattenConnectionReturnForDoc = Array<unknown>;\n"],"names":[],"mappings":";;AAQO,SAAS,kBAOd,YAuBQ;AACR,MAAI,CAAC,YAAY;AACT,UAAA,kBAAkB,uEACtB,cAAc;AAEM;AACd,YAAA,IAAI,MAAM,eAAe;AAAA,IAKjC;AAAA,EACF;AAEA,MAAI,WAAW,YAAY;AAEzB,WAAO,WAAW;AAAA,EACpB;AAEA,MAAI,WAAW,cAAc,MAAM,QAAQ,WAAW,KAAK,GAAG;AAE5D,WAAO,WAAW,MAAM,IAAI,CAAC,SAAS;AAChC,UAAA,EAAC,6BAAM,OAAM;AACf,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AACA,aAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AAEsB;AACZ,YAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAGA,SAAO;AACT;;"}

package/dist/node-dev/flatten-connection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"flatten-connection.mjs","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<\n  ConnectionGeneric extends\n    | PartialDeep<ConnectionEdges, {recurseIntoArrays: true}>\n    | PartialDeep<ConnectionNodes, {recurseIntoArrays: true}>\n    | ConnectionEdges\n    | ConnectionNodes,\n>(\n  connection?: ConnectionGeneric,\n): ConnectionGeneric extends\n  | {\n      edges: {node: Array<infer ConnectionBaseType>};\n    }\n  | {\n      nodes: Array<infer ConnectionBaseType>;\n    }\n  ? // if it's not a PartialDeep, then return the infered type\n    ConnectionBaseType[]\n  : ConnectionGeneric extends\n      | PartialDeep<\n          {edges: {node: Array<infer ConnectionBaseType>}},\n          {recurseIntoArrays: true}\n        >\n      | PartialDeep<\n          {\n            nodes: Array<infer ConnectionBaseType>;\n          },\n          {recurseIntoArrays: true}\n        >\n  ? // if it is a PartialDeep, return a PartialDeep inferred type\n    PartialDeep<ConnectionBaseType[], {recurseIntoArrays: true}>\n  : never {\n  if (!connection) {\n    const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${\n      connection ?? ''\n    }' instead.`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noConnectionErr);\n    } else {\n      console.error(noConnectionErr + ` Returning an empty array`);\n      // @ts-expect-error We don't want to crash prod, so return an empty array\n      return [];\n    }\n  }\n\n  if ('nodes' in connection) {\n    // @ts-expect-error return type is failing\n    return connection.nodes;\n  }\n\n  if ('edges' in connection && Array.isArray(connection.edges)) {\n    // @ts-expect-error return type is failing\n    return connection.edges.map((edge) => {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      if (!edge?.node) {\n        throw new Error(\n          'flattenConnection(): Connection edges must contain nodes',\n        );\n      }\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access\n      return edge.node;\n    }) as Array<unknown>;\n  }\n\n  if (__HYDROGEN_DEV__) {\n    console.warn(\n      `flattenConnection(): The connection did not contain either \"nodes\" or \"edges.node\". Returning an empty array.`,\n    );\n  }\n\n  // @ts-expect-error We don't want to crash prod, so return an empty array\n  return [];\n}\n\ntype ConnectionEdges = {\n  edges: {node: Array<unknown>};\n};\n\ntype ConnectionNodes = {\n  nodes: Array<unknown>;\n};\n\n// This is only for documentation purposes, and it is not used in the code.\nexport interface ConnectionGenericForDoc {\n  connection?: ConnectionEdges | ConnectionNodes;\n}\nexport type FlattenConnectionReturnForDoc = Array<unknown>;\n"],"names":[],"mappings":"AAQO,SAAS,kBAOd,YAuBQ;AACR,MAAI,CAAC,YAAY;AACT,UAAA,kBAAkB,uEACtB,cAAc;AAEM;AACd,YAAA,IAAI,MAAM,eAAe;AAAA,IAKjC;AAAA,EACF;AAEA,MAAI,WAAW,YAAY;AAEzB,WAAO,WAAW;AAAA,EACpB;AAEA,MAAI,WAAW,cAAc,MAAM,QAAQ,WAAW,KAAK,GAAG;AAE5D,WAAO,WAAW,MAAM,IAAI,CAAC,SAAS;AAEhC,UAAA,EAAC,6BAAM,OAAM;AACf,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEA,aAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AAEsB;AACZ,YAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAGA,SAAO;AACT;"}
+{"version":3,"file":"flatten-connection.mjs","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<\n  ConnectionGeneric extends\n    | PartialDeep<ConnectionEdges, {recurseIntoArrays: true}>\n    | PartialDeep<ConnectionNodes, {recurseIntoArrays: true}>\n    | ConnectionEdges\n    | ConnectionNodes,\n>(\n  connection?: ConnectionGeneric,\n): ConnectionGeneric extends\n  | {\n      edges: Array<{node: infer ConnectionBaseType}>;\n    }\n  | {\n      nodes: Array<infer ConnectionBaseType>;\n    }\n  ? // if it's not a PartialDeep, then return the infered type\n    ConnectionBaseType[]\n  : ConnectionGeneric extends\n      | PartialDeep<\n          {edges: {node: Array<infer ConnectionBaseType>}},\n          {recurseIntoArrays: true}\n        >\n      | PartialDeep<\n          {\n            nodes: Array<infer ConnectionBaseType>;\n          },\n          {recurseIntoArrays: true}\n        >\n  ? // if it is a PartialDeep, return a PartialDeep inferred type\n    PartialDeep<ConnectionBaseType[], {recurseIntoArrays: true}>\n  : never {\n  if (!connection) {\n    const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${\n      connection ?? ''\n    }' instead.`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noConnectionErr);\n    } else {\n      console.error(noConnectionErr + ` Returning an empty array`);\n      // @ts-expect-error We don't want to crash prod, so return an empty array\n      return [];\n    }\n  }\n\n  if ('nodes' in connection) {\n    // @ts-expect-error return type is failing\n    return connection.nodes;\n  }\n\n  if ('edges' in connection && Array.isArray(connection.edges)) {\n    // @ts-expect-error return type is failing\n    return connection.edges.map((edge) => {\n      if (!edge?.node) {\n        throw new Error(\n          'flattenConnection(): Connection edges must contain nodes',\n        );\n      }\n      return edge.node;\n    }) as Array<unknown>;\n  }\n\n  if (__HYDROGEN_DEV__) {\n    console.warn(\n      `flattenConnection(): The connection did not contain either \"nodes\" or \"edges.node\". Returning an empty array.`,\n    );\n  }\n\n  // @ts-expect-error We don't want to crash prod, so return an empty array\n  return [];\n}\n\ntype ConnectionEdges = {\n  edges: Array<{node: unknown}>;\n};\n\ntype ConnectionNodes = {\n  nodes: Array<unknown>;\n};\n\n// This is only for documentation purposes, and it is not used in the code.\nexport interface ConnectionGenericForDoc {\n  connection?: ConnectionEdges | ConnectionNodes;\n}\nexport type FlattenConnectionReturnForDoc = Array<unknown>;\n"],"names":[],"mappings":"AAQO,SAAS,kBAOd,YAuBQ;AACR,MAAI,CAAC,YAAY;AACT,UAAA,kBAAkB,uEACtB,cAAc;AAEM;AACd,YAAA,IAAI,MAAM,eAAe;AAAA,IAKjC;AAAA,EACF;AAEA,MAAI,WAAW,YAAY;AAEzB,WAAO,WAAW;AAAA,EACpB;AAEA,MAAI,WAAW,cAAc,MAAM,QAAQ,WAAW,KAAK,GAAG;AAE5D,WAAO,WAAW,MAAM,IAAI,CAAC,SAAS;AAChC,UAAA,EAAC,6BAAM,OAAM;AACf,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AACA,aAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AAEsB;AACZ,YAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAGA,SAAO;AACT;"}

package/dist/node-dev/storefront-client.js

@@ -6,7 +6,7 @@ function createStorefrontClient(props) {
     storeDomain,
     privateStorefrontToken,
     publicStorefrontToken,
-    storefrontApiVersion,
+    storefrontApiVersion = storefrontApiConstants.SFAPI_VERSION,
     contentType
   } = props;
   if (storefrontApiVersion !== storefrontApiConstants.SFAPI_VERSION) {
@@ -24,16 +24,22 @@ function createStorefrontClient(props) {
       `StorefrontClient: You are attempting to use a private token in an environment where it can be easily accessed by anyone. This is a security risk; please use the public token and the 'publicStorefrontToken' prop`
     );
   }
+  const isMockShop = (domain) => domain.includes("mock.shop");
+  const getShopifyDomain = (overrideProps) => {
+    const domain = (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain;
+    return domain.includes("://") ? domain : `https://${domain}`;
+  };
   return {
-    getShopifyDomain(overrideProps) {
-      return (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain;
-    },
+    getShopifyDomain,
     getStorefrontApiUrl(overrideProps) {
-      const finalDomainUrl = (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain;
-      return `${finalDomainUrl}${finalDomainUrl.endsWith("/") ? "" : "/"}api/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? storefrontApiVersion}/graphql.json`;
+      const domain = getShopifyDomain(overrideProps);
+      const apiUrl = domain + (domain.endsWith("/") ? "api" : "/api");
+      if (isMockShop(domain))
+        return apiUrl;
+      return `${apiUrl}/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? storefrontApiVersion}/graphql.json`;
     },
     getPrivateTokenHeaders(overrideProps) {
-      if (!privateStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.privateStorefrontToken)) {
+      if (!privateStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.privateStorefrontToken) && !isMockShop(storeDomain)) {
         throw new Error(
           `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`
         );
@@ -55,7 +61,7 @@ function createStorefrontClient(props) {
       };
     },
     getPublicTokenHeaders(overrideProps) {
-      if (!publicStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.publicStorefrontToken)) {
+      if (!publicStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.publicStorefrontToken) && !isMockShop(storeDomain)) {
         throw new Error(
           `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`
         );

package/dist/node-dev/storefront-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"storefront-client.js","sources":["../../src/storefront-client.ts"],"sourcesContent":["import {SFAPI_VERSION} from './storefront-api-constants.js';\n\nexport type StorefrontClientProps = {\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API delegate access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) and [delegate access token](https://shopify.dev/apps/auth/oauth/delegate-access-tokens) documentation for more details. */\n  privateStorefrontToken?: string;\n  /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  publicStorefrontToken?: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion: string;\n  /**\n   * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n   *\n   * Can also be customized on a call-by-call basis by passing in `'contentType'` to both `getPrivateTokenHeaders({...})` and `getPublicTokenHeaders({...})`, for example: `getPublicTokenHeaders({contentType: 'graphql'})`\n   */\n  contentType?: 'json' | 'graphql';\n};\n\n/**\n * The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.\n *\n * When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop.\n */\nexport function createStorefrontClient(\n  props: StorefrontClientProps,\n): StorefrontClientReturn {\n  const {\n    storeDomain,\n    privateStorefrontToken,\n    publicStorefrontToken,\n    storefrontApiVersion,\n    contentType,\n  } = props;\n\n  if (storefrontApiVersion !== SFAPI_VERSION) {\n    warnOnce(\n      `StorefrontClient: The Storefront API version that you're using is different than the version this build of Hydrogen React is targeting. You may run into unexpected errors if these versions don't match. Received verion: \"${storefrontApiVersion}\"; expected version \"${SFAPI_VERSION}\"`,\n    );\n  }\n\n  // only warn if not in a browser environment\n  if (__HYDROGEN_DEV__ && !privateStorefrontToken && !globalThis.document) {\n    warnOnce(\n      `StorefrontClient: Using a private storefront token is recommended for server environments. Refer to the authentication https://shopify.dev/api/storefront#authentication documentation for more details.`,\n    );\n  }\n\n  // only warn if in a browser environment and you're using the privateStorefrontToken\n  if (__HYDROGEN_DEV__ && privateStorefrontToken && globalThis.document) {\n    warnOnce(\n      `StorefrontClient: You are attempting to use a private token in an environment where it can be easily accessed by anyone. This is a security risk; please use the public token and the 'publicStorefrontToken' prop`,\n    );\n  }\n\n  return {\n    getShopifyDomain(overrideProps): string {\n      return overrideProps?.storeDomain ?? storeDomain;\n    },\n    getStorefrontApiUrl(overrideProps): string {\n      const finalDomainUrl = overrideProps?.storeDomain ?? storeDomain;\n      return `${finalDomainUrl}${finalDomainUrl.endsWith('/') ? '' : '/'}api/${\n        overrideProps?.storefrontApiVersion ?? storefrontApiVersion\n      }/graphql.json`;\n    },\n    getPrivateTokenHeaders(overrideProps): Record<string, string> {\n      if (!privateStorefrontToken && !overrideProps?.privateStorefrontToken) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`,\n        );\n      }\n\n      if (__HYDROGEN_DEV__ && !overrideProps?.buyerIp) {\n        warnOnce(\n          `StorefrontClient: it is recommended to pass in the 'buyerIp' property which improves analytics and data in the admin.`,\n        );\n      }\n\n      const finalContentType = overrideProps?.contentType ?? contentType;\n\n      return {\n        // default to json\n        'content-type':\n          finalContentType === 'graphql'\n            ? 'application/graphql'\n            : 'application/json',\n        'X-SDK-Variant': 'hydrogen-react',\n        'X-SDK-Variant-Source': 'react',\n        'X-SDK-Version': storefrontApiVersion,\n        'Shopify-Storefront-Private-Token':\n          overrideProps?.privateStorefrontToken ?? privateStorefrontToken ?? '',\n        ...(overrideProps?.buyerIp\n          ? {'Shopify-Storefront-Buyer-IP': overrideProps.buyerIp}\n          : {}),\n      };\n    },\n    getPublicTokenHeaders(overrideProps): Record<string, string> {\n      if (!publicStorefrontToken && !overrideProps?.publicStorefrontToken) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`,\n        );\n      }\n\n      const finalContentType =\n        overrideProps?.contentType ?? contentType ?? 'json';\n\n      return getPublicTokenHeadersRaw(\n        finalContentType,\n        storefrontApiVersion,\n        overrideProps?.publicStorefrontToken ?? publicStorefrontToken ?? '',\n      );\n    },\n  };\n}\n\nexport function getPublicTokenHeadersRaw(\n  contentType: 'graphql' | 'json',\n  storefrontApiVersion: string,\n  accessToken: string,\n): {\n  'content-type': string;\n  'X-SDK-Variant': string;\n  'X-SDK-Variant-Source': string;\n  'X-SDK-Version': string;\n  'X-Shopify-Storefront-Access-Token': string;\n} {\n  return {\n    // default to json\n    'content-type':\n      contentType === 'graphql' ? 'application/graphql' : 'application/json',\n    'X-SDK-Variant': 'hydrogen-react',\n    'X-SDK-Variant-Source': 'react',\n    'X-SDK-Version': storefrontApiVersion,\n    'X-Shopify-Storefront-Access-Token': accessToken,\n  };\n}\n\nconst warnings = new Set<string>();\nconst warnOnce = (string: string): void => {\n  if (!warnings.has(string)) {\n    console.warn(string);\n    warnings.add(string);\n  }\n};\n\ntype OverrideTokenHeaderProps = Partial<\n  Pick<StorefrontClientProps, 'contentType'>\n>;\n\ntype StorefrontClientReturn = {\n  /**\n   * Creates the fully-qualified URL to your myshopify.com domain.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:\n   *\n   * - `storeDomain`\n   */\n  getShopifyDomain: (\n    props?: Partial<Pick<StorefrontClientProps, 'storeDomain'>>,\n  ) => string;\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (\n    props?: Partial<\n      Pick<StorefrontClientProps, 'storeDomain' | 'storefrontApiVersion'>\n    >,\n  ) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the private Server-to-Server token which reduces the chance of throttling but must not be exposed to clients. Server-side calls should prefer using this over `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPrivateTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `privateStorefrontToken`\n   * - `buyerIp`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPrivateTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'privateStorefrontToken'> & {\n        /**\n         * The client's IP address. Passing this to the Storefront API when using a server-to-server token will help improve your store's analytics data.\n         */\n        buyerIp?: string;\n      },\n  ) => Record<string, string>;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the public token which increases the chance of throttling but also can be exposed to clients. Server-side calls should prefer using `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `publicStorefrontToken`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPublicTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'publicStorefrontToken'>,\n  ) => Record<string, string>;\n};\n"],"names":["SFAPI_VERSION"],"mappings":";;;AAwBO,SAAS,uBACd,OACwB;AAClB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACE,IAAA;AAEJ,MAAI,yBAAyBA,uBAAAA,eAAe;AAC1C;AAAA,MACE,+NAA+N,4CAA4CA,uBAAAA;AAAAA,IAAA;AAAA,EAE/Q;AAGA,MAAwB,CAAC,0BAA0B,CAAC,WAAW,UAAU;AACvE;AAAA,MACE;AAAA,IAAA;AAAA,EAEJ;AAGI,MAAoB,0BAA0B,WAAW,UAAU;AACrE;AAAA,MACE;AAAA,IAAA;AAAA,EAEJ;AAEO,SAAA;AAAA,IACL,iBAAiB,eAAuB;AACtC,cAAO,+CAAe,gBAAe;AAAA,IACvC;AAAA,IACA,oBAAoB,eAAuB;AACnC,YAAA,kBAAiB,+CAAe,gBAAe;AAC9C,aAAA,GAAG,iBAAiB,eAAe,SAAS,GAAG,IAAI,KAAK,WAC7D,+CAAe,yBAAwB;AAAA,IAE3C;AAAA,IACA,uBAAuB,eAAuC;AAC5D,UAAI,CAAC,0BAA0B,EAAC,+CAAe,yBAAwB;AACrE,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEI,UAAoB,EAAC,+CAAe,UAAS;AAC/C;AAAA,UACE;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,oBAAmB,+CAAe,gBAAe;AAEhD,aAAA;AAAA;AAAA,QAEL,gBACE,qBAAqB,YACjB,wBACA;AAAA,QACN,iBAAiB;AAAA,QACjB,wBAAwB;AAAA,QACxB,iBAAiB;AAAA,QACjB,qCACE,+CAAe,2BAA0B,0BAA0B;AAAA,QACrE,IAAI,+CAAe,WACf,EAAC,+BAA+B,cAAc,QAAA,IAC9C,CAAC;AAAA,MAAA;AAAA,IAET;AAAA,IACA,sBAAsB,eAAuC;AAC3D,UAAI,CAAC,yBAAyB,EAAC,+CAAe,wBAAuB;AACnE,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,oBACJ,+CAAe,gBAAe,eAAe;AAExC,aAAA;AAAA,QACL;AAAA,QACA;AAAA,SACA,+CAAe,0BAAyB,yBAAyB;AAAA,MAAA;AAAA,IAErE;AAAA,EAAA;AAEJ;AAEgB,SAAA,yBACd,aACA,sBACA,aAOA;AACO,SAAA;AAAA;AAAA,IAEL,gBACE,gBAAgB,YAAY,wBAAwB;AAAA,IACtD,iBAAiB;AAAA,IACjB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,qCAAqC;AAAA,EAAA;AAEzC;AAEA,MAAM,+BAAe;AACrB,MAAM,WAAW,CAAC,WAAyB;AACzC,MAAI,CAAC,SAAS,IAAI,MAAM,GAAG;AACzB,YAAQ,KAAK,MAAM;AACnB,aAAS,IAAI,MAAM;AAAA,EACrB;AACF;;;"}
+{"version":3,"file":"storefront-client.js","sources":["../../src/storefront-client.ts"],"sourcesContent":["import {SFAPI_VERSION} from './storefront-api-constants.js';\n\nexport type StorefrontClientProps = {\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API delegate access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) and [delegate access token](https://shopify.dev/apps/auth/oauth/delegate-access-tokens) documentation for more details. */\n  privateStorefrontToken?: string;\n  /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  publicStorefrontToken?: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion?: string;\n  /**\n   * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n   *\n   * Can also be customized on a call-by-call basis by passing in `'contentType'` to both `getPrivateTokenHeaders({...})` and `getPublicTokenHeaders({...})`, for example: `getPublicTokenHeaders({contentType: 'graphql'})`\n   */\n  contentType?: 'json' | 'graphql';\n};\n\n/**\n * The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.\n *\n * When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop.\n */\nexport function createStorefrontClient(\n  props: StorefrontClientProps,\n): StorefrontClientReturn {\n  const {\n    storeDomain,\n    privateStorefrontToken,\n    publicStorefrontToken,\n    storefrontApiVersion = SFAPI_VERSION,\n    contentType,\n  } = props;\n\n  if (storefrontApiVersion !== SFAPI_VERSION) {\n    warnOnce(\n      `StorefrontClient: The Storefront API version that you're using is different than the version this build of Hydrogen React is targeting. You may run into unexpected errors if these versions don't match. Received verion: \"${storefrontApiVersion}\"; expected version \"${SFAPI_VERSION}\"`,\n    );\n  }\n\n  // only warn if not in a browser environment\n  if (__HYDROGEN_DEV__ && !privateStorefrontToken && !globalThis.document) {\n    warnOnce(\n      `StorefrontClient: Using a private storefront token is recommended for server environments. Refer to the authentication https://shopify.dev/api/storefront#authentication documentation for more details.`,\n    );\n  }\n\n  // only warn if in a browser environment and you're using the privateStorefrontToken\n  if (__HYDROGEN_DEV__ && privateStorefrontToken && globalThis.document) {\n    warnOnce(\n      `StorefrontClient: You are attempting to use a private token in an environment where it can be easily accessed by anyone. This is a security risk; please use the public token and the 'publicStorefrontToken' prop`,\n    );\n  }\n\n  const isMockShop = (domain: string): boolean => domain.includes('mock.shop');\n  const getShopifyDomain: StorefrontClientReturn['getShopifyDomain'] = (\n    overrideProps,\n  ) => {\n    const domain = overrideProps?.storeDomain ?? storeDomain;\n    return domain.includes('://') ? domain : `https://${domain}`;\n  };\n\n  return {\n    getShopifyDomain,\n    getStorefrontApiUrl(overrideProps): string {\n      const domain = getShopifyDomain(overrideProps);\n      const apiUrl = domain + (domain.endsWith('/') ? 'api' : '/api');\n\n      if (isMockShop(domain)) return apiUrl;\n\n      return `${apiUrl}/${\n        overrideProps?.storefrontApiVersion ?? storefrontApiVersion\n      }/graphql.json`;\n    },\n    getPrivateTokenHeaders(overrideProps): Record<string, string> {\n      if (\n        !privateStorefrontToken &&\n        !overrideProps?.privateStorefrontToken &&\n        !isMockShop(storeDomain)\n      ) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`,\n        );\n      }\n\n      if (__HYDROGEN_DEV__ && !overrideProps?.buyerIp) {\n        warnOnce(\n          `StorefrontClient: it is recommended to pass in the 'buyerIp' property which improves analytics and data in the admin.`,\n        );\n      }\n\n      const finalContentType = overrideProps?.contentType ?? contentType;\n\n      return {\n        // default to json\n        'content-type':\n          finalContentType === 'graphql'\n            ? 'application/graphql'\n            : 'application/json',\n        'X-SDK-Variant': 'hydrogen-react',\n        'X-SDK-Variant-Source': 'react',\n        'X-SDK-Version': storefrontApiVersion,\n        'Shopify-Storefront-Private-Token':\n          overrideProps?.privateStorefrontToken ?? privateStorefrontToken ?? '',\n        ...(overrideProps?.buyerIp\n          ? {'Shopify-Storefront-Buyer-IP': overrideProps.buyerIp}\n          : {}),\n      };\n    },\n    getPublicTokenHeaders(overrideProps): Record<string, string> {\n      if (\n        !publicStorefrontToken &&\n        !overrideProps?.publicStorefrontToken &&\n        !isMockShop(storeDomain)\n      ) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`,\n        );\n      }\n\n      const finalContentType =\n        overrideProps?.contentType ?? contentType ?? 'json';\n\n      return getPublicTokenHeadersRaw(\n        finalContentType,\n        storefrontApiVersion,\n        overrideProps?.publicStorefrontToken ?? publicStorefrontToken ?? '',\n      );\n    },\n  };\n}\n\nexport function getPublicTokenHeadersRaw(\n  contentType: 'graphql' | 'json',\n  storefrontApiVersion: string,\n  accessToken: string,\n): {\n  'content-type': string;\n  'X-SDK-Variant': string;\n  'X-SDK-Variant-Source': string;\n  'X-SDK-Version': string;\n  'X-Shopify-Storefront-Access-Token': string;\n} {\n  return {\n    // default to json\n    'content-type':\n      contentType === 'graphql' ? 'application/graphql' : 'application/json',\n    'X-SDK-Variant': 'hydrogen-react',\n    'X-SDK-Variant-Source': 'react',\n    'X-SDK-Version': storefrontApiVersion,\n    'X-Shopify-Storefront-Access-Token': accessToken,\n  };\n}\n\nconst warnings = new Set<string>();\nconst warnOnce = (string: string): void => {\n  if (!warnings.has(string)) {\n    console.warn(string);\n    warnings.add(string);\n  }\n};\n\ntype OverrideTokenHeaderProps = Partial<\n  Pick<StorefrontClientProps, 'contentType'>\n>;\n\ntype StorefrontClientReturn = {\n  /**\n   * Creates the fully-qualified URL to your myshopify.com domain.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:\n   *\n   * - `storeDomain`\n   */\n  getShopifyDomain: (\n    props?: Partial<Pick<StorefrontClientProps, 'storeDomain'>>,\n  ) => string;\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (\n    props?: Partial<\n      Pick<StorefrontClientProps, 'storeDomain' | 'storefrontApiVersion'>\n    >,\n  ) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the private Server-to-Server token which reduces the chance of throttling but must not be exposed to clients. Server-side calls should prefer using this over `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPrivateTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `privateStorefrontToken`\n   * - `buyerIp`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPrivateTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'privateStorefrontToken'> & {\n        /**\n         * The client's IP address. Passing this to the Storefront API when using a server-to-server token will help improve your store's analytics data.\n         */\n        buyerIp?: string;\n      },\n  ) => Record<string, string>;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the public token which increases the chance of throttling but also can be exposed to clients. Server-side calls should prefer using `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `publicStorefrontToken`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPublicTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'publicStorefrontToken'>,\n  ) => Record<string, string>;\n};\n"],"names":["SFAPI_VERSION"],"mappings":";;;AAwBO,SAAS,uBACd,OACwB;AAClB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuBA,uBAAA;AAAA,IACvB;AAAA,EACE,IAAA;AAEJ,MAAI,yBAAyBA,uBAAAA,eAAe;AAC1C;AAAA,MACE,+NAA+N,4CAA4CA,uBAAAA;AAAAA,IAAA;AAAA,EAE/Q;AAGA,MAAwB,CAAC,0BAA0B,CAAC,WAAW,UAAU;AACvE;AAAA,MACE;AAAA,IAAA;AAAA,EAEJ;AAGI,MAAoB,0BAA0B,WAAW,UAAU;AACrE;AAAA,MACE;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,aAAa,CAAC,WAA4B,OAAO,SAAS,WAAW;AACrE,QAAA,mBAA+D,CACnE,kBACG;AACG,UAAA,UAAS,+CAAe,gBAAe;AAC7C,WAAO,OAAO,SAAS,KAAK,IAAI,SAAS,WAAW;AAAA,EAAA;AAG/C,SAAA;AAAA,IACL;AAAA,IACA,oBAAoB,eAAuB;AACnC,YAAA,SAAS,iBAAiB,aAAa;AAC7C,YAAM,SAAS,UAAU,OAAO,SAAS,GAAG,IAAI,QAAQ;AAExD,UAAI,WAAW,MAAM;AAAU,eAAA;AAExB,aAAA,GAAG,WACR,+CAAe,yBAAwB;AAAA,IAE3C;AAAA,IACA,uBAAuB,eAAuC;AAE1D,UAAA,CAAC,0BACD,EAAC,+CAAe,2BAChB,CAAC,WAAW,WAAW,GACvB;AACA,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEI,UAAoB,EAAC,+CAAe,UAAS;AAC/C;AAAA,UACE;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,oBAAmB,+CAAe,gBAAe;AAEhD,aAAA;AAAA;AAAA,QAEL,gBACE,qBAAqB,YACjB,wBACA;AAAA,QACN,iBAAiB;AAAA,QACjB,wBAAwB;AAAA,QACxB,iBAAiB;AAAA,QACjB,qCACE,+CAAe,2BAA0B,0BAA0B;AAAA,QACrE,IAAI,+CAAe,WACf,EAAC,+BAA+B,cAAc,QAAA,IAC9C,CAAC;AAAA,MAAA;AAAA,IAET;AAAA,IACA,sBAAsB,eAAuC;AAEzD,UAAA,CAAC,yBACD,EAAC,+CAAe,0BAChB,CAAC,WAAW,WAAW,GACvB;AACA,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,oBACJ,+CAAe,gBAAe,eAAe;AAExC,aAAA;AAAA,QACL;AAAA,QACA;AAAA,SACA,+CAAe,0BAAyB,yBAAyB;AAAA,MAAA;AAAA,IAErE;AAAA,EAAA;AAEJ;AAEgB,SAAA,yBACd,aACA,sBACA,aAOA;AACO,SAAA;AAAA;AAAA,IAEL,gBACE,gBAAgB,YAAY,wBAAwB;AAAA,IACtD,iBAAiB;AAAA,IACjB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,qCAAqC;AAAA,EAAA;AAEzC;AAEA,MAAM,+BAAe;AACrB,MAAM,WAAW,CAAC,WAAyB;AACzC,MAAI,CAAC,SAAS,IAAI,MAAM,GAAG;AACzB,YAAQ,KAAK,MAAM;AACnB,aAAS,IAAI,MAAM;AAAA,EACrB;AACF;;;"}

package/dist/node-dev/storefront-client.mjs

@@ -4,7 +4,7 @@ function createStorefrontClient(props) {
     storeDomain,
     privateStorefrontToken,
     publicStorefrontToken,
-    storefrontApiVersion,
+    storefrontApiVersion = SFAPI_VERSION,
     contentType
   } = props;
   if (storefrontApiVersion !== SFAPI_VERSION) {
@@ -22,16 +22,22 @@ function createStorefrontClient(props) {
       `StorefrontClient: You are attempting to use a private token in an environment where it can be easily accessed by anyone. This is a security risk; please use the public token and the 'publicStorefrontToken' prop`
     );
   }
+  const isMockShop = (domain) => domain.includes("mock.shop");
+  const getShopifyDomain = (overrideProps) => {
+    const domain = (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain;
+    return domain.includes("://") ? domain : `https://${domain}`;
+  };
   return {
-    getShopifyDomain(overrideProps) {
-      return (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain;
-    },
+    getShopifyDomain,
     getStorefrontApiUrl(overrideProps) {
-      const finalDomainUrl = (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? storeDomain;
-      return `${finalDomainUrl}${finalDomainUrl.endsWith("/") ? "" : "/"}api/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? storefrontApiVersion}/graphql.json`;
+      const domain = getShopifyDomain(overrideProps);
+      const apiUrl = domain + (domain.endsWith("/") ? "api" : "/api");
+      if (isMockShop(domain))
+        return apiUrl;
+      return `${apiUrl}/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? storefrontApiVersion}/graphql.json`;
     },
     getPrivateTokenHeaders(overrideProps) {
-      if (!privateStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.privateStorefrontToken)) {
+      if (!privateStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.privateStorefrontToken) && !isMockShop(storeDomain)) {
         throw new Error(
           `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`
         );
@@ -53,7 +59,7 @@ function createStorefrontClient(props) {
       };
     },
     getPublicTokenHeaders(overrideProps) {
-      if (!publicStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.publicStorefrontToken)) {
+      if (!publicStorefrontToken && !(overrideProps == null ? void 0 : overrideProps.publicStorefrontToken) && !isMockShop(storeDomain)) {
         throw new Error(
           `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`
         );

package/dist/node-dev/storefront-client.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"storefront-client.mjs","sources":["../../src/storefront-client.ts"],"sourcesContent":["import {SFAPI_VERSION} from './storefront-api-constants.js';\n\nexport type StorefrontClientProps = {\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API delegate access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) and [delegate access token](https://shopify.dev/apps/auth/oauth/delegate-access-tokens) documentation for more details. */\n  privateStorefrontToken?: string;\n  /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  publicStorefrontToken?: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion: string;\n  /**\n   * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n   *\n   * Can also be customized on a call-by-call basis by passing in `'contentType'` to both `getPrivateTokenHeaders({...})` and `getPublicTokenHeaders({...})`, for example: `getPublicTokenHeaders({contentType: 'graphql'})`\n   */\n  contentType?: 'json' | 'graphql';\n};\n\n/**\n * The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.\n *\n * When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop.\n */\nexport function createStorefrontClient(\n  props: StorefrontClientProps,\n): StorefrontClientReturn {\n  const {\n    storeDomain,\n    privateStorefrontToken,\n    publicStorefrontToken,\n    storefrontApiVersion,\n    contentType,\n  } = props;\n\n  if (storefrontApiVersion !== SFAPI_VERSION) {\n    warnOnce(\n      `StorefrontClient: The Storefront API version that you're using is different than the version this build of Hydrogen React is targeting. You may run into unexpected errors if these versions don't match. Received verion: \"${storefrontApiVersion}\"; expected version \"${SFAPI_VERSION}\"`,\n    );\n  }\n\n  // only warn if not in a browser environment\n  if (__HYDROGEN_DEV__ && !privateStorefrontToken && !globalThis.document) {\n    warnOnce(\n      `StorefrontClient: Using a private storefront token is recommended for server environments. Refer to the authentication https://shopify.dev/api/storefront#authentication documentation for more details.`,\n    );\n  }\n\n  // only warn if in a browser environment and you're using the privateStorefrontToken\n  if (__HYDROGEN_DEV__ && privateStorefrontToken && globalThis.document) {\n    warnOnce(\n      `StorefrontClient: You are attempting to use a private token in an environment where it can be easily accessed by anyone. This is a security risk; please use the public token and the 'publicStorefrontToken' prop`,\n    );\n  }\n\n  return {\n    getShopifyDomain(overrideProps): string {\n      return overrideProps?.storeDomain ?? storeDomain;\n    },\n    getStorefrontApiUrl(overrideProps): string {\n      const finalDomainUrl = overrideProps?.storeDomain ?? storeDomain;\n      return `${finalDomainUrl}${finalDomainUrl.endsWith('/') ? '' : '/'}api/${\n        overrideProps?.storefrontApiVersion ?? storefrontApiVersion\n      }/graphql.json`;\n    },\n    getPrivateTokenHeaders(overrideProps): Record<string, string> {\n      if (!privateStorefrontToken && !overrideProps?.privateStorefrontToken) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`,\n        );\n      }\n\n      if (__HYDROGEN_DEV__ && !overrideProps?.buyerIp) {\n        warnOnce(\n          `StorefrontClient: it is recommended to pass in the 'buyerIp' property which improves analytics and data in the admin.`,\n        );\n      }\n\n      const finalContentType = overrideProps?.contentType ?? contentType;\n\n      return {\n        // default to json\n        'content-type':\n          finalContentType === 'graphql'\n            ? 'application/graphql'\n            : 'application/json',\n        'X-SDK-Variant': 'hydrogen-react',\n        'X-SDK-Variant-Source': 'react',\n        'X-SDK-Version': storefrontApiVersion,\n        'Shopify-Storefront-Private-Token':\n          overrideProps?.privateStorefrontToken ?? privateStorefrontToken ?? '',\n        ...(overrideProps?.buyerIp\n          ? {'Shopify-Storefront-Buyer-IP': overrideProps.buyerIp}\n          : {}),\n      };\n    },\n    getPublicTokenHeaders(overrideProps): Record<string, string> {\n      if (!publicStorefrontToken && !overrideProps?.publicStorefrontToken) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`,\n        );\n      }\n\n      const finalContentType =\n        overrideProps?.contentType ?? contentType ?? 'json';\n\n      return getPublicTokenHeadersRaw(\n        finalContentType,\n        storefrontApiVersion,\n        overrideProps?.publicStorefrontToken ?? publicStorefrontToken ?? '',\n      );\n    },\n  };\n}\n\nexport function getPublicTokenHeadersRaw(\n  contentType: 'graphql' | 'json',\n  storefrontApiVersion: string,\n  accessToken: string,\n): {\n  'content-type': string;\n  'X-SDK-Variant': string;\n  'X-SDK-Variant-Source': string;\n  'X-SDK-Version': string;\n  'X-Shopify-Storefront-Access-Token': string;\n} {\n  return {\n    // default to json\n    'content-type':\n      contentType === 'graphql' ? 'application/graphql' : 'application/json',\n    'X-SDK-Variant': 'hydrogen-react',\n    'X-SDK-Variant-Source': 'react',\n    'X-SDK-Version': storefrontApiVersion,\n    'X-Shopify-Storefront-Access-Token': accessToken,\n  };\n}\n\nconst warnings = new Set<string>();\nconst warnOnce = (string: string): void => {\n  if (!warnings.has(string)) {\n    console.warn(string);\n    warnings.add(string);\n  }\n};\n\ntype OverrideTokenHeaderProps = Partial<\n  Pick<StorefrontClientProps, 'contentType'>\n>;\n\ntype StorefrontClientReturn = {\n  /**\n   * Creates the fully-qualified URL to your myshopify.com domain.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:\n   *\n   * - `storeDomain`\n   */\n  getShopifyDomain: (\n    props?: Partial<Pick<StorefrontClientProps, 'storeDomain'>>,\n  ) => string;\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (\n    props?: Partial<\n      Pick<StorefrontClientProps, 'storeDomain' | 'storefrontApiVersion'>\n    >,\n  ) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the private Server-to-Server token which reduces the chance of throttling but must not be exposed to clients. Server-side calls should prefer using this over `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPrivateTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `privateStorefrontToken`\n   * - `buyerIp`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPrivateTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'privateStorefrontToken'> & {\n        /**\n         * The client's IP address. Passing this to the Storefront API when using a server-to-server token will help improve your store's analytics data.\n         */\n        buyerIp?: string;\n      },\n  ) => Record<string, string>;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the public token which increases the chance of throttling but also can be exposed to clients. Server-side calls should prefer using `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `publicStorefrontToken`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPublicTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'publicStorefrontToken'>,\n  ) => Record<string, string>;\n};\n"],"names":[],"mappings":";AAwBO,SAAS,uBACd,OACwB;AAClB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACE,IAAA;AAEJ,MAAI,yBAAyB,eAAe;AAC1C;AAAA,MACE,+NAA+N,4CAA4C;AAAA,IAAA;AAAA,EAE/Q;AAGA,MAAwB,CAAC,0BAA0B,CAAC,WAAW,UAAU;AACvE;AAAA,MACE;AAAA,IAAA;AAAA,EAEJ;AAGI,MAAoB,0BAA0B,WAAW,UAAU;AACrE;AAAA,MACE;AAAA,IAAA;AAAA,EAEJ;AAEO,SAAA;AAAA,IACL,iBAAiB,eAAuB;AACtC,cAAO,+CAAe,gBAAe;AAAA,IACvC;AAAA,IACA,oBAAoB,eAAuB;AACnC,YAAA,kBAAiB,+CAAe,gBAAe;AAC9C,aAAA,GAAG,iBAAiB,eAAe,SAAS,GAAG,IAAI,KAAK,WAC7D,+CAAe,yBAAwB;AAAA,IAE3C;AAAA,IACA,uBAAuB,eAAuC;AAC5D,UAAI,CAAC,0BAA0B,EAAC,+CAAe,yBAAwB;AACrE,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEI,UAAoB,EAAC,+CAAe,UAAS;AAC/C;AAAA,UACE;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,oBAAmB,+CAAe,gBAAe;AAEhD,aAAA;AAAA;AAAA,QAEL,gBACE,qBAAqB,YACjB,wBACA;AAAA,QACN,iBAAiB;AAAA,QACjB,wBAAwB;AAAA,QACxB,iBAAiB;AAAA,QACjB,qCACE,+CAAe,2BAA0B,0BAA0B;AAAA,QACrE,IAAI,+CAAe,WACf,EAAC,+BAA+B,cAAc,QAAA,IAC9C,CAAC;AAAA,MAAA;AAAA,IAET;AAAA,IACA,sBAAsB,eAAuC;AAC3D,UAAI,CAAC,yBAAyB,EAAC,+CAAe,wBAAuB;AACnE,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,oBACJ,+CAAe,gBAAe,eAAe;AAExC,aAAA;AAAA,QACL;AAAA,QACA;AAAA,SACA,+CAAe,0BAAyB,yBAAyB;AAAA,MAAA;AAAA,IAErE;AAAA,EAAA;AAEJ;AAEgB,SAAA,yBACd,aACA,sBACA,aAOA;AACO,SAAA;AAAA;AAAA,IAEL,gBACE,gBAAgB,YAAY,wBAAwB;AAAA,IACtD,iBAAiB;AAAA,IACjB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,qCAAqC;AAAA,EAAA;AAEzC;AAEA,MAAM,+BAAe;AACrB,MAAM,WAAW,CAAC,WAAyB;AACzC,MAAI,CAAC,SAAS,IAAI,MAAM,GAAG;AACzB,YAAQ,KAAK,MAAM;AACnB,aAAS,IAAI,MAAM;AAAA,EACrB;AACF;"}
+{"version":3,"file":"storefront-client.mjs","sources":["../../src/storefront-client.ts"],"sourcesContent":["import {SFAPI_VERSION} from './storefront-api-constants.js';\n\nexport type StorefrontClientProps = {\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API delegate access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) and [delegate access token](https://shopify.dev/apps/auth/oauth/delegate-access-tokens) documentation for more details. */\n  privateStorefrontToken?: string;\n  /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  publicStorefrontToken?: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion?: string;\n  /**\n   * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n   *\n   * Can also be customized on a call-by-call basis by passing in `'contentType'` to both `getPrivateTokenHeaders({...})` and `getPublicTokenHeaders({...})`, for example: `getPublicTokenHeaders({contentType: 'graphql'})`\n   */\n  contentType?: 'json' | 'graphql';\n};\n\n/**\n * The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.\n *\n * When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop.\n */\nexport function createStorefrontClient(\n  props: StorefrontClientProps,\n): StorefrontClientReturn {\n  const {\n    storeDomain,\n    privateStorefrontToken,\n    publicStorefrontToken,\n    storefrontApiVersion = SFAPI_VERSION,\n    contentType,\n  } = props;\n\n  if (storefrontApiVersion !== SFAPI_VERSION) {\n    warnOnce(\n      `StorefrontClient: The Storefront API version that you're using is different than the version this build of Hydrogen React is targeting. You may run into unexpected errors if these versions don't match. Received verion: \"${storefrontApiVersion}\"; expected version \"${SFAPI_VERSION}\"`,\n    );\n  }\n\n  // only warn if not in a browser environment\n  if (__HYDROGEN_DEV__ && !privateStorefrontToken && !globalThis.document) {\n    warnOnce(\n      `StorefrontClient: Using a private storefront token is recommended for server environments. Refer to the authentication https://shopify.dev/api/storefront#authentication documentation for more details.`,\n    );\n  }\n\n  // only warn if in a browser environment and you're using the privateStorefrontToken\n  if (__HYDROGEN_DEV__ && privateStorefrontToken && globalThis.document) {\n    warnOnce(\n      `StorefrontClient: You are attempting to use a private token in an environment where it can be easily accessed by anyone. This is a security risk; please use the public token and the 'publicStorefrontToken' prop`,\n    );\n  }\n\n  const isMockShop = (domain: string): boolean => domain.includes('mock.shop');\n  const getShopifyDomain: StorefrontClientReturn['getShopifyDomain'] = (\n    overrideProps,\n  ) => {\n    const domain = overrideProps?.storeDomain ?? storeDomain;\n    return domain.includes('://') ? domain : `https://${domain}`;\n  };\n\n  return {\n    getShopifyDomain,\n    getStorefrontApiUrl(overrideProps): string {\n      const domain = getShopifyDomain(overrideProps);\n      const apiUrl = domain + (domain.endsWith('/') ? 'api' : '/api');\n\n      if (isMockShop(domain)) return apiUrl;\n\n      return `${apiUrl}/${\n        overrideProps?.storefrontApiVersion ?? storefrontApiVersion\n      }/graphql.json`;\n    },\n    getPrivateTokenHeaders(overrideProps): Record<string, string> {\n      if (\n        !privateStorefrontToken &&\n        !overrideProps?.privateStorefrontToken &&\n        !isMockShop(storeDomain)\n      ) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`,\n        );\n      }\n\n      if (__HYDROGEN_DEV__ && !overrideProps?.buyerIp) {\n        warnOnce(\n          `StorefrontClient: it is recommended to pass in the 'buyerIp' property which improves analytics and data in the admin.`,\n        );\n      }\n\n      const finalContentType = overrideProps?.contentType ?? contentType;\n\n      return {\n        // default to json\n        'content-type':\n          finalContentType === 'graphql'\n            ? 'application/graphql'\n            : 'application/json',\n        'X-SDK-Variant': 'hydrogen-react',\n        'X-SDK-Variant-Source': 'react',\n        'X-SDK-Version': storefrontApiVersion,\n        'Shopify-Storefront-Private-Token':\n          overrideProps?.privateStorefrontToken ?? privateStorefrontToken ?? '',\n        ...(overrideProps?.buyerIp\n          ? {'Shopify-Storefront-Buyer-IP': overrideProps.buyerIp}\n          : {}),\n      };\n    },\n    getPublicTokenHeaders(overrideProps): Record<string, string> {\n      if (\n        !publicStorefrontToken &&\n        !overrideProps?.publicStorefrontToken &&\n        !isMockShop(storeDomain)\n      ) {\n        throw new Error(\n          `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`,\n        );\n      }\n\n      const finalContentType =\n        overrideProps?.contentType ?? contentType ?? 'json';\n\n      return getPublicTokenHeadersRaw(\n        finalContentType,\n        storefrontApiVersion,\n        overrideProps?.publicStorefrontToken ?? publicStorefrontToken ?? '',\n      );\n    },\n  };\n}\n\nexport function getPublicTokenHeadersRaw(\n  contentType: 'graphql' | 'json',\n  storefrontApiVersion: string,\n  accessToken: string,\n): {\n  'content-type': string;\n  'X-SDK-Variant': string;\n  'X-SDK-Variant-Source': string;\n  'X-SDK-Version': string;\n  'X-Shopify-Storefront-Access-Token': string;\n} {\n  return {\n    // default to json\n    'content-type':\n      contentType === 'graphql' ? 'application/graphql' : 'application/json',\n    'X-SDK-Variant': 'hydrogen-react',\n    'X-SDK-Variant-Source': 'react',\n    'X-SDK-Version': storefrontApiVersion,\n    'X-Shopify-Storefront-Access-Token': accessToken,\n  };\n}\n\nconst warnings = new Set<string>();\nconst warnOnce = (string: string): void => {\n  if (!warnings.has(string)) {\n    console.warn(string);\n    warnings.add(string);\n  }\n};\n\ntype OverrideTokenHeaderProps = Partial<\n  Pick<StorefrontClientProps, 'contentType'>\n>;\n\ntype StorefrontClientReturn = {\n  /**\n   * Creates the fully-qualified URL to your myshopify.com domain.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:\n   *\n   * - `storeDomain`\n   */\n  getShopifyDomain: (\n    props?: Partial<Pick<StorefrontClientProps, 'storeDomain'>>,\n  ) => string;\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (\n    props?: Partial<\n      Pick<StorefrontClientProps, 'storeDomain' | 'storefrontApiVersion'>\n    >,\n  ) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the private Server-to-Server token which reduces the chance of throttling but must not be exposed to clients. Server-side calls should prefer using this over `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPrivateTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `privateStorefrontToken`\n   * - `buyerIp`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPrivateTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'privateStorefrontToken'> & {\n        /**\n         * The client's IP address. Passing this to the Storefront API when using a server-to-server token will help improve your store's analytics data.\n         */\n        buyerIp?: string;\n      },\n  ) => Record<string, string>;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This method uses the public token which increases the chance of throttling but also can be exposed to clients. Server-side calls should prefer using `getPublicTokenHeaders()`.\n   *\n   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `publicStorefrontToken`\n   *\n   * Note that `contentType` defaults to what you configured in `createStorefrontClient({...})` and defaults to `'json'`, but a specific call may require using `graphql`. When using `JSON.stringify()` on the `body`, use `'json'`; otherwise, use `'graphql'`.\n   */\n  getPublicTokenHeaders: (\n    props?: OverrideTokenHeaderProps &\n      Pick<StorefrontClientProps, 'publicStorefrontToken'>,\n  ) => Record<string, string>;\n};\n"],"names":[],"mappings":";AAwBO,SAAS,uBACd,OACwB;AAClB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB;AAAA,IACvB;AAAA,EACE,IAAA;AAEJ,MAAI,yBAAyB,eAAe;AAC1C;AAAA,MACE,+NAA+N,4CAA4C;AAAA,IAAA;AAAA,EAE/Q;AAGA,MAAwB,CAAC,0BAA0B,CAAC,WAAW,UAAU;AACvE;AAAA,MACE;AAAA,IAAA;AAAA,EAEJ;AAGI,MAAoB,0BAA0B,WAAW,UAAU;AACrE;AAAA,MACE;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,aAAa,CAAC,WAA4B,OAAO,SAAS,WAAW;AACrE,QAAA,mBAA+D,CACnE,kBACG;AACG,UAAA,UAAS,+CAAe,gBAAe;AAC7C,WAAO,OAAO,SAAS,KAAK,IAAI,SAAS,WAAW;AAAA,EAAA;AAG/C,SAAA;AAAA,IACL;AAAA,IACA,oBAAoB,eAAuB;AACnC,YAAA,SAAS,iBAAiB,aAAa;AAC7C,YAAM,SAAS,UAAU,OAAO,SAAS,GAAG,IAAI,QAAQ;AAExD,UAAI,WAAW,MAAM;AAAU,eAAA;AAExB,aAAA,GAAG,WACR,+CAAe,yBAAwB;AAAA,IAE3C;AAAA,IACA,uBAAuB,eAAuC;AAE1D,UAAA,CAAC,0BACD,EAAC,+CAAe,2BAChB,CAAC,WAAW,WAAW,GACvB;AACA,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEI,UAAoB,EAAC,+CAAe,UAAS;AAC/C;AAAA,UACE;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,oBAAmB,+CAAe,gBAAe;AAEhD,aAAA;AAAA;AAAA,QAEL,gBACE,qBAAqB,YACjB,wBACA;AAAA,QACN,iBAAiB;AAAA,QACjB,wBAAwB;AAAA,QACxB,iBAAiB;AAAA,QACjB,qCACE,+CAAe,2BAA0B,0BAA0B;AAAA,QACrE,IAAI,+CAAe,WACf,EAAC,+BAA+B,cAAc,QAAA,IAC9C,CAAC;AAAA,MAAA;AAAA,IAET;AAAA,IACA,sBAAsB,eAAuC;AAEzD,UAAA,CAAC,yBACD,EAAC,+CAAe,0BAChB,CAAC,WAAW,WAAW,GACvB;AACA,cAAM,IAAI;AAAA,UACR;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,oBACJ,+CAAe,gBAAe,eAAe;AAExC,aAAA;AAAA,QACL;AAAA,QACA;AAAA,SACA,+CAAe,0BAAyB,yBAAyB;AAAA,MAAA;AAAA,IAErE;AAAA,EAAA;AAEJ;AAEgB,SAAA,yBACd,aACA,sBACA,aAOA;AACO,SAAA;AAAA;AAAA,IAEL,gBACE,gBAAgB,YAAY,wBAAwB;AAAA,IACtD,iBAAiB;AAAA,IACjB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,IACjB,qCAAqC;AAAA,EAAA;AAEzC;AAEA,MAAM,+BAAe;AACrB,MAAM,WAAW,CAAC,WAAyB;AACzC,MAAI,CAAC,SAAS,IAAI,MAAM,GAAG;AACzB,YAAQ,KAAK,MAAM;AACnB,aAAS,IAAI,MAAM;AAAA,EACrB;AACF;"}

package/dist/node-prod/CartProvider.js

@@ -5,6 +5,7 @@ const React = require("react");
 const useCartAPIStateMachine = require("./useCartAPIStateMachine.js");
 const cartConstants = require("./cart-constants.js");
 const cartQueries = require("./cart-queries.js");
+const ShopifyProvider = require("./ShopifyProvider.js");
 const CartContext = React.createContext(null);
 function useCart() {
   const context = React.useContext(CartContext);
@@ -35,9 +36,15 @@ function CartProvider({
   data: cart,
   cartFragment = cartQueries.defaultCartFragment,
   customerAccessToken,
-  countryCode = "US"
+  countryCode
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
+  const shop = ShopifyProvider.useShop();
+  if (!shop)
+    throw new Error(
+      "<CartProvider> needs to be a descendant of <ShopifyProvider>"
+    );
+  countryCode = (countryCode ?? shop.countryIsoCode ?? "US").toUpperCase();
   if (countryCode)
     countryCode = countryCode.toUpperCase();
   const [prevCountryCode, setPrevCountryCode] = React.useState(countryCode);