update xterm

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wetty",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "WeTTY = Web + TTY. Terminal access in browser over http/https",
   "homepage": "https://github.com/butlerx/wetty",
   "repository": {
@@ -71,7 +71,8 @@
     "source-map-loader": "^0.2.4",
     "toastify-js": "^1.6.1",
     "winston": "^3.2.1",
-    "xterm": "^3.14.5",
+    "xterm": "^4.8.1",
+    "xterm-addon-fit": "^0.4.0",
     "yargs": "^14.0.0"
   },
   "devDependencies": {

src/client/index.ts

@@ -1,17 +1,17 @@
 import { Terminal } from 'xterm';
 import { isNull } from 'lodash';
-
+import { FitAddon } from 'xterm-addon-fit';
 import { dom, library } from '@fortawesome/fontawesome-svg-core';
 import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
 import Toastify from 'toastify-js';
 import * as fileType from 'file-type';
+
 import { socket } from './socket';
 import { overlay, terminal } from './elements';
 import { FileDownloader } from './download';
 import verifyPrompt from './verify';
 import disconnect from './disconnect';
 import mobileKeyboard from './mobile';
-import resize from './resize';
 import loadOptions from './options';
 import { copySelected, copyShortcut } from './copyToClipboard';
 import './wetty.scss';
@@ -24,7 +24,13 @@ dom.watch();
 socket.on('connect', () => {
   const term = new Terminal();
   if (isNull(terminal)) return;
+  const fitAddon = new FitAddon();
+  term.loadAddon(fitAddon);
   term.open(terminal);
+  const resize = (): void => {
+    fitAddon.fit();
+    socket.emit('resize', { cols: term.cols, rows: term.rows });
+  };
 
   const options = loadOptions();
   Object.entries(options).forEach(([key, value]) => {
@@ -45,7 +51,7 @@ socket.on('connect', () => {
           const value = updated[key];
           term.setOption(key, value);
         });
-        resize(term)();
+        resize();
       } catch {
         // skip
         editor.classList.add('error');
@@ -73,8 +79,8 @@ socket.on('connect', () => {
     false
   );
 
-  window.onresize = resize(term);
-  resize(term)();
+  window.onresize = resize;
+  resize();
   term.focus();
   mobileKeyboard();
 
@@ -101,7 +107,8 @@ socket.on('connect', () => {
     }
     // Check if the buffer is ASCII
     // Ref: https://stackoverflow.com/a/14313213
-    else if (/^[\x00-\xFF]*$/.test(fileCharacters)) { // eslint-disable-line no-control-regex
+    // eslint-disable-next-line no-control-regex
+    else if (/^[\x00-\xFF]*$/.test(fileCharacters)) {
       mimeType = 'text/plain';
       fileExt = 'txt';
     }
@@ -128,10 +135,10 @@ socket.on('connect', () => {
     }).showToast();
   });
 
-  term.on('data', data => {
+  term.onData(data => {
     socket.emit('input', data);
   });
-  term.on('resize', size => {
+  term.onResize(size => {
     socket.emit('resize', size);
   });
   socket
@@ -143,7 +150,7 @@ socket.on('connect', () => {
     })
     .on('login', () => {
       term.writeln('');
-      resize(term)();
+      resize();
     })
     .on('logout', disconnect)
     .on('disconnect', disconnect)

src/client/resize.ts

@@ -1,10 +0,0 @@
-import { Terminal } from 'xterm';
-import { fit } from 'xterm/lib/addons/fit/fit';
-import { socket } from './socket';
-
-export default function resize(term: Terminal): Function {
-  return (): void => {
-    fit(term);
-    socket.emit('resize', { cols: term.cols, rows: term.rows });
-  };
-}

src/client/wetty.scss

@@ -1,4 +1,4 @@
-@import '~xterm/dist/xterm';
+@import '~xterm/css/xterm';
 @import '~toastify-js/src/toastify.css';
 
 $black: #000;