@adview/react 1.0.13 → 1.0.15

package/dist/AdViewUnit/AdViewUnit.client.js

@@ -3,76 +3,74 @@
 "use client";
 
 // src/AdViewUnit/AdViewUnit.client.tsx
-import React8 from "react";
+import React7 from "react";
 
-// src/AdViewUnit/AdViewUnitTracking.tsx
-import { executeImpressionsTracking } from "@adview/core/utils";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
-function AdViewUnitTracking({
-  impressions,
-  views,
-  clicks,
-  children
-}) {
-  const isServer = typeof window === "undefined";
-  const wrapperRef = useRef(null);
-  const executeImpressionsTrackingHandler = useCallback(
-    () => executeImpressionsTracking(impressions),
-    [impressions]
-  );
-  const trackingObserverInstanceHandler = useCallback(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          executeImpressionsTracking(views);
-          trackingObserverInstance?.unobserve(wrapperRef.current);
-        }
-      });
+// src/AdViewUnit/AdViewUnitBannerTemplate.tsx
+import { getAssetByName, getPrepareURL, getSrcSetCSSThumbs } from "@adview/core/utils";
+import React from "react";
+
+// src/AdViewUnit/utils.ts
+var matchExpectedState = (expectState, state) => {
+  return !expectState || (expectState.isInitial === void 0 || expectState.isInitial === state?.isInitial) && (expectState.isLoading === void 0 || expectState.isLoading === state?.isLoading) && (expectState.isError === void 0 || expectState.isError === state?.isError) && (expectState.isComplete === void 0 || expectState.isComplete === state?.isComplete);
+};
+
+// src/AdViewUnit/AdViewUnitBannerTemplate.tsx
+function AdViewUnitBannerTemplate({ className = "banner", style, data, state, ...props }) {
+  const expectState = props?.isInitial || props?.isLoading || props?.isError || props?.isComplete ? {
+    isInitial: props?.isInitial,
+    isLoading: props?.isLoading,
+    isError: props?.isError,
+    isComplete: props?.isComplete
+  } : { isComplete: true };
+  if (!data || !data.assets || !data.assets.length) {
+    return null;
+  }
+  if (!matchExpectedState(expectState, state)) {
+    return null;
+  }
+  const asset = getAssetByName("main", data.assets);
+  return /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: getPrepareURL(data.url),
+      className,
+      style: { fontSize: 0, ...style }
     },
-    [views]
+    asset && /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        alt: "main",
+        src: asset.path,
+        srcSet: asset.thumbs ? getSrcSetCSSThumbs(asset.thumbs) : ""
+      }
+    )
   );
-  const trackingObserverInstance = useMemo(() => {
-    return !isServer ? new IntersectionObserver(trackingObserverInstanceHandler) : null;
-  }, [isServer, trackingObserverInstanceHandler]);
-  const clickTrackerHandler = useCallback(() => {
-    executeImpressionsTracking(clicks);
-    wrapperRef.current?.removeEventListener("click", clickTrackerHandler);
-  }, [clicks]);
-  useEffect(() => {
-    if (wrapperRef.current && trackingObserverInstance) {
-      executeImpressionsTrackingHandler();
-      wrapperRef.current?.addEventListener("click", clickTrackerHandler);
-      trackingObserverInstance?.observe(wrapperRef.current);
-      return () => {
-        wrapperRef.current?.removeEventListener("click", clickTrackerHandler);
-        if (wrapperRef.current)
-          trackingObserverInstance?.unobserve(wrapperRef.current);
-      };
-    }
-    return () => {
-    };
-  }, [
-    trackingObserverInstance,
-    executeImpressionsTrackingHandler,
-    clickTrackerHandler
-  ]);
-  return /* @__PURE__ */ React.createElement("div", { ref: wrapperRef }, children);
 }
-var AdViewUnitTracking_default = AdViewUnitTracking;
-
-// src/AdViewUnit/AdViewUnitWrapper.client.tsx
-import React6 from "react";
+AdViewUnitBannerTemplate.defaults = {
+  type: "banner"
+};
+var AdViewUnitBannerTemplate_default = AdViewUnitBannerTemplate;
 
