@folklore/ads 0.0.2

package/dist/cjs.js

@@ -0,0 +1,662 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var debounce = require('lodash/debounce');
+var PropTypes = require('prop-types');
+var React = require('react');
+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');
+
+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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
+var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
+var createDebug__default = /*#__PURE__*/_interopDefaultLegacy(createDebug);
+var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
+
+class AdSlot extends EventEmitter__default["default"] {
+  constructor(id, path, size) {
+    let opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    super();
+    this.options = {
+      sizeMapping: null,
+      targeting: {},
+      categoryExclusions: [],
+      visible: true,
+      ...opts
+    };
+    const {
+      visible
+    } = this.options;
+    this.elementId = id;
+    this.adPath = path;
+    this.adSize = size;
+    this.adSlot = null;
+    this.visible = visible;
+    this.wasVisible = visible;
+    this.rendered = false;
+    this.displayed = false;
+    this.viewable = false;
+    this.destroyed = false;
+    this.renderEvent = null;
+    this.refreshDisabled = false;
+  }
+  updateAdSlot() {
+    const {
+      adSlot
+    } = this;
+    const {
+      targeting = {},
+      categoryExclusions = [],
+      sizeMapping = null
+    } = this.options;
+
+    // Size mapping
+    if (sizeMapping !== null) {
+      adSlot.defineSizeMapping(sizeMapping);
+    }
+
+    // Targeting
+    const targetingKeys = targeting !== null ? Object.keys(targeting) : null;
+    if (targetingKeys !== null && targetingKeys.length > 0) {
+      targetingKeys.forEach(key => {
+        adSlot.setTargeting(key, targeting[key]);
+      });
+    } else {
+      adSlot.clearTargeting();
+    }
+
+    // Category exclusions
+    if (categoryExclusions !== null && categoryExclusions.length > 0) {
+      categoryExclusions.forEach(exclusion => {
+        adSlot.setCategoryExclusion(exclusion);
+      });
+    } else {
+      adSlot.clearCategoryExclusions();
+    }
+  }
+  setAdSlot(slot) {
+    this.adSlot = slot;
+    if (slot !== null) {
+      this.updateAdSlot();
+    }
+    return this;
+  }
+  setRenderEvent(event) {
+    this.renderEvent = event;
+    this.rendered = true;
+    this.emit('render', event, this);
+    return this;
+  }
+  setViewable(viewable) {
+    this.viewable = viewable;
+  }
+  setDisplayed(displayed) {
+    this.displayed = displayed;
+    return this;
+  }
+
+  // eslint-disable-next-line
+  setVisible(visible) {
+    this.visible = visible;
+    if (!this.wasVisible && visible) {
+      this.wasVisible = visible;
+    }
+    this.emit('visible', visible, this);
+    return this;
+  }
+  setRefreshDisabled() {
+    this.refreshDisabled = true;
+  }
+  destroy() {
+    if (this.destroyed) {
+      return;
+    }
+    this.removeAllListeners();
+    this.adSlot = null;
+    this.rendered = false;
+    this.displayed = false;
+    this.renderEvent = null;
+    this.destroyed = true;
+  }
+  getElementId() {
+    return this.elementId;
+  }
+  getAdSlot() {
+    return this.adSlot;
+  }
+  getAdPath() {
+    return this.adPath;
+  }
+  getAdSize() {
+    return this.adSize;
+  }
+  getTargeting() {
+    const {
+      targeting
+    } = this.options;
+    return targeting;
+  }
+  isVisible() {
+    return this.visible;
+  }
+  isDefined() {
+    return this.adSlot !== null;
+  }
+  isDisplayed() {
+    return this.displayed;
+  }
+  isViewable() {
+    return this.viewable;
+  }
+  isRendered() {
+    return this.rendered;
+  }
+  isRefreshDisabled() {
+    return this.refreshDisabled;
+  }
+  isDestroyed() {
+    return this.destroyed;
+  }
+  isEmpty() {
+    if (this.renderEvent === null) {
+      return false;
+    }
+    return this.renderEvent.isEmpty;
+  }
+  canBeDisplayed() {
+    return this.isDefined() && !this.isDisplayed();
+  }
+  getRenderedSize() {
+    if (this.renderEvent === null) {
+      return null;
+    }
+    const {
+      size = null
+    } = this.renderEvent;
+    return size !== null ? {
+      width: size[0],
+      height: size[1]
+    } : null;
+  }
+}
+
+/* globals refreshDisabledLineItems: [] */
+const debug = createDebug__default["default"]('site:ads');
+class AdsManager extends EventEmitter__default["default"] {
+  static index = 0;
+  static createAdId() {
+    const newId = `div-gpt-ad-${new Date().getTime()}-${Math.round(Math.random() * (Math.random() * 1000))}-${AdsManager.index}`;
+    AdsManager.index += 1;
+    return newId;
+  }
+  static getArticleTargeting(article) {
+    if (article === null) {
+      return null;
+    }
+    const {
+      id,
+      title,
+      slug,
+      metadata: {
+        categories = [],
+        authors = [],
+        sponsors = [],
+        safeForDistribution = true
+      }
+    } = article;
+    return {
+      title,
+      slug,
+      postID: id,
+      categories: categories.map(it => it.slug),
+      authors: authors.map(it => it.slug),
+      sponsors: sponsors.map(it => it.name),
+      GoogleSafeTargeting: safeForDistribution
+    };
+  }
+  static getSectionTargeting(section) {
+    return section !== null ? {
+      section: section.slug
+    } : null;
+  }
+  static getIndexTargeting(index) {
+    return index !== null ? {
+      index: index.slug
+    } : null;
+  }
+  static getIndexItemTargeting(index, item) {
+    return index !== null && item !== null ? {
+      [index.id]: [item.slug]
+    } : null;
+  }
+  constructor() {
+    let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    super();
+    this.options = {
+      disabled: false,
+      disablePersonnalizedAds: false,
+      enableSingleRequest: false,
+      autoInit: false,
+      ...opts
+    };
+    this.onGPTReady = this.onGPTReady.bind(this);
+    this.onSlotRenderEnded = this.onSlotRenderEnded.bind(this);
+    this.onSlotImpressionViewable = this.onSlotImpressionViewable.bind(this);
+    this.onSlotVisibleChange = this.onSlotVisibleChange.bind(this);
+    this.disabled = this.options.disabled;
+    this.personnalizedAdsDisabled = this.options.disablePersonnalizedAds;
+    this.ready = false;
+    this.enabled = false;
+    this.googletag = window.googletag;
+    this.slots = [];
+    if (this.options.autoInit) {
+      this.init();
+    }
+  }
+  onGPTReady() {
+    const {
+      googletag
+    } = this;
+    this.ready = true;
+    googletag.cmd.push(() => {
+      const {
+        disabled,
+        personnalizedAdsDisabled
+      } = this;
+      const {
+        enableSingleRequest
+      } = this.options;
+      if (disabled) {
+        debug('Disable initial load');
+        googletag.pubads().disableInitialLoad();
+      }
+      if (enableSingleRequest) {
+        debug('Enable single request');
+        googletag.pubads().enableSingleRequest();
+      }
+      if (personnalizedAdsDisabled) {
+        debug('Disable personalized ads');
+        googletag.pubads().setRequestNonPersonalizedAds(1);
+      }
+      googletag.pubads().enableLazyLoad({
+        // Fetch slots within 5 viewports.
+        fetchMarginPercent: 300,
+        // Render slots within 2 viewports.
+        renderMarginPercent: 100,
+        // Double the above values on mobile, where viewports are smaller
+        // and users tend to scroll faster.
+        mobileScaling: 1.0
+      });
+      googletag.pubads().enableVideoAds();
+      googletag.pubads().addEventListener('slotRenderEnded', this.onSlotRenderEnded);
+      googletag.pubads().addEventListener('impressionViewable', this.onSlotImpressionViewable);
+      googletag.enableServices();
+      this.enabled = true;
+      debug('GPT is ready');
+      if (!disabled) {
+        this.emit('ready');
+      }
+    });
+  }
+  onSlotRenderEnded(event) {
+    const {
+      slot: eventSlot,
+      lineItemId = null,
+      size = []
+    } = event;
+    const renderSlot = this.slots.find(slot => eventSlot === slot.getAdSlot()) || null;
+    if (renderSlot !== null) {
+      renderSlot.setRenderEvent(event);
+    }
+    const lineItems = window.refreshDisabledLineItems || [];
+    if (isArray__default["default"](lineItems) && lineItems.indexOf(lineItemId) > -1) {
+      renderSlot.setRefreshDisabled();
+    }
+    if (event.isEmpty) {
+      debug('Render ended for slot #%s(%s). Slot is empty.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
+    } else {
+      debug('Render ended for slot #%s(%s) with size %s.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath(), size !== null ? size.join('x') : '-');
+    }
+  }
+  onSlotImpressionViewable(event) {
+    const {
+      slot: eventSlot
+    } = event;
+    const impressionSlot = this.slots.find(slot => eventSlot === slot.getAdSlot()) || null;
+    if (impressionSlot !== null) {
+      impressionSlot.setViewable(true);
+    }
+    debug('Impression viewable for slot #%s(%s).', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  onSlotVisibleChange(visible, slot) {
+    debug('Slot #%s(%s) visibility change to %s', slot.getElementId(), slot.getAdPath(), visible ? 'visible' : 'not visible');
+  }
+  init() {
+    const {
+      googletag
+    } = this;
+    debug('Initializing ads manager...');
+    googletag.cmd.push(() => {
+      this.onGPTReady();
+    });
+  }
+  isReady() {
+    return this.ready && this.enabled && !this.disabled;
+  }
+  isDisabled() {
+    return this.disabled;
+  }
+  setDisabled(disabled) {
+    const shouldRefresh = this.disabled && !disabled;
+    this.disabled = disabled;
+    if (shouldRefresh) {
+      this.refreshAllSlots();
+    }
+    if (this.enabled && !disabled) {
+      this.emit('ready');
+    }
+  }
+  disablePersonnalizedAds(disablePersonnalizedAds) {
+    const {
+      googletag
+    } = this;
+    this.personnalizedAdsDisabled = disablePersonnalizedAds;
+    googletag.cmd.push(() => {
+      googletag.pubads().setRequestNonPersonalizedAds(disablePersonnalizedAds ? 1 : 0);
+    });
+  }
+  createSlot(path, size) {
+    let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    const {
+      id: providedId = null
+    } = opts;
+    const id = providedId || AdsManager.createAdId();
+    debug('Creating slot #%s(%s)...', id, path);
+    const slot = new AdSlot(id, path, size, {
+      ...opts
+    });
+    slot.on('visible', this.onSlotVisibleChange);
+    this.slots.push(slot);
+    return slot;
+  }
+  defineSlot(slot) {
+    const {
+      googletag
+    } = this;
+    googletag.cmd.push(() => {
+      if (slot.isDestroyed() || slot.isDefined()) {
+        return;
+      }
+      const id = slot.getElementId();
+      const path = slot.getAdPath();
+      const size = slot.getAdSize();
+      debug('Defining slot #%s(%s)...', id, path);
+      const adSlot = googletag.defineSlot(path, size, id).addService(googletag.pubads());
+      slot.setAdSlot(adSlot);
+    });
+  }
+  displaySlots() {
+    const slotsToDisplay = this.slots.filter(slot => slot.canBeDisplayed());
+    const slotsCount = slotsToDisplay.length;
+    if (slotsCount > 0) {
+      debug('Displaying %i slot(s)...', slotsCount);
+      slotsToDisplay.forEach(slot => this.callDisplaySlot(slot));
+    }
+    return true;
+  }
+  displaySlot(slot) {
+    if (!slot.canBeDisplayed()) {
+      return;
+    }
+    this.callDisplaySlot(slot);
+  }
+
+  /* eslint-disable */
+  callDisplaySlot(slot) {
+    const {
+      googletag
+    } = this;
+    googletag.cmd.push(() => {
+      const id = slot.getElementId();
+      const path = slot.getAdPath();
+      debug('Displaying slot #%s(%s)...', id, path);
+      googletag.display(slot.getAdSlot());
+      if (googletag.pubads().isInitialLoadDisabled()) {
+        googletag.pubads().refresh([slot.getAdSlot()]);
+      }
+      slot.setDisplayed(true);
+    });
+  }
+  /* eslint-enable */
+
+  destroySlot(id) {
+    const {
+      googletag
+    } = this;
+    const slot = isObject__default["default"](id) ? id : this.slots.find(it => it.getElementId() === id) || null;
+    if (slot === null || slot.isDestroyed()) {
+      return;
+    }
+    const adSlot = slot.getAdSlot();
+    slot.destroy();
+    this.slots = this.slots.filter(it => it !== slot);
+    if (adSlot !== null) {
+      debug('Destroying slot #%s(%s)...', adSlot.getAdUnitPath(), adSlot.getSlotElementId());
+      googletag.cmd.push(() => {
+        googletag.destroySlots([adSlot]);
+      });
+    }
+  }
+  refreshSlot(id) {
+    const {
+      googletag
+    } = this;
+    const slot = isObject__default["default"](id) ? id : this.slots.find(it => it.getElementId() === id) || null;
+    if (slot === null || slot.isDestroyed() || slot.isRefreshDisabled()) {
+      return;
+    }
+    const adSlot = slot.getAdSlot();
+    if (adSlot !== null) {
+      debug('Refreshing slot #%s(%s)...', adSlot.getAdUnitPath(), slot.getElementId());
+      googletag.cmd.push(() => {
+        googletag.pubads().refresh([adSlot], {
+          changeCorrelator: false
+        });
+      });
+    }
+  }
+  refreshSlots(ids) {
+    const {
+      googletag
+    } = this;
+    const slots = ids.map(id => isObject__default["default"](id) ? id : this.slots.find(it => !it.isDestroyed() && it.getElementId() === id) || null).filter(it => it !== null).map(it => it.getAdSlot());
+    if (slots.length === 0) {
+      return;
+    }
+    debug('Refreshing slots %o...', slots.map(slot => `#${slot.getElementId()}(${slot.getAdUnitPath()})`));
+    googletag.cmd.push(() => {
+      googletag.pubads().refresh(slots);
+    });
+  }
+  refreshAllSlots() {
+    const {
+      googletag
+    } = this;
+    debug('Refreshing all slots...');
+    googletag.cmd.push(() => {
+      googletag.pubads().refresh();
+    });
+  }
+}
+
+const viewports = {
+  default: [0, 0],
+  tablet: [728, 0],
+  desktop: [1024, 0],
+  laptop: [1400, 700]
+};
+const positions = {
+  top: {
+    size: [[320, 50], [1382, 600], [320, 100], [970, 90], [1024, 300], [970, 250], [300, 150], [1382, 300], [300, 100], [250, 250], [300, 250]],
+    sizeMapping: {
+      default: [[320, 50], [320, 100], [300, 150], [300, 100], [250, 250], [300, 250]],
+      tablet: [[320, 100], [300, 150], [300, 100]],
+      desktop: [[320, 100], [970, 90], [1024, 300], [970, 250], [300, 150], [300, 100]],
+      laptop: [[320, 100], [1382, 600], [320, 100], [970, 90], [1024, 300], [970, 250], [300, 150], [1382, 300], [300, 100]]
+    }
+  },
+  grid: {
+    size: [[250, 250], [300, 250], 'fluid']
+  },
+  sidebar: {
+    size: [[300, 600], [300, 250], [160, 600]],
+    sizeMapping: {
+      default: [[300, 250]],
+      laptop: [[300, 250], [300, 600], [160, 600]]
+    }
+  },
+  fullwidth: {
+    size: [[300, 250], [728, 90], [970, 250]],
+    sizeMapping: {
+      default: [[300, 250]],
+      tablet: [[300, 250], [728, 90]],
+      desktop: [[300, 250], [728, 90], [970, 250]],
+      laptop: [[300, 250], [728, 90], [970, 250]]
+    }
+  },
+  content: {
+    size: [[300, 600], [300, 100], [728, 90], [300, 250], [320, 100], [320, 50], [336, 280]],
+    sizeMapping: {
+      default: [[300, 600], [300, 100], [300, 250], [320, 100], [320, 50]],
+      tablet: [[300, 100], [728, 90], [300, 250], [320, 100], [320, 50], [336, 280]],
+      desktop: [[300, 100], [728, 90], [300, 250], [320, 100], [336, 280]],
+      laptop: [[300, 100], [728, 90], [300, 250], [320, 100], [336, 280]]
+    }
+  }
+};
+
+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 = {
+  children: PropTypes__default["default"].node.isRequired,
+  defaultSlotPath: PropTypes__default["default"].string,
+  slotsPath: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
+  enableSingleRequest: PropTypes__default["default"].bool,
+  autoInit: PropTypes__default["default"].bool,
+  resizeDebounceDelay: PropTypes__default["default"].number,
+  refreshOnResize: PropTypes__default["default"].bool,
+  positions: adViewports,
+  viewports: adViewports
+};
+const defaultProps = {
+  defaultSlotPath: null,
+  slotsPath: null,
+  enableSingleRequest: true,
+  autoInit: true,
+  resizeDebounceDelay: 500,
+  refreshOnResize: false,
+  positions: positions,
+  viewports: viewports
+};
+function AdsProvider(_ref) {
+  let {
+    children,
+    defaultSlotPath,
+    slotsPath,
+    enableSingleRequest,
+    autoInit,
+    resizeDebounceDelay,
+    refreshOnResize,
+    viewports,
+    positions
+  } = _ref;
+  const [ready, setReady] = React.useState(false);
+  const adsRef = React.useRef(null);
+  const ads = React.useMemo(() => {
+    if (adsRef.current === null) {
+      adsRef.current = new AdsManager({
+        enableSingleRequest,
+        autoInit
+      });
+    }
+    return adsRef.current;
+  }, [enableSingleRequest, autoInit]);
+  React.useEffect(() => {
+    let onReady = null;
+    if (!ads.isReady()) {
+      onReady = () => setReady(true);
+      ads.on('ready', onReady);
+    } else {
+      setReady(true);
+    }
+    return () => {
+      if (onReady != null) {
+        ads.off('ready', onReady);
+      }
+    };
+  }, [ads, setReady]);
+  React.useEffect(() => {
+    if (!autoInit) {
+      ads.init();
+    }
+  }, [ads, autoInit]);
+  React.useEffect(() => {
+    const onResize = debounce__default["default"](() => ads.refreshAllSlots(), resizeDebounceDelay);
+    if (refreshOnResize) {
+      window.addEventListener('resize', onResize);
+    }
+    return () => {
+      if (refreshOnResize) {
+        window.removeEventListener('resize', onResize);
+      }
+      onResize.cancel();
+    };
+  }, [ads, resizeDebounceDelay, refreshOnResize]);
+  const value = React.useMemo(() => ({
+    ready,
+    ads,
+    viewports,
+    positions,
+    slotsPath: defaultSlotPath !== null ? {
+      default: defaultSlotPath,
+      ...slotsPath
+    } : {
+      ...slotsPath
+    }
+  }), [ready, ads, viewports, positions, slotsPath, defaultSlotPath]);
+  return /*#__PURE__*/jsxRuntime.jsx(AdsContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+AdsProvider.propTypes = propTypes;
+AdsProvider.defaultProps = defaultProps;
+
+exports.AdSlot = AdSlot;
+exports.AdsManager = AdsManager;
+exports.AdsProvider = AdsProvider;
+exports.useAdsContext = useAdsContext;

package/dist/es.js

@@ -0,0 +1,645 @@
+import debounce from 'lodash/debounce';
+import PropTypes from 'prop-types';
+import React, { useContext, useState, useRef, useMemo, useEffect } from 'react';
+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';
+
+class AdSlot extends EventEmitter {
+  constructor(id, path, size) {
+    let opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    super();
+    this.options = {
+      sizeMapping: null,
+      targeting: {},
+      categoryExclusions: [],
+      visible: true,
+      ...opts
+    };
+    const {
+      visible
+    } = this.options;
+    this.elementId = id;
+    this.adPath = path;
+    this.adSize = size;
+    this.adSlot = null;
+    this.visible = visible;
+    this.wasVisible = visible;
+    this.rendered = false;
+    this.displayed = false;
+    this.viewable = false;
+    this.destroyed = false;
+    this.renderEvent = null;
+    this.refreshDisabled = false;
+  }
+  updateAdSlot() {
+    const {
+      adSlot
+    } = this;
+    const {
+      targeting = {},
+      categoryExclusions = [],
+      sizeMapping = null
+    } = this.options;
+
+    // Size mapping
+    if (sizeMapping !== null) {
+      adSlot.defineSizeMapping(sizeMapping);
+    }
+
+    // Targeting
+    const targetingKeys = targeting !== null ? Object.keys(targeting) : null;
+    if (targetingKeys !== null && targetingKeys.length > 0) {
+      targetingKeys.forEach(key => {
+        adSlot.setTargeting(key, targeting[key]);
+      });
+    } else {
+      adSlot.clearTargeting();
+    }
+
+    // Category exclusions
+    if (categoryExclusions !== null && categoryExclusions.length > 0) {
+      categoryExclusions.forEach(exclusion => {
+        adSlot.setCategoryExclusion(exclusion);
+      });
+    } else {
+      adSlot.clearCategoryExclusions();
+    }
+  }
+  setAdSlot(slot) {
+    this.adSlot = slot;
+    if (slot !== null) {
+      this.updateAdSlot();
+    }
+    return this;
+  }
+  setRenderEvent(event) {
+    this.renderEvent = event;
+    this.rendered = true;
+    this.emit('render', event, this);
+    return this;
+  }
+  setViewable(viewable) {
+    this.viewable = viewable;
+  }
+  setDisplayed(displayed) {
+    this.displayed = displayed;
+    return this;
+  }
+
+  // eslint-disable-next-line
+  setVisible(visible) {
+    this.visible = visible;
+    if (!this.wasVisible && visible) {
+      this.wasVisible = visible;
+    }
+    this.emit('visible', visible, this);
+    return this;
+  }
+  setRefreshDisabled() {
+    this.refreshDisabled = true;
+  }
+  destroy() {
+    if (this.destroyed) {
+      return;
+    }
+    this.removeAllListeners();
+    this.adSlot = null;
+    this.rendered = false;
+    this.displayed = false;
+    this.renderEvent = null;
+    this.destroyed = true;
+  }
+  getElementId() {
+    return this.elementId;
+  }
+  getAdSlot() {
+    return this.adSlot;
+  }
+  getAdPath() {
+    return this.adPath;
+  }
+  getAdSize() {
+    return this.adSize;
+  }
+  getTargeting() {
+    const {
+      targeting
+    } = this.options;
+    return targeting;
+  }
+  isVisible() {
+    return this.visible;
+  }
+  isDefined() {
+    return this.adSlot !== null;
+  }
+  isDisplayed() {
+    return this.displayed;
+  }
+  isViewable() {
+    return this.viewable;
+  }
+  isRendered() {
+    return this.rendered;
+  }
+  isRefreshDisabled() {
+    return this.refreshDisabled;
+  }
+  isDestroyed() {
+    return this.destroyed;
+  }
+  isEmpty() {
+    if (this.renderEvent === null) {
+      return false;
+    }
+    return this.renderEvent.isEmpty;
+  }
+  canBeDisplayed() {
+    return this.isDefined() && !this.isDisplayed();
+  }
+  getRenderedSize() {
+    if (this.renderEvent === null) {
+      return null;
+    }
+    const {
+      size = null
+    } = this.renderEvent;
+    return size !== null ? {
+      width: size[0],
+      height: size[1]
+    } : null;
+  }
+}
+
+/* globals refreshDisabledLineItems: [] */
+const debug = createDebug('site:ads');
+class AdsManager extends EventEmitter {
+  static index = 0;
+  static createAdId() {
+    const newId = `div-gpt-ad-${new Date().getTime()}-${Math.round(Math.random() * (Math.random() * 1000))}-${AdsManager.index}`;
+    AdsManager.index += 1;
+    return newId;
+  }
+  static getArticleTargeting(article) {
+    if (article === null) {
+      return null;
+    }
+    const {
+      id,
+      title,
+      slug,
+      metadata: {
+        categories = [],
+        authors = [],
+        sponsors = [],
+        safeForDistribution = true
+      }
+    } = article;
+    return {
+      title,
+      slug,
+      postID: id,
+      categories: categories.map(it => it.slug),
+      authors: authors.map(it => it.slug),
+      sponsors: sponsors.map(it => it.name),
+      GoogleSafeTargeting: safeForDistribution
+    };
+  }
+  static getSectionTargeting(section) {
+    return section !== null ? {
+      section: section.slug
+    } : null;
+  }
+  static getIndexTargeting(index) {
+    return index !== null ? {
+      index: index.slug
+    } : null;
+  }
+  static getIndexItemTargeting(index, item) {
+    return index !== null && item !== null ? {
+      [index.id]: [item.slug]
+    } : null;
+  }
+  constructor() {
+    let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    super();
+    this.options = {
+      disabled: false,
+      disablePersonnalizedAds: false,
+      enableSingleRequest: false,
+      autoInit: false,
+      ...opts
+    };
+    this.onGPTReady = this.onGPTReady.bind(this);
+    this.onSlotRenderEnded = this.onSlotRenderEnded.bind(this);
+    this.onSlotImpressionViewable = this.onSlotImpressionViewable.bind(this);
+    this.onSlotVisibleChange = this.onSlotVisibleChange.bind(this);
+    this.disabled = this.options.disabled;
+    this.personnalizedAdsDisabled = this.options.disablePersonnalizedAds;
+    this.ready = false;
+    this.enabled = false;
+    this.googletag = window.googletag;
+    this.slots = [];
+    if (this.options.autoInit) {
+      this.init();
+    }
+  }
+  onGPTReady() {
+    const {
+      googletag
+    } = this;
+    this.ready = true;
+    googletag.cmd.push(() => {
+      const {
+        disabled,
+        personnalizedAdsDisabled
+      } = this;
+      const {
+        enableSingleRequest
+      } = this.options;
+      if (disabled) {
+        debug('Disable initial load');
+        googletag.pubads().disableInitialLoad();
+      }
+      if (enableSingleRequest) {
+        debug('Enable single request');
+        googletag.pubads().enableSingleRequest();
+      }
+      if (personnalizedAdsDisabled) {
+        debug('Disable personalized ads');
+        googletag.pubads().setRequestNonPersonalizedAds(1);
+      }
+      googletag.pubads().enableLazyLoad({
+        // Fetch slots within 5 viewports.
+        fetchMarginPercent: 300,
+        // Render slots within 2 viewports.
+        renderMarginPercent: 100,
+        // Double the above values on mobile, where viewports are smaller
+        // and users tend to scroll faster.
+        mobileScaling: 1.0
+      });
+      googletag.pubads().enableVideoAds();
+      googletag.pubads().addEventListener('slotRenderEnded', this.onSlotRenderEnded);
+      googletag.pubads().addEventListener('impressionViewable', this.onSlotImpressionViewable);
+      googletag.enableServices();
+      this.enabled = true;
+      debug('GPT is ready');
+      if (!disabled) {
+        this.emit('ready');
+      }
+    });
+  }
+  onSlotRenderEnded(event) {
+    const {
+      slot: eventSlot,
+      lineItemId = null,
+      size = []
+    } = event;
+    const renderSlot = this.slots.find(slot => eventSlot === slot.getAdSlot()) || null;
+    if (renderSlot !== null) {
+      renderSlot.setRenderEvent(event);
+    }
+    const lineItems = window.refreshDisabledLineItems || [];
+    if (isArray(lineItems) && lineItems.indexOf(lineItemId) > -1) {
+      renderSlot.setRefreshDisabled();
+    }
+    if (event.isEmpty) {
+      debug('Render ended for slot #%s(%s). Slot is empty.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
+    } else {
+      debug('Render ended for slot #%s(%s) with size %s.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath(), size !== null ? size.join('x') : '-');
+    }
+  }
+  onSlotImpressionViewable(event) {
+    const {
+      slot: eventSlot
+    } = event;
+    const impressionSlot = this.slots.find(slot => eventSlot === slot.getAdSlot()) || null;
+    if (impressionSlot !== null) {
+      impressionSlot.setViewable(true);
+    }
+    debug('Impression viewable for slot #%s(%s).', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  onSlotVisibleChange(visible, slot) {
+    debug('Slot #%s(%s) visibility change to %s', slot.getElementId(), slot.getAdPath(), visible ? 'visible' : 'not visible');
+  }
+  init() {
+    const {
+      googletag
+    } = this;
+    debug('Initializing ads manager...');
+    googletag.cmd.push(() => {
+      this.onGPTReady();
+    });
+  }
+  isReady() {
+    return this.ready && this.enabled && !this.disabled;
+  }
+  isDisabled() {
+    return this.disabled;
+  }
+  setDisabled(disabled) {
+    const shouldRefresh = this.disabled && !disabled;
+    this.disabled = disabled;
+    if (shouldRefresh) {
+      this.refreshAllSlots();
+    }
+    if (this.enabled && !disabled) {
+      this.emit('ready');
+    }
+  }
+  disablePersonnalizedAds(disablePersonnalizedAds) {
+    const {
+      googletag
+    } = this;
+    this.personnalizedAdsDisabled = disablePersonnalizedAds;
+    googletag.cmd.push(() => {
+      googletag.pubads().setRequestNonPersonalizedAds(disablePersonnalizedAds ? 1 : 0);
+    });
+  }
+  createSlot(path, size) {
+    let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    const {
+      id: providedId = null
+    } = opts;
+    const id = providedId || AdsManager.createAdId();
+    debug('Creating slot #%s(%s)...', id, path);
+    const slot = new AdSlot(id, path, size, {
+      ...opts
+    });
+    slot.on('visible', this.onSlotVisibleChange);
+    this.slots.push(slot);
+    return slot;
+  }
+  defineSlot(slot) {
+    const {
+      googletag
+    } = this;
+    googletag.cmd.push(() => {
+      if (slot.isDestroyed() || slot.isDefined()) {
+        return;
+      }
+      const id = slot.getElementId();
+      const path = slot.getAdPath();
+      const size = slot.getAdSize();
+      debug('Defining slot #%s(%s)...', id, path);
+      const adSlot = googletag.defineSlot(path, size, id).addService(googletag.pubads());
+      slot.setAdSlot(adSlot);
+    });
+  }
+  displaySlots() {
+    const slotsToDisplay = this.slots.filter(slot => slot.canBeDisplayed());
+    const slotsCount = slotsToDisplay.length;
+    if (slotsCount > 0) {
+      debug('Displaying %i slot(s)...', slotsCount);
+      slotsToDisplay.forEach(slot => this.callDisplaySlot(slot));
+    }
+    return true;
+  }
+  displaySlot(slot) {
+    if (!slot.canBeDisplayed()) {
+      return;
+    }
+    this.callDisplaySlot(slot);
+  }
+
+  /* eslint-disable */
+  callDisplaySlot(slot) {
+    const {
+      googletag
+    } = this;
+    googletag.cmd.push(() => {
+      const id = slot.getElementId();
+      const path = slot.getAdPath();
+      debug('Displaying slot #%s(%s)...', id, path);
+      googletag.display(slot.getAdSlot());
+      if (googletag.pubads().isInitialLoadDisabled()) {
+        googletag.pubads().refresh([slot.getAdSlot()]);
+      }
+      slot.setDisplayed(true);
+    });
+  }
+  /* eslint-enable */
+
+  destroySlot(id) {
+    const {
+      googletag
+    } = this;
+    const slot = isObject(id) ? id : this.slots.find(it => it.getElementId() === id) || null;
+    if (slot === null || slot.isDestroyed()) {
+      return;
+    }
+    const adSlot = slot.getAdSlot();
+    slot.destroy();
+    this.slots = this.slots.filter(it => it !== slot);
+    if (adSlot !== null) {
+      debug('Destroying slot #%s(%s)...', adSlot.getAdUnitPath(), adSlot.getSlotElementId());
+      googletag.cmd.push(() => {
+        googletag.destroySlots([adSlot]);
+      });
+    }
+  }
+  refreshSlot(id) {
+    const {
+      googletag
+    } = this;
+    const slot = isObject(id) ? id : this.slots.find(it => it.getElementId() === id) || null;
+    if (slot === null || slot.isDestroyed() || slot.isRefreshDisabled()) {
+      return;
+    }
+    const adSlot = slot.getAdSlot();
+    if (adSlot !== null) {
+      debug('Refreshing slot #%s(%s)...', adSlot.getAdUnitPath(), slot.getElementId());
+      googletag.cmd.push(() => {
+        googletag.pubads().refresh([adSlot], {
+          changeCorrelator: false
+        });
+      });
+    }
+  }
+  refreshSlots(ids) {
+    const {
+      googletag
+    } = this;
+    const slots = ids.map(id => isObject(id) ? id : this.slots.find(it => !it.isDestroyed() && it.getElementId() === id) || null).filter(it => it !== null).map(it => it.getAdSlot());
+    if (slots.length === 0) {
+      return;
+    }
+    debug('Refreshing slots %o...', slots.map(slot => `#${slot.getElementId()}(${slot.getAdUnitPath()})`));
+    googletag.cmd.push(() => {
+      googletag.pubads().refresh(slots);
+    });
+  }
+  refreshAllSlots() {
+    const {
+      googletag
+    } = this;
+    debug('Refreshing all slots...');
+    googletag.cmd.push(() => {
+      googletag.pubads().refresh();
+    });
+  }
+}
+
+const viewports = {
+  default: [0, 0],
+  tablet: [728, 0],
+  desktop: [1024, 0],
+  laptop: [1400, 700]
+};
+const positions = {
+  top: {
+    size: [[320, 50], [1382, 600], [320, 100], [970, 90], [1024, 300], [970, 250], [300, 150], [1382, 300], [300, 100], [250, 250], [300, 250]],
+    sizeMapping: {
+      default: [[320, 50], [320, 100], [300, 150], [300, 100], [250, 250], [300, 250]],
+      tablet: [[320, 100], [300, 150], [300, 100]],
+      desktop: [[320, 100], [970, 90], [1024, 300], [970, 250], [300, 150], [300, 100]],
+      laptop: [[320, 100], [1382, 600], [320, 100], [970, 90], [1024, 300], [970, 250], [300, 150], [1382, 300], [300, 100]]
+    }
+  },
+  grid: {
+    size: [[250, 250], [300, 250], 'fluid']
+  },
+  sidebar: {
+    size: [[300, 600], [300, 250], [160, 600]],
+    sizeMapping: {
+      default: [[300, 250]],
+      laptop: [[300, 250], [300, 600], [160, 600]]
+    }
+  },
+  fullwidth: {
+    size: [[300, 250], [728, 90], [970, 250]],
+    sizeMapping: {
+      default: [[300, 250]],
+      tablet: [[300, 250], [728, 90]],
+      desktop: [[300, 250], [728, 90], [970, 250]],
+      laptop: [[300, 250], [728, 90], [970, 250]]
+    }
+  },
+  content: {
+    size: [[300, 600], [300, 100], [728, 90], [300, 250], [320, 100], [320, 50], [336, 280]],
+    sizeMapping: {
+      default: [[300, 600], [300, 100], [300, 250], [320, 100], [320, 50]],
+      tablet: [[300, 100], [728, 90], [300, 250], [320, 100], [320, 50], [336, 280]],
+      desktop: [[300, 100], [728, 90], [300, 250], [320, 100], [336, 280]],
+      laptop: [[300, 100], [728, 90], [300, 250], [320, 100], [336, 280]]
+    }
+  }
+};
+
+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 = {
+  children: PropTypes.node.isRequired,
+  defaultSlotPath: PropTypes.string,
+  slotsPath: PropTypes.objectOf(PropTypes.string),
+  enableSingleRequest: PropTypes.bool,
+  autoInit: PropTypes.bool,
+  resizeDebounceDelay: PropTypes.number,
+  refreshOnResize: PropTypes.bool,
+  positions: adViewports,
+  viewports: adViewports
+};
+const defaultProps = {
+  defaultSlotPath: null,
+  slotsPath: null,
+  enableSingleRequest: true,
+  autoInit: true,
+  resizeDebounceDelay: 500,
+  refreshOnResize: false,
+  positions: positions,
+  viewports: viewports
+};
+function AdsProvider(_ref) {
+  let {
+    children,
+    defaultSlotPath,
+    slotsPath,
+    enableSingleRequest,
+    autoInit,
+    resizeDebounceDelay,
+    refreshOnResize,
+    viewports,
+    positions
+  } = _ref;
+  const [ready, setReady] = useState(false);
+  const adsRef = useRef(null);
+  const ads = useMemo(() => {
+    if (adsRef.current === null) {
+      adsRef.current = new AdsManager({
+        enableSingleRequest,
+        autoInit
+      });
+    }
+    return adsRef.current;
+  }, [enableSingleRequest, autoInit]);
+  useEffect(() => {
+    let onReady = null;
+    if (!ads.isReady()) {
+      onReady = () => setReady(true);
+      ads.on('ready', onReady);
+    } else {
+      setReady(true);
+    }
+    return () => {
+      if (onReady != null) {
+        ads.off('ready', onReady);
+      }
+    };
+  }, [ads, setReady]);
+  useEffect(() => {
+    if (!autoInit) {
+      ads.init();
+    }
+  }, [ads, autoInit]);
+  useEffect(() => {
+    const onResize = debounce(() => ads.refreshAllSlots(), resizeDebounceDelay);
+    if (refreshOnResize) {
+      window.addEventListener('resize', onResize);
+    }
+    return () => {
+      if (refreshOnResize) {
+        window.removeEventListener('resize', onResize);
+      }
+      onResize.cancel();
+    };
+  }, [ads, resizeDebounceDelay, refreshOnResize]);
+  const value = useMemo(() => ({
+    ready,
+    ads,
+    viewports,
+    positions,
+    slotsPath: defaultSlotPath !== null ? {
+      default: defaultSlotPath,
+      ...slotsPath
+    } : {
+      ...slotsPath
+    }
+  }), [ready, ads, viewports, positions, slotsPath, defaultSlotPath]);
+  return /*#__PURE__*/jsx(AdsContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+AdsProvider.propTypes = propTypes;
+AdsProvider.defaultProps = defaultProps;
+
+export { AdSlot, AdsManager, AdsProvider, useAdsContext };

package/package.json

@@ -0,0 +1,61 @@
+{
+    "name": "@folklore/ads",
+    "version": "0.0.2",
+    "description": "Ads library",
+    "keywords": [
+        "javascript",
+        "size",
+        "ui",
+        "utils"
+    ],
+    "homepage": "https://github.com/folkloreinc/folklore-js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/folkloreinc/folklore-js.git"
+    },
+    "author": {
+        "name": "Folklore",
+        "email": "info@folklore.email"
+    },
+    "contributors": [
+        {
+            "name": "David Mongeau-Petitpas",
+            "email": "dmp@folklore.email"
+        },
+        {
+            "name": "Nicolas Roy-Bourdages",
+            "email": "nrb@folklore.email"
+        }
+    ],
+    "main": "dist/cjs.js",
+    "module": "dist/es.js",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "clean": "rm -rf dist",
+        "build": "rollup --config ../../rollup.config.js",
+        "prepare": "npm run clean && npm run build"
+    },
+    "devDependencies": {
+        "prop-types": "^15.7.2",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+    },
+    "peerDependencies": {
+        "prop-types": "^15.7.2",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "a13caffa03c30420cb515e32448911740ce67c30",
+    "dependencies": {
+        "@folklore/hooks": "^0.0.41",
+        "@folklore/tracking": "^0.0.16",
+        "debug": "^4.3.4",
+        "lodash": "^4.17.21",
+        "wolfy87-eventemitter": "^5.2.9"
+    }
+}