@adhese/sdk 0.8.1 → 0.10.0

package/dist/index.cjs

@@ -125,7 +125,7 @@ function createSafeFrame({
 }
 const name = "@adhese/sdk";
 const type = "module";
-const version = "0.8.1";
+const version = "0.10.0";
 const description = "Adhese SDK";
 const license = "GPL-3.0";
 const repository = {
@@ -255,7 +255,7 @@ const hookMap = /* @__PURE__ */ new Map();
 function clearAllHooks() {
   hookMap.clear();
 }
-function createHook(name2, {
+function createAsyncHook(name2, {
   onRun,
   onAdd
 } = {}) {
@@ -267,19 +267,56 @@ function createHook(name2, {
     onRun == null ? void 0 : onRun(hookMap.get(name2));
     return latestResult;
   };
-  function add(callback) {
-    const hookSet = hookMap.get(name2);
-    if (hookSet)
-      hookSet.add(callback);
-    else
-      hookMap.set(name2, /* @__PURE__ */ new Set([callback]));
-    onAdd == null ? void 0 : onAdd(hookSet);
-    return () => {
-      var _a;
-      (_a = hookMap.get(name2)) == null ? void 0 : _a.delete(callback);
-    };
+  return [run, (callback) => add(callback, { name: name2, onAdd })];
+}
+function createSyncHook(name2, {
+  onRun,
+  onAdd
+} = {}) {
+  hookMap.set(name2, /* @__PURE__ */ new Set());
+  const run = (arg) => {
+    let latestResult = arg;
+    const promisedCallbacks = [];
+    for (const callback of hookMap.get(name2) ?? []) {
+      if (isCallbackAsync(callback))
+        promisedCallbacks.push(callback);
+      else
+        latestResult = callback(latestResult) ?? latestResult;
+    }
+    Promise.allSettled(promisedCallbacks.map((callback) => callback(latestResult))).catch(console.trace);
+    onRun == null ? void 0 : onRun(hookMap.get(name2));
+    return latestResult;
+  };
+  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, add];
+  return [run, (callback) => add(callback, { name: name2, onAdd })];
+}
+function isCallbackAsync(callback) {
+  return callback.constructor.name === "AsyncFunction";
+}
+function add(callback, {
+  name: name2,
+  onAdd
+}) {
+  const hookSet = hookMap.get(name2);
+  if (hookSet)
+    hookSet.add(callback);
+  else
+    hookMap.set(name2, /* @__PURE__ */ new Set([callback]));
+  onAdd == null ? void 0 : onAdd(hookSet);
+  return () => {
+    var _a;
+    (_a = hookMap.get(name2)) == null ? void 0 : _a.delete(callback);
+  };
 }
 let resolveOnInitPromise = () => {
 };
@@ -287,7 +324,7 @@ let isInit = false;
 const waitOnInit = new Promise((resolve) => {
   resolveOnInitPromise = resolve;
 });
-const [runOnInit, onInit] = createHook("onInit", {
+const [runOnInit, onInit] = createSyncHook("onInit", {
   onRun(callbacks) {
     isInit = true;
     resolveOnInitPromise();
@@ -295,7 +332,7 @@ const [runOnInit, onInit] = createHook("onInit", {
   },
   onAdd() {
     if (isInit)
-      runOnInit().catch(console.error);
+      runOnInit();
   }
 });
 const defaultLogLevels = ["trace", "debug", "info", "warn", "error"];
@@ -371,8 +408,8 @@ function createLogger({
 const logger = createLogger({
   scope: "Adhese SDK"
 });
-const [runOnRequest, onRequest] = createHook("onRequest");
-const [runOnResponse, onResponse] = createHook("onResponse");
+const [runOnRequest, onRequest] = createAsyncHook("onRequest");
+const [runOnResponse, onResponse] = createAsyncHook("onResponse");
 const numberLike = zod.union([zod.coerce.string().regex(/^\d+$/), zod.literal("")]).transform((value) => value === "" ? void 0 : Number(value));
 const booleanLike = zod.union([zod.coerce.boolean(), zod.literal("")]);
 const urlLike = zod.union([zod.coerce.string(), zod.literal("")]).transform((value) => {
@@ -665,7 +702,9 @@ async function requestAd({
   });
   return ad;
 }
-const [runOnRender, onRender] = createHook("onRender");
+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 {
@@ -720,18 +759,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
@@ -756,9 +788,10 @@ const renderFunctions = {
   iframe: renderIframe,
   inline: renderInline
 };
-function createSlot(options) {
+function createSlot(slotOptions) {
   const scope = runtimeCore.effectScope();
   return scope.run(() => {
+    const options = runOnSlotCreate(slotOptions);
     const {
       containingElement,
       slot,
@@ -807,19 +840,24 @@ function createSlot(options) {
       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
@@ -874,7 +912,8 @@ function createSlot(options) {
         containingElement
       });
       (_b = options.onRender) == null ? void 0 : _b.call(options, element.value);
-      disposeRenderIntersectionObserver();
+      ad.value = renderAd;
+      isRendered.value = true;
       return element.value;
     }
     function cleanElement() {
@@ -956,7 +995,7 @@ function createSlotManager({
     function getAll() {
       return Array.from(slots).map(([, slot]) => slot);
     }
-    function add(options) {
+    function add2(options) {
       var _a;
       const slot = createSlot({
         ...options,
@@ -1002,14 +1041,14 @@ function createSlotManager({
       scope.stop();
     }
     for (const options of initialSlots) {
-      add({
+      add2({
         ...options,
         lazyLoading: false
       });
     }
     return {
       getAll,
-      add,
+      add: add2,
       findDomSlots: findDomSlots$1,
       get,
       dispose
@@ -1053,14 +1092,14 @@ function isPreviewMode() {
   return window.location.search.includes("adhesePreviewCreativeId");
 }
 let isDisposed = false;
-const [runOnDispose, onDispose] = createHook("onDispose", {
+const [runOnDispose, onDispose] = createSyncHook("onDispose", {
   onRun(callbacks) {
     isDisposed = true;
     callbacks == null ? void 0 : callbacks.clear();
   },
   onAdd() {
     if (isDisposed)
-      runOnDispose().catch(console.error);
+      runOnDispose();
   }
 });
 function createAdhese(options) {
@@ -1102,7 +1141,9 @@ function createAdhese(options) {
         onDispose,
         onRender,
         onRequest,
-        onResponse
+        onResponse,
+        onSlotCreate,
+        onViewabilityChanged
       });
     }
     context.events = createEventManager();
@@ -1136,12 +1177,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;
@@ -1163,9 +1208,9 @@ function createAdhese(options) {
       return slotManager.get(name2);
     }
     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;
     }
     async function findDomSlots2() {
       const domSlots = (await slotManager.findDomSlots() ?? []).filter((slot) => !slot.lazyLoading);
@@ -1196,8 +1241,8 @@ 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({
@@ -1219,7 +1264,7 @@ 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;
@@ -1231,14 +1276,14 @@ function createAdhese(options) {
       logger.resetLogs();
       (_b = context.events) == null ? void 0 : _b.dispose();
       logger.info("Adhese instance disposed");
-      runOnDispose().catch(logger.error);
+      runOnDispose();
       clearAllHooks();
       scope.stop();
     }
     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())
@@ -1246,7 +1291,7 @@ function createAdhese(options) {
       if (!scope.active)
         dispose();
     });
-    runOnInit().catch(logger.error);
+    runOnInit();
     return {
       parameters: context.parameters,
       events: context.events,