@folklore/ads 0.0.8 → 0.0.10

package/dist/cjs.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var PropTypes = require('prop-types');
 var classNames = require('classnames');
+var isFunction = require('lodash/isFunction');
+var isObject = require('lodash/isObject');
 var React = require('react');
+var debounce = require('lodash/debounce');
 var isArray = require('lodash/isArray');
 var uniqBy = require('lodash/uniqBy');
 var sortBy = require('lodash/sortBy');
-var debounce = require('lodash/debounce');
 var EventEmitter = require('wolfy87-eventemitter');
-var isObject = require('lodash/isObject');
 var createDebug = require('debug');
 var jsxRuntime = require('react/jsx-runtime');
 var hooks = require('@folklore/hooks');
@@ -20,13 +21,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
+var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
 var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
-var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var createDebug__default = /*#__PURE__*/_interopDefaultLegacy(createDebug);
 
 const adPath = PropTypes__default["default"].string;
@@ -704,7 +706,13 @@ function AdsProvider(_ref) {
     ready,
     ads,
     viewports,
-    slots,
+    slots: Object.keys(slots || {}).reduce((map, key) => ({
+      ...map,
+      [key]: {
+        sizeMapping: getSizeMappingFromSlot(slots[key], viewports),
+        ...slots[key]
+      }
+    }), {}),
     slotsPath: defaultSlotPath !== null ? {
       default: defaultSlotPath,
       ...slotsPath
@@ -859,17 +867,21 @@ function useAd(path, size) {
       return () => {};
     }
     const onSlotRender = event => {
-      setRenderEvent(event);
+      const newRenderEvent = {
+        ...event,
+        ...(slot !== null ? slot.getRenderedSize() : null)
+      };
+      setRenderEvent(newRenderEvent);
       if (onRender !== null) {
-        onRender(event);
+        onRender(newRenderEvent, slot);
       }
       const {
         isEmpty = true
-      } = event || {};
+      } = newRenderEvent || {};
       if (isEmpty) {
         track('Empty', slot);
       } else {
-        track('Render', slot, event);
+        track('Render', slot, newRenderEvent);
       }
     };
     slot.on('render', onSlotRender);
@@ -885,6 +897,7 @@ function useAd(path, size) {
   }, []);
   return {
     refObserver,
+    slot,
     disabled: adsManager.isDisabled(),
     id: slot !== null ? slot.getElementId() : null,
     isRendered: slot !== null && slot.isRendered(),
@@ -909,7 +922,8 @@ const propTypes = {
   className: PropTypes__default["default"].string,
   emptyClassName: PropTypes__default["default"].string,
   adClassName: PropTypes__default["default"].string,
-  onRender: PropTypes__default["default"].func
+  onRender: PropTypes__default["default"].func,
+  slotRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
 const defaultProps = {
   path: null,
@@ -922,7 +936,8 @@ const defaultProps = {
   className: null,
   emptyClassName: null,
   adClassName: null,
-  onRender: null
+  onRender: null,
+  slotRef: null
 };
 function Ad(_ref) {
   let {
@@ -937,20 +952,20 @@ function Ad(_ref) {
     className,
     emptyClassName,
     adClassName,
-    onRender
+    onRender,
+    slotRef
   } = _ref;
   const {
-    viewports,
-    slots,
-    slotsPath
+    slots = null,
+    slotsPath = {}
   } = useAdsContext();
-  const slot = slotName !== null ? slots[slotName] || null : null;
-  const finalPath = path || (slotName !== null ? slotsPath[slotName] : null) || slotsPath.default;
-  const finalSize = size !== null ? size : slot.size;
+  const slot = slotName !== null && slots !== null ? slots[slotName] || null : null;
+  const finalPath = path || (slot !== null ? slot.path || null : null) || (slotName !== null ? slotsPath[slotName] : null) || slotsPath.default || null;
+  const finalSize = size || (slot !== null ? slot.size || null : null);
+  const finalSizeMapping = sizeMapping || (slot !== null ? slot.sizeMapping || null : null);
 
   // Targeting
   const contextTargeting = useAdsTargeting();
-  const finalSizeMapping = React.useMemo(() => sizeMapping !== null ? sizeMapping : getSizeMappingFromSlot(slot, viewports), [sizeMapping, slot, viewports]);
   const allTargeting = React.useMemo(() => contextTargeting !== null || targeting !== null || slotName !== null ? {
     slot: slotName,
     ...contextTargeting,
@@ -974,8 +989,8 @@ function Ad(_ref) {
     width,
     height,
     isEmpty,
-    isRendered,
-    refObserver
+    refObserver,
+    slot: slotObject = null
   } = useAd(finalPath, finalSize, {
     sizeMapping: finalSizeMapping,
     targeting: finalAdTargeting.targeting,
@@ -984,50 +999,34 @@ function Ad(_ref) {
     onRender,
     disabled
   });
+  if (slotRef !== null && isFunction__default["default"](slotRef)) {
+    slotRef(slotObject);
+  } else if (slotRef !== null && isObject__default["default"](slotRef)) {
+    // eslint-disable-next-line no-param-reassign
+    slotRef.current = slotObject;
+  }
 
   // Get size
-  const lastRenderedSize = React.useRef(null);
-  const wasDisabled = React.useRef(disabled);
-  const waitingNextRender = React.useMemo(() => {
-    if (disabled) {
-      wasDisabled.current = true;
-    } else if (!disabled && isRendered) {
-      wasDisabled.current = false;
-    }
-    return wasDisabled.current && !isRendered;
-  }, [isRendered]);
-  const sizeStyle = React.useMemo(() => {
-    if (disabled || waitingNextRender) {
-      return lastRenderedSize.current;
-    }
-    const {
-      width: minimumWidth,
-      height: minimumHeight
-    } = getMinimumAdSize(finalSizeMapping !== null ? finalSizeMapping.reduce((allSizes, sizeMap) => [...allSizes, sizeMap[1]], [finalSize]) : finalSize);
-    if (isRendered) {
-      lastRenderedSize.current = !isEmpty ? {
-        width,
-        height
-      } : null;
-    }
-    return {
-      width: isRendered ? width : minimumWidth,
-      height: isRendered ? height : minimumHeight
-    };
-  }, [id, disabled, finalSize, finalSizeMapping, width, height, isRendered, isEmpty]);
-  const keepSize = (disabled || waitingNextRender) && lastRenderedSize.current !== null;
-  if (id === null && !keepSize) {
+
+  if (id === null) {
     return null;
   }
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     id: id !== null ? `${id}-container` : null,
     className: classNames__default["default"]([className, {
-      [emptyClassName]: emptyClassName !== null && isEmpty && !keepSize
+      [emptyClassName]: emptyClassName !== null && isEmpty
     }]),
+    style: adsDisabled ? {
+      display: 'none',
+      visibility: 'hidden'
+    } : null,
     ref: refObserver,
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: adClassName,
-      style: sizeStyle,
+      style: {
+        width,
+        height
+      },
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         id: id
       })

package/dist/es.js

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import isFunction from 'lodash/isFunction';
+import isObject from 'lodash/isObject';
 import React, { useContext, useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import debounce from 'lodash/debounce';
 import isArray from 'lodash/isArray';
 import uniqBy from 'lodash/uniqBy';
 import sortBy from 'lodash/sortBy';
-import debounce from 'lodash/debounce';
 import EventEmitter from 'wolfy87-eventemitter';
-import isObject from 'lodash/isObject';
 import createDebug from 'debug';
 import { jsx } from 'react/jsx-runtime';
 import { useIntersectionObserver, useWindowEvent } from '@folklore/hooks';
@@ -687,7 +688,13 @@ function AdsProvider(_ref) {
     ready,
     ads,
     viewports,
-    slots,
+    slots: Object.keys(slots || {}).reduce((map, key) => ({
+      ...map,
+      [key]: {
+        sizeMapping: getSizeMappingFromSlot(slots[key], viewports),
+        ...slots[key]
+      }
+    }), {}),
     slotsPath: defaultSlotPath !== null ? {
       default: defaultSlotPath,
       ...slotsPath
@@ -842,17 +849,21 @@ function useAd(path, size) {
       return () => {};
     }
     const onSlotRender = event => {
-      setRenderEvent(event);
+      const newRenderEvent = {
+        ...event,
+        ...(slot !== null ? slot.getRenderedSize() : null)
+      };
+      setRenderEvent(newRenderEvent);
       if (onRender !== null) {
-        onRender(event);
+        onRender(newRenderEvent, slot);
       }
       const {
         isEmpty = true
-      } = event || {};
+      } = newRenderEvent || {};
       if (isEmpty) {
         track('Empty', slot);
       } else {
-        track('Render', slot, event);
+        track('Render', slot, newRenderEvent);
       }
     };
     slot.on('render', onSlotRender);
@@ -868,6 +879,7 @@ function useAd(path, size) {
   }, []);
   return {
     refObserver,
+    slot,
     disabled: adsManager.isDisabled(),
     id: slot !== null ? slot.getElementId() : null,
     isRendered: slot !== null && slot.isRendered(),
@@ -892,7 +904,8 @@ const propTypes = {
   className: PropTypes.string,
   emptyClassName: PropTypes.string,
   adClassName: PropTypes.string,
-  onRender: PropTypes.func
+  onRender: PropTypes.func,
+  slotRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 const defaultProps = {
   path: null,
@@ -905,7 +918,8 @@ const defaultProps = {
   className: null,
   emptyClassName: null,
   adClassName: null,
-  onRender: null
+  onRender: null,
+  slotRef: null
 };
 function Ad(_ref) {
   let {
@@ -920,20 +934,20 @@ function Ad(_ref) {
     className,
     emptyClassName,
     adClassName,
-    onRender
+    onRender,
+    slotRef
   } = _ref;
   const {
-    viewports,
-    slots,
-    slotsPath
+    slots = null,
+    slotsPath = {}
   } = useAdsContext();
-  const slot = slotName !== null ? slots[slotName] || null : null;
-  const finalPath = path || (slotName !== null ? slotsPath[slotName] : null) || slotsPath.default;
-  const finalSize = size !== null ? size : slot.size;
+  const slot = slotName !== null && slots !== null ? slots[slotName] || null : null;
+  const finalPath = path || (slot !== null ? slot.path || null : null) || (slotName !== null ? slotsPath[slotName] : null) || slotsPath.default || null;
+  const finalSize = size || (slot !== null ? slot.size || null : null);
+  const finalSizeMapping = sizeMapping || (slot !== null ? slot.sizeMapping || null : null);
 
   // Targeting
   const contextTargeting = useAdsTargeting();
-  const finalSizeMapping = useMemo(() => sizeMapping !== null ? sizeMapping : getSizeMappingFromSlot(slot, viewports), [sizeMapping, slot, viewports]);
   const allTargeting = useMemo(() => contextTargeting !== null || targeting !== null || slotName !== null ? {
     slot: slotName,
     ...contextTargeting,
@@ -957,8 +971,8 @@ function Ad(_ref) {
     width,
     height,
     isEmpty,
-    isRendered,
-    refObserver
+    refObserver,
+    slot: slotObject = null
   } = useAd(finalPath, finalSize, {
     sizeMapping: finalSizeMapping,
     targeting: finalAdTargeting.targeting,
@@ -967,50 +981,34 @@ function Ad(_ref) {
     onRender,
     disabled
   });
+  if (slotRef !== null && isFunction(slotRef)) {
+    slotRef(slotObject);
+  } else if (slotRef !== null && isObject(slotRef)) {
+    // eslint-disable-next-line no-param-reassign
+    slotRef.current = slotObject;
+  }
 
   // Get size
-  const lastRenderedSize = useRef(null);
-  const wasDisabled = useRef(disabled);
-  const waitingNextRender = useMemo(() => {
-    if (disabled) {
-      wasDisabled.current = true;
-    } else if (!disabled && isRendered) {
-      wasDisabled.current = false;
-    }
-    return wasDisabled.current && !isRendered;
-  }, [isRendered]);
-  const sizeStyle = useMemo(() => {
-    if (disabled || waitingNextRender) {
-      return lastRenderedSize.current;
-    }
-    const {
-      width: minimumWidth,
-      height: minimumHeight
-    } = getMinimumAdSize(finalSizeMapping !== null ? finalSizeMapping.reduce((allSizes, sizeMap) => [...allSizes, sizeMap[1]], [finalSize]) : finalSize);
-    if (isRendered) {
-      lastRenderedSize.current = !isEmpty ? {
-        width,
-        height
-      } : null;
-    }
-    return {
-      width: isRendered ? width : minimumWidth,
-      height: isRendered ? height : minimumHeight
-    };
-  }, [id, disabled, finalSize, finalSizeMapping, width, height, isRendered, isEmpty]);
-  const keepSize = (disabled || waitingNextRender) && lastRenderedSize.current !== null;
-  if (id === null && !keepSize) {
+
+  if (id === null) {
     return null;
   }
   return /*#__PURE__*/jsx("div", {
     id: id !== null ? `${id}-container` : null,
     className: classNames([className, {
-      [emptyClassName]: emptyClassName !== null && isEmpty && !keepSize
+      [emptyClassName]: emptyClassName !== null && isEmpty
     }]),
+    style: adsDisabled ? {
+      display: 'none',
+      visibility: 'hidden'
+    } : null,
     ref: refObserver,
     children: /*#__PURE__*/jsx("div", {
       className: adClassName,
-      style: sizeStyle,
+      style: {
+        width,
+        height
+      },
       children: /*#__PURE__*/jsx("div", {
         id: id
       })

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/ads",
-    "version": "0.0.8",
+    "version": "0.0.10",
     "description": "Ads library",
     "keywords": [
         "javascript",
@@ -50,7 +50,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "72ba6039bc64d4b23921164affb9115727b8b651",
+    "gitHead": "b1d0b44123aa9abfd77f520bd356435d8616ff2d",
     "dependencies": {
         "@folklore/hooks": "^0.0.41",
         "@folklore/tracking": "^0.0.16",