@adhese/sdk-devtools 0.4.0 → 0.5.0

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ReactElement } from 'react';
+import { ComputedRef, Ref, MaybeRef } from '@vue/runtime-core';
 import * as zod from 'zod';
 import { TypeOf, ZodType } from 'zod';
 
@@ -64,7 +65,7 @@ type SlotManager = {
     /**
      * Adds a new slot to the Adhese instance and renders it.
      */
-    add(slot: Omit<AdheseSlotOptions, 'context'>): Promise<Readonly<AdheseSlot>>;
+    add(slot: Omit<AdheseSlotOptions, 'context'>): Readonly<AdheseSlot>;
     /**
      * Finds all slots in the DOM and adds them to the Adhese instance.
      */
@@ -101,7 +102,7 @@ declare const baseSchema: zod.ZodObject<{
     advertiserId: zod.ZodOptional<zod.ZodString>;
     altText: zod.ZodOptional<zod.ZodString>;
     auctionable: zod.ZodOptional<zod.ZodUnion<[zod.ZodBoolean, zod.ZodLiteral<"">]>>;
-    body: zod.ZodOptional<zod.ZodString>;
+    body: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodUnion<[zod.ZodEffects<zod.ZodString, Record<string, unknown> | readonly unknown[], string>, zod.ZodEffects<zod.ZodString, string, string>]>]>, string | Record<string, unknown> | readonly unknown[] | undefined, string>>;
     clickTag: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">]>, URL | undefined, string>>;
     comment: zod.ZodOptional<zod.ZodString>;
     creativeName: zod.ZodOptional<zod.ZodString>;
@@ -118,7 +119,7 @@ declare const baseSchema: zod.ZodObject<{
         mediaType: string;
         prebid?: unknown;
     }>>;
-    height: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">]>, number | undefined, string>>;
+    height: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">, zod.ZodNumber]>, string | undefined, string | number>>;
     id: zod.ZodOptional<zod.ZodString>;
     impressionCounter: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">]>, URL | undefined, string>>;
     libId: zod.ZodOptional<zod.ZodString>;
@@ -135,7 +136,7 @@ declare const baseSchema: zod.ZodObject<{
     slotID: zod.ZodString;
     slotName: zod.ZodString;
     swfSrc: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">]>, URL | undefined, string>>;
-    tag: zod.ZodOptional<zod.ZodString>;
+    tag: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodUnion<[zod.ZodEffects<zod.ZodString, Record<string, unknown> | readonly unknown[], string>, zod.ZodEffects<zod.ZodString, string, string>]>]>, string | Record<string, unknown> | readonly unknown[] | undefined, string>>;
     tagUrl: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">]>, URL | undefined, string>>;
     timeStamp: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">]>, Date | undefined, string>>;
     trackedImpressionCounter: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">]>, URL | undefined, string>>;
@@ -143,8 +144,8 @@ declare const baseSchema: zod.ZodObject<{
     trackingUrl: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">]>, URL | undefined, string>>;
     url: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">]>, URL | undefined, string>>;
     viewableImpressionCounter: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">]>, URL | undefined, string>>;
-    width: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">]>, number | undefined, string>>;
-    widthLarge: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">]>, number | undefined, string>>;
+    width: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">, zod.ZodNumber]>, string | undefined, string | number>>;
+    widthLarge: zod.ZodOptional<zod.ZodEffects<zod.ZodUnion<[zod.ZodString, zod.ZodLiteral<"">, zod.ZodNumber]>, string | undefined, string | number>>;
 }, "strip", zod.ZodTypeAny, {
     adType: string;
     origin: "JERLICIA" | "DALE";
@@ -161,7 +162,7 @@ declare const baseSchema: zod.ZodObject<{
     advertiserId?: string | undefined;
     altText?: string | undefined;
     auctionable?: boolean | "" | undefined;
-    body?: string | undefined;
+    body?: string | Record<string, unknown> | readonly unknown[] | undefined;
     clickTag?: URL | undefined;
     comment?: string | undefined;
     creativeName?: string | undefined;
@@ -172,7 +173,7 @@ declare const baseSchema: zod.ZodObject<{
         mediaType: string;
         prebid?: unknown;
     } | undefined;
-    height?: number | undefined;
+    height?: string | undefined;
     id?: string | undefined;
     impressionCounter?: URL | undefined;
     libId?: string | undefined;
@@ -186,7 +187,7 @@ declare const baseSchema: zod.ZodObject<{
     priority?: number | undefined;
     share?: string | undefined;
     swfSrc?: URL | undefined;
-    tag?: string | undefined;
+    tag?: string | Record<string, unknown> | readonly unknown[] | undefined;
     tagUrl?: URL | undefined;
     timeStamp?: Date | undefined;
     trackedImpressionCounter?: URL | undefined;
@@ -194,8 +195,8 @@ declare const baseSchema: zod.ZodObject<{
     trackingUrl?: URL | undefined;
     url?: URL | undefined;
     viewableImpressionCounter?: URL | undefined;
-    width?: number | undefined;
-    widthLarge?: number | undefined;
+    width?: string | undefined;
+    widthLarge?: string | undefined;
 }, {
     adType: string;
     origin: "JERLICIA" | "DALE";
@@ -223,7 +224,7 @@ declare const baseSchema: zod.ZodObject<{
         mediaType: string;
         prebid?: unknown;
     } | undefined;
-    height?: string | undefined;
+    height?: string | number | undefined;
     id?: string | undefined;
     impressionCounter?: string | undefined;
     libId?: string | undefined;
@@ -245,8 +246,8 @@ declare const baseSchema: zod.ZodObject<{
     trackingUrl?: string | undefined;
     url?: string | undefined;
     viewableImpressionCounter?: string | undefined;
-    width?: string | undefined;
-    widthLarge?: string | undefined;
+    width?: string | number | undefined;
+    widthLarge?: string | number | undefined;
 }>;
 type AdResponse = (TypeOf<typeof baseSchema> & {
     additionalCreatives?: ReadonlyArray<AdResponse> | string;
@@ -255,8 +256,8 @@ declare const adResponseSchema: ZodType<AdResponse>;
 type PreParsedAd = TypeOf<typeof adResponseSchema> & {
     additionalCreatives?: ReadonlyArray<PreParsedAd> | string;
 };
-type Ad = Omit<PreParsedAd, 'tag'> & {
-    tag: string;
+type Ad<T = string | Record<string, unknown> | ReadonlyArray<unknown>> = Omit<PreParsedAd, 'tag'> & {
+    tag: T;
 };
 
 type RenderMode = 'iframe' | 'inline';
@@ -303,6 +304,15 @@ type AdheseSlotOptions = {
      * Callback that is called when the format of the slot changes.
      */
     onNameChange?(newName: string, oldName: string): void;
+    /**
+     * Callback that is called when the slot is rendered.
+     */
+    onRender?(element: HTMLElement): void;
+    /**
+     * Callback that is called before the ad is rendered. This can be used to modify the ad before it is rendered.
+     * Particularly useful for rendering ads with custom HTML if the ad tag contains a JSON object.
+     */
+    onBeforeRender?(ad: Ad): Ad | void;
 } & ({
     /**
      * If the slot should be lazy loaded. This means that the ad will only be requested when the slot is in the viewport.
@@ -321,49 +331,48 @@ type AdheseSlotOptions = {
 });
 type AdheseSlot = Merge<Omit<AdheseSlotOptions, 'onDispose' | 'context' | 'onFormatChange' | 'format'>, {
     /**
-     * The location of the slot. This is the location that is used to determine the current page URL.
-     */
-    location: string;
-    /**
-     * The parameters that are used to render the ad.
-     */
-    parameters: Map<string, ReadonlyArray<string> | string>;
-    /**
-     * Renders the slot in the containing element. If no ad is provided, a new ad will be requested from the API.
+     * The name of the slot. This is used to identify the slot in the Adhese instance.
+     *
+     * The name is generated based on the location, format, and slot of the slot.
      */
-    render(ad?: Ad): Promise<HTMLElement>;
+    name: ComputedRef<string>;
     /**
-     * Returns the rendered element.
+     * The format code of the slot. Used to find the correct element on the page to render the ad in.
+     *
+     * If the format is a string, it is used as the format code. If the format is an array, the format code is determined
+     * by the query detector.
+     *
+     * When you change the format, the slot will request a new ad from the API automatically.
      */
-    getElement(): HTMLElement | null;
+    format: Ref<string>;
     /**
-     * Returns the name of the slot.
+     * The location of the slot. This is the location that is used to determine the current page URL.
      */
-    getName(): string;
+    location: string;
     /**
-     * Returns the ad that is to be rendered in the slot or is currently rendered in the slot.
+     * The parameters that are used to render the ad.
      */
-    getAd(): Ad | null;
+    parameters: Map<string, ReadonlyArray<string> | string>;
     /**
-     * Sets the ad that is to be rendered in the slot. If the slot is in the viewport, the ad will be rendered immediately.
+     * Whether the viewability tracking pixel has been fired.
      */
-    setAd(ad: Ad): Promise<void>;
+    isViewabilityTracked: ComputedRef<boolean>;
     /**
-     * Returns whether the viewability tracking pixel has been fired.
+     * Whether the impression tracking pixel has been fired.
      */
-    isViewabilityTracked(): boolean;
+    isImpressionTracked: ComputedRef<boolean>;
     /**
-     * Returns whether the impression tracking pixel has been fired.
+     * Ad object that is fetched from the API.
      */
-    isImpressionTracked(): boolean;
+    ad: Ref<Ad | null>;
     /**
-     * Sets the format of the slot. This is used to change the format of the slot after it has been created.
+     * Renders the slot in the containing element. If no ad is provided, a new ad will be requested from the API.
      */
-    setFormat(format: string): Promise<void>;
+    render(ad?: Ad): Promise<HTMLElement>;
     /**
-     * Returns the format of the slot.
+     * Returns the rendered element.
      */
-    getFormat(): string;
+    getElement(): HTMLElement | null;
     /**
      * Removes the slot from the DOM and cleans up the slot instance.
      */
@@ -374,41 +383,13 @@ type AdRequestOptions = {
     /**
      * List of slots you want to fetch the ad for
      */
-    slots: ReadonlyArray<Pick<AdheseSlot, 'getName' | 'parameters'>>;
-    /**
-     * Host that you want to fetch the ads from
-     */
-    host: UrlString;
-    /**
-     * The Adhese account name.
-     */
-    account: string;
-    /**
-     * Request method to use for the requestAds
-     *
-     * @default 'POST'
-     */
-    method?: 'GET' | 'POST' | 'get' | 'post';
-    /**
-     * The parameters that are used for all ads.
-     */
-    parameters?: Map<string, ReadonlyArray<string> | string>;
-    context: Partial<Adhese>;
+    slots: ReadonlyArray<{
+        name: MaybeRef<string>;
+        parameters: Map<string, ReadonlyArray<string> | string>;
+    }>;
+    context: AdheseContext;
 };
 
-declare class MapWithEvents<T, U> extends Map<T, U> {
-    private readonly listeners;
-    addEventListener(listener: () => void): void;
-    removeEventListener(listener: () => void): void;
-    set(key: T, value: U): this;
-    clear(): void;
-    delete(key: T): boolean;
-    /**
-     * Remove all listeners and clear the map.
-     */
-    dispose(): void;
-}
-
 /**
  * A log entry saved by the logger
  */
@@ -602,7 +583,7 @@ type Adhese = Omit<AdheseOptions, 'location' | 'parameters' | 'consent'> & Merge
     /**
      * The parameters that are used for all ads.
      */
-    parameters: MapWithEvents<string, ReadonlyArray<string> | string>;
+    parameters: Map<string, ReadonlyArray<string> | string>;
     /**
      * The event manager for the Adhese instance.
      */

package/dist/style.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -179,6 +179,7 @@ textarea {
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
   padding: 0; /* 3 */
@@ -199,9 +200,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button; /* 1 */
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */
@@ -480,6 +481,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -530,6 +535,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 .sr-only {
   position: absolute;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adhese/sdk-devtools",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Adhese SDK Devtools",
   "license": "GPL-3.0",
   "repository": {
@@ -40,7 +40,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@types/react": "^18.2.71",
-    "@types/react-dom": "^18.2.22"
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "^18.2.23"
   }
 }