@shopify/hydrogen-react 2023.10.1 → 2024.1.0

package/dist/umd/hydrogen-react.dev.js

@@ -405,7 +405,7 @@
     }
     return ref.current.v;
   }
-  var __read = globalThis && globalThis.__read || function(o2, n2) {
+  var __read = function(o2, n2) {
     var m = typeof Symbol === "function" && o2[Symbol.iterator];
     if (!m)
       return o2;
@@ -796,7 +796,7 @@
   }
 `
   );
-  const SFAPI_VERSION = "2023-10";
+  const SFAPI_VERSION = "2024-01";
   const isMockShop = (domain) => domain.includes("mock.shop");
   function createStorefrontClient(props) {
     const {
@@ -2948,42 +2948,56 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     Color: "string",
     UnsignedInt64: "string"
   };
-  function ExternalVideo(props) {
-    const {
-      data,
-      options,
-      id = data.id,
-      frameBorder = "0",
-      allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
-      allowFullScreen = true,
-      loading = "lazy",
-      ...passthroughProps
-    } = props;
-    if (!data.embedUrl) {
-      throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);
-    }
-    let finalUrl = data.embedUrl;
-    if (options) {
-      const urlObject = new URL(data.embedUrl);
-      for (const key of Object.keys(options)) {
-        urlObject.searchParams.set(key, options[key]);
+  const customerAccountApiCustomScalars = {
+    DateTime: "string",
+    Decimal: "string",
+    HTML: "string",
+    ISO8601DateTime: "string",
+    URL: "string",
+    UnsignedInt64: "string"
+  };
+  const ExternalVideo = React$1.forwardRef(
+    (props, ref) => {
+      const {
+        data,
+        options,
+        id = data.id,
+        frameBorder = "0",
+        allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+        allowFullScreen = true,
+        loading = "lazy",
+        ...passthroughProps
+      } = props;
+      if (!data.embedUrl) {
+        throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);
+      }
+      let finalUrl = data.embedUrl;
+      if (options) {
+        const urlObject = new URL(data.embedUrl);
+        for (const [key, value] of Object.entries(options)) {
+          if (typeof value === "undefined") {
+            continue;
+          }
+          urlObject.searchParams.set(key, value.toString());
+        }
+        finalUrl = urlObject.toString();
       }
-      finalUrl = urlObject.toString();
+      return /* @__PURE__ */ React.createElement(
+        "iframe",
+        {
+          ...passthroughProps,
+          id: id ?? data.embedUrl,
+          title: data.alt ?? data.id ?? "external video",
+          frameBorder,
+          allow,
+          allowFullScreen,
+          src: finalUrl,
+          loading,
+          ref
+        }
+      );
     }
-    return /* @__PURE__ */ React.createElement(
-      "iframe",
-      {
-        ...passthroughProps,
-        id: id ?? data.embedUrl,
-        title: data.alt ?? data.id ?? "external video",
-        frameBorder,
-        allow,
-        allowFullScreen,
-        src: finalUrl,
-        loading
-      }
-    );
-  }
+  );
   const IMAGE_FRAGMENT = `#graphql
   fragment Image on Image {
     altText
@@ -3375,7 +3389,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
     }, [url, stringifiedOptions, options]);
     return status;
   }
-  function Video(props) {
+  const Video = React$1.forwardRef((props, ref) => {
     var _a;
     const {
       data,
@@ -3402,7 +3416,8 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
           id,
           playsInline,
           controls,
-          poster: posterUrl
+          poster: posterUrl,
+          ref
         },
         data.sources.map((source) => {
           if (!((source == null ? void 0 : source.url) && (source == null ? void 0 : source.mimeType))) {
@@ -3420,7 +3435,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         })
       )
     );
-  }
+  });
   function ModelViewer(props) {
     var _a, _b, _c;
     const [modelViewer, setModelViewer] = React$1.useState(
@@ -3436,108 +3451,43 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
         module: true
       }
     );
