npm - @adhese/sdk - Versions diffs - 0.4.0 → 0.5.0 - Mend

@adhese/sdk 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/cjs/index.js CHANGED Viewed

@@ -1,12 +1,7 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const sdkDevtools = require("@adhese/sdk-devtools");
+const runtimeCore = require("@vue/runtime-core");
 const lodashEs = require("lodash-es");
 const zod = require("zod");
 async function waitForDomLoad() {
@@ -68,91 +63,132 @@ function createEvent() {
     removeListener
   };
 }
+function renderIframe(ad, element) {
+  const iframe = document.createElement("iframe");
+  iframe.srcdoc = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <style>
+            body {
+              margin: 0;
+              padding: 0;
+              overflow: hidden;
+            }
+          </style>
+        </head>
+        <body>
+          ${String(ad.tag)}
+        </body>
+      `.replaceAll(/\s+/g, " ").trim();
+  iframe.style.border = "none";
+  iframe.style.width = ad.width ?? "auto";
+  iframe.style.height = ad.height ?? "auto";
+  element.replaceChildren(iframe);
+}
+function renderInline(ad, element) {
+  element.style.width = ad.width ?? "auto";
+  element.style.height = ad.height ?? "auto";
+  element.innerHTML = String(ad.tag);
+}
+function generateName(location, format, slot) {
+  return `${location}${slot ? `${slot}` : ""}-${format}`;
+}
 async function findDomSlots(context) {
   await waitForDomLoad();
-  return (await Promise.all(Array.from(document.querySelectorAll(".adunit")).filter((element) => Boolean(element.dataset.format)).map((element) => createSlot({
+  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) => {
+  })).filter((slot) => {
     var _a;
-    return !((_a = context.getAll) == null ? void 0 : _a.call(context).some((activeSlot) => activeSlot.getName() === slot.getName()));
+    return !((_a = context.getAll) == null ? void 0 : _a.call(context).some((activeSlot) => activeSlot.name.value === slot.name.value));
   });
 }
-async function createSlotManager({
+function createSlotManager({
   initialSlots = [],
   context
 }) {
-  const slots = /* @__PURE__ */ new Map();
-  await Promise.allSettled(initialSlots.map(async (slot) => add({
-    ...slot,
-    lazyLoading: false
-  })));
-  function getAll() {
-    return Array.from(slots).map(([, slot]) => slot);
-  }
-  async function add(options) {
-    var _a, _b;
-    const slot = await createSlot({
-      ...options,
-      onDispose,
-      onNameChange,
-      context
+  const scope = runtimeCore.effectScope();
+  return scope.run(() => {
+    const slots = runtimeCore.shallowReactive(/* @__PURE__ */ new Map());
+    runtimeCore.watchEffect(() => {
+      var _a;
+      (_a = context.events) == null ? void 0 : _a.changeSlots.dispatch(Array.from(slots.values()));
     });
-    function onDispose() {
-      var _a2, _b2;
-      slots.delete(slot.getName());
-      logger.debug("Slot removed", {
+    function getAll() {
+      return Array.from(slots).map(([, slot]) => slot);
+    }
+    function add(options) {
+      var _a;
+      const slot = createSlot({
+        ...options,
+        onDispose,
+        context
+      });
+      function onDispose() {
+        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);
+      runtimeCore.watch(slot.name, (newName, previousName) => {
+        slots.set(newName, slot);
+        slots.delete(previousName);
+      });
+      logger.debug("Slot added", {
         slot,
-        slots: Array.from(slots)
+        slots: Array.from(slots.values())
       });
-      (_a2 = context.events) == null ? void 0 : _a2.removeSlot.dispatch(slot);
-      (_b2 = context.events) == null ? void 0 : _b2.changeSlots.dispatch(Array.from(slots.values()));
+      (_a = context.events) == null ? void 0 : _a.addSlot.dispatch(slot);
+      return slot;
     }
-    slots.set(slot.getName(), slot);
-    function onNameChange(newName, previousName) {
-      var _a2;
-      slots.set(newName, slot);
-      slots.delete(previousName);
-      (_a2 = context.events) == null ? void 0 : _a2.changeSlots.dispatch(Array.from(slots.values()));
+    async function findDomSlots$1() {
+      const domSlots = await findDomSlots(
+        context
+      );
+      for (const slot of domSlots)
+        slots.set(slot.name.value, slot);
+      return domSlots;
     }
-    logger.debug("Slot added", {
-      slot,
-      slots: Array.from(slots.values())
-    });
-    (_a = context.events) == null ? void 0 : _a.addSlot.dispatch(slot);
-    (_b = context.events) == null ? void 0 : _b.changeSlots.dispatch(Array.from(slots.values()));
-    return slot;
-  }
-  async function findDomSlots$1() {
-    var _a;
-    const domSlots = await findDomSlots(
-      context
-    );
-    for (const slot of domSlots) {
-      slots.set(slot.getName(), slot);
-      (_a = context.events) == null ? void 0 : _a.changeSlots.dispatch(Array.from(slots.values()));
+    function get(name) {
+      return slots.get(name);
     }
-    return domSlots;
-  }
-  function get(name) {
-    return slots.get(name);
-  }
-  function dispose() {
-    var _a;
-    for (const slot of slots.values())
-      slot.dispose();
-    slots.clear();
-    (_a = context.events) == null ? void 0 : _a.changeSlots.dispatch(Array.from(slots.values()));
-  }
-  return {
-    getAll,
-    add,
-    findDomSlots: findDomSlots$1,
-    get,
-    dispose
-  };
+    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;
@@ -272,7 +308,7 @@ const logger = createLogger({
   scope: "Adhese SDK"
 });
 function createParameters(options, queryDetector) {
-  const parameters = new MapWithEvents();
+  const parameters = /* @__PURE__ */ new Map();
   if (options.logReferrer)
     parameters.set("re", btoa(document.referrer));
   if (options.logUrl)
@@ -299,230 +335,231 @@ function setupLogging(mergedOptions) {
 function isPreviewMode() {
   return window.location.search.includes("adhesePreviewCreativeId");
 }
-class MapWithEvents extends Map {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "listeners", /* @__PURE__ */ new Set());
+function createHook({
+  onRun,
+  onAdd
+}) {
+  const callbacks = /* @__PURE__ */ new Set();
+  function run() {
+    for (const callback of callbacks)
+      callback();
+    onRun == null ? void 0 : onRun();
   }
-  addEventListener(listener) {
-    this.listeners.add(listener);
+  function add(callback) {
+    callbacks.add(callback);
+    onAdd == null ? void 0 : onAdd();
   }
-  removeEventListener(listener) {
-    this.listeners.delete(listener);
+  return [run, add];
+}
+let resolveOnInitPromise = () => {
+};
+let isInit = false;
+new Promise((resolve) => {
+  resolveOnInitPromise = resolve;
+});
+const [runOnInit, onInit] = createHook({
+  onRun() {
+    isInit = true;
+    resolveOnInitPromise();
+    logger.debug("Initialization completed");
+  },
+  onAdd() {
+    if (isInit)
+      runOnInit();
   }
-  set(key, value) {
-    const set = super.set(key, value);
-    this.listeners.forEach((listener) => {
-      listener();
+});
+function createAdhese(options) {
+  const scope = runtimeCore.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,
+      eagerRendering: false,
+      viewabilityTracking: true,
+      ...options
+    };
+    setupLogging(mergedOptions);
+    const context = runtimeCore.reactive({
+      location: mergedOptions.location,
+      consent: mergedOptions.consent,
+      debug: mergedOptions.debug,
+      getAll,
+      get,
+      options: mergedOptions,
+      logger
     });
-    return set;
-  }
-  clear() {
-    super.clear();
-    this.listeners.forEach((listener) => {
-      listener();
+    context.events = createEventManager();
+    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
     });
-  }
-  delete(key) {
-    const deleted = super.delete(key);
-    this.listeners.forEach((listener) => {
-      listener();
+    context.parameters = createParameters(mergedOptions, queryDetector);
+    runtimeCore.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
     });
-    return deleted;
-  }
-  /**
-   * Remove all listeners and clear the map.
-   */
-  dispose() {
-    this.listeners.clear();
-    super.clear();
-  }
-}
-async function createAdhese(options) {
-  var _a;
-  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,
-    eagerRendering: false,
-    viewabilityTracking: true,
-    ...options
-  };
-  setupLogging(mergedOptions);
-  const context = new Proxy({
-    location: mergedOptions.location,
-    consent: mergedOptions.consent,
-    debug: mergedOptions.debug,
-    getAll,
-    get,
-    options: mergedOptions,
-    logger
-  }, {});
-  context.events = createEventManager();
-  function getLocation() {
-    return context.location;
-  }
-  function setLocation(newLocation) {
-    var _a2;
-    context.location = newLocation;
-    (_a2 = context.events) == null ? void 0 : _a2.locationChange.dispatch(newLocation);
-  }
-  const queryDetector = createQueryDetector({
-    onChange: onQueryChange,
-    queries: mergedOptions.queries
-  });
-  context.parameters = createParameters(mergedOptions, queryDetector);
-  context.parameters.addEventListener(onParametersChange);
-  let unmountDevtools;
-  if (mergedOptions.debug || window.location.search.includes("adhese_debug=true") || isPreviewMode()) {
-    unmountDevtools = await sdkDevtools.createDevtools(context);
-    (_a = context.events) == null ? void 0 : _a.debugChange.dispatch(true);
-  }
-  function onParametersChange() {
-    var _a2;
-    if (context.parameters)
-      (_a2 = context.events) == null ? void 0 : _a2.parametersChange.dispatch(context.parameters);
-  }
-  async function onQueryChange() {
-    var _a2, _b;
-    const query = queryDetector.getQuery();
-    (_a2 = context.parameters) == null ? void 0 : _a2.set("dt", query);
-    (_b = context.parameters) == null ? void 0 : _b.set("br", query);
-    await fetchAndRenderAllSlots();
-  }
-  function getConsent() {
-    return context.consent;
-  }
-  function setConsent(newConsent) {
-    var _a2, _b;
-    (_a2 = context.parameters) == null ? void 0 : _a2.set("tl", newConsent ? "all" : "none");
-    context.consent = newConsent;
-    (_b = context.events) == null ? void 0 : _b.consentChange.dispatch(newConsent);
-  }
-  const slotManager = await createSlotManager({
-    initialSlots: mergedOptions.initialSlots,
-    context
-  });
-  function getAll() {
-    return slotManager.getAll();
-  }
-  function get(name) {
-    return slotManager.get(name);
-  }
-  async function addSlot(slotOptions) {
-    const slot = await slotManager.add(slotOptions);
-    if (!slot.lazyLoading) {
-      const ad = await requestAd({
-        slot,
-        host: mergedOptions.host,
-        parameters: context.parameters,
-        account: mergedOptions.account,
+    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 slot;
+    }
+    async function findDomSlots2() {
+      const domSlots = (await slotManager.findDomSlots() ?? []).filter((slot) => !slot.lazyLoading);
+      if (domSlots.length <= 0)
+        return [];
+      const ads = await requestAds({
+        slots: domSlots,
         context
       });
-      await slot.setAd(ad);
+      for (const ad of ads) {
+        const slot = slotManager.get(ad.slotName);
+        if (slot)
+          slot.ad.value = ad;
+      }
+      return domSlots;
     }
-    return slot;
-  }
-  async function findDomSlots2() {
-    const domSlots = (await slotManager.findDomSlots()).filter((slot) => !slot.lazyLoading);
-    const ads = await requestAds({
-      host: mergedOptions.host,
-      slots: domSlots,
-      method: mergedOptions.requestType,
-      account: mergedOptions.account,
-      parameters: context.parameters,
-      context
+    let unmountDevtools;
+    async function toggleDebug() {
+      var _a, _b;
+      context.debug = !context.debug;
+      if (context.debug && !unmountDevtools) {
+        unmountDevtools = await sdkDevtools.createDevtools(context);
+        logger.setMinLogLevelThreshold("debug");
+        logger.debug("Debug mode enabled");
+        (_a = context.events) == null ? void 0 : _a.debugChange.dispatch(true);
+      } else {
+        logger.debug("Debug mode disabled");
+        unmountDevtools == null ? void 0 : unmountDevtools();
+        unmountDevtools = void 0;
+        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();
     });
-    await Promise.allSettled(ads.map((ad) => {
-      var _a2;
-      return (_a2 = slotManager.get(ad.slotName)) == null ? void 0 : _a2.setAd(ad);
-    }));
-    return domSlots;
-  }
-  async function toggleDebug() {
-    var _a2, _b;
-    context.debug = !context.debug;
-    if (context.debug && !unmountDevtools) {
-      unmountDevtools = await sdkDevtools.createDevtools(context);
-      logger.setMinLogLevelThreshold("debug");
-      logger.debug("Debug mode enabled");
-      (_a2 = context.events) == null ? void 0 : _a2.debugChange.dispatch(true);
-    } else {
-      logger.debug("Debug mode disabled");
+    function dispose() {
+      var _a, _b;
       unmountDevtools == null ? void 0 : unmountDevtools();
-      unmountDevtools = void 0;
-      logger.setMinLogLevelThreshold("info");
-      (_b = context.events) == null ? void 0 : _b.debugChange.dispatch(false);
+      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");
+      scope.stop();
     }
-    return context.debug;
-  }
-  async function fetchAndRenderAllSlots() {
-    const slots = slotManager.getAll().filter((slot) => !slot.lazyLoading);
-    if (slots.length === 0)
-      return;
-    const ads = await requestAds({
-      host: mergedOptions.host,
-      slots,
-      method: mergedOptions.requestType,
-      account: mergedOptions.account,
+    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()) {
+        unmountDevtools = await sdkDevtools.createDevtools(context);
+        (_a = context.events) == null ? void 0 : _a.debugChange.dispatch(true);
+      }
+    });
+    runOnInit();
+    return {
+      ...mergedOptions,
+      ...slotManager,
       parameters: context.parameters,
+      events: context.events,
+      getLocation,
+      setLocation,
+      getConsent,
+      setConsent,
+      addSlot,
+      findDomSlots: findDomSlots2,
+      dispose,
+      toggleDebug,
       context
-    });
-    await Promise.allSettled(ads.map((ad) => {
-      var _a2;
-      return (_a2 = slotManager.get(ad.slotName)) == null ? void 0 : _a2.setAd(ad);
-    }));
-  }
-  const disposeOnTcfConsentChange = onTcfConsentChange(async (data) => {
-    var _a2, _b;
-    if (!data.tcString)
-      return;
-    logger.debug("TCF v2 consent data received", {
-      data
-    });
-    (_a2 = context.parameters) == null ? void 0 : _a2.set("xt", data.tcString);
-    (_b = context.parameters) == null ? void 0 : _b.delete("tl");
-    await fetchAndRenderAllSlots();
+    };
   });
-  if (slotManager.getAll().length > 0)
-    await fetchAndRenderAllSlots().catch(logger.error);
-  function dispose() {
-    var _a2, _b, _c;
-    queryDetector.dispose();
-    slotManager.dispose();
-    queryDetector.dispose();
-    disposeOnTcfConsentChange();
-    (_a2 = context.parameters) == null ? void 0 : _a2.dispose();
-    (_b = context.parameters) == null ? void 0 : _b.clear();
-    logger.resetLogs();
-    (_c = context.events) == null ? void 0 : _c.dispose();
-    unmountDevtools == null ? void 0 : unmountDevtools();
-    logger.info("Adhese instance disposed");
-  }
-  if (mergedOptions.findDomSlotsOnLoad)
-    await slotManager.findDomSlots();
-  return {
-    ...mergedOptions,
-    ...slotManager,
-    parameters: context.parameters,
-    events: context.events,
-    getLocation,
-    setLocation,
-    getConsent,
-    setConsent,
-    addSlot,
-    findDomSlots: findDomSlots2,
-    dispose,
-    toggleDebug,
-    context
-  };
 }
 function addTrackingPixel(url) {
   const img = document.createElement("img");
@@ -535,119 +572,7 @@ function addTrackingPixel(url) {
   img.style.top = "0";
   return document.body.appendChild(img);
 }
-function renderIframe(ad, element) {
-  const iframe = document.createElement("iframe");
-  iframe.srcdoc = `
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <style>
-            body {
-              margin: 0;
-              padding: 0;
-              overflow: hidden;
-            }
-          </style>
-        </head>
-        <body>
-          ${ad.tag}
-        </body>
-      `.replaceAll(/\s+/g, " ").trim();
-  iframe.style.border = "none";
-  iframe.style.width = ad.width ? `${ad.width}px` : "100%";
-  iframe.style.height = ad.height ? `${ad.height}px` : "100%";
-  element.replaceChildren(iframe);
-}
-function renderInline(ad, element) {
-  element.style.width = ad.width ? `${ad.width}px` : "100%";
-  element.style.height = ad.height ? `${ad.height}px` : "100%";
-  element.innerHTML = ad.tag;
-}
-const renderFunctions = {
-  iframe: renderIframe,
-  inline: renderInline
-};
-async function createSlot(options) {
-  var _a;
-  const {
-    containingElement,
-    slot,
-    context,
-    renderMode = "iframe"
-  } = options;
-  await waitForDomLoad();
-  const parameters = new Map(Object.entries(options.parameters ?? {}));
-  let format;
-  let queryDetector = null;
-  if (typeof options.format === "string") {
-    format = options.format;
-  } else {
-    queryDetector = createQueryDetector({
-      onChange: setFormat,
-      queries: Object.fromEntries(options.format.map((item) => [item.format, item.query]))
-    });
-    format = queryDetector.getQuery();
-  }
-  async function setFormat(newFormat) {
-    var _a2;
-    const oldName = getName();
-    format = newFormat;
-    (_a2 = options.onNameChange) == null ? void 0 : _a2.call(options, getName(), oldName);
-    const newAd = await requestAd({
-      slot: {
-        getName,
-        parameters
-      },
-      account: context.options.account,
-      host: context.options.host,
-      parameters: context.parameters,
-      method: context.options.requestType,
-      context
-    });
-    cleanElement();
-    await setAd(newAd);
-  }
-  function getFormat() {
-    return format;
-  }
-  let element = typeof containingElement === "string" || !containingElement ? document.querySelector(`.adunit[data-format="${format}"]#${containingElement}${slot ? `[data-slot="${slot}"]` : ""}`) : containingElement;
-  function getElement() {
-    if (renderMode === "iframe")
-      return (element == null ? void 0 : element.querySelector("iframe")) ?? null;
-    return (element == null ? void 0 : element.innerHTML) ? element.firstElementChild : null;
-  }
-  let impressionTrackingPixelElement = null;
-  let viewabilityTrackingPixelElement = null;
-  let isInViewport = false;
-  let ad = null;
-  function getAd() {
-    return ad;
-  }
-  async function setAd(newAd) {
-    var _a2, _b;
-    ad = newAd;
-    if (isInViewport || context.options.eagerRendering)
-      await render(ad);
-    if (element) {
-      element.style.width = `${ad.width}px`;
-      element.style.height = `${ad.height}px`;
-    }
-    await ((_b = context.events) == null ? void 0 : _b.changeSlots.dispatchAsync(Array.from(((_a2 = context.getAll) == null ? void 0 : _a2.call(context)) ?? [])));
-  }
-  const renderIntersectionObserver = new IntersectionObserver((entries) => {
-    isInViewport = entries.some((entry) => entry.isIntersecting);
-    if (isInViewport) {
-      (async () => {
-        if (!ad && options.lazyLoading)
-          await render();
-        else if (ad)
-          await render(ad);
-      })().catch(logger.error);
-    }
-  }, {
-    rootMargin: ((_a = options.lazyLoadingOptions) == null ? void 0 : _a.rootMargin) ?? "200px",
-    threshold: 0
-  });
+function useViewabilityObserver({ context, ad, name, element }) {
   let timeoutId = null;
   const {
     threshold,
@@ -659,17 +584,19 @@ async function createSlot(options) {
     rootMargin: "0px",
     ...context.options.viewabilityTrackingOptions
   };
+  const trackingPixel = runtimeCore.ref(null);
+  const isTracked = runtimeCore.computed(() => Boolean(trackingPixel.value));
   const viewabilityObserver = new IntersectionObserver(([entry]) => {
-    if (context.options.viewabilityTracking && !viewabilityTrackingPixelElement && ad) {
+    if (context.options.viewabilityTracking && !trackingPixel.value && ad) {
       const ratio = lodashEs.round(entry.intersectionRatio, 1);
       if (ratio >= threshold && !timeoutId) {
         timeoutId = setTimeout(() => {
-          var _a2, _b;
+          var _a, _b, _c;
           timeoutId = null;
-          if (ad == null ? void 0 : ad.viewableImpressionCounter) {
-            viewabilityTrackingPixelElement = addTrackingPixel(ad.viewableImpressionCounter);
-            logger.debug(`Viewability tracking pixel fired for ${getName()}`);
-            (_b = context.events) == null ? void 0 : _b.changeSlots.dispatch(Array.from(((_a2 = context.getAll) == null ? void 0 : _a2.call(context)) ?? []));
+          if ((_a = ad.value) == null ? void 0 : _a.viewableImpressionCounter) {
+            trackingPixel.value = addTrackingPixel(ad.value.viewableImpressionCounter);
+            logger.debug(`Viewability tracking pixel fired for ${name.value}`);
+            (_c = context.events) == null ? void 0 : _c.changeSlots.dispatch(Array.from(((_b = context.getAll) == null ? void 0 : _b.call(context)) ?? []));
           }
         }, duration);
       } else if (ratio < threshold && timeoutId) {
@@ -681,91 +608,218 @@ async function createSlot(options) {
     rootMargin,
     threshold: Array.from({ length: 11 }, (_, i) => i * 0.1)
   });
-  if (element && context.options.viewabilityTracking)
-    viewabilityObserver.observe(element);
-  if (element)
-    renderIntersectionObserver.observe(element);
-  async function render(adToRender) {
-    var _a2, _b;
-    await waitForDomLoad();
-    ad = adToRender ?? ad ?? await requestAd({
-      slot: {
-        getName,
-        parameters
-      },
-      account: context.options.account,
-      host: context.options.host,
-      parameters: context.parameters,
-      method: context.options.requestType,
-      context
-    });
-    if (!element) {
-      const error = `Could not create slot for format ${format}. No element found.`;
-      logger.error(error, options);
-      throw new Error(error);
-    }
-    if (context.debug)
-      element.style.position = "relative";
-    renderFunctions[renderMode](ad, element);
-    if ((ad == null ? void 0 : ad.impressionCounter) && !impressionTrackingPixelElement) {
-      impressionTrackingPixelElement = addTrackingPixel(ad.impressionCounter);
-      logger.debug(`Impression tracking pixel fired for ${getName()}`);
-    }
-    logger.debug("Slot rendered", {
-      renderedElement: element,
-      location: context.location,
-      format,
-      containingElement
-    });
-    renderIntersectionObserver.disconnect();
-    await ((_b = context.events) == null ? void 0 : _b.changeSlots.dispatchAsync(Array.from(((_a2 = context.getAll) == null ? void 0 : _a2.call(context)) ?? [])));
-    return element;
-  }
-  function cleanElement() {
-    if (!element)
-      return;
-    element.innerHTML = "";
-    element.style.position = "";
-    element.style.width = "";
-    element.style.height = "";
-  }
-  function getName() {
-    return `${context.location}${slot ? `${slot}` : ""}-${format}`;
+  function observe(newElement, oldElement) {
+    if (oldElement)
+      viewabilityObserver.unobserve(oldElement);
+    if (newElement && context.options.viewabilityTracking)
+      viewabilityObserver.observe(newElement);
+    return () => {
+      if (newElement)
+        viewabilityObserver.unobserve(newElement);
+    };
   }
-  function dispose() {
-    var _a2;
-    cleanElement();
-    impressionTrackingPixelElement == null ? void 0 : impressionTrackingPixelElement.remove();
-    viewabilityTrackingPixelElement == null ? void 0 : viewabilityTrackingPixelElement.remove();
-    element = null;
-    ad = null;
-    renderIntersectionObserver.disconnect();
+  runtimeCore.watch(element, observe);
+  observe(element.value);
+  return [isTracked, () => {
+    var _a;
+    (_a = trackingPixel.value) == null ? void 0 : _a.remove();
     viewabilityObserver.disconnect();
-    (_a2 = options.onDispose) == null ? void 0 : _a2.call(options);
-    queryDetector == null ? void 0 : queryDetector.dispose();
-  }
-  function isViewabilityTracked() {
-    return Boolean(viewabilityTrackingPixelElement);
-  }
-  function isImpressionTracked() {
-    return Boolean(impressionTrackingPixelElement);
+  }];
+}
+function useRenderIntersectionObserver({ ad, options, element, render }) {
+  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
+  });
+  function observe(newElement, oldElement) {
+    if (oldElement)
+      renderIntersectionObserver.unobserve(oldElement);
+    if (newElement)
+      renderIntersectionObserver.observe(newElement);
+    return () => {
+      if (newElement)
+        renderIntersectionObserver.unobserve(newElement);
+    };
   }
-  return {
-    location: context.location,
-    lazyLoading: options.lazyLoading ?? false,
-    slot,
-    parameters,
-    setFormat,
-    getFormat,
-    render,
-    getElement,
-    getName,
-    getAd,
-    setAd,
-    isViewabilityTracked,
-    isImpressionTracked,
-    dispose
-  };
+  runtimeCore.watch(element, observe);
+  observe(element.value);
+  return [isInViewport, () => {
+    renderIntersectionObserver.disconnect();
+  }];
+}
+const renderFunctions = {
+  iframe: renderIframe,
+  inline: renderInline
+};
+function createSlot(options) {
+  const scope = runtimeCore.effectScope();
+  return scope.run(() => {
+    const {
+      containingElement,
+      slot,
+      context,
+      renderMode = "iframe"
+    } = options;
+    const parameters = runtimeCore.reactive(new Map(Object.entries(options.parameters ?? {})));
+    let queryDetector = null;
+    if (typeof options.format !== "string") {
+      queryDetector = createQueryDetector({
+        onChange: onQueryChange,
+        queries: Object.fromEntries(options.format.map((item) => [item.format, item.query]))
+      });
+    }
+    const format = runtimeCore.ref(queryDetector ? queryDetector.getQuery() : options.format);
+    function onQueryChange(newFormat) {
+      format.value = newFormat;
+    }
+    const ad = runtimeCore.ref(null);
+    const name = runtimeCore.computed(() => generateName(context.location, format.value, slot));
+    runtimeCore.watch(name, async (newName, oldName) => {
+      var _a;
+      if (newName === oldName)
+        return;
+      (_a = options.onNameChange) == null ? void 0 : _a.call(options, newName, oldName);
+      const newAd = await requestAd({
+        slot: {
+          name: newName,
+          parameters
+        },
+        context
+      });
+      cleanElement();
+      ad.value = newAd;
+    });
+    const isDomLoaded = useDomLoaded();
+    const element = runtimeCore.computed(
+      () => {
+        if (!(typeof containingElement === "string" || !containingElement))
+          return containingElement;
+        if (!isDomLoaded.value)
+          return null;
+        return document.querySelector(`.adunit[data-format="${format.value}"]#${containingElement}${slot ? `[data-slot="${slot}"]` : ""}`);
+      }
+    );
+    function getElement() {
+      var _a, _b;
+      if (renderMode === "iframe")
+        return ((_a = element.value) == null ? void 0 : _a.querySelector("iframe")) ?? null;
+      return ((_b = element.value) == null ? void 0 : _b.innerHTML) ? element.value.firstElementChild : null;
+    }
+    const [isInViewport, disposeRenderIntersectionObserver] = useRenderIntersectionObserver({
+      ad,
+      options,
+      element,
+      render
+    });
+    runtimeCore.watch([ad, isInViewport], async ([newAd, newIsInViewport], [oldAd]) => {
+      var _a, _b;
+      if (!newAd || lodashEs.isEqual(newAd, oldAd))
+        return;
+      if (newIsInViewport || context.options.eagerRendering)
+        await render(newAd);
+      if (element.value) {
+        element.value.style.width = `${newAd.width}px`;
+        element.value.style.height = `${newAd.height}px`;
+      }
+      (_b = context.events) == null ? void 0 : _b.changeSlots.dispatch(Array.from(((_a = context.getAll) == null ? void 0 : _a.call(context)) ?? []));
+    });
+    const [
+      isViewabilityTracked,
+      disposeViewabilityObserver
+    ] = useViewabilityObserver({
+      context,
+      ad,
+      name,
+      element
+    });
+    const impressionTrackingPixelElement = runtimeCore.ref(null);
+    const isImpressionTracked = runtimeCore.computed(() => Boolean(impressionTrackingPixelElement.value));
+    async function render(adToRender) {
+      var _a, _b, _c, _d;
+      await waitForDomLoad();
+      ad.value = adToRender ?? ad.value ?? await requestAd({
+        slot: {
+          name,
+          parameters
+        },
+        context
+      });
+      ad.value = ((_a = options.onBeforeRender) == null ? void 0 : _a.call(options, ad.value)) ?? ad.value;
+      if (!element.value) {
+        const error = `Could not create slot for format ${format.value}. No element found.`;
+        logger.error(error, options);
+        throw new Error(error);
+      }
+      if (context.debug)
+        element.value.style.position = "relative";
+      renderFunctions[renderMode](ad.value, element.value);
+      if (((_b = ad.value) == null ? void 0 : _b.impressionCounter) && !impressionTrackingPixelElement.value) {
+        impressionTrackingPixelElement.value = addTrackingPixel((_c = ad.value) == null ? void 0 : _c.impressionCounter);
+        logger.debug(`Impression tracking pixel fired for ${name.value}`);
+      }
+      logger.debug("Slot rendered", {
+        renderedElement: element,
+        location: context.location,
+        format,
+        containingElement
+      });
+      (_d = options.onRender) == null ? void 0 : _d.call(options, element.value);
+      disposeRenderIntersectionObserver();
+      return element.value;
+    }
+    function cleanElement() {
+      if (!element.value)
+        return;
+      element.value.innerHTML = "";
+      element.value.style.position = "";
+      element.value.style.width = "";
+      element.value.style.height = "";
+    }
+    function dispose() {
+      var _a, _b;
+      cleanElement();
+      (_a = impressionTrackingPixelElement.value) == null ? void 0 : _a.remove();
+      ad.value = null;
+      disposeRenderIntersectionObserver();
+      disposeViewabilityObserver();
+      (_b = options.onDispose) == null ? void 0 : _b.call(options);
+      queryDetector == null ? void 0 : queryDetector.dispose();
+      scope.stop();
+    }
+    return {
+      location: context.location,
+      lazyLoading: options.lazyLoading ?? false,
+      slot,
+      parameters,
+      format,
+      name,
+      ad,
+      isViewabilityTracked,
+      isImpressionTracked,
+      render,
+      getElement,
+      dispose
+    };
+  });
+}
+function useDomLoaded() {
+  const isDomLoaded = runtimeCore.ref(false);
+  onInit(async () => {
+    await waitForDomLoad();
+    isDomLoaded.value = true;
+  });
+  return isDomLoaded;
 }
 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("")]);
@@ -784,6 +838,46 @@ const dateLike = zod.union([zod.coerce.string(), zod.literal("")]).transform((va
     return void 0;
   return date;
 });
+const cssValueLike = zod.union([zod.coerce.string(), zod.literal(""), zod.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 = zod.string().transform((value, { addIssue }) => {
+  try {
+    return JSON.parse(value.replaceAll("'", '"'));
+  } catch (error) {
+    addIssue({
+      code: zod.ZodIssueCode.custom,
+      message: `Invalid JSON: ${error.message}`
+    });
+    return zod.NEVER;
+  }
+});
+const isHtmlString = zod.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: zod.ZodIssueCode.custom,
+      message: error.message
+    });
+    return zod.NEVER;
+  }
+});
+const isJsonOrHtmlString = zod.union([isJson, isHtmlString]);
+const isJsonOrHtmlOptionalString = zod.union([zod.coerce.string(), isJsonOrHtmlString]).transform((value) => {
+  if (value === "")
+    return void 0;
+  return value;
+}).optional();
 const baseSchema = zod.object({
   adDuration: numberLike.optional(),
   adFormat: zod.string().optional(),
@@ -797,7 +891,7 @@ const baseSchema = zod.object({
   advertiserId: zod.string().optional(),
   altText: zod.string().optional(),
   auctionable: booleanLike.optional(),
-  body: zod.string().optional(),
+  body: isJsonOrHtmlOptionalString,
   clickTag: urlLike.optional(),
   comment: zod.string().optional(),
   creativeName: zod.string().optional(),
@@ -808,7 +902,7 @@ const baseSchema = zod.object({
     mediaType: zod.string(),
     prebid: zod.unknown().optional()
   }).optional(),
-  height: numberLike.optional(),
+  height: cssValueLike.optional(),
   id: zod.string().optional(),
   impressionCounter: urlLike.optional(),
   libId: zod.string().optional(),
@@ -826,7 +920,7 @@ const baseSchema = zod.object({
   slotID: zod.string(),
   slotName: zod.string(),
   swfSrc: urlLike.optional(),
-  tag: zod.string().optional(),
+  tag: isJsonOrHtmlOptionalString,
   tagUrl: urlLike.optional(),
   timeStamp: dateLike.optional(),
   trackedImpressionCounter: urlLike.optional(),
@@ -834,16 +928,16 @@ const baseSchema = zod.object({
   trackingUrl: urlLike.optional(),
   url: urlLike.optional(),
   viewableImpressionCounter: urlLike.optional(),
-  width: numberLike.optional(),
-  widthLarge: numberLike.optional()
+  width: cssValueLike.optional(),
+  widthLarge: cssValueLike.optional()
 });
 const jerliciaSchema = zod.object({
   origin: zod.literal("JERLICIA"),
-  tag: zod.string()
+  tag: isJsonOrHtmlString
 }).passthrough();
 const daleSchema = zod.object({
   origin: zod.literal("DALE"),
-  body: zod.string()
+  body: isJsonOrHtmlString
 }).passthrough().transform(({ body, ...data }) => ({
   ...data,
   tag: body
@@ -923,16 +1017,16 @@ function getPreviewObjects() {
   return previewObjects;
 }
 function requestWithPost({
-  host,
+  context: { options: { host }, parameters },
   ...options
 }) {
   const payload = {
     ...options,
     slots: options.slots.map((slot) => ({
-      slotname: slot.getName(),
+      slotname: runtimeCore.toValue(slot.name),
       parameters: parseParameters(slot.parameters)
     })),
-    parameters: options.parameters && parseParameters(options.parameters)
+    parameters: parameters && parseParameters(parameters)
   };
   return fetch(`${new URL(host).href}json`, {
     method: "POST",
@@ -943,8 +1037,8 @@ function requestWithPost({
     }
   });
 }
-async function requestWithGet(options) {
-  return fetch(new URL(`${options.host}/json/sl${options.slots.map((slot) => slot.getName()).join("/sl")}`), {
+async function requestWithGet({ context, slots }) {
+  return fetch(new URL(`${context.options.host}/json/sl${slots.map((slot) => runtimeCore.toValue(slot.name)).join("/sl")}`), {
     method: "GET",
     headers: {
       // eslint-disable-next-line ts/naming-convention
@@ -960,19 +1054,15 @@ function parseParameters(parameters) {
     return false;
   }));
 }
-async function requestAds({
-  method = "POST",
-  context,
-  ...options
-}) {
-  var _a, _b, _c, _d;
+async function requestAds(options) {
+  var _a, _b, _c, _d, _e;
+  const { context } = options;
   try {
     (_a = context.events) == null ? void 0 : _a.requestAd.dispatch({
       ...options,
-      context,
-      method
+      context
     });
-    const [response, previews] = await Promise.all([(method == null ? void 0 : method.toUpperCase()) === "POST" ? requestWithPost(options) : requestWithGet(options), requestPreviews(options.account)]);
+    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}`);
@@ -988,18 +1078,18 @@ async function requestAds({
       };
     });
     if (matchedPreviews.length > 0)
-      (_b = context.events) == null ? void 0 : _b.previewReceived.dispatch(matchedPreviews);
+      (_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");
-    (_c = context.events) == null ? void 0 : _c.responseReceived.dispatch(mergedResult);
+    (_d = context.events) == null ? void 0 : _d.responseReceived.dispatch(mergedResult);
     return mergedResult;
   } catch (error) {
     logger.error(String(error));
-    (_d = context.events) == null ? void 0 : _d.requestError.dispatch(error);
+    (_e = context.events) == null ? void 0 : _e.requestError.dispatch(error);
     throw error;
   }
 }