@shopify/hydrogen-react 0.0.0-next-5c16c78 → 0.0.0-next-ea3959b

package/dist/node-prod/MediaFile.js

@@ -1,10 +1,10 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const Image = require("./Image.js");
 const Video = require("./Video.js");
 const ExternalVideo = require("./ExternalVideo.js");
 const ModelViewer = require("./ModelViewer.js");
-const jsxRuntime = require("react/jsx-runtime");
 function MediaFile({
   data,
   mediaOptions,
@@ -19,32 +19,40 @@ function MediaFile({
           return null;
         }
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(Image.Image, {
-        ...passthroughProps,
-        ...mediaOptions == null ? void 0 : mediaOptions.image,
-        data: data.image
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Image.Image,
+        {
+          ...passthroughProps,
+          ...mediaOptions == null ? void 0 : mediaOptions.image,
+          data: data.image
+        }
+      );
     }
     case "Video": {
-      return /* @__PURE__ */ jsxRuntime.jsx(Video.Video, {
-        ...passthroughProps,
-        ...mediaOptions == null ? void 0 : mediaOptions.video,
-        data
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(Video.Video, { ...passthroughProps, ...mediaOptions == null ? void 0 : mediaOptions.video, data });
     }
     case "ExternalVideo": {
-      return /* @__PURE__ */ jsxRuntime.jsx(ExternalVideo.ExternalVideo, {
-        ...passthroughProps,
-        ...mediaOptions == null ? void 0 : mediaOptions.externalVideo,
-        data
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ExternalVideo.ExternalVideo,
+        {
+          ...passthroughProps,
+          ...mediaOptions == null ? void 0 : mediaOptions.externalVideo,
+          data
+        }
+      );
     }
     case "Model3d": {
-      return /* @__PURE__ */ jsxRuntime.jsx(ModelViewer.ModelViewer, {
-        ...passthroughProps,
-        ...mediaOptions == null ? void 0 : mediaOptions.modelViewer,
-        data
-      });
+      return (
+        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ModelViewer.ModelViewer,
+          {
+            ...passthroughProps,
+            ...mediaOptions == null ? void 0 : mediaOptions.modelViewer,
+            data
+          }
+        )
+      );
     }
     default: {
       const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;

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

@@ -1 +1 @@
-{"version":3,"file":"MediaFile.js","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type ShopifyImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n  HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\n  /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n  data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n  /** The options for the `Image`, `Video`, or `ExternalVideo` components. */\n  mediaOptions?: {\n    /** Props that will only apply when an `<Image />` is rendered */\n    image?: Omit<ShopifyImageProps, 'data'>;\n    /** Props that will only apply when a `<Video />` is rendered */\n    video?: Omit<React.ComponentProps<typeof Video>, 'data'>;\n    /** Props that will only apply when an `<ExternalVideo />` is rendered */\n    externalVideo?: Omit<\n      React.ComponentProps<typeof ExternalVideo>['options'],\n      'data'\n    >;\n    /** Props that will only apply when a `<ModelViewer />` is rendered */\n    modelViewer?: Omit<typeof ModelViewer, 'data'>;\n  };\n}\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps) {\n  switch (data.__typename) {\n    case 'MediaImage': {\n      if (!data.image) {\n        const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n        if (__HYDROGEN_DEV__) {\n          throw new Error(noDataImage);\n        } else {\n          console.warn(noDataImage);\n          return null;\n        }\n      }\n\n      return (\n        <Image\n          {...passthroughProps}\n          {...mediaOptions?.image}\n          data={data.image}\n        />\n      );\n    }\n    case 'Video': {\n      return (\n        <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n      );\n    }\n    case 'ExternalVideo': {\n      return (\n        <ExternalVideo\n          {...passthroughProps}\n          {...mediaOptions?.externalVideo}\n          data={data}\n        />\n      );\n    }\n    case 'Model3d': {\n      return (\n        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\n        <ModelViewer\n          {...passthroughProps}\n          {...mediaOptions?.modelViewer}\n          data={data}\n        />\n      );\n    }\n    default: {\n      const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(`${typenameMissingMessage}  Rendering 'null' by default`);\n        return null;\n      }\n    }\n  }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","console","warn","Image","Video","video","ExternalVideo","externalVideo","ModelViewer","modelViewer","typenameMissingMessage","error"],"mappings":";;;;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AACW,GAAG;AACjB,UAAQF,KAAKG,YAAU;AAAA,IACrB,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AAGd;AACLC,kBAAQC,KAAKF,WAAW;AACjB,iBAAA;AAAA,QACT;AAAA,MACF;AAEA,4CACGG,MAAAA,OAAK;AAAA,QAAA,GACAN;AAAAA,QAAgB,GAChBD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CACX;AAAA,IAEN;AAAA,IACA,KAAK,SAAS;AACZ,4CACGK,MAAAA,OAAK;AAAA,QAAA,GAAKP;AAAAA,QAAgB,GAAMD,6CAAcS;AAAAA,QAAO;AAAA,MAAA,CAAc;AAAA,IAExE;AAAA,IACA,KAAK,iBAAiB;AACpB,4CACGC,cAAAA,eAAa;AAAA,QAAA,GACRT;AAAAA,QAAgB,GAChBD,6CAAcW;AAAAA,QAClB;AAAA,MAAA,CACA;AAAA,IAEN;AAAA,IACA,KAAK,WAAW;AACd,4CAEGC,YAAAA,aAAW;AAAA,QAAA,GACNX;AAAAA,QAAgB,GAChBD,6CAAca;AAAAA,QAClB;AAAA,MAAA,CAAW;AAAA,IAGjB;AAAA,IACA,SAAS;AACP,YAAMC,yBAA0B;AAGzB;AACGC,gBAAAA,MAAO,GAAED,qDAAqD;AAC/D,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EAAC;AAEL;;"}
+{"version":3,"file":"MediaFile.js","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type ShopifyImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n  HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\n  /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n  data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n  /** The options for the `Image`, `Video`, or `ExternalVideo` components. */\n  mediaOptions?: {\n    /** Props that will only apply when an `<Image />` is rendered */\n    image?: Omit<ShopifyImageProps, 'data'>;\n    /** Props that will only apply when a `<Video />` is rendered */\n    video?: Omit<React.ComponentProps<typeof Video>, 'data'>;\n    /** Props that will only apply when an `<ExternalVideo />` is rendered */\n    externalVideo?: Omit<\n      React.ComponentProps<typeof ExternalVideo>['options'],\n      'data'\n    >;\n    /** Props that will only apply when a `<ModelViewer />` is rendered */\n    modelViewer?: Omit<typeof ModelViewer, 'data'>;\n  };\n}\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps) {\n  switch (data.__typename) {\n    case 'MediaImage': {\n      if (!data.image) {\n        const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n        if (__HYDROGEN_DEV__) {\n          throw new Error(noDataImage);\n        } else {\n          console.warn(noDataImage);\n          return null;\n        }\n      }\n\n      return (\n        <Image\n          {...passthroughProps}\n          {...mediaOptions?.image}\n          data={data.image}\n        />\n      );\n    }\n    case 'Video': {\n      return (\n        <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n      );\n    }\n    case 'ExternalVideo': {\n      return (\n        <ExternalVideo\n          {...passthroughProps}\n          {...mediaOptions?.externalVideo}\n          data={data}\n        />\n      );\n    }\n    case 'Model3d': {\n      return (\n        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\n        <ModelViewer\n          {...passthroughProps}\n          {...mediaOptions?.modelViewer}\n          data={data}\n        />\n      );\n    }\n    default: {\n      const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(`${typenameMissingMessage}  Rendering 'null' by default`);\n        return null;\n      }\n    }\n  }\n}\n"],"names":["jsx","Image","Video","ExternalVideo","ModelViewer"],"mappings":";;;;;;;AAmCO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,UAAQ,KAAK,YAAY;AAAA,IACvB,KAAK,cAAc;AACb,UAAA,CAAC,KAAK,OAAO;AACf,cAAM,cAAc;AAGb;AACL,kBAAQ,KAAK,WAAW;AACjB,iBAAA;AAAA,QACT;AAAA,MACF;AAGE,aAAAA,2BAAA;AAAA,QAACC,MAAA;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG,6CAAc;AAAA,UAClB,MAAM,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IAGjB;AAAA,IACA,KAAK,SAAS;AACZ,4CACGC,MAAO,OAAA,EAAA,GAAG,kBAAmB,GAAG,6CAAc,OAAO,KAAY,CAAA;AAAA,IAEtE;AAAA,IACA,KAAK,iBAAiB;AAElB,aAAAF,2BAAA;AAAA,QAACG,cAAA;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG,6CAAc;AAAA,UAClB;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAAA,IACA,KAAK,WAAW;AACd;AAAA;AAAA,QAEEH,2BAAA;AAAA,UAACI,YAAA;AAAA,UAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG,6CAAc;AAAA,YAClB;AAAA,UAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,IACA,SAAS;AACP,YAAM,yBAAyB;AAGxB;AACG,gBAAA,MAAM,GAAG,qDAAqD;AAC/D,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;;"}

package/dist/node-prod/MediaFile.mjs

@@ -1,8 +1,8 @@
+import { jsx } from "react/jsx-runtime";
 import { Image } from "./Image.mjs";
 import { Video } from "./Video.mjs";
 import { ExternalVideo } from "./ExternalVideo.mjs";
 import { ModelViewer } from "./ModelViewer.mjs";
-import { jsx } from "react/jsx-runtime";
 function MediaFile({
   data,
   mediaOptions,
@@ -17,32 +17,40 @@ function MediaFile({
           return null;
         }
       }
-      return /* @__PURE__ */ jsx(Image, {
-        ...passthroughProps,
-        ...mediaOptions == null ? void 0 : mediaOptions.image,
-        data: data.image
-      });
+      return /* @__PURE__ */ jsx(
+        Image,
+        {
+          ...passthroughProps,
+          ...mediaOptions == null ? void 0 : mediaOptions.image,
+          data: data.image
+        }
+      );
     }
     case "Video": {
-      return /* @__PURE__ */ jsx(Video, {
-        ...passthroughProps,
-        ...mediaOptions == null ? void 0 : mediaOptions.video,
-        data
-      });
+      return /* @__PURE__ */ jsx(Video, { ...passthroughProps, ...mediaOptions == null ? void 0 : mediaOptions.video, data });
     }
     case "ExternalVideo": {
-      return /* @__PURE__ */ jsx(ExternalVideo, {
-        ...passthroughProps,
-        ...mediaOptions == null ? void 0 : mediaOptions.externalVideo,
-        data
-      });
+      return /* @__PURE__ */ jsx(
+        ExternalVideo,
+        {
+          ...passthroughProps,
+          ...mediaOptions == null ? void 0 : mediaOptions.externalVideo,
+          data
+        }
+      );
     }
     case "Model3d": {
-      return /* @__PURE__ */ jsx(ModelViewer, {
-        ...passthroughProps,
-        ...mediaOptions == null ? void 0 : mediaOptions.modelViewer,
-        data
-      });
+      return (
+        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment
+        /* @__PURE__ */ jsx(
+          ModelViewer,
+          {
+            ...passthroughProps,
+            ...mediaOptions == null ? void 0 : mediaOptions.modelViewer,
+            data
+          }
+        )
+      );
     }
     default: {
       const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;

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

@@ -1 +1 @@
-{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type ShopifyImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n  HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\n  /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n  data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n  /** The options for the `Image`, `Video`, or `ExternalVideo` components. */\n  mediaOptions?: {\n    /** Props that will only apply when an `<Image />` is rendered */\n    image?: Omit<ShopifyImageProps, 'data'>;\n    /** Props that will only apply when a `<Video />` is rendered */\n    video?: Omit<React.ComponentProps<typeof Video>, 'data'>;\n    /** Props that will only apply when an `<ExternalVideo />` is rendered */\n    externalVideo?: Omit<\n      React.ComponentProps<typeof ExternalVideo>['options'],\n      'data'\n    >;\n    /** Props that will only apply when a `<ModelViewer />` is rendered */\n    modelViewer?: Omit<typeof ModelViewer, 'data'>;\n  };\n}\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps) {\n  switch (data.__typename) {\n    case 'MediaImage': {\n      if (!data.image) {\n        const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n        if (__HYDROGEN_DEV__) {\n          throw new Error(noDataImage);\n        } else {\n          console.warn(noDataImage);\n          return null;\n        }\n      }\n\n      return (\n        <Image\n          {...passthroughProps}\n          {...mediaOptions?.image}\n          data={data.image}\n        />\n      );\n    }\n    case 'Video': {\n      return (\n        <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n      );\n    }\n    case 'ExternalVideo': {\n      return (\n        <ExternalVideo\n          {...passthroughProps}\n          {...mediaOptions?.externalVideo}\n          data={data}\n        />\n      );\n    }\n    case 'Model3d': {\n      return (\n        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\n        <ModelViewer\n          {...passthroughProps}\n          {...mediaOptions?.modelViewer}\n          data={data}\n        />\n      );\n    }\n    default: {\n      const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(`${typenameMissingMessage}  Rendering 'null' by default`);\n        return null;\n      }\n    }\n  }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","console","warn","video","externalVideo","modelViewer","typenameMissingMessage","error"],"mappings":";;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AACW,GAAG;AACjB,UAAQF,KAAKG,YAAU;AAAA,IACrB,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AAGd;AACLC,kBAAQC,KAAKF,WAAW;AACjB,iBAAA;AAAA,QACT;AAAA,MACF;AAEA,iCACG,OAAK;AAAA,QAAA,GACAH;AAAAA,QAAgB,GAChBD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CACX;AAAA,IAEN;AAAA,IACA,KAAK,SAAS;AACZ,iCACG,OAAK;AAAA,QAAA,GAAKF;AAAAA,QAAgB,GAAMD,6CAAcO;AAAAA,QAAO;AAAA,MAAA,CAAc;AAAA,IAExE;AAAA,IACA,KAAK,iBAAiB;AACpB,iCACG,eAAa;AAAA,QAAA,GACRN;AAAAA,QAAgB,GAChBD,6CAAcQ;AAAAA,QAClB;AAAA,MAAA,CACA;AAAA,IAEN;AAAA,IACA,KAAK,WAAW;AACd,iCAEG,aAAW;AAAA,QAAA,GACNP;AAAAA,QAAgB,GAChBD,6CAAcS;AAAAA,QAClB;AAAA,MAAA,CAAW;AAAA,IAGjB;AAAA,IACA,SAAS;AACP,YAAMC,yBAA0B;AAGzB;AACGC,gBAAAA,MAAO,GAAED,qDAAqD;AAC/D,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EAAC;AAEL;"}
+{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type ShopifyImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n  HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\n  /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n  data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n  /** The options for the `Image`, `Video`, or `ExternalVideo` components. */\n  mediaOptions?: {\n    /** Props that will only apply when an `<Image />` is rendered */\n    image?: Omit<ShopifyImageProps, 'data'>;\n    /** Props that will only apply when a `<Video />` is rendered */\n    video?: Omit<React.ComponentProps<typeof Video>, 'data'>;\n    /** Props that will only apply when an `<ExternalVideo />` is rendered */\n    externalVideo?: Omit<\n      React.ComponentProps<typeof ExternalVideo>['options'],\n      'data'\n    >;\n    /** Props that will only apply when a `<ModelViewer />` is rendered */\n    modelViewer?: Omit<typeof ModelViewer, 'data'>;\n  };\n}\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps) {\n  switch (data.__typename) {\n    case 'MediaImage': {\n      if (!data.image) {\n        const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n        if (__HYDROGEN_DEV__) {\n          throw new Error(noDataImage);\n        } else {\n          console.warn(noDataImage);\n          return null;\n        }\n      }\n\n      return (\n        <Image\n          {...passthroughProps}\n          {...mediaOptions?.image}\n          data={data.image}\n        />\n      );\n    }\n    case 'Video': {\n      return (\n        <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n      );\n    }\n    case 'ExternalVideo': {\n      return (\n        <ExternalVideo\n          {...passthroughProps}\n          {...mediaOptions?.externalVideo}\n          data={data}\n        />\n      );\n    }\n    case 'Model3d': {\n      return (\n        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\n        <ModelViewer\n          {...passthroughProps}\n          {...mediaOptions?.modelViewer}\n          data={data}\n        />\n      );\n    }\n    default: {\n      const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to render the matching sub-component for this type of media.`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(`${typenameMissingMessage}  Rendering 'null' by default`);\n        return null;\n      }\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;AAmCO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,UAAQ,KAAK,YAAY;AAAA,IACvB,KAAK,cAAc;AACb,UAAA,CAAC,KAAK,OAAO;AACf,cAAM,cAAc;AAGb;AACL,kBAAQ,KAAK,WAAW;AACjB,iBAAA;AAAA,QACT;AAAA,MACF;AAGE,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG,6CAAc;AAAA,UAClB,MAAM,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IAGjB;AAAA,IACA,KAAK,SAAS;AACZ,iCACG,OAAO,EAAA,GAAG,kBAAmB,GAAG,6CAAc,OAAO,KAAY,CAAA;AAAA,IAEtE;AAAA,IACA,KAAK,iBAAiB;AAElB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG,6CAAc;AAAA,UAClB;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAAA,IACA,KAAK,WAAW;AACd;AAAA;AAAA,QAEE;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG,6CAAc;AAAA,YAClB;AAAA,UAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,IACA,SAAS;AACP,YAAM,yBAAyB;AAGxB;AACG,gBAAA,MAAM,GAAG,qDAAqD;AAC/D,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;"}

package/dist/node-prod/ModelViewer.js

@@ -1,23 +1,23 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const require$$0 = require("react");
 const loadScript = require("./load-script.js");
-const jsxRuntime = require("react/jsx-runtime");
 function ModelViewer(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-  const [modelViewer, setModelViewer] = require$$0.useState(void 0);
+  var _a, _b, _c;
+  const [modelViewer, setModelViewer] = require$$0.useState(
+    void 0
+  );
   const callbackRef = require$$0.useCallback((node) => {
     setModelViewer(node);
   }, []);
-  const {
-    data,
-    children,
-    className,
-    ...passthroughProps
-  } = props;
-  const modelViewerLoadedStatus = loadScript.useLoadScript("https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js", {
-    module: true
-  });
+  const { data, children, className, ...passthroughProps } = props;
+  const modelViewerLoadedStatus = loadScript.useLoadScript(
+    "https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js",
+    {
+      module: true
+    }
+  );
   require$$0.useEffect(() => {
     if (!modelViewer) {
       return;
@@ -29,25 +29,43 @@ function ModelViewer(props) {
     if (passthroughProps.onPreload)
       modelViewer.addEventListener("preload", passthroughProps.onPreload);
     if (passthroughProps.onModelVisibility)
-      modelViewer.addEventListener("model-visibility", passthroughProps.onModelVisibility);
+      modelViewer.addEventListener(
+        "model-visibility",
+        passthroughProps.onModelVisibility
+      );
     if (passthroughProps.onProgress)
       modelViewer.addEventListener("progress", passthroughProps.onProgress);
     if (passthroughProps.onArStatus)
       modelViewer.addEventListener("ar-status", passthroughProps.onArStatus);
     if (passthroughProps.onArTracking)
-      modelViewer.addEventListener("ar-tracking", passthroughProps.onArTracking);
+      modelViewer.addEventListener(
+        "ar-tracking",
+        passthroughProps.onArTracking
+      );
     if (passthroughProps.onQuickLookButtonTapped)
-      modelViewer.addEventListener("quick-look-button-tapped", passthroughProps.onQuickLookButtonTapped);
+      modelViewer.addEventListener(
+        "quick-look-button-tapped",
+        passthroughProps.onQuickLookButtonTapped
+      );
     if (passthroughProps.onCameraChange)
-      modelViewer.addEventListener("camera-change", passthroughProps.onCameraChange);
+      modelViewer.addEventListener(
+        "camera-change",
+        passthroughProps.onCameraChange
+      );
     if (passthroughProps.onEnvironmentChange)
-      modelViewer.addEventListener("environment-change", passthroughProps.onEnvironmentChange);
+      modelViewer.addEventListener(
+        "environment-change",
+        passthroughProps.onEnvironmentChange
+      );
     if (passthroughProps.onPlay)
       modelViewer.addEventListener("play", passthroughProps.onPlay);
     if (passthroughProps.onPause)
       modelViewer.addEventListener("ar-status", passthroughProps.onPause);
     if (passthroughProps.onSceneGraphReady)
-      modelViewer.addEventListener("scene-graph-ready", passthroughProps.onSceneGraphReady);
+      modelViewer.addEventListener(
+        "scene-graph-ready",
+        passthroughProps.onSceneGraphReady
+      );
     return () => {
       if (modelViewer == null) {
         return;
@@ -59,27 +77,66 @@ function ModelViewer(props) {
       if (passthroughProps.onPreload)
         modelViewer.removeEventListener("preload", passthroughProps.onPreload);
       if (passthroughProps.onModelVisibility)
-        modelViewer.removeEventListener("model-visibility", passthroughProps.onModelVisibility);
+        modelViewer.removeEventListener(
+          "model-visibility",
+          passthroughProps.onModelVisibility
+        );
       if (passthroughProps.onProgress)
-        modelViewer.removeEventListener("progress", passthroughProps.onProgress);
+        modelViewer.removeEventListener(
+          "progress",
+          passthroughProps.onProgress
+        );
       if (passthroughProps.onArStatus)
-        modelViewer.removeEventListener("ar-status", passthroughProps.onArStatus);
+        modelViewer.removeEventListener(
+          "ar-status",
+          passthroughProps.onArStatus
+        );
       if (passthroughProps.onArTracking)
-        modelViewer.removeEventListener("ar-tracking", passthroughProps.onArTracking);
+        modelViewer.removeEventListener(
+          "ar-tracking",
+          passthroughProps.onArTracking
+        );
       if (passthroughProps.onQuickLookButtonTapped)
-        modelViewer.removeEventListener("quick-look-button-tapped", passthroughProps.onQuickLookButtonTapped);
+        modelViewer.removeEventListener(
+          "quick-look-button-tapped",
+          passthroughProps.onQuickLookButtonTapped
+        );
       if (passthroughProps.onCameraChange)
-        modelViewer.removeEventListener("camera-change", passthroughProps.onCameraChange);
+        modelViewer.removeEventListener(
+          "camera-change",
+          passthroughProps.onCameraChange
+        );
       if (passthroughProps.onEnvironmentChange)
-        modelViewer.removeEventListener("environment-change", passthroughProps.onEnvironmentChange);
+        modelViewer.removeEventListener(
+          "environment-change",
+          passthroughProps.onEnvironmentChange
+        );
       if (passthroughProps.onPlay)
         modelViewer.removeEventListener("play", passthroughProps.onPlay);
       if (passthroughProps.onPause)
         modelViewer.removeEventListener("ar-status", passthroughProps.onPause);
       if (passthroughProps.onSceneGraphReady)
-        modelViewer.removeEventListener("scene-graph-ready", passthroughProps.onSceneGraphReady);
+        modelViewer.removeEventListener(
+          "scene-graph-ready",
+          passthroughProps.onSceneGraphReady
+        );
     };
-  }, [modelViewer, passthroughProps.onArStatus, passthroughProps.onArTracking, passthroughProps.onCameraChange, passthroughProps.onEnvironmentChange, passthroughProps.onError, passthroughProps.onLoad, passthroughProps.onModelVisibility, passthroughProps.onPause, passthroughProps.onPlay, passthroughProps.onPreload, passthroughProps.onProgress, passthroughProps.onQuickLookButtonTapped, passthroughProps.onSceneGraphReady]);
+  }, [
+    modelViewer,
+    passthroughProps.onArStatus,
+    passthroughProps.onArTracking,
+    passthroughProps.onCameraChange,
+    passthroughProps.onEnvironmentChange,
+    passthroughProps.onError,
+    passthroughProps.onLoad,
+    passthroughProps.onModelVisibility,
+    passthroughProps.onPause,
+    passthroughProps.onPlay,
+    passthroughProps.onPreload,
+    passthroughProps.onProgress,
+    passthroughProps.onQuickLookButtonTapped,
+    passthroughProps.onSceneGraphReady
+  ]);
   if (modelViewerLoadedStatus !== "done") {
     return null;
   }
@@ -90,54 +147,57 @@ function ModelViewer(props) {
       return null;
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("model-viewer", {
-    ref: callbackRef,
-    ...passthroughProps,
-    className,
-    id: (_c = passthroughProps.id) != null ? _c : data.id,
-    src: data.sources[0].url,
-    alt: (_d = data.alt) != null ? _d : null,
-    "camera-controls": (_e = passthroughProps.cameraControls) != null ? _e : true,
-    poster: (_g = passthroughProps.poster || ((_f = data.previewImage) == null ? void 0 : _f.url)) != null ? _g : null,
-    autoplay: (_h = passthroughProps.autoplay) != null ? _h : true,
-    loading: passthroughProps.loading,
-    reveal: passthroughProps.reveal,
-    ar: passthroughProps.ar,
-    "ar-modes": passthroughProps.arModes,
-    "ar-scale": passthroughProps.arScale,
-    "ar-placement": passthroughProps.arPlacement,
-    "ios-src": passthroughProps.iosSrc,
-    "touch-action": passthroughProps.touchAction,
-    "disable-zoom": passthroughProps.disableZoom,
-    "orbit-sensitivity": passthroughProps.orbitSensitivity,
-    "auto-rotate": passthroughProps.autoRotate,
-    "auto-rotate-delay": passthroughProps.autoRotateDelay,
-    "rotation-per-second": passthroughProps.rotationPerSecond,
-    "interaction-policy": passthroughProps.interactionPolicy,
-    "interaction-prompt": passthroughProps.interactionPrompt,
-    "interaction-prompt-style": passthroughProps.interactionPromptStyle,
-    "interaction-prompt-threshold": passthroughProps.interactionPromptThreshold,
-    "camera-orbit": passthroughProps.cameraOrbit,
-    "camera-target": passthroughProps.cameraTarget,
-    "field-of-view": passthroughProps.fieldOfView,
-    "max-camera-orbit": passthroughProps.maxCameraOrbit,
-    "min-camera-orbit": passthroughProps.minCameraOrbit,
-    "max-field-of-view": passthroughProps.maxFieldOfView,
-    "min-field-of-view": passthroughProps.minFieldOfView,
-    bounds: passthroughProps.bounds,
-    "interpolation-decay": (_i = passthroughProps.interpolationDecay) != null ? _i : 100,
-    "skybox-image": passthroughProps.skyboxImage,
-    "environment-image": passthroughProps.environmentImage,
-    exposure: passthroughProps.exposure,
-    "shadow-intensity": (_j = passthroughProps.shadowIntensity) != null ? _j : 0,
-    "shadow-softness": (_k = passthroughProps.shadowSoftness) != null ? _k : 0,
-    "animation-name": passthroughProps.animationName,
-    "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration,
-    "variant-name": passthroughProps.variantName,
-    orientation: passthroughProps.orientation,
-    scale: passthroughProps.scale,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "model-viewer",
+    {
+      ref: callbackRef,
+      ...passthroughProps,
+      className,
+      id: passthroughProps.id ?? data.id,
+      src: data.sources[0].url,
+      alt: data.alt ?? null,
+      "camera-controls": passthroughProps.cameraControls ?? true,
+      poster: (passthroughProps.poster || ((_c = data.previewImage) == null ? void 0 : _c.url)) ?? null,
+      autoplay: passthroughProps.autoplay ?? true,
+      loading: passthroughProps.loading,
+      reveal: passthroughProps.reveal,
+      ar: passthroughProps.ar,
+      "ar-modes": passthroughProps.arModes,
+      "ar-scale": passthroughProps.arScale,
+      "ar-placement": passthroughProps.arPlacement,
+      "ios-src": passthroughProps.iosSrc,
+      "touch-action": passthroughProps.touchAction,
+      "disable-zoom": passthroughProps.disableZoom,
+      "orbit-sensitivity": passthroughProps.orbitSensitivity,
+      "auto-rotate": passthroughProps.autoRotate,
+      "auto-rotate-delay": passthroughProps.autoRotateDelay,
+      "rotation-per-second": passthroughProps.rotationPerSecond,
+      "interaction-policy": passthroughProps.interactionPolicy,
+      "interaction-prompt": passthroughProps.interactionPrompt,
+      "interaction-prompt-style": passthroughProps.interactionPromptStyle,
+      "interaction-prompt-threshold": passthroughProps.interactionPromptThreshold,
+      "camera-orbit": passthroughProps.cameraOrbit,
+      "camera-target": passthroughProps.cameraTarget,
+      "field-of-view": passthroughProps.fieldOfView,
+      "max-camera-orbit": passthroughProps.maxCameraOrbit,
+      "min-camera-orbit": passthroughProps.minCameraOrbit,
+      "max-field-of-view": passthroughProps.maxFieldOfView,
+      "min-field-of-view": passthroughProps.minFieldOfView,
+      bounds: passthroughProps.bounds,
+      "interpolation-decay": passthroughProps.interpolationDecay ?? 100,
+      "skybox-image": passthroughProps.skyboxImage,
+      "environment-image": passthroughProps.environmentImage,
+      exposure: passthroughProps.exposure,
+      "shadow-intensity": passthroughProps.shadowIntensity ?? 0,
+      "shadow-softness": passthroughProps.shadowSoftness ?? 0,
+      "animation-name": passthroughProps.animationName,
+      "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration,
+      "variant-name": passthroughProps.variantName,
+      orientation: passthroughProps.orientation,
+      scale: passthroughProps.scale,
+      children
+    }
+  );
 }
 exports.ModelViewer = ModelViewer;
 //# sourceMappingURL=ModelViewer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModelViewer.js","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype PropsWeControl = 'src';\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  PropsWeControl\n> & {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/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) {\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      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      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":["ModelViewer","props","modelViewer","setModelViewer","useState","undefined","callbackRef","useCallback","node","data","children","className","passthroughProps","modelViewerLoadedStatus","useLoadScript","module","useEffect","onError","addEventListener","onLoad","onPreload","onModelVisibility","onProgress","onArStatus","onArTracking","onQuickLookButtonTapped","onCameraChange","onEnvironmentChange","onPlay","onPause","onSceneGraphReady","removeEventListener","sources","url","sourcesUrlError","console","error","id","alt","cameraControls","poster","previewImage","autoplay","loading","reveal","ar","arModes","arScale","arPlacement","iosSrc","touchAction","disableZoom","orbitSensitivity","autoRotate","autoRotateDelay","rotationPerSecond","interactionPolicy","interactionPrompt","interactionPromptStyle","interactionPromptThreshold","cameraOrbit","cameraTarget","fieldOfView","maxCameraOrbit","minCameraOrbit","maxFieldOfView","minFieldOfView","bounds","interpolationDecay","skyboxImage","environmentImage","exposure","shadowIntensity","shadowSoftness","animationName","animationCrossfadeDuration","variantName","orientation","scale"],"mappings":"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"}
+{"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\ntype PropsWeControl = 'src';\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  PropsWeControl\n> & {\n  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/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) {\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      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      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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"}