update to xterm.js 4.0.2

ChangeLog.md

@@ -1,4 +1,9 @@
 # Change Log
+## [0.3.0] 2019-10-01
+### Changes
+- Update to xterm.js 4.0.2
+- path to socket.io has changed to /ssh/socket.io **potentially breaking**
+- Update Webpack 
 ## [0.2.9] 2019-06-13
 ### Changes
 - Missing require('fs') in `server/app.js` See issue [#135](../../issues/135)

app/client/public/webssh2.css

@@ -55,7 +55,7 @@
      * The z-index of the helpers must be higher than the canvases in order for
      * IMEs to appear on top.
      */
-    z-index: 10;
+    z-index: 5;
 }
 
 .xterm .xterm-helper-textarea {
@@ -69,7 +69,7 @@
     top: 0;
     width: 0;
     height: 0;
-    z-index: -10;
+    z-index: -5;
     /** Prevent wrapping so the IME appears against the textarea at the correct position */
     white-space: nowrap;
     overflow: hidden;
@@ -150,7 +150,7 @@
     top: 0;
     bottom: 0;
     right: 0;
-    z-index: 100;
+    z-index: 10;
     color: transparent;
 }
 

app/client/src/js/index.js

@@ -1,18 +1,17 @@
 'use strict'
 
 import io from 'socket.io-client'
-import * as Terminal from 'xterm/dist/xterm'
-import * as fit from 'xterm/dist/addons/fit/fit'
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
 import { library, dom } from '@fortawesome/fontawesome-svg-core'
 import { faBars, faClipboard, faDownload, faKey, faCog } from '@fortawesome/free-solid-svg-icons'
 library.add(faBars, faClipboard, faDownload, faKey, faCog)
+
 dom.watch()
 
-require('xterm/dist/xterm.css')
+require('xterm/css/xterm.css')
 require('../css/style.css')
 
-Terminal.applyAddon(fit)
-
 /* global Blob, logBtn, credentialsBtn, reauthBtn, downloadLogBtn */
 var sessionLogEnable = false
 var loggedData = false
@@ -23,19 +22,21 @@ var termid // eslint-disable-line
 // change path here and in the /app/server/app.js line 115
 var socket = io({path: '/ssh/socket.io'})
 var term = new Terminal()
+const fitAddon = new FitAddon();
 // DOM properties
 var status = document.getElementById('status')
 var header = document.getElementById('header')
 var dropupContent = document.getElementById('dropupContent')
 var footer = document.getElementById('footer')
 var terminalContainer = document.getElementById('terminal-container')
+term.loadAddon(fitAddon);
 term.open(terminalContainer)
 term.focus()
-term.fit()
+fitAddon.fit();
 window.addEventListener('resize', resizeScreen, false)
 
 function resizeScreen () {
-  term.fit()
+  fitAddon.fit();
   socket.emit('resize', { cols: term.cols, rows: term.rows })
 }
 
@@ -55,9 +56,7 @@ function resizeScreen () {
   // socket.connect()
 } */
 
-term.on('data', function (data) {
-  socket.emit('data', data)
-})
+term.onData(data => socket.emit('data', data));
 
 socket.on('data', function (data) {
   term.write(data)
@@ -160,9 +159,7 @@ socket.on('reauth', function () {
   (allowreauth) && reauthSession()
 })
 
-term.on('title', function (title) {
-  document.title = title
-})
+term.onTitleChange(title => document.title = title)
 
 // draw/re-draw menu and reattach listeners
 // when dom is changed, listeners are abandonded

app/package.json

@@ -73,12 +73,13 @@
     "snazzy": "^8.0.0",
     "standard": "^12.0.1",
     "style-loader": "^0.23.1",
-    "uglifyjs-webpack-plugin": "^2.1.1",
+    "terser-webpack-plugin": "^2.1.2",
     "url-loader": "^1.1.2",
     "webpack": "^4.28.4",
     "webpack-cli": "^3.2.1",
     "webpack-merge": "^4.2.1",
     "webpack-stream": "^5.2.1",
-    "xterm": "^3.10.1"
+    "xterm": "^4.0.2",
+    "xterm-addon-fit": "^0.2.1"
   }
 }

app/scripts/webpack.prod.js

@@ -1,18 +1,28 @@
 const merge = require('webpack-merge')
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
 const common = require('./webpack.common.js')
+const TerserPlugin = require('terser-webpack-plugin');
 
-module.exports = merge(common, {
-  plugins: [
-    new UglifyJSPlugin({
-      uglifyOptions: {
-        ie8: false,
-        dead_code: true,
-        output: {
-          comments: false,
-          beautify: false
-        }
-      }
-    })
-  ]
+module.exports = merge(common,{
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          ecma: 6,
+          warnings: false,
+          parse: {},
+          compress: {},
+          mangle: true, // Note `mangle.properties` is `false` by default.
+          module: false,
+          output: null,
+          toplevel: false,
+          nameCache: null,
+          ie8: false,
+          keep_classnames: undefined,
+          keep_fnames: false,
+          safari10: false,
+        },
+      }),
+    ],
+  }
 })