fix(livechat): clean up widget teardown lifecycle

Author: Shreyas2004wagh

apps/meteor/packages/rocketchat-livechat/assets/rocket-livechat.js

@@ -482,6 +482,10 @@
 	var smallScreen = false;
 	var bodyStyle;
 	var scrollPosition;
+	var navigationInterval = null;
+	var messageListener = null;
+	var mediaQueryList = null;
+	var mediaQueryListener = null;
 
 	var widgetWidth = '320px';
 	var widgetHeightOpened = '350px';
@@ -513,6 +517,62 @@
 		}
 	};
 
+	var detachMessageListener = function() {
+		if (!messageListener) {
+			return;
+		}
+
+		w.removeEventListener('message', messageListener, false);
+		messageListener = null;
+	};
+
+	var stopNavigationTracking = function() {
+		if (navigationInterval === null) {
+			return;
+		}
+
+		clearInterval(navigationInterval);
+		navigationInterval = null;
+	};
+
+	var detachMediaQueryListener = function() {
+		if (!mediaQueryList || !mediaQueryListener) {
+			return;
+		}
+
+		if (typeof mediaQueryList.removeEventListener === 'function') {
+			mediaQueryList.removeEventListener('change', mediaQueryListener);
+		} else {
+			mediaQueryList.removeListener(mediaQueryListener);
+		}
+
+		mediaQueryList = null;
+		mediaQueryListener = null;
+	};
+
+	var teardownWidget = function() {
+		stopNavigationTracking();
+		detachMessageListener();
+		detachMediaQueryListener();
+
+		var isWidgetOpened = widget && widget.dataset && widget.dataset.state === 'opened';
+		if (smallScreen && isWidgetOpened && typeof bodyStyle === 'string') {
+			document.body.style.cssText = bodyStyle;
+			if (typeof scrollPosition === 'number') {
+				document.body.scrollTop = scrollPosition;
+			}
+		}
+
+		if (widget && widget.parentNode) {
+			widget.parentNode.removeChild(widget);
+		}
+
+		widget = null;
+		iframe = null;
+		ready = false;
+		hookQueue = [];
+	};
+
 	// hooks
 	var callHook = function(action, params) {
 		if (!ready) {
@@ -617,7 +677,7 @@
 			openWidget();
 		},
 		removeWidget: function() {
-			document.getElementsByTagName('body')[0].removeChild(widget);
+			teardownWidget();
 		},
 		callback: function(eventName, data) {
 			emitCallback(eventName, data);
@@ -672,7 +732,11 @@
 		title: null
 	};
 	var trackNavigation = function() {
-		setInterval(function() {
+		if (navigationInterval !== null) {
+			return;
+		}
+
+		navigationInterval = setInterval(function() {
 			if (document.location.href !== currentPage.href) {
 				pageVisited('url');
 				currentPage.href = document.location.href;
@@ -689,6 +753,10 @@
 			return;
 		}
 
+		if (widget) {
+			teardownWidget();
+		}
+
 		config.url = url;
 
 		var chatWidget = document.createElement('div');
@@ -712,14 +780,15 @@
 		widget = document.querySelector('.rocketchat-widget');
 		iframe = document.getElementById('rocketchat-iframe');
 
-		w.addEventListener('message', function(msg) {
+		messageListener = function(msg) {
 			if (typeof msg.data === 'object' && msg.data.src !== undefined && msg.data.src === 'rocketchat') {
 				if (api[msg.data.fn] !== undefined && typeof api[msg.data.fn] === 'function') {
 					var args = [].concat(msg.data.args || []);
 					api[msg.data.fn].apply(null, args);
 				}
 			}
-		}, false);
+		};
+		w.addEventListener('message', messageListener, false);
 
 		var mediaqueryresponse = function(mql) {
 			if (mql.matches) {
@@ -734,9 +803,14 @@
 			}
 		};
 
-		var mql = window.matchMedia('screen and (max-device-width: 480px)');
-		mediaqueryresponse(mql);
-		mql.addListener(mediaqueryresponse);
+		mediaQueryList = window.matchMedia('screen and (max-device-width: 480px)');
+		mediaQueryListener = mediaqueryresponse;
+		mediaqueryresponse(mediaQueryList);
+		if (typeof mediaQueryList.addEventListener === 'function') {
+			mediaQueryList.addEventListener('change', mediaQueryListener);
+		} else {
+			mediaQueryList.addListener(mediaQueryListener);
+		}
 
 		// track user navigation
 		trackNavigation();

packages/livechat/src/widget.ts

@@ -80,12 +80,21 @@ export const VALID_CALLBACKS = [
 const VALID_SYSTEM_MESSAGES = ['uj', 'ul', 'livechat-close', 'livechat-started', 'livechat_transfer_history'];
 
 const callbacks = new Emitter();
+const callbackHandlers = new Map<string, Set<(...args: unknown[]) => unknown>>();
+let navigationIntervalId: ReturnType<typeof setInterval> | null = null;
+let messageListenerAttached = false;
+let mediaQueryList: MediaQueryList | null = null;
+let mediaQueryListener: ((event: MediaQueryList | MediaQueryListEvent) => void) | null = null;
 
-function registerCallback(eventName: string, fn: () => unknown) {
+function registerCallback(eventName: string, fn: (...args: unknown[]) => unknown) {
 	if (VALID_CALLBACKS.indexOf(eventName) === -1) {
 		return false;
 	}
 
+	const handlers = callbackHandlers.get(eventName) ?? new Set();
+	handlers.add(fn);
+	callbackHandlers.set(eventName, handlers);
+
 	return callbacks.on(eventName, fn);
 }
 
@@ -98,9 +107,12 @@ function emitCallback(eventName: string, data?: unknown) {
 }
 
 function clearAllCallbacks() {
-	callbacks.events().forEach((callback) => {
-		callbacks.off(callback, () => undefined);
+	callbackHandlers.forEach((handlers, eventName) => {
+		handlers.forEach((handler) => {
+			callbacks.off(eventName, handler);
+		});
 	});
+	callbackHandlers.clear();
 }
 
 const formatMessage = (action: keyof HooksWidgetAPI, ...params: Parameters<HooksWidgetAPI[keyof HooksWidgetAPI]>) => ({
@@ -215,8 +227,17 @@ const createWidget = (url: string) => {
 		callHook('setParentUrl', window.location.href);
 	};
 
-	const mediaQueryList = window.matchMedia('screen and (max-device-width: 480px)');
-	mediaQueryList.addListener(handleMediaQueryTest);
+	mediaQueryList = window.matchMedia('screen and (max-device-width: 480px)');
+	mediaQueryListener = (event) => {
+		handleMediaQueryTest(event);
+	};
+
+	if (typeof mediaQueryList.addEventListener === 'function') {
+		mediaQueryList.addEventListener('change', mediaQueryListener);
+	} else {
+		mediaQueryList.addListener(mediaQueryListener);
+	}
+
 	handleMediaQueryTest(mediaQueryList);
 };
 
@@ -503,7 +524,7 @@ const api: InternalWidgetAPI = {
 	},
 
 	removeWidget() {
-		document.body.removeChild(widget as Node);
+		teardownWidget();
 	},
 
 	callback(eventName, data) {
@@ -680,12 +701,70 @@ function listenForMessageOnce<K extends keyof InternalWidgetAPI>(
 	window.addEventListener('message', listener);
 }
 
+const detachMessageListener = () => {
+	if (!messageListenerAttached) {
+		return;
+	}
+
+	window.removeEventListener('message', onNewMessage, false);
+	messageListenerAttached = false;
+};
+
 const attachMessageListener = () => {
+	if (messageListenerAttached) {
+		return;
+	}
+
 	window.addEventListener('message', onNewMessage, false);
+	messageListenerAttached = true;
+};
+
+const stopNavigationTracking = () => {
+	if (navigationIntervalId === null) {
+		return;
+	}
+
+	clearInterval(navigationIntervalId);
+	navigationIntervalId = null;
+};
+
+const detachMediaQueryListener = () => {
+	if (!mediaQueryList || !mediaQueryListener) {
+		return;
+	}
+
+	if (typeof mediaQueryList.removeEventListener === 'function') {
+		mediaQueryList.removeEventListener('change', mediaQueryListener);
+	} else {
+		mediaQueryList.removeListener(mediaQueryListener);
+	}
+
+	mediaQueryList = null;
+	mediaQueryListener = null;
+};
+
+const teardownWidget = () => {
+	stopNavigationTracking();
+	detachMessageListener();
+	detachMediaQueryListener();
+	document.body.classList.remove('rc-livechat-mobile-full-screen');
+
+	if (widget?.parentNode) {
+		widget.parentNode.removeChild(widget);
+	}
+
+	widget = null;
+	iframe = null;
+	ready = false;
+	hookQueue = [];
 };
 
 const trackNavigation = () => {
-	setInterval(() => {
+	if (navigationIntervalId !== null) {
+		return;
+	}
+
+	navigationIntervalId = setInterval(() => {
 		if (document.location.href !== currentPage.href) {
 			pageVisited('url');
 			currentPage.href = document.location.href;
@@ -704,6 +783,10 @@ const init = (url: string) => {
 		return;
 	}
 
+	if (widget) {
+		teardownWidget();
+	}
+
 	config.url = trimmedUrl;
 
 	createWidget(trimmedUrl);