@ninetailed/experience.js 5.0.0-beta.3 → 6.0.1-beta.1

package/lib/ElementSeenObserver.d.ts

@@ -0,0 +1,16 @@
+export type ElementSeenObserverOptions = {
+    onElementSeen: (element: Element) => void;
+};
+export type ObserveOptions = {
+    delay?: number;
+};
+export declare class ElementSeenObserver {
+    private _options;
+    private _intersectionObserver?;
+    private _elementDelays;
+    private _intersectionTimers;
+    constructor(_options: ElementSeenObserverOptions);
+    private onIntersection;
+    observe(element: Element, options?: ObserveOptions): void;
+    unobserve(element: Element): void;
+}

package/lib/Ninetailed.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="analytics" />
-import { Locale, Traits, OnLogHandler, OnErrorHandler, Logger, PageviewProperties, Properties, NinetailedApiClient, NinetailedApiClientOptions } from '@ninetailed/experience.js-shared';
-import { EventFunctionOptions, NinetailedInstance, NinetailedPlugin, OnIsInitializedCallback, OnProfileChangeCallback, ProfileState, TrackHasSeenComponent, TrackHasSeenExperience } from './types';
+import { Locale, Traits, Profile, OnLogHandler, OnErrorHandler, Logger, PageviewProperties, Properties, NinetailedApiClient, NinetailedApiClientOptions } from '@ninetailed/experience.js-shared';
+import { EventFunctionOptions, NinetailedInstance, NinetailedPlugin, OnIsInitializedCallback, OnProfileChangeCallback, ProfileState, TrackHasSeenComponent, TrackHasSeenExperience, ElementSeenPayload } from './types';
+import { ObserveOptions } from './ElementSeenObserver';
 declare global {
     interface Window {
         ninetailed?: {
@@ -15,9 +16,11 @@ type Options = {
     url?: string;
     locale?: Locale;
     plugins?: (NinetailedPlugin | NinetailedPlugin[])[];
+    profile?: Profile;
     requestTimeout?: number;
     onLog?: OnLogHandler;
     onError?: OnErrorHandler;
+    componentViewTrackingThreshold?: number;
 };
 type NinetailedApiClientInstanceOrOptions = NinetailedApiClient | NinetailedApiClientOptions;
 export declare class Ninetailed implements NinetailedInstance {
@@ -26,15 +29,29 @@ export declare class Ninetailed implements NinetailedInstance {
     private isInitialized;
     private readonly apiClient;
     private readonly eventQueue;
+    private readonly elementSeenObserver;
+    private readonly observedElements;
     private readonly clientId;
     private readonly environment;
     readonly plugins: NinetailedPlugin[];
     readonly logger: Logger;
-    constructor(ninetailedApiClientInstanceOrOptions: NinetailedApiClientInstanceOrOptions, { plugins, url, locale, requestTimeout, onLog, onError }?: Options);
+    private readonly componentViewTrackingThreshold;
+    constructor(ninetailedApiClientInstanceOrOptions: NinetailedApiClientInstanceOrOptions, { plugins, url, profile, locale, requestTimeout, onLog, onError, componentViewTrackingThreshold, }?: Options);
     page: (data?: Partial<PageviewProperties>, options?: EventFunctionOptions) => Promise<import("./types").FlushResult>;
     track: (event: string, properties?: Properties, options?: EventFunctionOptions) => Promise<import("./types").FlushResult>;
+    /**
+     * @deprecated The legacy datamodel is not recommended anymore
+     * Will be removed in version 5 of the SDK
+     */
     trackHasSeenComponent: TrackHasSeenComponent;
+    /**
+     * @deprecated Use the Ninetailed provided observers instead
+     * Will be removed in version 5 of the SDK
+     */
     trackHasSeenExperience: TrackHasSeenExperience;
+    observeElement: (payload: ElementSeenPayload, options?: ObserveOptions) => void;
+    unobserveElement: (element: Element) => void;
+    private onElementSeen;
     identify: (uid: string, traits?: Traits, options?: EventFunctionOptions) => Promise<import("./types").FlushResult>;
     reset: () => Promise<void>;
     debug: (enabled: boolean) => Promise<void>;
@@ -44,5 +61,6 @@ export declare class Ninetailed implements NinetailedInstance {
     get profileState(): ProfileState;
     private buildOptions;
     private registerWindowHandlers;
+    private onVisibilityChange;
 }
 export {};

package/lib/analytics/constants.d.ts

@@ -2,7 +2,6 @@ export declare const LEGACY_ANONYMOUS_ID = "__anon_id";
 export declare const ANONYMOUS_ID = "__nt_anonymous_id__";
 export declare const DEBUG_FLAG = "__nt_debug__";
 export declare const PROFILE_FALLBACK_CACHE = "__nt_profile__";
-export declare const EXPERIENCES_FALLBACK_CACHE = "__nt_experiences__";
 export declare const PROFILE_CHANGE = "profile-change";
 export declare const PROFILE_RESET = "profile-reset";
 export declare const CONSENT = "__nt-consent__";

package/lib/analytics/index.d.ts

@@ -1,2 +1,3 @@
 export * from './get-analytics-plugin';
 export * from './constants';
+export * from './Events';

package/lib/constants.d.ts

@@ -1,2 +1,3 @@
-export declare const HAS_SEEN_EXPERIENCE = "has_seen_experience";
 export declare const HAS_SEEN_COMPONENT = "has_seen_component";
+export declare const HAS_SEEN_ELEMENT = "has_seen_element";
+export declare const PAGE_HIDDEN = "page_hidden";

package/lib/experience/index.d.ts

@@ -1,4 +1,4 @@
 export * from './types';
-export { EXPERIENCE_TRAIT_PREFIX, selectDistribution, isExperienceMatch, selectVariantClientSide as selectExperienceVariantClientSide, selectHasVariants as selectHasExperienceVariants, selectVariants as selectExperienceVariants, selectBaselineWithVariants as selectExperienceBaselineWithVariants, selectExperience, selectEligibleExperiences, selectActiveExperiments, } from '@ninetailed/experience.js-shared';
+export { EXPERIENCE_TRAIT_PREFIX, selectDistribution, isExperienceMatch, selectVariant as selectExperienceVariant, selectHasVariants as selectHasExperienceVariants, selectVariants as selectExperienceVariants, selectBaselineWithVariants as selectExperienceBaselineWithVariants, selectExperience, selectEligibleExperiences, selectActiveExperiments, } from '@ninetailed/experience.js-shared';
 export { decodeExperienceVariantsMap } from './decodeExperienceVariantsMap';
 export { makeExperienceSelectMiddleware } from './makeExperienceSelectMiddleware';

package/lib/experience/makeExperienceSelectMiddleware.d.ts

@@ -11,9 +11,10 @@ type MakeExperienceSelectMiddlewareArg<Variant extends Reference> = {
 export declare const makeExperienceSelectMiddleware: <Variant extends Reference>({ plugins, onChange, experiences, baseline, profile, }: MakeExperienceSelectMiddlewareArg<Variant>) => {
     addListeners: () => void;
     removeListeners: () => void;
-    middleware: ({ experience, variant, }: ExperienceSelectionMiddlewareReturnArg<Variant | VariantRef>) => {
+    middleware: ({ experience, variant, variantIndex, }: ExperienceSelectionMiddlewareReturnArg<Variant | VariantRef>) => {
         experience: ExperienceConfiguration<Variant | VariantRef> | null;
-        variant: Variant | VariantRef | null;
+        variant: Variant | VariantRef;
+        variantIndex: number;
     };
 };
 export {};

package/lib/guards/acceptsCredentials.d.ts

@@ -0,0 +1,2 @@
+import { AcceptsCredentials } from '../types/interfaces/AcceptsCredentials';
+export declare const acceptsCredentials: (plugin: unknown) => plugin is AcceptsCredentials;

package/lib/guards/isInterestedInHiddenPage.d.ts

@@ -0,0 +1,2 @@
+import { InterestedInHiddenPage } from '../types/interfaces/InterestedInHiddenPage';
+export declare const isInterestedInHiddenPage: (arg: unknown) => arg is InterestedInHiddenPage;

package/lib/guards/isInterestedInSeenElements.d.ts

@@ -0,0 +1,2 @@
+import { InterestedInSeenElements } from '../types/interfaces/InterestedInSeenElements';
+export declare const isInterestedInSeenElements: (arg: unknown) => arg is InterestedInSeenElements;

package/lib/types/Credentials.d.ts

@@ -0,0 +1,4 @@
+export type Credentials = {
+    clientId: string;
+    environment: string;
+};

package/lib/types/ElementSeenPayload.d.ts

@@ -0,0 +1,82 @@
+import { z } from 'zod';
+export declare const ElementSeenPayloadSchema: z.ZodObject<{
+    element: z.ZodAny;
+    experience: z.ZodNullable<z.ZodOptional<z.ZodObject<{
+        id: z.ZodString;
+        type: z.ZodUnion<[z.ZodLiteral<"nt_experiment">, z.ZodLiteral<"nt_personalization">]>;
+        name: z.ZodOptional<z.ZodString>;
+        description: z.ZodOptional<z.ZodString>;
+    }, "strip", z.ZodTypeAny, {
+        id: string;
+        type: "nt_experiment" | "nt_personalization";
+        name?: string | undefined;
+        description?: string | undefined;
+    }, {
+        id: string;
+        type: "nt_experiment" | "nt_personalization";
+        name?: string | undefined;
+        description?: string | undefined;
+    }>>>;
+    audience: z.ZodDefault<z.ZodNullable<z.ZodOptional<z.ZodObject<{
+        id: z.ZodString;
+        name: z.ZodOptional<z.ZodString>;
+        description: z.ZodOptional<z.ZodString>;
+    }, "strip", z.ZodTypeAny, {
+        id: string;
+        name?: string | undefined;
+        description?: string | undefined;
+    }, {
+        id: string;
+        name?: string | undefined;
+        description?: string | undefined;
+    }>>>>;
+    variant: z.ZodObject<{
+        id: z.ZodString;
+    }, "strip", z.ZodUnknown, z.objectOutputType<{
+        id: z.ZodString;
+    }, z.ZodUnknown, "strip">, z.objectInputType<{
+        id: z.ZodString;
+    }, z.ZodUnknown, "strip">>;
+    variantIndex: z.ZodNumber;
+}, "strip", z.ZodTypeAny, {
+    audience: {
+        id: string;
+        name?: string | undefined;
+        description?: string | undefined;
+    } | null;
+    variant: {
+        id: string;
+    } & {
+        [k: string]: unknown;
+    };
+    variantIndex: number;
+    element?: any;
+    experience?: {
+        id: string;
+        type: "nt_experiment" | "nt_personalization";
+        name?: string | undefined;
+        description?: string | undefined;
+    } | null | undefined;
+}, {
+    variant: {
+        id: string;
+    } & {
+        [k: string]: unknown;
+    };
+    variantIndex: number;
+    element?: any;
+    experience?: {
+        id: string;
+        type: "nt_experiment" | "nt_personalization";
+        name?: string | undefined;
+        description?: string | undefined;
+    } | null | undefined;
+    audience?: {
+        id: string;
+        name?: string | undefined;
+        description?: string | undefined;
+    } | null | undefined;
+}>;
+export type ElementSeenPayload = Omit<z.input<typeof ElementSeenPayloadSchema>, 'element'> & {
+    element: Element;
+};

package/lib/types/NinetailedPlugin.d.ts

@@ -1,4 +1,13 @@
 import { AnalyticsPlugin } from 'analytics';
+import { AnalyticsInstance } from './AnalyticsInstance';
+export type EventHandlerParams<T = unknown> = {
+    payload: T;
+    instance: AnalyticsInstance;
+};
+export type EventHandler<T = unknown> = (params: EventHandlerParams<T>) => void;
+/**
+ * @deprecated Use `NinetailedPlugin` from the sdks/javascript package instead.
+ */
 export declare abstract class NinetailedPlugin implements AnalyticsPlugin {
     [x: string]: unknown;
     abstract readonly name: string;

package/lib/types/ProfileChangedPayload.d.ts

@@ -0,0 +1,4 @@
+import { type Profile } from '@ninetailed/experience.js-shared';
+export type ProfileChangedPayload = {
+    profile: Profile;
+};

package/lib/types/TrackingProperties.d.ts

@@ -1,83 +1,4 @@
 import { z } from 'zod';
-export declare const TrackExperienceProperties: z.ZodObject<{
-    experience: z.ZodObject<{
-        id: z.ZodString;
-        type: z.ZodUnion<[z.ZodLiteral<"nt_experiment">, z.ZodLiteral<"nt_personalization">]>;
-        name: z.ZodString;
-        description: z.ZodOptional<z.ZodString>;
-    }, "strip", z.ZodTypeAny, {
-        description?: string | undefined;
-        type: "nt_experiment" | "nt_personalization";
-        id: string;
-        name: string;
-    }, {
-        description?: string | undefined;
-        type: "nt_experiment" | "nt_personalization";
-        id: string;
-        name: string;
-    }>;
-    audience: z.ZodDefault<z.ZodOptional<z.ZodObject<{
-        id: z.ZodString;
-        name: z.ZodOptional<z.ZodString>;
-        description: z.ZodOptional<z.ZodString>;
-    }, "strip", z.ZodTypeAny, {
-        name?: string | undefined;
-        description?: string | undefined;
-        id: string;
-    }, {
-        name?: string | undefined;
-        description?: string | undefined;
-        id: string;
-    }>>>;
-    selectedVariant: z.ZodObject<{
-        id: z.ZodString;
-    }, "strip", z.ZodUnknown, {
-        [x: string]: unknown;
-        id: string;
-    }, {
-        [x: string]: unknown;
-        id: string;
-    }>;
-    selectedVariantIndex: z.ZodNumber;
-}, "strip", z.ZodTypeAny, {
-    experience: {
-        description?: string | undefined;
-        type: "nt_experiment" | "nt_personalization";
-        id: string;
-        name: string;
-    };
-    audience: {
-        name?: string | undefined;
-        description?: string | undefined;
-        id: string;
-    };
-    selectedVariant: {
-        [x: string]: unknown;
-        id: string;
-    };
-    selectedVariantIndex: number;
-}, {
-    audience?: {
-        name?: string | undefined;
-        description?: string | undefined;
-        id: string;
-    } | undefined;
-    experience: {
-        description?: string | undefined;
-        type: "nt_experiment" | "nt_personalization";
-        id: string;
-        name: string;
-    };
-    selectedVariant: {
-        [x: string]: unknown;
-        id: string;
-    };
-    selectedVariantIndex: number;
-}>;
-export type TrackExperienceProperties = z.input<typeof TrackExperienceProperties>;
-export type SanitizedTrackExperienceProperties = z.infer<typeof TrackExperienceProperties> & {
-    selectedVariantSelector: string;
-};
 export declare const TrackComponentProperties: z.ZodObject<{
     variant: z.ZodObject<{
         id: z.ZodString;
@@ -95,18 +16,18 @@ export declare const TrackComponentProperties: z.ZodObject<{
     }>;
     isPersonalized: z.ZodBoolean;
 }, "strip", z.ZodTypeAny, {
-    audience: {
+    variant: {
         id: string;
     };
-    variant: {
+    audience: {
         id: string;
     };
     isPersonalized: boolean;
 }, {
-    audience: {
+    variant: {
         id: string;
     };
-    variant: {
+    audience: {
         id: string;
     };
     isPersonalized: boolean;

package/lib/types/index.d.ts

@@ -1,23 +1,22 @@
-import { Logger, PageviewProperties, Profile, Properties, Traits, SelectedVariantInfo } from '@ninetailed/experience.js-shared';
+import { Logger, PageviewProperties, Profile, Properties, Traits } from '@ninetailed/experience.js-shared';
 import { DetachListeners } from 'analytics';
-import { TrackExperienceProperties, TrackComponentProperties } from './TrackingProperties';
+import { TrackComponentProperties } from './TrackingProperties';
 import { NinetailedPlugin } from './NinetailedPlugin';
+import { type Ninetailed } from '../Ninetailed';
+import { ElementSeenPayload } from './ElementSeenPayload';
 type Loading = {
     status: 'loading';
     profile: null;
-    experiences: null;
     error: null;
 };
 type Success = {
     status: 'success';
     profile: Profile;
-    experiences: SelectedVariantInfo[];
     error: null;
 };
 type Fail = {
     status: 'error';
     profile: null;
-    experiences: null;
     error: Error;
 };
 export type ProfileState = {
@@ -38,11 +37,13 @@ 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 TrackHasSeenExperience = (properties: TrackExperienceProperties) => Promise<void>;
+export type TrackHasSeenExperience = (properties: ElementSeenPayload) => Promise<void>;
 export type Identify = (uid: string, traits?: Traits, options?: EventFunctionOptions) => Promise<FlushResult>;
 export type Reset = () => void;
 export type Debug = (enable: boolean) => void;
 export type OnProfileChange = (cb: OnProfileChangeCallback) => DetachListeners;
+type ObserveElement = Ninetailed['observeElement'];
+type UnObserveElement = Ninetailed['unobserveElement'];
 export interface NinetailedInstance {
     page: Page;
     track: Track;
@@ -56,8 +57,13 @@ export interface NinetailedInstance {
     plugins: NinetailedPlugin[];
     logger: Logger;
     onIsInitialized: OnIsInitialized;
+    observeElement: ObserveElement;
+    unobserveElement: UnObserveElement;
 }
-export { NinetailedPlugin, TrackExperienceProperties, TrackComponentProperties, };
+export { NinetailedPlugin, TrackComponentProperties };
 export type { EventHandler } from './EventHandler';
 export type { AnalyticsInstance } from './AnalyticsInstance';
-export type { SanitizedTrackExperienceProperties } from './TrackingProperties';
+export { ElementSeenPayloadSchema } from './ElementSeenPayload';
+export type { ElementSeenPayload } from './ElementSeenPayload';
+export type { ProfileChangedPayload } from './ProfileChangedPayload';
+export type { Credentials } from './Credentials';

package/lib/types/interfaces/AcceptsCredentials.d.ts

@@ -0,0 +1,4 @@
+import { type Credentials } from '../Credentials';
+export interface AcceptsCredentials {
+    setCredentials(credentials: Credentials): void;
+}

package/lib/types/interfaces/HasExperienceSelectionMiddleware.d.ts

@@ -1,7 +1,8 @@
 import { ExperienceConfiguration, Reference } from '@ninetailed/experience.js-shared';
 export type ExperienceSelectionMiddlewareReturnArg<Variant extends Reference> = {
     experience: ExperienceConfiguration<Variant> | null;
-    variant: Variant | null;
+    variant: Variant;
+    variantIndex: number;
 };
 type ExperienceSelectionMiddlewareReturn<Variant extends Reference> = (arg: ExperienceSelectionMiddlewareReturnArg<Variant>) => ExperienceSelectionMiddlewareReturnArg<Variant>;
 type ExperienceSelectionMiddlewareArg<Variant extends Reference> = {

package/lib/types/interfaces/InterestedInHiddenPage.d.ts

@@ -0,0 +1,5 @@
+import { PAGE_HIDDEN } from '../../constants';
+import { EventHandler } from '../EventHandler';
+export interface InterestedInHiddenPage {
+    [PAGE_HIDDEN]: EventHandler<void>;
+}

package/lib/types/interfaces/InterestedInProfileChange.d.ts

@@ -0,0 +1,6 @@
+import { PROFILE_CHANGE } from '@ninetailed/experience.js-shared';
+import { EventHandler } from '../EventHandler';
+import { ProfileChangedPayload } from '../ProfileChangedPayload';
+export interface InterestedInProfileChange {
+    [PROFILE_CHANGE]: EventHandler<ProfileChangedPayload>;
+}

package/lib/types/interfaces/InterestedInSeenElements.d.ts

@@ -0,0 +1,6 @@
+import { HAS_SEEN_ELEMENT } from '../../constants';
+import { ElementSeenPayload } from '../ElementSeenPayload';
+import { EventHandler } from '../EventHandler';
+export interface InterestedInSeenElements {
+    [HAS_SEEN_ELEMENT]: EventHandler<ElementSeenPayload>;
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@ninetailed/experience.js",
-  "version": "5.0.0-beta.3",
+  "version": "6.0.1-beta.1",
   "module": "./index.js",
   "main": "./index.cjs",
   "type": "module",
   "types": "./index.d.ts",
   "dependencies": {
-    "@ninetailed/experience.js-shared": "5.0.0-beta.3",
+    "@ninetailed/experience.js-shared": "6.0.1-beta.1",
     "analytics": "0.8.1",
     "zod": "3.21.4"
   },