@folklore/ads 0.0.64 → 0.0.66

package/dist/cjs.js

@@ -14,6 +14,7 @@ var debounce = require('lodash/debounce');
 var createDebug = require('debug');
 var EventEmitter = require('wolfy87-eventemitter');
 var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@folklore/utils');
 var hooks = require('@folklore/hooks');
 var tracking = require('@folklore/tracking');
 
@@ -44,7 +45,7 @@ const adTargeting = PropTypes__default["default"].shape({
   domain: PropTypes__default["default"].string
 });
 
-var propTypes$3 = /*#__PURE__*/Object.freeze({
+var propTypes$4 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     adPath: adPath,
     adSize: adSize,
@@ -673,7 +674,7 @@ const AdsContext = /*#__PURE__*/React__default["default"].createContext({
   ready: false
 });
 const useAdsContext = () => React.useContext(AdsContext);
-const propTypes$2 = {
+const propTypes$3 = {
   children: PropTypes__default["default"].node.isRequired,
   defaultSlotPath: PropTypes__default["default"].string,
   slotsPath: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
@@ -688,10 +689,11 @@ const propTypes$2 = {
   fetchMarginPercent: PropTypes__default["default"].number,
   slots: adSlots,
   viewports: adViewports,
+  richAdComponents: PropTypes__default["default"].objectOf(PropTypes__default["default"].elementType),
   disabled: PropTypes__default["default"].bool,
   disableTracking: PropTypes__default["default"].bool
 };
-const defaultProps$2 = {
+const defaultProps$3 = {
   defaultSlotPath: null,
   slotsPath: null,
   disableSingleRequest: false,
@@ -705,6 +707,7 @@ const defaultProps$2 = {
   fetchMarginPercent: 300,
   slots: slots,
   viewports: viewports,
+  richAdComponents: null,
   disabled: false,
   disableTracking: false
 };
@@ -724,6 +727,7 @@ function AdsProvider(_ref) {
     fetchMarginPercent,
     viewports,
     slots,
+    richAdComponents,
     disabled,
     disableTracking
   } = _ref;
@@ -796,25 +800,26 @@ function AdsProvider(_ref) {
     viewports,
     slots: slotsWithSizeMapping,
     slotsPath: finalSlotsPath,
-    trackingDisabled: disableTracking
-  }), [ready, ads, viewports, slotsWithSizeMapping, finalSlotsPath, disableTracking]);
+    trackingDisabled: disableTracking,
+    richAdComponents
+  }), [ready, ads, viewports, slotsWithSizeMapping, finalSlotsPath, disableTracking, richAdComponents]);
   return /*#__PURE__*/jsxRuntime.jsx(AdsContext.Provider, {
     value: value,
     children: children
   });
 }
-AdsProvider.propTypes = propTypes$2;
-AdsProvider.defaultProps = defaultProps$2;
+AdsProvider.propTypes = propTypes$3;
+AdsProvider.defaultProps = defaultProps$3;
 
 const AdsTargetingContext = /*#__PURE__*/React__default["default"].createContext(null);
 const useAdsTargeting = () => React.useContext(AdsTargetingContext);
