@adhese/sdk 0.16.2 → 0.18.0

package/dist/index.js

@@ -1,116 +1,10 @@
-import { createLogger, toValue, ref, computed, waitForDomLoad, watch, effectScope, uniqueId, reactive, createEventManager, awaitTimeout } from "@adhese/sdk-shared";
+import { createLogger, toValue, ref, computed, waitForDomLoad, watch, createAsyncHook, createPassiveHook, effectScope, uniqueId, reactive, addTrackingPixel, createSyncHook, createEventManager, awaitTimeout } from "@adhese/sdk-shared";
 import { debounce, round, isDeepEqual, doNothing } from "remeda";
 const name = "@adhese/sdk";
-const version = "0.16.2";
-function addTrackingPixel(url) {
-  const img = document.createElement("img");
-  img.src = url.toString();
-  img.style.height = "1px";
-  img.style.width = "1px";
-  img.style.margin = "-1px";
-  img.style.border = "0";
-  img.style.position = "absolute";
-  img.style.top = "0";
-  return document.body.appendChild(img);
-}
-const hookMap = /* @__PURE__ */ new Map();
-function clearAllHooks() {
-  hookMap.clear();
-}
-function createAsyncHook(name2, {
-  onRun,
-  onAdd
-} = {}) {
-  hookMap.set(name2, /* @__PURE__ */ new Set());
-  const run = async (arg) => {
-    let latestResult = arg;
-    for (const callback of hookMap.get(name2) ?? [])
-      latestResult = await callback(latestResult) ?? latestResult;
-    onRun == null ? void 0 : onRun(hookMap.get(name2));
-    return latestResult;
-  };
-  function dispose() {
-    hookMap.delete(name2);
-  }
-  return [run, (callback) => add(callback, { name: name2, onAdd }), dispose];
-}
-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;
-  };
-  function dispose() {
-    hookMap.delete(name2);
-  }
-  return [run, (callback) => add(callback, { name: name2, onAdd }), dispose];
-}
-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));
-  }
-  function dispose() {
-    hookMap.delete(name2);
-  }
-  return [run, (callback) => add(callback, { name: name2, onAdd }), dispose];
-}
-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 = () => {
-};
-let isInit = false;
-const waitOnInit = new Promise((resolve) => {
-  resolveOnInitPromise = resolve;
-});
-const [runOnInit, onInit] = createSyncHook("onInit", {
-  onRun(callbacks) {
-    isInit = true;
-    resolveOnInitPromise();
-    callbacks == null ? void 0 : callbacks.clear();
-  },
-  onAdd() {
-    if (isInit)
-      runOnInit();
-  }
-});
+const version = "0.18.0";
 const logger = createLogger({
   scope: `${name}@${version}`
 });
