Correctly dispose of Renderer and ScreenDprMonitor

src/renderer/Renderer.ts

@@ -62,12 +62,14 @@ export class Renderer extends EventEmitter implements IRenderer {
     this._renderDebouncer = new RenderDebouncer(this._terminal, this._renderRows.bind(this));
     this._screenDprMonitor = new ScreenDprMonitor();
     this._screenDprMonitor.setListener(() => this.onWindowResize(window.devicePixelRatio));
+    this.register(this._screenDprMonitor);
 
     // Detect whether IntersectionObserver is detected and enable renderer pause
     // and resume based on terminal visibility if so
     if ('IntersectionObserver' in window) {
       const observer = new IntersectionObserver(e => this.onIntersectionChange(e[0]), {threshold: 0});
       observer.observe(this._terminal.element);
+      this.register({ dispose: () => observer.disconnect() });
     }
   }
 

src/renderer/Types.ts

@@ -4,7 +4,7 @@
  */
 
 import { ITerminal } from '../Types';
-import { IEventEmitter, ITheme } from 'xterm';
+import { IEventEmitter, ITheme, IDisposable } from 'xterm';
 import { IColorSet } from '../shared/Types';
 
 /**
@@ -24,10 +24,11 @@ export const enum FLAGS {
  * Note that IRenderer implementations should emit the refresh event after
  * rendering rows to the screen.
  */
-export interface IRenderer extends IEventEmitter {
+export interface IRenderer extends IEventEmitter, IDisposable {
   dimensions: IRenderDimensions;
   colorManager: IColorManager;
 
+  dispose(): void;
   setTheme(theme: ITheme): IColorSet;
   onWindowResize(devicePixelRatio: number): void;
   onResize(cols: number, rows: number): void;