fix(Desktop): Clean up document event listeners to avoid memory leaks

stencila · Jun 9, 2021 · 13bd3c1 · 13bd3c1
1 parent 363730a
commit 13bd3c1
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 5 deletions.
diff --git a/desktop/src/preload/preload.ts b/desktop/src/preload/preload.ts
@@ -20,6 +20,15 @@ const apis: IpcRendererAPI = {
       ipcRenderer.on(channel, (_event, ...args) => func(...args))
     }
   },
+  remove: (channel: Channel, func: Handler) => {
+    if (isChannel(channel)) {
+      // Deliberately strip event as it includes `sender`
+      ipcRenderer.removeListener(channel, (_event, ...args) => func(...args))
+    }
+  },
+  removeAll: (channel: Channel) => {
+    ipcRenderer.removeAllListeners(channel)
+  },
 }
 
 // Expose protected methods that allow the renderer process to use

diff --git a/desktop/src/preload/types.d.ts b/desktop/src/preload/types.d.ts
@@ -16,6 +16,8 @@ export interface IpcRendererAPI {
   invoke: Invoke
   send(channel: Channel, ...args: unknown[]): void
   receive: (channel: Channel, func: Handler) => void
+  remove: (channel: Channel, func: Handler) => void
+  removeAll: (channel: Channel) => void
 
   /** @return A function that removes this listener. */
   // on(channel: string, listener: (...args: unknown[]) => void): () => void;

diff --git a/desktop/src/renderer/components/app-document/app-document-editor/app-document-editor.tsx b/desktop/src/renderer/components/app-document/app-document-editor/app-document-editor.tsx
@@ -49,11 +49,15 @@ export class AppDocumentEditor {
     })
   }
 
-  private unsubscribeFromDocument = (documentId = this.documentId) =>
-    window.api.invoke(CHANNEL.UNSUBSCRIBE_DOCUMENT, {
+  private unsubscribeFromDocument = (documentId = this.documentId) => {
+    window.api.removeAll(CHANNEL.SAVE_ACTIVE_DOCUMENT)
+    window.api.removeAll(CHANNEL.GET_DOCUMENT_CONTENTS)
+
+    return window.api.invoke(CHANNEL.UNSUBSCRIBE_DOCUMENT, {
       documentId,
       topics: ['modified'],
     })
+  }
 
   private fileFormatToLanguage = (): string => {
     switch (this.file?.format) {

diff --git a/desktop/src/renderer/components/app-document/app-document-preview/app-document-preview.tsx b/desktop/src/renderer/components/app-document/app-document-preview/app-document-preview.tsx
@@ -40,11 +40,13 @@ export class AppDocumentPreview {
     })
   }
 
-  private unsubscribeFromDocument = (documentId = this.documentId) =>
-    window.api.invoke(CHANNEL.UNSUBSCRIBE_DOCUMENT, {
+  private unsubscribeFromDocument = (documentId = this.documentId) => {
+    window.api.removeAll(CHANNEL.DOCUMENT_GET_PREVIEW)
+    return window.api.invoke(CHANNEL.UNSUBSCRIBE_DOCUMENT, {
       documentId,
       topics: ['encoded:html'],
     })
+  }
 
   componentWillLoad() {
     this.subscribeToDocument()

diff --git a/desktop/src/renderer/components/app-project/app-project-root/app-project-root.tsx b/desktop/src/renderer/components/app-project/app-project-root/app-project-root.tsx
@@ -4,7 +4,7 @@ import { store } from '../../../store'
 import { initPane } from '../../../store/documentPane/documentPaneActions'
 import { fetchProject } from '../../../store/project/projectActions'
 import { ProjectRouter } from '../projectRouter'
-import { listenForFileEvents } from './projectEvents'
+import { listenForFileEvents, removeFileEventListener } from './projectEvents'
 
 @Component({
   tag: 'app-project-root',
@@ -21,6 +21,10 @@ export class AppProjectRoot {
     listenForFileEvents()
   }
 
+  disconnectedCallback() {
+    removeFileEventListener()
+  }
+
   render() {
     return (
       <div class="projectWindow">

diff --git a/desktop/src/renderer/components/app-project/app-project-root/projectEvents.ts b/desktop/src/renderer/components/app-project/app-project-root/projectEvents.ts
@@ -9,3 +9,7 @@ export const listenForFileEvents = () => {
     store.dispatch(projectActions.updateProjectFiles(e.files))
   })
 }
+
+export const removeFileEventListener = () => {
+  window.api.removeAll(CHANNEL.GET_PROJECT_FILES)
+}