-// src/AdViewUnit/AdViewUnitNative.tsx
-import { getAssetByName, getPrepareURL, getSrcSetCSSThumbs } from "@adview/core/utils";
+// src/AdViewUnit/AdViewUnitNativeTemplate.tsx
+import { getAssetByName as getAssetByName2, getPrepareURL as getPrepareURL2, getSrcSetCSSThumbs as getSrcSetCSSThumbs2 } from "@adview/core/utils";
 import React2 from "react";
-function AdViewUnitNative({
-  assets,
-  fields,
-  url,
-  classNames
-}) {
-  const asset = getAssetByName("main", assets);
+function AdViewUnitNativeTemplate({ classNames, data, state, ...props }) {
+  if (!data || !data.assets || !data.assets.length) {
+    return null;
+  }
+  const expectState = props?.isInitial || props?.isLoading || props?.isError || props?.isComplete ? {
+    isInitial: props?.isInitial,
+    isLoading: props?.isLoading,
+    isError: props?.isError,
+    isComplete: props?.isComplete
+  } : { isComplete: true };
+  if (!matchExpectedState(expectState, state)) {
+    return null;
+  }
+  const { assets, url, fields } = data;
+  const asset = getAssetByName2("main", assets);
   if (!url) {
     return null;
   }
@@ -81,7 +79,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: getPrepareURL(url),
+      href: getPrepareURL2(url),
       className: classNames?.imageLink
     },
     asset && /* @__PURE__ */ React2.createElement(
@@ -90,7 +88,7 @@ function AdViewUnitNative({
         alt: fields?.title,
         title: fields?.title,
         src: asset.path,
-        srcSet: asset.thumbs ? getSrcSetCSSThumbs(asset.thumbs) : void 0,
+        srcSet: asset.thumbs ? getSrcSetCSSThumbs2(asset.thumbs) : void 0,
         className: classNames?.image,
         style: { objectFit: "cover", width: "100%", height: "100%" }
       }
@@ -100,7 +98,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: getPrepareURL(url),
+      href: getPrepareURL2(url),
       "data-class": "titleLink",
       className: classNames?.titleLink
     },
@@ -110,7 +108,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: getPrepareURL(url),
+      href: getPrepareURL2(url),
       "data-class": "descriptionLink",
       className: classNames?.descriptionLink
     },
@@ -120,7 +118,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: getPrepareURL(url),
+      href: getPrepareURL2(url),
       "data-class": "brandNameLink",
       className: classNames?.brandNameLink
     },
@@ -130,7 +128,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: getPrepareURL(url),
+      href: getPrepareURL2(url),
       "data-class": "phoneLink",
       className: classNames?.phoneLink
     },
@@ -140,22 +138,34 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: getPrepareURL(url),
+      href: getPrepareURL2(url),
       "data-class": "urlLink",
       className: classNames?.urlLink
     },
     fields?.url
   )));
 }
-var AdViewUnitNative_default = AdViewUnitNative;
+AdViewUnitNativeTemplate.defaults = {
+  type: "native"
+};
+var AdViewUnitNativeTemplate_default = AdViewUnitNativeTemplate;
 
-// src/AdViewUnit/AdViewUnitProxy.tsx
+// src/AdViewUnit/AdViewUnitProxyTemplate.tsx
 import React3 from "react";
