Move xterm to a node dependency and remove global code [ci skip]

app/assets/javascripts/terminal/index.js

-import 'vendor/xterm/encoding-indexes';
-import 'vendor/xterm/encoding';
-import Terminal from 'vendor/xterm/xterm';
-import 'vendor/xterm/fit';
-import './terminal';
+import Terminal from './terminal';
 
-window.Terminal = Terminal;
-
-export default () => new gl.Terminal({ selector: '#terminal' });
+export default () => new Terminal({ selector: '#terminal' });

app/assets/javascripts/terminal/terminal.js

-/* global Terminal */
-
 import $ from 'jquery';
+import { Terminal } from 'xterm';
+import * as fit from 'xterm/lib/addons/fit/fit';
+import * as attach from 'xterm/lib/addons/attach/attach';
 
-(() => {
-  class GLTerminal {
-
+export default class GLTerminal {
   constructor(options) {
     this.options = options || {};
 
@@ -20,7 +19,9 @@ import $ from 'jquery';
 
     this.setSocketUrl();
     this.createTerminal();
-      $(window).off('resize.terminal').on('resize.terminal', () => {
+    $(window)
+      .off('resize.terminal')
+      .on('resize.terminal', () => {
         this.terminal.fit();
       });
   }
@@ -34,24 +35,34 @@ import $ from 'jquery';
   }
 
   createTerminal() {
+    Terminal.applyAddon(fit);
+    Terminal.applyAddon(attach);
+
     this.terminal = new Terminal(this.options);
+
+    //TODO - CHECK IF WE SHOULD USE `attach` instead
     this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']);
     this.socket.binaryType = 'arraybuffer';
 
     this.terminal.open(this.container);
-      this.socket.onopen = () => { this.runTerminal(); };
-      this.socket.onerror = () => { this.handleSocketFailure(); };
+
+    this.socket.onopen = () => {
+      this.runTerminal();
+    };
+    this.socket.onerror = () => {
+      this.handleSocketFailure();
+    };
   }
 
   runTerminal() {
     const decoder = new TextDecoder('utf-8');
     const encoder = new TextEncoder('utf-8');
 
-      this.terminal.on('data', (data) => {
+    this.terminal.on('data', data => {
       this.socket.send(encoder.encode(data));
     });
 
-      this.socket.addEventListener('message', (ev) => {
+    this.socket.addEventListener('message', ev => {
       this.terminal.write(decoder.decode(ev.data));
     });
 
@@ -62,9 +73,4 @@ import $ from 'jquery';
   handleSocketFailure() {
     this.terminal.write('\r\nConnection failure');
   }
-
-  }
-
-  window.gl = window.gl || {};
-  gl.Terminal = GLTerminal;
-})();
+}

app/assets/stylesheets/application.scss

@@ -18,6 +18,8 @@
  */
 
 @import "../../../node_modules/pikaday/scss/pikaday";
+@import "../../../node_modules/xterm/src/xterm.css";
+
 
 /*
  * GitLab UI framework

package.json

@@ -103,7 +103,8 @@
     "webpack-bundle-analyzer": "^2.13.1",
     "webpack-cli": "^3.0.8",
     "webpack-stats-plugin": "^0.2.1",
-    "worker-loader": "^2.0.0"
+    "worker-loader": "^2.0.0",
+    "xterm": "^3.5.0"
   },
   "devDependencies": {
     "axios-mock-adapter": "^1.15.0",

vendor/assets/javascripts/xterm/fit.js

-/*
- *  Fit terminal columns and rows to the dimensions of its
- *  DOM element.
- *
- *  Approach:
- *    - Rows: Truncate the division of the terminal parent element height
- *            by the terminal row height
- *
- *    - Columns: Truncate the division of the terminal parent element width by
- *               the terminal character width (apply display: inline at the
- *               terminal row and truncate its width with the current number
- *               of columns)
- */
-(function (fit) {
-  if (typeof exports === 'object' && typeof module === 'object') {
-    /*
-     * CommonJS environment
-     */
-    module.exports = fit(require('./xterm'));
-  } else if (typeof define == 'function') {
-    /*
-     * Require.js is available
-     */
-    define(['./xterm'], fit);
-  } else {
-    /*
-     * Plain browser environment
-     */
-    fit(window.Terminal);
-  }
-})(function (Xterm) {
-  /**
-   * This module provides methods for fitting a terminal's size to a parent container.
-   *
-   * @module xterm/addons/fit/fit
-   */
-  var exports = {};
-
-  exports.proposeGeometry = function (term) {
-    var parentElementStyle = window.getComputedStyle(term.element.parentElement),
-        parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
-        parentElementWidth = parseInt(parentElementStyle.getPropertyValue('width')),
-        elementStyle = window.getComputedStyle(term.element),
-        elementPaddingVer = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')),
-        elementPaddingHor = parseInt(elementStyle.getPropertyValue('padding-right')) + parseInt(elementStyle.getPropertyValue('padding-left')),
-        availableHeight = parentElementHeight - elementPaddingVer,
-        availableWidth = parentElementWidth - elementPaddingHor,
-        container = term.rowContainer,
-        subjectRow = term.rowContainer.firstElementChild,
-        contentBuffer = subjectRow.innerHTML,
-        characterHeight,
-        rows,
-        characterWidth,
-        cols,
-        geometry;
-
-    subjectRow.style.display = 'inline';
-    subjectRow.innerHTML = 'W'; // Common character for measuring width, although on monospace
-    characterWidth = subjectRow.getBoundingClientRect().width;
-    subjectRow.style.display = ''; // Revert style before calculating height, since they differ.
-    characterHeight = parseInt(subjectRow.offsetHeight);
-    subjectRow.innerHTML = contentBuffer;
-
-    rows = parseInt(availableHeight / characterHeight);
-    cols = parseInt(availableWidth / characterWidth) - 1;
-
-    geometry = {cols: cols, rows: rows};
-    return geometry;
-  };
-
-  exports.fit = function (term) {
-    var geometry = exports.proposeGeometry(term);
-
-    term.resize(geometry.cols, geometry.rows);
-  };
-
-  Xterm.prototype.proposeGeometry = function () {
-    return exports.proposeGeometry(this);
-  };
-
-  Xterm.prototype.fit = function () {
-    return exports.fit(this);
-  };
-
-  return exports;
-});

yarn.lock

@@ -8006,6 +8006,10 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
 
+xterm@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.5.0.tgz#ba3f464bc5730c9d259ebe62131862224db9ddcc"
+
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"