@ninetailed/experience.js-plugin-preview 7.7.2 → 7.7.4-beta.0

package/index.cjs.js

@@ -73,6 +73,7 @@ class WidgetContainer {
     var _a, _b;
     this.options = options;
     this.container = document.createElement('div');
+    this.container.classList.add(WidgetContainer.CONTAINER_CLASS);
     this.container.style.position = 'fixed';
     this.container.style.zIndex = '999999';
     this.container.style.right = '0px';
@@ -109,7 +110,11 @@ class WidgetContainer {
   get element() {
     return this.container;
   }
+  static isContainerAttached() {
+    return document.querySelector(`.${WidgetContainer.CONTAINER_CLASS}`) !== null;
+  }
 }
+WidgetContainer.CONTAINER_CLASS = 'nt-preview-widget-container';
 
 var _a;
 class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlugin {
@@ -125,15 +130,25 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     this.profile = null;
     this.container = null;
     this.bridge = null;
+    /**
+     * Since several instances of the plugin can be created, we need to make sure only one is marked as active.
+     */
+    this.isActiveInstance = false;
     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') {
+        if (WidgetContainer.isContainerAttached()) {
+          experience_jsShared.logger.warn('Preview plugin is already attached.');
+          this.isActiveInstance = false;
+          return;
+        }
         const {
           PreviewBridge
         } = yield Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@ninetailed/experience.js-preview-bridge')); });
+        this.isActiveInstance = true;
         this.container = new WidgetContainer({
           ui: this.options.ui
         });
@@ -155,6 +170,9 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     this[_a] = ({
       payload
     }) => {
+      if (!this.isActiveInstance) {
+        return;
+      }
       if (payload === null || payload === void 0 ? void 0 : payload.profile) {
         this.onProfileChange(payload.profile);
       }
@@ -163,6 +181,9 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
       baseline,
       experiences
     }) => {
+      if (!this.isActiveInstance) {
+        return;
+      }
       return () => {
         const experienceIds = Object.keys(this.pluginApi.experienceVariantIndexes);
         const experience = experiences.find(experience => {
@@ -238,12 +259,18 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
   }
   open() {
     var _b;
+    if (!this.isActiveInstance) {
+      return;
+    }
     (_b = this.container) === null || _b === void 0 ? void 0 : _b.open();
     this.isOpen = true;
     this.onChange();
   }
   close() {
     var _b;
+    if (!this.isActiveInstance) {
+      return;
+    }
     (_b = this.container) === null || _b === void 0 ? void 0 : _b.close();
     setTimeout(() => {
       this.isOpen = false;
@@ -251,6 +278,9 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     }, 700);
   }
   toggle() {
+    if (!this.isActiveInstance) {
+      return;
+    }
     if (this.isOpen) {
       this.close();
     } else {
@@ -258,6 +288,9 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     }
   }
   activateAudience(id) {
+    if (!this.isActiveInstance) {
+      return;
+    }
     if (!this.isKnownAudience(id)) {
       experience_jsShared.logger.warn(`You cannot activate an unknown audience (id: ${id}).`);
       return;
@@ -276,6 +309,9 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     this.onChange();
   }
   deactivateAudience(id) {
+    if (!this.isActiveInstance) {
+      return;
+    }
     if (!this.isKnownAudience(id)) {
       experience_jsShared.logger.warn(`You cannot deactivate an unkown audience (id: ${id}). How did you get it in the first place?`);
       return;
@@ -309,6 +345,9 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     this.onChange();
   }
   resetAudience(id) {
+    if (!this.isActiveInstance) {
+      return;
+    }
     if (!this.isKnownAudience(id)) {
       experience_jsShared.logger.warn(`You cannot reset an unknown audience (id: ${id}). How did you get it in the first place?`);
       return;
@@ -324,6 +363,9 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     experienceId,
     variantIndex
   }) {
+    if (!this.isActiveInstance) {
+      return;
+    }
     const experience = this.experiences.find(experience => experience.id === experienceId);
     if (!experience) {
       experience_jsShared.logger.warn(`You cannot active a variant for an unknown experience (id: ${experienceId})`);
@@ -346,6 +388,9 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     this.onChange();
   }
   resetExperience(experienceId) {
+    if (!this.isActiveInstance) {
+      return;
+    }
     const _b = this.experienceVariantIndexOverwrites,
       _c = experienceId;
       _b[_c];
@@ -354,6 +399,9 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
     this.onChange();
   }
   reset() {
+    if (!this.isActiveInstance) {
+      return;
+    }
     if (typeof window !== 'undefined' && window.ninetailed && typeof window.ninetailed.reset === 'function') {
       window.ninetailed.reset();
     }
@@ -370,7 +418,7 @@ class NinetailedPreviewPlugin extends experience_jsPluginAnalytics.NinetailedPlu
   get pluginApi() {
     var _b;
     return {
-      version: "7.7.2" ,
+      version: "7.7.4-beta.0" ,
       open: this.open.bind(this),
       close: this.close.bind(this),
       toggle: this.toggle.bind(this),

package/index.esm.js

@@ -42,6 +42,7 @@ class WidgetContainer {
     this.container = void 0;
     this.options = options;
     this.container = document.createElement('div');
+    this.container.classList.add(WidgetContainer.CONTAINER_CLASS);
     this.container.style.position = 'fixed';
     this.container.style.zIndex = '999999';
     this.container.style.right = '0px';
@@ -78,7 +79,11 @@ class WidgetContainer {
   get element() {
     return this.container;
   }
+  static isContainerAttached() {
+    return document.querySelector(`.${WidgetContainer.CONTAINER_CLASS}`) !== null;
+  }
 }
+WidgetContainer.CONTAINER_CLASS = 'nt-preview-widget-container';
 
 class NinetailedPreviewPlugin extends NinetailedPlugin {
   constructor(options) {
@@ -94,6 +99,10 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     this.profile = null;
     this.container = null;
     this.bridge = null;
+    /**
+     * Since several instances of the plugin can be created, we need to make sure only one is marked as active.
+     */
+    this.isActiveInstance = false;
     this.onChangeEmitter = new OnChangeEmitter();
     this.onOpenExperienceEditor = void 0;
     this.onOpenAudienceEditor = void 0;
@@ -102,9 +111,15 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     this.initialize = async function () {
       if (typeof window !== 'undefined') {
         var _window$ninetailed;
+        if (WidgetContainer.isContainerAttached()) {
+          logger.warn('Preview plugin is already attached.');
+          _this.isActiveInstance = false;
+          return;
+        }
         const {
           PreviewBridge
         } = await import('@ninetailed/experience.js-preview-bridge');
+        _this.isActiveInstance = true;
         _this.container = new WidgetContainer({
           ui: _this.options.ui
         });
@@ -126,6 +141,9 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     this[PROFILE_CHANGE] = ({
       payload
     }) => {
+      if (!this.isActiveInstance) {
+        return;
+      }
       if (payload != null && payload.profile) {
         this.onProfileChange(payload.profile);
       }
@@ -134,6 +152,9 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
       baseline,
       experiences
     }) => {
+      if (!this.isActiveInstance) {
+        return;
+      }
       return () => {
         const experienceIds = Object.keys(this.pluginApi.experienceVariantIndexes);
         const experience = experiences.find(experience => {
@@ -210,12 +231,18 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
   }
   open() {
     var _this$container;
+    if (!this.isActiveInstance) {
+      return;
+    }
     (_this$container = this.container) == null || _this$container.open();
     this.isOpen = true;
     this.onChange();
   }
   close() {
     var _this$container2;
+    if (!this.isActiveInstance) {
+      return;
+    }
     (_this$container2 = this.container) == null || _this$container2.close();
     setTimeout(() => {
       this.isOpen = false;
@@ -223,6 +250,9 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     }, 700);
   }
   toggle() {
+    if (!this.isActiveInstance) {
+      return;
+    }
     if (this.isOpen) {
       this.close();
     } else {
@@ -230,6 +260,9 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     }
   }
   activateAudience(id) {
+    if (!this.isActiveInstance) {
+      return;
+    }
     if (!this.isKnownAudience(id)) {
       logger.warn(`You cannot activate an unknown audience (id: ${id}).`);
       return;
@@ -248,6 +281,9 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     this.onChange();
   }
   deactivateAudience(id) {
+    if (!this.isActiveInstance) {
+      return;
+    }
     if (!this.isKnownAudience(id)) {
       logger.warn(`You cannot deactivate an unkown audience (id: ${id}). How did you get it in the first place?`);
       return;
@@ -281,6 +317,9 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     this.onChange();
   }
   resetAudience(id) {
+    if (!this.isActiveInstance) {
+      return;
+    }
     if (!this.isKnownAudience(id)) {
       logger.warn(`You cannot reset an unknown audience (id: ${id}). How did you get it in the first place?`);
       return;
@@ -294,6 +333,9 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     experienceId,
     variantIndex
   }) {
+    if (!this.isActiveInstance) {
+      return;
+    }
     const experience = this.experiences.find(experience => experience.id === experienceId);
     if (!experience) {
       logger.warn(`You cannot active a variant for an unknown experience (id: ${experienceId})`);
@@ -316,12 +358,18 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
     this.onChange();
   }
   resetExperience(experienceId) {
+    if (!this.isActiveInstance) {
+      return;
+    }
     const _this$experienceVaria = this.experienceVariantIndexOverwrites,
       experienceVariantIndexOverwrites = _objectWithoutPropertiesLoose(_this$experienceVaria, [experienceId].map(_toPropertyKey));
     this.experienceVariantIndexOverwrites = experienceVariantIndexOverwrites;
     this.onChange();
   }
   reset() {
+    if (!this.isActiveInstance) {
+      return;
+    }
     if (typeof window !== 'undefined' && window.ninetailed && typeof window.ninetailed.reset === 'function') {
       window.ninetailed.reset();
     }
@@ -338,7 +386,7 @@ class NinetailedPreviewPlugin extends NinetailedPlugin {
   get pluginApi() {
     var _this$profile;
     return {
-      version: "7.7.2" ,
+      version: "7.7.4-beta.0" ,
       open: this.open.bind(this),
       close: this.close.bind(this),
       toggle: this.toggle.bind(this),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js-plugin-preview",
-  "version": "7.7.2",
+  "version": "7.7.4-beta.0",
   "description": "Ninetailed SDK plugin for preview",
   "license": "MIT",
   "repository": {
@@ -15,10 +15,10 @@
     "a/b testing"
   ],
   "dependencies": {
-    "@ninetailed/experience.js-shared": "7.7.2",
-    "@ninetailed/experience.js": "7.7.2",
-    "@ninetailed/experience.js-preview-bridge": "7.7.2",
-    "@ninetailed/experience.js-plugin-analytics": "7.7.2"
+    "@ninetailed/experience.js-shared": "7.7.4-beta.0",
+    "@ninetailed/experience.js": "7.7.4-beta.0",
+    "@ninetailed/experience.js-preview-bridge": "7.7.4-beta.0",
+    "@ninetailed/experience.js-plugin-analytics": "7.7.4-beta.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/lib/plugin/NinetailedPreviewPlugin.d.ts

@@ -29,6 +29,10 @@ export declare class NinetailedPreviewPlugin extends NinetailedPlugin implements
     private profile;
     private container;
     private bridge;
+    /**
+     * Since several instances of the plugin can be created, we need to make sure only one is marked as active.
+     */
+    private isActiveInstance;
     private onChangeEmitter;
     private readonly onOpenExperienceEditor;
     private readonly onOpenAudienceEditor;

package/src/lib/plugin/WidgetContainer.d.ts

@@ -7,10 +7,12 @@ type WidgetContainerOptions = {
 };
 export declare class WidgetContainer {
     private readonly options;
+    private static CONTAINER_CLASS;
     private container;
     constructor(options: WidgetContainerOptions);
     open(): void;
     close(): void;
     get element(): HTMLDivElement;
+    static isContainerAttached(): boolean;
 }
 export {};