@adhese/sdk 0.7.0 → 0.8.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { effectScope, shallowReactive, watchEffect, watch, reactive, ref, computed, toValue } from "@vue/runtime-core";
+import { toValue, ref, computed, watch, effectScope, reactive, shallowReactive, watchEffect } from "@vue/runtime-core";
 import { debounce, round, isDeepEqual } from "remeda";
 import { union, coerce, literal, number, string, ZodIssueCode, NEVER, object, unknown, lazy } from "zod";
 async function waitForDomLoad() {
@@ -150,109 +150,16 @@ function renderInline(ad, element) {
 function generateName(location, format, slot) {
   return `${location}${slot ? `${slot}` : ""}-${format}`;
 }
-async function findDomSlots(context) {
-  await waitForDomLoad();
-  return Array.from(document.querySelectorAll(".adunit")).filter((element) => {
-    var _a;
-    if (!element.dataset.format)
-      return false;
-    const name = generateName(
-      context.location,
-      element.dataset.format,
-      element.dataset.slot
-    );
-    return !((_a = context.getAll) == null ? void 0 : _a.call(context).some((activeSlot) => activeSlot.name.value === name));
-  }).map((element) => createSlot({
-    format: element.dataset.format,
-    containingElement: element,
-    slot: element.dataset.slot,
-    context
-  })).filter((slot) => {
-    var _a;
-    return !((_a = context.getAll) == null ? void 0 : _a.call(context).some((activeSlot) => activeSlot.name.value === slot.name.value));
-  });
-}
-function createSlotManager({
-  initialSlots = [],
-  context
-}) {
-  const scope = effectScope();
-  return scope.run(() => {
-    const slots = shallowReactive(/* @__PURE__ */ new Map());
-    watchEffect(() => {
-      var _a;
-      (_a = context.events) == null ? void 0 : _a.changeSlots.dispatch(Array.from(slots.values()));
-    });
-    function getAll() {
-      return Array.from(slots).map(([, slot]) => slot);
-    }
-    function add(options) {
-      var _a;
-      const slot = createSlot({
-        ...options,
-        onDispose: onDispose2,
-        context
-      });
-      function onDispose2() {
-        var _a2;
-        slots.delete(slot.name.value);
-        logger.debug("Slot removed", {
-          slot,
-          slots: Array.from(slots)
-        });
-        (_a2 = context.events) == null ? void 0 : _a2.removeSlot.dispatch(slot);
-      }
-      slots.set(slot.name.value, slot);
-      watch(slot.name, (newName, previousName) => {
-        slots.set(newName, slot);
-        slots.delete(previousName);
-      });
-      logger.debug("Slot added", {
-        slot,
-        slots: Array.from(slots.values())
-      });
-      (_a = context.events) == null ? void 0 : _a.addSlot.dispatch(slot);
-      return slot;
-    }
-    async function findDomSlots$1() {
-      const domSlots = await findDomSlots(
-        context
-      );
-      for (const slot of domSlots)
-        slots.set(slot.name.value, slot);
-      return domSlots;
-    }
-    function get(name) {
-      return slots.get(name);
-    }
-    function dispose() {
-      for (const slot of slots.values())
-        slot.dispose();
-      slots.clear();
-      scope.stop();
-    }
-    for (const options of initialSlots) {
-      add({
-        ...options,
-        lazyLoading: false
-      });
-    }
-    return {
-      getAll,
-      add,
-      findDomSlots: findDomSlots$1,
-      get,
-      dispose
-    };
-  });
-}
-function onTcfConsentChange(callback) {
-  var _a;
-  (_a = window.__tcfapi) == null ? void 0 : _a.call(window, "addEventListener", 2, callback);
-  return () => {
-    var _a2;
-    return (_a2 = window.__tcfapi) == null ? void 0 : _a2.call(window, "removeEventListener", 2, callback);
-  };
+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);
 }
 function createQueryDetector({
   onChange,
@@ -365,54 +272,35 @@ function createLogger({
 const logger = createLogger({
   scope: "Adhese SDK"
 });
-function createParameters(options, queryDetector) {
-  const parameters = /* @__PURE__ */ new Map();
-  if (options.logReferrer)
-    parameters.set("re", btoa(document.referrer));
-  if (options.logUrl)
-    parameters.set("ur", btoa(window.location.href));
-  for (const [key, value] of Object.entries({
-    ...options.parameters ?? {},
-    tl: options.consent ? "all" : "none",
-    dt: queryDetector.getQuery(),
-    br: queryDetector.getQuery(),
-    rn: Math.round(Math.random() * 1e4).toString()
-  }))
-    parameters.set(key, value);
-  return parameters;
+const hookMap = /* @__PURE__ */ new Map();
+function clearAllHooks() {
+  hookMap.clear();
 }
-function setupLogging(mergedOptions) {
-  if (mergedOptions.debug || window.location.search.includes("adhese_debug=true")) {
-    logger.setMinLogLevelThreshold("debug");
-    logger.debug("Debug logging enabled");
-  }
-  logger.debug("Created Adhese SDK instance", {
-    mergedOptions
-  });
-}
-function isPreviewMode() {
-  return window.location.search.includes("adhesePreviewCreativeId");
-}
-function createHook({
+function createHook(name, {
   onRun,
-  onAdd,
-  onDispose: onDispose2
-}) {
-  const callbacks = /* @__PURE__ */ new Set();
-  function run() {
-    for (const callback of callbacks)
-      callback();
-    onRun == null ? void 0 : onRun(callbacks);
-  }
+  onAdd
+} = {}) {
+  hookMap.set(name, /* @__PURE__ */ new Set());
+  const run = async (arg) => {
+    let latestResult = arg;
+    for (const callback of hookMap.get(name) ?? [])
+      latestResult = await callback(latestResult) ?? latestResult;
+    onRun == null ? void 0 : onRun(hookMap.get(name));
+    return latestResult;
+  };
   function add(callback) {
-    callbacks.add(callback);
-    onAdd == null ? void 0 : onAdd(callbacks);
-  }
-  function dispose() {
-    onDispose2 == null ? void 0 : onDispose2(callbacks);
-    callbacks.clear();
+    const hookSet = hookMap.get(name);
+    if (hookSet)
+      hookSet.add(callback);
+    else
+      hookMap.set(name, /* @__PURE__ */ new Set([callback]));
+    onAdd == null ? void 0 : onAdd(hookSet);
+    return () => {
+      var _a;
+      (_a = hookMap.get(name)) == null ? void 0 : _a.delete(callback);
+    };
   }
-  return [run, add, dispose];
+  return [run, add];
 }
 let resolveOnInitPromise = () => {
 };
@@ -420,246 +308,313 @@ let isInit = false;
 const waitOnInit = new Promise((resolve) => {
   resolveOnInitPromise = resolve;
 });
-const [runOnInit, onInit, disposeOnInit] = createHook({
+const [runOnInit, onInit] = createHook("onInit", {
   onRun(callbacks) {
     isInit = true;
     resolveOnInitPromise();
     logger.debug("Initialization completed");
-    callbacks.clear();
+    callbacks == null ? void 0 : callbacks.clear();
   },
   onAdd() {
     if (isInit)
-      runOnInit();
+      runOnInit().catch(logger.error);
   }
 });
-let resolveOnDisposePromise = () => {
-};
-let isDisposed = false;
-new Promise((resolve) => {
-  resolveOnDisposePromise = resolve;
-});
-const [runOnDispose, onDispose, disposeOnDispose] = createHook({
-  onRun(callbacks) {
-    isDisposed = true;
-    resolveOnDisposePromise();
-    logger.debug("Disposal completed");
-    callbacks.clear();
-  },
-  onAdd() {
-    if (isDisposed)
-      runOnDispose();
+const [runOnRequest, onRequest] = createHook("onRequest");
+const [runOnResponse, onResponse] = createHook("onResponse");
+const numberLike = union([coerce.string().regex(/^\d+$/), literal("")]).transform((value) => value === "" ? void 0 : Number(value));
+const booleanLike = union([coerce.boolean(), literal("")]);
+const urlLike = union([coerce.string(), literal("")]).transform((value) => {
+  try {
+    return new URL(value);
+  } catch {
+    return void 0;
   }
 });
-function createAdhese(options) {
-  const scope = effectScope();
-  return scope.run(() => {
-    const mergedOptions = {
-      host: `https://ads-${options.account}.adhese.com`,
-      poolHost: `https://pool-${options.account}.adhese.com`,
-      location: "homepage",
-      requestType: "POST",
-      debug: false,
-      initialSlots: [],
-      findDomSlotsOnLoad: false,
-      consent: false,
-      logReferrer: true,
-      logUrl: true,
-      safeFrame: false,
-      eagerRendering: false,
-      viewabilityTracking: true,
-      plugins: [],
-      ...options
-    };
-    setupLogging(mergedOptions);
-    const context = reactive({
-      location: mergedOptions.location,
-      consent: mergedOptions.consent,
-      debug: mergedOptions.debug,
-      getAll,
-      get,
-      options: mergedOptions,
-      logger
+const dateLike = union([coerce.string(), literal("")]).transform((value) => {
+  if (value === "")
+    return void 0;
+  const date = new Date(numberLike.safeParse(value).success ? Number(value) : value);
+  if (Number.isNaN(date.getTime()))
+    return void 0;
+  return date;
+});
+const cssValueLike = union([coerce.string(), literal(""), number()]).transform((value) => {
+  if (value === "" || value === 0 || value === "0")
+    return void 0;
+  if (numberLike.parse(value))
+    return `${numberLike.parse(value)}px`;
+  return String(value);
+});
+const isJson = string().transform((value, { addIssue }) => {
+  try {
+    return JSON.parse(value.replaceAll("'", '"'));
+  } catch (error) {
+    addIssue({
+      code: ZodIssueCode.custom,
+      message: `Invalid JSON: ${error.message}`
     });
-    context.events = createEventManager();
-    context.safeFrame = options.safeFrame ? createSafeFrame({
-      renderFile: `${mergedOptions.poolHost}/sf/r.html`,
-      context
-    }) : void 0;
-    function getLocation() {
-      return context.location;
-    }
-    function setLocation(newLocation) {
-      var _a;
-      context.location = newLocation;
-      (_a = context.events) == null ? void 0 : _a.locationChange.dispatch(newLocation);
-    }
-    const queryDetector = createQueryDetector({
-      onChange: onQueryChange,
-      queries: mergedOptions.queries
+    return NEVER;
+  }
+});
+const isHtmlString = string().transform((value, { addIssue }) => {
+  var _a;
+  const htmlParser = new DOMParser();
+  try {
+    const html = htmlParser.parseFromString(value, "text/html");
+    if (((_a = html.body) == null ? void 0 : _a.children.length) === 0)
+      throw new Error("Invalid HTML");
+    return value;
+  } catch (error) {
+    addIssue({
+      code: ZodIssueCode.custom,
+      message: error.message
     });
-    context.parameters = createParameters(mergedOptions, queryDetector);
-    watch(
-      context.parameters,
-      onParametersChange,
-      {
-        deep: true,
-        immediate: true
-      }
-    );
-    function onParametersChange() {
-      var _a;
-      if (context.parameters)
-        (_a = context.events) == null ? void 0 : _a.parametersChange.dispatch(context.parameters);
-    }
-    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();
-    }
-    function getConsent() {
-      return context.consent;
-    }
-    function setConsent(newConsent) {
-      var _a, _b;
-      (_a = context.parameters) == null ? void 0 : _a.set("tl", newConsent ? "all" : "none");
-      context.consent = newConsent;
-      (_b = context.events) == null ? void 0 : _b.consentChange.dispatch(newConsent);
-    }
-    const slotManager = createSlotManager({
-      initialSlots: mergedOptions.initialSlots,
-      context
-    });
-    function getAll() {
-      return slotManager.getAll() ?? [];
-    }
-    function get(name) {
-      return slotManager.get(name);
-    }
-    async function addSlot(slotOptions) {
-      if (!slotManager)
-        throw new Error("Slot manager not initialized");
-      const slot = slotManager.add(slotOptions);
-      if (!slot.lazyLoading) {
-        slot.ad.value = await requestAd({
-          slot,
-          context
-        });
+    return NEVER;
+  }
+});
+const isJsonOrHtmlString = union([isJson, isHtmlString]);
+const isJsonOrHtmlOptionalString = union([coerce.string(), isJsonOrHtmlString]).transform((value) => {
+  if (value === "")
+    return void 0;
+  return value;
+}).optional();
+const baseSchema = object({
+  adDuration: numberLike.optional(),
+  adFormat: string().optional(),
+  adType: string(),
+  additionalCreativeTracker: urlLike.optional(),
+  additionalViewableTracker: string().optional(),
+  adspaceEnd: dateLike.optional(),
+  adspaceId: string().optional(),
+  adspaceKey: string().optional(),
+  adspaceStart: dateLike.optional(),
+  advertiserId: string().optional(),
+  altText: string().optional(),
+  auctionable: booleanLike.optional(),
+  body: isJsonOrHtmlOptionalString,
+  clickTag: urlLike.optional(),
+  comment: string().optional(),
+  creativeName: string().optional(),
+  deliveryGroupId: string().optional(),
+  deliveryMultiples: string().optional(),
+  ext: string().optional(),
+  extension: object({
+    mediaType: string(),
+    prebid: unknown().optional()
+  }).optional(),
+  height: numberLike.optional(),
+  id: string(),
+  impressionCounter: urlLike.optional(),
+  libId: string().optional(),
+  orderId: string().optional(),
+  orderName: string().optional(),
+  orderProperty: string().optional(),
+  origin: union([literal("JERLICIA"), literal("DALE")]),
+  originData: unknown().optional(),
+  originInstance: string().optional(),
+  poolPath: urlLike.optional(),
+  preview: booleanLike.optional(),
+  priority: numberLike.optional(),
+  sfSrc: urlLike.optional(),
+  share: string().optional(),
+  // eslint-disable-next-line ts/naming-convention
+  slotID: string(),
+  slotName: string(),
+  swfSrc: urlLike.optional(),
+  tag: isJsonOrHtmlOptionalString,
+  tagUrl: urlLike.optional(),
+  timeStamp: dateLike.optional(),
+  trackedImpressionCounter: urlLike.optional(),
+  tracker: urlLike.optional(),
+  trackingUrl: urlLike.optional(),
+  url: urlLike.optional(),
+  viewableImpressionCounter: urlLike.optional(),
+  width: numberLike.optional(),
+  widthLarge: cssValueLike.optional()
+});
+const jerliciaSchema = object({
+  origin: literal("JERLICIA"),
+  tag: isJsonOrHtmlString
+}).passthrough();
+const daleSchema = object({
+  origin: literal("DALE"),
+  body: isJsonOrHtmlString
+}).passthrough().transform(({ body, ...data }) => ({
+  ...data,
+  tag: body
+}));
+const adResponseSchema = baseSchema.extend({
+  additionalCreatives: lazy(() => union([adResponseSchema.array(), string()]).optional())
+});
+const adSchema = adResponseSchema.transform(({
+  additionalCreatives,
+  ...data
+}) => {
+  const filteredValue = Object.fromEntries(
+    Object.entries(data).filter(([, value]) => Boolean(value) && JSON.stringify(value) !== "{}" && JSON.stringify(value) !== "[]")
+  );
+  return {
+    ...filteredValue,
+    additionalCreatives: Array.isArray(additionalCreatives) ? additionalCreatives.map((creative) => adSchema.parse(creative)) : additionalCreatives
+  };
+});
+function parseResponse(response) {
+  const schemaMap = {
+    /* eslint-disable ts/naming-convention */
+    JERLICIA: jerliciaSchema,
+    DALE: daleSchema
+    /* eslint-enable ts/naming-convention */
+  };
+  const preParsed = adResponseSchema.array().parse(response);
+  return preParsed.map((item) => {
+    const schema = schemaMap[item.origin];
+    if (!schema)
+      return adSchema.parse(item);
+    return schema.parse(item);
+  });
+}
+async function requestPreviews(account) {
+  const previewObjects = getPreviewObjects();
+  const list = (await Promise.allSettled(previewObjects.filter((previewObject) => "adhesePreviewCreativeId" in previewObject).map(async (previewObject) => {
+    const endpoint = new URL(`https://${account}-preview.adhese.org/creatives/preview/json/tag.do`);
+    endpoint.searchParams.set(
+      "id",
+      previewObject.adhesePreviewCreativeId
+    );
+    const response = await fetch(endpoint.href, {
+      method: "GET",
+      headers: {
+        accept: "application/json"
       }
-      return slot;
+    });
+    if (!response.ok)
+      return Promise.reject(new Error(`Failed to request preview ad with ID: ${previewObject.adhesePreviewCreativeId}`));
+    return await response.json();
+  }))).filter((response) => {
+    if (response.status === "rejected") {
+      logger.error(response.reason);
+      return false;
     }
-    async function findDomSlots2() {
-      const domSlots = (await slotManager.findDomSlots() ?? []).filter((slot) => !slot.lazyLoading);
-      if (domSlots.length <= 0)
-        return [];
-      const ads = await requestAds({
-        slots: domSlots,
-        context
-      });
-      for (const ad of ads) {
-        const slot = slotManager.get(ad.slotName);
-        if (slot)
-          slot.ad.value = ad;
-      }
-      return domSlots;
+    return response.status === "fulfilled";
+  }).map((response) => response.value.map((item) => ({
+    ...item,
+    preview: true
+  })));
+  return adSchema.array().parse(list.flat());
+}
+function getPreviewObjects() {
+  const currentUrl = new URL(window.location.href);
+  const previewObjects = [];
+  let currentObject = {};
+  for (const [key, value] of currentUrl.searchParams.entries()) {
+    if (key === "adhesePreviewCreativeId" && Object.keys(currentObject).length > 0) {
+      previewObjects.push(currentObject);
+      currentObject = {};
     }
-    async function toggleDebug() {
-      var _a, _b;
-      context.debug = !context.debug;
-      if (context.debug) {
-        logger.setMinLogLevelThreshold("debug");
-        logger.debug("Debug mode enabled");
-        (_a = context.events) == null ? void 0 : _a.debugChange.dispatch(true);
-      } else {
-        logger.debug("Debug mode disabled");
-        logger.setMinLogLevelThreshold("info");
-        (_b = context.events) == null ? void 0 : _b.debugChange.dispatch(false);
-      }
-      return context.debug;
+    currentObject[key] = value;
+  }
+  if (Object.keys(currentObject).length > 0)
+    previewObjects.push(currentObject);
+  return previewObjects;
+}
+function requestWithPost({
+  context: { options: { host }, parameters },
+  ...options
+}) {
+  const payload = {
+    ...options,
+    slots: options.slots.map((slot) => ({
+      slotname: toValue(slot.name),
+      parameters: parseParameters(slot.parameters)
+    })),
+    parameters: parameters && parseParameters(parameters)
+  };
+  return fetch(`${new URL(host).href}json`, {
+    method: "POST",
+    body: JSON.stringify(payload),
+    headers: {
+      // eslint-disable-next-line ts/naming-convention
+      "Content-Type": "application/json"
     }
-    async function fetchAndRenderAllSlots() {
-      const slots = (slotManager.getAll() ?? []).filter((slot) => !slot.lazyLoading);
-      if (slots.length === 0)
-        return;
-      const ads = await requestAds({
-        slots,
-        context
-      });
-      for (const ad of ads) {
-        const slot = slotManager.get(ad.slotName);
-        if (slot)
-          slot.ad.value = ad;
-      }
+  });
+}
+async function requestWithGet({ context, slots }) {
+  return fetch(new URL(`${context.options.host}/json/sl${slots.map((slot) => toValue(slot.name)).join("/sl")}`), {
+    method: "GET",
+    headers: {
+      // eslint-disable-next-line ts/naming-convention
+      "Content-Type": "application/json"
     }
-    const disposeOnTcfConsentChange = onTcfConsentChange(async (data) => {
-      var _a, _b;
-      if (!data.tcString)
-        return;
-      logger.debug("TCF v2 consent data received", {
-        data
-      });
-      (_a = context.parameters) == null ? void 0 : _a.set("xt", data.tcString);
-      (_b = context.parameters) == null ? void 0 : _b.delete("tl");
-      await fetchAndRenderAllSlots();
+  });
+}
+function parseParameters(parameters) {
+  return Object.fromEntries(Array.from(parameters.entries()).filter(([key]) => {
+    if (key.length === 2)
+      return true;
+    logger.warn(`Invalid parameter key: ${key}. Key should be exactly 2 characters long. Key will be ignored.`);
+    return false;
+  }).map(([key, value]) => {
+    if (typeof value === "string")
+      return [key, filterSpecialChars(value)];
+    return [key, value.map(filterSpecialChars)];
+  }));
+}
+function filterSpecialChars(value) {
+  const specialRegex = /[^\p{L}\p{N}_]/gu;
+  return value.replaceAll(specialRegex, "_");
+}
+async function requestAds(requestOptions) {
+  var _a, _b, _c, _d, _e;
+  const options = await runOnRequest(requestOptions);
+  const { context } = options;
+  try {
+    (_a = context.events) == null ? void 0 : _a.requestAd.dispatch({
+      ...options,
+      context
     });
-    function dispose() {
-      var _a, _b;
-      queryDetector.dispose();
-      slotManager.dispose();
-      queryDetector.dispose();
-      disposeOnTcfConsentChange();
-      (_a = context.parameters) == null ? void 0 : _a.clear();
-      logger.resetLogs();
-      (_b = context.events) == null ? void 0 : _b.dispose();
-      logger.info("Adhese instance disposed");
-      runOnDispose();
-      disposeOnInit();
-      disposeOnDispose();
-      scope.stop();
-    }
-    for (const plugin of mergedOptions.plugins)
-      plugin(context);
-    onInit(async () => {
-      var _a;
-      if ((slotManager.getAll().length ?? 0) > 0)
-        await fetchAndRenderAllSlots().catch(logger.error);
-      if (mergedOptions.findDomSlotsOnLoad)
-        await findDomSlots2();
-      if (mergedOptions.debug || window.location.search.includes("adhese_debug=true") || isPreviewMode())
-        (_a = context.events) == null ? void 0 : _a.debugChange.dispatch(true);
-      if (!scope.active)
-        dispose();
+    const [response, previews] = await Promise.all([((_b = context.options.requestType) == null ? void 0 : _b.toUpperCase()) === "POST" ? requestWithPost(options) : requestWithGet(options), requestPreviews(context.options.account)]);
+    logger.debug("Received response", response);
+    if (!response.ok)
+      throw new Error(`Failed to request ad: ${response.status} ${response.statusText}`);
+    const result = parseResponse(await response.json());
+    logger.debug("Parsed ad", result);
+    if (previews.length > 0)
+      logger.info(`Found ${previews.length} ${previews.length === 1 ? "preview" : "previews"}. Replacing ads in response with preview items`, previews);
+    const matchedPreviews = previews.map(({ slotName, ...preview }) => {
+      const partnerAd = result.find((ad) => ad.libId === preview.libId);
+      return {
+        slotName: `${(partnerAd == null ? void 0 : partnerAd.slotName) ?? slotName}`,
+        ...preview
+      };
     });
-    runOnInit();
-    return {
-      ...mergedOptions,
-      ...slotManager,
-      parameters: context.parameters,
-      events: context.events,
-      getLocation,
-      setLocation,
-      getConsent,
-      setConsent,
-      addSlot,
-      findDomSlots: findDomSlots2,
-      dispose,
-      toggleDebug,
-      context
-    };
-  });
+    if (matchedPreviews.length > 0)
+      (_c = context.events) == null ? void 0 : _c.previewReceived.dispatch(matchedPreviews);
+    const mergedResult = await runOnResponse([
+      ...result.filter((ad) => !previews.some((preview) => preview.libId === ad.libId)),
+      ...matchedPreviews
+    ]);
+    if (mergedResult.length === 0)
+      throw new Error("No ads found");
+    (_d = context.events) == null ? void 0 : _d.responseReceived.dispatch(mergedResult);
+    return mergedResult;
+  } catch (error) {
+    logger.error(String(error));
+    (_e = context.events) == null ? void 0 : _e.requestError.dispatch(error);
+    throw error;
+  }
 }
-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);
+async function requestAd({
+  slot,
+  ...options
+}) {
+  const [ad] = await requestAds({
+    slots: [slot],
+    ...options
+  });
+  return ad;
 }
+const [runOnRender, onRender] = createHook("onRender");
 function useViewabilityObserver({ context, ad, name, element }) {
   let timeoutId = null;
   const {
@@ -840,10 +795,10 @@ function createSlot(options) {
       var _a, _b;
       await waitForDomLoad();
       await waitOnInit;
-      const renderAd = adToRender ?? ad.value ?? await requestAd$1();
-      if (originalAd.value) {
-        ad.value = ((_a = options.onBeforeRender) == null ? void 0 : _a.call(options, adToRender ?? originalAd.value)) ?? renderAd;
-      }
+      let renderAd = adToRender ?? ad.value ?? originalAd.value ?? await requestAd$1();
+      if (renderAd)
+        renderAd = ((_a = options.onBeforeRender) == null ? void 0 : _a.call(options, renderAd)) ?? renderAd;
+      renderAd = await runOnRender(renderAd);
       if (!element.value) {
         const error = `Could not create slot for format ${format.value}. No element found.`;
         logger.error(error, options);
@@ -851,8 +806,8 @@ function createSlot(options) {
       }
       if (context.debug)
         element.value.style.position = "relative";
-      if (context.safeFrame && ad.value && renderMode === "iframe") {
-        const position = context.safeFrame.addPosition(ad.value, element.value);
+      if (context.safeFrame && renderAd && renderMode === "iframe") {
+        const position = context.safeFrame.addPosition(renderAd, element.value);
         await context.safeFrame.render(position);
       } else {
         renderFunctions[renderMode](renderAd, element.value);
@@ -891,323 +846,378 @@ function createSlot(options) {
       scope.stop();
     }
     return {
-      location: context.location,
-      lazyLoading: options.lazyLoading ?? false,
-      slot,
-      parameters,
-      format,
-      name,
-      ad,
-      isViewabilityTracked,
-      isImpressionTracked,
-      render,
-      getElement,
+      location: context.location,
+      lazyLoading: options.lazyLoading ?? false,
+      slot,
+      parameters,
+      format,
+      name,
+      ad,
+      isViewabilityTracked,
+      isImpressionTracked,
+      render,
+      getElement,
+      dispose
+    };
+  });
+}
+function useDomLoaded() {
+  const isDomLoaded = ref(false);
+  onInit(async () => {
+    await waitForDomLoad();
+    isDomLoaded.value = true;
+  });
+  return isDomLoaded;
+}
+async function findDomSlots(context) {
+  await waitForDomLoad();
+  return Array.from(document.querySelectorAll(".adunit")).filter((element) => {
+    var _a;
+    if (!element.dataset.format)
+      return false;
+    const name = generateName(
+      context.location,
+      element.dataset.format,
+      element.dataset.slot
+    );
+    return !((_a = context.getAll) == null ? void 0 : _a.call(context).some((activeSlot) => activeSlot.name.value === name));
+  }).map((element) => createSlot({
+    format: element.dataset.format,
+    containingElement: element,
+    slot: element.dataset.slot,
+    context
+  })).filter((slot) => {
+    var _a;
+    return !((_a = context.getAll) == null ? void 0 : _a.call(context).some((activeSlot) => activeSlot.name.value === slot.name.value));
+  });
+}
+function createSlotManager({
+  initialSlots = [],
+  context
+}) {
+  const scope = effectScope();
+  return scope.run(() => {
+    const slots = shallowReactive(/* @__PURE__ */ new Map());
+    watchEffect(() => {
+      var _a;
+      (_a = context.events) == null ? void 0 : _a.changeSlots.dispatch(Array.from(slots.values()));
+    });
+    function getAll() {
+      return Array.from(slots).map(([, slot]) => slot);
+    }
+    function add(options) {
+      var _a;
+      const slot = createSlot({
+        ...options,
+        onDispose: onDispose2,
+        context
+      });
+      function onDispose2() {
+        var _a2;
+        slots.delete(slot.name.value);
+        logger.debug("Slot removed", {
+          slot,
+          slots: Array.from(slots)
+        });
+        (_a2 = context.events) == null ? void 0 : _a2.removeSlot.dispatch(slot);
+      }
+      slots.set(slot.name.value, slot);
+      watch(slot.name, (newName, previousName) => {
+        slots.set(newName, slot);
+        slots.delete(previousName);
+      });
+      logger.debug("Slot added", {
+        slot,
+        slots: Array.from(slots.values())
+      });
+      (_a = context.events) == null ? void 0 : _a.addSlot.dispatch(slot);
+      return slot;
+    }
+    async function findDomSlots$1() {
+      const domSlots = await findDomSlots(
+        context
+      );
+      for (const slot of domSlots)
+        slots.set(slot.name.value, slot);
+      return domSlots;
+    }
+    function get(name) {
+      return slots.get(name);
+    }
+    function dispose() {
+      for (const slot of slots.values())
+        slot.dispose();
+      slots.clear();
+      scope.stop();
+    }
+    for (const options of initialSlots) {
+      add({
+        ...options,
+        lazyLoading: false
+      });
+    }
+    return {
+      getAll,
+      add,
+      findDomSlots: findDomSlots$1,
+      get,
       dispose
     };
   });
 }
-function useDomLoaded() {
-  const isDomLoaded = ref(false);
-  onInit(async () => {
-    await waitForDomLoad();
-    isDomLoaded.value = true;
-  });
-  return isDomLoaded;
+function onTcfConsentChange(callback) {
+  var _a;
+  (_a = window.__tcfapi) == null ? void 0 : _a.call(window, "addEventListener", 2, callback);
+  return () => {
+    var _a2;
+    return (_a2 = window.__tcfapi) == null ? void 0 : _a2.call(window, "removeEventListener", 2, callback);
+  };
 }
-const numberLike = union([coerce.string().regex(/^\d+$/), literal("")]).transform((value) => value === "" ? void 0 : Number(value));
-const booleanLike = union([coerce.boolean(), literal("")]);
-const urlLike = union([coerce.string(), literal("")]).transform((value) => {
-  try {
-    return new URL(value);
-  } catch {
-    return void 0;
+function createParameters(options, queryDetector) {
+  const parameters = /* @__PURE__ */ new Map();
+  if (options.logReferrer)
+    parameters.set("re", btoa(document.referrer));
+  if (options.logUrl)
+    parameters.set("ur", btoa(window.location.href));
+  for (const [key, value] of Object.entries({
+    ...options.parameters ?? {},
+    tl: options.consent ? "all" : "none",
+    dt: queryDetector.getQuery(),
+    br: queryDetector.getQuery(),
+    rn: Math.round(Math.random() * 1e4).toString()
+  }))
+    parameters.set(key, value);
+  return parameters;
+}
+function setupLogging(mergedOptions) {
+  if (mergedOptions.debug || window.location.search.includes("adhese_debug=true")) {
+    logger.setMinLogLevelThreshold("debug");
+    logger.debug("Debug logging enabled");
   }
-});
-const dateLike = union([coerce.string(), literal("")]).transform((value) => {
-  if (value === "")
-    return void 0;
-  const date = new Date(numberLike.safeParse(value).success ? Number(value) : value);
-  if (Number.isNaN(date.getTime()))
-    return void 0;
-  return date;
-});
-const cssValueLike = union([coerce.string(), literal(""), number()]).transform((value) => {
-  if (value === "" || value === 0 || value === "0")
-    return void 0;
-  if (numberLike.parse(value))
-    return `${numberLike.parse(value)}px`;
-  return String(value);
-});
-const isJson = string().transform((value, { addIssue }) => {
-  try {
-    return JSON.parse(value.replaceAll("'", '"'));
-  } catch (error) {
-    addIssue({
-      code: ZodIssueCode.custom,
-      message: `Invalid JSON: ${error.message}`
-    });
-    return NEVER;
+  logger.debug("Created Adhese SDK instance", {
+    mergedOptions
+  });
+}
+function isPreviewMode() {
+  return window.location.search.includes("adhesePreviewCreativeId");
+}
+let isDisposed = false;
+const [runOnDispose, onDispose] = createHook("onDispose", {
+  onRun(callbacks) {
+    isDisposed = true;
+    logger.debug("Disposal completed");
+    callbacks == null ? void 0 : callbacks.clear();
+  },
+  onAdd() {
+    if (isDisposed)
+      runOnDispose().catch(logger.error);
   }
 });
-const isHtmlString = string().transform((value, { addIssue }) => {
-  var _a;
-  const htmlParser = new DOMParser();
-  try {
-    const html = htmlParser.parseFromString(value, "text/html");
-    if (((_a = html.body) == null ? void 0 : _a.children.length) === 0)
-      throw new Error("Invalid HTML");
-    return value;
-  } catch (error) {
-    addIssue({
-      code: ZodIssueCode.custom,
-      message: error.message
+function createAdhese(options) {
+  const scope = effectScope();
+  return scope.run(() => {
+    const mergedOptions = {
+      host: `https://ads-${options.account}.adhese.com`,
+      poolHost: `https://pool-${options.account}.adhese.com`,
+      location: "homepage",
+      requestType: "POST",
+      debug: false,
+      initialSlots: [],
+      findDomSlotsOnLoad: false,
+      consent: false,
+      logReferrer: true,
+      logUrl: true,
+      safeFrame: false,
+      eagerRendering: false,
+      viewabilityTracking: true,
+      plugins: [],
+      ...options
+    };
+    setupLogging(mergedOptions);
+    const context = reactive({
+      location: mergedOptions.location,
+      consent: mergedOptions.consent,
+      debug: mergedOptions.debug,
+      getAll,
+      get,
+      options: mergedOptions,
+      logger,
+      addSlot
     });
-    return NEVER;
-  }
-});
-const isJsonOrHtmlString = union([isJson, isHtmlString]);
-const isJsonOrHtmlOptionalString = union([coerce.string(), isJsonOrHtmlString]).transform((value) => {
-  if (value === "")
-    return void 0;
-  return value;
-}).optional();
-const baseSchema = object({
-  adDuration: numberLike.optional(),
-  adFormat: string().optional(),
-  adType: string(),
-  additionalCreativeTracker: urlLike.optional(),
-  additionalViewableTracker: string().optional(),
-  adspaceEnd: dateLike.optional(),
-  adspaceId: string().optional(),
-  adspaceKey: string().optional(),
-  adspaceStart: dateLike.optional(),
-  advertiserId: string().optional(),
-  altText: string().optional(),
-  auctionable: booleanLike.optional(),
-  body: isJsonOrHtmlOptionalString,
-  clickTag: urlLike.optional(),
-  comment: string().optional(),
-  creativeName: string().optional(),
-  deliveryGroupId: string().optional(),
-  deliveryMultiples: string().optional(),
-  ext: string().optional(),
-  extension: object({
-    mediaType: string(),
-    prebid: unknown().optional()
-  }).optional(),
-  height: numberLike.optional(),
-  id: string(),
-  impressionCounter: urlLike.optional(),
-  libId: string().optional(),
-  orderId: string().optional(),
-  orderName: string().optional(),
-  orderProperty: string().optional(),
-  origin: union([literal("JERLICIA"), literal("DALE")]),
-  originData: unknown().optional(),
-  originInstance: string().optional(),
-  poolPath: urlLike.optional(),
-  preview: booleanLike.optional(),
-  priority: numberLike.optional(),
-  sfSrc: urlLike.optional(),
-  share: string().optional(),
-  // eslint-disable-next-line ts/naming-convention
-  slotID: string(),
-  slotName: string(),
-  swfSrc: urlLike.optional(),
-  tag: isJsonOrHtmlOptionalString,
-  tagUrl: urlLike.optional(),
-  timeStamp: dateLike.optional(),
-  trackedImpressionCounter: urlLike.optional(),
-  tracker: urlLike.optional(),
-  trackingUrl: urlLike.optional(),
-  url: urlLike.optional(),
-  viewableImpressionCounter: urlLike.optional(),
-  width: numberLike.optional(),
-  widthLarge: cssValueLike.optional()
-});
-const jerliciaSchema = object({
-  origin: literal("JERLICIA"),
-  tag: isJsonOrHtmlString
-}).passthrough();
-const daleSchema = object({
-  origin: literal("DALE"),
-  body: isJsonOrHtmlString
-}).passthrough().transform(({ body, ...data }) => ({
-  ...data,
-  tag: body
-}));
-const adResponseSchema = baseSchema.extend({
-  additionalCreatives: lazy(() => union([adResponseSchema.array(), string()]).optional())
-});
-const adSchema = adResponseSchema.transform(({
-  additionalCreatives,
-  ...data
-}) => {
-  const filteredValue = Object.fromEntries(
-    Object.entries(data).filter(([, value]) => Boolean(value) && JSON.stringify(value) !== "{}" && JSON.stringify(value) !== "[]")
-  );
-  return {
-    ...filteredValue,
-    additionalCreatives: Array.isArray(additionalCreatives) ? additionalCreatives.map((creative) => adSchema.parse(creative)) : additionalCreatives
-  };
-});
-function parseResponse(response) {
-  const schemaMap = {
-    /* eslint-disable ts/naming-convention */
-    JERLICIA: jerliciaSchema,
-    DALE: daleSchema
-    /* eslint-enable ts/naming-convention */
-  };
-  const preParsed = adResponseSchema.array().parse(response);
-  return preParsed.map((item) => {
-    const schema = schemaMap[item.origin];
-    if (!schema)
-      return adSchema.parse(item);
-    return schema.parse(item);
-  });
-}
-async function requestPreviews(account) {
-  const previewObjects = getPreviewObjects();
-  const list = (await Promise.allSettled(previewObjects.filter((previewObject) => "adhesePreviewCreativeId" in previewObject).map(async (previewObject) => {
-    const endpoint = new URL(`https://${account}-preview.adhese.org/creatives/preview/json/tag.do`);
-    endpoint.searchParams.set(
-      "id",
-      previewObject.adhesePreviewCreativeId
-    );
-    const response = await fetch(endpoint.href, {
-      method: "GET",
-      headers: {
-        accept: "application/json"
-      }
+    for (const [index, plugin] of mergedOptions.plugins.entries()) {
+      plugin(context, {
+        index
+      });
+    }
+    context.events = createEventManager();
+    context.safeFrame = options.safeFrame ? createSafeFrame({
+      renderFile: `${mergedOptions.poolHost}/sf/r.html`,
+      context
+    }) : void 0;
+    function getLocation() {
+      return context.location;
+    }
+    function setLocation(newLocation) {
+      var _a;
+      context.location = newLocation;
+      (_a = context.events) == null ? void 0 : _a.locationChange.dispatch(newLocation);
+    }
+    const queryDetector = createQueryDetector({
+      onChange: onQueryChange,
+      queries: mergedOptions.queries
     });
-    if (!response.ok)
-      return Promise.reject(new Error(`Failed to request preview ad with ID: ${previewObject.adhesePreviewCreativeId}`));
-    return await response.json();
-  }))).filter((response) => {
-    if (response.status === "rejected") {
-      logger.error(response.reason);
-      return false;
+    context.parameters = createParameters(mergedOptions, queryDetector);
+    watch(
+      context.parameters,
+      onParametersChange,
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    function onParametersChange() {
+      var _a;
+      if (context.parameters)
+        (_a = context.events) == null ? void 0 : _a.parametersChange.dispatch(context.parameters);
     }
-    return response.status === "fulfilled";
-  }).map((response) => response.value.map((item) => ({
-    ...item,
-    preview: true
-  })));
-  return adSchema.array().parse(list.flat());
-}
-function getPreviewObjects() {
-  const currentUrl = new URL(window.location.href);
-  const previewObjects = [];
-  let currentObject = {};
-  for (const [key, value] of currentUrl.searchParams.entries()) {
-    if (key === "adhesePreviewCreativeId" && Object.keys(currentObject).length > 0) {
-      previewObjects.push(currentObject);
-      currentObject = {};
+    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();
     }
-    currentObject[key] = value;
-  }
-  if (Object.keys(currentObject).length > 0)
-    previewObjects.push(currentObject);
-  return previewObjects;
-}
-function requestWithPost({
-  context: { options: { host }, parameters },
-  ...options
-}) {
-  const payload = {
-    ...options,
-    slots: options.slots.map((slot) => ({
-      slotname: toValue(slot.name),
-      parameters: parseParameters(slot.parameters)
-    })),
-    parameters: parameters && parseParameters(parameters)
-  };
-  return fetch(`${new URL(host).href}json`, {
-    method: "POST",
-    body: JSON.stringify(payload),
-    headers: {
-      // eslint-disable-next-line ts/naming-convention
-      "Content-Type": "application/json"
+    function getConsent() {
+      return context.consent;
     }
-  });
-}
-async function requestWithGet({ context, slots }) {
-  return fetch(new URL(`${context.options.host}/json/sl${slots.map((slot) => toValue(slot.name)).join("/sl")}`), {
-    method: "GET",
-    headers: {
-      // eslint-disable-next-line ts/naming-convention
-      "Content-Type": "application/json"
+    function setConsent(newConsent) {
+      var _a, _b;
+      (_a = context.parameters) == null ? void 0 : _a.set("tl", newConsent ? "all" : "none");
+      context.consent = newConsent;
+      (_b = context.events) == null ? void 0 : _b.consentChange.dispatch(newConsent);
     }
-  });
-}
-function parseParameters(parameters) {
-  return Object.fromEntries(Array.from(parameters.entries()).filter(([key]) => {
-    if (key.length === 2)
-      return true;
-    logger.warn(`Invalid parameter key: ${key}. Key should be exactly 2 characters long. Key will be ignored.`);
-    return false;
-  }).map(([key, value]) => {
-    if (typeof value === "string")
-      return [key, filterSpecialChars(value)];
-    return [key, value.map(filterSpecialChars)];
-  }));
-}
-function filterSpecialChars(value) {
-  const specialRegex = /[^\p{L}\p{N}_]/gu;
-  return value.replaceAll(specialRegex, "_");
-}
-async function requestAds(options) {
-  var _a, _b, _c, _d, _e;
-  const { context } = options;
-  try {
-    (_a = context.events) == null ? void 0 : _a.requestAd.dispatch({
-      ...options,
+    const slotManager = createSlotManager({
+      initialSlots: mergedOptions.initialSlots,
       context
     });
-    const [response, previews] = await Promise.all([((_b = context.options.requestType) == null ? void 0 : _b.toUpperCase()) === "POST" ? requestWithPost(options) : requestWithGet(options), requestPreviews(context.options.account)]);
-    logger.debug("Received response", response);
-    if (!response.ok)
-      throw new Error(`Failed to request ad: ${response.status} ${response.statusText}`);
-    const result = parseResponse(await response.json());
-    logger.debug("Parsed ad", result);
-    if (previews.length > 0)
-      logger.info(`Found ${previews.length} ${previews.length === 1 ? "preview" : "previews"}. Replacing ads in response with preview items`, previews);
-    const matchedPreviews = previews.map(({ slotName, ...preview }) => {
-      const partnerAd = result.find((ad) => ad.libId === preview.libId);
-      return {
-        slotName: `${(partnerAd == null ? void 0 : partnerAd.slotName) ?? slotName}`,
-        ...preview
-      };
+    function getAll() {
+      return slotManager.getAll() ?? [];
+    }
+    function get(name) {
+      return slotManager.get(name);
+    }
+    function addSlot(slotOptions) {
+      if (!slotManager)
+        throw new Error("Slot manager not initialized");
+      return slotManager.add(slotOptions);
+    }
+    async function findDomSlots2() {
+      const domSlots = (await slotManager.findDomSlots() ?? []).filter((slot) => !slot.lazyLoading);
+      if (domSlots.length <= 0)
+        return [];
+      const ads = await requestAds({
+        slots: domSlots,
+        context
+      });
+      for (const ad of ads) {
+        const slot = slotManager.get(ad.slotName);
+        if (slot)
+          slot.ad.value = ad;
+      }
+      return domSlots;
+    }
+    async function toggleDebug() {
+      var _a, _b;
+      context.debug = !context.debug;
+      if (context.debug) {
+        logger.setMinLogLevelThreshold("debug");
+        logger.debug("Debug mode enabled");
+        (_a = context.events) == null ? void 0 : _a.debugChange.dispatch(true);
+      } else {
+        logger.debug("Debug mode disabled");
+        logger.setMinLogLevelThreshold("info");
+        (_b = context.events) == null ? void 0 : _b.debugChange.dispatch(false);
+      }
+      return context.debug;
+    }
+    async function fetchAndRenderAllSlots() {
+      const slots = (slotManager.getAll() ?? []).filter((slot) => !slot.lazyLoading);
+      if (slots.length === 0)
+        return;
+      const ads = await requestAds({
+        slots,
+        context
+      });
+      for (const ad of ads) {
+        const slot = slotManager.get(ad.slotName);
+        if (slot)
+          slot.ad.value = ad;
+      }
+    }
+    const disposeOnTcfConsentChange = onTcfConsentChange(async (data) => {
+      var _a, _b;
+      if (!data.tcString)
+        return;
+      logger.debug("TCF v2 consent data received", {
+        data
+      });
+      (_a = context.parameters) == null ? void 0 : _a.set("xt", data.tcString);
+      (_b = context.parameters) == null ? void 0 : _b.delete("tl");
+      await fetchAndRenderAllSlots();
     });
-    if (matchedPreviews.length > 0)
-      (_c = context.events) == null ? void 0 : _c.previewReceived.dispatch(matchedPreviews);
-    const mergedResult = [
-      ...result.filter((ad) => !previews.some((preview) => preview.libId === ad.libId)),
-      ...matchedPreviews
-    ];
-    if (mergedResult.length === 0)
-      throw new Error("No ads found");
-    (_d = context.events) == null ? void 0 : _d.responseReceived.dispatch(mergedResult);
-    return mergedResult;
-  } catch (error) {
-    logger.error(String(error));
-    (_e = context.events) == null ? void 0 : _e.requestError.dispatch(error);
-    throw error;
-  }
-}
-async function requestAd({
-  slot,
-  ...options
-}) {
-  const [ad] = await requestAds({
-    slots: [slot],
-    ...options
+    function dispose() {
+      var _a, _b;
+      queryDetector.dispose();
+      slotManager.dispose();
+      queryDetector.dispose();
+      disposeOnTcfConsentChange();
+      (_a = context.parameters) == null ? void 0 : _a.clear();
+      logger.resetLogs();
+      (_b = context.events) == null ? void 0 : _b.dispose();
+      logger.info("Adhese instance disposed");
+      runOnDispose().catch(logger.error);
+      clearAllHooks();
+      scope.stop();
+    }
+    onInit(async () => {
+      var _a;
+      if ((slotManager.getAll().length ?? 0) > 0)
+        await fetchAndRenderAllSlots().catch(logger.error);
+      if (mergedOptions.findDomSlotsOnLoad)
+        await findDomSlots2();
+      if (mergedOptions.debug || window.location.search.includes("adhese_debug=true") || isPreviewMode())
+        (_a = context.events) == null ? void 0 : _a.debugChange.dispatch(true);
+      if (!scope.active)
+        dispose();
+    });
+    runOnInit().catch(logger.error);
+    return {
+      parameters: context.parameters,
+      events: context.events,
+      getLocation,
+      setLocation,
+      getConsent,
+      setConsent,
+      addSlot,
+      findDomSlots: findDomSlots2,
+      dispose,
+      toggleDebug,
+      get: slotManager.get,
+      getAll: slotManager.getAll,
+      context,
+      options: mergedOptions
+    };
   });
-  return ad;
 }
 export {
   createAdhese,
+  logger,
   onDispose,
-  onInit
+  onInit,
+  onRender,
+  onRequest,
+  onResponse,
+  requestAd,
+  requestAds
 };
 //# sourceMappingURL=index.js.map