Bump version to 2.5.0

Signed-off-by: Paris Kasidiaris <paris@sourcelair.com>

.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["es2015"]
-}

.dockerignore

@@ -0,0 +1,16 @@
+node_modules/
+*.swp
+.lock-wscript
+lib/
+Makefile.gyp
+*.Makefile
+*.target.gyp.mk
+*.node
+example/*.log
+docs/
+npm-debug.log
+/.idea/
+.env
+build/
+.vscode/
+.git/

.editorconfig

@@ -5,8 +5,9 @@ indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
+end_of_line = lf
 
-[*.js]
+[*.{j,t}s]
 max_line_length = 100
 
 [*.css]

.gitignore

@@ -1,8 +1,7 @@
 node_modules/
 *.swp
-build/*
 .lock-wscript
-out/
+lib/
 Makefile.gyp
 *.Makefile
 *.target.gyp.mk
@@ -11,3 +10,9 @@ example/*.log
 docs/
 npm-debug.log
 /.idea/
+.env
+build/
+.vscode/
+
+# Directories needed for code coverage
+/coverage/

.npmignore

@@ -0,0 +1,16 @@
+node_modules/
+*.swp
+.lock-wscript
+lib/*.test.js
+lib/*.test.js.map
+lib/test/
+Makefile.gyp
+*.Makefile
+*.target.gyp.mk
+*.node
+example/*.log
+docs/
+npm-debug.log
+/.idea/
+.env
+build/

.travis.yml

@@ -1,8 +1,12 @@
 language: node_js
 node_js:
-  - 4
+  - 6
 env:
-  - CXX=g++-4.8
+  global:
+    - CXX=g++-4.8
+  matrix:
+    - NPM_COMMAND=lint
+    - NPM_COMMAND=test
 addons:
   apt:
     sources:
@@ -11,3 +15,5 @@ addons:
       - g++-4.8
 notifications:
   email: false
+script: npm run $NPM_COMMAND
+after_success: npm run coveralls

.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Mocha Tests",
+      "cwd": "${workspaceRoot}",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha",
+      "windows": {
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha.cmd"
+      },
+      "runtimeArgs": [
+        "--colors",
+        "--recursive",
+        "${workspaceRoot}/lib"
+      ],
+      "sourceMaps": true,
+      "outFiles": [ "${workspaceRoot}/lib/**/*.js" ],
+      "internalConsoleOptions": "openOnSessionStart"
+    }
+  ]
+}

AUTHORS

@@ -1,5 +1,6 @@
 List of xterm.js contributors. Updated before every release.
 
+Aleksandr Andrienko <aandrienko@codenvy.com>
 Alessandro Nadalin <alessandro.nadalin@gmail.com>
 Alexander Olsson <noseglid@gmail.com>
 Antonis Kalipetis <akalipetis@sourcelair.com>
@@ -7,19 +8,43 @@ Anton Skshidlevsky <meefik@gmail.com>
 Anton Yurovskykh <anton.yurovskykh@gmail.com>
 Austin Robertson <austinrobertson@gmail.com>
 ayapi <colors.aya@gmail.com>
+Ben Hall <ben@benhall.me.uk>
 Benjamin Fischer <benjamin.fischer@rwth-aachen.de>
+Bill Church <billchurch@users.noreply.github.com>
+Bob Reid <bobreid@Bobs-MacBook-Pro.local>
+bottleofwater <nison.mael+bottleofwater@gmail.com>
+Brian Mock <brian@mockbrian.com>
 Carson Anderson <carson@betterservers.com>
+Christian Budde Christensen <budde377@gmail.com>
 Christopher Jeffrey <chjjeffrey@gmail.com>
+coderaiser <mnemonic.enemy@gmail.com>
 Daniel Imms <daimms@microsoft.com>
 Daniel Risacher <drisacher@gmail.com>
 Dan Kaplun <dbkaplun@twitch.tv>
 Darin Morrison <freebroccolo@users.noreply.github.com>
+Edgar Andrés Margffoy Tuay <andfoy@gmail.com>
+Elliot Saba <staticfloat@gmail.com>
+hiro-su <h.sugipon@gmail.com>
+Ian Lewis <ianlewis@google.com>
 imoses <ido@twiggle.com>
+InDieTasten <indietasten@gmail.com>
 Jean Bruenn <himself@jeanbruenn.info>
 Jörg Breitbart <jerch@rockborn.de>
+Lucian Buzzo <lucian.buzzo@gmail.com>
+Maël Nison <nison.mael@gmail.com>
+Martin Wang <jiahaow@ca.ibm.com>
+Michael Irwin <mikesir87@gmail.com>
+Mikko Karvonen <mikko.karvonen@arm.com>
+Nicolas Ramz <nicolas.ramz@gmail.com>
 Paris Kasidiaris <pariskasidiaris@gmail.com>
 Paris Kasidiaris <paris@sourcelair.com>
 runarberg <runar@greenqloud.com>
+Saswat Das <saswatds@users.noreply.github.com>
+Shuanglei Tao <tsl0922@gmail.com>
 Steven Silvester <steven.silvester@ieee.org>
 Thanasis Daglis <thanasis@sourcelair.com>
 Tine Jozelj <tine.jozelj@outlook.com>
+Tyler Jewell <tjewell@codenvy.com>
+Vincent Woo <me@vincentwoo.com>
+yutaka <shigure@refy.net>
+YuviPanda <yuvipanda@gmail.com>

Dockerfile

@@ -1,4 +1,19 @@
-FROM node:4-onbuild
+FROM node:6.9
 MAINTAINER Paris Kasidiaris <paris@sourcelair.com>
 
-EXPOSE 3000
+# Set the working directory
+WORKDIR /usr/src/app
+
+# Set an entrypoint, to automatically install node modules
+ENTRYPOINT ["/bin/bash", "-c", "if [[ ! -d node_modules ]]; then npm install; fi; exec \"${@:0}\";"]
+CMD ["npm", "run", "dev"]
+
+# First, install dependencies to improve layer caching
+COPY package.json /usr/src/app/
+RUN npm install
+
+# Add the code
+COPY . /usr/src/app
+
+# Run the tests and build, to make sure everything is working nicely
+RUN npm run build && npm run test

Procfile

@@ -0,0 +1 @@
+web: npm start

Procfile.dev

@@ -1 +1 @@
-web: npm start
+web: npm run dev

README.md

@@ -1,6 +1,6 @@
-# xterm.js
+# [![xterm.js logo](logo.png)](https://xtermjs.org)
 