-const [runOnRequest, onRequest] = createAsyncHook("onRequest");
-const [runOnResponse, onResponse] = createAsyncHook("onResponse");
 async function requestPreviews(account) {
   const previewObjects = getPreviewObjects();
   const [list, adSchema] = await Promise.all([
@@ -236,7 +130,7 @@ async function requestAd(options) {
 }
 async function requestAds(requestOptions) {
   var _a, _b, _c, _d, _e;
-  const options = await runOnRequest(requestOptions);
+  const options = await requestOptions.context.hooks.runOnRequest(requestOptions);
   const { context } = options;
   try {
     (_a = context == null ? void 0 : context.events) == null ? void 0 : _a.requestAd.dispatch({
@@ -264,7 +158,7 @@ async function requestAds(requestOptions) {
     });
     if (matchedPreviews.length > 0)
       (_c = context.events) == null ? void 0 : _c.previewReceived.dispatch(matchedPreviews);
-    const mergedResult = await runOnResponse([
+    const mergedResult = await context.hooks.runOnResponse([
       ...result.filter((ad) => !previews.some((preview) => preview.libId === ad.libId)),
       ...matchedPreviews
     ]);
@@ -276,19 +170,7 @@ async function requestAds(requestOptions) {
     throw error;
   }
 }
-const [runOnSlotCreate, onSlotCreate] = createSyncHook("onSlotCreate");
-let isDisposed = false;
-const [runOnDispose, onDispose] = createSyncHook("onDispose", {
-  onRun(callbacks) {
-    isDisposed = true;
-    callbacks == null ? void 0 : callbacks.clear();
-  },
-  onAdd() {
-    if (isDisposed)
-      runOnDispose();
-  }
-});
-function useQueryDetector(queries = {
+function useQueryDetector(context, queries = {
   mobile: "(max-width: 768px)",
   tablet: "(min-width: 769px) and (max-width: 1024px)",
   desktop: "(min-width: 1025px)"
@@ -301,7 +183,7 @@ function useQueryDetector(queries = {
   }, {
     waitMs: 50
   });
-  onInit(() => {
+  context.hooks.onInit(() => {
     for (const query of queryList)
       query.addEventListener("change", handleOnChange.call);
     handleOnChange.call();
@@ -310,7 +192,7 @@ function useQueryDetector(queries = {
     for (const query of queryList)
       query.removeEventListener("change", handleOnChange.call);
   }
-  onDispose(dispose);
+  context.hooks.onDispose(dispose);
   return [computed(() => active.value), dispose];
 }
 function getQuery(entries) {
@@ -349,9 +231,9 @@ function renderInline(ad, element) {
 function generateName(location, format, slot) {
   return `${location}${slot ? `${slot}` : ""}-${format}`;
 }
-function useDomLoaded() {
+function useDomLoaded(context) {
   const isDomLoaded = ref(false);
-  onInit(async () => {
+  context.hooks.onInit(async () => {
     await waitForDomLoad();
     isDomLoaded.value = true;
   });
@@ -396,7 +278,7 @@ function useViewabilityObserver({ context, slotContext, hooks, onTracked }) {
     ...context.options.viewabilityTrackingOptions
   };
   const trackingPixel = ref(null);
-  const isTracked = computed(() => Boolean(trackingPixel.value));
+  const isTracked = ref(false);
   const viewabilityObserver = new IntersectionObserver(([entry]) => {
     if (context.options.viewabilityTracking && !trackingPixel.value) {
       const ratio = round(entry.intersectionRatio, 1);
@@ -404,6 +286,7 @@ function useViewabilityObserver({ context, slotContext, hooks, onTracked }) {
         timeoutId = setTimeout(() => {
           timeoutId = null;
           onTracked == null ? void 0 : onTracked(trackingPixel);
+          isTracked.value = true;
         }, duration);
       } else if (ratio < threshold && timeoutId) {
         clearTimeout(timeoutId);
@@ -440,27 +323,27 @@ function useViewabilityObserver({ context, slotContext, hooks, onTracked }) {
   });
   return isTracked;
 }
-function useSlotHooks({ setup }, slotContext, id) {
-  const [runOnBeforeRender, onBeforeRender, disposeOnBeforeRender] = createAsyncHook(`onBeforeRender:${id}`);
-  const [runOnRender, onRender, disposeOnRender] = createAsyncHook(`onRender:${id}`);
-  const [runOnBeforeRequest, onBeforeRequest, disposeOnBeforeRequest] = createAsyncHook(`onBeforeRequest:${id}`);
-  const [runOnRequest2, onRequest2, disposeOnRequest] = createAsyncHook(`onRequest:${id}`);
-  const [runOnDispose2, onDispose2, disposeOnDispose] = createPassiveHook(`onDispose:${id}`);
+function useSlotHooks({ setup }, slotContext) {
+  const [runOnBeforeRender, onBeforeRender, disposeOnBeforeRender] = createAsyncHook();
+  const [runOnRender, onRender, disposeOnRender] = createAsyncHook();
+  const [runOnBeforeRequest, onBeforeRequest, disposeOnBeforeRequest] = createAsyncHook();
+  const [runOnRequest, onRequest, disposeOnRequest] = createAsyncHook();
+  const [runOnDispose, onDispose, disposeOnDispose] = createPassiveHook();
   setup == null ? void 0 : setup(slotContext, {
     onBeforeRender,
     onRender,
     onBeforeRequest,
-    onDispose: onDispose2,
-    onRequest: onRequest2
+    onDispose,
+    onRequest
   });
-  onDispose2(() => {
+  onDispose(() => {
     disposeOnBeforeRender();
     disposeOnRender();
     disposeOnBeforeRequest();
     disposeOnRequest();
     disposeOnDispose();
   });
-  return { runOnBeforeRender, runOnRender, runOnBeforeRequest, runOnRequest: runOnRequest2, runOnDispose: runOnDispose2, onDispose: onDispose2, onBeforeRequest, onRequest: onRequest2, onBeforeRender, onRender };
+  return { runOnBeforeRender, runOnRender, runOnBeforeRequest, runOnRequest, runOnDispose, onDispose, onBeforeRequest, onRequest, onBeforeRender, onRender };
 }
 const renderFunctions = {
   iframe: renderIframe,
@@ -475,7 +358,7 @@ function createSlot(slotOptions) {
   const scope = effectScope();
   return scope.run(() => {
     const slotContext = ref(null);
-    const options = runOnSlotCreate({
+    const options = slotOptions.context.hooks.runOnSlotCreate({
       ...defaultOptions,
       ...slotOptions
     });
@@ -491,13 +374,13 @@ function createSlot(slotOptions) {
       runOnBeforeRender,
       runOnRender,
       runOnBeforeRequest,
-      runOnRequest: runOnRequest2,
-      runOnDispose: runOnDispose2,
+      runOnRequest,
+      runOnDispose,
       ...hooks
-    } = useSlotHooks(options, slotContext, id);
-    const isDisposed2 = ref(false);
+    } = useSlotHooks(options, slotContext);
+    const isDisposed = ref(false);
     const parameters = reactive(new Map(Object.entries(options.parameters ?? {})));
-    const [device, disposeQueryDetector] = useQueryDetector(typeof options.format === "string" ? {
+    const [device, disposeQueryDetector] = useQueryDetector(context, typeof options.format === "string" ? {
       [options.format]: "(min-width: 0px)"
     } : Object.fromEntries(options.format.map((item) => [item.format, item.query])));
     const format = computed(() => typeof options.format === "string" ? options.format : device.value);
@@ -515,7 +398,7 @@ function createSlot(slotOptions) {
       data.value = newAd;
       originalData.value = newAd;
     });
-    const isDomLoaded = useDomLoaded();
+    const isDomLoaded = useDomLoaded(context);
     const element = computed(
       () => {
         var _a;
@@ -542,7 +425,7 @@ function createSlot(slotOptions) {
     hooks.onDispose(() => {
       disposeQueryDetector();
     });
-    onInit(async () => {
+    context.hooks.onInit(async () => {
       var _a;
       status.value = "initialized";
       if (options.lazyLoading)
@@ -562,7 +445,11 @@ function createSlot(slotOptions) {
       }
     });
     const impressionTrackingPixelElement = ref(null);
-    const isImpressionTracked = computed(() => Boolean(impressionTrackingPixelElement.value));
+    const isImpressionTracked = ref(false);
+    hooks.onDispose(() => {
+      if (impressionTrackingPixelElement.value)
+        impressionTrackingPixelElement.value.remove();
+    });
     async function request() {
       if (options.lazyLoading && !isInViewport.value)
         return null;
@@ -578,7 +465,7 @@ function createSlot(slotOptions) {
         });
       }
       if (response)
-        response = await runOnRequest2(response);
+        response = await runOnRequest(response);
       data.value = response;
       if (!originalData.value)
         originalData.value = response;
@@ -590,7 +477,6 @@ function createSlot(slotOptions) {
     async function render(adToRender) {
       status.value = "rendering";
       await waitForDomLoad();
-      await waitOnInit;
       let renderAd = adToRender ?? data.value ?? originalData.value ?? await request();
       renderAd = renderAd && await runOnBeforeRender(renderAd);
       if (!renderAd) {
@@ -613,10 +499,9 @@ function createSlot(slotOptions) {
         throw new Error(error);
       }
       renderFunctions[renderMode](renderAd, element.value);
-      if (renderAd.impressionCounter && !impressionTrackingPixelElement.value) {
+      if (renderAd.impressionCounter && !impressionTrackingPixelElement.value)
         impressionTrackingPixelElement.value = addTrackingPixel(renderAd.impressionCounter);
-        logger.debug(`Impression tracking pixel fired for ${name2.value}`);
-      }
+      isImpressionTracked.value = true;
       logger.debug("Slot rendered", {
         renderedElement: element,
         location: context.location,
@@ -638,12 +523,10 @@ function createSlot(slotOptions) {
       originalData.value = null;
     }
     function dispose() {
-      var _a;
       cleanElement();
-      (_a = impressionTrackingPixelElement.value) == null ? void 0 : _a.remove();
       data.value = null;
-      runOnDispose2();
-      isDisposed2.value = true;
+      runOnDispose();
+      isDisposed.value = true;
       scope.stop();
     }
     const state = reactive({
@@ -659,7 +542,7 @@ function createSlot(slotOptions) {
       isImpressionTracked,
       status,
       element,
-      isDisposed: isDisposed2,
+      isDisposed,
       id,
       render,
       request,
@@ -706,7 +589,7 @@ function createSlotManager({
   function getAll() {
     return Array.from(context.slots).map(([, slot]) => slot);
   }
-  function add2(options) {
+  function add(options) {
     var _a;
     const slot = createSlot({
       ...options,
@@ -753,14 +636,14 @@ function createSlotManager({
     context.slots.clear();
   }
   for (const options of initialSlots) {
-    add2({
+    add({
       ...options,
       lazyLoading: false
     });
   }
   return {
     getAll,
-    add: add2,
+    add,
     findDomSlots: findDomSlots$1,
     get,
     dispose
@@ -773,11 +656,11 @@ function useConsent(context) {
     if (data.tcString)
       consent.value = data.tcString;
   }
-  onInit(() => {
+  context.hooks.onInit(() => {
     var _a;
     (_a = window.__tcfapi) == null ? void 0 : _a.call(window, "addEventListener", 2, onTcfConsentChange);
   });
-  onDispose(() => {
+  context.hooks.onDispose(() => {
     var _a;
     (_a = window.__tcfapi) == null ? void 0 : _a.call(window, "removeEventListener", 2, onTcfConsentChange);
   });
@@ -814,7 +697,7 @@ async function fetchAllUnrenderedSlots(slots) {
   await Promise.allSettled(filteredSlots.map((slot) => slot.request()));
 }
 function useMainQueryDetector(mergedOptions, context) {
-  const [device] = useQueryDetector(mergedOptions.queries);
+  const [device] = useQueryDetector(context, mergedOptions.queries);
   watch(device, async (newDevice) => {
     var _a, _b;
     context.device = newDevice;
@@ -838,7 +721,7 @@ function useMainDebugMode(context) {
   }, {
     immediate: true
   });
-  onDispose(() => {
+  context.hooks.onDispose(() => {
     context.logger.resetLogs();
     context.logger.info("Adhese instance disposed");
   });
@@ -866,6 +749,56 @@ function useMainParameters(context, options) {
     }
   );
 }
+function createGlobalHooks() {
+  const disposeFunctions = /* @__PURE__ */ new Set();
+  let isInit = false;
+  const [runOnInit, onInit, disposeOnInit] = createSyncHook({
+    onRun(callbacks) {
+      isInit = true;
+      callbacks == null ? void 0 : callbacks.clear();
+    },
+    onAdd() {
+      if (isInit)
+        runOnInit();
+    }
+  });
+  disposeFunctions.add(disposeOnInit);
+  let isDisposed = false;
+  const [runOnDispose, onDispose, disposeOnDispose] = createSyncHook({
+    onRun(callbacks) {
+      isDisposed = true;
+      callbacks == null ? void 0 : callbacks.clear();
+    },
+    onAdd() {
+      if (isDisposed)
+        runOnDispose();
+    }
+  });
+  disposeFunctions.add(disposeOnDispose);
+  const [runOnRequest, onRequest, disposeOnRequest] = createAsyncHook();
+  disposeFunctions.add(disposeOnRequest);
+  const [runOnResponse, onResponse, disposeOnResponse] = createAsyncHook();
+  disposeFunctions.add(disposeOnResponse);
+  const [runOnSlotCreate, onSlotCreate, disposeOnSlotCreate] = createSyncHook();
+  disposeFunctions.add(disposeOnSlotCreate);
+  function clearAll() {
+    for (const disposeFunction of disposeFunctions)
+      disposeFunction();
+  }
+  return {
+    runOnInit,
+    onInit,
+    runOnDispose,
+    onDispose,
+    runOnRequest,
+    onRequest,
+    runOnResponse,
+    onResponse,
+    runOnSlotCreate,
+    onSlotCreate,
+    clearAll
+  };
+}
 function createAdhese(options) {
   const scope = effectScope();
   return scope.run(() => {
@@ -886,6 +819,7 @@ function createAdhese(options) {
       ...options
     };
     setupLogging(mergedOptions);
+    const hooks = createGlobalHooks();
     const context = reactive({
       location: mergedOptions.location,
       consent: mergedOptions.consent,
@@ -897,6 +831,7 @@ function createAdhese(options) {
       events: createEventManager(),
       slots: /* @__PURE__ */ new Map(),
       device: "unknown",
+      hooks,
       dispose,
       findDomSlots: findDomSlots2,
       getAll,
@@ -907,11 +842,7 @@ function createAdhese(options) {
       plugin(context, {
         index,
         version,
-        onInit,
-        onDispose,
-        onRequest,
-        onResponse,
-        onSlotCreate
+        hooks
       });
     }
     watch(() => context.location, (newLocation) => {
@@ -952,12 +883,12 @@ function createAdhese(options) {
       slotManager.dispose();
       (_a = context.parameters) == null ? void 0 : _a.clear();
       (_b = context.events) == null ? void 0 : _b.dispose();
-      runOnDispose();
-      clearAllHooks();
+      hooks.runOnDispose();
+      hooks.clearAll();
       scope.stop();
     }
     context.dispose = dispose;
-    onInit(async () => {
+    hooks.onInit(async () => {
       var _a;
       await awaitTimeout(0);
       if ((slotManager.getAll().length ?? 0) > 0)
@@ -969,7 +900,7 @@ function createAdhese(options) {
       if (!scope.active)
         dispose();
     });
-    runOnInit();
+    hooks.runOnInit();
     return context;
   });
 }