@folklore/ads - npm Package Compare versions

Comparing version 0.0.64 to 0.0.65

dist/cjs.js

@@ -17,2 +17,3 @@ 'use strict';
 var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@folklore/utils');
 var hooks = require('@folklore/hooks');
@@ -48,3 +49,3 @@ var tracking = require('@folklore/tracking');
 
-var propTypes$3 = /*#__PURE__*/Object.freeze({
+var propTypes$4 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -678,3 +679,3 @@ adPath: adPath,
 const useAdsContext = () => React.useContext(AdsContext);
-const propTypes$2 = {
+const propTypes$3 = {
   children: PropTypes__default["default"].node.isRequired,
@@ -694,6 +695,7 @@ defaultSlotPath: PropTypes__default["default"].string,
   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,
@@ -712,2 +714,3 @@ slotsPath: null,
   viewports: viewports,
+  richAdComponents: null,
   disabled: false,
@@ -732,2 +735,3 @@ disableTracking: false
     slots,
+    richAdComponents,
     disabled,
@@ -805,4 +809,5 @@ disableTracking
     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, {
@@ -813,8 +818,8 @@ value: value,
 }
-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,
@@ -825,3 +830,3 @@ // eslint-disable-next-line react/forbid-prop-types
 };
-const defaultProps$1 = {
+const defaultProps$2 = {
   targeting: {
@@ -848,5 +853,31 @@ domain: typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.host}` : null
 }
-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() {
@@ -1045,2 +1076,30 @@ const tracking$1 = tracking.useTracking() || null;
 
+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 = {
@@ -1062,2 +1121,3 @@ slot: PropTypes__default["default"].string.isRequired,
   adClassName: PropTypes__default["default"].string,
+  richAdClassName: PropTypes__default["default"].string,
   onRender: PropTypes__default["default"].func,
@@ -1082,2 +1142,3 @@ onDestroy: PropTypes__default["default"].func,
   adClassName: null,
+  richAdClassName: null,
   onRender: null,
@@ -1104,2 +1165,3 @@ onDestroy: null,
     adClassName,
+    richAdClassName,
     onRender,
@@ -1204,2 +1266,4 @@ onDestroy,
   });
+  const adContainerRef = React.useRef(null);
+  const richAd = useRichAd(adContainerRef, id);
   if (slotRef !== null && isFunction__default["default"](slotRef)) {
@@ -1253,8 +1317,12 @@ slotRef(slotObject);
     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]
     })
@@ -1271,3 +1339,4 @@ });
 exports.AdsTargetingProvider = AdsTargetingProvider;
-exports.PropTypes = propTypes$3;
+exports.PropTypes = propTypes$4;
+exports.RichAd = RichAd;
 exports.buildSizeMappingFromSizes = buildSizeMappingFromSizes;
@@ -1285,2 +1354,3 @@ exports.buildSizeMappingFromViewports = buildSizeMappingFromViewports;
 exports.useAdsTracking = useAdsTracking;
+exports.useRichAd = useRichAd;
 exports.viewports = viewports;

dist/es.js

@@ -12,3 +12,4 @@ import PropTypes from 'prop-types';
 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';
@@ -30,3 +31,3 @@ import { useTracking } from '@folklore/tracking';
 
-var propTypes$3 = /*#__PURE__*/Object.freeze({
+var propTypes$4 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -660,3 +661,3 @@ adPath: adPath,
 const useAdsContext = () => useContext(AdsContext);
-const propTypes$2 = {
+const propTypes$3 = {
   children: PropTypes.node.isRequired,
@@ -676,6 +677,7 @@ defaultSlotPath: PropTypes.string,
   viewports: adViewports,
+  richAdComponents: PropTypes.objectOf(PropTypes.elementType),
   disabled: PropTypes.bool,
   disableTracking: PropTypes.bool
 };
-const defaultProps$2 = {
+const defaultProps$3 = {
   defaultSlotPath: null,
@@ -694,2 +696,3 @@ slotsPath: null,
   viewports: viewports,
+  richAdComponents: null,
   disabled: false,
@@ -714,2 +717,3 @@ disableTracking: false
     slots,
+    richAdComponents,
     disabled,
@@ -787,4 +791,5 @@ disableTracking
     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, {
@@ -795,8 +800,8 @@ value: value,
 }
-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,
@@ -807,3 +812,3 @@ // eslint-disable-next-line react/forbid-prop-types
 };
-const defaultProps$1 = {
+const defaultProps$2 = {
   targeting: {
@@ -830,5 +835,31 @@ domain: typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.host}` : null
 }
-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() {
@@ -1027,2 +1058,30 @@ const tracking = useTracking() || null;
 
+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 = {
@@ -1044,2 +1103,3 @@ slot: PropTypes.string.isRequired,
   adClassName: PropTypes.string,
+  richAdClassName: PropTypes.string,
   onRender: PropTypes.func,
@@ -1064,2 +1124,3 @@ onDestroy: PropTypes.func,
   adClassName: null,
+  richAdClassName: null,
   onRender: null,
@@ -1086,2 +1147,3 @@ onDestroy: null,
     adClassName,
+    richAdClassName,
     onRender,
@@ -1186,2 +1248,4 @@ onDestroy,
   });
+  const adContainerRef = useRef(null);
+  const richAd = useRichAd(adContainerRef, id);
   if (slotRef !== null && isFunction(slotRef)) {
@@ -1235,8 +1299,12 @@ slotRef(slotObject);
     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]
     })
@@ -1248,2 +1316,2 @@ });
 
-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.json

 {
     "name": "@folklore/ads",
-    "version": "0.0.64",
+    "version": "0.0.65",
     "description": "Ads library",
@@ -53,6 +53,7 @@ "keywords": [
     },
-    "gitHead": "774cbc9e93dc59d16e4b503264a3fbe1cca945d3",
+    "gitHead": "c054f8aebebb312df15dbd87158516bbc750855f",
     "dependencies": {
-        "@folklore/hooks": "^0.0.58",
+        "@folklore/hooks": "^0.0.59",
         "@folklore/tracking": "^0.0.23",
+        "@folklore/utils": "^0.1.1",
         "classnames": "^2.5.1",
@@ -59,0 +60,0 @@ "debug": "^4.3.4",

No alert changes

Improved metrics

Total package byte prevSize

81674

increased by5.64%

Lines of code

2559

increased by5.53%

Worsened metrics

Dependency count

10

increased by11.11%

Dependency changes

• + Added@folklore/utils@^0.1.1

• + Added@folklore/hooks@0.0.59(transitive)

• + Added@folklore/utils@0.1.2(transitive)

• + Addedlower-case@2.0.2(transitive)

• + Addedno-case@3.0.4(transitive)

• + Addedpascal-case@3.1.2(transitive)

• + Addedtslib@2.8.1(transitive)

• - Removed@folklore/hooks@0.0.58(transitive)

• Updated@folklore/hooks@^0.0.59