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

2 files changed, 58 insertions, 58 deletions

diff --git a/app/assets/javascripts/terminal/index.js b/app/assets/javascripts/terminal/index.js
index 1a75e072c4e..49aeb377c74 100644
--- a/app/assets/javascripts/terminal/index.js
+++ b/app/assets/javascripts/terminal/index.js
@@ -1,9 +1,3 @@
-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' });
diff --git a/app/assets/javascripts/terminal/terminal.js b/app/assets/javascripts/terminal/terminal.js
index caffcddf3b0..ead208bafec 100644
--- a/app/assets/javascripts/terminal/terminal.js
+++ b/app/assets/javascripts/terminal/terminal.js
@@ -1,70 +1,76 @@
-/* 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 {
-
-    constructor(options) {
-      this.options = options || {};
+export default class GLTerminal {
+  constructor(options) {
+    this.options = options || {};
 
-      if (!Object.prototype.hasOwnProperty.call(this.options, 'cursorBlink')) {
-        this.options.cursorBlink = true;
-      }
+    if (!Object.prototype.hasOwnProperty.call(this.options, 'cursorBlink')) {
+      this.options.cursorBlink = true;
+    }
 
-      if (!Object.prototype.hasOwnProperty.call(this.options, 'screenKeys')) {
-        this.options.screenKeys = true;
-      }
+    if (!Object.prototype.hasOwnProperty.call(this.options, 'screenKeys')) {
+      this.options.screenKeys = true;
+    }
 
-      this.container = document.querySelector(options.selector);
+    this.container = document.querySelector(options.selector);
 
-      this.setSocketUrl();
-      this.createTerminal();
-      $(window).off('resize.terminal').on('resize.terminal', () => {
+    this.setSocketUrl();
+    this.createTerminal();
+    $(window)
+      .off('resize.terminal')
+      .on('resize.terminal', () => {
         this.terminal.fit();
       });
-    }
+  }
 
-    setSocketUrl() {
-      const { protocol, hostname, port } = window.location;
-      const wsProtocol = protocol === 'https:' ? 'wss://' : 'ws://';
-      const path = this.container.dataset.projectPath;
+  setSocketUrl() {
+    const { protocol, hostname, port } = window.location;
+    const wsProtocol = protocol === 'https:' ? 'wss://' : 'ws://';
+    const path = this.container.dataset.projectPath;
 
-      this.socketUrl = `${wsProtocol}${hostname}:${port}${path}`;
-    }
+    this.socketUrl = `${wsProtocol}${hostname}:${port}${path}`;
+  }
 
-    createTerminal() {
-      this.terminal = new Terminal(this.options);
-      this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']);
-      this.socket.binaryType = 'arraybuffer';
+  createTerminal() {
+    Terminal.applyAddon(fit);
+    Terminal.applyAddon(attach);
 
-      this.terminal.open(this.container);
-      this.socket.onopen = () => { this.runTerminal(); };
-      this.socket.onerror = () => { this.handleSocketFailure(); };
-    }
+    this.terminal = new Terminal(this.options);
 
-    runTerminal() {
-      const decoder = new TextDecoder('utf-8');
-      const encoder = new TextEncoder('utf-8');
+    //TODO - CHECK IF WE SHOULD USE `attach` instead
+    this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']);
+    this.socket.binaryType = 'arraybuffer';
 
-      this.terminal.on('data', (data) => {
-        this.socket.send(encoder.encode(data));
-      });
+    this.terminal.open(this.container);
 
-      this.socket.addEventListener('message', (ev) => {
-        this.terminal.write(decoder.decode(ev.data));
-      });
+    this.socket.onopen = () => {
+      this.runTerminal();
+    };
+    this.socket.onerror = () => {
+      this.handleSocketFailure();
+    };
+  }
 
-      this.isTerminalInitialized = true;
-      this.terminal.fit();
-    }
+  runTerminal() {
+    const decoder = new TextDecoder('utf-8');
+    const encoder = new TextEncoder('utf-8');
 
-    handleSocketFailure() {
-      this.terminal.write('\r\nConnection failure');
-    }
+    this.terminal.on('data', data => {
+      this.socket.send(encoder.encode(data));
+    });
 
+    this.socket.addEventListener('message', ev => {
+      this.terminal.write(decoder.decode(ev.data));
+    });
+
+    this.isTerminalInitialized = true;
+    this.terminal.fit();
   }
 
-  window.gl = window.gl || {};
-  gl.Terminal = GLTerminal;
-})();
+  handleSocketFailure() {
+    this.terminal.write('\r\nConnection failure');
+  }
+}