-const propTypes$1 = {
+const propTypes$2 = {
   children: PropTypes__default["default"].node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   targeting: PropTypes__default["default"].object,
   replace: PropTypes__default["default"].bool
 };
-const defaultProps$1 = {
+const defaultProps$2 = {
   targeting: {
     domain: typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.host}` : null
   },
@@ -836,8 +841,34 @@ function AdsTargetingProvider(_ref) {
     children: children
   });
 }
-AdsTargetingProvider.propTypes = propTypes$1;
-AdsTargetingProvider.defaultProps = defaultProps$1;
+AdsTargetingProvider.propTypes = propTypes$2;
+AdsTargetingProvider.defaultProps = defaultProps$2;
+
+/* eslint-disable react/jsx-props-no-spreading */
+const propTypes$1 = {
+  richAd: PropTypes__default["default"].shape({
+    type: PropTypes__default["default"].string.isRequired
+  }).isRequired
+};
+const defaultProps$1 = {};
+function RichAd(_ref) {
+  let {
+    richAd
+  } = _ref;
+  const {
+    type = null,
+    ...richAdProps
+  } = richAd;
+  const {
+    richAdComponents = null
+  } = useAdsContext();
+  const RichAdComponent = utils.getComponentFromName(richAdComponents, type);
+  return RichAdComponent !== null ? /*#__PURE__*/jsxRuntime.jsx(RichAdComponent, {
+    ...richAdProps
+  }) : null;
+}
+RichAd.propTypes = propTypes$1;
+RichAd.defaultProps = defaultProps$1;
 
 function useAdsTracking() {
   const tracking$1 = tracking.useTracking() || null;
@@ -1032,6 +1063,34 @@ function useAd(path, size) {
   };
 }
 
+function useRichAd(containerRef, id) {
+  const [richAd, setRichAd] = React.useState(null);
+  React.useEffect(() => {
+    setRichAd(null);
+    window.addEventListener('message', event => {
+      if (event.origin.match(/safeframe\.googlesyndication\.com/) !== null) {
+        let newRichAd = null;
+        try {
+          const eventData = JSON.parse(event.data) || null;
+          newRichAd = eventData !== null ? eventData.richAd || null : null;
+        } catch (e) {}
+        if (newRichAd !== null) {
+          const container = containerRef.current || document;
+          const iframes = container.querySelector('iframe');
+          for (let i = 0; i < iframes.length; i += 1) {
+            const iframe = iframes[i];
+            if (iframe.contentWindow === event.source) {
+              setRichAd(newRichAd);
+              break;
+            }
+          }
+        }
+      }
+    });
+  }, [id]);
+  return richAd;
+}
+
 const propTypes = {
   slot: PropTypes__default["default"].string.isRequired,
   path: adPath,
@@ -1048,6 +1107,7 @@ const propTypes = {
   className: PropTypes__default["default"].string,
   emptyClassName: PropTypes__default["default"].string,
   adClassName: PropTypes__default["default"].string,
+  richAdClassName: PropTypes__default["default"].string,
   onRender: PropTypes__default["default"].func,
   onDestroy: PropTypes__default["default"].func,
   slotRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
@@ -1067,6 +1127,7 @@ const defaultProps = {
   className: null,
   emptyClassName: null,
   adClassName: null,
+  richAdClassName: null,
   onRender: null,
   onDestroy: null,
   slotRef: null
@@ -1088,6 +1149,7 @@ function Ad(_ref) {
     className,
     emptyClassName,
     adClassName,
+    richAdClassName,
     onRender,
     onDestroy,
     slotRef
@@ -1187,6 +1249,8 @@ function Ad(_ref) {
     disabled: finalDisabled,
     disableTracking
   });
+  const adContainerRef = React.useRef(null);
+  const richAd = useRichAd(adContainerRef, id);
   if (slotRef !== null && isFunction__default["default"](slotRef)) {
     slotRef(slotObject);
   } else if (slotRef !== null && isObject__default["default"](slotRef)) {
@@ -1235,12 +1299,16 @@ function Ad(_ref) {
     }]),
     style: !withoutStyle ? containerStyle : null,
     ref: refObserver,
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: adClassName,
       style: adStyle,
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: adContainerRef,
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         id: id
-      })
+      }), isRendered && richAd !== null ? /*#__PURE__*/jsxRuntime.jsx(RichAd, {
+        richAd: richAd,
+        className: richAdClassName
+      }) : null]
     })
   });
 }
@@ -1252,7 +1320,8 @@ exports.AdSlot = AdSlot;
 exports.AdsManager = AdsManager;
 exports.AdsProvider = AdsProvider;
 exports.AdsTargetingProvider = AdsTargetingProvider;
-exports.PropTypes = propTypes$3;
+exports.PropTypes = propTypes$4;
+exports.RichAd = RichAd;
 exports.buildSizeMappingFromSizes = buildSizeMappingFromSizes;
 exports.buildSizeMappingFromViewports = buildSizeMappingFromViewports;
 exports.getAdSizes = getAdSizes;
@@ -1265,4 +1334,5 @@ exports.useAd = useAd;
 exports.useAdsContext = useAdsContext;
 exports.useAdsTargeting = useAdsTargeting;
 exports.useAdsTracking = useAdsTracking;
+exports.useRichAd = useRichAd;
 exports.viewports = viewports;

package/dist/es.js

@@ -9,7 +9,8 @@ import uniqBy from 'lodash/uniqBy';
 import debounce from 'lodash/debounce';
 import createDebug from 'debug';
 import EventEmitter from 'wolfy87-eventemitter';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getComponentFromName } from '@folklore/utils';
 import { useIntersectionObserver, useWindowEvent } from '@folklore/hooks';
 import { useTracking } from '@folklore/tracking';
 
@@ -26,7 +27,7 @@ const adTargeting = PropTypes.shape({
   domain: PropTypes.string
 });
 
-var propTypes$3 = /*#__PURE__*/Object.freeze({
+var propTypes$4 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     adPath: adPath,
     adSize: adSize,
@@ -655,7 +656,7 @@ const AdsContext = /*#__PURE__*/React.createContext({
   ready: false
 });
 const useAdsContext = () => useContext(AdsContext);
-const propTypes$2 = {
+const propTypes$3 = {
   children: PropTypes.node.isRequired,
   defaultSlotPath: PropTypes.string,
   slotsPath: PropTypes.objectOf(PropTypes.string),
@@ -670,10 +671,11 @@ const propTypes$2 = {
   fetchMarginPercent: PropTypes.number,
   slots: adSlots,
   viewports: adViewports,
+  richAdComponents: PropTypes.objectOf(PropTypes.elementType),
   disabled: PropTypes.bool,
   disableTracking: PropTypes.bool
 };
-const defaultProps$2 = {
+const defaultProps$3 = {
   defaultSlotPath: null,
   slotsPath: null,
   disableSingleRequest: false,
@@ -687,6 +689,7 @@ const defaultProps$2 = {
   fetchMarginPercent: 300,
   slots: slots,
   viewports: viewports,
+  richAdComponents: null,
   disabled: false,
   disableTracking: false
 };
@@ -706,6 +709,7 @@ function AdsProvider(_ref) {
     fetchMarginPercent,
     viewports,
     slots,
+    richAdComponents,
     disabled,
     disableTracking
   } = _ref;
@@ -778,25 +782,26 @@ function AdsProvider(_ref) {
     viewports,
     slots: slotsWithSizeMapping,
     slotsPath: finalSlotsPath,
-    trackingDisabled: disableTracking
-  }), [ready, ads, viewports, slotsWithSizeMapping, finalSlotsPath, disableTracking]);
+    trackingDisabled: disableTracking,
+    richAdComponents
+  }), [ready, ads, viewports, slotsWithSizeMapping, finalSlotsPath, disableTracking, richAdComponents]);
   return /*#__PURE__*/jsx(AdsContext.Provider, {
     value: value,
     children: children
   });
 }
-AdsProvider.propTypes = propTypes$2;
-AdsProvider.defaultProps = defaultProps$2;
+AdsProvider.propTypes = propTypes$3;
+AdsProvider.defaultProps = defaultProps$3;
 
 const AdsTargetingContext = /*#__PURE__*/React.createContext(null);
 const useAdsTargeting = () => useContext(AdsTargetingContext);
-const propTypes$1 = {
+const propTypes$2 = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   targeting: PropTypes.object,
   replace: PropTypes.bool
 };
-const defaultProps$1 = {
+const defaultProps$2 = {
   targeting: {
     domain: typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.host}` : null
   },
@@ -818,8 +823,34 @@ function AdsTargetingProvider(_ref) {
     children: children
   });
 }
