@folklore/ads 0.0.3 → 0.0.5

package/dist/cjs.js

@@ -2,24 +2,99 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var debounce = require('lodash/debounce');
 var PropTypes = require('prop-types');
+var classNames = require('classnames');
 var React = require('react');
+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 isArray = require('lodash/isArray');
 var jsxRuntime = require('react/jsx-runtime');
+var hooks = require('@folklore/hooks');
+var tracking = require('@folklore/tracking');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+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);
-var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
+
+const adPath = PropTypes__default["default"].string;
+const adSize = PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].number), PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].number), PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].string]))]);
+const adSizeMapping = PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].number), adSize])));
+const adPosition = PropTypes__default["default"].shape({
+  size: adSize,
+  sizeMapping: PropTypes__default["default"].objectOf(adSize)
+});
+const adPositions = PropTypes__default["default"].objectOf(adPosition);
+const adViewports = PropTypes__default["default"].objectOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].number));
+const adTargeting = PropTypes__default["default"].shape({
+  domain: PropTypes__default["default"].string
+});
+
+var propTypes$3 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    adPath: adPath,
+    adSize: adSize,
+    adSizeMapping: adSizeMapping,
+    adPosition: adPosition,
+    adPositions: adPositions,
+    adViewports: adViewports,
+    adTargeting: adTargeting
+});
+
+const getAdSizes = sizes => {
+  if (isArray__default["default"](sizes)) {
+    return uniqBy__default["default"](isArray__default["default"](sizes[0]) || sizes[0] === 'fluid' ? sizes.filter(size => size !== 'fluid').reduce((allSizes, size) => [...allSizes, ...getAdSizes(size)], []) : [sizes].filter(size => size !== 'fluid'), size => size.join('x'));
+  }
+  return sizes.split('x').map(it => parseInt(it, 10));
+};
+const getMinimumAdSize = sizes => getAdSizes(sizes).reduce((minimumSize, size) => ({
+  width: Math.min(minimumSize.width, size[0]),
+  height: Math.min(minimumSize.height, size[1])
+}), {
+  width: Infinity,
+  height: Infinity
+});
+const sizeFitsInViewport = (size, viewport) => size === 'fluid' && viewport[0] > 600 || size !== 'fluid' && (viewport[0] === 0 || size[0] <= viewport[0]) && (viewport[1] === 0 || size[1] <= viewport[1]);
+const getSortedViewports = viewports => sortBy__default["default"](Object.keys(viewports).map(name => ({
+  name,
+  size: viewports[name]
+})), viewport => viewport.size[0]).reverse();
+const buildSizeMappingFromViewports = (sizeMapping, viewports) => getSortedViewports(viewports).reduce((newSizeMapping, _ref) => {
+  let {
+    name,
+    size: viewPortSize
+  } = _ref;
+  return typeof sizeMapping[name] !== 'undefined' ? [...newSizeMapping, [viewPortSize, sizeMapping[name]]] : newSizeMapping;
+}, []);
+const buildSizeMappingFromSizes = (sizes, viewports) => getSortedViewports(viewports).map(_ref2 => {
+  let {
+    name,
+    size: viewPortSize
+  } = _ref2;
+  return [viewPortSize, sizes.filter(size => sizeFitsInViewport(size, name === 'default' ? [300, 300] : viewPortSize))];
+});
+const getSizeMappingFromPosition = (_ref3, viewports) => {
+  let {
+    size: allSizes = [],
+    sizeMapping = null
+  } = _ref3;
+  if (sizeMapping === true) {
+    return buildSizeMappingFromSizes(allSizes, viewports);
+  }
+  return sizeMapping !== null ? buildSizeMappingFromViewports(sizeMapping, viewports) : null;
+};
 
 class AdSlot extends EventEmitter__default["default"] {
   constructor(id, path, size) {
@@ -189,7 +264,7 @@ class AdSlot extends EventEmitter__default["default"] {
 }
 
 /* globals refreshDisabledLineItems: [] */
-const debug = createDebug__default["default"]('site:ads');
+const debug = createDebug__default["default"]('folklore:ads');
 class AdsManager extends EventEmitter__default["default"] {
   static index = 0;
   static createAdId() {
@@ -545,23 +620,10 @@ const positions = {
   }
 };
 
-PropTypes__default["default"].string;
-const adSize = PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].number), PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].number), PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].string]))]);
-PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].number), adSize])));
-const adPosition = PropTypes__default["default"].shape({
-  size: adSize,
-  sizeMapping: PropTypes__default["default"].objectOf(adSize)
-});
-PropTypes__default["default"].objectOf(adPosition);
-const adViewports = PropTypes__default["default"].objectOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].number));
-PropTypes__default["default"].shape({
-  domain: PropTypes__default["default"].string
-});
-
 /* eslint-disable react/jsx-props-no-spreading */
 const AdsContext = /*#__PURE__*/React__default["default"].createContext(null);
 const useAdsContext = () => React.useContext(AdsContext);
