@adview/react 1.0.13 → 1.0.15

package/dist/index.js

@@ -11,76 +11,74 @@ var AdViewProvider = ({ children, ...props }) => {
 var AdViewProvider_default = AdViewProvider;
 
 // src/AdViewUnit/AdViewUnit.client.tsx
-import React8 from "react";
+import React7 from "react";
 
-// src/AdViewUnit/AdViewUnitTracking.tsx
-import { executeImpressionsTracking } from "@adview/core/utils";
-import React2, { 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 React2 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__ */ React2.createElement(
+    "a",
+    {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: getPrepareURL(data.url),
+      className,
+      style: { fontSize: 0, ...style }
     },
-    [views]
+    asset && /* @__PURE__ */ React2.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__ */ React2.createElement("div", { ref: wrapperRef }, children);
 }
-var AdViewUnitTracking_default = AdViewUnitTracking;
-
-// src/AdViewUnit/AdViewUnitWrapper.client.tsx
-import React7 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 React3 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;
   }
@@ -89,7 +87,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: getPrepareURL(url),
+      href: getPrepareURL2(url),
       className: classNames?.imageLink
     },
     asset && /* @__PURE__ */ React3.createElement(
@@ -98,7 +96,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%" }
       }
@@ -108,7 +106,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: getPrepareURL(url),
+      href: getPrepareURL2(url),
       "data-class": "titleLink",
       className: classNames?.titleLink
     },
@@ -118,7 +116,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: getPrepareURL(url),
+      href: getPrepareURL2(url),
       "data-class": "descriptionLink",
       className: classNames?.descriptionLink
     },
@@ -128,7 +126,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: getPrepareURL(url),
+      href: getPrepareURL2(url),
       "data-class": "brandNameLink",
       className: classNames?.brandNameLink
     },
