refactor: pull in changes from mv3-ltl branch (#193)

* refactor: pull in changes from mv3-ltl branch

* chore: remove null actualPort spread

---------

Co-authored-by: arkon <arkon@users.noreply.github.com>

Author: arkon

src/scripts/chat-background.ts

@@ -26,14 +26,25 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 });
 
 chrome.runtime.onConnect.addListener(hc => {
-  // frameId and tabId should be int
   const { frameId, tabId } = JSON.parse(hc.name) as { frameId: number, tabId: number };
   const interceptorPort = chrome.tabs.connect(tabId, { frameId });
-  interceptorPort.onMessage.addListener(msg => {
+
+  const onInterceptorMessage = (msg: any): void => {
     hc.postMessage(msg);
+  };
+  interceptorPort.onMessage.addListener(onInterceptorMessage);
+  interceptorPort.onDisconnect.addListener(() => {
+    interceptorPort.onMessage.removeListener(onInterceptorMessage);
+    hc.disconnect();
   });
-  hc.onMessage.addListener(msg => {
+
+  const onHcMessage = (msg: any): void => {
     interceptorPort.postMessage(msg);
+  };
+  hc.onMessage.addListener(onHcMessage);
+  hc.onDisconnect.addListener(() => {
+    hc.onMessage.removeListener(onHcMessage);
+    interceptorPort.disconnect();
   });
 });
 

src/scripts/chat-injector.ts

@@ -17,11 +17,18 @@ const hcWarning = 'An existing HyperChat button has been detected. This ' +
   'Having multiple instances of the same scripts running WILL cause ' +
   'problems such as chat messages not loading.';
 
+const getScriptURL = (path: string): string => {
+  if (isLiveTL) {
+    return chrome.runtime.getURL('submodules/chat/src/scripts/' + path);
+  }
+  return chrome.runtime.getURL('scripts/' + path);
+};
+
 const chatLoaded = async (): Promise<void> => {
   if (!isLiveTL && checkInjected(hcWarning)) return;
 
   const metagetter = document.createElement('script');
-  metagetter.src = chrome.runtime.getURL('scripts/chat-metagetter.js');
+  metagetter.src = getScriptURL('chat-metagetter.js');
   const ytcfg: any = await new Promise((resolve) => {
     window.addEventListener('fetchMeta', (event) => {
       resolve(JSON.parse((event as any).detail as string));
@@ -39,7 +46,7 @@ const chatLoaded = async (): Promise<void> => {
     processSentMessage((d as CustomEvent).detail);
   });
   const script = document.createElement('script');
-  script.src = chrome.runtime.getURL('scripts/chat-interceptor.js');
+  script.src = getScriptURL('chat-interceptor.js');
   document.body.appendChild(script);
 
   // Handle initial data

src/ts/chat-utils.ts

@@ -70,24 +70,30 @@ export const checkInjected = (error: string): boolean => {
   return false;
 };
 
-export const useReconnect = <T extends Chat.Port>(connect: () => T): T & { destroy: () => void } => {
-  let actualPort = connect();
-  const onDisconnect = (): void => {
-    actualPort = connect();
-    actualPort.onDisconnect.addListener(onDisconnect);
+type ReconnectingPort<T extends Chat.Port> =
+  Partial<Pick<T, 'name' | 'disconnect' | 'postMessage' | 'onMessage' | 'onDisconnect'>> &
+  { destroy: () => void };
+
+export const useReconnect = <T extends Chat.Port>(connect: () => Promise<T>): ReconnectingPort<T> => {
+  let actualPort: T | null = null;
+
+  const doConnect = async (): Promise<void> => {
+    actualPort = await connect();
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    actualPort.onDisconnect.addListener(doConnect);
   };
-  actualPort.onDisconnect.addListener(onDisconnect);
+  void doConnect();
 
   return {
-    ...actualPort,
-    get name() { return actualPort.name; },
-    disconnect(...args) { return actualPort.disconnect(...args); },
-    postMessage(...args) { return actualPort.postMessage(...args); },
-    get onMessage() { return actualPort.onMessage; },
-    get onDisconnect() { return actualPort.onDisconnect; },
+    get name() { return actualPort?.name; },
+    disconnect(...args) { return actualPort?.disconnect(...args); },
+    postMessage(...args) { return actualPort?.postMessage(...args); },
+    get onMessage() { return actualPort?.onMessage; },
+    get onDisconnect() { return actualPort?.onDisconnect; },
     destroy: () => {
-      actualPort.onDisconnect.removeListener(onDisconnect);
-      actualPort.disconnect();
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      actualPort?.onDisconnect.removeListener(doConnect);
+      actualPort?.disconnect();
     }
   };
 };