-![xterm.js build status](https://api.travis-ci.org/sourcelair/xterm.js.svg) [![Gitter](https://badges.gitter.im/sourcelair/xterm.js.svg)](https://gitter.im/sourcelair/xterm.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+[![xterm.js build status](https://api.travis-ci.org/sourcelair/xterm.js.svg)](https://travis-ci.org/sourcelair/xterm.js) [![Coverage Status](https://coveralls.io/repos/github/sourcelair/xterm.js/badge.svg)](https://coveralls.io/github/sourcelair/xterm.js) [![Gitter](https://badges.gitter.im/sourcelair/xterm.js.svg)](https://gitter.im/sourcelair/xterm.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
 Xterm.js is a terminal front-end component written in JavaScript that works in the browser.
 
@@ -24,6 +24,14 @@ Xterm.js is used in several world-class applications to provide great terminal e
 
 - [**SourceLair**](https://www.sourcelair.com/): In-browser IDE that provides its users with fully-featured Linux terminals based on xterm.js
 - [**Microsoft Visual Studio Code**](http://code.visualstudio.com/): Modern, versatile and powerful open source code editor that provides an integrated terminal based on xterm.js
+- [**ttyd**](https://github.com/tsl0922/ttyd): A command-line tool for sharing terminal over the web, with fully-featured terminal emulation based on xterm.js
+- [**Katacoda**](https://www.katacoda.com/): Katacoda is an Interactive Learning Platform for software developers, covering the latest Cloud Native technologies.
+- [**Eclipse Che**](http://www.eclipse.org/che): Developer workspace server, cloud IDE, and Eclipse next-generation IDE.
+- [**Codenvy**](http://www.codenvy.com): Cloud workspaces for development teams.
+- [**CoderPad**](https://coderpad.io): Online interviewing platform for programmers. Run code in many programming languages, with results displayed by `xterm.js`.
+- [**WebSSH2**](https://github.com/billchurch/WebSSH2): A web based SSH2 client using `xterm.js`, socket.io, and ssh2.
+- [**Spyder Terminal**](https://github.com/spyder-ide/spyder-terminal): A full fledged system terminal embedded on Spyder IDE. 
+- [**Cloud Commander**](https://cloudcmd.io "Cloud Commander"): Orthodox web file manager with console and editor.
 
 Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it in our list.
 
@@ -42,24 +50,61 @@ Xterm.js works seamlessly in Electron apps and may even work on earlier versions
 
 ## Demo
 
-To launch the demo simply run:
+### Linux or macOS
+
+Run the following commands:
 
 ```
-npm install
-npm start
+$ npm install
+$ npm start
 ```
 
-Then open http://0.0.0.0:3000 in a web browser (use http://127.0.0.1:3000 if running under Windows).
+Then open http://0.0.0.0:3000 in a web browser.
+
+### Windows
+
+First, ensure [node-gyp](https://github.com/nodejs/node-gyp) is installed and configured correctly, then run these commands.
+
+Note: Do not use ConEmu, as it seems to break the demo for some reason.
+
+```
+> npm install
+> npm start
+```
+
+Then open http://127.0.0.1:3000 in a web browser.
+
+## Getting Started
+
+To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to the head of your html page. Then create a `<div id="terminal"></div>` onto which xterm can attach itself.
+```html
+<!doctype html>
+  <html>
+    <head>
+      <link rel="stylesheet" href="bower_components/xterm.js/dist/xterm.css" />
+      <script src="bower_components/xterm.js/dist/xterm.js"></script>
+    </head>
+    <body>
+      <div id="terminal"></div>
+      <script>
+      	var term = new Terminal();
+        term.open(document.getElementById('terminal'));
+        term.write('Hello from \033[1;3;31mxterm.js\033[0m $ ')
+      </script>
+    </body>
+  </html>
+```
+Finally instantiate the `Terminal` object and then call the `open` function with the DOM object of the `div`.
 
 ## Addons
 
-Addons are JavaScript modules that attach functions to the `Terminal` prototype to extend its functionality. There are a handful available in the main repository in the `addons` directory, you can even write your own (though they may break when the internals of xterm.js change across versions).
+Addons are JavaScript modules that attach functions to the `Terminal` prototype to extend its functionality. There are a handful available in the main repository in the `dist/addons` directory, you can even write your own (though they may break when the internals of xterm.js change across versions).
 
 To use an addon, just include the JavaScript file after xterm.js and before the `Terminal` object has been instantiated. The function should then be exposed on the `Terminal` object:
 
 ```html
 <script src="node_modules/dist/xterm.js"></script>
-<script src="node_modules/addons/fit/fit.js"></script>
+<script src="node_modules/dist/addons/fit/fit.js"></script>
 ```
 
 ```js
@@ -78,19 +123,7 @@ The existing releases are available at this GitHub repo's [Releases](https://git
 
 Xterm.js is maintained by [SourceLair](https://www.sourcelair.com/) and a few external contributors, but we would love to receive contributions from everyone!
 
-To contribute either code, documentation or issues to xterm.js please read the [Contributing document](CONTRIBUTING.md) before.
-
-The development of xterm.js does not require any special tool. All you need is an editor that supports JavaScript and a browser (if you would like to run the demo you will need Node.js to get all features).
-
-It is recommended though to use a development tool that uses xterm.js internally, to develop for xterm.js. [Eating our own dogfood](https://en.wikipedia.org/wiki/Eating_your_own_dog_food) has been proved extremely beneficial for this project. Known tools that use xterm.js internally are:
-
-#### [SourceLair](https://www.sourcelair.com)
-
-Visit https://lair.io/sourcelair/xterm and follow the instructions. All development will happen in your browser.
-
-#### [Visual Studio Code](http://code.visualstudio.com/)
-
-[Download Visual Studio Code](http://code.visualstudio.com/Download), clone xterm.js and you are all set.
+To contribute either code, documentation or issues to xterm.js please read the [Contributing document](CONTRIBUTING.md) beforehand. The development of xterm.js does not require any special tool. All you need is an editor that supports JavaScript/TypeScript and a browser. You will need Node.js installed locally to get all the features working in the demo.
 
 ## License Agreement
 

addons/linkify/index.html

@@ -1,36 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <link rel="stylesheet" href="../../src/xterm.css" />
-        <link rel="stylesheet" href="../../demo/style.css" />
-        <script src="../../src/xterm.js"></script>
-        <script src="linkify.js"></script>
-        <style>
-            body {
-                color: #111;
-            }
-
-            #terminal-container {
-                max-width: 900px;
-                margin: 0 auto;
-            }
-
-            #terminal-container a {
-				color: #fff;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="terminal-container"></div>
-        <script>
-            var term = new Terminal(),
-                container = document.getElementById('terminal-container');
-
-            term.open(container);
-            term.writeln('Hello, welcome to xterm.js');
-            term.writeln('');
-            term.writeln('Check it out at github.com/sourcelair/xterm.js');
-            term.linkify();
-        </script>
-    </body>
-</html>

addons/linkify/package.json

@@ -1,5 +0,0 @@
-{
-  "name": "xterm.linkify",
-  "main": "linkify.js",
-  "private": true
-}

bin/build

@@ -1,38 +0,0 @@
-#! /usr/bin/env node
-
-var child_process = require('child_process');
-var fs = require('fs');
-
-var buildDir = process.env.BUILD_DIR || 'build';
-
-if (!fs.existsSync(buildDir)){
-    fs.mkdirSync(buildDir);
-}
-
-// Add `node_modules/.bin` to PATH
-process.env.PATH = process.cwd() + '/node_modules/.bin:' + process.env.PATH;
-
-console.log('Building xterm.js into ' + buildDir);
-
-// Build ES2015 modules into ES5 form, then concatenate them,
-// then remove unused require calls and save in output file with source map.
-console.log('  - Building ' + buildDir + '/xterm.js...');
-
-var jsBuildCmd = 'browserify src/xterm.js -s Terminal -t [ babelify --presets [ es2015 ] ] --debug | ';
-jsBuildCmd += 'derequire | exorcist ' + buildDir + '/xterm.js.map > ' + buildDir + '/xterm.js';
-
-var jsBuildProcess = child_process.execSync(jsBuildCmd);
-
-if (jsBuildProcess.status) {
-  console.log(jsBuildProcess.error);
-}
-
-console.log('    OK.');
-
-// Copy CSS into $BUILD_DIR
-console.log('  - Building ' + buildDir + '/xterm.css...');
-
-fs.createReadStream('src/xterm.css').pipe(
-  fs.createWriteStream(buildDir + '/xterm.css')
-);
-console.log('    OK.');

bin/prepare-release

@@ -21,7 +21,7 @@ CURRENT_BOWER_JSON_VERSION=$(cat bower.json \
 
 # Build xterm.js into `dist`
 export BUILD_DIR=dist
-./bin/build
+npm run build
 
 # Update AUTHORS file
 sh bin/generate-authors

bower.json

@@ -1,5 +1,9 @@
 {
   "name": "xterm.js",
-  "version": "2.0.1",
-  "ignore": ["demo", "test", ".gitignore"]
+  "version": "2.5.0",
+  "ignore": ["demo", "test", ".gitignore"],
+  "main": [
+    "dist/xterm.js",
+    "dist/xterm.css"
+  ]
 }

demo/app.js

@@ -2,13 +2,12 @@ var express = require('express');
 var app = express();
 var expressWs = require('express-ws')(app);
 var os = require('os');
-var pty = require('pty.js');
+var pty = require('node-pty');
 
 var terminals = {},
     logs = {};
 
 app.use('/build', express.static(__dirname + '/../build'));
-app.use('/addons', express.static(__dirname + '/../addons'));
 
 app.get('/', function(req, res){
   res.sendFile(__dirname + '/index.html');
@@ -70,7 +69,7 @@ app.ws('/terminals/:pid', function (ws, req) {
     term.write(msg);
   });
   ws.on('close', function () {
-    process.kill(term.pid);
+    term.kill();
     console.log('Closed terminal ' + term.pid);
     // Clean things up
     delete terminals[term.pid];

demo/index.html

@@ -2,21 +2,29 @@
 <html>
     <head>
         <title>xterm.js demo</title>
-        <link rel="stylesheet" href="../build/xterm.css" />
-        <link rel="stylesheet" href="../addons/fullscreen/fullscreen.css" />
+        <link rel="stylesheet" href="/build/xterm.css" />
+        <link rel="stylesheet" href="/build/addons/fullscreen/fullscreen.css" />
         <link rel="stylesheet" href="style.css" />
       	<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
-        <script src="../build/xterm.js" ></script>
-        <script src="../addons/attach/attach.js" ></script>
-        <script src="../addons/fit/fit.js" ></script>
-        <script src="../addons/fullscreen/fullscreen.js" ></script>
+        <script src="/build/xterm.js" ></script>
+        <script src="/build/addons/attach/attach.js" ></script>
+        <script src="/build/addons/fit/fit.js" ></script>
+        <script src="/build/addons/fullscreen/fullscreen.js" ></script>
     </head>
     <body>
         <h1>xterm.js: xterm, in the browser</h1>
         <div id="terminal-container"></div>
         <div>
           <h2>Options</h2>
-          <label><input type="checkbox" id="option-cursor-blink"> cursorBlink</label>
+          <p>
+            <label><input type="checkbox" id="option-cursor-blink"> cursorBlink</label>
+          </p>
+          <p>
+            <label>scrollback <input type="number" id="option-scrollback" value="1000" /></label>
+          </p>
+          <p>
+            <label>tabStopWidth <input type="number" id="option-tabstopwidth" value="8" /></label>
+          </p>
           <div>
           	<h3>Size</h3>
             <div>

demo/main.js

@@ -8,14 +8,16 @@ var term,
 
 var terminalContainer = document.getElementById('terminal-container'),
     optionElements = {
-      cursorBlink: document.querySelector('#option-cursor-blink')
+      cursorBlink: document.querySelector('#option-cursor-blink'),
+      scrollback: document.querySelector('#option-scrollback'),
+      tabstopwidth: document.querySelector('#option-tabstopwidth')
     },
     colsElement = document.getElementById('cols'),
     rowsElement = document.getElementById('rows');
 
 function setTerminalSize () {
-  var cols = parseInt(colsElement.value),
-      rows = parseInt(rowsElement.value),
+  var cols = parseInt(colsElement.value, 10),
+      rows = parseInt(rowsElement.value, 10),
       width = (cols * charWidth).toString() + 'px',
       height = (rows * charHeight).toString() + 'px';
 
@@ -27,7 +29,15 @@ function setTerminalSize () {
 colsElement.addEventListener('change', setTerminalSize);
 rowsElement.addEventListener('change', setTerminalSize);
 
-optionElements.cursorBlink.addEventListener('change', createTerminal);
+optionElements.cursorBlink.addEventListener('change', function () {
+  term.setOption('cursorBlink', optionElements.cursorBlink.checked);
+});
+optionElements.scrollback.addEventListener('change', function () {
+  term.setOption('scrollback', parseInt(optionElements.scrollback.value, 10));
+});
+optionElements.tabstopwidth.addEventListener('change', function () {
+  term.setOption('tabStopWidth', parseInt(optionElements.tabstopwidth.value, 10));
+});
 
 createTerminal();
 
@@ -37,7 +47,9 @@ function createTerminal() {
     terminalContainer.removeChild(terminalContainer.children[0]);
   }
   term = new Terminal({
-    cursorBlink: optionElements.cursorBlink.checked
+    cursorBlink: optionElements.cursorBlink.checked,
+    scrollback: parseInt(optionElements.scrollback.value, 10),
+    tabStopWidth: parseInt(optionElements.tabstopwidth.value, 10)
   });
   term.on('resize', function (size) {
     if (!pid) {
@@ -78,7 +90,6 @@ function createTerminal() {
   });
 }
 
-
 function runRealTerminal() {
   term.attach(socket);
   term._initialized = true;

demo/style.css

@@ -20,7 +20,3 @@ h1 {
     color: #fafafa;
     padding: 2px;
 }
-
-#terminal-container .terminal:focus .terminal-cursor {
-    background-color: #fafafa;
-}

dist/addons/attach/attach.js

@@ -1,9 +1,7 @@
-/*
- * Implements the attach method, that
- * attaches the terminal to a WebSocket stream.
- *
- * The bidirectional argument indicates, whether the terminal should
- * send data to the socket as well and is true, by default.
+/**
+ * Implements the attach method, that attaches the terminal to a WebSocket stream.
+ * @module xterm/addons/attach/attach
+ * @license MIT
  */
 
 (function (attach) {
@@ -11,12 +9,12 @@
     /*
      * CommonJS environment
      */
-    module.exports = attach(require('../../src/xterm'));
+    module.exports = attach(require('../../xterm'));
   } else if (typeof define == 'function') {
     /*
      * Require.js is available
      */
-    define(['../../src/xterm'], attach);
+    define(['../../xterm'], attach);
   } else {
     /*
      * Plain browser environment
@@ -26,12 +24,6 @@
 })(function (Xterm) {
   'use strict';
 
-  /**
-   * This module provides methods for attaching a terminal to a WebSocket
-   * stream.
-   *
-   * @module xterm/addons/attach/attach
-   */
   var exports = {};
 
   /**

dist/addons/fit/fit.js

@@ -1,27 +1,27 @@
-/*
- *  Fit terminal columns and rows to the dimensions of its
- *  DOM element.
+/**
+ * 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
+ * ## 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)
+ * - 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).
+ * @module xterm/addons/fit/fit
+ * @license MIT
  */
+
 (function (fit) {
   if (typeof exports === 'object' && typeof module === 'object') {
     /*
      * CommonJS environment
      */
-    module.exports = fit(require('../../src/xterm'));
+    module.exports = fit(require('../../xterm'));
   } else if (typeof define == 'function') {
     /*
      * Require.js is available
      */
-    define(['../../src/xterm'], fit);
+    define(['../../xterm'], fit);
   } else {
     /*
      * Plain browser environment
@@ -29,17 +29,15 @@
     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) {
+    if (!term.element.parentElement) {
+      return null;
+    }
     var parentElementStyle = window.getComputedStyle(term.element.parentElement),
         parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
-        parentElementWidth = parseInt(parentElementStyle.getPropertyValue('width')),
+        parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width')) - 17),
         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')),
@@ -58,11 +56,11 @@
     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);
+    characterHeight = subjectRow.getBoundingClientRect().height;
     subjectRow.innerHTML = contentBuffer;
 
     rows = parseInt(availableHeight / characterHeight);
-    cols = parseInt(availableWidth / characterWidth) - 1;
+    cols = parseInt(availableWidth / characterWidth);
 
     geometry = {cols: cols, rows: rows};
     return geometry;
@@ -71,7 +69,9 @@
   exports.fit = function (term) {
     var geometry = exports.proposeGeometry(term);
 
-    term.resize(geometry.cols, geometry.rows);
+    if (geometry) {
+      term.resize(geometry.cols, geometry.rows);
+    }
   };
 
   Xterm.prototype.proposeGeometry = function () {

dist/addons/fullscreen/fullscreen.js

@@ -1,26 +1,19 @@
-/*
+/**
  * Fullscreen addon for xterm.js
- *
- * Implements the toggleFullscreen function.
- *
- * If the `fullscreen` argument has been supplied, then
- * if it is true, the fullscreen mode gets turned on,
- * if it is false or null, the fullscreen mode gets turned off.
- *
- * If the `fullscreen` argument has not been supplied, the
- * fullscreen mode is being toggled.
+ * @module xterm/addons/fullscreen/fullscreen
+ * @license MIT
  */
 (function (fullscreen) {
   if (typeof exports === 'object' && typeof module === 'object') {
     /*
      * CommonJS environment
      */
-    module.exports = fullscreen(require('../../src/xterm'));
+    module.exports = fullscreen(require('../../xterm'));
   } else if (typeof define == 'function') {
     /*
      * Require.js is available
      */
-    define(['../../src/xterm'], fullscreen);
+    define(['../../xterm'], fullscreen);
   } else {
     /*
      * Plain browser environment
@@ -30,6 +23,11 @@
 })(function (Xterm) {
   var exports = {};
 
+  /**
+   * Toggle the given terminal's fullscreen mode.
+   * @param {Xterm} term - The terminal to toggle full screen mode
+   * @param {boolean} fullscreen - Toggle fullscreen on (true) or off (false)
+   */
   exports.toggleFullScreen = function (term, fullscreen) {
     var fn;
 

dist/addons/linkify/linkify.js

@@ -1,14 +1,20 @@
+/**
+ * Methods for turning URL subscrings in the terminal's content into links (`a` DOM elements).
+ * @module xterm/addons/linkify/linkify
+ * @license MIT
+ */
+
 (function (linkify) {
   if (typeof exports === 'object' && typeof module === 'object') {
     /*
      * CommonJS environment
      */
-    module.exports = linkify(require('../../src/xterm'));
+    module.exports = linkify(require('../../xterm'));
   } else if (typeof define == 'function') {
     /*
      * Require.js is available
      */
-    define(['../../src/xterm'], linkify);
+    define(['../../xterm'], linkify);
   } else {
     /*
      * Plain browser environment
@@ -18,12 +24,6 @@
 })(function (Xterm) {
   'use strict';
 
-  /**
-   * This module provides methods for convertings valid URL substrings
-   * into HTML anchor elements (links), inside a terminal view.
-   *
-   * @module xterm/addons/linkify/linkify
-   */
   var exports = {},
       protocolClause = '(https?:\\/\\/)',
       domainCharacterSet = '[\\da-z\\.-]+',

dist/addons/terminado/terminado.js

@@ -0,0 +1,135 @@
+/**
+ * This module provides methods for attaching a terminal to a terminado WebSocket stream.
+ *
+ * @module xterm/addons/terminado/terminado
+ * @license MIT
+ */
+
+(function (attach) {
+  if (typeof exports === 'object' && typeof module === 'object') {
+    /*
+     * CommonJS environment
+     */
+    module.exports = attach(require('../../xterm'));
+  } else if (typeof define == 'function') {
+    /*
+     * Require.js is available
+     */
+    define(['../../xterm'], attach);
+  } else {
+    /*
+     * Plain browser environment
+     */
+    attach(window.Terminal);
+  }
+})(function (Xterm) {
+  'use strict';
+
+  var exports = {};
+
+  /**
+   * Attaches the given terminal to the given socket.
+   *
+   * @param {Xterm} term - The terminal to be attached to the given socket.
+   * @param {WebSocket} socket - The socket to attach the current terminal.
+   * @param {boolean} bidirectional - Whether the terminal should send data
+   *                                  to the socket as well.
+   * @param {boolean} buffered - Whether the rendering of incoming data
+   *                             should happen instantly or at a maximum
+   *                             frequency of 1 rendering per 10ms.
+   */
+  exports.terminadoAttach = function (term, socket, bidirectional, buffered) {
+    bidirectional = (typeof bidirectional == 'undefined') ? true : bidirectional;
+    term.socket = socket;
+
+    term._flushBuffer = function () {
+      term.write(term._attachSocketBuffer);
+      term._attachSocketBuffer = null;
+      clearTimeout(term._attachSocketBufferTimer);
+      term._attachSocketBufferTimer = null;
+    };
+
+    term._pushToBuffer = function (data) {
+      if (term._attachSocketBuffer) {
+        term._attachSocketBuffer += data;
+      } else {
+        term._attachSocketBuffer = data;
+        setTimeout(term._flushBuffer, 10);
+      }
+    };
+
+    term._getMessage = function (ev) {
+      var data = JSON.parse(ev.data)
+      if( data[0] == "stdout" ) {
+        if (buffered) {
+          term._pushToBuffer(data[1]);
+        } else {
+          term.write(data[1]);
+        }
+      }
+    };
+
+    term._sendData = function (data) {
+      socket.send(JSON.stringify(['stdin', data]));
+    };
+
+    term._setSize = function (size) {
+      socket.send(JSON.stringify(['set_size', size.rows, size.cols]));
+    };
+
+    socket.addEventListener('message', term._getMessage);
+
+    if (bidirectional) {
+      term.on('data', term._sendData);
+    }
+    term.on('resize', term._setSize);
+
+    socket.addEventListener('close', term.terminadoDetach.bind(term, socket));
+    socket.addEventListener('error', term.terminadoDetach.bind(term, socket));
+  };
+
+  /**
+   * Detaches the given terminal from the given socket
+   *
+   * @param {Xterm} term - The terminal to be detached from the given socket.
+   * @param {WebSocket} socket - The socket from which to detach the current
+   *                             terminal.
+   */
+  exports.terminadoDetach = function (term, socket) {
+    term.off('data', term._sendData);
+
+    socket = (typeof socket == 'undefined') ? term.socket : socket;
+
+    if (socket) {
+      socket.removeEventListener('message', term._getMessage);
+    }
+
+    delete term.socket;
+  };
+
+  /**
+   * Attaches the current terminal to the given socket
+   *
+   * @param {WebSocket} socket - The socket to attach the current terminal.
+   * @param {boolean} bidirectional - Whether the terminal should send data
+   *                                  to the socket as well.
+   * @param {boolean} buffered - Whether the rendering of incoming data
+   *                             should happen instantly or at a maximum
+   *                             frequency of 1 rendering per 10ms.
+   */
+  Xterm.prototype.terminadoAttach = function (socket, bidirectional, buffered) {
+    return exports.terminadoAttach(this, socket, bidirectional, buffered);
+  };
+
+  /**
+   * Detaches the current terminal from the given socket.
+   *
+   * @param {WebSocket} socket - The socket from which to detach the current
+   *                             terminal.
+   */
+  Xterm.prototype.terminadoDetach = function (socket) {
+    return exports.terminadoDetach(this, socket);
+  };
+
+  return exports;
+});

dist/xterm.css

@@ -61,12 +61,32 @@
     position: absolute;
     opacity: 0;
     left: -9999em;
+    top: 0;
     width: 0;
     height: 0;
     z-index: -10;
+    /** Prevent wrapping so the IME appears against the textarea at the correct position */
+    white-space: nowrap;
+    overflow: hidden;
+    resize: none;
 }
 
-.terminal .terminal-cursor {
+.terminal a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.terminal a:hover {
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.terminal a.xterm-invalid-link:hover {
+    cursor: text;
+    text-decoration: none;
+}
+
+.terminal.focus:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar) .terminal-cursor {
     background-color: #fff;
     color: #000;
 }
@@ -77,19 +97,41 @@
     background-color: transparent;
 }
 
-.terminal.focus .terminal-cursor.blinking {
-    animation: blink-cursor 1.2s infinite step-end;
+.terminal:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar).focus.xterm-cursor-blink-on .terminal-cursor {
+    background-color: transparent;
+    color: inherit;
 }
 
-@keyframes blink-cursor {
-    0% {
-        background-color: #fff;
-        color: #000;
-    }
-    50% {
-        background-color: transparent;
-        color: #FFF;
-    }
+.terminal.xterm-cursor-style-bar .terminal-cursor,
+.terminal.xterm-cursor-style-underline .terminal-cursor {
+    position: relative;
+}
+.terminal.xterm-cursor-style-bar .terminal-cursor::before,
+.terminal.xterm-cursor-style-underline .terminal-cursor::before {
+    content: "";
+    display: block;
+    position: absolute;
+    background-color: #fff;
+}
+.terminal.xterm-cursor-style-bar .terminal-cursor::before {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 1px;
+}
+.terminal.xterm-cursor-style-underline .terminal-cursor::before {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+}
+.terminal.xterm-cursor-style-bar.focus.xterm-cursor-blink.xterm-cursor-blink-on .terminal-cursor::before,
+.terminal.xterm-cursor-style-underline.focus.xterm-cursor-blink.xterm-cursor-blink-on .terminal-cursor::before {
+    background-color: transparent;
+}
+.terminal.xterm-cursor-style-bar.focus.xterm-cursor-blink .terminal-cursor::before,
+.terminal.xterm-cursor-style-underline.focus.xterm-cursor-blink .terminal-cursor::before {
+    background-color: #fff;
 }
 
 .terminal .composition-view {
@@ -111,12 +153,21 @@
     overflow-y: scroll;
 }
 
+.terminal .xterm-wide-char {
+    display: inline-block;
+}
+
 .terminal .xterm-rows {
     position: absolute;
     left: 0;
     top: 0;
 }
 
+.terminal .xterm-rows > div {
+    /* Lines containing spans and text nodes ocassionally wrap despite being the same width (#327) */
+    white-space: nowrap;
+}
+
 .terminal .xterm-scroll-area {
     visibility: hidden;
 }

docker-compose.yaml

@@ -0,0 +1,9 @@
+version: '2'
+
+services:
+  web:
+    build: ./
+    volumes:
+     - ./:/usr/src/app
+    ports:
+      - 3000:3000

gulpfile.js

@@ -0,0 +1,110 @@
+const browserify = require('browserify');
+const buffer = require('vinyl-buffer');
+const coveralls = require('gulp-coveralls');
+const fs = require('fs-extra');
+const gulp = require('gulp');
+const istanbul = require('gulp-istanbul');
+const merge = require('merge-stream');
+const mocha = require('gulp-mocha');
+const sorcery = require('sorcery');
+const source = require('vinyl-source-stream');
+const sourcemaps = require('gulp-sourcemaps');
+const ts = require('gulp-typescript');
+
+
+let buildDir = process.env.BUILD_DIR || 'build';
+let tsProject = ts.createProject('tsconfig.json');
+let srcDir = tsProject.config.compilerOptions.rootDir;
+let outDir = tsProject.config.compilerOptions.outDir;
+
+/**
+ * Compile TypeScript sources to JavaScript files and create a source map file for each TypeScript
+ * file compiled.
+ */
+gulp.task('tsc', function () {
+  // Remove the ${outDir}/ directory to prevent confusion if files were deleted in ${srcDir}/
+  fs.emptyDirSync(`${outDir}`);
+
+  // Build all TypeScript files (including tests) to ${outDir}/, based on the configuration defined in
+  // `tsconfig.json`.
+  let tsResult = tsProject.src().pipe(sourcemaps.init()).pipe(tsProject());
+  let tsc = tsResult.js.pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''})).pipe(gulp.dest(outDir));
+
+  // Copy all addons from ${srcDir}/ to ${outDir}/
+  let copyAddons = gulp.src(`${srcDir}/addons/**/*`).pipe(gulp.dest(`${outDir}/addons`));
+
+  // Copy stylesheets from ${srcDir}/ to ${outDir}/
+  let copyStylesheets = gulp.src(`${srcDir}/**/*.css`).pipe(gulp.dest(outDir));
+
+  return merge(tsc, copyAddons, copyStylesheets);
+});
+
+/**
+ * Bundle JavaScript files produced by the `tsc` task, into a single file named `xterm.js` with
+ * Browserify.
+ */
+gulp.task('browserify', ['tsc'], function() {
+  // Ensure that the build directory exists
+  fs.ensureDirSync(buildDir);
+
+  let browserifyOptions = {
+    basedir: buildDir,
+    debug: true,
+    entries: [`../${outDir}/xterm.js`],
+    standalone: 'Terminal',
+    cache: {},
+    packageCache: {}
+  };
+  let bundleStream = browserify(browserifyOptions)
+        .bundle()
+        .pipe(source('xterm.js'))
+        .pipe(buffer())
+        .pipe(sourcemaps.init({loadMaps: true, sourceRoot: '..'}))
+        .pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest(buildDir));
+
+  // Copy all add-ons from ${outDir}/ to buildDir
+  let copyAddons = gulp.src(`${outDir}/addons/**/*`).pipe(gulp.dest(`${buildDir}/addons`));
+
+  // Copy stylesheets from ${outDir}/ to ${buildDir}/
+  let copyStylesheets = gulp.src(`${outDir}/**/*.css`).pipe(gulp.dest(buildDir));
+
+  return merge(bundleStream, copyAddons, copyStylesheets);
+});
+
+gulp.task('instrument-test', function () {
+  return gulp.src([`${outDir}/**/*.js`])
+    // Covering files
+    .pipe(istanbul())
+    // Force `require` to return covered files
+    .pipe(istanbul.hookRequire());
+});
+
+gulp.task('mocha', ['instrument-test'], function () {
+  return gulp.src([`${outDir}/*test.js`, `${outDir}/**/*test.js`], {read: false})
+      .pipe(mocha())
+      .pipe(istanbul.writeReports());
+});
+
+/**
+ * Use `sorcery` to resolve the source map chain and point back to the TypeScript files.
+ * (Without this task the source maps produced for the JavaScript bundle points into the
+ * compiled JavaScript files in ${outDir}/).
+ */
+gulp.task('sorcery', ['browserify'], function () {
+  var chain = sorcery.loadSync(`${buildDir}/xterm.js`);
+  chain.apply();
+  chain.writeSync();
+});
+
+/**
+ * Submit coverage results to coveralls.io
+ */
+gulp.task('coveralls', function () {
+  gulp.src('coverage/**/lcov.info')
+    .pipe(coveralls());
+});
+
+gulp.task('build', ['sorcery']);
+gulp.task('test', ['mocha']);
+gulp.task('default', ['build']);

jsdoc.json

@@ -1,13 +1,12 @@
 {
   "source": {
     "include": [
-      "src/xterm.js",
-      "src/handlers/Clipboard.js",
-      "addons/attach/attach.js",
-      "addons/fit/fit.js",
-      "addons/fullscreen/fullscreen.js",
-      "addons/linkify/linkify.js"
-    ]
+      "src/"
+    ],
+    "exclude": [
+      "src/test/"
+    ],
+    "excludePattern": "src/.+\\.test\\.(js|ts)$"
   },
   "opts": {
     "readme": "README.md",

package.json

@@ -1,36 +1,79 @@
 {
   "name": "xterm",
-  "version": "2.0.1",
+  "description": "Full xterm terminal, in your browser",
+  "version": "2.5.0",
   "ignore": [
     "demo",
     "test",
     ".gitignore"
   ],
-  "main": "dist/xterm.js",
+  "main": "lib/xterm.js",
   "repository": "https://github.com/sourcelair/xterm.js",
   "license": "MIT",
+  "files": [
+    "*.js",
+    "*.json",
+    "dist/*.css",
+    "dist/**/*.css",
+    "dist/*.js",
+    "dist/*.js.map",
+    "dist/**/*.js",
+    "dist/**/*.js.map",
+    "lib/*.css",
+    "lib/**/*.css",
+    "lib/*.js",
+    "lib/*.js.map",
+    "lib/**/*.js",
+    "lib/**/*.js.map",
+    "src/*.css",
+    "src/**/*.css",
+    "src/*.js",
+    "src/*.js.map",
+    "src/*.ts",
+    "src/**/*.js",
+    "src/**/*.js.map",
+    "src/**/*.ts"
+  ],
   "devDependencies": {
-    "babel-core": "6.14.0",
-    "babel-preset-es2015": "6.14.0",
-    "babelify": "^7.3.0",
+    "@types/chai": "^3.4.34",
+    "@types/jsdom": "^2.0.30",
+    "@types/mocha": "^2.2.33",
+    "@types/node": "^6.0.41",
     "browserify": "^13.1.0",
     "chai": "3.5.0",
-    "derequire": "^2.0.3",
     "docdash": "0.4.0",
-    "exorcist": "^0.4.0",
     "express": "4.13.4",
     "express-ws": "2.0.0-rc.1",
+    "fs-extra": "^1.0.0",
     "glob": "^7.0.5",
-    "jsdoc": "3.4.0",
-    "mocha": "2.5.3",
+    "gulp": "^3.9.1",
+    "gulp-cli": "^1.2.2",
+    "gulp-coveralls": "^0.1.4",
+    "gulp-istanbul": "^1.1.1",
+    "gulp-mocha": "^3.0.1",
+    "gulp-sourcemaps": "1.9.1",
+    "gulp-typescript": "^3.1.3",
+    "jsdoc": "3.4.3",
+    "jsdom": "^9.11.0",
+    "merge-stream": "^1.0.1",
+    "node-pty": "^0.4.1",
     "nodemon": "1.10.2",
-    "pty.js": "0.3.1",
-    "sleep": "^3.0.1"
+    "sleep": "^3.0.1",
+    "sorcery": "^0.10.0",
+    "tslint": "^4.0.2",
+    "typescript": "~2.2.0",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0"
   },
   "scripts": {
-    "start": "nodemon --watch src --watch addons --exec bash -c './bin/build && node demo/app'",
-    "test": "mocha --recursive --compilers js:babel-core/register",
+    "prestart": "npm run build",
+    "start": "node demo/app",
+    "dev": "nodemon -e js,ts,css --watch src --watch demo --exec npm start",
+    "lint": "tslint src/*.ts src/**/*.ts",
+    "test": "gulp test",
     "build:docs": "jsdoc -c jsdoc.json",
-    "build": "./bin/build"
+    "build": "gulp build",
+    "prepublish": "npm run build",
+    "coveralls": "gulp coveralls"
   }
 }

src/Charsets.ts

@@ -0,0 +1,252 @@
+/**
+ * @license MIT
+ */
+
+/**
+ * The character sets supported by the terminal. These enable several languages
+ * to be represented within the terminal with only 8-bit encoding. See ISO 2022
+ * for a discussion on character sets. Only VT100 character sets are supported.
+ */
+export const CHARSETS: {[key: string]: {[key: string]: string}} = {};
+
+/**
+ * The default character set, US.
+ */
+export const DEFAULT_CHARSET = CHARSETS['B'];
+
+/**
+ * DEC Special Character and Line Drawing Set.
+ * Reference: http://vt100.net/docs/vt102-ug/table5-13.html
+ * A lot of curses apps use this if they see TERM=xterm.
+ * testing: echo -e '\e(0a\e(B'
+ * The xterm output sometimes seems to conflict with the
+ * reference above. xterm seems in line with the reference
+ * when running vttest however.
+ * The table below now uses xterm's output from vttest.
+ */
+CHARSETS['0'] = {
+  '`': '\u25c6', // '◆'
+  'a': '\u2592', // '▒'
+  'b': '\u0009', // '\t'
+  'c': '\u000c', // '\f'
+  'd': '\u000d', // '\r'
+  'e': '\u000a', // '\n'
+  'f': '\u00b0', // '°'
+  'g': '\u00b1', // '±'
+  'h': '\u2424', // '\u2424' (NL)
+  'i': '\u000b', // '\v'
+  'j': '\u2518', // '┘'
+  'k': '\u2510', // '┐'
+  'l': '\u250c', // '┌'
+  'm': '\u2514', // '└'
+  'n': '\u253c', // '┼'
+  'o': '\u23ba', // '⎺'
+  'p': '\u23bb', // '⎻'
+  'q': '\u2500', // '─'
+  'r': '\u23bc', // '⎼'
+  's': '\u23bd', // '⎽'
+  't': '\u251c', // '├'
+  'u': '\u2524', // '┤'
+  'v': '\u2534', // '┴'
+  'w': '\u252c', // '┬'
+  'x': '\u2502', // '│'
+  'y': '\u2264', // '≤'
+  'z': '\u2265', // '≥'
+  '{': '\u03c0', // 'π'
+  '|': '\u2260', // '≠'
+  '}': '\u00a3', // '£'
+  '~': '\u00b7'  // '·'
+};
+
+/**
+ * British character set
+ * ESC (A
+ * Reference: http://vt100.net/docs/vt220-rm/table2-5.html
+ */
+CHARSETS['A'] = {
+  '#': '£'
+};
+
+/**
+ * United States character set
+ * ESC (B
+ */
+CHARSETS['B'] = null;
+
+/**
+ * Dutch character set
+ * ESC (4
+ * Reference: http://vt100.net/docs/vt220-rm/table2-6.html
+ */
+CHARSETS['4'] = {
+  '#': '£',
+  '@': '¾',
+  '[': 'ij',
+  '\\': '½',
+  ']': '|',
+  '{': '¨',
+  '|': 'f',
+  '}': '¼',
+  '~': '´'
+};
+
+/**
+ * Finnish character set
+ * ESC (C or ESC (5
+ * Reference: http://vt100.net/docs/vt220-rm/table2-7.html
+ */
+CHARSETS['C'] =
+CHARSETS['5'] = {
+  '[': 'Ä',
+  '\\': 'Ö',
+  ']': 'Å',
+  '^': 'Ü',
+  '`': 'é',
+  '{': 'ä',
+  '|': 'ö',
+  '}': 'å',
+  '~': 'ü'
+};
+
+/**
+ * French character set
+ * ESC (R
+ * Reference: http://vt100.net/docs/vt220-rm/table2-8.html
+ */
+CHARSETS['R'] = {
+  '#': '£',
+  '@': 'à',
+  '[': '°',
+  '\\': 'ç',
+  ']': '§',
+  '{': 'é',
+  '|': 'ù',
+  '}': 'è',
+  '~': '¨'
+};
+
+/**
+ * French Canadian character set
+ * ESC (Q
+ * Reference: http://vt100.net/docs/vt220-rm/table2-9.html
+ */
+CHARSETS['Q'] = {
+  '@': 'à',
+  '[': 'â',
+  '\\': 'ç',
+  ']': 'ê',
+  '^': 'î',
+  '`': 'ô',
+  '{': 'é',
+  '|': 'ù',
+  '}': 'è',
+  '~': 'û'
+};
+
+/**
+ * German character set
+ * ESC (K
+ * Reference: http://vt100.net/docs/vt220-rm/table2-10.html
+ */
+CHARSETS['K'] = {
+  '@': '§',
+  '[': 'Ä',
+  '\\': 'Ö',
+  ']': 'Ü',
+  '{': 'ä',
+  '|': 'ö',
+  '}': 'ü',
+  '~': 'ß'
+};
+
+/**
+ * Italian character set
+ * ESC (Y
+ * Reference: http://vt100.net/docs/vt220-rm/table2-11.html
+ */
+CHARSETS['Y'] = {
+  '#': '£',
+  '@': '§',
+  '[': '°',
+  '\\': 'ç',
+  ']': 'é',
+  '`': 'ù',
+  '{': 'à',
+  '|': 'ò',
+  '}': 'è',
+  '~': 'ì'
+};
+
+/**
+ * Norwegian/Danish character set
+ * ESC (E or ESC (6
+ * Reference: http://vt100.net/docs/vt220-rm/table2-12.html
+ */
+CHARSETS['E'] =
+CHARSETS['6'] = {
+  '@': 'Ä',
+  '[': 'Æ',
+  '\\': 'Ø',
+  ']': 'Å',
+  '^': 'Ü',
+  '`': 'ä',
+  '{': 'æ',
+  '|': 'ø',
+  '}': 'å',
+  '~': 'ü'
+};
+
+/**
+ * Spanish character set
+ * ESC (Z
+ * Reference: http://vt100.net/docs/vt220-rm/table2-13.html
+ */
+CHARSETS['Z'] = {
+  '#': '£',
+  '@': '§',
+  '[': '¡',
+  '\\': 'Ñ',
+  ']': '¿',
+  '{': '°',
+  '|': 'ñ',
+  '}': 'ç'
+};
+
+/**
+ * Swedish character set
+ * ESC (H or ESC (7
+ * Reference: http://vt100.net/docs/vt220-rm/table2-14.html
+ */
+CHARSETS['H'] =
+CHARSETS['7'] = {
+  '@': 'É',
+  '[': 'Ä',
+  '\\': 'Ö',
+  ']': 'Å',
+  '^': 'Ü',
+  '`': 'é',
+  '{': 'ä',
+  '|': 'ö',
+  '}': 'å',
+  '~': 'ü'
+};
+
+/**
+ * Swiss character set
+ * ESC (=
+ * Reference: http://vt100.net/docs/vt220-rm/table2-15.html
+ */
+CHARSETS['='] = {
+  '#': 'ù',
+  '@': 'à',
+  '[': 'é',
+  '\\': 'ç',
+  ']': 'ê',
+  '^': 'î',
+  '_': 'è',
+  '`': 'ô',
+  '{': 'ä',
+  '|': 'ö',
+  '}': 'ü',
+  '~': 'û'
+};

src/CompositionHelper.js

@@ -1,201 +0,0 @@
-/**
- * xterm.js: xterm, in the browser
- * Copyright (c) 2014-2016, SourceLair Private Company (www.sourcelair.com (MIT License)
- */
-
-/**
- * Encapsulates the logic for handling compositionstart, compositionupdate and compositionend
- * events, displaying the in-progress composition to the UI and forwarding the final composition
- * to the handler.
- * @param {HTMLTextAreaElement} textarea The textarea that xterm uses for input.
- * @param {HTMLElement} compositionView The element to display the in-progress composition in.
- * @param {Terminal} terminal The Terminal to forward the finished composition to.
- */
-function CompositionHelper(textarea, compositionView, terminal) {
-  this.textarea = textarea;
-  this.compositionView = compositionView;
-  this.terminal = terminal;
-
-  // Whether input composition is currently happening, eg. via a mobile keyboard, speech input
-  // or IME. This variable determines whether the compositionText should be displayed on the UI.
-  this.isComposing = false;
-
-  // The input currently being composed, eg. via a mobile keyboard, speech input or IME.
-  this.compositionText = null;
-
-  // The position within the input textarea's value of the current composition.
-  this.compositionPosition = { start: null, end: null };
-
-  // Whether a composition is in the process of being sent, setting this to false will cancel
-  // any in-progress composition.
-  this.isSendingComposition = false;
-}
-
-/**
- * Handles the compositionstart event, activating the composition view.
- */
-CompositionHelper.prototype.compositionstart = function() {
-  this.isComposing = true;
-  this.compositionPosition.start = this.textarea.value.length;
-  this.compositionView.textContent = '';
-  this.compositionView.classList.add('active');
-};
-
-/**
- * Handles the compositionupdate event, updating the composition view.
- * @param {CompositionEvent} ev The event.
- */
-CompositionHelper.prototype.compositionupdate = function(ev) {
-  this.compositionView.textContent = ev.data;
-  this.updateCompositionElements();
-  var self = this;
-  setTimeout(function() {
-    self.compositionPosition.end = self.textarea.value.length;
-  }, 0);
-};
-
-/**
- * Handles the compositionend event, hiding the composition view and sending the composition to
- * the handler.
- */
-CompositionHelper.prototype.compositionend = function() {
-  this.finalizeComposition(true);
-};
-
-/**
- * Handles the keydown event, routing any necessary events to the CompositionHelper functions.
- * @return Whether the Terminal should continue processing the keydown event.
- */
-CompositionHelper.prototype.keydown = function(ev) {
-  if (this.isComposing || this.isSendingComposition) {
-    if (ev.keyCode === 229) {
-      // Continue composing if the keyCode is the "composition character"
-      return false;
-    } else if (ev.keyCode === 16 || ev.keyCode === 17 || ev.keyCode === 18) {
-      // Continue composing if the keyCode is a modifier key
-      return false;
-    } else {
-      // Finish composition immediately. This is mainly here for the case where enter is
-      // pressed and the handler needs to be triggered before the command is executed.
-      this.finalizeComposition(false);
-    }
-  }
-
-  if (ev.keyCode === 229) {
-    // If the "composition character" is used but gets to this point it means a non-composition
-    // character (eg. numbers and punctuation) was pressed when the IME was active.
-    this.handleAnyTextareaChanges();
-    return false;
-  }
-
-  return true;
-};
-
-/**
- * Finalizes the composition, resuming regular input actions. This is called when a composition
- * is ending.
- * @param {boolean} waitForPropogation Whether to wait for events to propogate before sending
- *   the input. This should be false if a non-composition keystroke is entered before the
- *   compositionend event is triggered, such as enter, so that the composition is send before
- *   the command is executed.
- */
-CompositionHelper.prototype.finalizeComposition = function(waitForPropogation) {
-  this.compositionView.classList.remove('active');
-  this.isComposing = false;
-  this.clearTextareaPosition();
-
-  if (!waitForPropogation) {
-    // Cancel any delayed composition send requests and send the input immediately.
-    this.isSendingComposition = false;
-    var input = this.textarea.value.substring(this.compositionPosition.start, this.compositionPosition.end);
-    this.terminal.handler(input);
-  } else {
-    // Make a deep copy of the composition position here as a new compositionstart event may
-    // fire before the setTimeout executes.
-    var currentCompositionPosition = {
-      start: this.compositionPosition.start,
-      end: this.compositionPosition.end,
-    }
-
-    // Since composition* events happen before the changes take place in the textarea on most
-    // browsers, use a setTimeout with 0ms time to allow the native compositionend event to
-    // complete. This ensures the correct character is retrieved, this solution was used
-    // because:
-    // - The compositionend event's data property is unreliable, at least on Chromium
-    // - The last compositionupdate event's data property does not always accurately describe
-    //   the character, a counter example being Korean where an ending consonsant can move to
-    //   the following character if the following input is a vowel.
-    var self = this;
-    this.isSendingComposition = true;
-    setTimeout(function () {
-      // Ensure that the input has not already been sent
-      if (self.isSendingComposition) {
-        self.isSendingComposition = false;
-        var input;
-        if (self.isComposing) {
-          // Use the end position to get the string if a new composition has started.
-          input = self.textarea.value.substring(currentCompositionPosition.start, currentCompositionPosition.end);
-        } else {
-          // Don't use the end position here in order to pick up any characters after the
-          // composition has finished, for example when typing a non-composition character
-          // (eg. 2) after a composition character.
-          input = self.textarea.value.substring(currentCompositionPosition.start);
-        }
-        self.terminal.handler(input);
-      }
-    }, 0);
-  }
-};
-
-/**
- * Apply any changes made to the textarea after the current event chain is allowed to complete.
- * This should be called when not currently composing but a keydown event with the "composition
- * character" (229) is triggered, in order to allow non-composition text to be entered when an
- * IME is active.
- */
-CompositionHelper.prototype.handleAnyTextareaChanges = function() {
-  var oldValue = this.textarea.value;
-  var self = this;
-  setTimeout(function() {
-    // Ignore if a composition has started since the timeout
-    if (!self.isComposing) {
-      var newValue = self.textarea.value;
-      var diff = newValue.replace(oldValue, '');
-      if (diff.length > 0) {
-        self.terminal.handler(diff);
-      }
-    }
-  }, 0);
-};
-
-/**
- * Positions the composition view on top of the cursor and the textarea just below it (so the
- * IME helper dialog is positioned correctly).
- */
-CompositionHelper.prototype.updateCompositionElements = function(dontRecurse) {
-  if (!this.isComposing) {
-    return;
-  }
-  var cursor = this.terminal.element.querySelector('.terminal-cursor');
-  if (cursor) {
-    this.compositionView.style.left = cursor.offsetLeft + 'px';
-    this.compositionView.style.top = cursor.offsetTop + 'px';
-    var compositionViewBounds = this.compositionView.getBoundingClientRect();
-    this.textarea.style.left = cursor.offsetLeft + compositionViewBounds.width + 'px';
-    this.textarea.style.top = (cursor.offsetTop + cursor.offsetHeight) + 'px';
-  }
-  if (!dontRecurse) {
-    setTimeout(this.updateCompositionElements.bind(this, true), 0);
-  }
-};
-
-/**
- * Clears the textarea's position so that the cursor does not blink on IE.
- * @private
- */
-CompositionHelper.prototype.clearTextareaPosition = function() {
-  this.textarea.style.left = '';
-  this.textarea.style.top = '';
-};
-
-export { CompositionHelper };

src/CompositionHelper.test.ts

@@ -1,20 +1,20 @@
-var assert = require('chai').assert;
-var Terminal = require('../src/xterm');
+import { assert } from 'chai';
+import { CompositionHelper } from './CompositionHelper';
 
-describe('CompositionHelper', function () {
-  var terminal;
-  var compositionHelper;
-  var compositionView;
-  var textarea;
-  var handledText;
+describe('CompositionHelper', () => {
+  let terminal;
+  let compositionHelper;
+  let compositionView;
+  let textarea;
+  let handledText;
 
-  beforeEach(function () {
+  beforeEach(() => {
     compositionView = {
       classList: {
-        add: function () {},
-        remove: function () {},
+        add: () => {},
+        remove: () => {},
       },
-      getBoundingClientRect: function () {
+      getBoundingClientRect: () => {
         return { width: 0 };
       },
       style: {
@@ -32,7 +32,7 @@ describe('CompositionHelper', function () {
     };
     terminal = {
       element: {
-        querySelector: function () {
+        querySelector: () => {
           return { offsetLeft: 0, offsetTop: 0 };
         }
       },
@@ -41,53 +41,26 @@ describe('CompositionHelper', function () {
       }
     };
     handledText = '';
-    compositionHelper = new Terminal.CompositionHelper(textarea, compositionView, terminal);
+    compositionHelper = new CompositionHelper(textarea, compositionView, terminal);
   });
 
-  describe('Public API', function () {
-    it('should define CompositionHelper.prototype.compositionstart', function () {
-      assert.isDefined(Terminal.CompositionHelper.prototype.compositionstart);
-    });
-    it('should define CompositionHelper.prototype.compositionupdate', function () {
-      assert.isDefined(Terminal.CompositionHelper.prototype.compositionupdate);
-    });
-    it('should define CompositionHelper.prototype.compositionend', function () {
-      assert.isDefined(Terminal.CompositionHelper.prototype.compositionend);
-    });
-    it('should define CompositionHelper.prototype.finalizeComposition', function () {
-      assert.isDefined(Terminal.CompositionHelper.prototype.finalizeComposition);
-    });
-    it('should define CompositionHelper.prototype.handleAnyTextareaChanges', function () {
-      assert.isDefined(Terminal.CompositionHelper.prototype.handleAnyTextareaChanges);
-    });
-    it('should define CompositionHelper.prototype.updateCompositionElements', function () {
-      assert.isDefined(Terminal.CompositionHelper.prototype.updateCompositionElements);
-    });
-    it('should define CompositionHelper.isComposing', function () {
-      assert.isDefined(compositionHelper.isComposing);
-    });
-    it('should define CompositionHelper.isSendingComposition', function () {
-      assert.isDefined(compositionHelper.isSendingComposition);
-    });
-  });
-
-  describe('Input', function () {
+  describe('Input', () => {
     it('Should insert simple characters', function (done) {
       // First character 'ㅇ'
       compositionHelper.compositionstart();
       compositionHelper.compositionupdate({ data: 'ㅇ' });
       textarea.value = 'ㅇ';
-      setTimeout(function() { // wait for any textarea updates
+      setTimeout(() => { // wait for any textarea updates
         compositionHelper.compositionend();
-        setTimeout(function() { // wait for any textarea updates
+        setTimeout(() => { // wait for any textarea updates
           assert.equal(handledText, 'ㅇ');
           // Second character 'ㅇ'
           compositionHelper.compositionstart();
           compositionHelper.compositionupdate({ data: 'ㅇ' });
           textarea.value = 'ㅇㅇ';
-          setTimeout(function() { // wait for any textarea updates
+          setTimeout(() => { // wait for any textarea updates
             compositionHelper.compositionend();
-            setTimeout(function() { // wait for any textarea updates
+            setTimeout(() => { // wait for any textarea updates
               assert.equal(handledText, 'ㅇㅇ');
               done();
             }, 0);
@@ -101,29 +74,29 @@ describe('CompositionHelper', function () {
       compositionHelper.compositionstart();
       compositionHelper.compositionupdate({ data: 'ㅇ' });
       textarea.value = 'ㅇ';
-      setTimeout(function() { // wait for any textarea updates
+      setTimeout(() => { // wait for any textarea updates
         compositionHelper.compositionupdate({ data: '아' });
         textarea.value = '아';
-        setTimeout(function() { // wait for any textarea updates
+        setTimeout(() => { // wait for any textarea updates
           compositionHelper.compositionupdate({ data: '앙' });
           textarea.value = '앙';
-          setTimeout(function() { // wait for any textarea updates
+          setTimeout(() => { // wait for any textarea updates
             compositionHelper.compositionend();
-            setTimeout(function() { // wait for any textarea updates
+            setTimeout(() => { // wait for any textarea updates
               assert.equal(handledText, '앙');
               // Second character '앙'
               compositionHelper.compositionstart();
               compositionHelper.compositionupdate({ data: 'ㅇ' });
               textarea.value = '앙ㅇ';
-              setTimeout(function() { // wait for any textarea updates
+              setTimeout(() => { // wait for any textarea updates
                 compositionHelper.compositionupdate({ data: '아' });
                 textarea.value = '앙아';
-                setTimeout(function() { // wait for any textarea updates
+                setTimeout(() => { // wait for any textarea updates
                   compositionHelper.compositionupdate({ data: '앙' });
                   textarea.value = '앙앙';
-                  setTimeout(function() { // wait for any textarea updates
+                  setTimeout(() => { // wait for any textarea updates
                     compositionHelper.compositionend();
-                    setTimeout(function() { // wait for any textarea updates
+                    setTimeout(() => { // wait for any textarea updates
                       assert.equal(handledText, '앙앙');
                       done();
                     }, 0);
@@ -141,21 +114,21 @@ describe('CompositionHelper', function () {
       compositionHelper.compositionstart();
       compositionHelper.compositionupdate({ data: 'ㅇ' });
       textarea.value = 'ㅇ';
-      setTimeout(function() { // wait for any textarea updates
+      setTimeout(() => { // wait for any textarea updates
         compositionHelper.compositionupdate({ data: '아' });
         textarea.value = '아';
-        setTimeout(function() { // wait for any textarea updates
+        setTimeout(() => { // wait for any textarea updates
           // Start second character '아' in first character
           compositionHelper.compositionupdate({ data: '앙' });
           textarea.value = '앙';
-          setTimeout(function() { // wait for any textarea updates
+          setTimeout(() => { // wait for any textarea updates
             compositionHelper.compositionend();
             compositionHelper.compositionstart();
             compositionHelper.compositionupdate({ data: '아' });
-            textarea.value = '아아'
-            setTimeout(function() { // wait for any textarea updates
+            textarea.value = '아아';
+            setTimeout(() => { // wait for any textarea updates
               compositionHelper.compositionend();
-              setTimeout(function() { // wait for any textarea updates
+              setTimeout(() => { // wait for any textarea updates
                 assert.equal(handledText, '아아');
                 done();
               }, 0);
@@ -170,16 +143,16 @@ describe('CompositionHelper', function () {
       compositionHelper.compositionstart();
       compositionHelper.compositionupdate({ data: 'd' });
       textarea.value = 'd';
-      setTimeout(function() { // wait for any textarea updates
+      setTimeout(() => { // wait for any textarea updates
         compositionHelper.compositionupdate({ data: 'だ' });
         textarea.value = 'だ';
-        setTimeout(function() { // wait for any textarea updates
+        setTimeout(() => { // wait for any textarea updates
           // Second character 'あ'
           compositionHelper.compositionupdate({ data: 'だあ' });
           textarea.value = 'だあ';
-          setTimeout(function() { // wait for any textarea updates
+          setTimeout(() => { // wait for any textarea updates
             compositionHelper.compositionend();
-            setTimeout(function() { // wait for any textarea updates
+            setTimeout(() => { // wait for any textarea updates
               assert.equal(handledText, 'だあ');
               done();
             }, 0);
@@ -193,20 +166,20 @@ describe('CompositionHelper', function () {
       compositionHelper.compositionstart();
       compositionHelper.compositionupdate({ data: 'd' });
       textarea.value = 'd';
-      setTimeout(function() { // wait for any textarea updates
+      setTimeout(() => { // wait for any textarea updates
         compositionHelper.compositionupdate({ data: 'だ' });
         textarea.value = 'だ';
-        setTimeout(function() { // wait for any textarea updates
+        setTimeout(() => { // wait for any textarea updates
           // Second character 'ー'
           compositionHelper.compositionupdate({ data: 'だー' });
           textarea.value = 'だー';
-          setTimeout(function() { // wait for any textarea updates
+          setTimeout(() => { // wait for any textarea updates
             // Convert to katakana 'ダー'
             compositionHelper.compositionupdate({ data: 'ダー' });
             textarea.value = 'ダー';
-            setTimeout(function() { // wait for any textarea updates
+            setTimeout(() => { // wait for any textarea updates
               compositionHelper.compositionend();
-              setTimeout(function() { // wait for any textarea updates
+              setTimeout(() => { // wait for any textarea updates
                 assert.equal(handledText, 'ダー');
                 done();
               }, 0);
@@ -214,27 +187,27 @@ describe('CompositionHelper', function () {
           }, 0);
         }, 0);
       }, 0);
-    })
+    });
 
     it('Should insert multi-character compositions that are converted to other characters with different lengths', function (done) {
       // First character 'い'
       compositionHelper.compositionstart();
       compositionHelper.compositionupdate({ data: 'い' });
       textarea.value = 'い';
-      setTimeout(function() { // wait for any textarea updates
+      setTimeout(() => { // wait for any textarea updates
         // Second character 'ま'
         compositionHelper.compositionupdate({ data: 'いm' });
         textarea.value = 'いm';
-        setTimeout(function() { // wait for any textarea updates
+        setTimeout(() => { // wait for any textarea updates
           compositionHelper.compositionupdate({ data: 'いま' });
           textarea.value = 'いま';
-          setTimeout(function() { // wait for any textarea updates
+          setTimeout(() => { // wait for any textarea updates
             // Convert to kanji '今'
             compositionHelper.compositionupdate({ data: '今' });
             textarea.value = '今';
-            setTimeout(function() { // wait for any textarea updates
+            setTimeout(() => { // wait for any textarea updates
               compositionHelper.compositionend();
-              setTimeout(function() { // wait for any textarea updates
+              setTimeout(() => { // wait for any textarea updates
                 assert.equal(handledText, '今');
                 done();
               }, 0);
@@ -249,11 +222,11 @@ describe('CompositionHelper', function () {
       compositionHelper.compositionstart();
       compositionHelper.compositionupdate({ data: 'ㅇ' });
       textarea.value = 'ㅇ';
-      setTimeout(function() { // wait for any textarea updates
+      setTimeout(() => { // wait for any textarea updates
         compositionHelper.compositionend();
         // Second character '1' (a non-composition character)
         textarea.value = 'ㅇ1';
-        setTimeout(function() { // wait for any textarea updates
+        setTimeout(() => { // wait for any textarea updates
           assert.equal(handledText, 'ㅇ1');
           done();
         }, 0);

src/CompositionHelper.ts

@@ -0,0 +1,229 @@
+/**
+ * @license MIT
+ */
+
+import { ITerminal } from './Interfaces';
+
+interface IPosition {
+  start: number;
+  end: number;
+}
+
+/**
+ * Encapsulates the logic for handling compositionstart, compositionupdate and compositionend
+ * events, displaying the in-progress composition to the UI and forwarding the final composition
+ * to the handler.
+ */
+export class CompositionHelper {
+  /**
+   * Whether input composition is currently happening, eg. via a mobile keyboard, speech input or
+   * IME. This variable determines whether the compositionText should be displayed on the UI.
+   */
+  private isComposing: boolean;
+
+  /**
+   * The position within the input textarea's value of the current composition.
+   */
+  private compositionPosition: IPosition;
+
+  /**
+   * Whether a composition is in the process of being sent, setting this to false will cancel any
+   * in-progress composition.
+   */
+  private isSendingComposition: boolean;
+
+  /**
+   * Creates a new CompositionHelper.
+   * @param textarea The textarea that xterm uses for input.
+   * @param compositionView The element to display the in-progress composition in.
+   * @param terminal The Terminal to forward the finished composition to.
+   */
+  constructor(
+    private textarea: HTMLTextAreaElement,
+    private compositionView: HTMLElement,
+    private terminal: ITerminal
+  ) {
+    this.isComposing = false;
+    this.isSendingComposition = false;
+    this.compositionPosition = { start: null, end: null };
+  }
+
+  /**
+   * Handles the compositionstart event, activating the composition view.
+   */
+  public compositionstart() {
+    this.isComposing = true;
+    this.compositionPosition.start = this.textarea.value.length;
+    this.compositionView.textContent = '';
+    this.compositionView.classList.add('active');
+  }
+
+  /**
+   * Handles the compositionupdate event, updating the composition view.
+   * @param {CompositionEvent} ev The event.
+   */
+  public compositionupdate(ev: CompositionEvent) {
+    this.compositionView.textContent = ev.data;
+    this.updateCompositionElements();
+    setTimeout(() => {
+      this.compositionPosition.end = this.textarea.value.length;
+    }, 0);
+  }
+
+  /**
+   * Handles the compositionend event, hiding the composition view and sending the composition to
+   * the handler.
+   */
+  public compositionend() {
+    this.finalizeComposition(true);
+  }
+
+  /**
+   * Handles the keydown event, routing any necessary events to the CompositionHelper functions.
+   * @param ev The keydown event.
+   * @return Whether the Terminal should continue processing the keydown event.
+   */
+  public keydown(ev: KeyboardEvent) {
+    if (this.isComposing || this.isSendingComposition) {
+      if (ev.keyCode === 229) {
+        // Continue composing if the keyCode is the "composition character"
+        return false;
+      } else if (ev.keyCode === 16 || ev.keyCode === 17 || ev.keyCode === 18) {
+        // Continue composing if the keyCode is a modifier key
+        return false;
+      } else {
+        // Finish composition immediately. This is mainly here for the case where enter is
+        // pressed and the handler needs to be triggered before the command is executed.
+        this.finalizeComposition(false);
+      }
+    }
+
+    if (ev.keyCode === 229) {
+      // If the "composition character" is used but gets to this point it means a non-composition
+      // character (eg. numbers and punctuation) was pressed when the IME was active.
+      this.handleAnyTextareaChanges();
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Finalizes the composition, resuming regular input actions. This is called when a composition
+   * is ending.
+   * @param waitForPropogation Whether to wait for events to propogate before sending
+   *   the input. This should be false if a non-composition keystroke is entered before the
+   *   compositionend event is triggered, such as enter, so that the composition is send before
+   *   the command is executed.
+   */
+  private finalizeComposition(waitForPropogation: boolean) {
+    this.compositionView.classList.remove('active');
+    this.isComposing = false;
+    this.clearTextareaPosition();
+
+    if (!waitForPropogation) {
+      // Cancel any delayed composition send requests and send the input immediately.
+      this.isSendingComposition = false;
+      const input = this.textarea.value.substring(this.compositionPosition.start, this.compositionPosition.end);
+      this.terminal.handler(input);
+    } else {
+      // Make a deep copy of the composition position here as a new compositionstart event may
+      // fire before the setTimeout executes.
+      const currentCompositionPosition = {
+        start: this.compositionPosition.start,
+        end: this.compositionPosition.end,
+      };
+
+      // Since composition* events happen before the changes take place in the textarea on most
+      // browsers, use a setTimeout with 0ms time to allow the native compositionend event to
+      // complete. This ensures the correct character is retrieved, this solution was used
+      // because:
+      // - The compositionend event's data property is unreliable, at least on Chromium
+      // - The last compositionupdate event's data property does not always accurately describe
+      //   the character, a counter example being Korean where an ending consonsant can move to
+      //   the following character if the following input is a vowel.
+      this.isSendingComposition = true;
+      setTimeout(() => {
+        // Ensure that the input has not already been sent
+        if (this.isSendingComposition) {
+          this.isSendingComposition = false;
+          let input;
+          if (this.isComposing) {
+            // Use the end position to get the string if a new composition has started.
+            input = this.textarea.value.substring(currentCompositionPosition.start, currentCompositionPosition.end);
+          } else {
+            // Don't use the end position here in order to pick up any characters after the
+            // composition has finished, for example when typing a non-composition character
+            // (eg. 2) after a composition character.
+            input = this.textarea.value.substring(currentCompositionPosition.start);
+          }
+          this.terminal.handler(input);
+        }
+      }, 0);
+    }
+  }
+
+  /**
+   * Apply any changes made to the textarea after the current event chain is allowed to complete.
+   * This should be called when not currently composing but a keydown event with the "composition
+   * character" (229) is triggered, in order to allow non-composition text to be entered when an
+   * IME is active.
+   */
+  private handleAnyTextareaChanges() {
+    const oldValue = this.textarea.value;
+    setTimeout(() => {
+      // Ignore if a composition has started since the timeout
+      if (!this.isComposing) {
+        const newValue = this.textarea.value;
+        const diff = newValue.replace(oldValue, '');
+        if (diff.length > 0) {
+          this.terminal.handler(diff);
+        }
+      }
+    }, 0);
+  }
+
+  /**
+   * Positions the composition view on top of the cursor and the textarea just below it (so the
+   * IME helper dialog is positioned correctly).
+   * @param dontRecurse Whether to use setTimeout to recursively trigger another update, this is
+   *   necessary as the IME events across browsers are not consistently triggered.
+   */
+  public updateCompositionElements(dontRecurse?: boolean) {
+    if (!this.isComposing) {
+      return;
+    }
+    const cursor = <HTMLElement>this.terminal.element.querySelector('.terminal-cursor');
+    if (cursor) {
+      // Take .xterm-rows offsetTop into account as well in case it's positioned absolutely within
+      // the .xterm element.
+      const xtermRows = <HTMLElement>this.terminal.element.querySelector('.xterm-rows');
+      const cursorTop = xtermRows.offsetTop + cursor.offsetTop;
+
+      this.compositionView.style.left = cursor.offsetLeft + 'px';
+      this.compositionView.style.top = cursorTop + 'px';
+      this.compositionView.style.height = cursor.offsetHeight + 'px';
+      this.compositionView.style.lineHeight = cursor.offsetHeight + 'px';
+      // Sync the textarea to the exact position of the composition view so the IME knows where the
+      // text is.
+      const compositionViewBounds = this.compositionView.getBoundingClientRect();
+      this.textarea.style.left = cursor.offsetLeft + 'px';
+      this.textarea.style.top = cursorTop + 'px';
+      this.textarea.style.width = compositionViewBounds.width + 'px';
+      this.textarea.style.height = compositionViewBounds.height + 'px';
+      this.textarea.style.lineHeight = compositionViewBounds.height + 'px';
+    }
+    if (!dontRecurse) {
+      setTimeout(() => this.updateCompositionElements(true), 0);
+    }
+  };
+
+  /**
+   * Clears the textarea's position so that the cursor does not blink on IE.
+   * @private
+   */
+  private clearTextareaPosition() {
+    this.textarea.style.left = '';
+    this.textarea.style.top = '';
+  };
+}

src/EscapeSequences.ts

@@ -0,0 +1,78 @@
+/**
+ * @license MIT
+ */
+
+/**
+ * C0 control codes
+ * See = https://en.wikipedia.org/wiki/C0_and_C1_control_codes
+ */
+export namespace C0 {
+  /** Null (Caret = ^@, C = \0) */
+  export const NUL = '\x00';
+  /** Start of Heading (Caret = ^A) */
+  export const SOH = '\x01';
+  /** Start of Text (Caret = ^B) */
+  export const STX = '\x02';
+  /** End of Text (Caret = ^C) */
+  export const ETX = '\x03';
+  /** End of Transmission (Caret = ^D) */
+  export const EOT = '\x04';
+  /** Enquiry (Caret = ^E) */
+  export const ENQ = '\x05';
+  /** Acknowledge (Caret = ^F) */
+  export const ACK = '\x06';
+  /** Bell (Caret = ^G, C = \a) */
+  export const BEL = '\x07';
+  /** Backspace (Caret = ^H, C = \b) */
+  export const BS  = '\x08';
+  /** Character Tabulation, Horizontal Tabulation (Caret = ^I, C = \t) */
+  export const HT  = '\x09';
+  /** Line Feed (Caret = ^J, C = \n) */
+  export const LF  = '\x0a';
+  /** Line Tabulation, Vertical Tabulation (Caret = ^K, C = \v) */
+  export const VT  = '\x0b';
+  /** Form Feed (Caret = ^L, C = \f) */
+  export const FF  = '\x0c';
+  /** Carriage Return (Caret = ^M, C = \r) */
+  export const CR  = '\x0d';
+  /** Shift Out (Caret = ^N) */
+  export const SO  = '\x0e';
+  /** Shift In (Caret = ^O) */
+  export const SI  = '\x0f';
+  /** Data Link Escape (Caret = ^P) */
+  export const DLE = '\x10';
+  /** Device Control One (XON) (Caret = ^Q) */
+  export const DC1 = '\x11';
+  /** Device Control Two (Caret = ^R) */
+  export const DC2 = '\x12';
+  /** Device Control Three (XOFF) (Caret = ^S) */
+  export const DC3 = '\x13';
+  /** Device Control Four (Caret = ^T) */
+  export const DC4 = '\x14';
+  /** Negative Acknowledge (Caret = ^U) */
+  export const NAK = '\x15';
+  /** Synchronous Idle (Caret = ^V) */
+  export const SYN = '\x16';
+  /** End of Transmission Block (Caret = ^W) */
+  export const ETB = '\x17';
+  /** Cancel (Caret = ^X) */
+  export const CAN = '\x18';
+  /** End of Medium (Caret = ^Y) */
+  export const EM  = '\x19';
+  /** Substitute (Caret = ^Z) */
+  export const SUB = '\x1a';
+  /** Escape (Caret = ^[, C = \e) */
+  export const ESC = '\x1b';
+  /** File Separator (Caret = ^\) */
+  export const FS  = '\x1c';
+  /** Group Separator (Caret = ^]) */
+  export const GS  = '\x1d';
+  /** Record Separator (Caret = ^^) */
+  export const RS  = '\x1e';
+  /** Unit Separator (Caret = ^_) */
+  export const US  = '\x1f';
+  /** Space */
+  export const SP  = '\x20';
+  /** Delete (Caret = ^?) */
+  export const DEL = '\x7f';
+};

src/EventEmitter.js

@@ -1,65 +0,0 @@
-/**
- * xterm.js: xterm, in the browser
- * Copyright (c) 2014-2016, SourceLair Private Company (www.sourcelair.com (MIT License)
- */
-
-function EventEmitter() {
-  this._events = this._events || {};
-}
-
-EventEmitter.prototype.addListener = function(type, listener) {
-  this._events[type] = this._events[type] || [];
-  this._events[type].push(listener);
-};
-
-EventEmitter.prototype.on = EventEmitter.prototype.addListener;
-
-EventEmitter.prototype.removeListener = function(type, listener) {
-  if (!this._events[type]) return;
-
-  var obj = this._events[type]
-  , i = obj.length;
-
-  while (i--) {
-    if (obj[i] === listener || obj[i].listener === listener) {
-      obj.splice(i, 1);
-      return;
-    }
-  }
-};
-
-EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
-
-EventEmitter.prototype.removeAllListeners = function(type) {
-  if (this._events[type]) delete this._events[type];
-};
-
-EventEmitter.prototype.once = function(type, listener) {
-  var self = this;
-  function on() {
-    var args = Array.prototype.slice.call(arguments);
-    this.removeListener(type, on);
-    return listener.apply(this, args);
-  }
-  on.listener = listener;
-  return this.on(type, on);
-};
-
-EventEmitter.prototype.emit = function(type) {
-  if (!this._events[type]) return;
-
-  var args = Array.prototype.slice.call(arguments, 1)
-  , obj = this._events[type]
-  , l = obj.length
-  , i = 0;
-
-  for (; i < l; i++) {
-    obj[i].apply(this, args);
-  }
-};
-
-EventEmitter.prototype.listeners = function(type) {
-  return this._events[type] = this._events[type] || [];
-};
-
-export { EventEmitter };

src/EventEmitter.test.ts

@@ -0,0 +1,84 @@
+import { assert } from 'chai';
+import { EventEmitter } from './EventEmitter';
+
+describe('EventEmitter', () => {
+  let eventEmitter: EventEmitter;
+
+  beforeEach(() => {
+    eventEmitter = new EventEmitter();
+  });
+
+  describe('once', () => {
+    it('should trigger the listener only once', () => {
+      let count = 0;
+      const listener = () => count++;
+      eventEmitter.once('test', listener);
+      eventEmitter.emit('test');
+      assert.equal(count, 1);
+      eventEmitter.emit('test');
+      assert.equal(count, 1);
+    });
+  });
+
+  describe('emit', () => {
+    it('should emit events to listeners', () => {
+      let count1 = 0;
+      let count2 = 0;
+      const listener1 = () => count1++;
+      const listener2 = () => count2++;
+      eventEmitter.on('test', listener1);
+      eventEmitter.on('test', listener2);
+      eventEmitter.emit('test');
+      assert.equal(count1, 1);
+      assert.equal(count2, 1);
+      eventEmitter.emit('test');
+      assert.equal(count1, 2);
+      assert.equal(count2, 2);
+    });
+
+    it('should manage multiple listener types', () => {
+      let count1 = 0;
+      let count2 = 0;
+      const listener1 = () => count1++;
+      const listener2 = () => count2++;
+      eventEmitter.on('test', listener1);
+      eventEmitter.on('foo', listener2);
+      eventEmitter.emit('test');
+      assert.equal(count1, 1);
+      assert.equal(count2, 0);
+      eventEmitter.emit('foo');
+      assert.equal(count1, 1);
+      assert.equal(count2, 1);
+    });
+  });
+
+  describe('listeners', () => {
+    it('should return listeners for the type requested', () => {
+      assert.equal(eventEmitter.listeners('test').length, 0);
+      const listener = () => {};
+      eventEmitter.on('test', listener);
+      assert.deepEqual(eventEmitter.listeners('test'), [listener]);
+    });
+  });
+
+  describe('off', () => {
+    it('should remove the specific listener', () => {
+      const listener1 = () => {};
+      const listener2 = () => {};
+      eventEmitter.on('foo', listener1);
+      eventEmitter.on('foo', listener2);
+      assert.equal(eventEmitter.listeners('foo').length, 2);
+      eventEmitter.off('foo', listener1);
+      assert.deepEqual(eventEmitter.listeners('foo'), [listener2]);
+    });
+  });
+
+  describe('removeAllListeners', () => {
+    it('should clear all listeners', () => {
+      eventEmitter.on('foo', () => {});
+      assert.equal(eventEmitter.listeners('foo').length, 1);
+      eventEmitter.removeAllListeners('foo');
+      assert.equal(eventEmitter.listeners('foo').length, 0);
+    });
+  });
+});

src/EventEmitter.ts

@@ -0,0 +1,72 @@
+/**
+ * @license MIT
+ */
+
+interface ListenerType {
+    (): void;
+    listener?: () => void;
+};
+
+export class EventEmitter {
+  private _events: {[type: string]: ListenerType[]};
+
+  constructor() {
+    // Restore the previous events if available, this will happen if the
+    // constructor is called multiple times on the same object (terminal reset).
+    this._events = this._events || {};
+  }
+
+  public on(type, listener): void {
+    this._events[type] = this._events[type] || [];
+    this._events[type].push(listener);
+  }
+
+  public off(type, listener): void {
+    if (!this._events[type]) {
+      return;
+    }
+
+    let obj = this._events[type];
+    let i = obj.length;
+
+    while (i--) {
+      if (obj[i] === listener || obj[i].listener === listener) {
+        obj.splice(i, 1);
+        return;
+      }
+    }
+  }
+
+  public removeAllListeners(type): void {
+    if (this._events[type]) {
+       delete this._events[type];
+    }
+  }
+
+  public once(type, listener): any {
+    function on() {
+      let args = Array.prototype.slice.call(arguments);
+      this.off(type, on);
+      return listener.apply(this, args);
+    }
+    (<any>on).listener = listener;
+    return this.on(type, on);
+  }
+
+  public emit(type): void {
+    if (!this._events[type]) {
+      return;
+    }
+
+    let args = Array.prototype.slice.call(arguments, 1);
+    let obj = this._events[type];
+
+    for (let i = 0; i < obj.length; i++) {
+      obj[i].apply(this, args);
+    }
+  }
+
+  public listeners(type): ListenerType[] {
+    return this._events[type] || [];
+  }
+}

src/InputHandler.test.ts

@@ -0,0 +1,49 @@
+import { assert } from 'chai';
+import { InputHandler } from './InputHandler';
+
+describe('InputHandler', () => {
+  describe('setCursorStyle', () => {
+    it('should call Terminal.setOption with correct params', () => {
+      let options = {};
+      let terminal = {
+        setOption: (option, value) => options[option] = value
+      };
+      let inputHandler = new InputHandler(terminal);
+
+      inputHandler.setCursorStyle([0]);
+      assert.equal(options['cursorStyle'], 'block');
+      assert.equal(options['cursorBlink'], true);
+
+      options = {};
+      inputHandler.setCursorStyle([1]);
+      assert.equal(options['cursorStyle'], 'block');
+      assert.equal(options['cursorBlink'], true);
+
+      options = {};
+      inputHandler.setCursorStyle([2]);
+      assert.equal(options['cursorStyle'], 'block');
+      assert.equal(options['cursorBlink'], false);
+
+      options = {};
+      inputHandler.setCursorStyle([3]);
+      assert.equal(options['cursorStyle'], 'underline');
+      assert.equal(options['cursorBlink'], true);
+
+      options = {};
+      inputHandler.setCursorStyle([4]);
+      assert.equal(options['cursorStyle'], 'underline');
+      assert.equal(options['cursorBlink'], false);
+
+      options = {};
+      inputHandler.setCursorStyle([5]);
+      assert.equal(options['cursorStyle'], 'bar');
+      assert.equal(options['cursorBlink'], true);
+
+      options = {};
+      inputHandler.setCursorStyle([6]);
+      assert.equal(options['cursorStyle'], 'bar');
+      assert.equal(options['cursorBlink'], false);
+
+    });
+  });
+});

src/Interfaces.ts

@@ -0,0 +1,146 @@
+/**
+ * @license MIT
+ */
+
+import { LinkMatcherOptions } from './Interfaces';
+import { LinkMatcherHandler, LinkMatcherValidationCallback } from './Types';
+
+export interface IBrowser {
+  isNode: boolean;
+  userAgent: string;
+  platform: string;
+  isFirefox: boolean;
+  isMSIE: boolean;
+  isMac: boolean;
+  isIpad: boolean;
+  isIphone: boolean;
+  isMSWindows: boolean;
+}
+
+export interface ITerminal {
+  element: HTMLElement;
+  rowContainer: HTMLElement;
+  textarea: HTMLTextAreaElement;
+  ybase: number;
+  ydisp: number;
+  lines: ICircularList<string>;
+  rows: number;
+  cols: number;
+  browser: IBrowser;
+  writeBuffer: string[];
+  children: HTMLElement[];
+  cursorHidden: boolean;
+  cursorState: number;
+  x: number;
+  y: number;
+  defAttr: number;
+
+  /**
+   * Emit the 'data' event and populate the given data.
+   * @param data The data to populate in the event.
+   */
+  handler(data: string);
+  on(event: string, callback: () => void);
+  scrollDisp(disp: number, suppressScrollEvent: boolean);
+  cancel(ev: Event, force?: boolean);
+  log(text: string): void;
+  emit(event: string, data: any);
+}
+
+export interface ICharMeasure {
+  width: number;
+  height: number;
+  measure(): void;
+}
+
+export interface ILinkifier {
+  linkifyRow(rowIndex: number): void;
+  attachHypertextLinkHandler(handler: LinkMatcherHandler): void;
+  registerLinkMatcher(regex: RegExp, handler: LinkMatcherHandler, options?: LinkMatcherOptions): number;
+  deregisterLinkMatcher(matcherId: number): boolean;
+}
+
+interface ICircularList<T> {
+  length: number;
+  maxLength: number;
+
+  forEach(callbackfn: (value: T, index: number, array: T[]) => void): void;
+  get(index: number): T;
+  set(index: number, value: T): void;
+  push(value: T): void;
+  pop(): T;
+  splice(start: number, deleteCount: number, ...items: T[]): void;
+  trimStart(count: number): void;
+  shiftElements(start: number, count: number, offset: number): void;
+}
+
+export interface LinkMatcherOptions {
+  /**
+   * The index of the link from the regex.match(text) call. This defaults to 0
+   * (for regular expressions without capture groups).
+   */
+  matchIndex?: number;
+  /**
+   * A callback that validates an individual link, returning true if valid and
+   * false if invalid.
+   */
+  validationCallback?: LinkMatcherValidationCallback;
+  /**
+   * The priority of the link matcher, this defines the order in which the link
+   * matcher is evaluated relative to others, from highest to lowest. The
+   * default value is 0.
+   */
+  priority?: number;
+}
+
+/**
+ * Handles actions generated by the parser.
+ */
+export interface IInputHandler {
+  addChar(char: string, code: number): void;
+
+  /** C0 BEL */ bell(): void;
+  /** C0 LF */ lineFeed(): void;
+  /** C0 CR */ carriageReturn(): void;
+  /** C0 BS */ backspace(): void;
+  /** C0 HT */ tab(): void;
+  /** C0 SO */ shiftOut(): void;
+  /** C0 SI */ shiftIn(): void;
+
+  /** CSI @ */ insertChars(params?: number[]): void;
+  /** CSI A */ cursorUp(params?: number[]): void;
+  /** CSI B */ cursorDown(params?: number[]): void;
+  /** CSI C */ cursorForward(params?: number[]): void;
+  /** CSI D */ cursorBackward(params?: number[]): void;
+  /** CSI E */ cursorNextLine(params?: number[]): void;
+  /** CSI F */ cursorPrecedingLine(params?: number[]): void;
+  /** CSI G */ cursorCharAbsolute(params?: number[]): void;
+  /** CSI H */ cursorPosition(params?: number[]): void;
+  /** CSI I */ cursorForwardTab(params?: number[]): void;
+  /** CSI J */ eraseInDisplay(params?: number[]): void;
+  /** CSI K */ eraseInLine(params?: number[]): void;
+  /** CSI L */ insertLines(params?: number[]): void;
+  /** CSI M */ deleteLines(params?: number[]): void;
+  /** CSI P */ deleteChars(params?: number[]): void;
+  /** CSI S */ scrollUp(params?: number[]): void;
+  /** CSI T */ scrollDown(params?: number[]): void;
+  /** CSI X */ eraseChars(params?: number[]): void;
+  /** CSI Z */ cursorBackwardTab(params?: number[]): void;
+  /** CSI ` */ charPosAbsolute(params?: number[]): void;
+  /** CSI a */ HPositionRelative(params?: number[]): void;
+  /** CSI b */ repeatPrecedingCharacter(params?: number[]): void;
+  /** CSI c */ sendDeviceAttributes(params?: number[]): void;
+  /** CSI d */ linePosAbsolute(params?: number[]): void;
+  /** CSI e */ VPositionRelative(params?: number[]): void;
+  /** CSI f */ HVPosition(params?: number[]): void;
+  /** CSI g */ tabClear(params?: number[]): void;
+  /** CSI h */ setMode(params?: number[]): void;
+  /** CSI l */ resetMode(params?: number[]): void;
+  /** CSI m */ charAttributes(params?: number[]): void;
+  /** CSI n */ deviceStatus(params?: number[]): void;
+  /** CSI p */ softReset(params?: number[]): void;
+  /** CSI q */ setCursorStyle(params?: number[]): void;
+  /** CSI r */ setScrollRegion(params?: number[]): void;
+  /** CSI s */ saveCursor(params?: number[]): void;
+  /** CSI u */ restoreCursor(params?: number[]): void;
+}

src/Linkifier.test.ts

@@ -0,0 +1,187 @@
+/**
+ * @license MIT
+ */
+import jsdom = require('jsdom');
+import { assert } from 'chai';
+import { ITerminal, ILinkifier } from './Interfaces';
+import { Linkifier } from './Linkifier';
+import { LinkMatcher } from './Types';
+
+class TestLinkifier extends Linkifier {
+  constructor() {
+    Linkifier.TIME_BEFORE_LINKIFY = 0;
+    super();
+  }
+
+  public get linkMatchers(): LinkMatcher[] { return this._linkMatchers; }
+}
+
+describe('Linkifier', () => {
+  let window: Window;
+  let document: Document;
+
+  let container: HTMLElement;
+  let rows: HTMLElement[];
+  let linkifier: TestLinkifier;
+
+  beforeEach(done => {
+    jsdom.env('', (err, w) => {
+      window = w;
+      document = window.document;
+      linkifier = new TestLinkifier();
+      done();
+    });
+  });
+
+  function addRow(html: string) {
+    const element = document.createElement('div');
+    element.innerHTML = html;
+    container.appendChild(element);
+    rows.push(element);
+  }
+
+  describe('before attachToDom', () => {
+    it('should allow link matcher registration', done => {
+      assert.doesNotThrow(() => {
+        const linkMatcherId = linkifier.registerLinkMatcher(/foo/, () => {});
+        assert.isTrue(linkifier.deregisterLinkMatcher(linkMatcherId));
+        done();
+      });
+    });
+  });
+
+  describe('after attachToDom', () => {
+    beforeEach(() => {
+      rows = [];
+      linkifier.attachToDom(document, rows);
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    });
+
+    function clickElement(element: Node) {
+      const event = document.createEvent('MouseEvent');
+      event.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+      element.dispatchEvent(event);
+    }
+
+    function assertLinkifiesEntireRow(uri: string, done: MochaDone) {
+        addRow(uri);
+        linkifier.linkifyRow(0);
+        setTimeout(() => {
+          assert.equal((<HTMLElement>rows[0].firstChild).tagName, 'A');
+          assert.equal((<HTMLElement>rows[0].firstChild).textContent, uri);
+          done();
+        }, 0);
+    }
+
+    describe('http links', () => {
+      function assertLinkifiesEntireRow(uri: string, done: MochaDone) {
+        addRow(uri);
+        linkifier.linkifyRow(0);
+        setTimeout(() => {
+          assert.equal((<HTMLElement>rows[0].firstChild).tagName, 'A');
+          assert.equal((<HTMLElement>rows[0].firstChild).textContent, uri);
+          done();
+        }, 0);
+      }
+      it('should allow ~ character in URI path', done => assertLinkifiesEntireRow('http://foo.com/a~b#c~d?e~f', done));
+    });
+
+    describe('link matcher', () => {
+      function assertLinkifiesRow(rowText: string, linkMatcherRegex: RegExp, expectedHtml: string, done: MochaDone) {
+        addRow(rowText);
+        linkifier.registerLinkMatcher(linkMatcherRegex, () => {});
+        linkifier.linkifyRow(0);
+        // Allow linkify to happen
+        setTimeout(() => {
+          assert.equal(rows[0].innerHTML, expectedHtml);
+          done();
+        }, 0);
+      }
+      it('should match a single link', done => {
+        assertLinkifiesRow('foo', /foo/, '<a>foo</a>', done);
+      });
+      it('should match a single link at the start of a text node', done => {
+        assertLinkifiesRow('foo bar', /foo/, '<a>foo</a> bar', done);
+      });
+      it('should match a single link in the middle of a text node', done => {
+        assertLinkifiesRow('foo bar baz', /bar/, 'foo <a>bar</a> baz', done);
+      });
+      it('should match a single link at the end of a text node', done => {
+        assertLinkifiesRow('foo bar', /bar/, 'foo <a>bar</a>', done);
+      });
+      it('should match a link after a link at the start of a text node', done => {
+        assertLinkifiesRow('foo bar', /foo|bar/, '<a>foo</a> <a>bar</a>', done);
+      });
+      it('should match a link after a link in the middle of a text node', done => {
+        assertLinkifiesRow('foo bar baz', /bar|baz/, 'foo <a>bar</a> <a>baz</a>', done);
+      });
+      it('should match a link immediately after a link at the end of a text node', done => {
+        assertLinkifiesRow('<span>foo bar</span>baz', /bar|baz/, '<span>foo <a>bar</a></span><a>baz</a>', done);
+      });
+    });
+
+    describe('validationCallback', () => {
+      it('should enable link if true', done => {
+        addRow('test');
+        linkifier.registerLinkMatcher(/test/, () => done(), {
+          validationCallback: (url, element, cb) => {
+            cb(true);
+            assert.equal((<HTMLElement>rows[0].firstChild).tagName, 'A');
+            setTimeout(() => clickElement(rows[0].firstChild), 0);
+          }
+        });
+        linkifier.linkifyRow(0);
+      });
+
+      it('should disable link if false', done => {
+        addRow('test');
+        linkifier.registerLinkMatcher(/test/, () => assert.fail(), {
+          validationCallback: (url, element, cb) => {
+            cb(false);
+            assert.equal((<HTMLElement>rows[0].firstChild).tagName, 'A');
+            setTimeout(() => clickElement(rows[0].firstChild), 0);
+          }
+        });
+        linkifier.linkifyRow(0);
+        // Allow time for the click to be performed
+        setTimeout(() => done(), 10);
+      });
+
+      it('should trigger for multiple link matches on one row', done => {
+        addRow('test test');
+        let count = 0;
+        linkifier.registerLinkMatcher(/test/, () => assert.fail(), {
+          validationCallback: (url, element, cb) => {
+            count += 1;
+            if (count === 2) {
+              done();
+            }
+            cb(false);
+          }
+        });
+        linkifier.linkifyRow(0);
+      });
+    });
+
+    describe('priority', () => {
+      it('should order the list from highest priority to lowest #1', () => {
+        const aId = linkifier.registerLinkMatcher(/a/, () => {}, { priority: 1 });
+        const bId = linkifier.registerLinkMatcher(/b/, () => {}, { priority: -1 });
+        assert.deepEqual(linkifier.linkMatchers.map(lm => lm.id), [aId, 0, bId]);
+      });
+
+      it('should order the list from highest priority to lowest #2', () => {
+        const aId = linkifier.registerLinkMatcher(/a/, () => {}, { priority: -1 });
+        const bId = linkifier.registerLinkMatcher(/b/, () => {}, { priority: 1 });
+        assert.deepEqual(linkifier.linkMatchers.map(lm => lm.id), [bId, 0, aId]);
+      });
+
+      it('should order items of equal priority in the order they are added', () => {
+        const aId = linkifier.registerLinkMatcher(/a/, () => {}, { priority: 0 });
+        const bId = linkifier.registerLinkMatcher(/b/, () => {}, { priority: 0 });
+        assert.deepEqual(linkifier.linkMatchers.map(lm => lm.id), [0, aId, bId]);
+      });
+    });
+  });
+});

src/Linkifier.ts

@@ -0,0 +1,349 @@
+/**
+ * @license MIT
+ */
+
+import { LinkMatcherOptions } from './Interfaces';
+import { LinkMatcher, LinkMatcherHandler, LinkMatcherValidationCallback } from './Types';
+
+const INVALID_LINK_CLASS = 'xterm-invalid-link';
+
+const protocolClause = '(https?:\\/\\/)';
+const domainCharacterSet = '[\\da-z\\.-]+';
+const negatedDomainCharacterSet = '[^\\da-z\\.-]+';
+const domainBodyClause = '(' + domainCharacterSet + ')';
+const tldClause = '([a-z\\.]{2,6})';
+const ipClause = '((\\d{1,3}\\.){3}\\d{1,3})';
+const localHostClause = '(localhost)';
+const portClause = '(:\\d{1,5})';
+const hostClause = '((' + domainBodyClause + '\\.' + tldClause + ')|' + ipClause + '|' + localHostClause + ')' + portClause + '?';
+const pathClause = '(\\/[\\/\\w\\.\\-%~]*)*';
+const queryStringHashFragmentCharacterSet = '[0-9\\w\\[\\]\\(\\)\\/\\?\\!#@$%&\'*+,:;~\\=\\.\\-]*';
+const queryStringClause = '(\\?' + queryStringHashFragmentCharacterSet + ')?';
+const hashFragmentClause = '(#' + queryStringHashFragmentCharacterSet + ')?';
+const negatedPathCharacterSet = '[^\\/\\w\\.\\-%]+';
+const bodyClause = hostClause + pathClause + queryStringClause + hashFragmentClause;
+const start = '(?:^|' + negatedDomainCharacterSet + ')(';
+const end = ')($|' + negatedPathCharacterSet + ')';
+const strictUrlRegex = new RegExp(start + protocolClause + bodyClause + end);
+
+/**
+ * The ID of the built in http(s) link matcher.
+ */
+const HYPERTEXT_LINK_MATCHER_ID = 0;
+
+/**
+ * The Linkifier applies links to rows shortly after they have been refreshed.
+ */
+export class Linkifier {
+  /**
+   * The time to wait after a row is changed before it is linkified. This prevents
+   * the costly operation of searching every row multiple times, potentially a
+   * huge amount of times.
+   */
+  protected static TIME_BEFORE_LINKIFY = 200;
+
+  protected _linkMatchers: LinkMatcher[];
+
+  private _document: Document;
+  private _rows: HTMLElement[];
+  private _rowTimeoutIds: number[];
+  private _nextLinkMatcherId = HYPERTEXT_LINK_MATCHER_ID;
+
+  constructor() {
+    this._rowTimeoutIds = [];
+    this._linkMatchers = [];
+    this.registerLinkMatcher(strictUrlRegex, null, { matchIndex: 1 });
+  }
+
+  /**
+   * Attaches the linkifier to the DOM, enabling linkification.
+   * @param document The document object.
+   * @param rows The array of rows to apply links to.
+   */
+  public attachToDom(document: Document, rows: HTMLElement[]) {
+    this._document = document;
+    this._rows = rows;
+  }
+
+  /**
+   * Queues a row for linkification.
+   * @param {number} rowIndex The index of the row to linkify.
+   */
+  public linkifyRow(rowIndex: number): void {
+    // Don't attempt linkify if not yet attached to DOM
+    if (!this._document) {
+      return;
+    }
+
+    const timeoutId = this._rowTimeoutIds[rowIndex];
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    this._rowTimeoutIds[rowIndex] = setTimeout(this._linkifyRow.bind(this, rowIndex), Linkifier.TIME_BEFORE_LINKIFY);
+  }
+
+  /**
+   * Attaches a handler for hypertext links, overriding default <a> behavior
+   * for standard http(s) links.
+   * @param {LinkHandler} handler The handler to use, this can be cleared with
+   * null.
+   */
+  public setHypertextLinkHandler(handler: LinkMatcherHandler): void {
+    this._linkMatchers[HYPERTEXT_LINK_MATCHER_ID].handler = handler;
+  }
+
+  /**
+   * Attaches a validation callback for hypertext links.
+   * @param {LinkMatcherValidationCallback} callback The callback to use, this
+   * can be cleared with null.
+   */
+  public setHypertextValidationCallback(callback: LinkMatcherValidationCallback): void {
+    this._linkMatchers[HYPERTEXT_LINK_MATCHER_ID].validationCallback = callback;
+  }
+
+  /**
+   * Registers a link matcher, allowing custom link patterns to be matched and
+   * handled.
+   * @param {RegExp} regex The regular expression to search for, specifically
+   * this searches the textContent of the rows. You will want to use \s to match
+   * a space ' ' character for example.
+   * @param {LinkHandler} handler The callback when the link is called.
+   * @param {LinkMatcherOptions} [options] Options for the link matcher.
+   * @return {number} The ID of the new matcher, this can be used to deregister.
+   */
+  public registerLinkMatcher(regex: RegExp, handler: LinkMatcherHandler, options: LinkMatcherOptions = {}): number {
+    if (this._nextLinkMatcherId !== HYPERTEXT_LINK_MATCHER_ID && !handler) {
+      throw new Error('handler must be defined');
+    }
+    const matcher: LinkMatcher = {
+      id: this._nextLinkMatcherId++,
+      regex,
+      handler,
+      matchIndex: options.matchIndex,
+      validationCallback: options.validationCallback,
+      priority: options.priority || 0
+    };
+    this._addLinkMatcherToList(matcher);
+    return matcher.id;
+  }
+
+  /**
+   * Inserts a link matcher to the list in the correct position based on the
+   * priority of each link matcher. New link matchers of equal priority are
+   * considered after older link matchers.
+   * @param matcher The link matcher to be added.
+   */
+  private _addLinkMatcherToList(matcher: LinkMatcher): void {
+    if (this._linkMatchers.length === 0) {
+      this._linkMatchers.push(matcher);
+      return;
+    }
+
+    for (let i = this._linkMatchers.length - 1; i >= 0; i--) {
+      if (matcher.priority <= this._linkMatchers[i].priority) {
+        this._linkMatchers.splice(i + 1, 0, matcher);
+        return;
+      }
+    }
+
+    this._linkMatchers.splice(0, 0, matcher);
+  }
+
+  /**
+   * Deregisters a link matcher if it has been registered.
+   * @param {number} matcherId The link matcher's ID (returned after register)
+   * @return {boolean} Whether a link matcher was found and deregistered.
+   */
+  public deregisterLinkMatcher(matcherId: number): boolean {
+    // ID 0 is the hypertext link matcher which cannot be deregistered
+    for (let i = 1; i < this._linkMatchers.length; i++) {
+      if (this._linkMatchers[i].id === matcherId) {
+        this._linkMatchers.splice(i, 1);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Linkifies a row.
+   * @param {number} rowIndex The index of the row to linkify.
+   */
+  private _linkifyRow(rowIndex: number): void {
+    const row = this._rows[rowIndex];
+    if (!row) {
+      return;
+    }
+    const text = row.textContent;
+    for (let i = 0; i < this._linkMatchers.length; i++) {
+      const matcher = this._linkMatchers[i];
+      const linkElements = this._doLinkifyRow(row, matcher);
+        if (linkElements.length > 0) {
+        // Fire validation callback
+        if (matcher.validationCallback) {
+          for (let j = 0; j < linkElements.length; j++) {
+            const element = linkElements[j];
+            matcher.validationCallback(element.textContent, element, isValid => {
+              if (!isValid) {
+                element.classList.add(INVALID_LINK_CLASS);
+              }
+            });
+          }
+        }
+        // Only allow a single LinkMatcher to trigger on any given row.
+        return;
+      }
+    }
+  }
+
+  /**
+   * Linkifies a row given a specific handler.
+   * @param {HTMLElement} row The row to linkify.
+   * @param {LinkMatcher} matcher The link matcher for this line.
+   * @return The link element if it was added, otherwise undefined.
+   */
+  private _doLinkifyRow(row: HTMLElement, matcher: LinkMatcher): HTMLElement[] {
+    // Iterate over nodes as we want to consider text nodes
+    let result = [];
+    const isHttpLinkMatcher = matcher.id === HYPERTEXT_LINK_MATCHER_ID;
+    const nodes = row.childNodes;
+
+    // Find the first match
+    let match = row.textContent.match(matcher.regex);
+    if (!match || match.length === 0) {
+      return result;
+    }
+    let uri = match[typeof matcher.matchIndex !== 'number' ? 0 : matcher.matchIndex];
+    // Set the next searches start index
+    let rowStartIndex = match.index + uri.length;
+
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      const searchIndex = node.textContent.indexOf(uri);
+      if (searchIndex >= 0) {
+        const linkElement = this._createAnchorElement(uri, matcher.handler, isHttpLinkMatcher);
+        if (node.textContent.length === uri.length) {
+          // Matches entire string
+          if (node.nodeType === 3 /*Node.TEXT_NODE*/) {
+            this._replaceNode(node, linkElement);
+          } else {
+            const element = (<HTMLElement>node);
+            if (element.nodeName === 'A') {
+              // This row has already been linkified
+              return result;
+            }
+            element.innerHTML = '';
+            element.appendChild(linkElement);
+          }
+        } else {
+          // Matches part of string
+          const nodesAdded = this._replaceNodeSubstringWithNode(node, linkElement, uri, searchIndex);
+          // No need to consider the new nodes
+          i += nodesAdded;
+        }
+        result.push(linkElement);
+
+        // Find the next match
+        match = row.textContent.substring(rowStartIndex).match(matcher.regex);
+        if (!match || match.length === 0) {
+          return result;
+        }
+        uri = match[typeof matcher.matchIndex !== 'number' ? 0 : matcher.matchIndex];
+        rowStartIndex += match.index + uri.length;
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Creates a link anchor element.
+   * @param {string} uri The uri of the link.
+   * @return {HTMLAnchorElement} The link.
+   */
+  private _createAnchorElement(uri: string, handler: LinkMatcherHandler, isHypertextLinkHandler: boolean): HTMLAnchorElement {
+    const element = this._document.createElement('a');
+    element.textContent = uri;
+    element.draggable = false;
+    if (isHypertextLinkHandler) {
+      element.href = uri;
+      // Force link on another tab so work is not lost
+      element.target = '_blank';
+      element.addEventListener('click', (event: MouseEvent) => {
+        if (handler) {
+          return handler(event, uri);
+        }
+      });
+    } else {
+      element.addEventListener('click', (event: MouseEvent) => {
+        // Don't execute the handler if the link is flagged as invalid
+        if (element.classList.contains(INVALID_LINK_CLASS)) {
+          return;
+        }
+        return handler(event, uri);
+      });
+    }
+    return element;
+  }
+
+  /**
+   * Replace a node with 1 or more other nodes.
+   * @param {Node} oldNode The node to replace.
+   * @param {Node[]} newNodes The new nodes to insert in order.
+   */
+  private _replaceNode(oldNode: Node, ...newNodes: Node[]): void {
+    const parent = oldNode.parentNode;
+    for (let i = 0; i < newNodes.length; i++) {
+      parent.insertBefore(newNodes[i], oldNode);
+    }
+    parent.removeChild(oldNode);
+  }
+
+  /**
+   * Replace a substring within a node with a new node.
+   * @param {Node} targetNode The target node; either a text node or a <span>
+   * containing a single text node.
+   * @param {Node} newNode The new node to insert.
+   * @param {string} substring The substring to replace.
+   * @param {number} substringIndex The index of the substring within the string.
+   * @return The number of nodes to skip when searching for the next uri.
+   */
+  private _replaceNodeSubstringWithNode(targetNode: Node, newNode: Node, substring: string, substringIndex: number): number {
+    let node = targetNode;
+    if (node.nodeType !== 3/*Node.TEXT_NODE*/) {
+      node = node.childNodes[0];
+    }
+
+    // The targetNode will be either a text node or a <span>. The text node
+    // (targetNode or its only-child) needs to be replaced with newNode plus new
+    // text nodes potentially on either side.
+    if (node.childNodes.length === 0 && node.nodeType !== 3/*Node.TEXT_NODE*/) {
+      throw new Error('targetNode must be a text node or only contain a single text node');
+    }
+
+    const fullText = node.textContent;
+
+    if (substringIndex === 0) {
+      // Replace with <newNode><textnode>
+      const rightText = fullText.substring(substring.length);
+      const rightTextNode = this._document.createTextNode(rightText);
+      this._replaceNode(node, newNode, rightTextNode);
+      return 0;
+    }
+
+    if (substringIndex === targetNode.textContent.length - substring.length) {
+      // Replace with <textnode><newNode>
+      const leftText = fullText.substring(0, substringIndex);
+      const leftTextNode = this._document.createTextNode(leftText);
+      this._replaceNode(node, leftTextNode, newNode);
+      return 0;
+    }
+
+    // Replace with <textnode><newNode><textnode>
+    const leftText = fullText.substring(0, substringIndex);
+    const leftTextNode = this._document.createTextNode(leftText);
+    const rightText = fullText.substring(substringIndex + substring.length);
+    const rightTextNode = this._document.createTextNode(rightText);
+    this._replaceNode(node, leftTextNode, newNode, rightTextNode);
+    return 1;
+  }
+}

src/Parser.ts

@@ -0,0 +1,636 @@
+/**
+ * @license MIT
+ */
+
+import { C0 } from './EscapeSequences';
+import { IInputHandler } from './Interfaces';
+import { CHARSETS, DEFAULT_CHARSET } from './Charsets';
+
+const normalStateHandler: {[key: string]: (parser: Parser, handler: IInputHandler) => void} = {};
+normalStateHandler[C0.BEL] = (parser, handler) => handler.bell();
+normalStateHandler[C0.LF] = (parser, handler) => handler.lineFeed();
+normalStateHandler[C0.VT] = normalStateHandler[C0.LF];
+normalStateHandler[C0.FF] = normalStateHandler[C0.LF];
+normalStateHandler[C0.CR] = (parser, handler) => handler.carriageReturn();
+normalStateHandler[C0.BS] = (parser, handler) => handler.backspace();
+normalStateHandler[C0.HT] = (parser, handler) => handler.tab();
+normalStateHandler[C0.SO] = (parser, handler) => handler.shiftOut();
+normalStateHandler[C0.SI] = (parser, handler) => handler.shiftIn();
+normalStateHandler[C0.ESC] = (parser, handler) => parser.setState(ParserState.ESCAPED);
+
+// TODO: Remove terminal when parser owns params and currentParam
+const escapedStateHandler: {[key: string]: (parser: Parser, terminal: any) => void} = {};
+escapedStateHandler['['] = (parser, terminal) => {
+  // ESC [ Control Sequence Introducer (CSI  is 0x9b)
+  terminal.params = [];
+  terminal.currentParam = 0;
+  parser.setState(ParserState.CSI_PARAM);
+};
+escapedStateHandler[']'] = (parser, terminal) => {
+  // ESC ] Operating System Command (OSC is 0x9d)
+  terminal.params = [];
+  terminal.currentParam = 0;
+  parser.setState(ParserState.OSC);
+};
+escapedStateHandler['P'] = (parser, terminal) => {
+  // ESC P Device Control String (DCS is 0x90)
+  terminal.params = [];
+  terminal.currentParam = 0;
+  parser.setState(ParserState.DCS);
+};
+escapedStateHandler['_'] = (parser, terminal) => {
+  // ESC _ Application Program Command ( APC is 0x9f).
+  parser.setState(ParserState.IGNORE);
+};
+escapedStateHandler['^'] = (parser, terminal) => {
+  // ESC ^ Privacy Message ( PM is 0x9e).
+  parser.setState(ParserState.IGNORE);
+};
+escapedStateHandler['c'] = (parser, terminal) => {
+  // ESC c Full Reset (RIS).
+  terminal.reset();
+};
+escapedStateHandler['E'] = (parser, terminal) => {
+  // ESC E Next Line ( NEL is 0x85).
+  terminal.x = 0;
+  terminal.index();
+  parser.setState(ParserState.NORMAL);
+};
+escapedStateHandler['D'] = (parser, terminal) => {
+  // ESC D Index ( IND is 0x84).
+  terminal.index();
+  parser.setState(ParserState.NORMAL);
+};
+escapedStateHandler['M'] = (parser, terminal) => {
+  // ESC M Reverse Index ( RI is 0x8d).
+  terminal.reverseIndex();
+  parser.setState(ParserState.NORMAL);
+};
+escapedStateHandler['%'] = (parser, terminal) => {
+  // ESC % Select default/utf-8 character set.
+  // @ = default, G = utf-8
+  terminal.setgLevel(0);
+  terminal.setgCharset(0, DEFAULT_CHARSET); // US (default)
+  parser.setState(ParserState.NORMAL);
+  parser.skipNextChar();
+};
+escapedStateHandler[C0.CAN] = (parser) => parser.setState(ParserState.NORMAL);
+
+const csiParamStateHandler: {[key: string]: (parser: Parser) => void} = {};
+csiParamStateHandler['?'] = (parser) => parser.setPrefix('?');
+csiParamStateHandler['>'] = (parser) => parser.setPrefix('>');
+csiParamStateHandler['!'] = (parser) => parser.setPrefix('!');
+csiParamStateHandler['0'] = (parser) => parser.setParam(parser.getParam() * 10);
+csiParamStateHandler['1'] = (parser) => parser.setParam(parser.getParam() * 10 + 1);
+csiParamStateHandler['2'] = (parser) => parser.setParam(parser.getParam() * 10 + 2);
+csiParamStateHandler['3'] = (parser) => parser.setParam(parser.getParam() * 10 + 3);
+csiParamStateHandler['4'] = (parser) => parser.setParam(parser.getParam() * 10 + 4);
+csiParamStateHandler['5'] = (parser) => parser.setParam(parser.getParam() * 10 + 5);
+csiParamStateHandler['6'] = (parser) => parser.setParam(parser.getParam() * 10 + 6);
+csiParamStateHandler['7'] = (parser) => parser.setParam(parser.getParam() * 10 + 7);
+csiParamStateHandler['8'] = (parser) => parser.setParam(parser.getParam() * 10 + 8);
+csiParamStateHandler['9'] = (parser) => parser.setParam(parser.getParam() * 10 + 9);
+csiParamStateHandler['$'] = (parser) => parser.setPostfix('$');
+csiParamStateHandler['"'] = (parser) => parser.setPostfix('"');
+csiParamStateHandler[' '] = (parser) => parser.setPostfix(' ');
+csiParamStateHandler['\''] = (parser) => parser.setPostfix('\'');
+csiParamStateHandler[';'] = (parser) => parser.finalizeParam();
+csiParamStateHandler[C0.CAN] = (parser) => parser.setState(ParserState.NORMAL);
+
+const csiStateHandler: {[key: string]: (handler: IInputHandler, params: number[], prefix: string, postfix: string, parser: Parser) => void} = {};
+csiStateHandler['@'] = (handler, params, prefix) => handler.insertChars(params);
+csiStateHandler['A'] = (handler, params, prefix) => handler.cursorUp(params);
+csiStateHandler['B'] = (handler, params, prefix) => handler.cursorDown(params);
+csiStateHandler['C'] = (handler, params, prefix) => handler.cursorForward(params);
+csiStateHandler['D'] = (handler, params, prefix) => handler.cursorBackward(params);
+csiStateHandler['E'] = (handler, params, prefix) => handler.cursorNextLine(params);
+csiStateHandler['F'] = (handler, params, prefix) => handler.cursorPrecedingLine(params);
+csiStateHandler['G'] = (handler, params, prefix) => handler.cursorCharAbsolute(params);
+csiStateHandler['H'] = (handler, params, prefix) => handler.cursorPosition(params);
+csiStateHandler['I'] = (handler, params, prefix) => handler.cursorForwardTab(params);
+csiStateHandler['J'] = (handler, params, prefix) => handler.eraseInDisplay(params);
+csiStateHandler['K'] = (handler, params, prefix) => handler.eraseInLine(params);
+csiStateHandler['L'] = (handler, params, prefix) => handler.insertLines(params);
+csiStateHandler['M'] = (handler, params, prefix) => handler.deleteLines(params);
+csiStateHandler['P'] = (handler, params, prefix) => handler.deleteChars(params);
+csiStateHandler['S'] = (handler, params, prefix) => handler.scrollUp(params);
+csiStateHandler['T'] = (handler, params, prefix) => {
+  if (params.length < 2 && !prefix) {
+    handler.scrollDown(params);
+  }
+};
+csiStateHandler['X'] = (handler, params, prefix) => handler.eraseChars(params);
+csiStateHandler['Z'] = (handler, params, prefix) => handler.cursorBackwardTab(params);
+csiStateHandler['`'] = (handler, params, prefix) => handler.charPosAbsolute(params);
+csiStateHandler['a'] = (handler, params, prefix) => handler.HPositionRelative(params);
+csiStateHandler['b'] = (handler, params, prefix) => handler.repeatPrecedingCharacter(params);
+csiStateHandler['c'] = (handler, params, prefix) => handler.sendDeviceAttributes(params);
+csiStateHandler['d'] = (handler, params, prefix) => handler.linePosAbsolute(params);
+csiStateHandler['e'] = (handler, params, prefix) => handler.VPositionRelative(params);
+csiStateHandler['f'] = (handler, params, prefix) => handler.HVPosition(params);
+csiStateHandler['g'] = (handler, params, prefix) => handler.tabClear(params);
+csiStateHandler['h'] = (handler, params, prefix) => handler.setMode(params);
+csiStateHandler['l'] = (handler, params, prefix) => handler.resetMode(params);
+csiStateHandler['m'] = (handler, params, prefix) => handler.charAttributes(params);
+csiStateHandler['n'] = (handler, params, prefix) => handler.deviceStatus(params);
+csiStateHandler['p'] = (handler, params, prefix) => {
+  switch (prefix) {
+    case '!': handler.softReset(params); break;
+  }
+};
+csiStateHandler['q'] = (handler, params, prefix, postfix) => {
+  if (postfix === ' ') {
+    handler.setCursorStyle(params);
+  }
+};
+csiStateHandler['r'] = (handler, params) => handler.setScrollRegion(params);
+csiStateHandler['s'] = (handler, params) => handler.saveCursor(params);
+csiStateHandler['u'] = (handler, params) => handler.restoreCursor(params);
+csiStateHandler[C0.CAN] = (handler, params, prefix, postfix, parser) => parser.setState(ParserState.NORMAL);
+
+enum ParserState {
+  NORMAL = 0,
+  ESCAPED = 1,
+  CSI_PARAM = 2,
+  CSI = 3,
+  OSC = 4,
+  CHARSET = 5,
+  DCS = 6,
+  IGNORE = 7
+}
+
+/**
+ * The terminal's parser, all input into the terminal goes through the parser
+ * which parses and defers the actual input handling the the IInputHandler
+ * specified in the constructor.
+ */
+export class Parser {
+  private _state: ParserState;
+  private _position: number;
+
+  // TODO: Remove terminal when handler can do everything
+  constructor(
+    private _inputHandler: IInputHandler,
+    private _terminal: any
+  ) {
+    this._state = ParserState.NORMAL;
+  }
+
+  /**
+   * Parse and handle data.
+   *
+   * @param data The data to parse.
+   */
+  public parse(data: string) {
+    let l = data.length, j, cs, ch, code, low;
+
+    this._position = 0;
+    // apply leftover surrogate high from last write
+    if (this._terminal.surrogate_high) {
+      data = this._terminal.surrogate_high + data;
+      this._terminal.surrogate_high = '';
+    }
+
+    for (; this._position < l; this._position++) {
+      ch = data[this._position];
+
+      // FIXME: higher chars than 0xa0 are not allowed in escape sequences
+      //        --> maybe move to default
+      code = data.charCodeAt(this._position);
+      if (0xD800 <= code && code <= 0xDBFF) {
+        // we got a surrogate high
+        // get surrogate low (next 2 bytes)
+        low = data.charCodeAt(this._position + 1);
+        if (isNaN(low)) {
+          // end of data stream, save surrogate high
+          this._terminal.surrogate_high = ch;
+          continue;
+        }
+        code = ((code - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
+        ch += data.charAt(this._position + 1);
+      }
+      // surrogate low - already handled above
+      if (0xDC00 <= code && code <= 0xDFFF)
+        continue;
+
+      switch (this._state) {
+        case ParserState.NORMAL:
+          if (ch in normalStateHandler) {
+            normalStateHandler[ch](this, this._inputHandler);
+          } else {
+            this._inputHandler.addChar(ch, code);
+          }
+          break;
+        case ParserState.ESCAPED:
+          if (ch in escapedStateHandler) {
+            escapedStateHandler[ch](this, this._terminal);
+            // Skip switch as it was just handled
+            break;
+          }
+          switch (ch) {
+
+            // ESC (,),*,+,-,. Designate G0-G2 Character Set.
+            case '(': // <-- this seems to get all the attention
+            case ')':
+            case '*':
+            case '+':
+            case '-':
+            case '.':
+              switch (ch) {
+                case '(':
+                  this._terminal.gcharset = 0;
+                  break;
+                case ')':
+                  this._terminal.gcharset = 1;
+                  break;
+                case '*':
+                  this._terminal.gcharset = 2;
+                  break;
+                case '+':
+                  this._terminal.gcharset = 3;
+                  break;
+                case '-':
+                  this._terminal.gcharset = 1;
+                  break;
+                case '.':
+                  this._terminal.gcharset = 2;
+                  break;
+              }
+              this._state = ParserState.CHARSET;
+              break;
+
+            // Designate G3 Character Set (VT300).
+            // A = ISO Latin-1 Supplemental.
+            // Not implemented.
+            case '/':
+              this._terminal.gcharset = 3;
+              this._state = ParserState.CHARSET;
+              this._position--;
+              break;
+
+            // ESC N
+            // Single Shift Select of G2 Character Set
+            // ( SS2 is 0x8e). This affects next character only.
+            case 'N':
+              break;
+            // ESC O
+            // Single Shift Select of G3 Character Set
+            // ( SS3 is 0x8f). This affects next character only.
+            case 'O':
+              break;
+            // ESC n
+            // Invoke the G2 Character Set as GL (LS2).
+            case 'n':
+              this._terminal.setgLevel(2);
+              break;
+            // ESC o
+            // Invoke the G3 Character Set as GL (LS3).
+            case 'o':
+              this._terminal.setgLevel(3);
+              break;
+            // ESC |
+            // Invoke the G3 Character Set as GR (LS3R).
+            case '|':
+              this._terminal.setgLevel(3);
+              break;
+            // ESC }
+            // Invoke the G2 Character Set as GR (LS2R).
+            case '}':
+              this._terminal.setgLevel(2);
+              break;
+            // ESC ~
+            // Invoke the G1 Character Set as GR (LS1R).
+            case '~':
+              this._terminal.setgLevel(1);
+              break;
+
+            // ESC 7 Save Cursor (DECSC).
+            case '7':
+              this._inputHandler.saveCursor();
+              this._state = ParserState.NORMAL;
+              break;
+
+            // ESC 8 Restore Cursor (DECRC).
+            case '8':
+              this._inputHandler.restoreCursor();
+              this._state = ParserState.NORMAL;
+              break;
+
+            // ESC # 3 DEC line height/width
+            case '#':
+              this._state = ParserState.NORMAL;
+              this._position++;
+              break;
+
+            // ESC H Tab Set (HTS is 0x88).
+            case 'H':
+              this._terminal.tabSet();
+              this._state = ParserState.NORMAL;
+              break;
+
+            // ESC = Application Keypad (DECKPAM).
+            case '=':
+              this._terminal.log('Serial port requested application keypad.');
+              this._terminal.applicationKeypad = true;
+              this._terminal.viewport.syncScrollArea();
+              this._state = ParserState.NORMAL;
+              break;
+
+            // ESC > Normal Keypad (DECKPNM).
+            case '>':
+              this._terminal.log('Switching back to normal keypad.');
+              this._terminal.applicationKeypad = false;
+              this._terminal.viewport.syncScrollArea();
+              this._state = ParserState.NORMAL;
+              break;
+
+            default:
+              this._state = ParserState.NORMAL;
+              this._terminal.error('Unknown ESC control: %s.', ch);
+              break;
+          }
+          break;
+
+        case ParserState.CHARSET:
+          if (ch in CHARSETS) {
+            cs = CHARSETS[ch];
+            if (ch === '/') { // ISOLatin is actually /A
+              this.skipNextChar();
+            }
+          } else {
+            cs = DEFAULT_CHARSET;
+          }
+          this._terminal.setgCharset(this._terminal.gcharset, cs);
+          this._terminal.gcharset = null;
+          this._state = ParserState.NORMAL;
+          break;
+
+        case ParserState.OSC:
+          // OSC Ps ; Pt ST
+          // OSC Ps ; Pt BEL
+          //   Set Text Parameters.
+          if (ch === C0.ESC || ch === C0.BEL) {
+            if (ch === C0.ESC) this._position++;
+
+            this._terminal.params.push(this._terminal.currentParam);
+
+            switch (this._terminal.params[0]) {
+              case 0:
+              case 1:
+              case 2:
+                if (this._terminal.params[1]) {
+                  this._terminal.title = this._terminal.params[1];
+                  this._terminal.handleTitle(this._terminal.title);
+                }
+                break;
+              case 3:
+                // set X property
+                break;
+              case 4:
+              case 5:
+                // change dynamic colors
+                break;
+              case 10:
+              case 11:
+              case 12:
+              case 13:
+              case 14:
+              case 15:
+              case 16:
+              case 17:
+              case 18:
+              case 19:
+                // change dynamic ui colors
+                break;
+              case 46:
+                // change log file
+                break;
+              case 50:
+                // dynamic font
+                break;
+              case 51:
+                // emacs shell
+                break;
+              case 52:
+                // manipulate selection data
+                break;
+              case 104:
+              case 105:
+              case 110:
+              case 111:
+              case 112:
+              case 113:
+              case 114:
+              case 115:
+              case 116:
+              case 117:
+              case 118:
+                // reset colors
+                break;
+            }
+
+            this._terminal.params = [];
+            this._terminal.currentParam = 0;
+            this._state = ParserState.NORMAL;
+          } else {
+            if (!this._terminal.params.length) {
+              if (ch >= '0' && ch <= '9') {
+                this._terminal.currentParam =
+                  this._terminal.currentParam * 10 + ch.charCodeAt(0) - 48;
+              } else if (ch === ';') {
+                this._terminal.params.push(this._terminal.currentParam);
+                this._terminal.currentParam = '';
+              }
+            } else {
+              this._terminal.currentParam += ch;
+            }
+          }
+          break;
+
+        case ParserState.CSI_PARAM:
+          if (ch in csiParamStateHandler) {
+            csiParamStateHandler[ch](this);
+            break;
+          }
+          this.finalizeParam();
+          // Fall through the CSI as this character should be the CSI code.
+          this._state = ParserState.CSI;
+
+        case ParserState.CSI:
+          if (ch in csiStateHandler) {
+            csiStateHandler[ch](this._inputHandler, this._terminal.params, this._terminal.prefix, this._terminal.postfix, this);
+          } else {
+            this._terminal.error('Unknown CSI code: %s.', ch);
+          }
+
+          this._state = ParserState.NORMAL;
+          this._terminal.prefix = '';
+          this._terminal.postfix = '';
+          break;
+
+        case ParserState.DCS:
+          if (ch === C0.ESC || ch === C0.BEL) {
+            if (ch === C0.ESC) this._position++;
+
+            switch (this._terminal.prefix) {
+              // User-Defined Keys (DECUDK).
+              case '':
+                break;
+
+              // Request Status String (DECRQSS).
+              // test: echo -e '\eP$q"p\e\\'
+              case '$q':
+                let pt = this._terminal.currentParam
+                , valid = false;
+
+                switch (pt) {
+                  // DECSCA
+                  case '"q':
+                    pt = '0"q';
+                    break;
+
+                  // DECSCL
+                  case '"p':
+                    pt = '61"p';
+                    break;
+
+                  // DECSTBM
+                  case 'r':
+                    pt = ''
+                      + (this._terminal.scrollTop + 1)
+                      + ';'
+                      + (this._terminal.scrollBottom + 1)
+                      + 'r';
+                    break;
+
+                  // SGR
+                  case 'm':
+                    pt = '0m';
+                    break;
+
+                  default:
+                    this._terminal.error('Unknown DCS Pt: %s.', pt);
+                    pt = '';
+                    break;
+                }
+
+                this._terminal.send(C0.ESC + 'P' + +valid + '$r' + pt + C0.ESC + '\\');
+                break;
+
+              // Set Termcap/Terminfo Data (xterm, experimental).
+              case '+p':
+                break;
+
+              // Request Termcap/Terminfo String (xterm, experimental)
+              // Regular xterm does not even respond to this sequence.
+              // This can cause a small glitch in vim.
+              // test: echo -ne '\eP+q6b64\e\\'
+              case '+q':
+                // TODO: Don't declare pt twice
+                /*let*/ pt = this._terminal.currentParam
+                , valid = false;
+
+                this._terminal.send(C0.ESC + 'P' + +valid + '+r' + pt + C0.ESC + '\\');
+                break;
+
+              default:
+                this._terminal.error('Unknown DCS prefix: %s.', this._terminal.prefix);
+                break;
+            }
+
+            this._terminal.currentParam = 0;
+            this._terminal.prefix = '';
+            this._state = ParserState.NORMAL;
+          } else if (!this._terminal.currentParam) {
+            if (!this._terminal.prefix && ch !== '$' && ch !== '+') {
+              this._terminal.currentParam = ch;
+            } else if (this._terminal.prefix.length === 2) {
+              this._terminal.currentParam = ch;
+            } else {
+              this._terminal.prefix += ch;
+            }
+          } else {
+            this._terminal.currentParam += ch;
+          }
+          break;
+
+        case ParserState.IGNORE:
+          // For PM and APC.
+          if (ch === C0.ESC || ch === C0.BEL) {
+            if (ch === C0.ESC) this._position++;
+            this._state = ParserState.NORMAL;
+          }
+          break;
+      }
+    }
+  }
+
+  /**
+   * Set the parser's current parsing state.
+   *
+   * @param state The new state.
+   */
+  public setState(state: ParserState): void {
+    this._state = state;
+  }
+
+  /**
+   * Sets the parsier's current prefix. CSI codes can have prefixes of '?', '>'
+   * or '!'.
+   *
+   * @param prefix The prefix.
+   */
+  public setPrefix(prefix: string): void {
+    this._terminal.prefix = prefix;
+  }
+
+  /**
+   * Sets the parsier's current prefix. CSI codes can have postfixes of '$',
+   * '"', ' ', '\''.
+   *
+   * @param postfix The postfix.
+   */
+  public setPostfix(postfix: string): void {
+    this._terminal.postfix = postfix;
+  }
+
+  /**
+   * Sets the parser's current parameter.
+   *
+   * @param param the parameter.
+   */
+  public setParam(param: number) {
+    this._terminal.currentParam = param;
+  }
+
+  /**
+   * Gets the parser's current parameter.
+   */
+  public getParam(): number {
+    return this._terminal.currentParam;
+  }
+
+  /**
+   * Finalizes the parser's current parameter, adding it to the list of
+   * parameters and setting the new current parameter to 0.
+   */
+  public finalizeParam(): void {
+    this._terminal.params.push(this._terminal.currentParam);
+    this._terminal.currentParam = 0;
+  }
+
+  /**
+   * Tell the parser to skip the next character.
+   */
+  public skipNextChar(): void {
+    this._position++;
+  }
+
+  /**
+   * Tell the parser to repeat parsing the current character (for example if it
+   * needs parsing using a different state.
+   */
+  // public repeatChar(): void {
+  //   this._position--;
+  // }
+}

src/Renderer.ts

@@ -0,0 +1,306 @@
+/**
+ * @license MIT
+ */
+
+import { ITerminal } from './Interfaces';
+
+/**
+ * The maximum number of refresh frames to skip when the write buffer is non-
+ * empty. Note that these frames may be intermingled with frames that are
+ * skipped via requestAnimationFrame's mechanism.
+ */
+const MAX_REFRESH_FRAME_SKIP = 5;
+
+/**
+ * Flags used to render terminal text properly.
+ */
+enum FLAGS {
+  BOLD = 1,
+  UNDERLINE = 2,
+  BLINK = 4,
+  INVERSE = 8,
+  INVISIBLE = 16
+};
+
+let brokenBold: boolean = null;
+
+export class Renderer {
+  /** A queue of the rows to be refreshed */
+  private _refreshRowsQueue: {start: number, end: number}[] = [];
+  private _refreshFramesSkipped = 0;
+  private _refreshAnimationFrame = null;
+
+  constructor(private _terminal: ITerminal) {
+    // Figure out whether boldness affects
+    // the character width of monospace fonts.
+    if (brokenBold === null) {
+      brokenBold = checkBoldBroken((<any>this._terminal).element);
+    }
+
+    // TODO: Pull more DOM interactions into Renderer.constructor, element for
+    // example should be owned by Renderer (and also exposed by Terminal due to
+    // to established public API).
+  }
+
+  /**
+   * Queues a refresh between two rows (inclusive), to be done on next animation
+   * frame.
+   * @param {number} start The start row.
+   * @param {number} end The end row.
+   */
+  public queueRefresh(start: number, end: number): void {
+    this._refreshRowsQueue.push({ start: start, end: end });
+    if (!this._refreshAnimationFrame) {
+      this._refreshAnimationFrame = window.requestAnimationFrame(this._refreshLoop.bind(this));
+    }
+  }
+
+  /**
+   * Performs the refresh loop callback, calling refresh only if a refresh is
+   * necessary before queueing up the next one.
+   */
+  private _refreshLoop(): void {
+    // Skip MAX_REFRESH_FRAME_SKIP frames if the writeBuffer is non-empty as it
+    // will need to be immediately refreshed anyway. This saves a lot of
+    // rendering time as the viewport DOM does not need to be refreshed, no
+    // scroll events, no layouts, etc.
+    const skipFrame = this._terminal.writeBuffer.length > 0 && this._refreshFramesSkipped++ <= MAX_REFRESH_FRAME_SKIP;
+    if (skipFrame) {
+      this._refreshAnimationFrame = window.requestAnimationFrame(this._refreshLoop.bind(this));
+      return;
+    }
+
+    this._refreshFramesSkipped = 0;
+    let start;
+    let end;
+    if (this._refreshRowsQueue.length > 4) {
+      // Just do a full refresh when 5+ refreshes are queued
+      start = 0;
+      end = this._terminal.rows - 1;
+    } else {
+      // Get start and end rows that need refreshing
+      start = this._refreshRowsQueue[0].start;
+      end = this._refreshRowsQueue[0].end;
+      for (let i = 1; i < this._refreshRowsQueue.length; i++) {
+        if (this._refreshRowsQueue[i].start < start) {
+          start = this._refreshRowsQueue[i].start;
+        }
+        if (this._refreshRowsQueue[i].end > end) {
+          end = this._refreshRowsQueue[i].end;
+        }
+      }
+    }
+    this._refreshRowsQueue = [];
+    this._refreshAnimationFrame = null;
+    this._refresh(start, end);
+  }
+
+  /**
+   * Refreshes (re-renders) terminal content within two rows (inclusive)
+   *
+   * Rendering Engine:
+   *
+   * In the screen buffer, each character is stored as a an array with a character
+   * and a 32-bit integer:
+   *   - First value: a utf-16 character.
+   *   - Second value:
+   *   - Next 9 bits: background color (0-511).
+   *   - Next 9 bits: foreground color (0-511).
+   *   - Next 14 bits: a mask for misc. flags:
+   *     - 1=bold
+   *     - 2=underline
+   *     - 4=blink
+   *     - 8=inverse
+   *     - 16=invisible
+   *
+   * @param {number} start The row to start from (between 0 and terminal's height terminal - 1)
+   * @param {number} end The row to end at (between fromRow and terminal's height terminal - 1)
+   */
+  private _refresh(start: number, end: number): void {
+    let x, y, i, line, out, ch, ch_width, width, data, attr, bg, fg, flags, row, parent, focused = document.activeElement;
+
+    // If this is a big refresh, remove the terminal rows from the DOM for faster calculations
+    if (end - start >= this._terminal.rows / 2) {
+      parent = this._terminal.element.parentNode;
+      if (parent) {
+        this._terminal.element.removeChild(this._terminal.rowContainer);
+      }
+    }
+
+    width = this._terminal.cols;
+    y = start;
+
+    if (end >= this._terminal.rows) {
+      this._terminal.log('`end` is too large. Most likely a bad CSR.');
+      end = this._terminal.rows - 1;
+    }
+
+    for (; y <= end; y++) {
+      row = y + this._terminal.ydisp;
+
+      line = this._terminal.lines.get(row);
+      if (!line || !this._terminal.children[y]) {
+        // Continue if the line is not available, this means a resize is currently in progress
+        continue;
+      }
+      out = '';
+
+      if (this._terminal.y === y - (this._terminal.ybase - this._terminal.ydisp)
+          && this._terminal.cursorState
+          && !this._terminal.cursorHidden) {
+        x = this._terminal.x;
+      } else {
+        x = -1;
+      }
+
+      attr = this._terminal.defAttr;
+      i = 0;
+
+      for (; i < width; i++) {
+        if (!line[i]) {
+          // Continue if the character is not available, this means a resize is currently in progress
+          continue;
+        }
+        data = line[i][0];
+        ch = line[i][1];
+        ch_width = line[i][2];
+        if (!ch_width)
+          continue;
+
+        if (i === x) data = -1;
+
+        if (data !== attr) {
+          if (attr !== this._terminal.defAttr) {
+            out += '</span>';
+          }
+          if (data !== this._terminal.defAttr) {
+            if (data === -1) {
+              out += '<span class="reverse-video terminal-cursor">';
+            } else {
+              let classNames = [];
+
+              bg = data & 0x1ff;
+              fg = (data >> 9) & 0x1ff;
+              flags = data >> 18;
+
+              if (flags & FLAGS.BOLD) {
+                if (!brokenBold) {
+                  classNames.push('xterm-bold');
+                }
+                // See: XTerm*boldColors
+                if (fg < 8) fg += 8;
+              }
+
+              if (flags & FLAGS.UNDERLINE) {
+                classNames.push('xterm-underline');
+              }
+
+              if (flags & FLAGS.BLINK) {
+                classNames.push('xterm-blink');
+              }
+
+              // If inverse flag is on, then swap the foreground and background variables.
+              if (flags & FLAGS.INVERSE) {
+                /* One-line variable swap in JavaScript: http://stackoverflow.com/a/16201730 */
+                bg = [fg, fg = bg][0];
+                // Should inverse just be before the
+                // above boldColors effect instead?
+                if ((flags & 1) && fg < 8) fg += 8;
+              }
+
+              if (flags & FLAGS.INVISIBLE) {
+                classNames.push('xterm-hidden');
+              }
+
+              /**
+               * Weird situation: Invert flag used black foreground and white background results
+               * in invalid background color, positioned at the 256 index of the 256 terminal
+               * color map. Pin the colors manually in such a case.
+               *
+               * Source: https://github.com/sourcelair/xterm.js/issues/57
+               */
+              if (flags & FLAGS.INVERSE) {
+                if (bg === 257) {
+                  bg = 15;
+                }
+                if (fg === 256) {
+                  fg = 0;
+                }
+              }
+
+              if (bg < 256) {
+                classNames.push('xterm-bg-color-' + bg);
+              }
+
+              if (fg < 256) {
+                classNames.push('xterm-color-' + fg);
+              }
+
+              out += '<span';
+              if (classNames.length) {
+                out += ' class="' + classNames.join(' ') + '"';
+              }
+              out += '>';
+            }
+          }
+        }
+
+        if (ch_width === 2) {
+          out += '<span class="xterm-wide-char">';
+        }
+        switch (ch) {
+          case '&':
+            out += '&amp;';
+            break;
+          case '<':
+            out += '&lt;';
+            break;
+          case '>':
+            out += '&gt;';
+            break;
+          default:
+            if (ch <= ' ') {
+              out += '&nbsp;';
+            } else {
+              out += ch;
+            }
+            break;
+        }
+        if (ch_width === 2) {
+          out += '</span>';
+        }
+
+        attr = data;
+      }
+
+      if (attr !== this._terminal.defAttr) {
+        out += '</span>';
+      }
+
+      this._terminal.children[y].innerHTML = out;
+    }
+
+    if (parent) {
+      this._terminal.element.appendChild(this._terminal.rowContainer);
+    }
+
+    this._terminal.emit('refresh', {element: this._terminal.element, start: start, end: end});
+  };
+}
+
+
+// if bold is broken, we can't
+// use it in the terminal.
+function checkBoldBroken(terminal) {
+  const document = terminal.ownerDocument;
+  const el = document.createElement('span');
+  el.innerHTML = 'hello world';
+  terminal.appendChild(el);
+  const w1 = el.offsetWidth;
+  const h1 = el.offsetHeight;
+  el.style.fontWeight = 'bold';
+  const w2 = el.offsetWidth;
+  const h2 = el.offsetHeight;
+  terminal.removeChild(el);
+  return w1 !== w2 || h1 !== h2;
+}

src/Types.ts

@@ -0,0 +1,14 @@
+/**
+ * @license MIT
+ */
+
+export type LinkMatcher = {
+  id: number,
+  regex: RegExp,
+  handler: LinkMatcherHandler,
+  matchIndex?: number,
+  validationCallback?: LinkMatcherValidationCallback,
+  priority?: number
+};
+export type LinkMatcherHandler = (event: MouseEvent, uri: string) => boolean | void;
+export type LinkMatcherValidationCallback = (uri: string, element: HTMLElement, callback: (isValid: boolean) => void) => void;

src/Viewport.js

@@ -1,114 +0,0 @@
-/**
- * xterm.js: xterm, in the browser
- * Copyright (c) 2014-2016, SourceLair Private Company (www.sourcelair.com (MIT License)
- */
-
-/**
- * Represents the viewport of a terminal, the visible area within the larger buffer of output.
- * Logic for the virtual scroll bar is included in this object.
- * @param {Terminal} terminal The Terminal object.
- * @param {HTMLElement} viewportElement The DOM element acting as the viewport
- * @param {HTMLElement} charMeasureElement A DOM element used to measure the character size of
- *   the terminal.
- */
-function Viewport(terminal, viewportElement, scrollArea, charMeasureElement) {
-  this.terminal = terminal;
-  this.viewportElement = viewportElement;
-  this.scrollArea = scrollArea;
-  this.charMeasureElement = charMeasureElement;
-  this.currentRowHeight = 0;
-  this.lastRecordedBufferLength = 0;
-  this.lastRecordedViewportHeight = 0;
-
-  this.terminal.on('scroll', this.syncScrollArea.bind(this));
-  this.terminal.on('resize', this.syncScrollArea.bind(this));
-  this.viewportElement.addEventListener('scroll', this.onScroll.bind(this));
-
-  this.syncScrollArea();
-}
-
-/**
- * Refreshes row height, setting line-height, viewport height and scroll area height if
- * necessary.
- * @param {number|undefined} charSize A character size measurement bounding rect object, if it
- *   doesn't exist it will be created.
- */
-Viewport.prototype.refresh = function(charSize) {
-  var size = charSize || this.charMeasureElement.getBoundingClientRect();
-  if (size.height > 0) {
-    var rowHeightChanged = size.height !== this.currentRowHeight;
-    if (rowHeightChanged) {
-      this.currentRowHeight = size.height;
-      this.viewportElement.style.lineHeight = size.height + 'px';
-      this.terminal.rowContainer.style.lineHeight = size.height + 'px';
-    }
-    var viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
-    if (rowHeightChanged || viewportHeightChanged) {
-      this.lastRecordedViewportHeight = this.terminal.rows;
-      this.viewportElement.style.height = size.height * this.terminal.rows + 'px';
-    }
-    this.scrollArea.style.height = (size.height * this.lastRecordedBufferLength) + 'px';
-  }
-};
-
-/**
- * Updates dimensions and synchronizes the scroll area if necessary.
- */
-Viewport.prototype.syncScrollArea = function() {
-  if (this.lastRecordedBufferLength !== this.terminal.lines.length) {
-    // If buffer height changed
-    this.lastRecordedBufferLength = this.terminal.lines.length;
-    this.refresh();
-  } else if (this.lastRecordedViewportHeight !== this.terminal.rows) {
-    // If viewport height changed
-    this.refresh();
-  } else {
-    // If size has changed, refresh viewport
-    var size = this.charMeasureElement.getBoundingClientRect();
-    if (size.height !== this.currentRowHeight) {
-      this.refresh(size);
-    }
-  }
-
-  // Sync scrollTop
-  var scrollTop = this.terminal.ydisp * this.currentRowHeight;
-  if (this.viewportElement.scrollTop !== scrollTop) {
-    this.viewportElement.scrollTop = scrollTop;
-  }
-};
-
-/**
- * Handles scroll events on the viewport, calculating the new viewport and requesting the
- * terminal to scroll to it.
- * @param {Event} ev The scroll event.
- */
-Viewport.prototype.onScroll = function(ev) {
-  var newRow = Math.round(this.viewportElement.scrollTop / this.currentRowHeight);
-  var diff = newRow - this.terminal.ydisp;
-  this.terminal.scrollDisp(diff, true);
-};
-
-/**
- * Handles mouse wheel events by adjusting the viewport's scrollTop and delegating the actual
- * scrolling to `onScroll`, this event needs to be attached manually by the consumer of
- * `Viewport`.
- * @param {WheelEvent} ev The mouse wheel event.
- */
-Viewport.prototype.onWheel = function(ev) {
-  if (ev.deltaY === 0) {
-    // Do nothing if it's not a vertical scroll event
-    return;
-  }
-  // Fallback to WheelEvent.DOM_DELTA_PIXEL
-  var multiplier = 1;
-  if (ev.deltaMode === WheelEvent.DOM_DELTA_LINE) {
-    multiplier = this.currentRowHeight;
-  } else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
-    multiplier = this.currentRowHeight * this.terminal.rows;
-  }
-  this.viewportElement.scrollTop += ev.deltaY * multiplier;
-  // Prevent the page from scrolling when the terminal scrolls
-  ev.preventDefault();
-};
-
-export { Viewport };

src/Viewport.test.ts

@@ -0,0 +1,86 @@
+import { assert } from 'chai';
+import { Viewport } from './Viewport';
+
+describe('Viewport', () => {
+  let terminal;
+  let viewportElement;
+  let charMeasure;
+  let viewport;
+  let scrollAreaElement;
+
+  const CHARACTER_HEIGHT = 10;
+
+  beforeEach(() => {
+    terminal = {
+      lines: [],
+      rows: 0,
+      ydisp: 0,
+      on: () => {},
+      rowContainer: {
+        style: {
+          lineHeight: 0
+        }
+      }
+    };
+    viewportElement = {
+      addEventListener: () => {},
+      style: {
+        height: 0,
+        lineHeight: 0
+      }
+    };
+    scrollAreaElement = {
+      style: {
+        height: 0
+      }
+    };
+    charMeasure = {
+      height: CHARACTER_HEIGHT
+    };
+    viewport = new Viewport(terminal, viewportElement, scrollAreaElement, charMeasure);
+  });
+
+  describe('refresh', () => {
+    it('should set the line-height of the terminal', done => {
+      // Allow CharMeasure to be initialized
+      setTimeout(() => {
+        assert.equal(viewportElement.style.lineHeight, CHARACTER_HEIGHT + 'px');
+        assert.equal(terminal.rowContainer.style.lineHeight, CHARACTER_HEIGHT + 'px');
+        charMeasure.height = 1;
+        viewport.refresh();
+        assert.equal(viewportElement.style.lineHeight, '1px');
+        assert.equal(terminal.rowContainer.style.lineHeight, '1px');
+        done();
+      }, 0);
+    });
+    it('should set the height of the viewport when the line-height changed', () => {
+      terminal.lines.push('');
+      terminal.lines.push('');
+      terminal.rows = 1;
+      viewport.refresh();
+      assert.equal(viewportElement.style.height, 1 * CHARACTER_HEIGHT + 'px');
+      charMeasure.height = 20;
+      viewport.refresh();
+      assert.equal(viewportElement.style.height, 20 + 'px');
+    });
+  });
+
+  describe('syncScrollArea', () => {
+    it('should sync the scroll area', done => {
+      // Allow CharMeasure to be initialized
+      setTimeout(() => {
+        terminal.lines.push('');
+        terminal.rows = 1;
+        assert.equal(scrollAreaElement.style.height, 0 * CHARACTER_HEIGHT + 'px');
+        viewport.syncScrollArea();
+        assert.equal(viewportElement.style.height, 1 * CHARACTER_HEIGHT + 'px');
+        assert.equal(scrollAreaElement.style.height, 1 * CHARACTER_HEIGHT + 'px');
+        terminal.lines.push('');
+        viewport.syncScrollArea();
+        assert.equal(viewportElement.style.height, 1 * CHARACTER_HEIGHT + 'px');
+        assert.equal(scrollAreaElement.style.height, 2 * CHARACTER_HEIGHT + 'px');
+        done();
+      }, 0);
+    });
+  });
+});

src/Viewport.ts

@@ -0,0 +1,123 @@
+/**
+ * @license MIT
+ */
+
+import { ITerminal } from './Interfaces';
+import { CharMeasure } from './utils/CharMeasure';
+
+/**
+ * Represents the viewport of a terminal, the visible area within the larger buffer of output.
+ * Logic for the virtual scroll bar is included in this object.
+ */
+export class Viewport {
+  private currentRowHeight: number;
+  private lastRecordedBufferLength: number;
+  private lastRecordedViewportHeight: number;
+
+  /**
+   * Creates a new Viewport.
+   * @param terminal The terminal this viewport belongs to.
+   * @param viewportElement The DOM element acting as the viewport.
+   * @param scrollArea The DOM element acting as the scroll area.
+   * @param charMeasureElement A DOM element used to measure the character size of. the terminal.
+   */
+  constructor(
+    private terminal: ITerminal,
+    private viewportElement: HTMLElement,
+    private scrollArea: HTMLElement,
+    private charMeasure: CharMeasure
+  ) {
+    this.currentRowHeight = 0;
+    this.lastRecordedBufferLength = 0;
+    this.lastRecordedViewportHeight = 0;
+
+    this.terminal.on('scroll', this.syncScrollArea.bind(this));
+    this.terminal.on('resize', this.syncScrollArea.bind(this));
+    this.viewportElement.addEventListener('scroll', this.onScroll.bind(this));
+
+    // Perform this async to ensure the CharMeasure is ready.
+    setTimeout(() => this.syncScrollArea(), 0);
+  }
+
+  /**
+   * Refreshes row height, setting line-height, viewport height and scroll area height if
+   * necessary.
+   * @param charSize A character size measurement bounding rect object, if it doesn't exist it will
+   *   be created.
+   */
+  private refresh(): void {
+    if (this.charMeasure.height > 0) {
+      const rowHeightChanged = this.charMeasure.height !== this.currentRowHeight;
+      if (rowHeightChanged) {
+        this.currentRowHeight = this.charMeasure.height;
+        this.viewportElement.style.lineHeight = this.charMeasure.height + 'px';
+        this.terminal.rowContainer.style.lineHeight = this.charMeasure.height + 'px';
+      }
+      const viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
+      if (rowHeightChanged || viewportHeightChanged) {
+        this.lastRecordedViewportHeight = this.terminal.rows;
+        this.viewportElement.style.height = this.charMeasure.height * this.terminal.rows + 'px';
+      }
+      this.scrollArea.style.height = (this.charMeasure.height * this.lastRecordedBufferLength) + 'px';
+    }
+  }
+
+  /**
+   * Updates dimensions and synchronizes the scroll area if necessary.
+   */
+  public syncScrollArea(): void {
+    if (this.lastRecordedBufferLength !== this.terminal.lines.length) {
+      // If buffer height changed
+      this.lastRecordedBufferLength = this.terminal.lines.length;
+      this.refresh();
+    } else if (this.lastRecordedViewportHeight !== this.terminal.rows) {
+      // If viewport height changed
+      this.refresh();
+    } else {
+      // If size has changed, refresh viewport
+      if (this.charMeasure.height !== this.currentRowHeight) {
+        this.refresh();
+      }
+    }
+
+    // Sync scrollTop
+    const scrollTop = this.terminal.ydisp * this.currentRowHeight;
+    if (this.viewportElement.scrollTop !== scrollTop) {
+      this.viewportElement.scrollTop = scrollTop;
+    }
+  }
+
+  /**
+   * Handles scroll events on the viewport, calculating the new viewport and requesting the
+   * terminal to scroll to it.
+   * @param ev The scroll event.
+   */
+  private onScroll(ev: Event) {
+    const newRow = Math.round(this.viewportElement.scrollTop / this.currentRowHeight);
+    const diff = newRow - this.terminal.ydisp;
+    this.terminal.scrollDisp(diff, true);
+  }
+
+  /**
+   * Handles mouse wheel events by adjusting the viewport's scrollTop and delegating the actual
+   * scrolling to `onScroll`, this event needs to be attached manually by the consumer of
+   * `Viewport`.
+   * @param ev The mouse wheel event.
+   */
+  public onWheel(ev: WheelEvent) {
+    if (ev.deltaY === 0) {
+      // Do nothing if it's not a vertical scroll event
+      return;
+    }
+    // Fallback to WheelEvent.DOM_DELTA_PIXEL
+    let multiplier = 1;
+    if (ev.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+      multiplier = this.currentRowHeight;
+    } else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+      multiplier = this.currentRowHeight * this.terminal.rows;
+    }
+    this.viewportElement.scrollTop += ev.deltaY * multiplier;
+    // Prevent the page from scrolling when the terminal scrolls
+    ev.preventDefault();
+  };
+}

src/addons/attach/attach.js

@@ -0,0 +1,126 @@
+/**
+ * Implements the attach method, that attaches the terminal to a WebSocket stream.
+ * @module xterm/addons/attach/attach
+ * @license MIT
+ */
+
+(function (attach) {
+  if (typeof exports === 'object' && typeof module === 'object') {
+    /*
+     * CommonJS environment
+     */
+    module.exports = attach(require('../../xterm'));
+  } else if (typeof define == 'function') {
+    /*
+     * Require.js is available
+     */
+    define(['../../xterm'], attach);
+  } else {
+    /*
+     * Plain browser environment
+     */
+    attach(window.Terminal);
+  }
+})(function (Xterm) {
+  'use strict';
+
+  var exports = {};
+
+  /**
+   * Attaches the given terminal to the given socket.
+   *
+   * @param {Xterm} term - The terminal to be attached to the given socket.
+   * @param {WebSocket} socket - The socket to attach the current terminal.
+   * @param {boolean} bidirectional - Whether the terminal should send data
+   *                                  to the socket as well.
+   * @param {boolean} buffered - Whether the rendering of incoming data
+   *                             should happen instantly or at a maximum
+   *                             frequency of 1 rendering per 10ms.
+   */
+  exports.attach = function (term, socket, bidirectional, buffered) {
+    bidirectional = (typeof bidirectional == 'undefined') ? true : bidirectional;
+    term.socket = socket;
+
+    term._flushBuffer = function () {
+      term.write(term._attachSocketBuffer);
+      term._attachSocketBuffer = null;
+      clearTimeout(term._attachSocketBufferTimer);
+      term._attachSocketBufferTimer = null;
+    };
+
+    term._pushToBuffer = function (data) {
+      if (term._attachSocketBuffer) {
+        term._attachSocketBuffer += data;
+      } else {
+        term._attachSocketBuffer = data;
+        setTimeout(term._flushBuffer, 10);
+      }
+    };
+
+    term._getMessage = function (ev) {
+      if (buffered) {
+        term._pushToBuffer(ev.data);
+      } else {
+        term.write(ev.data);
+      }
+    };
+
+    term._sendData = function (data) {
+      socket.send(data);
+    };
+
+    socket.addEventListener('message', term._getMessage);
+
+    if (bidirectional) {
+      term.on('data', term._sendData);
+    }
+
+    socket.addEventListener('close', term.detach.bind(term, socket));
+    socket.addEventListener('error', term.detach.bind(term, socket));
+  };
+
+  /**
+   * Detaches the given terminal from the given socket
+   *
+   * @param {Xterm} term - The terminal to be detached from the given socket.
+   * @param {WebSocket} socket - The socket from which to detach the current
+   *                             terminal.
+   */
+  exports.detach = function (term, socket) {
+    term.off('data', term._sendData);
+
+    socket = (typeof socket == 'undefined') ? term.socket : socket;
+
+    if (socket) {
+      socket.removeEventListener('message', term._getMessage);
+    }
+
+    delete term.socket;
+  };
+
+  /**
+   * Attaches the current terminal to the given socket
+   *
+   * @param {WebSocket} socket - The socket to attach the current terminal.
+   * @param {boolean} bidirectional - Whether the terminal should send data
+   *                                  to the socket as well.
+   * @param {boolean} buffered - Whether the rendering of incoming data
+   *                             should happen instantly or at a maximum
+   *                             frequency of 1 rendering per 10ms.
+   */
+  Xterm.prototype.attach = function (socket, bidirectional, buffered) {
+    return exports.attach(this, socket, bidirectional, buffered);
+  };
+
+  /**
+   * Detaches the current terminal from the given socket.
+   *
+   * @param {WebSocket} socket - The socket from which to detach the current
+   *                             terminal.
+   */
+  Xterm.prototype.detach = function (socket) {
+    return exports.detach(this, socket);
+  };
+
+  return exports;
+});

src/addons/fit/fit.js

@@ -0,0 +1,86 @@
+/**
+ * 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).
+ * @module xterm/addons/fit/fit
+ * @license MIT
+ */
+
+(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) {
+  var exports = {};
+
+  exports.proposeGeometry = function (term) {
+    if (!term.element.parentElement) {
+      return null;
+    }
+    var parentElementStyle = window.getComputedStyle(term.element.parentElement),
+        parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
+        parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width')) - 17),
+        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 = subjectRow.getBoundingClientRect().height;
+    subjectRow.innerHTML = contentBuffer;
+
+    rows = parseInt(availableHeight / characterHeight);
+    cols = parseInt(availableWidth / characterWidth);
+
+    geometry = {cols: cols, rows: rows};
+    return geometry;
+  };
+
+  exports.fit = function (term) {
+    var geometry = exports.proposeGeometry(term);
+
+    if (geometry) {
+      term.resize(geometry.cols, geometry.rows);
+    }
+  };
+
+  Xterm.prototype.proposeGeometry = function () {
+    return exports.proposeGeometry(this);
+  };
+
+  Xterm.prototype.fit = function () {
+    return exports.fit(this);
+  };
+
+  return exports;
+});

src/addons/fullscreen/fullscreen.css

@@ -0,0 +1,10 @@
+.xterm.fullscreen {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: auto;
+    height: auto;
+    z-index: 255;
+}

src/addons/fullscreen/fullscreen.js

@@ -0,0 +1,50 @@
+/**
+ * Fullscreen addon for xterm.js
+ * @module xterm/addons/fullscreen/fullscreen
+ * @license MIT
+ */
+(function (fullscreen) {
+  if (typeof exports === 'object' && typeof module === 'object') {
+    /*
+     * CommonJS environment
+     */
+    module.exports = fullscreen(require('../../xterm'));
+  } else if (typeof define == 'function') {
+    /*
+     * Require.js is available
+     */
+    define(['../../xterm'], fullscreen);
+  } else {
+    /*
+     * Plain browser environment
+     */
+    fullscreen(window.Terminal);
+  }
+})(function (Xterm) {
+  var exports = {};
+
+  /**
+   * Toggle the given terminal's fullscreen mode.
+   * @param {Xterm} term - The terminal to toggle full screen mode
+   * @param {boolean} fullscreen - Toggle fullscreen on (true) or off (false)
+   */
+  exports.toggleFullScreen = function (term, fullscreen) {
+    var fn;
+
+    if (typeof fullscreen == 'undefined') {
+      fn = (term.element.classList.contains('fullscreen')) ? 'remove' : 'add';
+    } else if (!fullscreen) {
+      fn = 'remove';
+    } else {
+      fn = 'add';
+    }
+
+    term.element.classList[fn]('fullscreen');
+  };
+
+  Xterm.prototype.toggleFullscreen = function (fullscreen) {
+    exports.toggleFullScreen(this, fullscreen);
+  };
+
+  return exports;
+});

src/addons/terminado/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "xterm.terminado",
+  "main": "terminado.js",
+  "private": true
+}

src/addons/terminado/terminado.js

@@ -0,0 +1,135 @@
+/**
+ * This module provides methods for attaching a terminal to a terminado WebSocket stream.
+ *
+ * @module xterm/addons/terminado/terminado
+ * @license MIT
+ */
+
+(function (attach) {
+  if (typeof exports === 'object' && typeof module === 'object') {
+    /*
+     * CommonJS environment
+     */
+    module.exports = attach(require('../../xterm'));
+  } else if (typeof define == 'function') {
+    /*
+     * Require.js is available
+     */
+    define(['../../xterm'], attach);
+  } else {
+    /*
+     * Plain browser environment
+     */
+    attach(window.Terminal);
+  }
+})(function (Xterm) {
+  'use strict';
+
+  var exports = {};
+
+  /**
+   * Attaches the given terminal to the given socket.
+   *
+   * @param {Xterm} term - The terminal to be attached to the given socket.
+   * @param {WebSocket} socket - The socket to attach the current terminal.
+   * @param {boolean} bidirectional - Whether the terminal should send data
+   *                                  to the socket as well.
+   * @param {boolean} buffered - Whether the rendering of incoming data
+   *                             should happen instantly or at a maximum
+   *                             frequency of 1 rendering per 10ms.
+   */
+  exports.terminadoAttach = function (term, socket, bidirectional, buffered) {
+    bidirectional = (typeof bidirectional == 'undefined') ? true : bidirectional;
+    term.socket = socket;
+
+    term._flushBuffer = function () {
+      term.write(term._attachSocketBuffer);
+      term._attachSocketBuffer = null;
+      clearTimeout(term._attachSocketBufferTimer);
+      term._attachSocketBufferTimer = null;
+    };
+
+    term._pushToBuffer = function (data) {
+      if (term._attachSocketBuffer) {
+        term._attachSocketBuffer += data;
+      } else {
+        term._attachSocketBuffer = data;
+        setTimeout(term._flushBuffer, 10);
+      }
+    };
+
+    term._getMessage = function (ev) {
+      var data = JSON.parse(ev.data)
+      if( data[0] == "stdout" ) {
+        if (buffered) {
+          term._pushToBuffer(data[1]);
+        } else {
+          term.write(data[1]);
+        }
+      }
+    };
+
+    term._sendData = function (data) {
+      socket.send(JSON.stringify(['stdin', data]));
+    };
+
+    term._setSize = function (size) {
+      socket.send(JSON.stringify(['set_size', size.rows, size.cols]));
+    };
+
+    socket.addEventListener('message', term._getMessage);
+
+    if (bidirectional) {
+      term.on('data', term._sendData);
+    }
+    term.on('resize', term._setSize);
+
+    socket.addEventListener('close', term.terminadoDetach.bind(term, socket));
+    socket.addEventListener('error', term.terminadoDetach.bind(term, socket));
+  };
+
+  /**
+   * Detaches the given terminal from the given socket
+   *
+   * @param {Xterm} term - The terminal to be detached from the given socket.
+   * @param {WebSocket} socket - The socket from which to detach the current
+   *                             terminal.
+   */
+  exports.terminadoDetach = function (term, socket) {
+    term.off('data', term._sendData);
+
+    socket = (typeof socket == 'undefined') ? term.socket : socket;
+
+    if (socket) {
+      socket.removeEventListener('message', term._getMessage);
+    }
+
+    delete term.socket;
+  };
+
+  /**
+   * Attaches the current terminal to the given socket
+   *
+   * @param {WebSocket} socket - The socket to attach the current terminal.
+   * @param {boolean} bidirectional - Whether the terminal should send data
+   *                                  to the socket as well.
+   * @param {boolean} buffered - Whether the rendering of incoming data
+   *                             should happen instantly or at a maximum
+   *                             frequency of 1 rendering per 10ms.
+   */
+  Xterm.prototype.terminadoAttach = function (socket, bidirectional, buffered) {
+    return exports.terminadoAttach(this, socket, bidirectional, buffered);
+  };
+
+  /**
+   * Detaches the current terminal from the given socket.
+   *
+   * @param {WebSocket} socket - The socket from which to detach the current
+   *                             terminal.
+   */
+  Xterm.prototype.terminadoDetach = function (socket) {
+    return exports.terminadoDetach(this, socket);
+  };
+
+  return exports;
+});

src/handlers/Clipboard.test.ts

@@ -1,11 +1,11 @@
-var assert = require('chai').assert;
-var Terminal = require('../src/xterm');
-var Clipboard = require('../src/handlers/Clipboard');
+import { assert } from 'chai';
+import * as Terminal from '../xterm';
+import * as Clipboard from './Clipboard';
 
 
 describe('evaluateCopiedTextProcessing', function () {
   it('should strip trailing whitespaces and replace nbsps with spaces', function () {
-    var nonBreakingSpace = String.fromCharCode(160),
+    let nonBreakingSpace = String.fromCharCode(160),
         copiedText = 'echo' + nonBreakingSpace + 'hello' + nonBreakingSpace,
         processedText = Clipboard.prepareTextForClipboard(copiedText);
 

src/handlers/Clipboard.ts

@@ -1,13 +1,20 @@
 /**
- * xterm.js: xterm, in the browser
- * Copyright (c) 2016, SourceLair Private Company <www.sourcelair.com> (MIT License)
+ * Clipboard handler module: exports methods for handling all clipboard-related events in the
+ * terminal.
+ * @module xterm/handlers/Clipboard
+ * @license MIT
  */
 
-/**
- * Clipboard handler module. This module contains methods for handling all
- * clipboard-related events appropriately in the terminal.
- * @module xterm/handlers/Clipboard
- */
+import { ITerminal } from '../Interfaces';
+
+interface IWindow extends Window {
+  clipboardData?: {
+    getData(format: string): string;
+    setData(format: string, data: string);
+  };
+}
+
+declare var window: IWindow;
 
 /**
  * Prepares text copied from terminal selection, to be saved in the clipboard by:
@@ -16,14 +23,14 @@
  * @param {string} text The copied text that needs processing for storing in clipboard
  * @returns {string}
  */
-function prepareTextForClipboard(text) {
-  var space = String.fromCharCode(32),
+export function prepareTextForClipboard(text: string): string {
+  let space = String.fromCharCode(32),
       nonBreakingSpace = String.fromCharCode(160),
       allNonBreakingSpaces = new RegExp(nonBreakingSpace, 'g'),
       processedText = text.split('\n').map(function (line) {
         // Strip all trailing white spaces and convert all non-breaking spaces
         // to regular spaces.
-        var processedLine = line.replace(/\s+$/g, '').replace(allNonBreakingSpaces, space);
+        let processedLine = line.replace(/\s+$/g, '').replace(allNonBreakingSpaces, space);
 
         return processedLine;
       }).join('\n');
@@ -35,11 +42,18 @@ function prepareTextForClipboard(text) {
  * Binds copy functionality to the given terminal.
  * @param {ClipboardEvent} ev The original copy event to be handled
  */
-function copyHandler (ev) {
-  var copiedText = window.getSelection().toString(),
+export function copyHandler(ev: ClipboardEvent, term: ITerminal) {
+  // We cast `window` to `any` type, because TypeScript has not declared the `clipboardData`
+  // property that we use below for Internet Explorer.
+  let copiedText = window.getSelection().toString(),
       text = prepareTextForClipboard(copiedText);
 
-  ev.clipboardData.setData('text/plain', text);
+  if (term.browser.isMSIE) {
+    window.clipboardData.setData('Text', text);
+  } else {
+    ev.clipboardData.setData('text/plain', text);
+  }
+
   ev.preventDefault(); // Prevent or the original text will be copied.
 }
 
@@ -48,13 +62,27 @@ function copyHandler (ev) {
  * @param {ClipboardEvent} ev The original paste event to be handled
  * @param {Terminal} term The terminal on which to apply the handled paste event
  */
-function pasteHandler(ev, term) {
+export function pasteHandler(ev: ClipboardEvent, term: ITerminal) {
   ev.stopPropagation();
-  if (ev.clipboardData) {
-    var text = ev.clipboardData.getData('text/plain');
+
+  let text: string;
+
+  let dispatchPaste = function(text) {
     term.handler(text);
     term.textarea.value = '';
     return term.cancel(ev);
+  };
+
+  if (term.browser.isMSIE) {
+    if (window.clipboardData) {
+      text = window.clipboardData.getData('Text');
+      dispatchPaste(text);
+    }
+  } else {
+    if (ev.clipboardData) {
+      text = ev.clipboardData.getData('text/plain');
+      dispatchPaste(text);
+    }
   }
 }
 
@@ -68,45 +96,49 @@ function pasteHandler(ev, term) {
  * area, then bring the terminal's input below the cursor, in order to
  * trigger the event on the textarea and allow-right click paste, without
  * caring about disappearing selection.
- * @param {ClipboardEvent} ev The original paste event to be handled
+ * @param {MouseEvent} ev The original right click event to be handled
  * @param {Terminal} term The terminal on which to apply the handled paste event
  */
-function rightClickHandler(ev, term) {
-  var s = document.getSelection(),
-      sText = prepareTextForClipboard(s.toString()),
-      r = s.getRangeAt(0);
-
-  var x = ev.clientX,
+export function rightClickHandler(ev: MouseEvent, term: ITerminal) {
+  let s = document.getSelection(),
+      selectedText = prepareTextForClipboard(s.toString()),
+      clickIsOnSelection = false,
+      x = ev.clientX,
       y = ev.clientY;
 
-  var cr = r.getClientRects(),
-      clickIsOnSelection = false,
-      i, rect;
+  if (s.rangeCount) {
+    let r = s.getRangeAt(0),
+        cr = r.getClientRects();
 
-  for (i=0; i<cr.length; i++) {
-    rect = cr[i];
-    clickIsOnSelection = (
-      (x > rect.left) && (x < rect.right) &&
-      (y > rect.top) && (y < rect.bottom)
-    );
+    for (let i = 0; i < cr.length; i++) {
+      let rect = cr[i];
+
+      clickIsOnSelection = (
+        (x > rect.left) && (x < rect.right) &&
+        (y > rect.top) && (y < rect.bottom)
+      );
+
+      if (clickIsOnSelection) {
+        break;
+      }
+    }
     // If we clicked on selection and selection is not a single space,
     // then mark the right click as copy-only. We check for the single
     // space selection, as this can happen when clicking on an &nbsp;
     // and there is not much pointing in copying a single space.
-    // Single space is char
-    if (clickIsOnSelection && (sText !== ' ')) {
-      break;
+    if (selectedText.match(/^\s$/) || !selectedText.length) {
+      clickIsOnSelection = false;
     }
   }
 
   // Bring textarea at the cursor position
   if (!clickIsOnSelection) {
     term.textarea.style.position = 'fixed';
-    term.textarea.style.width = '10px';
-    term.textarea.style.height = '10px';
-    term.textarea.style.left = x + 'px';
-    term.textarea.style.top = y + 'px';
-    term.textarea.style.zIndex = 1000;
+    term.textarea.style.width = '20px';
+    term.textarea.style.height = '20px';
+    term.textarea.style.left = (x - 10) + 'px';
+    term.textarea.style.top = (y - 10) + 'px';
+    term.textarea.style.zIndex = '1000';
     term.textarea.focus();
 
     // Reset the terminal textarea's styling
@@ -117,10 +149,6 @@ function rightClickHandler(ev, term) {
       term.textarea.style.left = null;
       term.textarea.style.top = null;
       term.textarea.style.zIndex = null;
-    }, 1);
+    }, 4);
   }
 }
-
-export {
-  prepareTextForClipboard, copyHandler, pasteHandler, rightClickHandler
-};

src/test/addons/test.js

@@ -1,10 +1,10 @@
 var assert = require('chai').assert;
-var Terminal = require('../../src/xterm');
+var Terminal = require('../../xterm');
 
 describe('xterm.js addons', function() {
   it('should load addons with Terminal.loadAddon', function () {
     Terminal.loadAddon('attach');
-    // Test that function was loaded successfully
+    // Test that addon was loaded successfully
     assert.equal(typeof Terminal.prototype.attach, 'function');
   });
 });

src/test/escape-sequences-test.js

@@ -1,8 +1,14 @@
 var glob = require('glob');
 var fs = require('fs');
-var pty = require('pty.js');
+var os = require('os');
+var pty = require('node-pty');
 var sleep = require('sleep');
-var Terminal = require('../src/xterm');
+var Terminal = require('../xterm');
+
+if (os.platform() === 'win32') {
+  // Skip tests on Windows since pty.open isn't supported
+  return;
+}
 
 var CONSOLE_LOG = console.log;
 
@@ -56,10 +62,10 @@ function formatError(in_, out_, expected) {
 function terminalToString(term) {
   var result = '';
   var line_s = '';
-  for (var line=0; line<term.rows; ++line) {
+  for (var line = term.ybase; line < term.ybase + term.rows; line++) {
     line_s = '';
     for (var cell=0; cell<term.cols; ++cell) {
-      line_s += term.lines[line][cell][1];
+      line_s += term.lines.get(line)[cell][1];
     }
     // rtrim empty cells as xterm does
     line_s = line_s.replace(/\s+$/, '');
@@ -76,30 +82,49 @@ describe('xterm output comparison', function() {
   beforeEach(function () {
     xterm = new Terminal(COLS, ROWS);
     xterm.refresh = function() {};
+    xterm.viewport = {
+      syncScrollArea: function() {}
+    };
   });
 
   // omit stack trace for escape sequence files
   Error.stackTraceLimit = 0;
-  var files = glob.sync('test/escape_sequence_files/*.in');
+  var files = glob.sync('**/escape_sequence_files/*.in');
   // only successful tests for now
-  var successful = [0, 2, 6, 12, 13, 18, 20, 22, 27, 28];
-  for (var a in successful) {
-    var i = successful[a];
-    (function(filename){
+  var skip = [
+    10, 16, 17, 19, 32, 33, 34, 35, 36, 39,
+    40, 42, 43, 44, 45, 46, 47, 48, 49, 50,
+    51, 52, 54, 55, 56, 57, 58, 59, 60, 61,
+    63, 68
+  ];
+  for (var i = 0; i < files.length; i++) {
+    if (skip.indexOf(i) >= 0) {
+      continue;
+    }
+    (function(filename) {
       it(filename.split('/').slice(-1)[0], function () {
         pty_reset();
         var in_file = fs.readFileSync(filename, 'utf8');
         var from_pty = pty_write_read(in_file);
         // uncomment this to get log from terminal
-        console.log = function(){};
-        xterm.write(from_pty);
+        //console.log = function(){};
+
+        // Perform a synchronous .write(data)
+        xterm.writeBuffer.push(from_pty);
+        xterm.innerWrite();
+
         var from_emulator = terminalToString(xterm);
         console.log = CONSOLE_LOG;
         var expected = fs.readFileSync(filename.split('.')[0] + '.text', 'utf8');
-        if (from_emulator != expected) {
+        // Some of the tests have whitespace on the right of lines, we trim all the linex
+        // from xterm.js so ignore this for now at least.
+        var expectedRightTrimmed = expected.split('\n').map(function (l) {
+          return l.replace(/\s+$/, '');
+        }).join('\n');
+        if (from_emulator != expectedRightTrimmed) {
           // uncomment to get noisy output
-          //throw new Error(formatError(in_file, from_emulator, expected));
-          throw new Error('mismatch');
+          throw new Error(formatError(in_file, from_emulator, expected));
+        //   throw new Error('mismatch');
         }
       });
     })(files[i]);