@folklore/ads 0.0.125 → 0.0.128

package/dist/index.d.ts

@@ -0,0 +1,335 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { Ref, ReactNode, ElementType } from 'react';
+import { EventEmitter } from '@folklore/events';
+
+declare const adPath: any;
+declare const adSize: any;
+declare const adSizeMapping: any;
+declare const adViewports: any;
+declare const adSlot: any;
+declare const adSlots: any;
+declare const adTargeting: any;
+
+declare const propTypes_d_adPath: typeof adPath;
+declare const propTypes_d_adSize: typeof adSize;
+declare const propTypes_d_adSizeMapping: typeof adSizeMapping;
+declare const propTypes_d_adSlot: typeof adSlot;
+declare const propTypes_d_adSlots: typeof adSlots;
+declare const propTypes_d_adTargeting: typeof adTargeting;
+declare const propTypes_d_adViewports: typeof adViewports;
+declare namespace propTypes_d {
+  export {
+    propTypes_d_adPath as adPath,
+    propTypes_d_adSize as adSize,
+    propTypes_d_adSizeMapping as adSizeMapping,
+    propTypes_d_adSlot as adSlot,
+    propTypes_d_adSlots as adSlots,
+    propTypes_d_adTargeting as adTargeting,
+    propTypes_d_adViewports as adViewports,
+  };
+}
+
+type AdSize = googletag.SingleSize;
+type Viewport = googletag.SingleSizeArray;
+type AdSizeMapping = googletag.SizeMapping;
+interface Size {
+    width: number;
+    height: number;
+}
+interface Viewports {
+    [name: string]: Viewport;
+}
+interface SlotDefinition {
+    sizeMapping?: Record<string, AdSize[]> | boolean | null | AdSizeMapping[] | null;
+    size?: AdSize[];
+    path?: string | null;
+}
+interface Slot extends SlotDefinition {
+    sizeMapping?: AdSizeMapping[] | null;
+}
+interface Slots {
+    [name: string]: Slot;
+}
+interface SlotsDefinition {
+    [name: string]: SlotDefinition;
+}
+interface AdsTargeting {
+    refreshAds?: 'inactive' | false | null | number;
+    disabled?: boolean;
+    viewport?: string | null;
+    [key: string]: unknown;
+}
+interface RichAdType {
+    type: string;
+    [key: string]: unknown;
+}
+
+type RenderEvent = googletag.events.SlotRenderEndedEvent & {
+    width: number;
+    height: number;
+    isFluid: boolean;
+    slot: AdSlot;
+};
+interface AdSlotOptions$1 {
+    sizeMapping?: null | AdSizeMapping[];
+    targeting?: AdsTargeting;
+    categoryExclusions?: Array<string>;
+    visible?: boolean;
+}
+type AddSlotEvents = {
+    render: {
+        event: googletag.events.SlotRenderEndedEvent;
+        slot: AdSlot;
+    };
+    visible: {
+        visible: boolean;
+        slot: AdSlot;
+    };
+    destroy: AdSlot;
+};
+declare class AdSlot extends EventEmitter<AddSlotEvents> {
+    options: AdSlotOptions$1;
+    elementId: string;
+    adPath: string;
+    adSize: string | Array<string>;
+    visible: boolean;
+    wasVisible: boolean;
+    adSlot: googletag.Slot | null;
+    rendered: boolean;
+    displayed: boolean;
+    viewable: boolean;
+    renderEvent: googletag.events.SlotRenderEndedEvent;
+    refreshDisabled: boolean;
+    destroyed: boolean;
+    constructor(id: any, path: any, size: any, opts?: {});
+    updateAdSlot(): void;
+    setAdSlot(slot: any): this;
+    setRenderEvent(event: googletag.events.SlotRenderEndedEvent): this;
+    setViewable(viewable: any): void;
+    setDisplayed(displayed: any): this;
+    setVisible(visible: any): this;
+    setRefreshDisabled(): void;
+    setTargeting(targeting: any): void;
+    destroy(): void;
+    getElementId(): string;
+    getAdSlot(): googletag.Slot;
+    getAdPath(): string;
+    getAdSize(): string | string[];
+    getTargeting(): AdsTargeting;
+    isVisible(): boolean;
+    isDefined(): boolean;
+    isDisplayed(): boolean;
+    isViewable(): boolean;
+    isRendered(): boolean;
+    isRefreshDisabled(): boolean;
+    isDestroyed(): boolean;
+    isEmpty(): boolean;
+    canBeDisplayed(): boolean;
+    getRenderedSize(): {
+        width: string | number;
+        height: string | number;
+        isFluid: boolean;
+    };
+}
+
+interface AdProps {
+    slot: string;
+    path?: string | null;
+    size?: AdSize[] | null;
+    sizeMapping?: AdSizeMapping[] | null;
+    viewport?: string | null;
+    targeting?: AdsTargeting | null;
+    refreshInterval?: number | null;
+    alwaysRender?: boolean;
+    disabled?: boolean;
+    disableTracking?: boolean;
+    shouldKeepSize?: boolean;
+    withoutStyle?: boolean;
+    withoutMinimumSize?: boolean;
+    withReactId?: boolean;
+    className?: string | null;
+    emptyClassName?: string | null;
+    adClassName?: string | null;
+    richAdClassName?: string | null;
+    richAdIframeClassName?: string | null;
+    onRender?: ((event: RenderEvent) => void) | null;
+    onDestroy?: ((slot: AdSlot) => void) | null;
+    onRichAd?: ((richAd: RichAdType) => void) | null;
+    slotRef?: Ref<AdSlot> | null;
+}
+declare function Ad({ slot: slotName, path: providedPath, size: providedSize, sizeMapping: providedSizeMapping, viewport: providedViewport, targeting: providedTargeting, refreshInterval: providedRefreshInterval, alwaysRender, disabled: providedDisabled, disableTracking, shouldKeepSize, withoutStyle, withoutMinimumSize, withReactId, className, emptyClassName, adClassName, richAdClassName, richAdIframeClassName, onRender, onDestroy, onRichAd, slotRef, }: AdProps): react_jsx_runtime.JSX.Element;
+
+interface RichAdProps {
+    richAd: RichAdType;
+    [key: string]: unknown;
+}
+declare function RichAd({ richAd, ...props }: RichAdProps): react_jsx_runtime.JSX.Element;
+
+declare global {
+    interface Window {
+        googletag?: typeof googletag;
+        refreshDisabledLineItems?: number[];
+    }
+}
+interface AdSlotOptions extends AdSlotOptions$1 {
+    id?: string;
+}
+type AdsManagerEvents = {
+    ready: void;
+    'destroy:slot': AdSlot;
+};
+declare class AdsManager extends EventEmitter<AdsManagerEvents> {
+    static ID_PREFIX: string;
+    disabled: boolean;
+    personnalizedAdsDisabled: boolean;
+    ready: boolean;
+    enabled: boolean;
+    googletag: typeof googletag;
+    slots: AdSlot[];
+    index: number;
+    options: {
+        disabled: boolean;
+        disablePersonnalizedAds: boolean;
+        disableSingleRequest: boolean;
+        disableLazyLoad: boolean;
+        disableVideoAds: boolean;
+        autoInit: boolean;
+        mobileScaling?: number;
+        renderMarginPercent?: number;
+        fetchMarginPercent?: number;
+    };
+    static getArticleTargeting(article: any): {
+        title: any;
+        slug: any;
+        postID: any;
+        categories: any;
+        authors: any;
+        sponsors: any;
+        GoogleSafeTargeting: any;
+    };
+    static getSectionTargeting(section: any): {
+        section: any;
+    };
+    static getIndexTargeting(index: any): {
+        index: any;
+    };
+    static getIndexItemTargeting(index: any, item: any): {
+        [index.id]: any[];
+    };
+    constructor(opts?: {});
+    createAdId(): string;
+    init(): void;
+    initGpt(): void;
+    onSlotRenderEnded(event: googletag.events.SlotRenderEndedEvent): void;
+    onSlotImpressionViewable(event: any): void;
+    onSlotVisibleChange({ visible, slot }: {
+        visible: any;
+        slot: any;
+    }): void;
+    isReady(): boolean;
+    isDisabled(): boolean;
+    setDisabled(disabled: any): void;
+    disablePersonnalizedAds(disablePersonnalizedAds: any): void;
+    createSlot(path: string, size: AdSize, opts?: AdSlotOptions): AdSlot;
+    defineSlot(slot: any): void;
+    displaySlots(): boolean;
+    displaySlot(slot: any): void;
+    callDisplaySlot(slot: any): void;
+    destroySlot(id: any): void;
+    refreshSlot(id: any): void;
+    refreshSlots(ids: any): void;
+    refreshAllSlots(): void;
+}
+
+interface AdsContextType {
+    ready: boolean;
+    ads?: AdsManager;
+    viewports?: Viewports;
+    viewport?: string | null;
+    slots?: Slots;
+    slotsPath?: Record<string, string>;
+    trackingDisabled?: boolean;
+    richAdComponents?: Record<string, ElementType>;
+}
+declare const useAdsContext: () => AdsContextType;
+interface AdsProviderProps {
+    children: ReactNode;
+    defaultSlotPath?: string | null;
+    slotsPath?: Record<string, string> | null;
+    disableSingleRequest?: boolean;
+    disableVideoAds?: boolean;
+    disableLazyLoad?: boolean;
+    autoInit?: boolean;
+    resizeDebounceDelay?: number;
+    refreshOnResize?: boolean;
+    mobileScaling?: number;
+    renderMarginPercent?: number;
+    fetchMarginPercent?: number;
+    viewport?: string | null;
+    viewports?: Viewports;
+    slots?: SlotsDefinition;
+    richAdComponents?: Record<string, ElementType> | null;
+    disabled?: boolean;
+    disableTracking?: boolean;
+}
+declare function AdsProvider({ children, defaultSlotPath, slotsPath, disableSingleRequest, disableVideoAds, disableLazyLoad, autoInit, resizeDebounceDelay, refreshOnResize, mobileScaling, renderMarginPercent, fetchMarginPercent, viewport, viewports, slots, richAdComponents, disabled, disableTracking, }: AdsProviderProps): react_jsx_runtime.JSX.Element;
+
+declare const useAdsTargeting: () => AdsTargeting | null;
+interface AdsTargetingProviderProps {
+    children: ReactNode;
+    targeting?: AdsTargeting;
+    replace?: boolean;
+}
+declare function AdsTargetingProvider({ children, targeting, replace, }: AdsTargetingProviderProps): react_jsx_runtime.JSX.Element;
+
+declare const viewports: Viewports;
+declare const slots: SlotsDefinition;
+
+interface UseAdOptions {
+    id?: string;
+    sizeMapping?: AdSizeMapping[] | null;
+    viewport?: string | null;
+    targeting?: AdsTargeting | null;
+    categoryExclusions?: string[] | null;
+    refreshInterval?: number | null;
+    alwaysRender?: boolean;
+    onRender?: (event: RenderEvent) => void | null;
+    onDestroy?: (slot: AdSlot) => void | null;
+    disabled?: boolean;
+    disableTracking?: boolean;
+    rootMargin?: string;
+}
+declare function useAd(path: string, size: any, { id, sizeMapping, viewport, targeting, categoryExclusions, refreshInterval, alwaysRender, onRender, onDestroy, disabled, disableTracking, rootMargin, }?: UseAdOptions): {
+    width: string | number;
+    height: string | number;
+    isFluid: boolean;
+    refObserver: react.RefObject<HTMLElement>;
+    slot: AdSlot;
+    disabled: boolean;
+    id: string;
+    isRendered: boolean;
+    isEmpty: boolean;
+    isVisible: boolean;
+    renderEvent: any;
+};
+
+declare function useAdsTracking(): (action: string, slot?: AdSlot, renderEvent?: RenderEvent) => void;
+
+interface UseRichAdOptions {
+    onRichAd?: (richAd: RichAdType) => void | null;
+}
+declare function useRichAd(containerRef: any, id: string, opts?: UseRichAdOptions): any;
+
+declare function normalizeAdSizes(size: any): AdSize[];
+declare function getAdSizes(sizes: any): AdSize[];
+declare function getMinimumAdSize(sizes: any): Size;
+declare function sizeFitsInViewport(size: AdSize, viewport: Viewport): boolean;
+declare function getSortedViewports(viewports: Viewports): any;
+declare function buildSizeMappingFromViewports(sizeMapping: any, viewports: any): AdSizeMapping[];
+declare function buildSizeMappingFromSizes(sizes: any, viewports: any): AdSizeMapping[];
+declare function getSizeMappingFromSlot({ size: allSizes, sizeMapping }: Slot | SlotDefinition, viewports: Viewports): AdSizeMapping[] | null;
+declare function getSizeFromSizeMapping(sizeMapping: any): AdSize[] | null;
+
+export { Ad, AdSlot, AdsManager, AdsProvider, AdsTargetingProvider, propTypes_d as PropTypes, RichAd, buildSizeMappingFromSizes, buildSizeMappingFromViewports, getAdSizes, getMinimumAdSize, getSizeFromSizeMapping, getSizeMappingFromSlot, getSortedViewports, normalizeAdSizes, sizeFitsInViewport, slots, useAd, useAdsContext, useAdsTargeting, useAdsTracking, useRichAd, viewports };
+export type { AdSize, AdSizeMapping, AdsTargeting, RichAdType, Size, Slot, SlotDefinition, Slots, SlotsDefinition, Viewport, Viewports };

