@folklore/ads - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/cjs.js

@@ -7,9 +7,10 @@ 'use strict';
 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');
@@ -24,9 +25,10 @@ var jsxRuntime = require('react/jsx-runtime');
 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);
@@ -709,3 +711,6 @@
     viewports,
-    slots,
+    slots: (slots || []).map(slot => ({
+      sizeMapping: getSizeMappingFromSlot(slot, viewports),
+      ...slot
+    })),
     slotsPath: defaultSlotPath !== null ? {
@@ -865,13 +870,17 @@ default: defaultSlotPath,
     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);
       }
@@ -892,2 +901,3 @@ };
     refObserver,
+    slot,
     disabled: adsManager.isDisabled(),
@@ -917,3 +927,4 @@ id: slot !== null ? slot.getElementId() : null,
   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])
 };
@@ -931,3 +942,4 @@ const defaultProps = {
   adClassName: null,
-  onRender: null
+  onRender: null,
+  slotRef: null
 };
@@ -947,16 +959,16 @@ function Ad(_ref) {
     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 ? {
@@ -985,4 +997,4 @@ slot: slotName,
     isEmpty,
-    isRendered,
-    refObserver
+    refObserver,
+    slot: slotObject = null
   } = useAd(finalPath, finalSize, {
@@ -996,35 +1008,12 @@ sizeMapping: finalSizeMapping,
   });
+  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;
@@ -1035,8 +1024,15 @@ }
     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", {
@@ -1043,0 +1039,0 @@ id: id

dist/es.js

 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';
@@ -690,3 +691,6 @@ import { jsx } from 'react/jsx-runtime';
     viewports,
-    slots,
+    slots: (slots || []).map(slot => ({
+      sizeMapping: getSizeMappingFromSlot(slot, viewports),
+      ...slot
+    })),
     slotsPath: defaultSlotPath !== null ? {
@@ -846,13 +850,17 @@ default: defaultSlotPath,
     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);
       }
@@ -873,2 +881,3 @@ };
     refObserver,
+    slot,
     disabled: adsManager.isDisabled(),
@@ -898,3 +907,4 @@ id: slot !== null ? slot.getElementId() : null,
   adClassName: PropTypes.string,
-  onRender: PropTypes.func
+  onRender: PropTypes.func,
+  slotRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
@@ -912,3 +922,4 @@ const defaultProps = {
   adClassName: null,
-  onRender: null
+  onRender: null,
+  slotRef: null
 };
@@ -928,16 +939,16 @@ function Ad(_ref) {
     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 ? {
@@ -966,4 +977,4 @@ slot: slotName,
     isEmpty,
-    isRendered,
-    refObserver
+    refObserver,
+    slot: slotObject = null
   } = useAd(finalPath, finalSize, {
@@ -977,35 +988,12 @@ sizeMapping: finalSizeMapping,
   });
+  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;
@@ -1016,8 +1004,15 @@ }
     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", {
@@ -1024,0 +1019,0 @@ id: id

package.json

 {
     "name": "@folklore/ads",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "description": "Ads library",
@@ -53,3 +53,3 @@ "keywords": [
     },
-    "gitHead": "72ba6039bc64d4b23921164affb9115727b8b651",
+    "gitHead": "f00b6b5420946e2ab65ba278dd860090d106704b",
     "dependencies": {
@@ -56,0 +56,0 @@ "@folklore/hooks": "^0.0.41",

No alert changes

Worsened metrics

Total package byte prevSize

62977

decreased by-0.75%

Lines of code

2007

decreased by-0.55%

No dependency changes