@adview/react 1.0.13 → 1.0.15

package/dist/AdViewUnit/AdViewUnit.client.cjs

@@ -36,76 +36,74 @@ __export(AdViewUnit_client_exports, {
   default: () => AdViewUnit_client_default
 });
 module.exports = __toCommonJS(AdViewUnit_client_exports);
-var import_react9 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
 
-// src/AdViewUnit/AdViewUnitTracking.tsx
+// src/AdViewUnit/AdViewUnitBannerTemplate.tsx
 var import_utils = require("@adview/core/utils");
 var import_react = __toESM(require("react"), 1);
-function AdViewUnitTracking({
-  impressions,
-  views,
-  clicks,
-  children
-}) {
-  const isServer = typeof window === "undefined";
-  const wrapperRef = (0, import_react.useRef)(null);
-  const executeImpressionsTrackingHandler = (0, import_react.useCallback)(
-    () => (0, import_utils.executeImpressionsTracking)(impressions),
-    [impressions]
-  );
-  const trackingObserverInstanceHandler = (0, import_react.useCallback)(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          (0, import_utils.executeImpressionsTracking)(views);
-          trackingObserverInstance?.unobserve(wrapperRef.current);
-        }
-      });
+
+// 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 = (0, import_utils.getAssetByName)("main", data.assets);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "a",
+    {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: (0, import_utils.getPrepareURL)(data.url),
+      className,
+      style: { fontSize: 0, ...style }
     },
-    [views]
+    asset && /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        alt: "main",
+        src: asset.path,
+        srcSet: asset.thumbs ? (0, import_utils.getSrcSetCSSThumbs)(asset.thumbs) : ""
+      }
+    )
   );
-  const trackingObserverInstance = (0, import_react.useMemo)(() => {
-    return !isServer ? new IntersectionObserver(trackingObserverInstanceHandler) : null;
-  }, [isServer, trackingObserverInstanceHandler]);
-  const clickTrackerHandler = (0, import_react.useCallback)(() => {
-    (0, import_utils.executeImpressionsTracking)(clicks);
-    wrapperRef.current?.removeEventListener("click", clickTrackerHandler);
-  }, [clicks]);
-  (0, import_react.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__ */ import_react.default.createElement("div", { ref: wrapperRef }, children);
 }
-var AdViewUnitTracking_default = AdViewUnitTracking;
-
-// src/AdViewUnit/AdViewUnitWrapper.client.tsx
-var import_react6 = __toESM(require("react"), 1);
+AdViewUnitBannerTemplate.defaults = {
+  type: "banner"
+};
+var AdViewUnitBannerTemplate_default = AdViewUnitBannerTemplate;
 
-// src/AdViewUnit/AdViewUnitNative.tsx
-var import_utils2 = require("@adview/core/utils");
+// src/AdViewUnit/AdViewUnitNativeTemplate.tsx
+var import_utils3 = require("@adview/core/utils");
 var import_react2 = __toESM(require("react"), 1);
-function AdViewUnitNative({
-  assets,
-  fields,
-  url,
-  classNames
-}) {
-  const asset = (0, import_utils2.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 = (0, import_utils3.getAssetByName)("main", assets);
   if (!url) {
     return null;
   }
@@ -114,7 +112,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: (0, import_utils2.getPrepareURL)(url),
+      href: (0, import_utils3.getPrepareURL)(url),
       className: classNames?.imageLink
     },
     asset && /* @__PURE__ */ import_react2.default.createElement(
@@ -123,7 +121,7 @@ function AdViewUnitNative({
         alt: fields?.title,
         title: fields?.title,
         src: asset.path,
-        srcSet: asset.thumbs ? (0, import_utils2.getSrcSetCSSThumbs)(asset.thumbs) : void 0,
+        srcSet: asset.thumbs ? (0, import_utils3.getSrcSetCSSThumbs)(asset.thumbs) : void 0,
         className: classNames?.image,
         style: { objectFit: "cover", width: "100%", height: "100%" }
       }
@@ -133,7 +131,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: (0, import_utils2.getPrepareURL)(url),
+      href: (0, import_utils3.getPrepareURL)(url),
       "data-class": "titleLink",
       className: classNames?.titleLink
     },
@@ -143,7 +141,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: (0, import_utils2.getPrepareURL)(url),
+      href: (0, import_utils3.getPrepareURL)(url),
       "data-class": "descriptionLink",
       className: classNames?.descriptionLink
     },
@@ -153,7 +151,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: (0, import_utils2.getPrepareURL)(url),
+      href: (0, import_utils3.getPrepareURL)(url),
       "data-class": "brandNameLink",
       className: classNames?.brandNameLink
     },
@@ -163,7 +161,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: (0, import_utils2.getPrepareURL)(url),
+      href: (0, import_utils3.getPrepareURL)(url),
       "data-class": "phoneLink",
       className: classNames?.phoneLink
     },
