Bump xterm from 3.4.0 to 4.5.0 (#5066)

Also, migrate `xterm/lib/addons/fit/fit` to `xterm-addon-fit`.

angular.json

@@ -75,7 +75,7 @@
               "node_modules/highlight.js/styles/github.css",
               "node_modules/material-design-icons/iconfont/material-icons.css",
               "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
-              "node_modules/xterm/dist/xterm.css",
+              "node_modules/xterm/css/xterm.css",
               "node_modules/c3/c3.min.css",
               "src/app/frontend/index.scss"
             ],

package-lock.json

@@ -26772,9 +26772,14 @@
       "dev": true
     },
     "xterm": {
-      "version": "3.14.5",
-      "resolved": "https://registry.npmjs.org/xterm/-/xterm-3.14.5.tgz",
-      "integrity": "sha512-DVmQ8jlEtL+WbBKUZuMxHMBgK/yeIZwkXB81bH+MGaKKnJGYwA+770hzhXPfwEIokK9On9YIFPRleVp/5G7z9g=="
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-4.5.0.tgz",
+      "integrity": "sha512-4t12tsvtYnv13FBJwewddxdI/j4kSonmbQQv50j34R/rPIFbUNGtptbprmuUlTDAKvHLMDZ/Np2XcpNimga/HQ=="
+    },
+    "xterm-addon-fit": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.3.0.tgz",
+      "integrity": "sha512-kvkiqHVrnMXgyCH9Xn0BOBJ7XaWC/4BgpSWQy3SueqximgW630t/QOankgqkvk11iTOCwWdAY9DTyQBXUMN3lw=="
     },
     "y18n": {
       "version": "4.0.0",

package.json

@@ -134,7 +134,8 @@
     "truncate-url": "1.0.0",
     "tslib": "1.11.1",
     "web-animations-js": "2.3.2",
-    "xterm": "3.14.5",
+    "xterm": "4.5.0",
+    "xterm-addon-fit": "0.3.0",
     "zone.js": "0.10.2"
   },
   "devDependencies": {

src/app/frontend/shell/component.ts

@@ -34,7 +34,7 @@ import {debounce} from 'lodash';
 import {ReplaySubject, Subject, Subscription} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {Terminal} from 'xterm';
-import {fit} from 'xterm/lib/addons/fit/fit';
+import {FitAddon} from 'xterm-addon-fit';
 
 import {EndpointManager, Resource, Utility} from '../common/services/resource/endpoint';
 import {NamespacedResourceService} from '../common/services/resource/resource';
@@ -170,9 +170,11 @@ export class ShellComponent implements AfterViewInit, OnDestroy {
       cursorBlink: true,
     });
 
+    const fitAddon = new FitAddon();
+    this.term.loadAddon(fitAddon);
     this.term.open(this.anchorRef.nativeElement);
     this.debouncedFit_ = debounce(() => {
-      fit(this.term);
+      fitAddon.fit();
       this.cdr_.markForCheck();
     }, 100);
     this.debouncedFit_();
@@ -182,10 +184,10 @@ export class ShellComponent implements AfterViewInit, OnDestroy {
       this.handleConnectionMessage(frame);
     });
 
-    this.term.on('data', this.onTerminalSendString.bind(this));
-    this.term.on('resize', this.onTerminalResize.bind(this));
-    this.term.on('key', (_, event) => {
-      this.keyEvent$_.next(event);
+    this.term.onData(this.onTerminalSendString.bind(this));
+    this.term.onResize(this.onTerminalResize.bind(this));
+    this.term.onKey(event => {
+      this.keyEvent$_.next(event.domEvent);
     });
 
     this.cdr_.markForCheck();