feat(ringcentral-c2d): add prefix option for BaseWidget (#47)

* feat(ringcentral-c2d): add prefix option for BaseWidget

* update minor version

Author: ruleechen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ringcentral-c2d",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "RingCentral Click-to-Call and Click-to-Text library",
   "homepage": "https://github.com/ringcentral/ringcentral-c2d#readme",
   "repository": {

src/RingCentralC2D.ts

@@ -36,7 +36,7 @@ export class RingCentralC2D {
   }
 
   dispose() {
-    if (this._widget instanceof Emitter && !this._observer.disposed) {
+    if (this._observer instanceof Emitter && !this._observer.disposed) {
       this._observer.off(ObserverEvents.hoverIn, this._onHoverIn);
       this._observer.off(ObserverEvents.hoverOut, this._onHoverOut);
       this._observer.dispose();

src/widgets/BaseWidget.ts

@@ -1,8 +1,9 @@
 import { Emitter } from '../lib/Emitter';
 
-const BUBBLE_EVENTS_CHANNEL = 'rc-c2d-bubble-events';
+const BUBBLE_EVENTS_CHANNEL = 'c2d-bubble-events';
 
-interface BaseWidgetProps {
+export interface BaseWidgetProps {
+  prefix?: string;
   bubbleInIframe?: boolean;
 }
 
@@ -14,15 +15,16 @@ interface BubbleEventMessage {
 
 export class BaseWidget extends Emitter {
   _shouldBubbleEvents: boolean;
+  _bubbleEventsChannel: string;
   _selfObserver?: MutationObserver;
   _observeNodes: Map<Node, Node> = new Map();
 
-  constructor(_props: BaseWidgetProps = {}) {
+  constructor({ prefix = 'all', bubbleInIframe }: BaseWidgetProps = {}) {
     super();
 
-    this._shouldBubbleEvents =
-      !!_props.bubbleInIframe && window !== window.parent;
-    if (_props.bubbleInIframe) {
+    this._bubbleEventsChannel = `${prefix}-${BUBBLE_EVENTS_CHANNEL}`;
+    this._shouldBubbleEvents = !!bubbleInIframe && window !== window.parent;
+    if (bubbleInIframe) {
       this._addBubbleEventListeners();
     }
   }
@@ -36,7 +38,7 @@ export class BaseWidget extends Emitter {
         return true;
       }
       this._applyBubbleEvent({
-        channel: BUBBLE_EVENTS_CHANNEL,
+        channel: this._bubbleEventsChannel,
         eventName,
         eventArgs: JSON.stringify(eventArgs),
       });
@@ -52,7 +54,7 @@ export class BaseWidget extends Emitter {
 
   _onBubbleEvent = (event: MessageEvent<BubbleEventMessage | undefined>) => {
     const message = event.data;
-    if (message?.channel === BUBBLE_EVENTS_CHANNEL) {
+    if (message?.channel === this._bubbleEventsChannel) {
       this._applyBubbleEvent(message);
     }
   };
@@ -111,10 +113,8 @@ export class BaseWidget extends Emitter {
   }
 
   _disconnectObserver() {
-    if (this._selfObserver) {
-      this._selfObserver.disconnect();
-      this._selfObserver = undefined;
-    }
+    this._selfObserver?.disconnect();
+    this._selfObserver = undefined;
   }
 
   override dispose() {

src/widgets/BuiltinWidget/BuiltinWidget.interface.ts

@@ -1,4 +1,6 @@
-export interface BuiltinWidgetProps {
+import type { BaseWidgetProps } from '../BaseWidget';
+
+export interface BuiltinWidgetProps extends BaseWidgetProps {
   logoIcon?: string;
   /** As an option to automatically hide the number text when it is hovered. */
   autoHide?: boolean;

src/widgets/BuiltinWidget/BuiltinWidget.ts

@@ -15,7 +15,7 @@ import { type MatchRect } from '../../lib/NodeObserver';
 import { convertToInline } from '../../lib/convertToInline';
 import type { MatchContextModel } from '../../matchers';
 import { BaseWidget } from '../BaseWidget';
-import { type TargetItem, type IWidget } from '../Widget.interface';
+import { type IWidget, type TargetItem } from '../Widget.interface';
 
 import {
   type BuiltinWidgetProps,
@@ -78,8 +78,12 @@ export class BuiltinWidget extends BaseWidget implements IWidget {
     return BuiltinWidgetEvents;
   }
 
-  constructor(protected _props: BuiltinWidgetProps = {}) {
-    super({ bubbleInIframe: true });
+  constructor(
+    protected _props: BuiltinWidgetProps = {
+      bubbleInIframe: true,
+    },
+  ) {
+    super(_props);
     this._injectDOM();
   }