Allow renderer to be swapped in and out at runtime

Fixes #1589

src/renderer/BaseRenderLayer.ts

@@ -36,6 +36,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._container.appendChild(this._canvas);
   }
 
+  public dispose(): void {
+    this._container.removeChild(this._canvas);
+  }
+
   private _initCanvas(): void {
     this._ctx = this._canvas.getContext('2d', {alpha: this._alpha});
     // Draw the background if this is an opaque layer

src/renderer/Renderer.ts

@@ -76,6 +76,11 @@ export class Renderer extends EventEmitter implements IRenderer {
     }
   }
 
+  public dispose(): void {
+    super.dispose();
+    this._renderLayers.forEach(l => l.dispose());
+  }
+
   public onIntersectionChange(entry: IntersectionObserverEntry): void {
     this._isPaused = entry.intersectionRatio === 0;
     if (!this._isPaused && this._needsFullRefresh) {

src/renderer/Types.ts

@@ -66,7 +66,7 @@ export interface IRenderDimensions {
   actualCellHeight: number;
 }
 
-export interface IRenderLayer {
+export interface IRenderLayer extends IDisposable {
   /**
    * Called when the terminal loses focus.
    */

src/renderer/dom/DomRenderer.ts

@@ -81,6 +81,15 @@ export class DomRenderer extends EventEmitter implements IRenderer {
     this._terminal.screenElement.appendChild(this._selectionContainer);
   }
 
+  public dispose(): void {
+    this._terminal.element.classList.remove(TERMINAL_CLASS_PREFIX + this._terminalClass);
+    this._terminal.screenElement.removeChild(this._rowContainer);
+    this._terminal.screenElement.removeChild(this._selectionContainer);
+    this._terminal.screenElement.removeChild(this._themeStyleElement);
+    this._terminal.screenElement.removeChild(this._dimensionsStyleElement);
+    super.dispose();
+  }
+
   private _updateDimensions(): void {
     this.dimensions.scaledCharWidth = this._terminal.charMeasure.width * window.devicePixelRatio;
     this.dimensions.scaledCharHeight = this._terminal.charMeasure.height * window.devicePixelRatio;