@ninetailed/experience.js-plugin-preview 4.2.0-beta.0 → 4.2.0-beta.2

package/index.cjs

@@ -3,11 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var omit = require('lodash/omit');
-var experience_js = require('@ninetailed/experience.js');
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var uuid = require('uuid');
 var unionBy = require('lodash/unionBy');
+var experience_js = require('@ninetailed/experience.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -3028,79 +3025,6 @@ class WidgetContainer {
   }
 }
 
-const PreviewRenderPlugin = ctx => {
-  const PreviewRenderPlugin = props => {
-    const [pluginApi, setPluginApi] = react.useState(ctx.pluginApi);
-    const {
-      children,
-      setComponentProps,
-      experiences,
-      baseline
-    } = props;
-    const {
-      current: id
-    } = react.useRef(uuid.v4());
-    react.useEffect(() => {
-      ctx.registerSetPluginApi(id, setPluginApi);
-      return () => {
-        ctx.unregisterSetPluginApi(id);
-      };
-    }, [id]);
-    react.useEffect(() => {
-      const experienceIds = Object.keys(pluginApi.experienceVariantIndexes);
-      const experience = experiences.find(experience => {
-        const hasActiveAudience = pluginApi.activeAudiences.some(activeAudienceId => {
-          var _a;
-          return ((_a = experience.audience) === null || _a === void 0 ? void 0 : _a.id) === activeAudienceId;
-        });
-        return hasActiveAudience && experienceIds.includes(experience.id);
-      });
-      if (!experience) {
-        setComponentProps(baseline);
-        return;
-      }
-      const baselineComponent = experience.components.find(component => component.baseline.id === baseline.id);
-      if (!baselineComponent) {
-        setComponentProps(baseline);
-        return;
-      }
-      const allVariants = [baseline, ...baselineComponent.variants];
-      const variantIndex = pluginApi.experienceVariantIndexes[experience.id];
-      if (allVariants.length <= variantIndex) {
-        setComponentProps(baseline);
-        return;
-      }
-      const variant = allVariants[variantIndex];
-      if (!variant) {
-        setComponentProps(baseline);
-        return;
-      }
-      setComponentProps(variant);
-    }, [experiences, baseline, setComponentProps, pluginApi.experienceVariantIndexes, pluginApi.activeAudiences]);
-    return jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: children
-    });
-  };
-  return PreviewRenderPlugin;
-};
-
-class PreviewRenderPluginContext {
-  constructor(pluginApi) {
-    this.pluginApi = pluginApi;
-    this.setPluginApiCallbacks = new Map();
-    this.registerSetPluginApi = (id, setPluginApi) => {
-      this.setPluginApiCallbacks.set(id, setPluginApi);
-    };
-    this.unregisterSetPluginApi = id => {
-      this.setPluginApiCallbacks.delete(id);
-    };
-    this.setPluginApi = pluginApi => {
-      this.pluginApi = pluginApi;
-      this.setPluginApiCallbacks.forEach(callback => callback(pluginApi));
-    };
-  }
-}
-
 var _a;
 class NinetailedPreviewPlugin extends experience_js.NinetailedPlugin {
   constructor(options) {
@@ -3115,8 +3039,9 @@ class NinetailedPreviewPlugin extends experience_js.NinetailedPlugin {
     this.profile = null;
     this.container = null;
     this.bridge = null;
-    this.renderPluginContext = new PreviewRenderPluginContext(this.pluginApi);
     this.onChangeEmitter = new experience_js.OnChangeEmitter();
+    this.clientId = null;
+    this.environment = null;
     this.initialize = () => __awaiter(this, void 0, void 0, function* () {
       var _b;
       if (typeof window !== 'undefined') {
@@ -3140,9 +3065,6 @@ class NinetailedPreviewPlugin extends experience_js.NinetailedPlugin {
         });
       }
     });
-    this.getRenderWrapper = () => {
-      return this.renderPluginComponent;
-    };
     this.loaded = () => true;
     this[_a] = ({
       payload
@@ -3215,9 +3137,16 @@ class NinetailedPreviewPlugin extends experience_js.NinetailedPlugin {
       this.profile = profile;
       this.onChange();
     };
+    this.setCredentials = ({
+      clientId,
+      environment
+    }) => {
+      this.clientId = clientId;
+      this.environment = environment;
+    };
     this.experiences = options.experiences || [];
     this.audienceDefinitions = options.audiences || [];
-    this.renderPluginComponent = PreviewRenderPlugin(this.renderPluginContext);
+    this.onOpenExperienceEditor = options.onOpenExperienceEditor;
   }
   open() {
     var _b;
@@ -3333,6 +3262,12 @@ class NinetailedPreviewPlugin extends experience_js.NinetailedPlugin {
       window.ninetailed.reset();
     }
   }
+  openExperienceEditor(experience) {
+    if (this.onOpenExperienceEditor && typeof this.onOpenExperienceEditor === 'function') return this.onOpenExperienceEditor(experience);
+  }
+  openExperienceAnalytics(experience) {
+    window.open(`https://app.ninetailed.io/${this.clientId}/${this.environment}/experiences/${experience.id}`, '_blank');
+  }
   get pluginApi() {
     var _b;
     return {
@@ -3353,7 +3288,9 @@ class NinetailedPreviewPlugin extends experience_js.NinetailedPlugin {
       experienceVariantIndexes: Object.assign(Object.assign({}, this.experienceVariantIndexes), this.experienceVariantIndexOverwrites),
       experienceVariantIndexOverwrites: this.experienceVariantIndexOverwrites,
       reset: this.reset.bind(this),
-      experiences: this.experiences
+      experiences: this.experiences,
+      openExperienceEditor: this.onOpenExperienceEditor ? this.openExperienceEditor.bind(this) : undefined,
+      openExperienceAnalytics: this.openExperienceAnalytics.bind(this)
     };
   }
   get windowApi() {

package/index.js

@@ -1,9 +1,6 @@
 import omit from 'lodash/omit';
-import { NinetailedPlugin, OnChangeEmitter, selectActiveExperiments, selectEligibleExperiences, isExperienceMatch, selectDistribution, PROFILE_CHANGE } from '@ninetailed/experience.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
-import { v4 } from 'uuid';
 import unionBy from 'lodash/unionBy';
+import { NinetailedPlugin, OnChangeEmitter, selectActiveExperiments, selectEligibleExperiences, isExperienceMatch, selectDistribution, PROFILE_CHANGE } from '@ninetailed/experience.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -3001,79 +2998,6 @@ class WidgetContainer {
   }
 }
 
-const PreviewRenderPlugin = ctx => {
-  const PreviewRenderPlugin = props => {
-    const [pluginApi, setPluginApi] = useState(ctx.pluginApi);
-    const {
-      children,
-      setComponentProps,
-      experiences,
-      baseline
-    } = props;
-    const {
-      current: id
-    } = useRef(v4());
-    useEffect(() => {
-      ctx.registerSetPluginApi(id, setPluginApi);
-      return () => {
-        ctx.unregisterSetPluginApi(id);
-      };
-    }, [id]);
-    useEffect(() => {
-      const experienceIds = Object.keys(pluginApi.experienceVariantIndexes);
-      const experience = experiences.find(experience => {
-        const hasActiveAudience = pluginApi.activeAudiences.some(activeAudienceId => {
-          var _a;
-          return ((_a = experience.audience) === null || _a === void 0 ? void 0 : _a.id) === activeAudienceId;
-        });
-        return hasActiveAudience && experienceIds.includes(experience.id);
-      });
-      if (!experience) {
-        setComponentProps(baseline);
-        return;
-      }
-      const baselineComponent = experience.components.find(component => component.baseline.id === baseline.id);
-      if (!baselineComponent) {
-        setComponentProps(baseline);
-        return;
-      }
-      const allVariants = [baseline, ...baselineComponent.variants];
-      const variantIndex = pluginApi.experienceVariantIndexes[experience.id];
-      if (allVariants.length <= variantIndex) {
-        setComponentProps(baseline);
-        return;
-      }
-      const variant = allVariants[variantIndex];
-      if (!variant) {
-        setComponentProps(baseline);
-        return;
-      }
-      setComponentProps(variant);
-    }, [experiences, baseline, setComponentProps, pluginApi.experienceVariantIndexes, pluginApi.activeAudiences]);
-    return jsx(Fragment, {
-      children: children
-    });
-  };
-  return PreviewRenderPlugin;
-};
-
-class PreviewRenderPluginContext {
-  constructor(pluginApi) {
-    this.pluginApi = pluginApi;
-    this.setPluginApiCallbacks = new Map();
-    this.registerSetPluginApi = (id, setPluginApi) => {
-      this.setPluginApiCallbacks.set(id, setPluginApi);
-    };
-    this.unregisterSetPluginApi = id => {
-      this.setPluginApiCallbacks.delete(id);
-    };
-    this.setPluginApi = pluginApi => {
-      this.pluginApi = pluginApi;
-      this.setPluginApiCallbacks.forEach(callback => callback(pluginApi));
-    };
-  }
-}
-
 var _a;
 class NinetailedPreviewPlugin extends NinetailedPlugin {
   constructor(options) {
@@ -3088,8 +3012,9 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     this.profile = null;
     this.container = null;
     this.bridge = null;
-    this.renderPluginContext = new PreviewRenderPluginContext(this.pluginApi);
     this.onChangeEmitter = new OnChangeEmitter();
+    this.clientId = null;
+    this.environment = null;
     this.initialize = () => __awaiter(this, void 0, void 0, function* () {
       var _b;
       if (typeof window !== 'undefined') {
@@ -3113,9 +3038,6 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
         });
       }
     });
-    this.getRenderWrapper = () => {
-      return this.renderPluginComponent;
-    };
     this.loaded = () => true;
     this[_a] = ({
       payload
@@ -3188,9 +3110,16 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
       this.profile = profile;
       this.onChange();
     };
+    this.setCredentials = ({
+      clientId,
+      environment
+    }) => {
+      this.clientId = clientId;
+      this.environment = environment;
+    };
     this.experiences = options.experiences || [];
     this.audienceDefinitions = options.audiences || [];
-    this.renderPluginComponent = PreviewRenderPlugin(this.renderPluginContext);
+    this.onOpenExperienceEditor = options.onOpenExperienceEditor;
   }
   open() {
     var _b;
@@ -3306,6 +3235,12 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
       window.ninetailed.reset();
     }
   }
+  openExperienceEditor(experience) {
+    if (this.onOpenExperienceEditor && typeof this.onOpenExperienceEditor === 'function') return this.onOpenExperienceEditor(experience);
+  }
+  openExperienceAnalytics(experience) {
+    window.open(`https://app.ninetailed.io/${this.clientId}/${this.environment}/experiences/${experience.id}`, '_blank');
+  }
   get pluginApi() {
     var _b;
     return {
@@ -3326,7 +3261,9 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
       experienceVariantIndexes: Object.assign(Object.assign({}, this.experienceVariantIndexes), this.experienceVariantIndexOverwrites),
       experienceVariantIndexOverwrites: this.experienceVariantIndexOverwrites,
       reset: this.reset.bind(this),
-      experiences: this.experiences
+      experiences: this.experiences,
+      openExperienceEditor: this.onOpenExperienceEditor ? this.openExperienceEditor.bind(this) : undefined,
+      openExperienceAnalytics: this.openExperienceAnalytics.bind(this)
     };
   }
   get windowApi() {

package/lib/plugin/NinetailedPreviewPlugin.d.ts

@@ -1,16 +1,15 @@
 import { Reference } from '@ninetailed/experience.js-shared';
-import { ExperienceConfiguration, PROFILE_CHANGE, NinetailedPlugin, HasExperienceSelectionMiddleware, ExperienceSelectionMiddleware } from '@ninetailed/experience.js';
+import { ExperienceConfiguration, PROFILE_CHANGE, HasExperienceSelectionMiddleware, ExperienceSelectionMiddleware, NinetailedPlugin } from '@ninetailed/experience.js';
 import { Audience } from '@ninetailed/experience.js-utils';
-import { RenderPluginWrapperComponent } from '@ninetailed/experience.js-react';
 export declare const NINETAILED_PREVIEW_EVENTS: {
     previewAudiences: string;
     previewTraits: string;
 };
 type NinetailedPreviewPluginOptions = {
     url?: string;
-    environment?: string;
     experiences: ExperienceConfiguration[];
     audiences: Audience[];
+    onOpenExperienceEditor?: (experience: ExperienceConfiguration) => void;
     ui?: {
         opener?: {
             hide: boolean;
@@ -28,12 +27,12 @@ export declare class NinetailedPreviewPlugin extends NinetailedPlugin implements
     private profile;
     private container;
     private bridge;
-    private renderPluginContext;
-    private renderPluginComponent;
     private onChangeEmitter;
+    private readonly onOpenExperienceEditor;
+    private clientId;
+    private environment;
     constructor(options: NinetailedPreviewPluginOptions);
     initialize: () => Promise<void>;
-    getRenderWrapper: () => RenderPluginWrapperComponent;
     loaded: () => boolean;
     [PROFILE_CHANGE]: ({ payload }: {
         payload: any;
@@ -51,6 +50,8 @@ export declare class NinetailedPreviewPlugin extends NinetailedPlugin implements
     resetExperience(experienceId: string): void;
     reset(): void;
     getExperienceSelectionMiddleware: ExperienceSelectionMiddleware<Reference>;
+    openExperienceEditor(experience: ExperienceConfiguration): void;
+    openExperienceAnalytics(experience: ExperienceConfiguration): void;
     private get pluginApi();
     private get windowApi();
     private isKnownAudience;
@@ -59,5 +60,6 @@ export declare class NinetailedPreviewPlugin extends NinetailedPlugin implements
     private get experienceVariantIndexes();
     private onChange;
     private onProfileChange;
+    private setCredentials;
 }
 export {};

package/package.json

@@ -1,20 +1,16 @@
 {
   "name": "@ninetailed/experience.js-plugin-preview",
-  "version": "4.2.0-beta.0",
+  "version": "4.2.0-beta.2",
   "module": "./index.js",
   "main": "./index.cjs",
   "type": "module",
   "types": "./index.d.ts",
   "dependencies": {
     "lodash": "4.17.21",
-    "@ninetailed/experience.js-shared": "4.2.0-beta.0",
-    "@ninetailed/experience.js": "4.2.0-beta.0",
-    "@ninetailed/experience.js-utils": "4.1.0-beta.3",
-    "@ninetailed/experience.js-react": "4.2.0-beta.0",
-    "@ninetailed/experience.js-preview-bridge": "4.2.0-beta.0",
-    "react": "18.2.0",
-    "uuid": "9.0.0",
-    "ts-toolbelt": "9.6.0"
+    "@ninetailed/experience.js-shared": "4.2.0-beta.2",
+    "@ninetailed/experience.js": "4.2.0-beta.2",
+    "@ninetailed/experience.js-utils": "4.2.0-beta.1",
+    "@ninetailed/experience.js-preview-bridge": "4.2.0-beta.2"
   },
   "peerDependencies": {}
 }

package/lib/plugin/PreviewRenderPlugin.d.ts

@@ -1,5 +0,0 @@
-import { RenderPluginWrapperComponent } from '@ninetailed/experience.js-react';
-import { PreviewRenderPluginContext } from './PreviewRenderPluginContext';
-type PreviewRenderPlugin = (ctx: PreviewRenderPluginContext) => RenderPluginWrapperComponent;
-export declare const PreviewRenderPlugin: PreviewRenderPlugin;
-export {};

package/lib/plugin/PreviewRenderPluginContext.d.ts

@@ -1,9 +0,0 @@
-import { PreviewPluginApi } from '@ninetailed/experience.js-preview-bridge';
-export declare class PreviewRenderPluginContext {
-    pluginApi: PreviewPluginApi;
-    private setPluginApiCallbacks;
-    constructor(pluginApi: PreviewPluginApi);
-    registerSetPluginApi: (id: string, setPluginApi: (luginApi: PreviewPluginApi) => void) => void;
-    unregisterSetPluginApi: (id: string) => void;
-    setPluginApi: (pluginApi: PreviewPluginApi) => void;
-}