+    const hydrogenEventListener = {
+      error: passthroughProps.onError,
+      load: passthroughProps.onLoad,
+      preload: passthroughProps.onPreload,
+      "model-visibility": passthroughProps.onModelVisibility,
+      progress: passthroughProps.onProgress,
+      "ar-status": passthroughProps.onArStatus,
+      "ar-tracking": passthroughProps.onArTracking,
+      "quick-look-button-tapped": passthroughProps.onQuickLookButtonTapped,
+      "camera-change": passthroughProps.onCameraChange,
+      "environment-change": passthroughProps.onEnvironmentChange,
+      play: passthroughProps.onPlay,
+      pause: passthroughProps.onPause,
+      "scene-graph-ready": passthroughProps.onSceneGraphReady
+    };
     React$1.useEffect(() => {
       if (!modelViewer) {
         return;
       }
-      if (passthroughProps.onError)
-        modelViewer.addEventListener("error", passthroughProps.onError);
-      if (passthroughProps.onLoad)
-        modelViewer.addEventListener("load", passthroughProps.onLoad);
-      if (passthroughProps.onPreload)
-        modelViewer.addEventListener("preload", passthroughProps.onPreload);
-      if (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
-        );
-      if (passthroughProps.onQuickLookButtonTapped)
-        modelViewer.addEventListener(
-          "quick-look-button-tapped",
-          passthroughProps.onQuickLookButtonTapped
-        );
-      if (passthroughProps.onCameraChange)
-        modelViewer.addEventListener(
-          "camera-change",
-          passthroughProps.onCameraChange
-        );
-      if (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
-        );
+      Object.entries(hydrogenEventListener).forEach(
+        ([eventName, callbackFunc]) => {
+          if (callbackFunc) {
+            modelViewer.addEventListener(eventName, callbackFunc);
+          }
+        }
+      );
       return () => {
         if (modelViewer == null) {
           return;
         }
-        if (passthroughProps.onError)
-          modelViewer.removeEventListener("error", passthroughProps.onError);
-        if (passthroughProps.onLoad)
-          modelViewer.removeEventListener("load", passthroughProps.onLoad);
-        if (passthroughProps.onPreload)
-          modelViewer.removeEventListener("preload", passthroughProps.onPreload);
-        if (passthroughProps.onModelVisibility)
-          modelViewer.removeEventListener(
-            "model-visibility",
-            passthroughProps.onModelVisibility
-          );
-        if (passthroughProps.onProgress)
-          modelViewer.removeEventListener(
-            "progress",
-            passthroughProps.onProgress
-          );
-        if (passthroughProps.onArStatus)
-          modelViewer.removeEventListener(
-            "ar-status",
-            passthroughProps.onArStatus
-          );
-        if (passthroughProps.onArTracking)
-          modelViewer.removeEventListener(
-            "ar-tracking",
-            passthroughProps.onArTracking
-          );
-        if (passthroughProps.onQuickLookButtonTapped)
-          modelViewer.removeEventListener(
-            "quick-look-button-tapped",
-            passthroughProps.onQuickLookButtonTapped
-          );
-        if (passthroughProps.onCameraChange)
-          modelViewer.removeEventListener(
-            "camera-change",
-            passthroughProps.onCameraChange
-          );
-        if (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
-          );
+        Object.entries(hydrogenEventListener).forEach(
+          ([eventName, callbackFunc]) => {
+            if (callbackFunc) {
+              modelViewer.removeEventListener(eventName, callbackFunc);
+            }
+          }
+        );
       };
     }, [
       modelViewer,
@@ -3964,6 +3914,7 @@ Refer to the authentication https://shopify.dev/api/storefront#authentication do
   exports2.ShopifySalesChannel = ShopifySalesChannel;
   exports2.Video = Video;
   exports2.createStorefrontClient = createStorefrontClient;
+  exports2.customerAccountApiCustomScalars = customerAccountApiCustomScalars;
   exports2.flattenConnection = flattenConnection;
   exports2.getClientBrowserParameters = getClientBrowserParameters;
   exports2.getShopifyCookies = getShopifyCookies;