update to xterm4

Author: LabhanshAgrawal

lib/components/term-group.js

@@ -87,7 +87,7 @@ class TermGroup_ extends React.PureComponent {
       onResize: this.bind(this.props.onResize, null, uid),
       onTitle: this.bind(this.props.onTitle, null, uid),
       onData: this.bind(this.props.onData, null, uid),
-      onURLAbort: this.bind(this.props.onURLAbort, null, uid),
+      // onURLAbort: this.bind(this.props.onURLAbort, null, uid),
       toggleSearch: this.bind(this.props.toggleSearch, null, uid),
       onContextMenu: this.bind(this.props.onContextMenu, null, uid),
       borderColor: this.props.borderColor,

lib/components/term.js

@@ -1,20 +1,20 @@
 /* global Blob,URL,requestAnimationFrame,ResizeObserver */
 import React from 'react';
 import {Terminal} from 'xterm';
-import * as fit from 'xterm/lib/addons/fit/fit';
-import * as webLinks from 'xterm/lib/addons/webLinks/webLinks';
-import * as search from 'xterm/lib/addons/search';
-import * as winptyCompat from 'xterm/lib/addons/winptyCompat/winptyCompat';
+import {FitAddon} from 'xterm-addon-fit';
+import {WebLinksAddon} from 'xterm-addon-web-links';
+import {SearchAddon} from 'xterm-addon-search';
+import {WebglAddon} from 'xterm-addon-webgl';
 import {clipboard} from 'electron';
 import * as Color from 'color';
 import terms from '../terms';
 import processClipboard from '../utils/paste';
 import SearchBox from './searchBox';
 
-Terminal.applyAddon(fit);
-Terminal.applyAddon(webLinks);
-Terminal.applyAddon(winptyCompat);
-Terminal.applyAddon(search);
+const fitAddon = new FitAddon();
+const webLinksAddon = new WebLinksAddon();
+const searchAddon = new SearchAddon();
+const webglAddon = new WebglAddon();
 
 // map old hterm constants to xterm.js
 const CURSOR_STYLES = {
@@ -73,8 +73,8 @@ const getTermOptions = props => {
     // HACK: Terminal.setOption breaks if we don't apply these in this order
     // TODO: The above notice can be removed once this is addressed:
     // https://github.com/xtermjs/xterm.js/pull/1790#issuecomment-450000121
-    rendererType: useWebGL ? 'webgl' : 'canvas',
-    experimentalCharAtlas: useWebGL ? 'webgl' : 'dynamic',
+    // rendererType: useWebGL ? 'webgl' : 'canvas',
+    // experimentalCharAtlas: useWebGL ? 'webgl' : 'dynamic',
     theme: {
       foreground: props.foregroundColor,
       background: backgroundColor,
@@ -144,38 +144,42 @@ export default class Term extends React.PureComponent {
 
     if (!props.term) {
       this.term.attachCustomKeyEventHandler(this.keyboardHandler);
+      this.term.loadAddon(fitAddon);
+      this.term.loadAddon(webLinksAddon);
+      this.term.loadAddon(searchAddon);
       this.term.open(this.termRef);
-      this.term.webLinksInit();
-      this.term.winptyCompatInit();
+      this.term.loadAddon(webglAddon);
+      // this.term.webLinksInit();
+      // this.term.winptyCompatInit();
     }
 
     if (this.props.isTermActive) {
       this.term.focus();
     }
 
     if (props.onTitle) {
-      this.disposableListeners.push(this.term.addDisposableListener('title', props.onTitle));
+      this.disposableListeners.push(this.term.onTitleChange(props.onTitle));
     }
 
-    if (props.onActive) {
-      this.disposableListeners.push(this.term.addDisposableListener('focus', props.onActive));
-    }
+    // if (props.onActive) {
+    //   this.disposableListeners.push(this.term.addDisposableListener('focus', props.onActive));
+    // }
 
     if (props.onData) {
-      this.disposableListeners.push(this.term.addDisposableListener('data', props.onData));
+      this.disposableListeners.push(this.term.onData(props.onData));
     }
 
     if (props.onResize) {
       this.disposableListeners.push(
-        this.term.addDisposableListener('resize', ({cols, rows}) => {
+        this.term.onResize(({cols, rows}) => {
           props.onResize(cols, rows);
         })
       );
     }
 
     if (props.onCursorMove) {
       this.disposableListeners.push(
-        this.term.addDisposableListener('cursormove', () => {
+        this.term.onCursorMove(() => {
           const cursorFrame = {
             x: this.term._core.buffer.x * this.term._core.renderer.dimensions.actualCellWidth,
             y: this.term._core.buffer.y * this.term._core.renderer.dimensions.actualCellHeight,
@@ -278,7 +282,7 @@ export default class Term extends React.PureComponent {
     if (!this.termWrapperRef) {
       return;
     }
-    this.term.fit();
+    fitAddon.fit();
   }
 
   keyboardHandler(e) {

package.json

@@ -213,7 +213,11 @@
     "stylis": "3.5.0",
     "uuid": "3.1.0",
     "webpack-cli": "3.3.7",
-    "xterm": "https://registry.npmjs.org/@zeit/xterm/-/xterm-3.12.0-1.tgz"
+    "xterm": "4.0.2",
+    "xterm-addon-fit": "^0.2.0",
+    "xterm-addon-search": "^0.2.0",
+    "xterm-addon-webgl": "^0.2.0",
+    "xterm-addon-web-links": "^0.2.0"
   },
   "devDependencies": {
     "@babel/cli": "7.5.5",

yarn.lock

@@ -8672,9 +8672,30 @@ xtend@~2.1.1:
   dependencies:
     object-keys "~0.4.0"
 
-"xterm@https://registry.npmjs.org/@zeit/xterm/-/xterm-3.12.0-1.tgz":
-  version "3.12.0-1"
-  resolved "https://registry.npmjs.org/@zeit/xterm/-/xterm-3.12.0-1.tgz#df7bb98fe53d621c0bfd559d0ae87be401c8f246"
+xterm-addon-fit@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.2.1.tgz#353f43921eb78e3f9ad3f3afbb14e7ac183ca738"
+  integrity sha512-BlR57O3t1/bmVcnS81bn9ZnNf+GiGNbeXdNUKSBa9tKEwNUMcU3S+KFLIRv7rm1Ty0D5pMOu0vbz/RDorKRwKQ==
+
+xterm-addon-search@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/xterm-addon-search/-/xterm-addon-search-0.2.1.tgz#f2c02fa92198d5115bde5cc518bff9d7998f2b9c"
+  integrity sha512-zT2TD0szNIgYYMJuCXMyjY2oF5YzhJ4QqKDO/KyPCm+d67x/7DvPxcg4DWkrPHhBc14jvo0iaTqpdPnSAUvhgg==
+
+xterm-addon-web-links@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/xterm-addon-web-links/-/xterm-addon-web-links-0.2.1.tgz#6d1f2ce613e09870badf17615e7a1170a31542b2"
+  integrity sha512-2KnHtiq0IG7hfwv3jw2/jQeH1RBk2d5CH4zvgwQe00rLofSJqSfgnJ7gwowxxpGHrpbPr6Lv4AmH/joaNw2+HQ==
+
+xterm-addon-webgl@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/xterm-addon-webgl/-/xterm-addon-webgl-0.2.1.tgz#86452460601dc29b7d907dbcd0b8a058bcbc6bcf"
+  integrity sha512-MZyh/KGbOBEEOqGpgilHuKHSj0OCXiZsBedTtLesHNerc79710shUHnfBlk31ggYU9G/WJ91qoNNux3ek5QBPA==
+
+xterm@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.0.2.tgz#c6a1b9586c0786627625e2ee9e78ad519dbc8c99"
+  integrity sha512-NIr11b6C782TZznU8e6K/IMfmwlWMWRI6ba9GEDG9uX25SadkpjoMnzvxOS0Z/15sfrbn0rghPiarGDmmP0uhQ==
 
 y18n@^3.2.1:
   version "3.2.1"