@@ -173,22 +171,34 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: (0, import_utils2.getPrepareURL)(url),
+      href: (0, import_utils3.getPrepareURL)(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
 var import_react3 = __toESM(require("react"), 1);
-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;
@@ -196,6 +206,7 @@ function AdViewUnitProxy({
   return /* @__PURE__ */ import_react3.default.createElement(
     "iframe",
     {
+      className,
       width: "100%",
       height: "100%",
       frameBorder: "0",
@@ -204,132 +215,155 @@ 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
-var import_utils3 = require("@adview/core/utils");
+// src/AdViewUnit/AdViewUnitTemplate.tsx
 var import_react4 = __toESM(require("react"), 1);
-function AdViewUnitBanner({ assets, url }) {
-  const asset = (0, import_utils3.getAssetByName)("main", assets);
-  return /* @__PURE__ */ import_react4.default.createElement("center", null, /* @__PURE__ */ import_react4.default.createElement(
-    "a",
-    {
-      target: "_blank",
-      rel: "noopener noreferrer",
-      href: (0, import_utils3.getPrepareURL)(url),
-      className: "banner",
-      style: { fontSize: 0 }
-    },
-    asset && /* @__PURE__ */ import_react4.default.createElement(
-      "img",
-      {
-        alt: "main",
-        src: asset.path,
-        srcSet: asset.thumbs ? (0, import_utils3.getSrcSetCSSThumbs)(asset.thumbs) : ""
-      }
-    )
-  ));
-}
-var AdViewUnitBanner_default = AdViewUnitBanner;
-
-// src/AdViewUnit/AdViewUnitTypeSwitch.tsx
-var import_react5 = __toESM(require("react"), 1);
-function AdViewUnitTypeSwitch({
-  data,
-  classNames,
-  onDefault
-}) {
-  switch (data?.type) {
-    case "native":
-      return /* @__PURE__ */ import_react5.default.createElement(AdViewUnitNative_default, { ...data, classNames: classNames?.native });
-    case "proxy":
-      return /* @__PURE__ */ import_react5.default.createElement(AdViewUnitProxy_default, { ...data, classNames: classNames?.proxy });
-    case "banner":
-      return /* @__PURE__ */ import_react5.default.createElement(AdViewUnitBanner_default, { ...data, classNames: classNames?.banner });
-    default:
-      if (import_react5.default.isValidElement(onDefault)) {
-        return import_react5.default.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 && import_react4.default.isValidElement(tmp) ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.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 && import_react4.default.isValidElement(tmp) ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.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 = import_react6.default.isValidElement(children);
-  const isChildrenFunction = typeof children === "function";
-  if (isChildrenReactNode) {
-    return import_react6.default.cloneElement(children, {
-      data,
-      state,
-      error,
-      onDefault
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, renderedRemplates);
+};
+var renderTemplate = (tmpl, data) => {
+  const isFunction = typeof tmpl === "function";
+  const isReactElement = import_react4.default.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 import_react4.default.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__ */ import_react6.default.createElement(AdViewUnitTypeSwitch_default, { data, onDefault });
+  if (Array.isArray(tmpls)) {
+    return renderTemplates(tmpls, data, listRender);
   }
-  if (import_react6.default.isValidElement(onDefault)) {
-    return import_react6.default.cloneElement(onDefault);
+  if (typeof tmpls === "function") {
+    return tmpls(data);
   }
-  if (typeof onDefault === "function") {
-    return onDefault();
+  if (import_react4.default.isValidElement(tmpls)) {
+    return templateFromListRender([tmpls], data);
   }
   return null;
+};
+
+// src/AdViewUnit/AdViewUnitTracking.tsx
+var import_utils7 = require("@adview/core/utils");
+var import_react5 = __toESM(require("react"), 1);
+function AdViewUnitTracking({
+  impressions,
+  views,
+  clicks,
+  children
+}) {
+  const isServer = typeof window === "undefined";
+  const wrapperRef = (0, import_react5.useRef)(null);
+  const executeImpressionsTrackingHandler = (0, import_react5.useCallback)(
+    () => (0, import_utils7.executeImpressionsTracking)(impressions),
+    [impressions]
+  );
+  const trackingObserverInstanceHandler = (0, import_react5.useCallback)(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          (0, import_utils7.executeImpressionsTracking)(views);
+          trackingObserverInstance?.unobserve(wrapperRef.current);
+        }
+      });
+    },
+    [views]
+  );
+  const trackingObserverInstance = (0, import_react5.useMemo)(() => {
+    return !isServer ? new IntersectionObserver(trackingObserverInstanceHandler) : null;
+  }, [isServer, trackingObserverInstanceHandler]);
+  const clickTrackerHandler = (0, import_react5.useCallback)(() => {
+    (0, import_utils7.executeImpressionsTracking)(clicks);
+    wrapperRef.current?.removeEventListener("click", clickTrackerHandler);
+  }, [clicks]);
+  (0, import_react5.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__ */ import_react5.default.createElement("div", { ref: wrapperRef }, children);
 }
-var AdViewUnitWrapper_client_default = AdViewUnitWrapperClient;
+var AdViewUnitTracking_default = AdViewUnitTracking;
 
 // src/AdViewUnit/useAdViewController.ts
-var import_utils4 = require("@adview/core/utils");
-var import_react8 = require("react");
+var import_utils8 = require("@adview/core/utils");
+var import_react7 = require("react");
 
 // src/AdViewUnit/AdViewProvider.tsx
-var import_react7 = __toESM(require("react"), 1);
-var AdViewProviderContext = (0, import_react7.createContext)(
+var import_react6 = __toESM(require("react"), 1);
+var AdViewProviderContext = (0, import_react6.createContext)(
   {}
 );
 
 // src/AdViewUnit/useAdViewController.ts
 function useAdViewController(adUnitConfig, unitId, format) {
-  const [adLoadState, setAdLoadState] = (0, import_react8.useState)("initial");
-  const [adData, setAdData] = (0, import_react8.useState)(null);
-  const [errorMessage, setErrorMessage] = (0, import_react8.useState)(null);
-  const globalConfig = (0, import_react8.useContext)(AdViewProviderContext);
-  const baseConfig = (0, import_utils4.getResolveConfig)({ ...adUnitConfig, ...globalConfig });
-  const requestUrl = (0, import_utils4.getAdRequestUrl)(baseConfig, unitId, format);
+  const [adLoadState, setAdLoadState] = (0, import_react7.useState)("initial");
+  const [adData, setAdData] = (0, import_react7.useState)(null);
+  const [errorMessage, setErrorMessage] = (0, import_react7.useState)(null);
+  const globalConfig = (0, import_react7.useContext)(AdViewProviderContext);
+  const baseConfig = (0, import_utils8.getResolveConfig)({ ...adUnitConfig, ...globalConfig });
+  const requestUrl = (0, import_utils8.getAdRequestUrl)(
+    baseConfig,
+    unitId,
+    typeof format === "string" ? format : format?.join(",") || ""
+  );
   const loadAd = async () => {
     setAdLoadState("loading");
     try {
-      console.log("Requesting ad data from:", import_utils4.adViewFetcher, "with URL:", requestUrl);
-      const response = await (0, import_utils4.adViewFetcher)(requestUrl, baseConfig.defaultAdData);
-      console.log("AdViewController response:", response);
+      const response = await (0, import_utils8.adViewFetcher)(requestUrl, baseConfig.defaultAdData);
       if (response instanceof Error) {
         setAdLoadState("error");
         setErrorMessage(response);
@@ -349,7 +383,7 @@ function useAdViewController(adUnitConfig, unitId, format) {
     isComplete: adLoadState === "complete",
     isError: adLoadState === "error"
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     loadAd();
   }, []);
   return [adData, errorMessage, loadState];
@@ -361,40 +395,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__ */ import_react8.default.createElement(AdViewUnitBannerTemplate_default, null),
+      /* @__PURE__ */ import_react8.default.createElement(AdViewUnitNativeTemplate_default, null),
+      /* @__PURE__ */ import_react8.default.createElement(AdViewUnitProxyTemplate_default, null)
+    ];
+  }
+  if (groupItems && groupItems?.length > 0) {
     return groupItems.map(({ tracker, ...data }) => {
-      return /* @__PURE__ */ import_react9.default.createElement(AdViewUnitTracking_default, { key: data.id, ...tracker }, /* @__PURE__ */ import_react9.default.createElement(
-        AdViewUnitWrapper_client_default,
-        {
-          state: loadState,
-          error,
-          data,
-          onDefault
-        },
-        children
-      ));
+      return /* @__PURE__ */ import_react8.default.createElement(AdViewUnitTracking_default, { key: data.id, ...tracker }, renderAnyTemplates(children, { data, type: data.type || "default", error, state: loadState }));
     });
   }
-  return /* @__PURE__ */ import_react9.default.createElement(AdViewUnitTracking_default, { ...customTracker }, /* @__PURE__ */ import_react9.default.createElement(
-    AdViewUnitWrapper_client_default,
-    {
-      state: loadState,
-      error,
-      onDefault
-    },
-    children
-  ));
+  return /* @__PURE__ */ import_react8.default.createElement(AdViewUnitTracking_default, { ...customTracker }, renderAnyTemplates(children, { data: null, type: "default", error, state: loadState }));
 }
 var AdViewUnit_client_default = AdViewUnitClient;
 //# sourceMappingURL=AdViewUnit.client.cjs.map