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

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,
@@ -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* () {
@@ -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 => {
@@ -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 () {
@@ -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.6",
   "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.6",
+    "@ninetailed/experience.js-shared": "7.6.0-beta.6",
     "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/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;
-}