Update xterm.js 2.7.0 => 4.11.0

Makefile

@@ -49,8 +49,8 @@ bindata/static/css/index.css: bindata/static/css resources/index.css
 bindata/static/css/xterm_customize.css: bindata/static/css resources/xterm_customize.css
 	cp resources/xterm_customize.css bindata/static/css/xterm_customize.css
 
-bindata/static/css/xterm.css: bindata/static/css js/node_modules/xterm/dist/xterm.css
-	cp js/node_modules/xterm/dist/xterm.css bindata/static/css/xterm.css
+bindata/static/css/xterm.css: bindata/static/css js/node_modules/xterm/css/xterm.css
+	cp js/node_modules/xterm/css/xterm.css bindata/static/css/xterm.css
 
 js/node_modules/xterm/dist/xterm.css:
 	cd js && \

js/package-lock.json

@@ -1453,9 +1453,14 @@
             "dev": true
         },
         "xterm": {
-            "version": "2.8.1",
-            "resolved": "https://registry.npmjs.org/xterm/-/xterm-2.8.1.tgz",
-            "integrity": "sha512-AuqLOWpprmhSe4TcGE6Gh2uwkR0wUC95V0Q736OFUmG+84W+w+g6RzcgVhrbOTo/Fzcq9i0TRR5nYksRt2DSIQ=="
+            "version": "4.11.0",
+            "resolved": "https://registry.npmjs.org/xterm/-/xterm-4.11.0.tgz",
+            "integrity": "sha512-NeJH909WTO2vth/ZlC0gkP3AGzupbvVHVlmtrpBw56/sGFXaF9bNdKgqKa3tf8qbGvXMzL2JhCcHVklqFztIRw=="
+        },
+        "xterm-addon-fit": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz",
+            "integrity": "sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ=="
         },
         "yocto-queue": {
             "version": "0.1.0",

js/package.json

@@ -13,6 +13,7 @@
         "css-loader": "^5.2.1",
         "libapps": "github:yudai/libapps#release-hterm-1.70",
         "style-loader": "^2.0.0",
-        "xterm": "^2.7.0"
+        "xterm": "^4.11.0",
+        "xterm-addon-fit": "^0.5.0"
     }
 }

js/src/xterm.ts

@@ -1,40 +1,39 @@
-import * as bare from "xterm";
+import { Terminal, IDisposable } from "xterm";
+import { FitAddon } from 'xterm-addon-fit';
 import { lib } from "libapps"
 
-
-bare.loadAddon("fit");
-
 export class Xterm {
     elem: HTMLElement;
-    term: bare;
+    term: Terminal;
     resizeListener: () => void;
     decoder: lib.UTF8Decoder;
 
     message: HTMLElement;
     messageTimeout: number;
     messageTimer: NodeJS.Timeout;
-
+    onResizeHandler: IDisposable;
+    onDataHandler: IDisposable;
 
     constructor(elem: HTMLElement) {
         this.elem = elem;
-        this.term = new bare();
+        this.term = new Terminal();
+        const fitAddon = new FitAddon();
+        this.term.loadAddon(fitAddon);
 
         this.message = elem.ownerDocument.createElement("div");
         this.message.className = "xterm-overlay";
         this.messageTimeout = 2000;
 
         this.resizeListener = () => {
-            this.term.fit();
+            fitAddon.fit();
             this.term.scrollToBottom();
             this.showMessage(String(this.term.cols) + "x" + String(this.term.rows), this.messageTimeout);
         };
 
-        this.term.on("open", () => {
-            this.resizeListener();
-            window.addEventListener("resize", () => { this.resizeListener(); });
-        });
-
-        this.term.open(elem, true);
+        this.term.open(elem);
+        this.term.focus();
+        this.resizeListener();
+        window.addEventListener("resize", () => { this.resizeListener(); });
 
         this.decoder = new lib.UTF8Decoder()
     };
@@ -75,21 +74,21 @@ export class Xterm {
     };
 
     onInput(callback: (input: string) => void) {
-        this.term.on("data", (data) => {
+        this.onDataHandler = this.term.onData((data) => {
             callback(data);
         });
 
     };
 
     onResize(callback: (colmuns: number, rows: number) => void) {
-        this.term.on("resize", (data) => {
-            callback(data.cols, data.rows);
+        this.onResizeHandler = this.term.onResize(() => {
+            callback(this.term.cols, this.term.rows);
         });
     };
 
     deactivate(): void {
-        this.term.off("data");
-        this.term.off("resize");
+        this.onDataHandler.dispose();
+        this.onResizeHandler.dispose();
         this.term.blur();
     }
 
@@ -100,6 +99,6 @@ export class Xterm {
 
     close(): void {
         window.removeEventListener("resize", this.resizeListener);
-        this.term.destroy();
+        this.term.dispose();
     }
 }