@folklore/ads - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

dist/cjs.js

@@ -10,6 +10,6 @@ 'use strict';
 var React = require('react');
-var debounce = require('lodash/debounce');
 var isArray = require('lodash/isArray');
 var sortBy = require('lodash/sortBy');
 var uniqBy = require('lodash/uniqBy');
+var debounce = require('lodash/debounce');
 var EventEmitter = require('wolfy87-eventemitter');
@@ -28,6 +28,6 @@ var createDebug = require('debug');
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
@@ -874,7 +874,8 @@ var createDebug__default = /*#__PURE__*/_interopDefaultLegacy(createDebug);
         ...event,
-        ...(slot !== null ? slot.getRenderedSize() : null)
+        ...(slot !== null ? slot.getRenderedSize() : null),
+        slot
       };
       setRenderEvent(newRenderEvent);
       if (onRender !== null) {
-        onRender(newRenderEvent, slot);
+        onRender(newRenderEvent);
       }
@@ -925,2 +926,5 @@ const {
   disabled: PropTypes__default["default"].bool,
+  shouldKeepSize: PropTypes__default["default"].bool,
+  withoutStyle: PropTypes__default["default"].bool,
+  withoutMinimumSize: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
@@ -940,2 +944,5 @@ emptyClassName: PropTypes__default["default"].string,
   disabled: false,
+  shouldKeepSize: false,
+  withoutStyle: false,
+  withoutMinimumSize: false,
   className: null,
@@ -957,2 +964,5 @@ emptyClassName: null,
     disabled,
+    shouldKeepSize,
+    withoutStyle,
+    withoutMinimumSize,
     className,
@@ -972,2 +982,3 @@ emptyClassName,
   const finalSizeMapping = sizeMapping || (slot !== null ? slot.sizeMapping || null : null);
+  const minimumSize = React.useMemo(() => getMinimumAdSize(finalSizeMapping !== null ? finalSizeMapping.reduce((allSizes, sizeMap) => [...allSizes, sizeMap[1]], [finalSize]) : finalSize), [finalSizeMapping, finalSize]);
 
@@ -991,2 +1002,23 @@ // Targeting
   }, [allTargeting, refreshInterval]);
+  const lastRenderedSize = React.useRef(null);
+  const wasDisabled = React.useRef(disabled);
+  const onAdRender = React.useCallback(event => {
+    const {
+      isEmpty: newIsEmpty = true
+    } = event || {};
+    const newIsRendered = !newIsEmpty;
+    if (disabled) {
+      wasDisabled.current = true;
+    } else if (!disabled && newIsRendered) {
+      wasDisabled.current = false;
+    }
+    const waitingNextRender = wasDisabled.current && !newIsRendered;
+    const keepSize = shouldKeepSize && (disabled || waitingNextRender) && lastRenderedSize.current !== null;
+    if (onRender !== null) {
+      onRender({
+        ...event,
+        keepSize
+      });
+    }
+  }, [onRender, shouldKeepSize, disabled]);
 
@@ -1000,2 +1032,3 @@ // Create ad
     isEmpty,
+    isRendered,
     refObserver,
@@ -1008,3 +1041,3 @@ slot: slotObject = null
     alwaysRender,
-    onRender,
+    onRender: onAdRender,
     disabled
@@ -1018,8 +1051,43 @@ });
   }
-
-  // Get size
-
+  if (isRendered) {
+    lastRenderedSize.current = {
+      width,
+      height
+    };
+  }
+  if (disabled) {
+    wasDisabled.current = true;
+  } else if (!disabled && isRendered) {
+    wasDisabled.current = false;
+  }
+  const waitingNextRender = wasDisabled.current && !isRendered;
+  const keepSize = shouldKeepSize && (disabled || waitingNextRender) && lastRenderedSize.current !== null;
   if (id === null) {
     return null;
   }
+  let adStyle = null;
+  if (isRendered) {
+    adStyle = {
+      width,
+      height
+    };
+  } else if (shouldKeepSize && (disabled || waitingNextRender)) {
+    adStyle = lastRenderedSize.current;
+  } else if (!withoutMinimumSize) {
+    adStyle = minimumSize;
+  }
+  let containerStyle = null;
+  if (adsDisabled) {
+    containerStyle = {
+      display: 'none',
+      visibility: 'hidden'
+    };
+  } else if (isEmpty && !keepSize) {
+    containerStyle = {
+      height: 0,
+      paddingBottom: 0,
+      overflow: 'hidden',
+      opacity: 0
+    };
+  }
   return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -1030,13 +1098,7 @@ id: id !== null ? `${id}-container` : null,
     }]),
-    style: adsDisabled ? {
-      display: 'none',
-      visibility: 'hidden'
-    } : null,
+    style: !withoutStyle ? containerStyle : null,
     ref: refObserver,
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: adClassName,
-      style: {
-        width,
-        height
-      },
+      style: adStyle,
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -1043,0 +1105,0 @@ id: id

dist/es.js

@@ -6,6 +6,6 @@ import PropTypes from 'prop-types';
 import React, { useContext, useState, useRef, useMemo, useEffect, useCallback } from 'react';
-import debounce from 'lodash/debounce';
 import isArray from 'lodash/isArray';
 import sortBy from 'lodash/sortBy';
 import uniqBy from 'lodash/uniqBy';
