refactor: better naming and using constant

amplitude · Nov 16, 2023 · 12315c7 · 12315c7
1 parent e035f46
commit 12315c7
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/...gin-default-event-tracking-advanced-browser/src/default-event-tracking-advanced-plugin.ts b/...gin-default-event-tracking-advanced-browser/src/default-event-tracking-advanced-plugin.ts
@@ -11,7 +11,7 @@ import {
   getClosestElement,
 } from './helpers';
 import { finder } from './libs/finder';
-import { IMessenger, WindowMessenger } from './libs/messenger';
+import { Messenger, WindowMessenger } from './libs/messenger';
 
 type BrowserEnrichmentPlugin = EnrichmentPlugin<BrowserClient, BrowserConfig>;
 type ActionType = 'click' | 'change';
@@ -67,7 +67,7 @@ interface Options {
 
   visualTaggingOptions?: {
     enabled?: boolean;
-    messenger?: IMessenger;
+    messenger?: Messenger;
   };
 }
 

diff --git a/packages/plugin-default-event-tracking-advanced-browser/src/helpers.ts b/packages/plugin-default-event-tracking-advanced-browser/src/helpers.ts
@@ -140,21 +140,25 @@ export const getClosestElement = (element: Element | null, selectors: string[]):
 export const asyncLoadScript = (url: string) => {
   return new Promise((resolve, reject) => {
     try {
-      const scriptEle = document.createElement('script');
-      scriptEle.type = 'text/javascript';
-      scriptEle.async = true;
-      scriptEle.src = url;
-      scriptEle.addEventListener('load', () => {
-        resolve({ status: true });
-      });
-      scriptEle.addEventListener('error', () => {
+      const scriptElement = document.createElement('script');
+      scriptElement.type = 'text/javascript';
+      scriptElement.async = true;
+      scriptElement.src = url;
+      scriptElement.addEventListener(
+        'load',
+        () => {
+          resolve({ status: true });
+        },
+        { once: true },
+      );
+      scriptElement.addEventListener('error', () => {
         reject({
           status: false,
           message: `Failed to load the script ${url}`,
         });
       });
       /* istanbul ignore next */
-      document.head?.appendChild(scriptEle);
+      document.head?.appendChild(scriptElement);
     } catch (error) {
       /* istanbul ignore next */
       reject(error);

diff --git a/packages/plugin-default-event-tracking-advanced-browser/src/libs/messenger.ts b/packages/plugin-default-event-tracking-advanced-browser/src/libs/messenger.ts
@@ -4,7 +4,7 @@ import { AMPLITUDE_ORIGIN, AMPLITUDE_VISUAL_TAGGING_SELECTOR_SCRIPT_URL } from '
 import { asyncLoadScript } from '../helpers';
 import { Logger } from '@amplitude/analytics-types';
 
-export interface IMessenger {
+export interface Messenger {
   logger?: Logger;
   setup: () => void;
 }
@@ -18,7 +18,17 @@ interface Message {
   data?: Data;
 }
 
-export class WindowMessenger implements IMessenger {
+export const Action = {
+  Ping: 'ping',
+  Pong: 'pong',
+  PageLoaded: 'page-loaded',
+  SelectorLoaded: 'selector-loaded',
+  InitializeVisualTaggingSelector: 'initialize-visual-tagging-selector',
+  CloseVisualTaggingSelector: 'close-visual-tagging-selector',
+  ElementSelected: 'element-selected',
+};
+
+export class WindowMessenger implements Messenger {
   endpoint = AMPLITUDE_ORIGIN;
   logger?: Logger;
 
@@ -32,7 +42,6 @@ export class WindowMessenger implements IMessenger {
   }
 
   setup() {
-    this.notify({ action: 'page-loaded' });
     let amplitudeVisualTaggingSelectorInstance: any = null;
     window.addEventListener('message', (event) => {
       this.logger?.debug('Message received: ', event);
@@ -44,28 +53,29 @@ export class WindowMessenger implements IMessenger {
       if (!action) {
         return;
       }
-      if (action === 'ping') {
-        this.notify({ action: 'pong' });
-      } else if (action === 'initialize-visual-tagging-selector') {
+      if (action === Action.Ping) {
+        this.notify({ action: Action.Pong });
+      } else if (action === Action.InitializeVisualTaggingSelector) {
         asyncLoadScript(AMPLITUDE_VISUAL_TAGGING_SELECTOR_SCRIPT_URL)
           .then(() => {
             // eslint-disable-next-line
             amplitudeVisualTaggingSelectorInstance = (window as any)?.amplitudeVisualTaggingSelector?.({
               onSelect: this.onSelect,
             });
-            this.notify({ action: 'selector-loaded' });
+            this.notify({ action: Action.SelectorLoaded });
           })
           .catch(() => {
             this.logger?.warn('Failed to initialize visual tagging selector');
           });
-      } else if (action === 'close-visual-tagging-selector') {
+      } else if (action === Action.CloseVisualTaggingSelector) {
         // eslint-disable-next-line
         amplitudeVisualTaggingSelectorInstance?.close?.();
       }
     });
+    this.notify({ action: Action.PageLoaded });
   }
 
   private onSelect = (data: Data) => {
-    this.notify({ action: 'element-selected', data });
+    this.notify({ action: Action.ElementSelected, data });
   };
 }