@ninetailed/experience.js 7.6.0-beta.5 → 7.6.0-beta.7

package/index.cjs.js

@@ -120,6 +120,9 @@ class NinetailedCorePlugin extends experience_jsPluginAnalytics.NinetailedAnalyt
     this.queue = [];
     this.enabledFeatures = Object.values(experience_jsShared.FEATURES);
     this.buildContext = buildClientNinetailedRequestContext;
+    this.getComponentViewTrackingThreshold = () => {
+      return 0;
+    };
     this[_a] = ({
       payload
     }) => __awaiter(this, void 0, void 0, function* () {
@@ -267,9 +270,6 @@ class NinetailedCorePlugin extends experience_jsPluginAnalytics.NinetailedAnalyt
       }));
     });
   }
-  getComponentViewTrackingThreshold() {
-    return 0;
-  }
   onTrackExperience(properties) {
     return __awaiter(this, void 0, void 0, function* () {
       if (properties.experience.sticky) {
@@ -595,10 +595,6 @@ class EventBuilder {
   }
 }
 
-const hasComponentViewTrackingThreshold = arg => {
-  return typeof arg === 'object' && arg !== null && 'getComponentViewTrackingThreshold' in arg && typeof arg['getComponentViewTrackingThreshold'] === 'function';
-};
-
 const buildOverrideMiddleware = experienceSelectionMiddleware => _a => {
   var {
       experience: originalExperience,
@@ -634,7 +630,7 @@ class Ninetailed {
     onInitProfileId,
     componentViewTrackingThreshold = 2000,
     storageImpl,
-    useClientSideEvaluation = false
+    useSDKEvaluation = false
   } = {}) {
     this.isInitialized = false;
     this.page = (data, options) => __awaiter(this, void 0, void 0, function* () {
@@ -754,7 +750,9 @@ class Ninetailed {
     });
     this.trackComponentView = properties => {
       return this.instance.dispatch(Object.assign(Object.assign({}, properties), {
-        type: experience_jsPluginAnalytics.HAS_SEEN_ELEMENT
+        type: experience_jsPluginAnalytics.HAS_SEEN_ELEMENT,
+        // TODO this is a temporary solution - to not make the user specify a delay
+        seenFor: this.componentViewTrackingThreshold
       }));
     };
     this.observeElement = (payload, options) => {
@@ -768,9 +766,20 @@ class Ninetailed {
         const isConstructorNameNotObject = constructorName && constructorName !== 'Object';
         experience_jsShared.logger.warn(`ElementSeenObserver.observeElement was called with an invalid element. Expected an Element but got ${typeof element}${isConstructorNameNotObject ? ` of type ${constructorName}` : ''}. This call will be ignored.`);
       } else {
-        this.observedElements.set(element, remaingPayload);
+        const existingPayloads = this.observedElements.get(element);
         const delays = this.pluginsWithCustomComponentViewThreshold.map(plugin => plugin.getComponentViewTrackingThreshold());
-        const uniqueDelays = Array.from(new Set([...delays, (options === null || options === void 0 ? void 0 : options.delay) || this.componentViewTrackingThreshold]));
+        const uniqueDelays = Array.from(new Set([...delays, options === null || options === void 0 ? void 0 : options.delay]));
+        if (!existingPayloads) {
+          this.observedElements.set(element, [remaingPayload]);
+        } else {
+          const isPayloadAlreadyObserved = existingPayloads.some(payload => {
+            return JSON.stringify(payload) === JSON.stringify(remaingPayload);
+          });
+          if (isPayloadAlreadyObserved) {
+            return;
+          }
+          this.observedElements.set(element, [...existingPayloads, remaingPayload]);
+        }
         uniqueDelays.forEach(delay => {
           this.elementSeenObserver.observe(element, {
             delay
@@ -783,21 +792,15 @@ class Ninetailed {
       this.elementSeenObserver.unobserve(element);
     };
     this.onElementSeen = (element, delay) => {
-      const payload = this.observedElements.get(element);
-      if (typeof payload !== 'undefined') {
-        const pluginNamesInterestedInSeenElementMessage = [...this.pluginsWithCustomComponentViewThreshold.filter(plugin => plugin.getComponentViewTrackingThreshold() === delay), ...this.plugins.filter(plugin => !hasComponentViewTrackingThreshold(plugin))].map(plugin => plugin.name);
-        if (pluginNamesInterestedInSeenElementMessage.length === 0) {
-          return;
+      const payloads = this.observedElements.get(element);
+      if (Array.isArray(payloads) && payloads.length > 0) {
+        for (const payload of payloads) {
+          this.instance.dispatch(Object.assign(Object.assign({}, payload), {
+            element,
+            type: experience_jsPluginAnalytics.HAS_SEEN_ELEMENT,
+            seenFor: delay
+          }));
         }
-        this.instance.dispatch(Object.assign(Object.assign({}, payload), {
-          element,
-          type: experience_jsPluginAnalytics.HAS_SEEN_ELEMENT,
-          plugins: Object.assign({
-            all: false
-          }, pluginNamesInterestedInSeenElementMessage.reduce((acc, curr) => Object.assign(Object.assign({}, acc), {
-            [curr]: true
-          }), {}))
-        }));
       }
     };
     this.reset = () => __awaiter(this, void 0, void 0, function* () {
@@ -909,7 +912,7 @@ class Ninetailed {
           })));
           return;
         }
-        if (this.useClientSideEvaluation) {
+        if (this.useSDKEvaluation) {
           const _experience = experience_jsShared.selectExperience({
             experiences,
             profile
@@ -1023,7 +1026,7 @@ class Ninetailed {
         }
       });
     };
-    this.useClientSideEvaluation = useClientSideEvaluation;
+    this.useSDKEvaluation = useSDKEvaluation;
     if (ninetailedApiClientInstanceOrOptions instanceof experience_jsShared.NinetailedApiClient) {
       this.apiClient = ninetailedApiClientInstanceOrOptions;
     } else {
@@ -1049,6 +1052,9 @@ class Ninetailed {
           environment: this.environment
         });
       }
+      if (experience_jsPluginAnalytics.hasComponentViewTrackingThreshold(plugin)) {
+        plugin.setComponentViewTrackingThreshold(componentViewTrackingThreshold);
+      }
     });
     this._profileState = {
       status: 'loading',
@@ -1106,7 +1112,7 @@ class Ninetailed {
     this.registerWindowHandlers();
   }
   get pluginsWithCustomComponentViewThreshold() {
-    return [this.ninetailedCorePlugin, ...this.plugins].filter(plugin => hasComponentViewTrackingThreshold(plugin));
+    return [this.ninetailedCorePlugin, ...this.plugins].filter(plugin => experience_jsPluginAnalytics.hasComponentViewTrackingThreshold(plugin));
   }
   get profileState() {
     return this._profileState;

package/index.esm.js

@@ -1,6 +1,6 @@
 import { FEATURES, buildComponentViewEvent, logger, ConsoleLogSink, buildPageEvent, buildTrackEvent, buildIdentifyEvent, unionBy, pipe, PageviewProperties, Properties, Traits, isPageViewEvent, isTrackEvent, isIdentifyEvent, isComponentViewEvent, selectHasVariants, selectExperience, selectVariant as selectVariant$1, selectBaselineWithVariants, NinetailedApiClient, OnLogLogSink, OnErrorLogSink } from '@ninetailed/experience.js-shared';
 export { EXPERIENCE_TRAIT_PREFIX, isExperienceMatch, selectActiveExperiments, selectDistribution, selectExperience, selectBaselineWithVariants as selectExperienceBaselineWithVariants, selectVariant as selectExperienceVariant, selectVariants as selectExperienceVariants, selectHasVariants as selectHasExperienceVariants } from '@ninetailed/experience.js-shared';
-import { NinetailedAnalyticsPlugin, HAS_SEEN_COMPONENT, HAS_SEEN_ELEMENT } from '@ninetailed/experience.js-plugin-analytics';
+import { NinetailedAnalyticsPlugin, HAS_SEEN_COMPONENT, HAS_SEEN_ELEMENT, hasComponentViewTrackingThreshold } from '@ninetailed/experience.js-plugin-analytics';
 import Analytics from 'analytics';
 import { v4 } from 'uuid';
 
@@ -82,6 +82,9 @@ class NinetailedCorePlugin extends NinetailedAnalyticsPlugin {
     this.apiClient = void 0;
     this.locale = void 0;
     this.ninetailed = void 0;
+    this.getComponentViewTrackingThreshold = () => {
+      return 0;
+    };
     this[HAS_SEEN_STICKY_COMPONENT] = async function ({
       payload
     }) {
@@ -222,9 +225,6 @@ class NinetailedCorePlugin extends NinetailedAnalyticsPlugin {
       ctx
     }));
   }
-  getComponentViewTrackingThreshold() {
-    return 0;
-  }
   async onTrackExperience(properties) {
     if (properties.experience.sticky) {
       await this.instance.dispatch({
@@ -560,10 +560,6 @@ class EventBuilder {
   }
 }
 
-const hasComponentViewTrackingThreshold = arg => {
-  return typeof arg === 'object' && arg !== null && 'getComponentViewTrackingThreshold' in arg && typeof arg['getComponentViewTrackingThreshold'] === 'function';
-};
-
 const _excluded = ["experience", "variant", "variantIndex"],
   _excluded2 = ["element"];
 const buildOverrideMiddleware = experienceSelectionMiddleware => _ref => {
@@ -601,7 +597,7 @@ class Ninetailed {
     onInitProfileId,
     componentViewTrackingThreshold = 2000,
     storageImpl,
-    useClientSideEvaluation = false
+    useSDKEvaluation = false
   } = {}) {
     var _this = this;
     this.instance = void 0;
@@ -616,7 +612,7 @@ class Ninetailed {
     this.plugins = void 0;
     this.logger = void 0;
     this.componentViewTrackingThreshold = void 0;
-    this.useClientSideEvaluation = void 0;
+    this.useSDKEvaluation = void 0;
     this.eventBuilder = void 0;
     this.page = async function (data, options) {
       try {
@@ -735,7 +731,9 @@ class Ninetailed {
     };
     this.trackComponentView = properties => {
       return this.instance.dispatch(Object.assign({}, properties, {
-        type: HAS_SEEN_ELEMENT
+        type: HAS_SEEN_ELEMENT,
+        // TODO this is a temporary solution - to not make the user specify a delay
+        seenFor: this.componentViewTrackingThreshold
       }));
     };
     this.observeElement = (payload, options) => {
@@ -749,9 +747,20 @@ class Ninetailed {
         const isConstructorNameNotObject = constructorName && constructorName !== 'Object';
         logger.warn(`ElementSeenObserver.observeElement was called with an invalid element. Expected an Element but got ${typeof element}${isConstructorNameNotObject ? ` of type ${constructorName}` : ''}. This call will be ignored.`);
       } else {
-        this.observedElements.set(element, remaingPayload);
+        const existingPayloads = this.observedElements.get(element);
         const delays = this.pluginsWithCustomComponentViewThreshold.map(plugin => plugin.getComponentViewTrackingThreshold());
-        const uniqueDelays = Array.from(new Set([...delays, (options == null ? void 0 : options.delay) || this.componentViewTrackingThreshold]));
+        const uniqueDelays = Array.from(new Set([...delays, options == null ? void 0 : options.delay]));
+        if (!existingPayloads) {
+          this.observedElements.set(element, [remaingPayload]);
+        } else {
+          const isPayloadAlreadyObserved = existingPayloads.some(payload => {
+            return JSON.stringify(payload) === JSON.stringify(remaingPayload);
+          });
+          if (isPayloadAlreadyObserved) {
+            return;
+          }
+          this.observedElements.set(element, [...existingPayloads, remaingPayload]);
+        }
         uniqueDelays.forEach(delay => {
           this.elementSeenObserver.observe(element, {
             delay
@@ -764,21 +773,15 @@ class Ninetailed {
       this.elementSeenObserver.unobserve(element);
     };
     this.onElementSeen = (element, delay) => {
-      const payload = this.observedElements.get(element);
-      if (typeof payload !== 'undefined') {
-        const pluginNamesInterestedInSeenElementMessage = [...this.pluginsWithCustomComponentViewThreshold.filter(plugin => plugin.getComponentViewTrackingThreshold() === delay), ...this.plugins.filter(plugin => !hasComponentViewTrackingThreshold(plugin))].map(plugin => plugin.name);
-        if (pluginNamesInterestedInSeenElementMessage.length === 0) {
-          return;
+      const payloads = this.observedElements.get(element);
+      if (Array.isArray(payloads) && payloads.length > 0) {
+        for (const payload of payloads) {
+          this.instance.dispatch(Object.assign({}, payload, {
+            element,
+            type: HAS_SEEN_ELEMENT,
+            seenFor: delay
+          }));
         }
-        this.instance.dispatch(Object.assign({}, payload, {
-          element,
-          type: HAS_SEEN_ELEMENT,
-          plugins: Object.assign({
-            all: false
-          }, pluginNamesInterestedInSeenElementMessage.reduce((acc, curr) => Object.assign({}, acc, {
-            [curr]: true
-          }), {}))
-        }));
       }
     };
     this.reset = async function () {
@@ -891,7 +894,7 @@ class Ninetailed {
           })));
           return;
         }
-        if (this.useClientSideEvaluation) {
+        if (this.useSDKEvaluation) {
           const _experience = selectExperience({
             experiences,
             profile
@@ -1005,7 +1008,7 @@ class Ninetailed {
         }
       });
     };
-    this.useClientSideEvaluation = useClientSideEvaluation;
+    this.useSDKEvaluation = useSDKEvaluation;
     if (ninetailedApiClientInstanceOrOptions instanceof NinetailedApiClient) {
       this.apiClient = ninetailedApiClientInstanceOrOptions;
     } else {
@@ -1031,6 +1034,9 @@ class Ninetailed {
           environment: this.environment
         });
       }
+      if (hasComponentViewTrackingThreshold(plugin)) {
+        plugin.setComponentViewTrackingThreshold(componentViewTrackingThreshold);
+      }
     });
     this._profileState = {
       status: 'loading',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js",
-  "version": "7.6.0-beta.5",
+  "version": "7.6.0-beta.7",
   "description": "Ninetailed SDK for javascript",
   "license": "MIT",
   "repository": {
@@ -9,11 +9,14 @@
     "directory": "packages/sdks/javascript"
   },
   "dependencies": {
+    "@ninetailed/experience.js-plugin-analytics": "7.6.0-beta.7",
+    "@ninetailed/experience.js-shared": "7.6.0-beta.7",
     "analytics": "0.8.1",
-    "@ninetailed/experience.js-plugin-analytics": "7.6.0-beta.5",
-    "@ninetailed/experience.js-shared": "7.6.0-beta.5",
     "uuid": "9.0.0"
   },
+  "devDependencies": {
+    "@jest/globals": "29.7.0"
+  },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"
 }

package/src/lib/Ninetailed.d.ts

@@ -35,7 +35,7 @@ type Options = {
     onInitProfileId?: OnInitProfileId;
     buildClientContext?: () => NinetailedRequestContext;
     storageImpl?: Storage;
-    useClientSideEvaluation?: boolean;
+    useSDKEvaluation?: boolean;
 };
 type NinetailedApiClientInstanceOrOptions = NinetailedApiClient | NinetailedApiClientOptions;
 export declare class Ninetailed implements NinetailedInstance {
@@ -51,9 +51,9 @@ export declare class Ninetailed implements NinetailedInstance {
     readonly plugins: NinetailedPlugin[];
     readonly logger: Logger;
     private readonly componentViewTrackingThreshold;
-    private readonly useClientSideEvaluation;
+    private readonly useSDKEvaluation;
     readonly eventBuilder: EventBuilder;
-    constructor(ninetailedApiClientInstanceOrOptions: NinetailedApiClientInstanceOrOptions, { plugins, url, locale, requestTimeout, onLog, onError, buildClientContext, onInitProfileId, componentViewTrackingThreshold, storageImpl, useClientSideEvaluation, }?: Options);
+    constructor(ninetailedApiClientInstanceOrOptions: NinetailedApiClientInstanceOrOptions, { plugins, url, locale, requestTimeout, onLog, onError, buildClientContext, onInitProfileId, componentViewTrackingThreshold, storageImpl, useSDKEvaluation, }?: Options);
     page: (data?: Partial<PageviewProperties>, options?: EventFunctionOptions) => Promise<import("./types").FlushResult>;
     track: (event: string, properties?: Properties, options?: EventFunctionOptions) => Promise<import("./types").FlushResult>;
     identify: (uid: string, traits?: Traits, options?: EventFunctionOptions) => Promise<import("./types").FlushResult>;

package/src/lib/NinetailedCorePlugin/NinetailedCorePlugin.d.ts

@@ -1,9 +1,8 @@
 import { AnalyticsInstance } from 'analytics';
 import { Locale, NinetailedApiClient, NinetailedRequestContext } from '@ninetailed/experience.js-shared';
-import { NinetailedAnalyticsPlugin, NinetailedPlugin, SanitizedElementSeenPayload } from '@ninetailed/experience.js-plugin-analytics';
+import { NinetailedAnalyticsPlugin, SanitizedElementSeenPayload } from '@ninetailed/experience.js-plugin-analytics';
 import { NinetailedInstance, FlushResult } from '../types';
 import { HAS_SEEN_STICKY_COMPONENT } from '../constants';
-import { HasComponentViewTrackingThreshold } from '../types/interfaces/HasComponentViewTrackingThreshold';
 export type OnInitProfileId = (profileId?: string) => Promise<string | undefined> | string | undefined;
 type AnalyticsPluginNinetailedConfig = {
     apiClient: NinetailedApiClient;
@@ -25,10 +24,10 @@ type AbortableFnParams = {
 type InternalAnalyticsInstance = AnalyticsInstance & {
     dispatch: (action: any) => void;
 };
-export interface NinetailedCorePlugin extends NinetailedPlugin {
+export interface NinetailedCorePlugin extends NinetailedAnalyticsPlugin {
     flush: (args: void) => Promise<FlushResult>;
 }
-export declare class NinetailedCorePlugin extends NinetailedAnalyticsPlugin implements NinetailedCorePlugin, HasComponentViewTrackingThreshold {
+export declare class NinetailedCorePlugin extends NinetailedAnalyticsPlugin implements NinetailedCorePlugin {
     name: string;
     private _instance?;
     private queue;
@@ -48,7 +47,7 @@ export declare class NinetailedCorePlugin extends NinetailedAnalyticsPlugin impl
     track({ payload }: EventFn): Promise<void>;
     identifyStart(params: AbortableFnParams): unknown;
     identify({ payload }: EventFn): Promise<void>;
-    getComponentViewTrackingThreshold(): number;
+    getComponentViewTrackingThreshold: () => number;
     protected onTrackExperience(properties: SanitizedElementSeenPayload): Promise<void>;
     protected onTrackComponent(): Promise<void>;
     [HAS_SEEN_STICKY_COMPONENT]: ({ payload }: EventFn) => Promise<void>;

package/src/lib/test-helpers/intersection-observer-test-helper.d.ts

@@ -0,0 +1,2 @@
+export declare function intersect(element: Element, isIntersecting: boolean): void;
+export declare function getObserverOf(element: Element): IntersectionObserver;

package/src/lib/types/index.d.ts

@@ -40,7 +40,7 @@ export type OnProfileChangeCallback = (profile: ProfileState) => void;
 export type Page = (data?: Partial<PageviewProperties>, options?: EventFunctionOptions) => Promise<FlushResult>;
 export type Track = (event: string, properties?: Properties, options?: EventFunctionOptions) => Promise<FlushResult>;
 export type TrackHasSeenComponent = (properties: TrackComponentProperties) => Promise<void>;
-export type TrackComponentView = (properties: ElementSeenPayload) => Promise<void>;
+export type TrackComponentView = (properties: Omit<ElementSeenPayload, 'seenFor'>) => Promise<void>;
 export type Identify = (uid: string, traits?: Traits, options?: EventFunctionOptions) => Promise<FlushResult>;
 export type Batch = (events: Event[]) => Promise<FlushResult>;
 export type Reset = () => void;

package/src/lib/guards/hasComponentViewTrackingThreshold.d.ts

@@ -1,3 +0,0 @@
-import { NinetailedPlugin } from '@ninetailed/experience.js-plugin-analytics';
-import type { HasComponentViewTrackingThreshold } from '../types/interfaces/HasComponentViewTrackingThreshold';
-export declare const hasComponentViewTrackingThreshold: (arg: NinetailedPlugin) => arg is NinetailedPlugin & HasComponentViewTrackingThreshold;

package/src/lib/types/interfaces/HasComponentViewTrackingThreshold.d.ts

@@ -1,3 +0,0 @@
-export interface HasComponentViewTrackingThreshold {
-    getComponentViewTrackingThreshold: () => number;
-}