+import debounce from 'lodash/debounce';
 import EventEmitter from 'wolfy87-eventemitter';
@@ -855,7 +855,8 @@ import createDebug from 'debug';
         ...event,
-        ...(slot !== null ? slot.getRenderedSize() : null)
+        ...(slot !== null ? slot.getRenderedSize() : null),
+        slot
       };
       setRenderEvent(newRenderEvent);
       if (onRender !== null) {
-        onRender(newRenderEvent, slot);
+        onRender(newRenderEvent);
       }
@@ -906,2 +907,5 @@ const {
   disabled: PropTypes.bool,
+  shouldKeepSize: PropTypes.bool,
+  withoutStyle: PropTypes.bool,
+  withoutMinimumSize: PropTypes.bool,
   className: PropTypes.string,
@@ -921,2 +925,5 @@ emptyClassName: PropTypes.string,
   disabled: false,
+  shouldKeepSize: false,
+  withoutStyle: false,
+  withoutMinimumSize: false,
   className: null,
@@ -938,2 +945,5 @@ emptyClassName: null,
     disabled,
+    shouldKeepSize,
+    withoutStyle,
+    withoutMinimumSize,
     className,
@@ -953,2 +963,3 @@ emptyClassName,
   const finalSizeMapping = sizeMapping || (slot !== null ? slot.sizeMapping || null : null);
+  const minimumSize = useMemo(() => getMinimumAdSize(finalSizeMapping !== null ? finalSizeMapping.reduce((allSizes, sizeMap) => [...allSizes, sizeMap[1]], [finalSize]) : finalSize), [finalSizeMapping, finalSize]);
 
@@ -972,2 +983,23 @@ // Targeting
   }, [allTargeting, refreshInterval]);
+  const lastRenderedSize = useRef(null);
+  const wasDisabled = useRef(disabled);
+  const onAdRender = useCallback(event => {
+    const {
+      isEmpty: newIsEmpty = true
+    } = event || {};
+    const newIsRendered = !newIsEmpty;
+    if (disabled) {
+      wasDisabled.current = true;
+    } else if (!disabled && newIsRendered) {
+      wasDisabled.current = false;
+    }
+    const waitingNextRender = wasDisabled.current && !newIsRendered;
+    const keepSize = shouldKeepSize && (disabled || waitingNextRender) && lastRenderedSize.current !== null;
+    if (onRender !== null) {
+      onRender({
+        ...event,
+        keepSize
+      });
+    }
+  }, [onRender, shouldKeepSize, disabled]);
 
@@ -981,2 +1013,3 @@ // Create ad
     isEmpty,
+    isRendered,
     refObserver,
@@ -989,3 +1022,3 @@ slot: slotObject = null
     alwaysRender,
-    onRender,
+    onRender: onAdRender,
     disabled
@@ -999,8 +1032,43 @@ });
   }
-
-  // Get size
-
+  if (isRendered) {
+    lastRenderedSize.current = {
+      width,
+      height
+    };
+  }
+  if (disabled) {
+    wasDisabled.current = true;
+  } else if (!disabled && isRendered) {
+    wasDisabled.current = false;
+  }
+  const waitingNextRender = wasDisabled.current && !isRendered;
+  const keepSize = shouldKeepSize && (disabled || waitingNextRender) && lastRenderedSize.current !== null;
   if (id === null) {
     return null;
   }
+  let adStyle = null;
+  if (isRendered) {
+    adStyle = {
+      width,
+      height
+    };
+  } else if (shouldKeepSize && (disabled || waitingNextRender)) {
+    adStyle = lastRenderedSize.current;
+  } else if (!withoutMinimumSize) {
+    adStyle = minimumSize;
+  }
+  let containerStyle = null;
+  if (adsDisabled) {
+    containerStyle = {
+      display: 'none',
+      visibility: 'hidden'
+    };
+  } else if (isEmpty && !keepSize) {
+    containerStyle = {
+      height: 0,
+      paddingBottom: 0,
+      overflow: 'hidden',
+      opacity: 0
+    };
+  }
   return /*#__PURE__*/jsx("div", {
@@ -1011,13 +1079,7 @@ id: id !== null ? `${id}-container` : null,
     }]),
-    style: adsDisabled ? {
-      display: 'none',
-      visibility: 'hidden'
-    } : null,
+    style: !withoutStyle ? containerStyle : null,
     ref: refObserver,
     children: /*#__PURE__*/jsx("div", {
       className: adClassName,
-      style: {
-        width,
-        height
-      },
+      style: adStyle,
       children: /*#__PURE__*/jsx("div", {
@@ -1024,0 +1086,0 @@ id: id

package.json

 {
     "name": "@folklore/ads",
-    "version": "0.0.13",
+    "version": "0.0.14",
     "description": "Ads library",
@@ -53,3 +53,3 @@ "keywords": [
     },
-    "gitHead": "9888055874220611cb49266e2d6943747a783946",
+    "gitHead": "979144c5a475f77dbfb74a4f351166fec318c6c2",
     "dependencies": {
@@ -56,0 +56,0 @@ "@folklore/hooks": "^0.0.41",

No alert changes

Improved metrics

Total package byte prevSize

67442

increased by6.55%

Lines of code

2141

increased by6.36%

No dependency changes