-const propTypes = {
+const propTypes$2 = {
   children: PropTypes__default["default"].node.isRequired,
   defaultSlotPath: PropTypes__default["default"].string,
   slotsPath: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
@@ -572,7 +634,7 @@ const propTypes = {
   positions: adViewports,
   viewports: adViewports
 };
-const defaultProps = {
+const defaultProps$2 = {
   defaultSlotPath: null,
   slotsPath: null,
   enableSingleRequest: true,
@@ -653,10 +715,354 @@ function AdsProvider(_ref) {
     children: children
   });
 }
-AdsProvider.propTypes = propTypes;
-AdsProvider.defaultProps = defaultProps;
+AdsProvider.propTypes = propTypes$2;
+AdsProvider.defaultProps = defaultProps$2;
+
+const AdsTargetingContext = /*#__PURE__*/React__default["default"].createContext(null);
+const useAdsTargeting = () => React.useContext(AdsTargetingContext);
+const propTypes$1 = {
+  children: PropTypes__default["default"].node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  targeting: PropTypes__default["default"].object
+};
+const defaultProps$1 = {
+  targeting: {
+    domain: typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.host}` : null
+  }
+};
+function AdsTargetingProvider(_ref) {
+  let {
+    children,
+    targeting
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(AdsTargetingContext.Provider, {
+    value: targeting,
+    children: children
+  });
+}
+AdsTargetingProvider.propTypes = propTypes$1;
+AdsTargetingProvider.defaultProps = defaultProps$1;
+
+function useTrackAd() {
+  const tracking$1 = tracking.useTracking() || null;
+  const trackEvent = React.useCallback((action, slot, renderEvent) => {
+    if (tracking$1 !== null && typeof tracking$1.trackAd !== 'undefined') {
+      tracking$1.trackAd(action, slot, renderEvent);
+    }
+  }, [tracking$1]);
+  return trackEvent;
+}
+
+function useAd(path, size) {
+  let {
+    sizeMapping = null,
+    targeting = null,
+    categoryExclusions = null,
+    refreshInterval = null,
+    alwaysRender = false,
+    onRender = null,
+    disabled = false,
+    trackEvents = true,
+    rootMargin = '300px'
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    ads: adsManager,
+    ready: adsReady
+  } = useAdsContext();
+  const trackAd = useTrackAd();
+  const track = React.useCallback(function () {
+    if (trackEvents) {
+      trackAd(...arguments);
+    }
+  }, [trackEvents, trackAd]);
+
+  // Check for visibility
+  const {
+    ref: refObserver,
+    entry: {
+      isIntersecting
+    }
+  } = hooks.useIntersectionObserver({
+    rootMargin,
+    disabled
+  });
+
+  // Window blur
+  const [windowActive, setWindowActive] = React.useState(true); // eslint-disable-line
+  const onWindowBlur = React.useCallback(() => setWindowActive(false), [setWindowActive]);
+  const onWindowFocus = React.useCallback(() => setWindowActive(true), [setWindowActive]);
+  hooks.useWindowEvent('blur', onWindowBlur);
+  hooks.useWindowEvent('focus', onWindowFocus);
+  const isVisible = isIntersecting; /* && windowActive */
+
+  // Current render event
+  const [renderEvent, setRenderEvent] = React.useState(null);
+
+  // Create slot
+  const currentSlot = React.useRef(null);
+  const slot = React.useMemo(() => {
+    if (currentSlot.current !== null) {
+      adsManager.destroySlot(currentSlot.current);
+      currentSlot.current = null;
+    }
+    currentSlot.current = path !== null && !disabled ? adsManager.createSlot(path, size, {
+      visible: isVisible,
+      sizeMapping,
+      targeting,
+      categoryExclusions
+    }) : null;
+    // if (currentSlot.current !== null && adsReady) {
+    //     adsManager.defineSlot(currentSlot.current);
+    // }
+    return currentSlot.current;
+  }, [adsManager, path, disabled, size, sizeMapping, targeting, alwaysRender, categoryExclusions]);
+
+  // Set visibility
+  React.useEffect(() => {
+    if (slot !== null) {
+      slot.setVisible(isVisible);
+    }
+  }, [slot, isVisible]);
+
+  // Render ad when visible
+  React.useEffect(() => {
+    const slotReady = slot !== null && !slot.isDefined();
+    if (adsReady && slotReady && (alwaysRender || isVisible)) {
+      adsManager.defineSlot(slot);
+      adsManager.displaySlot(slot);
+      track('Init', slot);
+    }
+  }, [adsManager, adsReady, slot, alwaysRender, isIntersecting, track]);
+
+  // Refresh ads slot
+  React.useEffect(() => {
+    let interval = null;
+    const slotReady = slot !== null && slot.isDefined();
+    if (adsReady && slotReady && isVisible && refreshInterval !== null) {
+      interval = setInterval(() => {
+        adsManager.refreshSlot(slot);
+        track('Refresh', slot);
+      }, refreshInterval);
+    }
+    return () => {
+      if (interval !== null) {
+        clearInterval(interval);
+      }
+    };
+  }, [adsManager, adsReady, slot, isVisible, refreshInterval, track]);
+
+  // Listen to render event
+  React.useEffect(() => {
+    if (slot === null) {
+      return () => {};
+    }
+    const onSlotRender = event => {
+      setRenderEvent(event);
+      if (onRender !== null) {
+        onRender(event);
+      }
+      const {
+        isEmpty = true
+      } = event || {};
+      if (isEmpty) {
+        track('Empty', slot);
+      } else {
+        track('Render', slot, event);
+      }
+    };
+    slot.on('render', onSlotRender);
+    return () => slot.off('render', onSlotRender);
+  }, [slot, disabled, setRenderEvent, onRender, track]);
+
+  // Destroy slot
+  React.useEffect(() => () => {
+    if (slot !== null) {
+      currentSlot.current = null;
+      adsManager.destroySlot(slot);
+    }
+  }, []);
+  return {
+    refObserver,
+    disabled: adsManager.isDisabled(),
+    id: slot !== null ? slot.getElementId() : null,
+    isRendered: slot !== null && slot.isRendered(),
+    isEmpty: slot !== null ? slot.isEmpty() : true,
+    isVisible: slot !== null ? slot.isVisible() : true,
+    width: null,
+    height: null,
+    renderEvent,
+    ...(slot !== null ? slot.getRenderedSize() : null)
+  };
+}
+
+const propTypes = {
+  position: PropTypes__default["default"].string.isRequired,
+  slot: PropTypes__default["default"].string,
+  path: adPath,
+  size: adSize,
+  sizeMapping: adSizeMapping,
+  targeting: adTargeting,
+  refreshInterval: PropTypes__default["default"].number,
+  alwaysRender: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
+  className: PropTypes__default["default"].string,
+  emptyClassName: PropTypes__default["default"].string,
+  adClassName: PropTypes__default["default"].string,
+  onRender: PropTypes__default["default"].func
+};
+const defaultProps = {
+  path: null,
+  slot: 'default',
+  size: null,
+  sizeMapping: null,
+  targeting: null,
+  refreshInterval: null,
+  alwaysRender: true,
+  disabled: false,
+  className: null,
+  emptyClassName: null,
+  adClassName: null,
+  onRender: null
+};
+function Ad(_ref) {
+  let {
+    position: positionName,
+    slot: slotName,
+    path,
+    size,
+    sizeMapping,
+    targeting,
+    refreshInterval,
+    alwaysRender,
+    disabled,
+    className,
+    emptyClassName,
+    adClassName,
+    onRender
+  } = _ref;
+  const {
+    viewports,
+    positions,
+    slotsPath
+  } = useAdsContext();
+  const position = positionName !== null ? positions[positionName] || null : null;
+  const finalPath = path || (slotName !== null ? slotsPath[slotName] : null) || (positionName !== null ? slotsPath[positionName] : null);
+  const finalSize = size !== null ? size : position.size;
+
+  // Targeting
+  const contextTargeting = useAdsTargeting();
+  const finalSizeMapping = React.useMemo(() => sizeMapping !== null ? sizeMapping : getSizeMappingFromPosition(position, viewports), [sizeMapping, position, viewports]);
+  const allTargeting = React.useMemo(() => contextTargeting !== null || targeting !== null || positionName !== null ? {
+    position: positionName,
+    ...contextTargeting,
+    ...targeting
+  } : null, [contextTargeting, targeting, positionName]);
+  const finalAdTargeting = React.useMemo(() => {
+    const {
+      refreshAds = null,
+      ...otherProps
+    } = allTargeting || {};
+    return {
+      refreshInterval: refreshAds !== null && refreshAds === 'inactive' ? null : refreshInterval,
+      targeting: otherProps || {}
+    };
+  }, [allTargeting, refreshInterval]);
+
+  // Create ad
+  const {
+    disabled: adsDisabled,
+    id,
+    width,
+    height,
+    isEmpty,
+    isRendered,
+    refObserver
+  } = useAd(finalPath, finalSize, {
+    sizeMapping: finalSizeMapping,
+    targeting: finalAdTargeting.targeting,
+    refreshInterval: finalAdTargeting.refreshInterval,
+    alwaysRender,
+    onRender,
+    disabled
+  });
+
+  // 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) {
+    return null;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    id: id !== null ? `${id}-container` : null,
+    className: classNames__default["default"]([className, {
+      [emptyClassName]: emptyClassName !== null && isEmpty && !keepSize
+    }]),
+    ref: refObserver,
+    style: isEmpty && !keepSize ? {
+      height: 0,
+      paddingBottom: 0,
+      overflow: 'hidden',
+      opacity: 0
+    } : null,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: adClassName,
+      style: {
+        ...sizeStyle,
+        margin: 'auto'
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        id: id
+      })
+    })
+  });
+}
+Ad.propTypes = propTypes;
+Ad.defaultProps = defaultProps;
 
+exports.Ad = Ad;
 exports.AdSlot = AdSlot;
 exports.AdsManager = AdsManager;
 exports.AdsProvider = AdsProvider;
+exports.AdsTargetingProvider = AdsTargetingProvider;
+exports.PropTypes = propTypes$3;
+exports.buildSizeMappingFromSizes = buildSizeMappingFromSizes;
+exports.buildSizeMappingFromViewports = buildSizeMappingFromViewports;
+exports.getAdSizes = getAdSizes;
+exports.getMinimumAdSize = getMinimumAdSize;
+exports.getSizeMappingFromPosition = getSizeMappingFromPosition;
+exports.getSortedViewports = getSortedViewports;
+exports.positions = positions;
+exports.sizeFitsInViewport = sizeFitsInViewport;
+exports.useAd = useAd;
 exports.useAdsContext = useAdsContext;
+exports.useAdsTargeting = useAdsTargeting;
+exports.useAdsTracking = useTrackAd;
+exports.viewports = viewports;

package/dist/es.js

@@ -1,11 +1,83 @@
-import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
-import React, { useContext, useState, useRef, useMemo, useEffect } from 'react';
+import classNames from 'classnames';
+import React, { useContext, useState, useRef, useMemo, useEffect, useCallback } from 'react';
+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 isArray from 'lodash/isArray';
 import { jsx } from 'react/jsx-runtime';
+import { useIntersectionObserver, useWindowEvent } from '@folklore/hooks';
+import { useTracking } from '@folklore/tracking';
+
+const adPath = PropTypes.string;
+const adSize = PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.arrayOf(PropTypes.string), PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.arrayOf(PropTypes.string), PropTypes.string]))]);
+const adSizeMapping = PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), adSize])));
+const adPosition = PropTypes.shape({
+  size: adSize,
+  sizeMapping: PropTypes.objectOf(adSize)
+});
+const adPositions = PropTypes.objectOf(adPosition);
+const adViewports = PropTypes.objectOf(PropTypes.arrayOf(PropTypes.number));
+const adTargeting = PropTypes.shape({
+  domain: PropTypes.string
+});
+
+var propTypes$3 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    adPath: adPath,
+    adSize: adSize,
+    adSizeMapping: adSizeMapping,
+    adPosition: adPosition,
+    adPositions: adPositions,
+    adViewports: adViewports,
+    adTargeting: adTargeting
+});
+
+const getAdSizes = sizes => {
+  if (isArray(sizes)) {
+    return uniqBy(isArray(sizes[0]) || sizes[0] === 'fluid' ? sizes.filter(size => size !== 'fluid').reduce((allSizes, size) => [...allSizes, ...getAdSizes(size)], []) : [sizes].filter(size => size !== 'fluid'), size => size.join('x'));
+  }
+  return sizes.split('x').map(it => parseInt(it, 10));
+};
+const getMinimumAdSize = sizes => getAdSizes(sizes).reduce((minimumSize, size) => ({
+  width: Math.min(minimumSize.width, size[0]),
+  height: Math.min(minimumSize.height, size[1])
+}), {
+  width: Infinity,
+  height: Infinity
+});
+const sizeFitsInViewport = (size, viewport) => size === 'fluid' && viewport[0] > 600 || size !== 'fluid' && (viewport[0] === 0 || size[0] <= viewport[0]) && (viewport[1] === 0 || size[1] <= viewport[1]);
+const getSortedViewports = viewports => sortBy(Object.keys(viewports).map(name => ({
+  name,
+  size: viewports[name]
+})), viewport => viewport.size[0]).reverse();
+const buildSizeMappingFromViewports = (sizeMapping, viewports) => getSortedViewports(viewports).reduce((newSizeMapping, _ref) => {
+  let {
+    name,
+    size: viewPortSize
+  } = _ref;
+  return typeof sizeMapping[name] !== 'undefined' ? [...newSizeMapping, [viewPortSize, sizeMapping[name]]] : newSizeMapping;
+}, []);
+const buildSizeMappingFromSizes = (sizes, viewports) => getSortedViewports(viewports).map(_ref2 => {
+  let {
+    name,
+    size: viewPortSize
+  } = _ref2;
+  return [viewPortSize, sizes.filter(size => sizeFitsInViewport(size, name === 'default' ? [300, 300] : viewPortSize))];
+});
+const getSizeMappingFromPosition = (_ref3, viewports) => {
+  let {
+    size: allSizes = [],
+    sizeMapping = null
+  } = _ref3;
+  if (sizeMapping === true) {
+    return buildSizeMappingFromSizes(allSizes, viewports);
+  }
+  return sizeMapping !== null ? buildSizeMappingFromViewports(sizeMapping, viewports) : null;
+};
 
 class AdSlot extends EventEmitter {
   constructor(id, path, size) {
@@ -175,7 +247,7 @@ class AdSlot extends EventEmitter {
 }
 
 /* globals refreshDisabledLineItems: [] */
-const debug = createDebug('site:ads');
+const debug = createDebug('folklore:ads');
 class AdsManager extends EventEmitter {
   static index = 0;
   static createAdId() {
@@ -531,23 +603,10 @@ const positions = {
   }
 };
 
-PropTypes.string;
-const adSize = PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.arrayOf(PropTypes.string), PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.arrayOf(PropTypes.string), PropTypes.string]))]);
-PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), adSize])));
-const adPosition = PropTypes.shape({
-  size: adSize,
-  sizeMapping: PropTypes.objectOf(adSize)
-});
-PropTypes.objectOf(adPosition);
-const adViewports = PropTypes.objectOf(PropTypes.arrayOf(PropTypes.number));
-PropTypes.shape({
-  domain: PropTypes.string
-});
-
 /* eslint-disable react/jsx-props-no-spreading */
 const AdsContext = /*#__PURE__*/React.createContext(null);
 const useAdsContext = () => useContext(AdsContext);
-const propTypes = {
+const propTypes$2 = {
   children: PropTypes.node.isRequired,
   defaultSlotPath: PropTypes.string,
   slotsPath: PropTypes.objectOf(PropTypes.string),
@@ -558,7 +617,7 @@ const propTypes = {
   positions: adViewports,
   viewports: adViewports
 };
-const defaultProps = {
+const defaultProps$2 = {
   defaultSlotPath: null,
   slotsPath: null,
   enableSingleRequest: true,
@@ -639,7 +698,336 @@ function AdsProvider(_ref) {
     children: children
   });
 }
-AdsProvider.propTypes = propTypes;
-AdsProvider.defaultProps = defaultProps;
+AdsProvider.propTypes = propTypes$2;
+AdsProvider.defaultProps = defaultProps$2;
+
+const AdsTargetingContext = /*#__PURE__*/React.createContext(null);
+const useAdsTargeting = () => useContext(AdsTargetingContext);
+const propTypes$1 = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  targeting: PropTypes.object
+};
+const defaultProps$1 = {
+  targeting: {
+    domain: typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.host}` : null
+  }
+};
+function AdsTargetingProvider(_ref) {
+  let {
+    children,
+    targeting
+  } = _ref;
+  return /*#__PURE__*/jsx(AdsTargetingContext.Provider, {
+    value: targeting,
+    children: children
+  });
+}
+AdsTargetingProvider.propTypes = propTypes$1;
+AdsTargetingProvider.defaultProps = defaultProps$1;
+
+function useTrackAd() {
+  const tracking = useTracking() || null;
+  const trackEvent = useCallback((action, slot, renderEvent) => {
+    if (tracking !== null && typeof tracking.trackAd !== 'undefined') {
+      tracking.trackAd(action, slot, renderEvent);
+    }
+  }, [tracking]);
+  return trackEvent;
+}
+
+function useAd(path, size) {
+  let {
+    sizeMapping = null,
+    targeting = null,
+    categoryExclusions = null,
+    refreshInterval = null,
+    alwaysRender = false,
+    onRender = null,
+    disabled = false,
+    trackEvents = true,
+    rootMargin = '300px'
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    ads: adsManager,
+    ready: adsReady
+  } = useAdsContext();
+  const trackAd = useTrackAd();
+  const track = useCallback(function () {
+    if (trackEvents) {
+      trackAd(...arguments);
+    }
+  }, [trackEvents, trackAd]);
+
+  // Check for visibility
+  const {
+    ref: refObserver,
+    entry: {
+      isIntersecting
+    }
+  } = useIntersectionObserver({
+    rootMargin,
+    disabled
+  });
+
+  // Window blur
+  const [windowActive, setWindowActive] = useState(true); // eslint-disable-line
+  const onWindowBlur = useCallback(() => setWindowActive(false), [setWindowActive]);
+  const onWindowFocus = useCallback(() => setWindowActive(true), [setWindowActive]);
+  useWindowEvent('blur', onWindowBlur);
+  useWindowEvent('focus', onWindowFocus);
+  const isVisible = isIntersecting; /* && windowActive */
+
+  // Current render event
+  const [renderEvent, setRenderEvent] = useState(null);
+
+  // Create slot
+  const currentSlot = useRef(null);
+  const slot = useMemo(() => {
+    if (currentSlot.current !== null) {
+      adsManager.destroySlot(currentSlot.current);
+      currentSlot.current = null;
+    }
+    currentSlot.current = path !== null && !disabled ? adsManager.createSlot(path, size, {
+      visible: isVisible,
+      sizeMapping,
+      targeting,
+      categoryExclusions
+    }) : null;
+    // if (currentSlot.current !== null && adsReady) {
+    //     adsManager.defineSlot(currentSlot.current);
+    // }
+    return currentSlot.current;
+  }, [adsManager, path, disabled, size, sizeMapping, targeting, alwaysRender, categoryExclusions]);
+
+  // Set visibility
+  useEffect(() => {
+    if (slot !== null) {
+      slot.setVisible(isVisible);
+    }
+  }, [slot, isVisible]);
+
+  // Render ad when visible
+  useEffect(() => {
+    const slotReady = slot !== null && !slot.isDefined();
+    if (adsReady && slotReady && (alwaysRender || isVisible)) {
+      adsManager.defineSlot(slot);
+      adsManager.displaySlot(slot);
+      track('Init', slot);
+    }
+  }, [adsManager, adsReady, slot, alwaysRender, isIntersecting, track]);
+
+  // Refresh ads slot
+  useEffect(() => {
+    let interval = null;
+    const slotReady = slot !== null && slot.isDefined();
+    if (adsReady && slotReady && isVisible && refreshInterval !== null) {
+      interval = setInterval(() => {
+        adsManager.refreshSlot(slot);
+        track('Refresh', slot);
+      }, refreshInterval);
+    }
+    return () => {
+      if (interval !== null) {
+        clearInterval(interval);
+      }
+    };
+  }, [adsManager, adsReady, slot, isVisible, refreshInterval, track]);
+
+  // Listen to render event
+  useEffect(() => {
+    if (slot === null) {
+      return () => {};
+    }
+    const onSlotRender = event => {
+      setRenderEvent(event);
+      if (onRender !== null) {
+        onRender(event);
+      }
+      const {
+        isEmpty = true
+      } = event || {};
+      if (isEmpty) {
+        track('Empty', slot);
+      } else {
+        track('Render', slot, event);
+      }
+    };
+    slot.on('render', onSlotRender);
+    return () => slot.off('render', onSlotRender);
+  }, [slot, disabled, setRenderEvent, onRender, track]);
+
+  // Destroy slot
+  useEffect(() => () => {
+    if (slot !== null) {
+      currentSlot.current = null;
+      adsManager.destroySlot(slot);
+    }
+  }, []);
+  return {
+    refObserver,
+    disabled: adsManager.isDisabled(),
+    id: slot !== null ? slot.getElementId() : null,
+    isRendered: slot !== null && slot.isRendered(),
+    isEmpty: slot !== null ? slot.isEmpty() : true,
+    isVisible: slot !== null ? slot.isVisible() : true,
+    width: null,
+    height: null,
+    renderEvent,
+    ...(slot !== null ? slot.getRenderedSize() : null)
+  };
+}
+
+const propTypes = {
+  position: PropTypes.string.isRequired,
+  slot: PropTypes.string,
+  path: adPath,
+  size: adSize,
+  sizeMapping: adSizeMapping,
+  targeting: adTargeting,
+  refreshInterval: PropTypes.number,
+  alwaysRender: PropTypes.bool,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  emptyClassName: PropTypes.string,
+  adClassName: PropTypes.string,
+  onRender: PropTypes.func
+};
+const defaultProps = {
+  path: null,
+  slot: 'default',
+  size: null,
+  sizeMapping: null,
+  targeting: null,
+  refreshInterval: null,
+  alwaysRender: true,
+  disabled: false,
+  className: null,
+  emptyClassName: null,
+  adClassName: null,
+  onRender: null
+};
+function Ad(_ref) {
+  let {
+    position: positionName,
+    slot: slotName,
+    path,
+    size,
+    sizeMapping,
+    targeting,
+    refreshInterval,
+    alwaysRender,
+    disabled,
+    className,
+    emptyClassName,
+    adClassName,
+    onRender
+  } = _ref;
+  const {
+    viewports,
+    positions,
+    slotsPath
+  } = useAdsContext();
+  const position = positionName !== null ? positions[positionName] || null : null;
+  const finalPath = path || (slotName !== null ? slotsPath[slotName] : null) || (positionName !== null ? slotsPath[positionName] : null);
+  const finalSize = size !== null ? size : position.size;
+
+  // Targeting
+  const contextTargeting = useAdsTargeting();
+  const finalSizeMapping = useMemo(() => sizeMapping !== null ? sizeMapping : getSizeMappingFromPosition(position, viewports), [sizeMapping, position, viewports]);
+  const allTargeting = useMemo(() => contextTargeting !== null || targeting !== null || positionName !== null ? {
+    position: positionName,
+    ...contextTargeting,
+    ...targeting
+  } : null, [contextTargeting, targeting, positionName]);
+  const finalAdTargeting = useMemo(() => {
+    const {
+      refreshAds = null,
+      ...otherProps
+    } = allTargeting || {};
+    return {
+      refreshInterval: refreshAds !== null && refreshAds === 'inactive' ? null : refreshInterval,
+      targeting: otherProps || {}
+    };
+  }, [allTargeting, refreshInterval]);
+
+  // Create ad
+  const {
+    disabled: adsDisabled,
+    id,
+    width,
+    height,
+    isEmpty,
+    isRendered,
+    refObserver
+  } = useAd(finalPath, finalSize, {
+    sizeMapping: finalSizeMapping,
+    targeting: finalAdTargeting.targeting,
+    refreshInterval: finalAdTargeting.refreshInterval,
+    alwaysRender,
+    onRender,
+    disabled
+  });
+
+  // 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) {
+    return null;
+  }
+  return /*#__PURE__*/jsx("div", {
+    id: id !== null ? `${id}-container` : null,
+    className: classNames([className, {
+      [emptyClassName]: emptyClassName !== null && isEmpty && !keepSize
+    }]),
+    ref: refObserver,
+    style: isEmpty && !keepSize ? {
+      height: 0,
+      paddingBottom: 0,
+      overflow: 'hidden',
+      opacity: 0
+    } : null,
+    children: /*#__PURE__*/jsx("div", {
+      className: adClassName,
+      style: {
+        ...sizeStyle,
+        margin: 'auto'
+      },
+      children: /*#__PURE__*/jsx("div", {
+        id: id
+      })
+    })
+  });
+}
+Ad.propTypes = propTypes;
+Ad.defaultProps = defaultProps;
 
-export { AdSlot, AdsManager, AdsProvider, useAdsContext };
+export { Ad, AdSlot, AdsManager, AdsProvider, AdsTargetingProvider, propTypes$3 as PropTypes, buildSizeMappingFromSizes, buildSizeMappingFromViewports, getAdSizes, getMinimumAdSize, getSizeMappingFromPosition, getSortedViewports, positions, sizeFitsInViewport, useAd, useAdsContext, useAdsTargeting, useTrackAd as useAdsTracking, viewports };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/ads",
-    "version": "0.0.3",
+    "version": "0.0.5",
     "description": "Ads library",
     "keywords": [
         "javascript",
@@ -50,7 +50,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "75940ae5d4cbe7c795e62a4d15aea6c49c782ba6",
+    "gitHead": "cbdee31b7e205f95c4ab462380feee74c076daa1",
     "dependencies": {
         "@folklore/hooks": "^0.0.41",
         "@folklore/tracking": "^0.0.16",