Updated to Xterm 4.2.0.

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Unreleased
 
+* Updated to Xterm 4.2.0.
 * Switched to node-pty-prebuilt-multiarch (thanks @the-j0k3r, @ozno).
 * Updated CircleCI configuration for CircleCI 2.0.
 

lib/terminal-session.js

@@ -25,19 +25,17 @@ export default class TerminalSession {
   handleEvents() {
 
     // Process Terminal Input Events
-    this.xterm.on('data', (data) => {
-      return this.pty.write(data);
-    });
+    this.xterm.onData(data => this.pty.write(data));
 
     // Process Terminal Output Events
-    this.pty.on('data', (data) => {
+    this.pty.onData((data) => {
       if (this.xterm.element) {
         return this.xterm.write(data);
       }
     });
 
     // Process Terminal Exit Events
-    this.pty.on('exit', this.destroy.bind(this));
+    this.pty.onExit(this.destroy.bind(this));
 
   }
 
@@ -94,7 +92,7 @@ export default class TerminalSession {
     if (this.pty) this.pty.kill();
 
     // Destroy the Terminal Instance
-    if (this.xterm) this.xterm.destroy();
+    if (this.xterm) this.xterm.dispose();
 
     // Notify any observers that this session is being destroyed.
     this.emitter.emit('did-destroy', this);

lib/terminal-view.js

@@ -2,7 +2,7 @@
 /** @jsx etch.dom */
 
 import { CompositeDisposable } from 'atom';
-import * as fit from 'xterm/lib/addons/fit/fit';
+import { FitAddon } from 'xterm-addon-fit';
 import etch from 'etch';
 import ThemeMatcher from './theme-matcher';
 
@@ -14,14 +14,19 @@ export default class TerminalView {
     this.disposables = new CompositeDisposable();
     this.session = session;
 
+    // Load the Fit Addon
+    this.fitAddon = new FitAddon();
+    this.session.xterm.loadAddon(this.fitAddon);
+    this.disposables.add(this.fitAddon);
+
     //
     // Observe the Session to know when it is destroyed so that we can
     // clean up our state (i.e. remove event observers).
     //
     this.session.onDidDestroy(this.destroy.bind(this));
 
     // TODO: Documentation says this should be set for Atom... Research!
-    // etch.setScheduler(atom.views);
+    etch.setScheduler(atom.views);
     etch.initialize(this);
 
     this.observeResizeEvents();
@@ -66,6 +71,33 @@ export default class TerminalView {
     this.resizeObserver.observe(this.element);
   }
 
+  resizeTerminalToFitContainer() {
+    if (!this.session && !this.session.pty && !this.session.xterm) {
+      return;
+    }
+
+    // Set padding and resize the terminal to fit its container (as best as possible)
+    this.session.xterm.element.style.padding = `${TERMINAL_PADDING}px`;
+    try { this.fitAddon.fit()} catch(error) { } // TODO: Yuck
+
+    // Check the new size and add additional padding to the top of the
+    // terminal so that it fills all available space.
+    // TODO: Extract this into a new calculatePadding() or something...
+    const elementStyles = getComputedStyle(this.element);
+    const xtermElementStyles = getComputedStyle(this.session.xterm.element);
+    const elementHeight = parseInt(elementStyles.height, 10);
+    const xtermHeight = parseInt(xtermElementStyles.height, 10);
+    const newHeight = elementHeight - xtermHeight + TERMINAL_PADDING;
+
+    if (!isNaN(newHeight)) {
+      this.fitAddon.fit();
+      this.session.xterm.element.style.paddingBottom = `${newHeight}px`;
+    }
+
+    // Update Pseudoterminal Process w/New Dimensions
+    this.session.pty.resize(this.session.xterm.cols, this.session.xterm.rows);
+  }
+
   //
   // Resizes the terminal instance to fit its parent container. Once the new
   // dimensions are established, the calculated columns and rows are passed to
@@ -76,28 +108,7 @@ export default class TerminalView {
       this.openTerminal();
     }
 
-    // TODO: Move this to resizeTerminalToFitContainer()
-    if (this.session && this.session.pty && this.session.xterm) {
-
-      // Set padding and resize the terminal to fit its container (as best as possible)
-      this.session.xterm.element.style.padding = `${TERMINAL_PADDING}px`;
-      fit.fit(this.session.xterm);
-
-      // Check the new size and add additional padding to the top of the
-      // terminal so that it fills all available space.
-      // TODO: Extract this into a new calculatePadding() or something...
-      const elementStyles = getComputedStyle(this.element);
-      const xtermElementStyles = getComputedStyle(this.session.xterm.element);
-      const elementHeight = parseInt(elementStyles.height, 10);
-      const xtermHeight = parseInt(xtermElementStyles.height, 10);
-      const newHeight = elementHeight - xtermHeight + TERMINAL_PADDING;
-      this.session.xterm.element.style.paddingTop = `${newHeight}px`;
-      fit.fit(this.session.xterm);
-
-      // Update Pseudoterminal Process w/New Dimensions
-      this.session.pty.resize(this.session.xterm.cols, this.session.xterm.rows);
-
-    }
+    this.resizeTerminalToFitContainer();
   }
 
   //

package.json

@@ -32,7 +32,8 @@
     "etch": "^0.14.0",
     "node-pty-prebuilt-multiarch": "^0.9.0",
     "rgb-hex": "^3.0.0",
-    "xterm": "^3.14.5"
+    "xterm": "^4.2.0",
+    "xterm-addon-fit": "^0.3.0"
   },
   "deserializers": {
     "TerminalSession": "deserializeTerminalSession"

styles/terminal.less

@@ -3,7 +3,7 @@
 @import "syntax-variables";
 
 // Import Styles from Xterm
-@import (inline) "../node_modules/xterm/dist/xterm.css";
+@import (inline) "../node_modules/xterm/css/xterm.css";
 
 .ui-syntax-color() { @syntax-background-color: hsl(198, 24%, 20%); } .ui-syntax-color(); // fallback color
 @ui-syntax-color: @syntax-background-color;