-function AdViewUnitProxy({
-  // assets,
-  fields,
-  url
-}) {
+function AdViewUnitProxyTemplate({ className, style, data, state, ...props }) {
+  if (!data) {
+    return null;
+  }
+  const expectState = props?.isInitial || props?.isLoading || props?.isError || props?.isComplete ? {
+    isInitial: props?.isInitial,
+    isLoading: props?.isLoading,
+    isError: props?.isError,
+    isComplete: props?.isComplete
+  } : { isComplete: true };
+  if (!matchExpectedState(expectState, state)) {
+    return null;
+  }
+  const { url, fields } = data;
   const iframeSrc = fields?.url || url;
   if (!iframeSrc) {
     return null;
@@ -163,6 +173,7 @@ function AdViewUnitProxy({
   return /* @__PURE__ */ React3.createElement(
     "iframe",
     {
+      className,
       width: "100%",
       height: "100%",
       frameBorder: "0",
@@ -171,114 +182,135 @@ function AdViewUnitProxy({
       allowTransparency: true,
       scrolling: "no",
       allowFullScreen: true,
-      style: { width: "100%", height: "100%" },
+      style: { width: "100%", height: "100%", border: "none", ...style },
       src: iframeSrc
     }
   );
 }
-var AdViewUnitProxy_default = AdViewUnitProxy;
+AdViewUnitProxyTemplate.defaults = {
+  type: "proxy"
+};
+var AdViewUnitProxyTemplate_default = AdViewUnitProxyTemplate;
 
-// src/AdViewUnit/AdViewUnitBanner.tsx
-import { getAssetByName as getAssetByName2, getPrepareURL as getPrepareURL2, getSrcSetCSSThumbs as getSrcSetCSSThumbs2 } from "@adview/core/utils";
+// src/AdViewUnit/AdViewUnitTemplate.tsx
 import React4 from "react";
-function AdViewUnitBanner({ assets, url }) {
-  const asset = getAssetByName2("main", assets);
-  return /* @__PURE__ */ React4.createElement("center", null, /* @__PURE__ */ React4.createElement(
-    "a",
-    {
-      target: "_blank",
-      rel: "noopener noreferrer",
-      href: getPrepareURL2(url),
-      className: "banner",
-      style: { fontSize: 0 }
-    },
-    asset && /* @__PURE__ */ React4.createElement(
-      "img",
-      {
-        alt: "main",
-        src: asset.path,
-        srcSet: asset.thumbs ? getSrcSetCSSThumbs2(asset.thumbs) : ""
-      }
-    )
-  ));
-}
-var AdViewUnitBanner_default = AdViewUnitBanner;
-
-// src/AdViewUnit/AdViewUnitTypeSwitch.tsx
-import React5 from "react";
-function AdViewUnitTypeSwitch({
-  data,
-  classNames,
-  onDefault
-}) {
-  switch (data?.type) {
-    case "native":
-      return /* @__PURE__ */ React5.createElement(AdViewUnitNative_default, { ...data, classNames: classNames?.native });
-    case "proxy":
-      return /* @__PURE__ */ React5.createElement(AdViewUnitProxy_default, { ...data, classNames: classNames?.proxy });
-    case "banner":
-      return /* @__PURE__ */ React5.createElement(AdViewUnitBanner_default, { ...data, classNames: classNames?.banner });
-    default:
-      if (React5.isValidElement(onDefault)) {
-        return React5.cloneElement(onDefault);
-      }
-      if (typeof onDefault === "function") {
-        return onDefault();
-      }
-      return null;
+var templateFromListRender = (tmpls, data, wrap) => {
+  let renderedRemplates = tmpls.map((tmpl, index) => {
+    let tmp = renderTemplate(tmpl, data);
+    return !!tmp && React4.isValidElement(tmp) ? /* @__PURE__ */ React4.createElement(React4.Fragment, { key: index }, !!wrap ? wrap(tmp) : tmp) : null;
+  }).filter((it) => !!it);
+  if (!renderedRemplates.length) {
+    renderedRemplates = tmpls.map((tmpl, index) => {
+      let tmp = renderTemplate(tmpl, { ...data, type: "default" });
+      return !!tmp && React4.isValidElement(tmp) ? /* @__PURE__ */ React4.createElement(React4.Fragment, { key: index }, !!wrap ? wrap(tmp) : tmp) : null;
+    }).filter((it) => !!it);
   }
-}
-var AdViewUnitTypeSwitch_default = AdViewUnitTypeSwitch;
-
-// src/AdViewUnit/AdViewUnitWrapper.client.tsx
-function AdViewUnitWrapperClient({
-  data,
-  state,
-  error,
-  children,
-  onDefault
-}) {
-  const { isLoading, isError } = state;
-  const isChildrenReactNode = React6.isValidElement(children);
-  const isChildrenFunction = typeof children === "function";
-  if (isChildrenReactNode) {
-    return React6.cloneElement(children, {
-      data,
-      state,
-      error,
-      onDefault
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, renderedRemplates);
+};
+var renderTemplate = (tmpl, data) => {
+  const isFunction = typeof tmpl === "function";
+  const isReactElement = React4.isValidElement(tmpl);
+  if (isReactElement) {
+    let { type, children } = tmpl.props;
+    if (!type && typeof tmpl.type !== "string") {
+      type = tmpl.type?.defaults?.type;
+    }
+    if (data.type !== type) {
+      return null;
+    }
+    if (typeof children === "function") {
+      return children(data);
+    }
+    return React4.cloneElement(tmpl, {
+      ...data,
+      children
     });
   }
-  if (isChildrenFunction) {
-    return children({
-      data,
-      state,
-      error,
-      onDefault
-    });
+  if (isFunction) {
+    return tmpl(data);
   }
-  if (isLoading) {
+  return null;
+};
+var renderTemplates = (tmpls, data, listRender) => {
+  return listRender ? listRender(tmpls) : templateFromListRender(tmpls, data);
+};
+var renderAnyTemplates = (tmpls, data, listRender) => {
+  if (!tmpls) {
     return null;
   }
-  if (!children && !isError && data) {
-    return /* @__PURE__ */ React6.createElement(AdViewUnitTypeSwitch_default, { data, onDefault });
+  if (Array.isArray(tmpls)) {
+    return renderTemplates(tmpls, data, listRender);
   }
-  if (React6.isValidElement(onDefault)) {
-    return React6.cloneElement(onDefault);
+  if (typeof tmpls === "function") {
+    return tmpls(data);
   }
-  if (typeof onDefault === "function") {
-    return onDefault();
+  if (React4.isValidElement(tmpls)) {
+    return templateFromListRender([tmpls], data);
   }
   return null;
+};
+
+// src/AdViewUnit/AdViewUnitTracking.tsx
+import { executeImpressionsTracking } from "@adview/core/utils";
+import React5, { useCallback, useEffect, useMemo, useRef } from "react";
+function AdViewUnitTracking({
+  impressions,
+  views,
+  clicks,
+  children
+}) {
+  const isServer = typeof window === "undefined";
+  const wrapperRef = useRef(null);
+  const executeImpressionsTrackingHandler = useCallback(
+    () => executeImpressionsTracking(impressions),
+    [impressions]
+  );
+  const trackingObserverInstanceHandler = useCallback(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          executeImpressionsTracking(views);
+          trackingObserverInstance?.unobserve(wrapperRef.current);
+        }
+      });
+    },
+    [views]
+  );
+  const trackingObserverInstance = useMemo(() => {
+    return !isServer ? new IntersectionObserver(trackingObserverInstanceHandler) : null;
+  }, [isServer, trackingObserverInstanceHandler]);
+  const clickTrackerHandler = useCallback(() => {
+    executeImpressionsTracking(clicks);
+    wrapperRef.current?.removeEventListener("click", clickTrackerHandler);
+  }, [clicks]);
+  useEffect(() => {
+    if (wrapperRef.current && trackingObserverInstance) {
+      executeImpressionsTrackingHandler();
+      wrapperRef.current?.addEventListener("click", clickTrackerHandler);
+      trackingObserverInstance?.observe(wrapperRef.current);
+      return () => {
+        wrapperRef.current?.removeEventListener("click", clickTrackerHandler);
+        if (wrapperRef.current)
+          trackingObserverInstance?.unobserve(wrapperRef.current);
+      };
+    }
+    return () => {
+    };
+  }, [
+    trackingObserverInstance,
+    executeImpressionsTrackingHandler,
+    clickTrackerHandler
+  ]);
+  return /* @__PURE__ */ React5.createElement("div", { ref: wrapperRef }, children);
 }
-var AdViewUnitWrapper_client_default = AdViewUnitWrapperClient;
+var AdViewUnitTracking_default = AdViewUnitTracking;
 
 // src/AdViewUnit/useAdViewController.ts
 import { adViewFetcher, getAdRequestUrl, getResolveConfig } from "@adview/core/utils";
 import { useContext, useEffect as useEffect2, useState } from "react";
 
 // src/AdViewUnit/AdViewProvider.tsx
-import React7, { createContext } from "react";
+import React6, { createContext } from "react";
 var AdViewProviderContext = createContext(
   {}
 );
@@ -290,13 +322,15 @@ function useAdViewController(adUnitConfig, unitId, format) {
   const [errorMessage, setErrorMessage] = useState(null);
   const globalConfig = useContext(AdViewProviderContext);
   const baseConfig = getResolveConfig({ ...adUnitConfig, ...globalConfig });
-  const requestUrl = getAdRequestUrl(baseConfig, unitId, format);
+  const requestUrl = getAdRequestUrl(
+    baseConfig,
+    unitId,
+    typeof format === "string" ? format : format?.join(",") || ""
+  );
   const loadAd = async () => {
     setAdLoadState("loading");
     try {
-      console.log("Requesting ad data from:", adViewFetcher, "with URL:", requestUrl);
       const response = await adViewFetcher(requestUrl, baseConfig.defaultAdData);
-      console.log("AdViewController response:", response);
       if (response instanceof Error) {
         setAdLoadState("error");
         setErrorMessage(response);
@@ -328,40 +362,42 @@ function AdViewUnitClient({
   unitId,
   format,
   children,
-  onDefault = () => null,
   ...config
 }) {
+  const checkFormat = (f) => {
+    if (!format) {
+      return true;
+    }
+    return Array.isArray(format) ? format.includes(f) : f === format;
+  };
   const [response, error, loadState] = useAdViewController_default(
     config,
     unitId,
     format
   );
-  const responseGroup = error ? null : response?.groups?.[0];
-  const customTracker = responseGroup?.custom_tracker ?? {};
-  const groupItems = responseGroup?.items;
-  if (groupItems && groupItems?.length) {
+  const { responseGroup: _, customTracker, groupItems } = error ? { responseGroup: null, customTracker: {}, groupItems: [] } : (() => {
+    for (let responseGroup of response?.groups || []) {
+      const customTracker2 = responseGroup?.custom_tracker ?? {};
+      const groupItems2 = responseGroup?.items.map((it) => checkFormat(it.type) ? it : null).filter(Boolean);
+      if (groupItems2 && groupItems2.length > 0) {
+        return { responseGroup, customTracker: customTracker2, groupItems: groupItems2 };
+      }
+    }
+    return { responseGroup: null, customTracker: {}, groupItems: [] };
+  })();
+  if (!children) {
+    children = [
+      /* @__PURE__ */ React7.createElement(AdViewUnitBannerTemplate_default, null),
+      /* @__PURE__ */ React7.createElement(AdViewUnitNativeTemplate_default, null),
+      /* @__PURE__ */ React7.createElement(AdViewUnitProxyTemplate_default, null)
+    ];
+  }
+  if (groupItems && groupItems?.length > 0) {
     return groupItems.map(({ tracker, ...data }) => {
-      return /* @__PURE__ */ React8.createElement(AdViewUnitTracking_default, { key: data.id, ...tracker }, /* @__PURE__ */ React8.createElement(
-        AdViewUnitWrapper_client_default,
-        {
-          state: loadState,
-          error,
-          data,
-          onDefault
-        },
-        children
-      ));
+      return /* @__PURE__ */ React7.createElement(AdViewUnitTracking_default, { key: data.id, ...tracker }, renderAnyTemplates(children, { data, type: data.type || "default", error, state: loadState }));
     });
   }
-  return /* @__PURE__ */ React8.createElement(AdViewUnitTracking_default, { ...customTracker }, /* @__PURE__ */ React8.createElement(
-    AdViewUnitWrapper_client_default,
-    {
-      state: loadState,
-      error,
-      onDefault
-    },
-    children
-  ));
+  return /* @__PURE__ */ React7.createElement(AdViewUnitTracking_default, { ...customTracker }, renderAnyTemplates(children, { data: null, type: "default", error, state: loadState }));
 }
 var AdViewUnit_client_default = AdViewUnitClient;
 export {