@kontextso/sdk-react-native 3.0.7-rc.1 → 3.0.7-rc.3

package/dist/index.js

@@ -56,47 +56,10 @@ function handleIframeMessage(handler, opts) {
 
 // src/formats/Format.tsx
 var import_sdk_react = require("@kontextso/sdk-react");
-var import_react2 = require("react");
-var import_react_native = require("react-native");
-
-// src/frame-webview.tsx
 var import_react = require("react");
+var import_react_native = require("react-native");
 var import_react_native_webview = require("react-native-webview");
 var import_jsx_runtime = require("react/jsx-runtime");
-var FrameWebView = (0, import_react.forwardRef)(
-  ({ iframeUrl, onMessage, style, onError, onLoad }, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_native_webview.WebView,
-      {
-        ref: forwardedRef,
-        source: {
-          uri: iframeUrl
-        },
-        onMessage,
-        style,
-        allowsInlineMediaPlayback: true,
-        mediaPlaybackRequiresUserAction: false,
-        javaScriptEnabled: true,
-        domStorageEnabled: true,
-        allowsFullscreenVideo: false,
-        injectedJavaScript: `
-          window.addEventListener("message", function(event) {
-            if (window.ReactNativeWebView && event.data) {
-              // ReactNativeWebView.postMessage only supports string data
-              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
-            }
-          }, false);
-      `,
-        onError,
-        onLoad
-      }
-    );
-  }
-);
-var frame_webview_default = FrameWebView;
-
-// src/formats/Format.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
 var sendMessage = (webViewRef, type, code, data) => {
   const message = makeIframeMessage(type, {
     data,
@@ -108,56 +71,24 @@ var sendMessage = (webViewRef, type, code, data) => {
     }));
   `);
 };
-var getCachedContent = (context, bidId) => {
-  if (!bidId) {
+var getUrl = (code, messageId, bidId) => {
+  const context = (0, import_react.useContext)(import_sdk_react.AdsContext);
+  if (!context || !bidId) {
     return null;
   }
-  return context?.cachedContentRef?.current?.get(bidId) ?? null;
+  const adServerUrl = context?.adServerUrl;
+  const params = new URLSearchParams({
+    code,
+    messageId,
+    sdk: "sdk-react-native"
+  });
+  return `${adServerUrl}/api/frame/${bidId}?${params}`;
 };
 var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
-  const context = (0, import_react2.useContext)(import_sdk_react.AdsContext);
+  const context = (0, import_react.useContext)(import_sdk_react.AdsContext);
   const bid = (0, import_sdk_react.useBid)({ code, messageId });
-  const [height, setHeight] = (0, import_react2.useState)(0);
-  const cachedContent = getCachedContent(context, bid?.bidId);
-  const iframeUrl = (0, import_sdk_react.useIframeUrl)(bid, code, messageId, "sdk-react-native", otherParams.theme, cachedContent);
-  const modalUrl = iframeUrl.replace("/api/frame/", "/api/modal/");
-  const [showIframe, setShowIframe] = (0, import_react2.useState)(false);
-  const [iframeLoaded, setIframeLoaded] = (0, import_react2.useState)(false);
-  const [modalOpen, setModalOpen] = (0, import_react2.useState)(false);
-  const [modalShown, setModalShown] = (0, import_react2.useState)(false);
-  const [modalLoaded, setModalLoaded] = (0, import_react2.useState)(false);
-  const [containerStyles, setContainerStyles] = (0, import_react2.useState)({});
-  const [iframeStyles, setIframeStyles] = (0, import_react2.useState)({});
-  const containerRef = (0, import_react2.useRef)(null);
-  const webViewRef = (0, import_react2.useRef)(null);
-  const modalWebViewRef = (0, import_react2.useRef)(null);
-  const modalInitTimeoutRef = (0, import_react2.useRef)(null);
-  const isModalInitRef = (0, import_react2.useRef)(false);
-  const { height: windowHeight, width: windowWidth } = (0, import_react_native.useWindowDimensions)();
-  const keyboardHeightRef = (0, import_react2.useRef)(0);
-  const isAdViewVisible = showIframe && iframeLoaded;
-  const reset = () => {
-    setHeight(0);
-    setShowIframe(false);
-    setContainerStyles({});
-    setIframeStyles({});
-    setIframeLoaded(false);
-    resetModal();
-    context?.resetAll();
-    context?.captureError(new Error("Processing iframe error"));
-  };
-  const resetModal = () => {
-    debugModal("Format:resetModal");
-    if (modalInitTimeoutRef.current) {
-      debugModal("Format:resetModalTimeout");
-      clearTimeout(modalInitTimeoutRef.current);
-      modalInitTimeoutRef.current = null;
-    }
-    isModalInitRef.current = false;
-    setModalOpen(false);
-    setModalLoaded(false);
-    setModalShown(false);
-  };
+  const iframeUrl = getUrl(code, messageId, bid?.bidId);
+  const webViewRef = (0, import_react.useRef)(null);
   const debug = (name, data = {}) => {
     context?.onDebugEventInternal?.(name, {
       code,
@@ -165,42 +96,30 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       otherParams,
       bid,
       iframeUrl,
-      iframeLoaded,
-      showIframe,
-      height,
-      containerStyles,
-      iframeStyles,
       ...data
     });
   };
-  const debugModal = (name, data = {}) => {
-    context?.onDebugEventInternal?.(name, {
-      code,
+  debug("Format:updateState", {
+    params: {
       messageId,
-      otherParams,
-      bid,
-      modalUrl,
-      modalOpen,
-      modalShown,
-      modalLoaded,
-      ...data
-    });
-  };
-  debug("Format:updateState");
+      code,
+      otherParams
+    }
+  });
   const onMessage = (event) => {
     try {
       const data = JSON.parse(event.nativeEvent.data);
       debug("Format:iframeMessage", {
         message: data,
-        params: { data }
+        params: { data, messageId, code, otherParams }
       });
       const messageHandler = handleIframeMessage(
         (message) => {
           switch (message.type) {
             case "init-iframe":
-              setIframeLoaded(true);
               debug("Format:iframePostMessage", {
                 params: {
+                  code,
                   messages: context?.messages,
                   sdk: "sdk-react-native",
                   otherParams,
@@ -214,46 +133,6 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
                 messageId
               });
               break;
-            case "error-iframe":
-              reset();
-              break;
-            case "resize-iframe":
-              setHeight(message.data.height);
-              break;
-            case "click-iframe":
-              if (message.data.url) {
-                import_react_native.Linking.openURL(`${context?.adServerUrl}${message.data.url}`).catch(
-                  (err) => console.error("error opening url", err)
-                );
-              }
-              context?.onAdClickInternal(message.data);
-              break;
-            case "view-iframe":
-              context?.onAdViewInternal(message.data);
-              break;
-            case "ad-done-iframe":
-              if (bid?.bidId && message.data.cachedContent) {
-                context?.cachedContentRef?.current?.set(bid.bidId, message.data.cachedContent);
-              }
-              break;
-            case "show-iframe":
-              setShowIframe(true);
-              break;
-            case "hide-iframe":
-              setShowIframe(false);
-              break;
-            case "set-styles-iframe":
-              setContainerStyles(message.data.containerStyles);
-              setIframeStyles(message.data.iframeStyles);
-              break;
-            case "open-component-iframe":
-              setModalOpen(true);
-              modalInitTimeoutRef.current = setTimeout(() => {
-                if (!isModalInitRef.current) {
-                  resetModal();
-                }
-              }, message.data.timeout ?? 5e3);
-              break;
             case "event-iframe":
               onEvent?.(message.data);
               context?.onAdEventInternal(message.data);
@@ -267,253 +146,144 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       messageHandler({ data });
     } catch (e) {
       debug("Format:iframeMessageError", {
-        params: { error: e },
-        error: e
-      });
-      console.error("error parsing message from webview", e);
-      reset();
-    }
-  };
-  const onModalMessage = (event) => {
-    try {
-      const data = JSON.parse(event.nativeEvent.data);
-      debugModal("Format:modalIframeMessage", {
-        params: { data },
-        message: data
-      });
-      const messageHandler = handleIframeMessage(
-        (message) => {
-          switch (message.type) {
-            case "close-component-iframe":
-              resetModal();
-              break;
-            case "init-component-iframe":
-              isModalInitRef.current = true;
-              if (modalInitTimeoutRef.current) {
-                clearTimeout(modalInitTimeoutRef.current);
-                modalInitTimeoutRef.current = null;
-              }
-              setModalShown(true);
-              break;
-            case "error-component-iframe":
-            case "error-iframe":
-              resetModal();
-              context?.captureError(new Error("Processing modal iframe error"));
-              break;
-            case "click-iframe":
-              if (message.data.url) {
-                import_react_native.Linking.openURL(`${context?.adServerUrl}${message.data.url}`).catch(
-                  (err) => console.error("error opening url", err)
-                );
-              }
-              context?.onAdClickInternal(message.data);
-              break;
-            case "event-iframe":
-              onEvent?.(message.data);
-              context?.onAdEventInternal(message.data);
-              break;
-          }
-        },
-        {
-          code,
-          component: "modal"
-        }
-      );
-      messageHandler({ data });
-    } catch (e) {
-      debugModal("Format:modalIframeMessageError", {
-        params: { error: e },
+        params: { error: e, messageId, code, otherParams },
         error: e
       });
       console.error("error parsing message from webview", e);
-      resetModal();
     }
   };
-  const paramsString = (0, import_sdk_react.convertParamsToString)(otherParams);
-  (0, import_react2.useEffect)(() => {
-    if (!iframeLoaded || !context?.adServerUrl || !bid || !webViewRef.current) {
-      debug("Format:iframePostMessageNotLoaded", {
-        params: {
-          iframeLoaded,
-          contextAdServerUrl: context?.adServerUrl,
-          bid
-        }
-      });
-      return;
-    }
-    debug("Format:iframePostMessage", {
-      params: {
-        otherParams
-      }
-    });
-    sendMessage(webViewRef, "update-iframe", code, {
-      data: { otherParams },
-      code
-    });
-  }, [paramsString, iframeLoaded, context?.adServerUrl, bid, code]);
-  const checkIfInViewport = () => {
-    if (!containerRef.current) {
-      debug("Format:checkIfInViewportNoContainer");
-      return;
-    }
-    debug("Format:checkIfInViewportMeasure", {
-      params: {
-        windowWidth,
-        windowHeight
-      }
-    });
-    containerRef.current.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
-      sendMessage(webViewRef, "update-dimensions-iframe", code, {
-        windowWidth,
-        windowHeight,
-        containerWidth,
-        containerHeight,
-        containerX,
-        containerY,
-        keyboardHeight: keyboardHeightRef.current
-      });
-      debug("Format:checkIfInViewportMeasureSend", {
-        params: {
-          windowWidth,
-          windowHeight,
-          containerWidth,
-          containerHeight,
-          containerX,
-          containerY,
-          keyboardHeight: keyboardHeightRef.current
-        }
-      });
-    });
-  };
-  (0, import_react2.useEffect)(() => {
-    if (!isAdViewVisible) {
-      debug("Format:checkIfInViewportNotVisible");
-      return;
-    }
-    const interval = setInterval(() => {
-      checkIfInViewport();
-    }, 250);
-    return () => {
-      clearInterval(interval);
-      debug("Format:checkIfInViewportCleanup");
-    };
-  }, [isAdViewVisible]);
-  (0, import_react2.useEffect)(() => {
-    const showSubscription = import_react_native.Keyboard.addListener("keyboardDidShow", (e) => {
-      debug("Format:keyboardDidShow", {
-        params: {
-          keyboardHeight: e?.endCoordinates?.height ?? 0
-        }
-      });
-      keyboardHeightRef.current = e?.endCoordinates?.height ?? 0;
-    });
-    const hideSubscription = import_react_native.Keyboard.addListener("keyboardDidHide", () => {
-      debug("Format:keyboardDidHide");
-      keyboardHeightRef.current = 0;
-    });
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-      keyboardHeightRef.current = 0;
-      debug("Format:keyboardEffectCleanup");
-    };
-  }, []);
   if (!context || !bid || !iframeUrl) {
     debug("Format:noContextOrBidOrIframeUrl", {
       params: {
         context,
         bid,
-        iframeUrl
+        iframeUrl,
+        messageId,
+        code,
+        otherParams
       }
     });
     return null;
   }
-  const inlineContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    frame_webview_default,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
     {
-      ref: webViewRef,
-      iframeUrl,
-      onMessage,
       style: {
-        height,
+        height: 300,
         width: "100%",
         backgroundColor: "transparent",
-        borderWidth: 0,
-        ...iframeStyles
+        borderWidth: 0
       },
-      onError: () => {
-        debug("Format:iframeError");
-        reset();
-      },
-      onLoad: () => {
-        debug("Format:iframeLoad");
-      }
-    }
-  );
-  const interstitialContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_native.Modal,
-    {
-      visible: modalOpen,
-      transparent: true,
-      onRequestClose: resetModal,
-      animationType: "slide",
-      statusBarTranslucent: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_native.View,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native_webview.WebView,
         {
+          ref: webViewRef,
+          source: {
+            uri: iframeUrl
+          },
+          onMessage,
           style: {
-            flex: 1,
-            // Don't show the modal until the modal page is loaded and sends 'init-component-iframe' message back to SDK
-            ...modalShown ? { opacity: 1, pointerEvents: "auto" } : { opacity: 0, pointerEvents: "none" }
+            height: 300,
+            width: "100%",
+            backgroundColor: "transparent",
+            borderWidth: 0
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            frame_webview_default,
-            {
-              ref: modalWebViewRef,
-              iframeUrl: modalUrl,
-              onMessage: onModalMessage,
-              style: {
-                backgroundColor: "transparent",
-                height: "100%",
-                width: "100%",
-                borderWidth: 0
-              },
-              onError: () => {
-                debug("Format:modalError");
-                resetModal();
-              },
-              onLoad: () => {
-                debug("Format:modalLoad");
-                setModalLoaded(true);
-              }
+          allowsInlineMediaPlayback: true,
+          mediaPlaybackRequiresUserAction: false,
+          javaScriptEnabled: true,
+          domStorageEnabled: true,
+          allowsFullscreenVideo: false,
+          injectedJavaScript: `
+          window.addEventListener("message", function(event) {
+            if (window.ReactNativeWebView && event.data) {
+              // ReactNativeWebView.postMessage only supports string data
+              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
             }
-          )
+          }, false);
+      `,
+          onLoadStart: () => {
+            debug("Format:iframeLoadStart", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onError: () => {
+            debug("Format:iframeError", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onLoad: () => {
+            debug("Format:iframeLoad", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onLoadProgress: () => {
+            debug("Format:iframeLoadProgress", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onHttpError: () => {
+            debug("Format:iframeHttpError", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onRenderProcessGone: () => {
+            debug("Format:iframeRenderProcessGone", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onNavigationStateChange: () => {
+            debug("Format:iframeNavigationStateChange", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          },
+          onContentProcessDidTerminate: () => {
+            debug("Format:iframeContentProcessDidTerminate", {
+              params: {
+                messageId,
+                code,
+                otherParams
+              }
+            });
+          }
         }
       )
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react_native.View,
-      {
-        style: isAdViewVisible ? containerStyles : {
-          height: 0,
-          overflow: "hidden"
-        },
-        ref: containerRef,
-        children: wrapper ? wrapper(inlineContent) : inlineContent
-      }
-    ),
-    interstitialContent
-  ] });
 };
-var FormatWithErrorBoundary = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sdk_react.ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Format, { ...props }) });
-var Format_default = FormatWithErrorBoundary;
+var Format_default = Format;
 
 // src/formats/InlineAd.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var InlineAd = ({ code, messageId, wrapper, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Format_default, { code, messageId, wrapper, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Format_default, { code, messageId, wrapper, ...props });
 };
 var InlineAd_default = InlineAd;
 
@@ -524,14 +294,14 @@ var import_react_native3 = require("react-native");
 var import_react_native_device_info = __toESM(require("react-native-device-info"));
 
 // package.json
-var version = "3.0.7-rc.1";
+var version = "3.0.7-rc.3";
 
 // src/NativeRNKontext.ts
 var import_react_native2 = require("react-native");
 var NativeRNKontext_default = import_react_native2.TurboModuleRegistry.getEnforcing("RNKontext");
 
 // src/context/AdsProvider.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 ErrorUtils.setGlobalHandler((error, isFatal) => {
   if (!isFatal) {
     import_sdk_react2.log.warn(error);
@@ -625,7 +395,7 @@ var getSdk = async () => ({
   version
 });
 var AdsProvider = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sdk_react2.AdsProviderInternal, { ...props, getDevice, getSdk, getApp });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sdk_react2.AdsProviderInternal, { ...props, getDevice, getSdk, getApp });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {