Update xterm to v3.8.0 (#3255)

lib/components/style-sheet.js

@@ -95,13 +95,22 @@ export default class StyleSheet extends React.PureComponent {
           left: -9999em;
         }
 
+        .xterm {
+          cursor: text;
+        }
+
         .xterm.enable-mouse-events {
           /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
           cursor: default;
         }
 
-        .xterm:not(.enable-mouse-events) {
-          cursor: text;
+        .xterm.xterm-cursor-pointer {
+          cursor: pointer;
+        }
+
+        .xterm.xterm-cursor-crosshair {
+          /* Column selection mode */
+          cursor: crosshair;
         }
 
         .xterm .xterm-accessibility,

lib/components/term.js

@@ -77,6 +77,7 @@ export default class Term extends React.PureComponent {
     this.onTermWrapperRef = this.onTermWrapperRef.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
     this.termOptions = {};
+    this.disposableListeners = [];
   }
 
   componentDidMount() {
@@ -100,35 +101,39 @@ export default class Term extends React.PureComponent {
     this.onOpen(this.termOptions);
 
     if (props.onTitle) {
-      this.term.on('title', props.onTitle);
+      this.disposableListeners.push(this.term.addDisposableListener('title', props.onTitle));
     }
 
     if (props.onActive) {
-      this.term.on('focus', props.onActive);
+      this.disposableListeners.push(this.term.addDisposableListener('focus', props.onActive));
     }
 
     if (props.onData) {
-      this.term.on('data', props.onData);
+      this.disposableListeners.push(this.term.addDisposableListener('data', props.onData));
     }
 
     if (props.onResize) {
-      this.term.on('resize', ({cols, rows}) => {
-        props.onResize(cols, rows);
-      });
+      this.disposableListeners.push(
+        this.term.addDisposableListener('resize', ({cols, rows}) => {
+          props.onResize(cols, rows);
+        })
+      );
     }
 
     if (props.onCursorMove) {
-      this.term.on('cursormove', () => {
-        const cursorFrame = {
-          x: this.term.buffer.x * this.term.renderer.dimensions.actualCellWidth,
-          y: this.term.buffer.y * this.term.renderer.dimensions.actualCellHeight,
-          width: this.term.renderer.dimensions.actualCellWidth,
-          height: this.term.renderer.dimensions.actualCellHeight,
-          col: this.term.buffer.y,
-          row: this.term.buffer.x
-        };
-        props.onCursorMove(cursorFrame);
-      });
+      this.disposableListeners.push(
+        this.term.addDisposableListener('cursormove', () => {
+          const cursorFrame = {
+            x: this.term.buffer.x * this.term.renderer.dimensions.actualCellWidth,
+            y: this.term.buffer.y * this.term.renderer.dimensions.actualCellHeight,
+            width: this.term.renderer.dimensions.actualCellWidth,
+            height: this.term.renderer.dimensions.actualCellHeight,
+            col: this.term.buffer.y,
+            row: this.term.buffer.x
+          };
+          props.onCursorMove(cursorFrame);
+        })
+      );
     }
 
     window.addEventListener('resize', this.onWindowResize, {
@@ -142,18 +147,11 @@ export default class Term extends React.PureComponent {
     terms[this.props.uid] = this;
   }
 
-  onOpen(termOptions) {
+  onOpen() {
     // we need to delay one frame so that styles
     // get applied and we can make an accurate measurement
     // of the container width and height
     requestAnimationFrame(() => {
-      // at this point it would make sense for character
-      // measurement to have taken place but it seems that
-      // xterm.js might be doing this asynchronously, so
-      // we force it instead
-      // eslint-disable-next-line no-debugger
-      //debugger;
-      this.term.charMeasure.measure(termOptions);
       this.fitResize();
     });
   }
@@ -261,7 +259,6 @@ export default class Term extends React.PureComponent {
 
     if (!this.props.isTermActive && nextProps.isTermActive) {
       requestAnimationFrame(() => {
-        this.term.charMeasure.measure(this.termOptions);
         this.fitResize();
       });
     }
@@ -272,10 +269,6 @@ export default class Term extends React.PureComponent {
       this.props.lineHeight !== nextProps.lineHeight ||
       this.props.letterSpacing !== nextProps.letterSpacing
     ) {
-      // invalidate xterm cache about how wide each
-      // character is
-      this.term.charMeasure.measure(this.termOptions);
-
       // resize to fit the container
       this.fitResize();
     }
@@ -301,7 +294,8 @@ export default class Term extends React.PureComponent {
     // instead of invoking `destroy`, since it will make the
     // term insta un-attachable in the future (which we need
     // to do in case of splitting, see `componentDidMount`
-    ['title', 'focus', 'data', 'resize', 'cursormove'].forEach(type => this.term.removeAllListeners(type));
+    this.disposableListeners.forEach(handler => handler.dispose());
+    this.disposableListeners = [];
 
     window.removeEventListener('resize', this.onWindowResize, {
       passive: true

package.json

@@ -207,7 +207,7 @@
     "styled-jsx": "2.2.6",
     "stylis": "3.5.0",
     "uuid": "3.1.0",
-    "xterm": "3.4.1"
+    "xterm": "3.8.0"
   },
   "devDependencies": {
     "ava": "0.25.0",

yarn.lock

@@ -6693,9 +6693,9 @@ xtend@~2.1.1:
   dependencies:
     object-keys "~0.4.0"
 
-xterm@3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.4.1.tgz#12452979ea2db3371f8195832d7407abba988980"
+xterm@3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.8.0.tgz#55d1de518bdc9c9793823f5e4e97d6898972938d"
 
 y18n@^3.2.1:
   version "3.2.1"