@adhese/sdk 0.9.0 → 0.11.0

package/dist/index.cjs

@@ -125,7 +125,7 @@ function createSafeFrame({
 }
 const name = "@adhese/sdk";
 const type = "module";
-const version = "0.9.0";
+const version = "0.11.0";
 const description = "Adhese SDK";
 const license = "GPL-3.0";
 const repository = {
@@ -157,7 +157,7 @@ const scripts = {
 const dependencies = {
   "@vue/runtime-core": "^3.4.21",
   remeda: "^1.61.0",
-  zod: "^3.23.0"
+  zod: "^3.23.4"
 };
 const packageJson = {
   name,
@@ -289,6 +289,20 @@ function createSyncHook(name2, {
   };
   return [run, (callback) => add(callback, { name: name2, onAdd })];
 }
+function createPassiveHook(name2, {
+  onRun,
+  onAdd
+} = {}) {
+  hookMap.set(name2, /* @__PURE__ */ new Set());
+  function run(arg) {
+    Promise.allSettled(Array.from(hookMap.get(name2) ?? []).map((callback) => callback(arg))).catch(console.trace);
+    onRun == null ? void 0 : onRun(hookMap.get(name2));
+  }
+  return [run, (callback) => add(callback, { name: name2, onAdd })];
+}
+function isCallbackAsync(callback) {
+  return callback.constructor.name === "AsyncFunction";
+}
 function add(callback, {
   name: name2,
   onAdd
@@ -304,9 +318,6 @@ function add(callback, {
     (_a = hookMap.get(name2)) == null ? void 0 : _a.delete(callback);
   };
 }
-function isCallbackAsync(callback) {
-  return callback.constructor.name === "AsyncFunction";
-}
 let resolveOnInitPromise = () => {
 };
 let isInit = false;
@@ -641,6 +652,36 @@ function filterSpecialChars(value) {
   const specialRegex = /[^\p{L}\p{N}_]/gu;
   return value.replaceAll(specialRegex, "_");
 }
+const batch = /* @__PURE__ */ new Map();
+const debouncedRequestAds = remeda.debounce(async (context) => {
+  if (batch.size === 0)
+    return [];
+  const ads = await requestAds({
+    slots: Array.from(batch.values()).map(({ options }) => options.slot),
+    context
+  });
+  for (const { options, resolve, reject } of batch.values()) {
+    const ad = ads.find(({ slotName }) => runtimeCore.toValue(slotName) === runtimeCore.toValue(options.slot.name));
+    if (ad)
+      resolve(ad);
+    else
+      reject(new Error(`Ad: ${runtimeCore.toValue(options.slot.name)} not found`));
+  }
+  batch.clear();
+  return ads;
+}, {
+  waitMs: 20,
+  timing: "trailing"
+});
+async function requestAd(options) {
+  const promise = new Promise(
+    (resolve, reject) => {
+      batch.set(runtimeCore.toValue(options.slot.name), { options, resolve, reject });
+    }
+  );
+  await debouncedRequestAds.call(options.context);
+  return promise;
+}
 async function requestAds(requestOptions) {
   var _a, _b, _c, _d, _e;
   const options = await runOnRequest(requestOptions);
@@ -681,18 +722,9 @@ async function requestAds(requestOptions) {
     throw error;
   }
 }
-async function requestAd({
-  slot,
-  ...options
-}) {
-  const [ad] = await requestAds({
-    slots: [slot],
-    ...options
-  });
-  return ad;
-}
 const [runOnRender, onRender] = createAsyncHook("onRender");
 const [runOnSlotCreate, onSlotCreate] = createSyncHook("onSlotCreate");
+const [runOnViewabilityChanged, onViewabilityChanged] = createPassiveHook("onViewabilityChanged");
 function useViewabilityObserver({ context, ad, name: name2, element }) {
   let timeoutId = null;
   const {
@@ -747,18 +779,11 @@ function useViewabilityObserver({ context, ad, name: name2, element }) {
     viewabilityObserver.disconnect();
   }];
 }
-function useRenderIntersectionObserver({ ad, options, element, render }) {
+function useRenderIntersectionObserver({ options, element }) {
   var _a;
   const isInViewport = runtimeCore.ref(false);
   const renderIntersectionObserver = new IntersectionObserver((entries) => {
     isInViewport.value = entries.some((entry) => entry.isIntersecting);
-    if (isInViewport.value) {
-      (async () => {
-        if (!ad.value && options.lazyLoading)
-          await render();
-        await render(ad.value ?? void 0);
-      })().catch(logger.error);
-    }
   }, {
     rootMargin: ((_a = options.lazyLoadingOptions) == null ? void 0 : _a.rootMargin) ?? "200px",
     threshold: 0
@@ -835,19 +860,24 @@ function createSlot(slotOptions) {
       return ((_b = element.value) == null ? void 0 : _b.innerHTML) ? element.value.firstElementChild : null;
     }
     const [isInViewport, disposeRenderIntersectionObserver] = useRenderIntersectionObserver({
-      ad,
       options,
-      element,
-      render
+      element
     });
+    const isRendered = runtimeCore.ref(false);
     runtimeCore.watch([ad, isInViewport], async ([newAd, newIsInViewport], [oldAd]) => {
       var _a, _b;
-      if (!newAd || oldAd && remeda.isDeepEqual(newAd, oldAd))
+      if ((!newAd || oldAd && remeda.isDeepEqual(newAd, oldAd)) && isRendered.value)
         return;
       if (newIsInViewport || context.options.eagerRendering)
-        await render(newAd);
+        await render(newAd ?? void 0);
       (_b = context.events) == null ? void 0 : _b.changeSlots.dispatch(Array.from(((_a = context.getAll) == null ? void 0 : _a.call(context)) ?? []));
     });
+    runtimeCore.watch(isInViewport, (value) => {
+      runOnViewabilityChanged({
+        name: name2.value,
+        isInViewport: value
+      });
+    }, { immediate: true });
     const [
       isViewabilityTracked,
       disposeViewabilityObserver
@@ -903,7 +933,7 @@ function createSlot(slotOptions) {
       });
       (_b = options.onRender) == null ? void 0 : _b.call(options, element.value);
       ad.value = renderAd;
-      disposeRenderIntersectionObserver();
+      isRendered.value = true;
       return element.value;
     }
     function cleanElement() {
@@ -992,6 +1022,10 @@ function createSlotManager({
         onDispose: onDispose2,
         context
       });
+      if (slots.has(slot.name.value)) {
+        slot.dispose();
+        throw new Error(`Slot with the name: ${slot.name.value} already exists. Create a new slot with a different format, slot, or the location.`);
+      }
       function onDispose2() {
         var _a2;
         slots.delete(slot.name.value);
@@ -1117,11 +1151,9 @@ function createAdhese(options) {
       location: mergedOptions.location,
       consent: mergedOptions.consent,
       debug: mergedOptions.debug,
-      getAll,
-      get,
       options: mergedOptions,
       logger,
-      addSlot
+      isDisposed: false
     });
     for (const [index, plugin] of mergedOptions.plugins.entries()) {
       plugin(context, {
@@ -1132,7 +1164,8 @@ function createAdhese(options) {
         onRender,
         onRequest,
         onResponse,
-        onSlotCreate
+        onSlotCreate,
+        onViewabilityChanged
       });
     }
     context.events = createEventManager();
@@ -1166,12 +1199,16 @@ function createAdhese(options) {
       if (context.parameters)
         (_a = context.events) == null ? void 0 : _a.parametersChange.dispatch(context.parameters);
     }
+    const debouncedFetchAllUnrenderedSlots = remeda.debounce(fetchAllUnrenderedSlots, {
+      waitMs: 100,
+      timing: "both"
+    });
     async function onQueryChange() {
       var _a, _b;
       const query = queryDetector.getQuery();
       (_a = context.parameters) == null ? void 0 : _a.set("dt", query);
       (_b = context.parameters) == null ? void 0 : _b.set("br", query);
-      await fetchAndRenderAllSlots();
+      await debouncedFetchAllUnrenderedSlots.call();
     }
     function getConsent() {
       return context.consent;
@@ -1189,22 +1226,25 @@ function createAdhese(options) {
     function getAll() {
       return slotManager.getAll() ?? [];
     }
+    context.getAll = getAll;
     function get(name2) {
       return slotManager.get(name2);
     }
+    context.get = get;
     function addSlot(slotOptions) {
-      if (!slotManager)
-        throw new Error("Slot manager not initialized");
-      return slotManager.add(slotOptions);
+      const newSlot = slotManager.add(slotOptions);
+      debouncedFetchAllUnrenderedSlots.call().catch(logger.error);
+      return newSlot;
     }
+    context.addSlot = addSlot;
     async function findDomSlots2() {
       const domSlots = (await slotManager.findDomSlots() ?? []).filter((slot) => !slot.lazyLoading);
       if (domSlots.length <= 0)
         return [];
-      const ads = await requestAds({
-        slots: domSlots,
+      const ads = await Promise.all(domSlots.map((slot) => requestAd({
+        slot,
         context
-      });
+      })));
       for (const ad of ads) {
         const slot = slotManager.get(ad.slotName);
         if (slot)
@@ -1226,14 +1266,14 @@ function createAdhese(options) {
       }
       return context.debug;
     }
-    async function fetchAndRenderAllSlots() {
-      const slots = (slotManager.getAll() ?? []).filter((slot) => !slot.lazyLoading);
+    async function fetchAllUnrenderedSlots() {
+      const slots = (slotManager.getAll() ?? []).filter((slot) => !slot.lazyLoading && !slot.ad.value);
       if (slots.length === 0)
         return;
-      const ads = await requestAds({
-        slots,
+      const ads = await Promise.all(slots.map((slot) => requestAd({
+        slot,
         context
-      });
+      })));
       for (const ad of ads) {
         const slot = slotManager.get(ad.slotName);
         if (slot)
@@ -1249,10 +1289,11 @@ function createAdhese(options) {
       });
       (_a = context.parameters) == null ? void 0 : _a.set("xt", data.tcString);
       (_b = context.parameters) == null ? void 0 : _b.delete("tl");
-      await fetchAndRenderAllSlots();
+      await debouncedFetchAllUnrenderedSlots.call();
     });
     function dispose() {
       var _a, _b;
+      context.isDisposed = true;
       queryDetector.dispose();
       slotManager.dispose();
       queryDetector.dispose();
@@ -1268,7 +1309,7 @@ function createAdhese(options) {
     onInit(async () => {
       var _a;
       if ((slotManager.getAll().length ?? 0) > 0)
-        await fetchAndRenderAllSlots().catch(logger.error);
+        await fetchAllUnrenderedSlots().catch(logger.error);
       if (mergedOptions.findDomSlotsOnLoad)
         await findDomSlots2();
       if (mergedOptions.debug || window.location.search.includes("adhese_debug=true") || isPreviewMode())
@@ -1298,5 +1339,4 @@ function createAdhese(options) {
 exports.createAdhese = createAdhese;
 exports.logger = logger;
 exports.requestAd = requestAd;
-exports.requestAds = requestAds;
 //# sourceMappingURL=index.cjs.map