-AdsTargetingProvider.propTypes = propTypes$1;
-AdsTargetingProvider.defaultProps = defaultProps$1;
+AdsTargetingProvider.propTypes = propTypes$2;
+AdsTargetingProvider.defaultProps = defaultProps$2;
+
+/* eslint-disable react/jsx-props-no-spreading */
+const propTypes$1 = {
+  richAd: PropTypes.shape({
+    type: PropTypes.string.isRequired
+  }).isRequired
+};
+const defaultProps$1 = {};
+function RichAd(_ref) {
+  let {
+    richAd
+  } = _ref;
+  const {
+    type = null,
+    ...richAdProps
+  } = richAd;
+  const {
+    richAdComponents = null
+  } = useAdsContext();
+  const RichAdComponent = getComponentFromName(richAdComponents, type);
+  return RichAdComponent !== null ? /*#__PURE__*/jsx(RichAdComponent, {
+    ...richAdProps
+  }) : null;
+}
+RichAd.propTypes = propTypes$1;
+RichAd.defaultProps = defaultProps$1;
 
 function useAdsTracking() {
   const tracking = useTracking() || null;
@@ -1014,6 +1045,34 @@ function useAd(path, size) {
   };
 }
 
+function useRichAd(containerRef, id) {
+  const [richAd, setRichAd] = useState(null);
+  useEffect(() => {
+    setRichAd(null);
+    window.addEventListener('message', event => {
+      if (event.origin.match(/safeframe\.googlesyndication\.com/) !== null) {
+        let newRichAd = null;
+        try {
+          const eventData = JSON.parse(event.data) || null;
+          newRichAd = eventData !== null ? eventData.richAd || null : null;
+        } catch (e) {}
+        if (newRichAd !== null) {
+          const container = containerRef.current || document;
+          const iframes = container.querySelector('iframe');
+          for (let i = 0; i < iframes.length; i += 1) {
+            const iframe = iframes[i];
+            if (iframe.contentWindow === event.source) {
+              setRichAd(newRichAd);
+              break;
+            }
+          }
+        }
+      }
+    });
+  }, [id]);
+  return richAd;
+}
+
 const propTypes = {
   slot: PropTypes.string.isRequired,
   path: adPath,
@@ -1030,6 +1089,7 @@ const propTypes = {
   className: PropTypes.string,
   emptyClassName: PropTypes.string,
   adClassName: PropTypes.string,
+  richAdClassName: PropTypes.string,
   onRender: PropTypes.func,
   onDestroy: PropTypes.func,
   slotRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
@@ -1049,6 +1109,7 @@ const defaultProps = {
   className: null,
   emptyClassName: null,
   adClassName: null,
+  richAdClassName: null,
   onRender: null,
   onDestroy: null,
   slotRef: null
@@ -1070,6 +1131,7 @@ function Ad(_ref) {
     className,
     emptyClassName,
     adClassName,
+    richAdClassName,
     onRender,
     onDestroy,
     slotRef
@@ -1169,6 +1231,8 @@ function Ad(_ref) {
     disabled: finalDisabled,
     disableTracking
   });
+  const adContainerRef = useRef(null);
+  const richAd = useRichAd(adContainerRef, id);
   if (slotRef !== null && isFunction(slotRef)) {
     slotRef(slotObject);
   } else if (slotRef !== null && isObject(slotRef)) {
@@ -1217,16 +1281,20 @@ function Ad(_ref) {
     }]),
     style: !withoutStyle ? containerStyle : null,
     ref: refObserver,
-    children: /*#__PURE__*/jsx("div", {
+    children: /*#__PURE__*/jsxs("div", {
       className: adClassName,
       style: adStyle,
-      children: /*#__PURE__*/jsx("div", {
+      ref: adContainerRef,
+      children: [/*#__PURE__*/jsx("div", {
         id: id
-      })
+      }), isRendered && richAd !== null ? /*#__PURE__*/jsx(RichAd, {
+        richAd: richAd,
+        className: richAdClassName
+      }) : null]
     })
   });
 }
 Ad.propTypes = propTypes;
 Ad.defaultProps = defaultProps;
 
-export { Ad, AdSlot, AdsManager, AdsProvider, AdsTargetingProvider, propTypes$3 as PropTypes, buildSizeMappingFromSizes, buildSizeMappingFromViewports, getAdSizes, getMinimumAdSize, getSizeMappingFromSlot, getSortedViewports, sizeFitsInViewport, slots, useAd, useAdsContext, useAdsTargeting, useAdsTracking, viewports };
+export { Ad, AdSlot, AdsManager, AdsProvider, AdsTargetingProvider, propTypes$4 as PropTypes, RichAd, buildSizeMappingFromSizes, buildSizeMappingFromViewports, getAdSizes, getMinimumAdSize, getSizeMappingFromSlot, getSortedViewports, sizeFitsInViewport, slots, useAd, useAdsContext, useAdsTargeting, useAdsTracking, useRichAd, viewports };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/ads",
-    "version": "0.0.64",
+    "version": "0.0.66",
     "description": "Ads library",
     "keywords": [
         "javascript",
@@ -50,10 +50,11 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "774cbc9e93dc59d16e4b503264a3fbe1cca945d3",
+    "gitHead": "d94149439914382182ede5e695cc655feb4164e1",
     "dependencies": {
-        "@folklore/hooks": "^0.0.58",
+        "@folklore/hooks": "^0.0.60",
         "@folklore/tracking": "^0.0.23",
+        "@folklore/utils": "^0.1.1",
         "classnames": "^2.5.1",
         "debug": "^4.3.4",
         "lodash": "^4.17.21",