package/dist/{es.js → index.js}

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import React, { useContext, useState, useRef, useMemo, useEffect, createContext, useCallback, useId } from 'react';
+import { useState, useRef, useMemo, useEffect, useContext, createContext, useCallback, useId } from 'react';
 import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import sortBy from 'lodash/sortBy';
 import uniqBy from 'lodash/uniqBy';
 import debounce from 'lodash/debounce';
+import { EventEmitter } from '@folklore/events';
 import createDebug from 'debug';
-import EventEmitter from 'wolfy87-eventemitter';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { getComponentFromName } from '@folklore/utils';
 import { useIntersectionObserver, useWindowEvent } from '@folklore/hooks';
@@ -50,7 +50,7 @@ function getAdSizes(sizes) {
   return uniqBy(sizes, size => isArray(size) ? size.join('x') : size);
 }
 function getMinimumAdSize(sizes) {
-  return getAdSizes(sizes).filter(size => size !== 'fluid').reduce((minimumSize, size) => ({
+  return getAdSizes(sizes).filter(size => size !== 'fluid' && !(isArray(size) && size[0] === 'fluid')).reduce((minimumSize, size) => ({
     width: Math.min(minimumSize.width, size[0]),
     height: Math.min(minimumSize.height, size[1])
   }), {
@@ -59,7 +59,8 @@ function getMinimumAdSize(sizes) {
   });
 }
 function sizeFitsInViewport(size, viewport) {
-  return size === 'fluid' && viewport[0] > 600 || size !== 'fluid' && (viewport[0] === 0 || size[0] <= viewport[0]) && (viewport[1] === 0 || size[1] <= viewport[1]);
+  const isFluid = size === 'fluid' || isArray(size) && size[0] === 'fluid';
+  return isFluid && viewport[0] > 600 || !isFluid && (viewport[0] === 0 || size[0] <= viewport[0]) && (viewport[1] === 0 || size[1] <= viewport[1]);
 }
 function getSortedViewports(viewports) {
   return sortBy(Object.keys(viewports).map(name => ({
@@ -176,7 +177,10 @@ class AdSlot extends EventEmitter {
   setRenderEvent(event) {
     this.renderEvent = event;
     this.rendered = true;
-    this.emit('render', event, this);
+    this.emit('render', {
+      event,
+      slot: this
+    });
     return this;
   }
   setViewable(viewable) {
@@ -186,14 +190,15 @@ class AdSlot extends EventEmitter {
     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);
+    this.emit('visible', {
+      visible,
+      slot: this
+    });
     return this;
   }
   setRefreshDisabled() {
@@ -281,7 +286,6 @@ class AdSlot extends EventEmitter {
   }
 }
 
-/* globals refreshDisabledLineItems: [] */
 const debug$1 = createDebug('folklore:ads');
 class AdsManager extends EventEmitter {
   // static index = 0;
@@ -455,7 +459,7 @@ class AdsManager extends EventEmitter {
     if (event.isEmpty) {
       debug$1('Render ended for slot #%s(%s). Slot is empty.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
     } else {
-      debug$1('Render ended for slot #%s(%s) with size %s.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath(), size !== null ? size.join('x') : '-');
+      debug$1('Render ended for slot #%s(%s) with size %s.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath(), size !== null && isArray(size) ? size.join('x') : '-');
     }
   }
   onSlotImpressionViewable(event) {
@@ -468,9 +472,10 @@ class AdsManager extends EventEmitter {
     }
     debug$1('Impression viewable for slot #%s(%s).', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
   }
-
-  // eslint-disable-next-line class-methods-use-this
-  onSlotVisibleChange(visible, slot) {
+  onSlotVisibleChange({
+    visible,
+    slot
+  }) {
     debug$1('Slot #%s(%s) visibility change to %s', slot.getElementId(), slot.getAdPath(), visible ? 'visible' : 'not visible');
   }
   isReady() {
@@ -544,8 +549,6 @@ class AdsManager extends EventEmitter {
   displaySlot(slot) {
     this.callDisplaySlot(slot);
   }
-
-  /* eslint-disable */
   callDisplaySlot(slot) {
     const {
       googletag
@@ -564,8 +567,6 @@ class AdsManager extends EventEmitter {
       slot.setDisplayed(true);
     });
   }
-  /* eslint-enable */
-
   destroySlot(id) {
     const {
       googletag
@@ -675,8 +676,7 @@ const slots = {
   }
 };
 
-/* eslint-disable react/jsx-props-no-spreading */
-const AdsContext = /*#__PURE__*/React.createContext({
+const AdsContext = /*#__PURE__*/createContext({
   ready: false
 });
 const useAdsContext = () => useContext(AdsContext);
@@ -813,7 +813,6 @@ function AdsTargetingProvider({
   });
 }
 
-/* eslint-disable react/jsx-props-no-spreading */
 function RichAd({
   richAd,
   ...props
@@ -835,7 +834,7 @@ function RichAd({
 function useAdsTracking() {
   const tracking = useTracking() || null;
   const trackEvent = useCallback((action, slot = null, renderEvent = null) => {
-    if (tracking !== null && typeof tracking.trackAd !== 'undefined') {
+    if (tracking !== null && typeof tracking.trackAd === 'undefined') {
       tracking.trackAd(action, slot, renderEvent);
     }
   }, [tracking]);
@@ -978,7 +977,9 @@ function useAd(path, size, {
       }
       return () => {};
     }
-    const onSlotRender = event => {
+    function onSlotRender({
+      event
+    }) {
       const newRenderEvent = {
         ...event,
         ...(slot !== null ? slot.getRenderedSize() : null),
@@ -996,7 +997,7 @@ function useAd(path, size, {
       } else {
         track('Render', slot, newRenderEvent);
       }
-    };
+    }
     slot.on('render', onSlotRender);
     return () => slot.off('render', onSlotRender);
   }, [slot, disabled, setRenderEvent, onRender, track]);
@@ -1047,7 +1048,10 @@ function parseRichAd(data) {
   try {
     const eventData = JSON.parse(data) || null;
     richAd = eventData !== null ? eventData.richAd || null : null;
-  } catch (e) {}
+  } catch {
+    richAd = null;
+    console.warn('Failed to parse rich ad data', data);
+  }
   return richAd;
 }
 function useRichAd(containerRef, id, opts = {}) {
@@ -1087,7 +1091,6 @@ function useRichAd(containerRef, id, opts = {}) {
   return richAd;
 }
 
-/* eslint-disable react/require-default-props */
 function Ad({
   slot: slotName,
   path: providedPath = null,
@@ -1224,7 +1227,6 @@ function Ad({
   if (slotRef !== null && typeof slotRef === 'function') {
     slotRef(slotObject);
   } else if (slotRef !== null && typeof slotRef === 'object') {
-    // eslint-disable-next-line no-param-reassign
     slotRef.current = slotObject;
   }
   const keepSize = shouldKeepSize && lastRenderedSize !== null && !isRendered;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/ads",
-    "version": "0.0.125",
+    "version": "0.0.128",
     "description": "Ads library",
     "keywords": [
         "javascript",
@@ -27,18 +27,21 @@
             "email": "nrb@folklore.email"
         }
     ],
-    "main": "dist/cjs.js",
-    "module": "dist/es.js",
-    "types": "types/index.d.ts",
+    "type": "module",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "default": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        }
+    },
     "files": [
-        "dist",
-        "types"
+        "dist"
     ],
     "scripts": {
-        "clean": "rm -rf dist && rm -rf types",
-        "build:types": "tsc --p tsconfig.json",
-        "build": "npm run build:types && rollup --bundleConfigAsCjs --config ../../rollup.config.js",
-        "prepublishOnly": "npm run clean && npm run build"
+        "build": "../../scripts/prepare-package.sh --types",
+        "prepublishOnly": "npm run build"
     },
     "devDependencies": {
         "prop-types": "^15.7.2",
@@ -53,14 +56,15 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "81b41a4e0ac8ae61d302f97611771b1613a904c7",
+    "gitHead": "59edcc27c3dec97af55f90279ef184e209df4fbd",
     "dependencies": {
-        "@folklore/hooks": "^0.0.83",
-        "@folklore/tracking": "^0.0.34",
-        "@folklore/utils": "^0.1.4",
+        "@folklore/events": "^0.0.12",
+        "@folklore/hooks": "^0.0.86",
+        "@folklore/tracking": "^0.0.36",
+        "@folklore/utils": "^0.1.6",
+        "@types/google-publisher-tag": "^1.20260216.0",
         "classnames": "^2.5.1",
         "debug": "^4.3.4",
-        "lodash": "^4.17.21",
-        "wolfy87-eventemitter": "^5.2.9"
+        "lodash": "^4.17.21"
     }
 }