unload terminals when they go out of view to save memory

src/main.tsx

@@ -216,11 +216,12 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
     }
 
     visibilityChanged(vis : boolean) : void {
-        if (vis && !this.termLoaded.get()) {
+        let curVis = this.termLoaded.get();
+        if (vis && !curVis) {
             this.loadTerminal();
         }
-        else if (!vis && this.termLoaded.get()) {
-            let {line} = this.props;
+        else if (!vis && curVis) {
+            this.unloadTerminal();
         }
     }
 
@@ -240,6 +241,22 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
         sw.connectElem(termElem, cmd, this.props.width);
         mobx.action(() => this.termLoaded.set(true))();
     }
+
+    unloadTerminal() : void {
+        let {sw, line} = this.props;
+        let model = GlobalModel;
+        let cmd = model.getCmd(line);
+        if (cmd == null) {
+            return;
+        }
+        let termId = "term-" + getLineId(line);
+        sw.disconnectElem(line.cmdid);
+        mobx.action(() => this.termLoaded.set(false))();
+        let termElem = document.getElementById(termId);
+        if (termElem != null) {
+            termElem.replaceChildren();
+        }
+    }
     
     componentDidMount() {
         let {line} = this.props;

src/model.ts

@@ -329,7 +329,7 @@ class ScreenWindow {
 
     disconnectElem(cmdId : string) {
         let termWrap = this.terms[cmdId];
-        if (cmdId != null) {
+        if (termWrap != null) {
             termWrap.dispose();
             delete this.terms[cmdId];
         }

src/term.ts

@@ -219,10 +219,15 @@ class TermWrap {
                 }
                 this.dataUpdates = [];
             }, delayMs);
+        }).catch((e) => {
+            console.log("error reloading terminal", e);
         });
     }
 
     updatePtyData(pos : number, data : Uint8Array) {
+        if (this.terminal == null) {
+            return;
+        }
         if (this.loadError.get()) {
             return;
         }