@@ -138,7 +136,7 @@ function AdViewUnitNative({
     {
       target: "_blank",
       rel: "noopener noreferrer",
-      href: getPrepareURL(url),
+      href: getPrepareURL2(url),
       "data-class": "phoneLink",
       className: classNames?.phoneLink
     },
@@ -148,22 +146,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 React4 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;
@@ -171,6 +181,7 @@ function AdViewUnitProxy({
   return /* @__PURE__ */ React4.createElement(
     "iframe",
     {
+      className,
       width: "100%",
       height: "100%",
       frameBorder: "0",
@@ -179,107 +190,152 @@ 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 React5 from "react";
-function AdViewUnitBanner({ assets, url }) {
-  const asset = getAssetByName2("main", assets);
-  return /* @__PURE__ */ React5.createElement("center", null, /* @__PURE__ */ React5.createElement(
-    "a",
-    {
-      target: "_blank",
-      rel: "noopener noreferrer",
-      href: getPrepareURL2(url),
-      className: "banner",
-      style: { fontSize: 0 }
-    },
-    asset && /* @__PURE__ */ React5.createElement(
-      "img",
-      {
-        alt: "main",
-        src: asset.path,
-        srcSet: asset.thumbs ? getSrcSetCSSThumbs2(asset.thumbs) : ""
-      }
-    )
-  ));
-}
-var AdViewUnitBanner_default = AdViewUnitBanner;
-
-// src/AdViewUnit/AdViewUnitTypeSwitch.tsx
-import React6 from "react";
-function AdViewUnitTypeSwitch({
-  data,
-  classNames,
-  onDefault
-}) {
-  switch (data?.type) {
-    case "native":
-      return /* @__PURE__ */ React6.createElement(AdViewUnitNative_default, { ...data, classNames: classNames?.native });
-    case "proxy":
-      return /* @__PURE__ */ React6.createElement(AdViewUnitProxy_default, { ...data, classNames: classNames?.proxy });
-    case "banner":
-      return /* @__PURE__ */ React6.createElement(AdViewUnitBanner_default, { ...data, classNames: classNames?.banner });
-    default:
-      if (React6.isValidElement(onDefault)) {
-        return React6.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 && React5.isValidElement(tmp) ? /* @__PURE__ */ React5.createElement(React5.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 && React5.isValidElement(tmp) ? /* @__PURE__ */ React5.createElement(React5.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 = React7.isValidElement(children);
-  const isChildrenFunction = typeof children === "function";
-  if (isChildrenReactNode) {
-    return React7.cloneElement(children, {
-      data,
-      state,
-      error,
-      onDefault
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, renderedRemplates);
+};
+var renderTemplate = (tmpl, data) => {
+  const isFunction = typeof tmpl === "function";
+  const isReactElement = React5.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 React5.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__ */ React7.createElement(AdViewUnitTypeSwitch_default, { data, onDefault });
+  if (Array.isArray(tmpls)) {
+    return renderTemplates(tmpls, data, listRender);
   }
-  if (React7.isValidElement(onDefault)) {
-    return React7.cloneElement(onDefault);
+  if (typeof tmpls === "function") {
+    return tmpls(data);
   }
-  if (typeof onDefault === "function") {
-    return onDefault();
+  if (React5.isValidElement(tmpls)) {
+    return templateFromListRender([tmpls], data);
   }
   return null;
+};
+var AdViewUnitTemplate = ({ type, state, children, ...props }) => {
+  const tmplProps = {
+    type,
+    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 (!matchExpectedState(expectState, state)) {
+    return null;
+  }
+  if (typeof children === "function") {
+    return children(tmplProps);
+  }
+  if (React5.isValidElement(children)) {
+    return React5.cloneElement(children, tmplProps);
+  }
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null);
+};
+var AdViewUnitTemplate_default = AdViewUnitTemplate;
+
+// src/AdViewUnit/AdViewUnitTracking.tsx
+import { executeImpressionsTracking } from "@adview/core/utils";
+import React6, { 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__ */ React6.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";
@@ -290,13 +346,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,48 +386,83 @@ 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;
+
+// src/AdViewUnit/AdViewUnitDefaultTemplate.tsx
+import React8 from "react";
+function AdViewUnitDefaultTemplate({ type = "default", data, state, children, ...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;
+  }
+  if (typeof children === "function") {
+    return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children({ data, state, ...props }));
+  }
+  return children ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, children) : /* @__PURE__ */ React8.createElement("div", { style: { padding: "1rem", textAlign: "center", color: "#666" } }, /* @__PURE__ */ React8.createElement("p", null, "\u{1F504} Default content for ad unit"), /* @__PURE__ */ React8.createElement("p", null, "Data: ", JSON.stringify(data)), /* @__PURE__ */ React8.createElement("p", null, "State: ", JSON.stringify(state)));
+}
+AdViewUnitDefaultTemplate.defaults = {
+  type: "default"
+};
+var AdViewUnitDefaultTemplate_default = AdViewUnitDefaultTemplate;
 export {
-  AdViewUnitBanner_default as Banner,
-  AdViewUnitNative_default as Native,
+  AdViewProvider_default as AdViewProvider,
+  AdViewUnitBannerTemplate_default as AdViewUnitBannerTemplate,
+  AdViewUnit_client_default as AdViewUnitClient,
+  AdViewUnitDefaultTemplate_default as AdViewUnitDefaultTemplate,
+  AdViewUnitNativeTemplate_default as AdViewUnitNativeTemplate,
+  AdViewUnitProxyTemplate_default as AdViewUnitProxyTemplate,
+  AdViewUnitTemplate_default as AdViewUnitTemplate,
+  AdViewUnitBannerTemplate_default as BannerTemplate,
+  AdViewUnitDefaultTemplate_default as DefaultTemplate,
+  AdViewUnitNativeTemplate_default as NativeTemplate,
   AdViewProvider_default as Provider,
-  AdViewUnitProxy_default as Proxy,
-  AdViewUnitTypeSwitch_default as TypeSwitch,
+  AdViewUnitProxyTemplate_default as ProxyTemplate,
+  AdViewUnitTemplate_default as Template,
   AdViewUnit_client_default as Unit
 };
 //# sourceMappingURL=index.js.map