@folklore/ads 0.0.39 → 0.0.41

package/dist/cjs.js

@@ -276,12 +276,16 @@ class AdSlot extends EventEmitter__default["default"] {
 /* globals refreshDisabledLineItems: [] */
 const debug = createDebug__default["default"]('folklore: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 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;
@@ -346,10 +350,19 @@ class AdsManager extends EventEmitter__default["default"] {
       cmd: []
     };
     this.slots = [];
+    this.index = 0;
     if (this.options.autoInit) {
       this.init();
     }
   }
+  createAdId() {
+    // const newId = `div-gpt-ad-${new Date().getTime()}-${Math.round(
+    //     Math.random() * (Math.random() * 1000),
+    // )}-${this.index}`;
+    const newId = `div-gpt-ad-${this.index}`;
+    this.index += 1;
+    return newId;
+  }
   onGPTReady() {
     const {
       googletag
@@ -478,7 +491,7 @@ class AdsManager extends EventEmitter__default["default"] {
     const {
       id: providedId = null
     } = opts;
-    const id = providedId || AdsManager.createAdId();
+    const id = providedId || this.createAdId();
     debug('Creating slot #%s(%s)...', id, path);
     const slot = new AdSlot(id, path, size, {
       ...opts
@@ -871,28 +884,35 @@ function useAd(path, size) {
   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, {
+  // const currentSlot = useRef(null);
+  const [slot, setSlot] = React.useState();
+  React.useEffect(() => {
+    // if (currentSlot.current !== null) {
+    //     adsManager.destroySlot(currentSlot.current);
+    //     currentSlot.current = null;
+    // }
+    const newSlot = path !== null && !disabled ? adsManager.createSlot(path, size, {
       visible: isVisible,
       sizeMapping,
       targeting,
       categoryExclusions
     }) : null;
+    setSlot(newSlot);
     // if (currentSlot.current !== null && adsReady) {
     //     adsManager.defineSlot(currentSlot.current);
     // }
-    return currentSlot.current;
+    // return currentSlot.current;
+    return () => {
+      if (newSlot !== null) {
+        adsManager.destroySlot(newSlot);
+      }
+    };
   }, [adsManager, path, disabled, size, sizeMapping, alwaysRender, categoryExclusions]);
   React.useEffect(() => {
-    if (currentSlot.current !== null) {
-      currentSlot.current.setTargeting(targeting);
+    if (slot !== null) {
+      slot.setTargeting(targeting);
     }
-  }, [targeting]);
+  }, [slot, targeting]);
 
   // Set visibility
   React.useEffect(() => {
@@ -960,12 +980,16 @@ function useAd(path, size) {
   }, [slot, disabled, setRenderEvent, onRender, track]);
 
   // Destroy slot
-  React.useEffect(() => () => {
-    if (slot !== null) {
-      currentSlot.current = null;
-      adsManager.destroySlot(slot);
-    }
-  }, []);
+  // useEffect(
+  //     () => () => {
+  //         if (slot !== null) {
+  //             // currentSlot.current = null;
+  //             adsManager.destroySlot(slot);
+  //         }
+  //     },
+  //     [],
+  // );
+
   return {
     refObserver,
     slot,

package/dist/es.js

@@ -258,12 +258,16 @@ class AdSlot extends EventEmitter {
 /* globals refreshDisabledLineItems: [] */
 const debug = createDebug('folklore: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 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;
@@ -328,10 +332,19 @@ class AdsManager extends EventEmitter {
       cmd: []
     };
     this.slots = [];
+    this.index = 0;
     if (this.options.autoInit) {
       this.init();
     }
   }
+  createAdId() {
+    // const newId = `div-gpt-ad-${new Date().getTime()}-${Math.round(
+    //     Math.random() * (Math.random() * 1000),
+    // )}-${this.index}`;
+    const newId = `div-gpt-ad-${this.index}`;
+    this.index += 1;
+    return newId;
+  }
   onGPTReady() {
     const {
       googletag
@@ -460,7 +473,7 @@ class AdsManager extends EventEmitter {
     const {
       id: providedId = null
     } = opts;
-    const id = providedId || AdsManager.createAdId();
+    const id = providedId || this.createAdId();
     debug('Creating slot #%s(%s)...', id, path);
     const slot = new AdSlot(id, path, size, {
       ...opts
@@ -853,28 +866,35 @@ function useAd(path, size) {
   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, {
+  // const currentSlot = useRef(null);
+  const [slot, setSlot] = useState();
+  useEffect(() => {
+    // if (currentSlot.current !== null) {
+    //     adsManager.destroySlot(currentSlot.current);
+    //     currentSlot.current = null;
+    // }
+    const newSlot = path !== null && !disabled ? adsManager.createSlot(path, size, {
       visible: isVisible,
       sizeMapping,
       targeting,
       categoryExclusions
     }) : null;
+    setSlot(newSlot);
     // if (currentSlot.current !== null && adsReady) {
     //     adsManager.defineSlot(currentSlot.current);
     // }
-    return currentSlot.current;
+    // return currentSlot.current;
+    return () => {
+      if (newSlot !== null) {
+        adsManager.destroySlot(newSlot);
+      }
+    };
   }, [adsManager, path, disabled, size, sizeMapping, alwaysRender, categoryExclusions]);
   useEffect(() => {
-    if (currentSlot.current !== null) {
-      currentSlot.current.setTargeting(targeting);
+    if (slot !== null) {
+      slot.setTargeting(targeting);
     }
-  }, [targeting]);
+  }, [slot, targeting]);
 
   // Set visibility
   useEffect(() => {
@@ -942,12 +962,16 @@ function useAd(path, size) {
   }, [slot, disabled, setRenderEvent, onRender, track]);
 
   // Destroy slot
-  useEffect(() => () => {
-    if (slot !== null) {
-      currentSlot.current = null;
-      adsManager.destroySlot(slot);
-    }
-  }, []);
+  // useEffect(
+  //     () => () => {
+  //         if (slot !== null) {
+  //             // currentSlot.current = null;
+  //             adsManager.destroySlot(slot);
+  //         }
+  //     },
+  //     [],
+  // );
+
   return {
     refObserver,
     slot,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/ads",
-    "version": "0.0.39",
+    "version": "0.0.41",
     "description": "Ads library",
     "keywords": [
         "javascript",
@@ -50,7 +50,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "6a3484815046ba47850ba5d71e5eee9afe4adeb4",
+    "gitHead": "ee7a99e9a056e466320a99c43f1982d1d5900079",
     "dependencies": {
         "@folklore/hooks": "^0.0.44",
         "@folklore/tracking": "^0.0.23",