Merge pull request #3465 from xtermjs/release_4_14_0

v4.14.0

.devcontainer/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10
+FROM node:14
 
 # Configure apt
 ENV DEBIAN_FRONTEND=noninteractive

.eslintrc.json

@@ -9,6 +9,7 @@
     "project": [
       "src/browser/tsconfig.json",
       "src/common/tsconfig.json",
+      "src/headless/tsconfig.json",
       "test/api/tsconfig.json",
       "test/benchmark/tsconfig.json",
       "addons/xterm-addon-attach/src/tsconfig.json",
@@ -43,10 +44,11 @@
     "@typescript-eslint/array-type": [
       "warn",
       {
-        "default": "array-simple",
+        "default": "array",
         "readonly": "generic"
       }
     ],
+    "@typescript-eslint/consistent-type-assertions": "warn",
     "@typescript-eslint/consistent-type-definitions": "warn",
     "@typescript-eslint/explicit-function-return-type": [
       "warn",

.mocha.env

@@ -0,0 +1 @@
+NODE_PATH=./out

.mocharc.yml

@@ -0,0 +1,11 @@
+require:
+  - source-map-support/register
+spec:
+  - out/**/*.test.js
+  - addons/**/out/*.test.js
+watch-files:
+  - out/**/*.js
+  - addons/**/out/*.js
+reporter: spec
+color: true
+check-leaks: true

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
     "typescript.preferences.importModuleSpecifier": "non-relative",
-    "typescript.preferences.quoteStyle": "single"
+    "typescript.preferences.quoteStyle": "single",
+    "mochaExplorer.envPath": ".mocha.env"
 }

README.md

@@ -91,6 +91,10 @@ We also partially support *Internet Explorer 11*, meaning xterm.js should work f
 
 Xterm.js works seamlessly in [Electron](https://electronjs.org/) apps and may even work on earlier versions of the browsers. These are the versions we strive to keep working.
 
+### Node.js Support
+
+We also publish [`xterm-headless`](https://www.npmjs.com/package/xterm-headless) which is a stripped down version of xterm.js that runs in Node.js. An example use case for this is to keep track of a terminal's state where the process is running and using the serialize addon so it can get all state restored upon reconnection.
+
 ## API
 
 The full API for xterm.js is contained within the [TypeScript declaration file](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts), use the branch/tag picker in GitHub (`w`) to navigate to the correct version of the API.
@@ -143,7 +147,6 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**cPanel & WHM**](https://cpanel.com): The hosting platform of choice.
 - [**Nutanix**](https://github.com/nutanix): Nutanix Enterprise Cloud uses xterm in the webssh functionality within Nutanix Calm, and is also looking to move our old noserial (termjs) functionality to xterm.js.
 - [**SSH Web Client**](https://github.com/roke22/PHP-SSH2-Web-Client): SSH Web Client with PHP.
-- [**Shellvault**](https://www.shellvault.io): The cloud-based SSH terminal you can access from anywhere.
 - [**Juno**](http://junolab.org/): A flexible Julia IDE, based on Atom.
 - [**webssh**](https://github.com/huashengdun/webssh): Web based ssh client.
 - [**info-beamer hosted**](https://info-beamer.com): Uses xterm.js to manage digital signage devices from the web dashboard.
@@ -163,19 +166,24 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**CoCalc**](https://cocalc.com/): Lots of free software pre-installed, to chat, collaborate, develop, program, publish, research, share, teach, in C++, HTML, Julia, Jupyter, LaTeX, Markdown, Python, R, SageMath, Scala, ...
 - [**Dank Domain**](https://www.DDgame.us/): Open source multiuser medieval game supporting old & new terminal emulation.
 - [**DockerStacks**](https://docker-stacks.com/): Local LAMP/LEMP development studio
-- [**Codecademy**](https://codecademy.com/): Uses xterm.js in its courses on Bash. 
+- [**Codecademy**](https://codecademy.com/): Uses xterm.js in its courses on Bash.
 - [**Laravel Ssh Web Client**](https://github.com/roke22/Laravel-ssh-client): Laravel server inventory with ssh web client to connect at server using xterm.js
 - [**Repl.it**](https://repl.it): Collaborative browser based IDE with support for 50+ different languages.
 - [**TeleType**](https://github.com/akshaykmr/TeleType): cli tool that allows you to share your terminal online conveniently. Show off mad cli-fu, help a colleague, teach, or troubleshoot.
 - [**Intervue**](https://www.intervue.io): Pair programming for interviews. Multiple programming languages are supported, with results displayed by xterm.js.
-- [**TRASA**](https://trasa.io): Zero trust access to Web, SSH, RDP, and Database services.  
+- [**TRASA**](https://trasa.io): Zero trust access to Web, SSH, RDP, and Database services.
 - [**Commas**](https://github.com/CyanSalt/commas): Commas is a hackable terminal and command runner.
-- [**Devtron**](https://github.com/devtron-labs/devtron): Software Delivery Workflow For Kubernetes. 
+- [**Devtron**](https://github.com/devtron-labs/devtron): Software Delivery Workflow For Kubernetes.
 - [**NxShell**](https://github.com/nxshell/nxshell): An easy to use new terminal for SSH.
 - [**gifcast**](https://dstein64.github.io/gifcast/): Converts an asciinema cast to an animated GIF.
 - [**WizardWebssh**](https://gitlab.com/mikeramsey/wizardwebssh): A terminal with Pyqt5 Widget for embedding, which can be used as an ssh client to connect to your ssh servers. It is written in Python, based on tornado, paramiko, and xterm.js.
-- [**Wizard Assistant**](https://wizardassistant.com/): Wizard Assistant comes with advanced automation tools, preloaded common and special time-saving commands, and a built-in SSH terminal. Now you can remotely administer, troubleshoot, and analyze any system with ease. 
-[And much more...](https://github.com/xtermjs/xterm.js/network/dependents)
+- [**Wizard Assistant**](https://wizardassistant.com/): Wizard Assistant comes with advanced automation tools, preloaded common and special time-saving commands, and a built-in SSH terminal. Now you can remotely administer, troubleshoot, and analyze any system with ease.
+- [**ucli**](https://github.com/tsadarsh/ucli): Command Line for everyone :family_man_woman_girl_boy: at [www.ucli.tech](https://www.ucli.tech).
+- [**Tess**](https://github.com/SquitchYT/Tess/): Simple Terminal Fully Customizable for Everyone.
+- [**HashiCorp Nomad**](https://www.nomadproject.io/): A container orchestrator with the ability to connect to remote tasks via a web interface using websockets and xterm.js.
+- [**TermPair**](https://github.com/cs01/termpair): View and control terminals from your browser with end-to-end encryption
+- [**gdbgui**](https://github.com/cs01/gdbgui): Browser-based frontend to gdb (gnu debugger)
+- [And much more...](https://github.com/xtermjs/xterm.js/network/dependents)
 
 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 on our list. Note: Please add any new contributions to the end of the list only.
 

addons/xterm-addon-attach/src/AttachAddon.ts

@@ -20,7 +20,7 @@ export class AttachAddon implements ITerminalAddon {
     this._socket = socket;
     // always set binary type to arraybuffer, we do not handle blobs
     this._socket.binaryType = 'arraybuffer';
-    this._bidirectional = (options && options.bidirectional === false) ? false : true;
+    this._bidirectional = !(options && options.bidirectional === false);
   }
 
   public activate(terminal: Terminal): void {

addons/xterm-addon-attach/test/AttachAddon.api.ts

@@ -4,7 +4,7 @@
  */
 
 import WebSocket = require('ws');
-import { openTerminal, pollFor, getBrowserType } from '../../../out-test/api/TestUtils';
+import { openTerminal, pollFor, launchBrowser } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
 
 const APP = 'http://127.0.0.1:3001/test';
@@ -16,10 +16,7 @@ const height = 600;
 
 describe('AttachAddon', () => {
   before(async function(): Promise<any> {
-    const browserType = getBrowserType();
-    browser = await browserType.launch({
-      headless: process.argv.includes('--headless')
-    });
+    browser = await launchBrowser();
     page = await (await browser.newContext()).newPage();
     await page.setViewportSize({ width, height });
   });

addons/xterm-addon-fit/test/FitAddon.api.ts

@@ -4,7 +4,7 @@
  */
 
 import { assert } from 'chai';
-import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils';
+import { openTerminal, launchBrowser } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
 
 const APP = 'http://127.0.0.1:3001/test';
@@ -16,10 +16,7 @@ const height = 768;
 
 describe('FitAddon', () => {
   before(async function(): Promise<any> {
-    const browserType = getBrowserType();
-    browser = await browserType.launch({
-      headless: process.argv.includes('--headless')
-    });
+    browser = await launchBrowser();
     page = await (await browser.newContext()).newPage();
     await page.setViewportSize({ width, height });
     await page.goto(APP);

addons/xterm-addon-ligatures/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-ligatures",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Add support for programming ligatures to xterm.js",
   "author": {
     "name": "The xterm.js authors",

addons/xterm-addon-ligatures/src/font.ts

@@ -15,6 +15,15 @@ interface IFontMetadata {
   blob: () => Promise<Blob>;
 }
 
+interface IFontAccessNavigator {
+  fonts: {
+    query: () => Promise<IFontMetadata[]>;
+  };
+  permissions: {
+    request?: (permission: { name: string }) => Promise<{state: string}>;
+  };
+}
+
 let fontsPromise: Promise<FontList | Record<string, IFontMetadata[]>> | undefined = undefined;
 
 /**
@@ -28,7 +37,7 @@ export default async function load(fontFamily: string, cacheSize: number): Promi
     // Web environment that supports font access API
     if (typeof navigator !== 'undefined' && 'fonts' in navigator) {
       try {
-        const status = await (navigator as any).permissions.request?.({
+        const status = await (navigator as unknown as IFontAccessNavigator).permissions.request?.({
           name: 'local-fonts'
         });
         if (status && status.state !== 'granted') {
@@ -44,8 +53,8 @@ export default async function load(fontFamily: string, cacheSize: number): Promi
       }
       const fonts: Record<string, IFontMetadata[]> = {};
       try {
-        const fontsIterator: AsyncIterableIterator<IFontMetadata> = (navigator as any).fonts.query();
-        for await (const metadata of fontsIterator) {
+        const fontsIterator = await (navigator as unknown as IFontAccessNavigator).fonts.query();
+        for (const metadata of fontsIterator) {
           if (!fonts.hasOwnProperty(metadata.family)) {
             fonts[metadata.family] = [];
           }

addons/xterm-addon-search/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-search",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"

addons/xterm-addon-search/src/SearchAddon.ts

@@ -23,7 +23,7 @@ export interface ISearchResult {
   row: number;
 }
 
-const NON_WORD_CHARACTERS = ' ~!@#$%^&*()+`-=[]{}|\;:"\',./<>?';
+const NON_WORD_CHARACTERS = ' ~!@#$%^&*()+`-=[]{}|\\;:"\',./<>?';
 const LINES_CACHE_TIME_TO_LIVE = 15 * 1000; // 15 secs
 
 export class SearchAddon implements ITerminalAddon {
@@ -394,7 +394,7 @@ export class SearchAddon implements ITerminalAddon {
     // If it is not in the viewport then we scroll else it just gets selected
     if (result.row >= (terminal.buffer.active.viewportY + terminal.rows) || result.row < terminal.buffer.active.viewportY) {
       let scroll = result.row - terminal.buffer.active.viewportY;
-      scroll = scroll - Math.floor(terminal.rows / 2);
+      scroll -= Math.floor(terminal.rows / 2);
       terminal.scrollLines(scroll);
     }
     return true;

addons/xterm-addon-search/test/SearchAddon.api.ts

@@ -6,7 +6,7 @@
 import { assert } from 'chai';
 import { readFile } from 'fs';
 import { resolve } from 'path';
-import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { openTerminal, writeSync, launchBrowser } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
 
 const APP = 'http://127.0.0.1:3001/test';
@@ -18,10 +18,7 @@ const height = 600;
 
 describe('Search Tests', function(): void {
   before(async function(): Promise<any> {
-    const browserType = getBrowserType();
-    browser = await browserType.launch({
-      headless: process.argv.includes('--headless')
-    });
+    browser = await launchBrowser();
     page = await (await browser.newContext()).newPage();
     await page.setViewportSize({ width, height });
     await page.goto(APP);

addons/xterm-addon-serialize/benchmark/SerializeAddon.benchmark.ts

@@ -35,7 +35,7 @@ perfContext('Terminal: sh -c "dd if=/dev/urandom count=40 bs=1k | hexdump | lolc
       chunks.push(data as unknown as Buffer);
       length += data.length;
     });
-    await new Promise(resolve => p.on('exit', () => resolve()));
+    await new Promise<void>(resolve => p.on('exit', () => resolve()));
     contentUtf8 = Buffer.concat(chunks, length);
     // translate to content string
     const buffer = new Uint32Array(contentUtf8.length);

addons/xterm-addon-serialize/package.json

@@ -1,12 +1,13 @@
 {
   "name": "xterm-addon-serialize",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
   },
   "main": "lib/xterm-addon-serialize.js",
   "types": "typings/xterm-addon-serialize.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js",
   "license": "MIT",
   "scripts": {
     "build": "../../node_modules/.bin/tsc -p .",

addons/xterm-addon-serialize/src/SerializeAddon.ts

@@ -7,13 +7,17 @@
 
 import { Terminal, ITerminalAddon, IBuffer, IBufferCell } from 'xterm';
 
+
 function constrain(value: number, low: number, high: number): number {
   return Math.max(low, Math.min(value, high));
 }
 
 // TODO: Refine this template class later
 abstract class BaseSerializeHandler {
-  constructor(private _buffer: IBuffer) { }
+  constructor(
+    protected readonly _buffer: IBuffer
+  ) {
+  }
 
   public serialize(startRow: number, endRow: number): string {
     // we need two of them to flip between old and new cell
@@ -71,8 +75,6 @@ function equalFlags(cell1: IBufferCell, cell2: IBufferCell): boolean {
     && cell1.isDim() === cell2.isDim();
 }
 
-
-
 class StringSerializeHandler extends BaseSerializeHandler {
   private _rowIndex: number = 0;
   private _allRows: string[] = new Array<string>();
@@ -83,7 +85,7 @@ class StringSerializeHandler extends BaseSerializeHandler {
   // we can see a full colored cell and a null cell that only have background the same style
   // but the information isn't preserved by null cell itself
   // so wee need to record it when required.
-  private _cursorStyle: IBufferCell = this._buffer1.getNullCell();
+  private _cursorStyle: IBufferCell = this._buffer.getNullCell();
 
   // where exact the cursor styles comes from
   // because we can't copy the cell directly
@@ -92,7 +94,7 @@ class StringSerializeHandler extends BaseSerializeHandler {
   private _cursorStyleCol: number = 0;
 
   // this is a null cell for reference for checking whether background is empty or not
-  private _backgroundCell: IBufferCell = this._buffer1.getNullCell();
+  private _backgroundCell: IBufferCell = this._buffer.getNullCell();
 
   private _firstRow: number = 0;
   private _lastCursorRow: number = 0;
@@ -100,8 +102,11 @@ class StringSerializeHandler extends BaseSerializeHandler {
   private _lastContentCursorRow: number = 0;
   private _lastContentCursorCol: number = 0;
 
-  constructor(private _buffer1: IBuffer, private _terminal: Terminal) {
-    super(_buffer1);
+  constructor(
+    buffer: IBuffer,
+    private readonly _terminal: Terminal
+  ) {
+    super(buffer);
   }
 
   protected _beforeSerialize(rows: number, start: number, end: number): void {
@@ -111,14 +116,14 @@ class StringSerializeHandler extends BaseSerializeHandler {
     this._firstRow = start;
   }
 
-  private _thisRowLastChar: IBufferCell = this._buffer1.getNullCell();
-  private _thisRowLastSecondChar: IBufferCell = this._buffer1.getNullCell();
-  private _nextRowFirstChar: IBufferCell = this._buffer1.getNullCell();
+  private _thisRowLastChar: IBufferCell = this._buffer.getNullCell();
+  private _thisRowLastSecondChar: IBufferCell = this._buffer.getNullCell();
+  private _nextRowFirstChar: IBufferCell = this._buffer.getNullCell();
   protected _rowEnd(row: number, isLastRow: boolean): void {
     // if there is colorful empty cell at line end, whe must pad it back, or the the color block will missing
     if (this._nullCellCount > 0 && !equalBg(this._cursorStyle, this._backgroundCell)) {
       // use clear right to set background.
-      this._currentRow += `\x1b[${this._nullCellCount}X`;
+      this._currentRow += `\u001b[${this._nullCellCount}X`;
     }
 
     let rowSeparator = '';
@@ -127,13 +132,13 @@ class StringSerializeHandler extends BaseSerializeHandler {
     if (!isLastRow) {
       // Enable BCE
       if (row - this._firstRow >= this._terminal.rows) {
-        this._buffer1.getLine(this._cursorStyleRow)?.getCell(this._cursorStyleCol, this._backgroundCell);
+        this._buffer.getLine(this._cursorStyleRow)?.getCell(this._cursorStyleCol, this._backgroundCell);
       }
 
       // Fetch current line
-      const currentLine = this._buffer1.getLine(row)!;
+      const currentLine = this._buffer.getLine(row)!;
       // Fetch next line
-      const nextLine = this._buffer1.getLine(row + 1)!;
+      const nextLine = this._buffer.getLine(row + 1)!;
 
       if (!nextLine.isWrapped) {
         // just insert the line break
@@ -187,15 +192,15 @@ class StringSerializeHandler extends BaseSerializeHandler {
           // insert enough character to force the wrap
           rowSeparator = '-'.repeat(this._nullCellCount + 1);
           // move back and erase next line head
-          rowSeparator += '\x1b[1D\x1b[1X';
+          rowSeparator += '\u001b[1D\u001b[1X';
 
           if (this._nullCellCount > 0) {
             // do these because we filled the last several null slot, which we shouldn't
-            rowSeparator += '\x1b[A';
-            rowSeparator += `\x1b[${currentLine.length - this._nullCellCount}C`;
-            rowSeparator += `\x1b[${this._nullCellCount}X`;
-            rowSeparator += `\x1b[${currentLine.length - this._nullCellCount}D`;
-            rowSeparator += '\x1b[B';
+            rowSeparator += '\u001b[A';
+            rowSeparator += `\u001b[${currentLine.length - this._nullCellCount}C`;
+            rowSeparator += `\u001b[${this._nullCellCount}X`;
+            rowSeparator += `\u001b[${currentLine.length - this._nullCellCount}D`;
+            rowSeparator += '\u001b[B';
           }
 
           // This is content and need the be serialized even it is invisible.
@@ -285,20 +290,20 @@ class StringSerializeHandler extends BaseSerializeHandler {
       if (this._nullCellCount > 0) {
         // use clear right to set background.
         if (!equalBg(this._cursorStyle, this._backgroundCell)) {
-          this._currentRow += `\x1b[${this._nullCellCount}X`;
+          this._currentRow += `\u001b[${this._nullCellCount}X`;
         }
         // use move right to move cursor.
-        this._currentRow += `\x1b[${this._nullCellCount}C`;
+        this._currentRow += `\u001b[${this._nullCellCount}C`;
         this._nullCellCount = 0;
       }
 
       this._lastContentCursorRow = this._lastCursorRow = row;
       this._lastContentCursorCol = this._lastCursorCol = col;
 
-      this._currentRow += `\x1b[${sgrSeq.join(';')}m`;
+      this._currentRow += `\u001b[${sgrSeq.join(';')}m`;
 
       // update the last cursor style
-      const line = this._buffer1.getLine(row);
+      const line = this._buffer.getLine(row);
       if (line !== undefined) {
         line.getCell(col, this._cursorStyle);
         this._cursorStyleRow = row;
@@ -317,10 +322,10 @@ class StringSerializeHandler extends BaseSerializeHandler {
         // because style change is handled by previous stage
         // use move right when background is empty, use clear right when there is background.
         if (equalBg(this._cursorStyle, this._backgroundCell)) {
-          this._currentRow += `\x1b[${this._nullCellCount}C`;
+          this._currentRow += `\u001b[${this._nullCellCount}C`;
         } else {
-          this._currentRow += `\x1b[${this._nullCellCount}X`;
-          this._currentRow += `\x1b[${this._nullCellCount}C`;
+          this._currentRow += `\u001b[${this._nullCellCount}X`;
+          this._currentRow += `\u001b[${this._nullCellCount}C`;
         }
         this._nullCellCount = 0;
       }
@@ -338,7 +343,7 @@ class StringSerializeHandler extends BaseSerializeHandler {
 
     // the fixup is only required for data without scrollback
     // because it will always be placed at last line otherwise
-    if (this._buffer1.length - this._firstRow <= this._terminal.rows) {
+    if (this._buffer.length - this._firstRow <= this._terminal.rows) {
       rowEnd = this._lastContentCursorRow + 1 - this._firstRow;
       this._lastCursorCol = this._lastContentCursorCol;
       this._lastCursorRow = this._lastContentCursorRow;
@@ -354,8 +359,8 @@ class StringSerializeHandler extends BaseSerializeHandler {
     }
 
     // restore the cursor
-    const realCursorRow = this._buffer1.baseY + this._buffer1.cursorY;
-    const realCursorCol = this._buffer1.cursorX;
+    const realCursorRow = this._buffer.baseY + this._buffer.cursorY;
+    const realCursorCol = this._buffer.cursorX;
 
     const cursorMoved = (realCursorRow !== this._lastCursorRow || realCursorCol !== this._lastCursorCol);
 
@@ -379,7 +384,6 @@ class StringSerializeHandler extends BaseSerializeHandler {
       moveRight(realCursorCol - this._lastCursorCol);
     }
 
-
     return content;
   }
 }
@@ -393,14 +397,40 @@ export class SerializeAddon implements ITerminalAddon {
     this._terminal = terminal;
   }
 
-  private _getString(buffer: IBuffer, scrollback?: number): string {
+  private _serializeBuffer(terminal: Terminal, buffer: IBuffer, scrollback?: number): string {
     const maxRows = buffer.length;
-    const handler = new StringSerializeHandler(buffer, this._terminal!);
+    const handler = new StringSerializeHandler(buffer, terminal);
+    const correctRows = (scrollback === undefined) ? maxRows : constrain(scrollback + terminal.rows, 0, maxRows);
+    return handler.serialize(maxRows - correctRows, maxRows);
+  }
 
-    const correctRows = (scrollback === undefined) ? maxRows : constrain(scrollback + this!._terminal!.rows, 0, maxRows);
-    const result = handler.serialize(maxRows - correctRows, maxRows);
+  private _serializeModes(terminal: Terminal): string {
+    let content = '';
+    const modes = terminal.modes;
 
-    return result;
+    // Default: false
+    if (modes.applicationCursorKeysMode) content += '\x1b[?1h';
+    if (modes.applicationKeypadMode) content += '\x1b[?66h';
+    if (modes.bracketedPasteMode) content += '\x1b[?2004h';
+    if (modes.insertMode) content += '\x1b[4h';
+    if (modes.originMode) content += '\x1b[?6h';
+    if (modes.reverseWraparoundMode) content += '\x1b[?45h';
+    if (modes.sendFocusMode) content += '\x1b[?1004h';
+
+    // Default: true
+    if (modes.wraparoundMode === false) content += '\x1b[?7l';
+
+    // Default: 'none'
+    if (modes.mouseTrackingMode !== 'none') {
+      switch (modes.mouseTrackingMode) {
+        case 'x10': content += '\x1b[?9h'; break;
+        case 'vt200': content += '\x1b[?1000h'; break;
+        case 'drag': content += '\x1b[?1002h'; break;
+        case 'any': content += '\x1b[?1003h'; break;
+      }
+    }
+
+    return content;
   }
 
   public serialize(scrollback?: number): string {
@@ -409,17 +439,19 @@ export class SerializeAddon implements ITerminalAddon {
       throw new Error('Cannot use addon until it has been loaded');
     }
 
-    if (this._terminal.buffer.active.type === 'normal') {
-      return this._getString(this._terminal.buffer.active, scrollback);
+    // Normal buffer
+    let content = this._serializeBuffer(this._terminal, this._terminal.buffer.normal, scrollback);
+
+    // Alternate buffer
+    if (this._terminal.buffer.active.type === 'alternate') {
+      const alternativeScreenContent = this._serializeBuffer(this._terminal, this._terminal.buffer.alternate, undefined);
+      content += `\u001b[?1049h\u001b[H${alternativeScreenContent}`;
     }
 
-    const normalScreenContent = this._getString(this._terminal.buffer.normal, scrollback);
-    // alt screen don't have scrollback
-    const alternativeScreenContent = this._getString(this._terminal.buffer.alternate, undefined);
+    // Modes
+    content += this._serializeModes(this._terminal);
 
-    return normalScreenContent
-      + '\u001b[?1049h\u001b[H'
-      + alternativeScreenContent;
+    return content;
   }
 
   public dispose(): void { }

addons/xterm-addon-serialize/test/SerializeAddon.api.ts

@@ -4,7 +4,7 @@
  */
 
 import { assert } from 'chai';
-import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { openTerminal, writeSync, launchBrowser } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
 
 const APP = 'http://127.0.0.1:3001/test';
@@ -30,12 +30,15 @@ const testNormalScreenEqual = async (page: any, str: string): Promise<void> => {
   assert.equal(JSON.stringify(originalBuffer), JSON.stringify(newBuffer));
 };
 
+async function testSerializeEquals(writeContent: string, expectedSerialized: string): Promise<void> {
+  await writeRawSync(page, writeContent);
+  const result = await page.evaluate(`serializeAddon.serialize();`) as string;
+  assert.strictEqual(result, expectedSerialized);
+}
+
 describe('SerializeAddon', () => {
   before(async function(): Promise<any> {
-    const browserType = getBrowserType();
-    browser = await browserType.launch({
-      headless: process.argv.includes('--headless')
-    });
+    browser = await launchBrowser();
     page = await (await browser.newContext()).newPage();
     await page.setViewportSize({ width, height });
     await page.goto(APP);
@@ -89,8 +92,6 @@ describe('SerializeAddon', () => {
   });
 
   it('empty content', async function(): Promise<any> {
-    const rows = 10;
-    const cols = 10;
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), '');
   });
 
@@ -177,17 +178,17 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_P16_GREEN) + line,  // Workaround: If we clear all flags a the end, serialize will use \x1b[0m to clear instead of the sepcific disable sequence
-      mkSGR(INVERSE) + line,
-      mkSGR(BOLD) + line,
-      mkSGR(UNDERLINED) + line,
-      mkSGR(BLINK) + line,
-      mkSGR(INVISIBLE) + line,
-      mkSGR(NO_INVERSE) + line,
-      mkSGR(NO_BOLD) + line,
-      mkSGR(NO_UNDERLINED) + line,
-      mkSGR(NO_BLINK) + line,
-      mkSGR(NO_INVISIBLE) + line
+      sgr(FG_P16_GREEN) + line,  // Workaround: If we clear all flags a the end, serialize will use \x1b[0m to clear instead of the sepcific disable sequence
+      sgr(INVERSE) + line,
+      sgr(BOLD) + line,
+      sgr(UNDERLINED) + line,
+      sgr(BLINK) + line,
+      sgr(INVISIBLE) + line,
+      sgr(NO_INVERSE) + line,
+      sgr(NO_BOLD) + line,
+      sgr(NO_UNDERLINED) + line,
+      sgr(NO_BLINK) + line,
+      sgr(NO_INVISIBLE) + line
     ];
     const rows = lines.length;
     await writeSync(page, lines.join('\\r\\n'));
@@ -209,16 +210,16 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_P16_RED) + line,     // fg Red,
-      mkSGR(UNDERLINED) + line,     // fg Red, Underlined
-      mkSGR(FG_P16_GREEN) + line,   // fg Green, Underlined
-      mkSGR(INVERSE) + line,        // fg Green, Underlined, Inverse
-      mkSGR(NO_INVERSE) + line,     // fg Green, Underlined
-      mkSGR(INVERSE) + line,        // fg Green, Underlined, Inverse
-      mkSGR(BG_P16_YELLOW) + line,  // fg Green, bg Yellow, Underlined, Inverse
-      mkSGR(FG_RESET) + line,       // bg Yellow, Underlined, Inverse
-      mkSGR(BG_RESET) + line,       // Underlined, Inverse
-      mkSGR(NORMAL) + line          // Back to normal
+      sgr(FG_P16_RED) + line,     // fg Red,
+      sgr(UNDERLINED) + line,     // fg Red, Underlined
+      sgr(FG_P16_GREEN) + line,   // fg Green, Underlined
+      sgr(INVERSE) + line,        // fg Green, Underlined, Inverse
+      sgr(NO_INVERSE) + line,     // fg Green, Underlined
+      sgr(INVERSE) + line,        // fg Green, Underlined, Inverse
+      sgr(BG_P16_YELLOW) + line,  // fg Green, bg Yellow, Underlined, Inverse
+      sgr(FG_RESET) + line,       // bg Yellow, Underlined, Inverse
+      sgr(BG_RESET) + line,       // Underlined, Inverse
+      sgr(NORMAL) + line          // Back to normal
     ];
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
@@ -228,19 +229,19 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_P16_RED) + line,                   // fg Red
-      mkSGR(FG_P16_GREEN, BG_P16_YELLOW) + line,  // fg Green, bg Yellow
-      mkSGR(UNDERLINED, ITALIC) + line,           // fg Green, bg Yellow, Underlined, Italic
-      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green, bg Yellow
-      mkSGR(FG_RESET, ITALIC) + line,             // bg Yellow, Italic
-      mkSGR(BG_RESET) + line,                     // Italic
-      mkSGR(NORMAL) + line,                       // Back to normal
-      mkSGR(FG_P16_RED) + line,                   // fg Red
-      mkSGR(FG_P16_GREEN, BG_P16_YELLOW) + line,  // fg Green, bg Yellow
-      mkSGR(UNDERLINED, ITALIC) + line,           // fg Green, bg Yellow, Underlined, Italic
-      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green, bg Yellow
-      mkSGR(FG_RESET, ITALIC) + line,             // bg Yellow, Italic
-      mkSGR(BG_RESET) + line                      // Italic
+      sgr(FG_P16_RED) + line,                   // fg Red
+      sgr(FG_P16_GREEN, BG_P16_YELLOW) + line,  // fg Green, bg Yellow
+      sgr(UNDERLINED, ITALIC) + line,           // fg Green, bg Yellow, Underlined, Italic
+      sgr(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green, bg Yellow
+      sgr(FG_RESET, ITALIC) + line,             // bg Yellow, Italic
+      sgr(BG_RESET) + line,                     // Italic
+      sgr(NORMAL) + line,                       // Back to normal
+      sgr(FG_P16_RED) + line,                   // fg Red
+      sgr(FG_P16_GREEN, BG_P16_YELLOW) + line,  // fg Green, bg Yellow
+      sgr(UNDERLINED, ITALIC) + line,           // fg Green, bg Yellow, Underlined, Italic
+      sgr(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green, bg Yellow
+      sgr(FG_RESET, ITALIC) + line,             // bg Yellow, Italic
+      sgr(BG_RESET) + line                      // Italic
     ];
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
@@ -250,16 +251,16 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_P256_RED) + line,    // fg Red 256,
-      mkSGR(UNDERLINED) + line,     // fg Red 256, Underlined
-      mkSGR(FG_P256_GREEN) + line,  // fg Green 256, Underlined
-      mkSGR(INVERSE) + line,        // fg Green 256, Underlined, Inverse
-      mkSGR(NO_INVERSE) + line,     // fg Green 256, Underlined
-      mkSGR(INVERSE) + line,        // fg Green 256, Underlined, Inverse
-      mkSGR(BG_P256_YELLOW) + line, // fg Green 256, bg Yellow 256, Underlined, Inverse
-      mkSGR(FG_RESET) + line,       // bg Yellow 256, Underlined, Inverse
-      mkSGR(BG_RESET) + line,       // Underlined, Inverse
-      mkSGR(NORMAL) + line          // Back to normal
+      sgr(FG_P256_RED) + line,    // fg Red 256,
+      sgr(UNDERLINED) + line,     // fg Red 256, Underlined
+      sgr(FG_P256_GREEN) + line,  // fg Green 256, Underlined
+      sgr(INVERSE) + line,        // fg Green 256, Underlined, Inverse
+      sgr(NO_INVERSE) + line,     // fg Green 256, Underlined
+      sgr(INVERSE) + line,        // fg Green 256, Underlined, Inverse
+      sgr(BG_P256_YELLOW) + line, // fg Green 256, bg Yellow 256, Underlined, Inverse
+      sgr(FG_RESET) + line,       // bg Yellow 256, Underlined, Inverse
+      sgr(BG_RESET) + line,       // Underlined, Inverse
+      sgr(NORMAL) + line          // Back to normal
     ];
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
@@ -269,19 +270,19 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_P256_RED) + line,                    // fg Red 256
-      mkSGR(FG_P256_GREEN, BG_P256_YELLOW) + line,  // fg Green 256, bg Yellow 256
-      mkSGR(UNDERLINED, ITALIC) + line,             // fg Green 256, bg Yellow 256, Underlined, Italic
-      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,       // fg Green 256, bg Yellow 256
-      mkSGR(FG_RESET, ITALIC) + line,               // bg Yellow 256, Italic
-      mkSGR(BG_RESET) + line,                       // Italic
-      mkSGR(NORMAL) + line,                         // Back to normal
-      mkSGR(FG_P256_RED) + line,                    // fg Red 256
-      mkSGR(FG_P256_GREEN, BG_P256_YELLOW) + line,  // fg Green 256, bg Yellow 256
-      mkSGR(UNDERLINED, ITALIC) + line,             // fg Green 256, bg Yellow 256, Underlined, Italic
-      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,       // fg Green 256, bg Yellow 256
-      mkSGR(FG_RESET, ITALIC) + line,               // bg Yellow 256, Italic
-      mkSGR(BG_RESET) + line                        // Italic
+      sgr(FG_P256_RED) + line,                    // fg Red 256
+      sgr(FG_P256_GREEN, BG_P256_YELLOW) + line,  // fg Green 256, bg Yellow 256
+      sgr(UNDERLINED, ITALIC) + line,             // fg Green 256, bg Yellow 256, Underlined, Italic
+      sgr(NO_UNDERLINED, NO_ITALIC) + line,       // fg Green 256, bg Yellow 256
+      sgr(FG_RESET, ITALIC) + line,               // bg Yellow 256, Italic
+      sgr(BG_RESET) + line,                       // Italic
+      sgr(NORMAL) + line,                         // Back to normal
+      sgr(FG_P256_RED) + line,                    // fg Red 256
+      sgr(FG_P256_GREEN, BG_P256_YELLOW) + line,  // fg Green 256, bg Yellow 256
+      sgr(UNDERLINED, ITALIC) + line,             // fg Green 256, bg Yellow 256, Underlined, Italic
+      sgr(NO_UNDERLINED, NO_ITALIC) + line,       // fg Green 256, bg Yellow 256
+      sgr(FG_RESET, ITALIC) + line,               // bg Yellow 256, Italic
+      sgr(BG_RESET) + line                        // Italic
     ];
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
@@ -291,16 +292,16 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_RGB_RED) + line,     // fg Red RGB,
-      mkSGR(UNDERLINED) + line,     // fg Red RGB, Underlined
-      mkSGR(FG_RGB_GREEN) + line,   // fg Green RGB, Underlined
-      mkSGR(INVERSE) + line,        // fg Green RGB, Underlined, Inverse
-      mkSGR(NO_INVERSE) + line,     // fg Green RGB, Underlined
-      mkSGR(INVERSE) + line,        // fg Green RGB, Underlined, Inverse
-      mkSGR(BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB, Underlined, Inverse
-      mkSGR(FG_RESET) + line,       // bg Yellow RGB, Underlined, Inverse
-      mkSGR(BG_RESET) + line,       // Underlined, Inverse
-      mkSGR(NORMAL) + line          // Back to normal
+      sgr(FG_RGB_RED) + line,     // fg Red RGB,
+      sgr(UNDERLINED) + line,     // fg Red RGB, Underlined
+      sgr(FG_RGB_GREEN) + line,   // fg Green RGB, Underlined
+      sgr(INVERSE) + line,        // fg Green RGB, Underlined, Inverse
+      sgr(NO_INVERSE) + line,     // fg Green RGB, Underlined
+      sgr(INVERSE) + line,        // fg Green RGB, Underlined, Inverse
+      sgr(BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB, Underlined, Inverse
+      sgr(FG_RESET) + line,       // bg Yellow RGB, Underlined, Inverse
+      sgr(BG_RESET) + line,       // Underlined, Inverse
+      sgr(NORMAL) + line          // Back to normal
     ];
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
@@ -310,19 +311,19 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_RGB_RED) + line,                   // fg Red RGB
-      mkSGR(FG_RGB_GREEN, BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB
-      mkSGR(UNDERLINED, ITALIC) + line,           // fg Green RGB, bg Yellow RGB, Underlined, Italic
-      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green RGB, bg Yellow RGB
-      mkSGR(FG_RESET, ITALIC) + line,             // bg Yellow RGB, Italic
-      mkSGR(BG_RESET) + line,                     // Italic
-      mkSGR(NORMAL) + line,                       // Back to normal
-      mkSGR(FG_RGB_RED) + line,                   // fg Red RGB
-      mkSGR(FG_RGB_GREEN, BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB
-      mkSGR(UNDERLINED, ITALIC) + line,           // fg Green RGB, bg Yellow RGB, Underlined, Italic
-      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green RGB, bg Yellow RGB
-      mkSGR(FG_RESET, ITALIC) + line,             // bg Yellow RGB, Italic
-      mkSGR(BG_RESET) + line                      // Italic
+      sgr(FG_RGB_RED) + line,                   // fg Red RGB
+      sgr(FG_RGB_GREEN, BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB
+      sgr(UNDERLINED, ITALIC) + line,           // fg Green RGB, bg Yellow RGB, Underlined, Italic
+      sgr(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green RGB, bg Yellow RGB
+      sgr(FG_RESET, ITALIC) + line,             // bg Yellow RGB, Italic
+      sgr(BG_RESET) + line,                     // Italic
+      sgr(NORMAL) + line,                       // Back to normal
+      sgr(FG_RGB_RED) + line,                   // fg Red RGB
+      sgr(FG_RGB_GREEN, BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB
+      sgr(UNDERLINED, ITALIC) + line,           // fg Green RGB, bg Yellow RGB, Underlined, Italic
+      sgr(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green RGB, bg Yellow RGB
+      sgr(FG_RESET, ITALIC) + line,             // bg Yellow RGB, Italic
+      sgr(BG_RESET) + line                      // Italic
     ];
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
@@ -481,15 +482,61 @@ describe('SerializeAddon', () => {
 
     await testNormalScreenEqual(page, lines.join(''));
   });
+
+  describe('handle modes', () => {
+    it('applicationCursorKeysMode', async () => {
+      await testSerializeEquals('test\u001b[?1h', 'test\u001b[?1h');
+      await testSerializeEquals('\u001b[?1l', 'test');
+    });
+    it('applicationKeypadMode', async () => {
+      await testSerializeEquals('test\u001b[?66h', 'test\u001b[?66h');
+      await testSerializeEquals('\u001b[?66l', 'test');
+    });
+    it('bracketedPasteMode', async () => {
+      await testSerializeEquals('test\u001b[?2004h', 'test\u001b[?2004h');
+      await testSerializeEquals('\u001b[?2004l', 'test');
+    });
+    it('insertMode', async () => {
+      await testSerializeEquals('test\u001b[4h', 'test\u001b[4h');
+      await testSerializeEquals('\u001b[4l', 'test');
+    });
+    it('mouseTrackingMode', async () => {
+      await testSerializeEquals('test\u001b[?9h', 'test\u001b[?9h');
+      await testSerializeEquals('\u001b[?9l', 'test');
+      await testSerializeEquals('\u001b[?1000h', 'test\u001b[?1000h');
+      await testSerializeEquals('\u001b[?1000l', 'test');
+      await testSerializeEquals('\u001b[?1002h', 'test\u001b[?1002h');
+      await testSerializeEquals('\u001b[?1002l', 'test');
+      await testSerializeEquals('\u001b[?1003h', 'test\u001b[?1003h');
+      await testSerializeEquals('\u001b[?1003l', 'test');
+    });
+    it('originMode', async () => {
+      // origin mode moves cursor to (0,0)
+      await testSerializeEquals('test\u001b[?6h', 'test\u001b[4D\u001b[?6h');
+      await testSerializeEquals('\u001b[?6l', 'test\u001b[4D');
+    });
+    it('reverseWraparoundMode', async () => {
+      await testSerializeEquals('test\u001b[?45h', 'test\u001b[?45h');
+      await testSerializeEquals('\u001b[?45l', 'test');
+    });
+    it('sendFocusMode', async () => {
+      await testSerializeEquals('test\u001b[?1004h', 'test\u001b[?1004h');
+      await testSerializeEquals('\u001b[?1004l', 'test');
+    });
+    it('wraparoundMode', async () => {
+      await testSerializeEquals('test\u001b[?7l', 'test\u001b[?7l');
+      await testSerializeEquals('\u001b[?7h', 'test');
+    });
+  });
 });
 
 function newArray<T>(initial: T | ((index: number) => T), count: number): T[] {
   const array: T[] = new Array<T>(count);
   for (let i = 0; i < array.length; i++) {
     if (typeof initial === 'function') {
-      array[i] = (<(index: number) => T>initial)(i);
+      array[i] = (initial as (index: number) => T)(i);
     } else {
-      array[i] = <T>initial;
+      array[i] = initial as T;
     }
   }
   return array;
@@ -503,7 +550,7 @@ function digitsString(length: number, from: number = 0, sgr: string = ''): strin
   return s;
 }
 
-function mkSGR(...seq: string[]): string {
+function sgr(...seq: string[]): string {
   return `\x1b[${seq.join(';')}m`;
 }
 

addons/xterm-addon-serialize/typings/xterm-addon-serialize.d.ts

@@ -3,7 +3,6 @@
  * @license MIT
  */
 
-
 import { Terminal, ITerminalAddon } from 'xterm';
 
 declare module 'xterm-addon-serialize' {
@@ -21,12 +20,13 @@ declare module 'xterm-addon-serialize' {
     public activate(terminal: Terminal): void;
 
     /**
-     * Serializes terminal rows into a string that can be written back to the terminal
-     * to restore the state. The cursor will also be positioned to the correct cell.
-     * When restoring a terminal it is best to do before `Terminal.open` is called
-     * to avoid wasting CPU cycles rendering incomplete frames.
-     * @param scrollback The number of rows in scrollback buffer to serialize, starting from the bottom of the
-     * scrollback buffer. This defaults to the all available rows in the scrollback buffer.
+     * Serializes terminal rows into a string that can be written back to the terminal to restore
+     * the state. The cursor will also be positioned to the correct cell. When restoring a terminal
+     * it is best to do before `Terminal.open` is called to avoid wasting CPU cycles rendering
+     * incomplete frames.
+     * @param scrollback The number of rows in scrollback buffer to serialize, starting from the
+     * bottom of the scrollback buffer. This defaults to the all available rows in the scrollback
+     * buffer.
      */
     public serialize(scrollback?: number): string;
 

addons/xterm-addon-serialize/webpack.config.js

@@ -25,7 +25,8 @@ module.exports = {
     filename: mainFile,
     path: path.resolve('./lib'),
     library: addonName,
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    globalObject: 'this'
   },
   mode: 'production'
 };

addons/xterm-addon-unicode11/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-unicode11",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"

addons/xterm-addon-unicode11/src/Unicode11Addon.ts

@@ -8,6 +8,7 @@
 import { Terminal, ITerminalAddon } from 'xterm';
 import { UnicodeV11 } from './UnicodeV11';
 
+
 export class Unicode11Addon implements ITerminalAddon {
   public activate(terminal: Terminal): void {
     terminal.unicode.register(new UnicodeV11());

addons/xterm-addon-unicode11/test/Unicode11Addon.api.ts

@@ -4,7 +4,7 @@
  */
 
 import { assert } from 'chai';
-import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils';
+import { openTerminal, launchBrowser } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
 
 const APP = 'http://127.0.0.1:3001/test';
@@ -16,10 +16,7 @@ const height = 600;
 
 describe('Unicode11Addon', () => {
   before(async function(): Promise<any> {
-    const browserType = getBrowserType();
-    browser = await browserType.launch({
-      headless: process.argv.includes('--headless')
-    });
+    browser = await launchBrowser();
     page = await (await browser.newContext()).newPage();
     await page.setViewportSize({ width, height });
   });

addons/xterm-addon-unicode11/webpack.config.js

@@ -32,7 +32,8 @@ module.exports = {
     filename: mainFile,
     path: path.resolve('./lib'),
     library: addonName,
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    globalObject: 'this'
   },
   mode: 'production'
 };

addons/xterm-addon-web-links/test/WebLinksAddon.api.ts

@@ -4,7 +4,7 @@
  */
 
 import { assert } from 'chai';
-import { openTerminal, pollFor, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { openTerminal, pollFor, writeSync, launchBrowser } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
 
 const APP = 'http://127.0.0.1:3001/test';
@@ -16,10 +16,7 @@ const height = 600;
 
 describe('WebLinksAddon', () => {
   before(async function(): Promise<any> {
-    const browserType = getBrowserType();
-    browser = await browserType.launch({
-      headless: process.argv.includes('--headless')
-    });
+    browser = await launchBrowser();
     page = await (await browser.newContext()).newPage();
     await page.setViewportSize({ width, height });
   });

addons/xterm-addon-webgl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-webgl",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"

addons/xterm-addon-webgl/src/GlyphRenderer.ts

@@ -176,8 +176,9 @@ export class GlyphRenderer {
 
     const i = (y * terminal.cols + x) * INDICES_PER_CELL;
 
-    // Exit early if this is a null/space character
-    if (code === NULL_CELL_CODE || code === WHITESPACE_CELL_CODE || code === undefined/* This is used for the right side of wide chars */) {
+    // Exit early if this is a null character, allow space character to continue as it may have
+    // underline/strikethrough styles
+    if (code === NULL_CELL_CODE || code === undefined/* This is used for the right side of wide chars */) {
       fill(array, 0, i, i + INDICES_PER_CELL - 1 - CELL_POSITION_INDICES);
       return;
     }
@@ -263,7 +264,7 @@ export class GlyphRenderer {
         // Get attributes from fg (excluding inverse) and resolve inverse by pullibng rgb colors
         // from bg. This is needed since the inverse fg color should be based on the original bg
         // color, not on the selection color
-        fg = (fg & ~(Attributes.CM_MASK | Attributes.RGB_MASK | FgFlags.INVERSE));
+        fg &= ~(Attributes.CM_MASK | Attributes.RGB_MASK | FgFlags.INVERSE);
         switch (workCell.getBgColorMode()) {
           case Attributes.CM_P16:
           case Attributes.CM_P256:

addons/xterm-addon-webgl/src/WebglAddon.ts

@@ -24,9 +24,9 @@ export class WebglAddon implements ITerminalAddon {
       throw new Error('Cannot activate WebglAddon before Terminal.open');
     }
     this._terminal = terminal;
-    const renderService: IRenderService = (<any>terminal)._core._renderService;
-    const characterJoinerService: ICharacterJoinerService = (<any>terminal)._core._characterJoinerService;
-    const colors: IColorSet = (<any>terminal)._core._colorManager.colors;
+    const renderService: IRenderService = (terminal as any)._core._renderService;
+    const characterJoinerService: ICharacterJoinerService = (terminal as any)._core._characterJoinerService;
+    const colors: IColorSet = (terminal as any)._core._colorManager.colors;
     this._renderer = new WebglRenderer(terminal, colors, characterJoinerService, this._preserveDrawingBuffer);
     this._renderer.onContextLoss(() => this._onContextLoss.fire());
     renderService.setRenderer(this._renderer);

addons/xterm-addon-webgl/src/WebglRenderer.ts

@@ -60,7 +60,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     this._renderLayers = [
       new LinkRenderLayer(this._core.screenElement!, 2, this._colors, this._core),
-      new CursorRenderLayer(this._core.screenElement!, 3, this._colors, this._onRequestRedraw)
+      new CursorRenderLayer(this._core.screenElement!, 3, this._colors, this._core, this._onRequestRedraw)
     ];
     this.dimensions = {
       scaledCharWidth: 0,
@@ -108,7 +108,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     for (const l of this._renderLayers) {
       l.dispose();
     }
-    this._core.screenElement!.removeChild(this._canvas);
+    this._canvas.parentElement?.removeChild(this._canvas);
     super.dispose();
   }
 
@@ -230,7 +230,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
       return;
     }
 
-    const atlas = acquireCharAtlas(this._terminal, this._colors, this.dimensions.scaledCharWidth, this.dimensions.scaledCharHeight);
+    const atlas = acquireCharAtlas(this._terminal, this._colors, this.dimensions.scaledCellWidth, this.dimensions.scaledCellHeight, this.dimensions.scaledCharWidth, this.dimensions.scaledCharHeight);
     if (!('getRasterizedGlyph' in atlas)) {
       throw new Error('The webgl renderer only works with the webgl char atlas');
     }
@@ -342,7 +342,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         // Flag combined chars with a bit mask so they're easily identifiable
         if (chars.length > 1) {
-          code = code | COMBINED_CHAR_BIT_MASK;
+          code |= COMBINED_CHAR_BIT_MASK;
         }
 
         // Cache the results in the model

addons/xterm-addon-webgl/src/atlas/CharAtlasCache.ts

@@ -28,10 +28,12 @@ const charAtlasCache: ICharAtlasCacheEntry[] = [];
 export function acquireCharAtlas(
   terminal: Terminal,
   colors: IColorSet,
+  scaledCellWidth: number,
+  scaledCellHeight: number,
   scaledCharWidth: number,
   scaledCharHeight: number
 ): WebglCharAtlas {
-  const newConfig = generateConfig(scaledCharWidth, scaledCharHeight, terminal, colors);
+  const newConfig = generateConfig(scaledCellWidth, scaledCellHeight, scaledCharWidth, scaledCharHeight, terminal, colors);
 
   // Check to see if the terminal already owns this config
   for (let i = 0; i < charAtlasCache.length; i++) {

addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts

@@ -13,7 +13,7 @@ const NULL_COLOR: IColor = {
   rgba: 0
 };
 
-export function generateConfig(scaledCharWidth: number, scaledCharHeight: number, terminal: Terminal, colors: IColorSet): ICharAtlasConfig {
+export function generateConfig(scaledCellWidth: number, scaledCellHeight: number, scaledCharWidth: number, scaledCharHeight: number, terminal: Terminal, colors: IColorSet): ICharAtlasConfig {
   // null out some fields that don't matter
   const clonedColors: IColorSet = {
     foreground: colors.foreground,
@@ -28,7 +28,12 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number
     contrastCache: colors.contrastCache
   };
   return {
+    customGlyphs: terminal.getOption('customGlyphs'),
     devicePixelRatio: window.devicePixelRatio,
+    letterSpacing: terminal.getOption('letterSpacing'),
+    lineHeight: terminal.getOption('lineHeight'),
+    scaledCellWidth,
+    scaledCellHeight,
     scaledCharWidth,
     scaledCharHeight,
     fontFamily: terminal.getOption('fontFamily'),
@@ -49,6 +54,9 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
     }
   }
   return a.devicePixelRatio === b.devicePixelRatio &&
+      a.customGlyphs === b.customGlyphs &&
+      a.lineHeight === b.lineHeight &&
+      a.letterSpacing === b.letterSpacing &&
       a.fontFamily === b.fontFamily &&
       a.fontSize === b.fontSize &&
       a.fontWeight === b.fontWeight &&

addons/xterm-addon-webgl/src/atlas/Types.d.ts

@@ -17,11 +17,16 @@ export interface IGlyphIdentifier {
 }
 
 export interface ICharAtlasConfig {
+  customGlyphs: boolean;
   devicePixelRatio: number;
+  letterSpacing: number;
+  lineHeight: number;
   fontSize: number;
   fontFamily: string;
   fontWeight: FontWeight;
   fontWeightBold: FontWeight;
+  scaledCellWidth: number;
+  scaledCellHeight: number;
   scaledCharWidth: number;
   scaledCharHeight: number;
   allowTransparency: boolean;

addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts

@@ -12,6 +12,7 @@ import { IColor } from 'browser/Types';
 import { IDisposable } from 'xterm';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { channels, rgba } from 'browser/Color';
+import { tryDrawCustomChar } from 'browser/renderer/CustomGlyphs';
 
 // In practice we're probably never going to exhaust a texture this large. For debugging purposes,
 // however, it can be useful to set this to a really tiny value, to verify that LRU eviction works.
@@ -83,8 +84,8 @@ export class WebglCharAtlas implements IDisposable {
     this._cacheCtx = throwIfFalsy(this.cacheCanvas.getContext('2d', { alpha: true }));
 
     this._tmpCanvas = document.createElement('canvas');
-    this._tmpCanvas.width = this._config.scaledCharWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2;
-    this._tmpCanvas.height = this._config.scaledCharHeight + TMP_CANVAS_GLYPH_PADDING * 2;
+    this._tmpCanvas.width = this._config.scaledCellWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2;
+    this._tmpCanvas.height = this._config.scaledCellHeight + TMP_CANVAS_GLYPH_PADDING * 2;
     this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency }));
   }
 
@@ -338,6 +339,8 @@ export class WebglCharAtlas implements IDisposable {
     const inverse = !!this._workAttributeData.isInverse();
     const dim = !!this._workAttributeData.isDim();
     const italic = !!this._workAttributeData.isItalic();
+    const underline = !!this._workAttributeData.isUnderline();
+    const strikethrough = !!this._workAttributeData.isStrikethrough();
     let fgColor = this._workAttributeData.getFgColor();
     let fgColorMode = this._workAttributeData.getFgColorMode();
     let bgColor = this._workAttributeData.getBgColor();
@@ -388,8 +391,52 @@ export class WebglCharAtlas implements IDisposable {
     // For powerline glyphs left/top padding is excluded (https://github.com/microsoft/vscode/issues/120129)
     const padding = isPowerlineGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING;
 
+    // Draw custom characters if applicable
+    let drawSuccess = false;
+    if (this._config.customGlyphs !== false) {
+      drawSuccess = tryDrawCustomChar(this._tmpCtx, chars, padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight);
+    }
+
     // Draw the character
-    this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight);
+    if (!drawSuccess) {
+      this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight);
+    }
+
+    // If this charcater is underscore and beyond the cell bounds, shift it up until it is visible,
+    // try for a maximum of 5 pixels.
+    if (chars === '_' && !this._config.allowTransparency) {
+      let isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor);
+      if (isBeyondCellBounds) {
+        for (let offset = 1; offset <= 5; offset++) {
+          this._tmpCtx.clearRect(0, 0, this._tmpCanvas.width, this._tmpCanvas.height);
+          this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight - offset);
+          isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor);
+          if (!isBeyondCellBounds) {
+            break;
+          }
+        }
+      }
+    }
+
+    // Draw underline and strikethrough
+    if (underline || strikethrough) {
+      const lineWidth = Math.max(1, Math.floor(this._config.fontSize / 10));
+      const yOffset = this._tmpCtx.lineWidth % 2 === 1 ? 0.5 : 0; // When the width is odd, draw at 0.5 position
+      this._tmpCtx.lineWidth = lineWidth;
+      this._tmpCtx.strokeStyle = this._tmpCtx.fillStyle;
+      this._tmpCtx.beginPath();
+      if (underline) {
+        this._tmpCtx.moveTo(padding, padding + this._config.scaledCharHeight - yOffset);
+        this._tmpCtx.lineTo(padding + this._config.scaledCharWidth, padding + this._config.scaledCharHeight - yOffset);
+      }
+      if (strikethrough) {
+        this._tmpCtx.moveTo(padding, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset);
+        this._tmpCtx.lineTo(padding + this._config.scaledCharWidth, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset);
+      }
+      this._tmpCtx.stroke();
+      this._tmpCtx.closePath();
+    }
+
     this._tmpCtx.restore();
 
     // clear the background from the character to avoid issues with drawing over the previous
@@ -412,7 +459,7 @@ export class WebglCharAtlas implements IDisposable {
       return NULL_RASTERIZED_GLYPH;
     }
 
-    const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox, allowedWidth, isPowerlineGlyph);
+    const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox, allowedWidth, isPowerlineGlyph, drawSuccess);
     const clippedImageData = this._clipImageData(imageData, this._workBoundingBox);
 
     // Check if there is enough room in the current row and go to next if needed
@@ -445,7 +492,7 @@ export class WebglCharAtlas implements IDisposable {
    * @param imageData The image data to read.
    * @param boundingBox An IBoundingBox to put the clipped bounding box values.
    */
-  private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox, allowedWidth: number, restrictedGlyph: boolean): IRasterizedGlyph {
+  private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox, allowedWidth: number, restrictedGlyph: boolean, customGlyph: boolean): IRasterizedGlyph {
     boundingBox.top = 0;
     const height = restrictedGlyph ? this._config.scaledCharHeight : this._tmpCanvas.height;
     const width = restrictedGlyph ? this._config.scaledCharWidth : allowedWidth;
@@ -520,8 +567,8 @@ export class WebglCharAtlas implements IDisposable {
         y: (boundingBox.bottom - boundingBox.top + 1) / TEXTURE_HEIGHT
       },
       offset: {
-        x: -boundingBox.left + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING),
-        y: -boundingBox.top + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING)
+        x: -boundingBox.left + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING) + (customGlyph ? Math.floor(this._config.letterSpacing / 2) : 0),
+        y: -boundingBox.top + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING) + (customGlyph ? this._config.lineHeight === 1 ? 0 : Math.round((this._config.scaledCellHeight - this._config.scaledCharHeight) / 2) : 0)
       }
     };
   }

addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts

@@ -92,7 +92,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     if (this._scaledCharWidth <= 0 && this._scaledCharHeight <= 0) {
       return;
     }
-    this._charAtlas = acquireCharAtlas(terminal, colorSet, this._scaledCharWidth, this._scaledCharHeight);
+    this._charAtlas = acquireCharAtlas(terminal, colorSet, this._scaledCellWidth, this._scaledCellHeight, this._scaledCharWidth, this._scaledCharHeight);
     this._charAtlas.warmUp();
   }
 

addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts

@@ -7,7 +7,7 @@ import { Terminal } from 'xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, ITerminal } from 'browser/Types';
 import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { IEventEmitter } from 'common/EventEmitter';
 
@@ -34,6 +34,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     container: HTMLElement,
     zIndex: number,
     colors: IColorSet,
+    private readonly _terminal: ITerminal,
     private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRedrawEvent>
   ) {
     super(container, 'cursor', zIndex, true, colors);
@@ -120,7 +121,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _render(terminal: Terminal, triggeredByAnimationFrame: boolean): void {
     // Don't draw the cursor if it's hidden
     // TODO: Need to expose API for this
-    if (!(terminal as any)._core._coreService.isCursorInitialized || (terminal as any)._core._coreService.isCursorHidden) {
+    if (!this._terminal.coreService.isCursorInitialized || this._terminal.coreService.isCursorHidden) {
       this._clearCursor();
       return;
     }
@@ -193,7 +194,12 @@ export class CursorRenderLayer extends BaseRenderLayer {
 
   private _clearCursor(): void {
     if (this._state) {
-      this._clearCells(this._state.x, this._state.y, this._state.width, 1);
+      // Avoid potential rounding errors when device pixel ratio is less than 1
+      if (window.devicePixelRatio < 1) {
+        this._clearAll();
+      } else {
+        this._clearCells(this._state.x, this._state.y, this._state.width, 1);
+      }
       this._state = {
         x: 0,
         y: 0,

addons/xterm-addon-webgl/test/WebglRenderer.api.ts

@@ -3,11 +3,11 @@
  * @license MIT
  */
 
-import { ITerminalOptions } from '../../../src/common/Types';
-import { ITheme } from 'xterm';
 import { assert } from 'chai';
-import { openTerminal, pollFor, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
+import { ITheme } from 'xterm';
+import { getBrowserType, launchBrowser, openTerminal, pollFor, writeSync } from '../../../out-test/api/TestUtils';
+import { ITerminalOptions } from '../../../src/common/Types';
 
 const APP = 'http://127.0.0.1:3001/test';
 
@@ -890,11 +890,22 @@ async function getCellColor(col: number, row: number): Promise<number[]> {
   return await page.evaluate(`Array.from(window.result)`);
 }
 
+async function getCellPixels(col: number, row: number): Promise<number[]> {
+  await page.evaluate(`
+    window.gl = window.term._core._renderService._renderer._gl;
+    window.result = new Uint8Array(window.d.scaledCellWidth * window.d.scaledCellHeight * 4);
+    window.d = window.term._core._renderService.dimensions;
+    window.gl.readPixels(
+      Math.floor(${col - 1} * window.d.scaledCellWidth),
+      Math.floor(window.gl.drawingBufferHeight - ${row} * window.d.scaledCellHeight),
+      window.d.scaledCellWidth, window.d.scaledCellHeight, window.gl.RGBA, window.gl.UNSIGNED_BYTE, window.result
+    );
+  `);
+  return await page.evaluate(`Array.from(window.result)`);
+}
+
 async function setupBrowser(options: ITerminalOptions = { rendererType: 'dom' }): Promise<void> {
-  const browserType = getBrowserType();
-  browser = await browserType.launch({
-    headless: process.argv.includes('--headless')
-  });
+  browser = await launchBrowser();
   page = await (await browser.newContext()).newPage();
   await page.setViewportSize({ width, height });
   await page.goto(APP);

addons/xterm-addon-webgl/typings/xterm-addon-webgl.d.ts

@@ -3,8 +3,7 @@
  * @license MIT
  */
 
-import { IEvent } from 'node-pty';
-import { Terminal, ITerminalAddon } from 'xterm';
+import { Terminal, ITerminalAddon, IEvent } from 'xterm';
 
 declare module 'xterm-addon-webgl' {
   /**

azure-pipelines.yml

@@ -10,7 +10,7 @@ jobs:
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - task: YarnInstaller@3
     inputs:
@@ -43,7 +43,7 @@ jobs:
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - task: CacheBeta@1
     inputs:
@@ -63,7 +63,7 @@ jobs:
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - task: CacheBeta@1
     inputs:
@@ -92,7 +92,7 @@ jobs:
     displayName: Install required packages
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - task: YarnInstaller@3
     inputs:
@@ -111,7 +111,7 @@ jobs:
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - script: yarn --frozen-lockfile
     displayName: 'Install dependencies and build'
@@ -128,7 +128,7 @@ jobs:
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - script: yarn --frozen-lockfile
     displayName: 'Install dependencies and build'
@@ -151,7 +151,7 @@ jobs:
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - task: YarnInstaller@3
     inputs:
@@ -164,5 +164,9 @@ jobs:
     displayName: Cache node modules
   - script: yarn --frozen-lockfile
     displayName: 'Install dependencies and build'
+  - script: |
+      yarn package-headless
+      node ./bin/package_headless.js
+    displayName: 'Package xterm-headless'
   - script: NPM_AUTH_TOKEN="$(NPM_AUTH_TOKEN)" node ./bin/publish.js
     displayName: 'Package and publish to npm'

bin/package_headless.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2021 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+const { exec } = require('child_process');
+const fs = require('fs');
+const { join } = require('path');
+
+const repoRoot = join(__dirname, '..');
+const headlessRoot = join(repoRoot, 'headless');
+
+console.log('> headless/package.json');
+const xtermPackageJson = require('../package.json');
+const xtermHeadlessPackageJson = {
+  ...xtermPackageJson,
+  name: 'xterm-headless',
+  description: 'A headless terminal component that runs in Node.js',
+  main: 'lib-headless/xterm-headless.js',
+  types: 'typings/xterm-headless.d.ts',
+};
+delete xtermHeadlessPackageJson['scripts'];
+delete xtermHeadlessPackageJson['devDependencies'];
+delete xtermHeadlessPackageJson['style'];
+fs.writeFileSync(join(headlessRoot, 'package.json'), JSON.stringify(xtermHeadlessPackageJson, null, 1));
+console.log(fs.readFileSync(join(headlessRoot, 'package.json')).toString());
+
+console.log('> headless/typings/');
+mkdirF(join(headlessRoot, 'typings'));
+fs.copyFileSync(
+  join(repoRoot, 'typings/xterm-headless.d.ts'),
+  join(headlessRoot, 'typings/xterm-headless.d.ts')
+);
+
+console.log('> headless/logo-full.png');
+fs.copyFileSync(
+  join(repoRoot, 'logo-full.png'),
+  join(headlessRoot, 'logo-full.png')
+);
+
+function mkdirF(p) {
+  if (!fs.existsSync(p)) {
+    fs.mkdirSync(p);
+  }
+}
+
+console.log('> Publish dry run');
+exec('npm publish --dry-run', { cwd: headlessRoot }, (error, stdout, stderr) => {
+  if (error) {
+    console.log(`error: ${error.message}`);
+    return;
+  }
+  if (stderr) {
+      console.error(`stderr:\n${stderr}`);
+  }
+  console.log(`stdout:\n${stdout}`);
+});

bin/publish.js

@@ -22,6 +22,7 @@ const changedFiles = getChangedFilesInCommit('HEAD');
 let isStableRelease = false;
 if (changedFiles.some(e => e.search(/^addons\//) === -1)) {
   isStableRelease = checkAndPublishPackage(path.resolve(__dirname, '..'));
+  checkAndPublishPackage(path.resolve(__dirname, '../headless'));
 }
 
 // Publish addons if any files were changed inside of the addon

bin/test_api.js

@@ -59,6 +59,12 @@ server.stdout.on('data', (data) => {
         `${script}.cmd` : script));
     }
 
+    server.kill();
+
     process.exit(run.status);
   }
 });
+
+server.stderr.on('data', (data) => {
+  console.error(data.toString());
+});

css/xterm.css

@@ -168,3 +168,7 @@
 .xterm-underline {
     text-decoration: underline;
 }
+
+.xterm-strikethrough {
+    text-decoration: line-through;
+}

demo/client.ts

@@ -147,6 +147,8 @@ if (document.location.pathname === '/test') {
   createTerminal();
   document.getElementById('dispose').addEventListener('click', disposeRecreateButtonHandler);
   document.getElementById('serialize').addEventListener('click', serializeButtonHandler);
+  document.getElementById('custom-glyph').addEventListener('click', writeCustomGlyphHandler);
+  document.getElementById('load-test').addEventListener('click', loadTest);
 }
 
 function createTerminal(): void {
@@ -348,6 +350,9 @@ function initOptions(term: TerminalType): void {
       } else if (o === 'lineHeight' || o === 'scrollSensitivity') {
         term.setOption(o, parseFloat(input.value));
         updateTerminalSize();
+      } else if(o === 'scrollback') {
+        term.setOption(o, parseInt(input.value));
+        setTimeout(() => updateTerminalSize(), 5);
       } else {
         term.setOption(o, parseInt(input.value));
       }
@@ -372,6 +377,9 @@ function initAddons(term: TerminalType): void {
     if (!addon.canChange) {
       checkbox.disabled = true;
     }
+    if(name === 'unicode11' && checkbox.checked) {
+      term.unicode.activeVersion = '11';
+    }
     addDomListener(checkbox, 'change', () => {
       if (checkbox.checked) {
         addon.instance = new addon.ctor();
@@ -380,10 +388,14 @@ function initAddons(term: TerminalType): void {
           setTimeout(() => {
             document.body.appendChild((addon.instance as WebglAddon).textureAtlas);
           }, 0);
+        } else if (name === 'unicode11') {
+          term.unicode.activeVersion = '11';
         }
       } else {
         if (name === 'webgl') {
           document.body.removeChild((addon.instance as WebglAddon).textureAtlas);
+        } else if (name === 'unicode11') {
+          term.unicode.activeVersion = '6';
         }
         addon.instance!.dispose();
         addon.instance = undefined;
@@ -431,3 +443,82 @@ function serializeButtonHandler(): void {
     term.write(output);
   }
 }
+
+
+function writeCustomGlyphHandler() {
+  term.write('\n\r');
+  term.write('\n\r');
+  term.write('Box styles:       ┎┰┒┍┯┑╓╥╖╒╤╕ ┏┳┓┌┲┓┌┬┐┏┱┐\n\r');
+  term.write('┌─┬─┐ ┏━┳━┓ ╔═╦═╗ ┠╂┨┝┿┥╟╫╢╞╪╡ ┡╇┩├╊┫┢╈┪┣╉┤\n\r');
+  term.write('│ │ │ ┃ ┃ ┃ ║ ║ ║ ┖┸┚┕┷┙╙╨╜╘╧╛ └┴┘└┺┛┗┻┛┗┹┘\n\r');
+  term.write('├─┼─┤ ┣━╋━┫ ╠═╬═╣ ┏┱┐┌┲┓┌┬┐┌┬┐ ┏┳┓┌┮┓┌┬┐┏┭┐\n\r');
+  term.write('│ │ │ ┃ ┃ ┃ ║ ║ ║ ┡╃┤├╄┩├╆┪┢╅┤ ┞╀┦├┾┫┟╁┧┣┽┤\n\r');
+  term.write('└─┴─┘ ┗━┻━┛ ╚═╩═╝ └┴┘└┴┘└┺┛┗┹┘ └┴┘└┶┛┗┻┛┗┵┘\n\r');
+  term.write('\n\r');
+  term.write('Other:\n\r');
+  term.write('╭─╮ ╲ ╱ ╷╻╎╏┆┇┊┋ ╺╾╴ ╌╌╌ ┄┄┄ ┈┈┈\n\r');
+  term.write('│ │  ╳  ╽╿╎╏┆┇┊┋ ╶╼╸ ╍╍╍ ┅┅┅ ┉┉┉\n\r');
+  term.write('╰─╯ ╱ ╲ ╹╵╎╏┆┇┊┋\n\r');
+  term.write('\n\r');
+  term.write('All box drawing characters:\n\r');
+  term.write('─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏\n\r');
+  term.write('┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟\n\r');
+  term.write('┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯\n\r');
+  term.write('┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿\n\r');
+  term.write('╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏\n\r');
+  term.write('═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟\n\r');
+  term.write('╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯\n\r');
+  term.write('╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿\n\r');
+  term.write('Box drawing alignment tests:\x1b[31m                                          █\n\r');
+  term.write('                                                                      ▉\n\r');
+  term.write('  ╔══╦══╗  ┌──┬──┐  ╭──┬──╮  ╭──┬──╮  ┏━━┳━━┓  ┎┒┏┑   ╷  ╻ ┏┯┓ ┌┰┐    ▊ ╱╲╱╲╳╳╳\n\r');
+  term.write('  ║┌─╨─┐║  │╔═╧═╗│  │╒═╪═╕│  │╓─╁─╖│  ┃┌─╂─┐┃  ┗╃╄┙  ╶┼╴╺╋╸┠┼┨ ┝╋┥    ▋ ╲╱╲╱╳╳╳\n\r');
+  term.write('  ║│╲ ╱│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╿ │┃  ┍╅╆┓   ╵  ╹ ┗┷┛ └┸┘    ▌ ╱╲╱╲╳╳╳\n\r');
+  term.write('  ╠╡ ╳ ╞╣  ├╢   ╟┤  ├┼─┼─┼┤  ├╫─╂─╫┤  ┣┿╾┼╼┿┫  ┕┛┖┚     ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳\n\r');
+  term.write('  ║│╱ ╲│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╽ │┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▎\n\r');
+  term.write('  ║└─╥─┘║  │╚═╤═╝│  │╘═╪═╛│  │╙─╀─╜│  ┃└─╂─┘┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▏\n\r');
+  term.write('  ╚══╩══╝  └──┴──┘  ╰──┴──╯  ╰──┴──╯  ┗━━┻━━┛           └╌╌┘ ╎ ┗╍╍┛ ┋  ▁▂▃▄▅▆▇█\n\r');
+  term.write('Box drawing alignment tests:\x1b[32m                                          █\n\r');
+  term.write('                                                                      ▉\n\r');
+  term.write('  ╔══╦══╗  ┌──┬──┐  ╭──┬──╮  ╭──┬──╮  ┏━━┳━━┓  ┎┒┏┑   ╷  ╻ ┏┯┓ ┌┰┐    ▊ ╱╲╱╲╳╳╳\n\r');
+  term.write('  ║┌─╨─┐║  │╔═╧═╗│  │╒═╪═╕│  │╓─╁─╖│  ┃┌─╂─┐┃  ┗╃╄┙  ╶┼╴╺╋╸┠┼┨ ┝╋┥    ▋ ╲╱╲╱╳╳╳\n\r');
+  term.write('  ║│╲ ╱│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╿ │┃  ┍╅╆┓   ╵  ╹ ┗┷┛ └┸┘    ▌ ╱╲╱╲╳╳╳\n\r');
+  term.write('  ╠╡ ╳ ╞╣  ├╢   ╟┤  ├┼─┼─┼┤  ├╫─╂─╫┤  ┣┿╾┼╼┿┫  ┕┛┖┚     ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳\n\r');
+  term.write('  ║│╱ ╲│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╽ │┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▎\n\r');
+  term.write('  ║└─╥─┘║  │╚═╤═╝│  │╘═╪═╛│  │╙─╀─╜│  ┃└─╂─┘┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▏\n\r');
+  term.write('  ╚══╩══╝  └──┴──┘  ╰──┴──╯  ╰──┴──╯  ┗━━┻━━┛           └╌╌┘ ╎ ┗╍╍┛ ┋  ▁▂▃▄▅▆▇█\n\r');
+  window.scrollTo(0, 0);
+}
+
+function loadTest() {
+  const isWebglEnabled = !!addons.webgl.instance;
+  const testData = [];
+  let byteCount = 0;
+  for (let i = 0; i < 50; i++) {
+    const count = 1 + Math.floor(Math.random() * 79);
+    byteCount += count + 2;
+    const data = new Uint8Array(count + 2);
+    data[0] = 0x0A; // \n
+    for (let i = 1; i < count + 1; i++) {
+      data[i] = 0x61 + Math.floor(Math.random() * (0x7A - 0x61));
+    }
+    // End each line with \r so the cursor remains constant, this is what ls/tree do and improves
+    // performance significantly due to the cursor DOM element not needing to change
+    data[data.length - 1] = 0x0D; // \r
+    testData.push(data);
+  }
+  const start = performance.now();
+  for (let i = 0; i < 1024; i++) {
+    for (const d of testData) {
+      term.write(d);
+    }
+  }
+  // Wait for all data to be parsed before evaluating time
+  term.write('', () => {
+    const time = Math.round(performance.now() - start);
+    const mbs = ((byteCount / 1024) * (1 / (time / 1000))).toFixed(2);
+    term.write(`\n\r\nWrote ${byteCount}kB in ${time}ms (${mbs}MB/s) using the (${isWebglEnabled ? 'webgl' : 'canvas'} renderer)`);
+    // Send ^C to get a new prompt
+    term._core._onData.fire('\x03');
+  });
+}

demo/index.html

@@ -15,41 +15,91 @@
   </head>
   <body>
     <h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
-    <div id="terminal-container"></div>
-    <div>
-      <h3>Options</h3>
-      <p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.setOption</code> function.</p>
-      <div id="options-container"></div>
-    </div>
-    <div>
-      <h3>Addons</h3>
-      <p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
-      <div id="addons-container"></div>
-      <h3>Addons Control</h3>
-      <h4>SearchAddon</h4>
-      <p>
-        <label>Find next <input id="find-next"/></label>
-        <label>Find previous <input id="find-previous"/></label>
-        <label>Use regex<input type="checkbox" id="regex"/></label>
-        <label>Case sensitive<input type="checkbox" id="case-sensitive"/></label>
-        <label>Whole word<input type="checkbox" id="whole-word"/></label>
-      </p>
-      <h4>SerializeAddon</h4>
-      <p>
-        <button id="serialize">Serialize the content of terminal</button>
-        <label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
-        <div><pre id="serialize-output"></pre></div>
-      </p>
-    </div>
-    <div>
-      <h3>Style</h3>
-      <div style="display: inline-block; margin-right: 16px;">
-        <label for="padding">Padding</label>
-        <input type="number" id="padding" />
+    <div id="container">
+      <div id="grid">
+        <div id="terminal-container"></div>
+      </div>
+      <div id="grid">
+        <div class="tab">
+          <button id= "optionsbutton" class="tabLinks" onclick="openSection(event, 'options')">Options</button>
+          <button id= "addonsbutton" class="tabLinks" onclick="openSection(event, 'addons')">Addons</button>
+          <button id= "stylebutton" class="tabLinks" onclick="openSection(event, 'style')">Style</button>
+          <button id= "testbutton" class="tabLinks" onclick="openSection(event, 'test')">Test</button>
+        </div>
+        <div id="options" class="tabContent">
+          <h3>Options</h3>
+          <p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.setOption</code> function.</p>
+          <div id="options-container"></div>
+        </div>
+        <div id="addons" class="tabContent">
+          <h3>Addons</h3>
+          <p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
+          <div id="addons-container"></div>
+          <h3>Addons Control</h3>
+          <h4>SearchAddon</h4>
+          <div style= "display:flex; flex-direction:column;">
+            <label>Find next <input id="find-next"/></label>
+            <label>Find previous <input id="find-previous"/></label>
+            <label><input type="checkbox" id="regex"/>Use regex</label>
+            <label><input type="checkbox" id="case-sensitive"/>Case sensitive</label>
+            <label><input type="checkbox" id="whole-word"/>Whole word</label>
+          </div>
+          <h4>SerializeAddon</h4>
+          <div>
+            <button id="serialize">Serialize the content of terminal</button>
+            <label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
+            <div><pre id="serialize-output"></pre></div>
+          </div>
+        </div>
+        <div id="style" class="tabContent">
+          <h3>Style</h3>
+          <div style="display: inline-block; margin-right: 16px;">
+            <label for="padding">Padding</label>
+            <input type="number" id="padding" />
+          </div>
+        </div>
+        <div id="test" class="tabContent">
+          <h3>Test</h3>
+          <div style="display: inline-block; margin-right: 16px;">
+            <button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
+            <button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button>
+            <button id="load-test" title="Write several MB of data to simulate a lot of data coming from the process">Load test</button>
+          </div>
+        </div>
       </div>
     </div>
-    <hr/>
-    <button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
-    <script src="dist/client-bundle.js" defer ></script>
-  </body>
+      <script src="dist/client-bundle.js" defer ></script>
+      <script>
+      var tab = localStorage.getItem("tab");
+
+        if(tab === null){
+            document.getElementById("options").style.display = "block";
+            document.getElementById("optionsbutton").classList.add("active");
+        }
+        else {
+          const tabContent = document.getElementsByClassName("tabContent");
+          let itr;
+          for (itr = 0; itr < tabContent.length; itr+=1) {
+            tabContent[itr].style.display = "none";
+          }
+          document.getElementById(""+tab+"").style.display = "block";
+          document.getElementById(""+tab+"button").classList.add("active");
+        }
+        function openSection(event, section) {
+          const tabContent = document.getElementsByClassName("tabContent");
+          let itr;
+          for (itr = 0; itr < tabContent.length; itr+=1) {
+            tabContent[itr].style.display = "none";
+          }
+          const tabLinks = document.getElementsByClassName("tabLinks");
+          for (itr = 0; itr < tabLinks.length; itr+=1) {
+            tabLinks[itr].className = tabLinks[itr].className.replace(" active", "");
+          }
+          document.getElementById(section).style.display = "block";
+          localStorage.setItem("tab", section);
+          event.currentTarget.className += " active";
+        }
+
+      </script>
+    </body>
 </html>

demo/style.css

@@ -41,3 +41,52 @@ pre {
     word-wrap: break-word;
     white-space: pre-wrap;
 }
+
+
+#container {
+    display: flex;
+    height: 75vh;
+}
+#grid {
+    flex: 1;
+    /* max-height: 80vh;
+    overflow-y: auto; */
+    width: 100%;
+}
+.tab {
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+}
+
+/* Style the buttons inside the tab */
+.tab button {
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    font-size: 17px;
+}
+
+/* Change background color of buttons on hover */
+.tab button:hover {
+    background-color: #ddd;
+}
+
+/* Create an active/current tablink class */
+.tab button.active {
+    background-color: #ccc;
+  }
+
+/* Style the tab content */
+.tabContent {
+    display: none;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-top: none;
+    max-height: 100vh;
+    overflow-y: auto;
+}

headless/.gitignore

@@ -0,0 +1,4 @@
+lib-headless/
+typings/
+logo-full.png
+./package.json

headless/.npmignore

@@ -0,0 +1,6 @@
+# Include
+!typings/*.d.ts
+!lib-headless/
+
+# Exclude
+test/

headless/README.md

@@ -0,0 +1,31 @@
+# [![xterm.js logo](logo-full.png)](https://xtermjs.org)
+
+⚠ This package is experimental
+
+`xterm-headless` is a headless terminal that can be run in node.js. This is useful in combination with the frontend [`xterm`](https://www.npmjs.com/package/xterm) for example to keep track of a terminal's state on a remote server where the process is hosted.
+
+## Getting Started
+
+First, you need to install the module, we ship exclusively through npm, so you need that installed and then add xterm.js as a dependency by running:
+
+```sh
+npm install xterm-headless
+```
+
+Then import as you would a regular node package. The recommended way to load `xterm-headless` is with TypeScript and the ES6 module syntax:
+
+```javascript
+import { Terminal } from 'xterm-headless';
+```
+
+## API
+
+The full API for `xterm-headless` is contained within the [TypeScript declaration file](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm-headless.d.ts), use the branch/tag picker in GitHub (`w`) to navigate to the correct version of the API.
+
+Note that some APIs are marked *experimental*, these are added to enable experimentation with new ideas without committing to support it like a normal [semver](https://semver.org/) API. Note that these APIs can change radically between versions, so be sure to read release notes if you plan on using experimental APIs.
+
+### Addons
+
+Addons in `xterm-headless` work the [same as in `xterm`](https://github.com/xtermjs/xterm.js/blob/master/README.md#addons) with the one caveat being that the addon needs to be packaged for node.js and not use any DOM APIs.
+
+Currently no official addons are packaged on npm.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xterm",
   "description": "Full xterm terminal, in your browser",
-  "version": "4.12.0",
+  "version": "4.14.0",
   "main": "lib/xterm.js",
   "style": "css/xterm.css",
   "types": "typings/xterm.d.ts",
@@ -10,6 +10,8 @@
   "scripts": {
     "prepackage": "npm run build",
     "package": "webpack",
+    "package-headless": "webpack --config ./webpack.config.headless.js",
+    "postpackage-headless": "node ./bin/package_headless.js",
     "start": "node demo/start",
     "start-debug": "node --inspect-brk demo/start",
     "lint": "eslint -c .eslintrc.json --max-warnings 0 --ext .ts src/ addons/",
@@ -21,6 +23,7 @@
     "test-api-webkit": "node ./bin/test_api.js --browser=webkit --timeout=20000",
     "test-unit": "node ./bin/test.js",
     "test-unit-coverage": "node ./bin/test.js --coverage",
+    "test-unit-dev": "cross-env NODE_PATH='./out' mocha",
     "build": "tsc -b ./tsconfig.all.json",
     "prepare": "npm run setup",
     "setup": "npm run build",
@@ -34,37 +37,39 @@
     "vtfeatures": "node bin/extract_vtfeatures.js src/**/*.ts src/*.ts"
   },
   "devDependencies": {
-    "@types/chai": "^4.2.14",
+    "@types/chai": "^4.2.18",
     "@types/debug": "^4.1.5",
     "@types/deep-equal": "^1.0.1",
     "@types/glob": "^7.1.3",
-    "@types/jsdom": "^16.2.5",
-    "@types/mocha": "^8.0.3",
-    "@types/node": "^10.17.17",
+    "@types/jsdom": "^16.2.10",
+    "@types/mocha": "^8.2.2",
+    "@types/node": "^14.14.44",
     "@types/utf8": "^2.1.6",
-    "@types/webpack": "^4.41.24",
-    "@types/ws": "^7.2.9",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^3.10.1",
-    "chai": "^4.2.0",
-    "deep-equal": "^2.0.4",
-    "eslint": "^7.12.1",
+    "@types/webpack": "^5.28.0",
+    "@types/ws": "^7.4.4",
+    "@typescript-eslint/eslint-plugin": "^4.23.0",
+    "@typescript-eslint/parser": "^4.23.0",
+    "chai": "^4.3.4",
+    "cross-env": "^7.0.3",
+    "deep-equal": "^2.0.5",
+    "eslint": "^7.26.0",
     "express": "^4.17.1",
     "express-ws": "^4.0.0",
-    "glob": "^7.0.5",
-    "jsdom": "^16.4.0",
-    "mocha": "^8.2.1",
-    "mustache": "^4.0.1",
-    "node-pty": "^0.9.0",
+    "glob": "^7.1.7",
+    "jsdom": "^16.5.3",
+    "mocha": "^8.4.0",
+    "mustache": "^4.2.0",
+    "node-pty": "^0.10.1",
     "nyc": "^15.1.0",
-    "playwright": "^1.5.2",
-    "source-map-loader": "^1.1.2",
-    "ts-loader": "^8.0.8",
-    "typescript": "4.0",
+    "playwright": "^1.11.0",
+    "source-map-loader": "^2.0.1",
+    "source-map-support": "^0.5.19",
+    "ts-loader": "^9.1.2",
+    "typescript": "^4.2.4",
     "utf8": "^3.0.0",
-    "webpack": "^5.4.0",
-    "webpack-cli": "^4.2.0",
-    "ws": "^7.3.1",
-    "xterm-benchmark": "^0.1.3"
+    "webpack": "^5.37.0",
+    "webpack-cli": "^4.7.0",
+    "ws": "^7.4.5",
+    "xterm-benchmark": "^0.2.1"
   }
 }

src/browser/AccessibilityManager.ts

@@ -4,10 +4,10 @@
  */
 
 import * as Strings from 'browser/LocalizableStrings';
-import { ITerminal } from 'browser/Types';
+import { ITerminal, IRenderDebouncer } from 'browser/Types';
 import { IBuffer } from 'common/buffer/Types';
 import { isMac } from 'common/Platform';
-import { RenderDebouncer } from 'browser/RenderDebouncer';
+import { TimeBasedDebouncer } from 'browser/TimeBasedDebouncer';
 import { addDisposableDomListener } from 'browser/Lifecycle';
 import { Disposable } from 'common/Lifecycle';
 import { ScreenDprMonitor } from 'browser/ScreenDprMonitor';
@@ -28,7 +28,7 @@ export class AccessibilityManager extends Disposable {
   private _liveRegion: HTMLElement;
   private _liveRegionLineCount: number = 0;
 
-  private _renderRowsDebouncer: RenderDebouncer;
+  private _renderRowsDebouncer: IRenderDebouncer;
   private _screenDprMonitor: ScreenDprMonitor;
 
   private _topBoundaryFocusListener: (e: FocusEvent) => void;
@@ -72,7 +72,7 @@ export class AccessibilityManager extends Disposable {
     this._refreshRowsDimensions();
     this._accessibilityTreeRoot.appendChild(this._rowContainer);
 
-    this._renderRowsDebouncer = new RenderDebouncer(this._renderRows.bind(this));
+    this._renderRowsDebouncer = new TimeBasedDebouncer(this._renderRows.bind(this));
     this._refreshRows();
 
     this._liveRegion = document.createElement('div');
@@ -112,7 +112,7 @@ export class AccessibilityManager extends Disposable {
   }
 
   private _onBoundaryFocus(e: FocusEvent, position: BoundaryPosition): void {
-    const boundaryElement = <HTMLElement>e.target;
+    const boundaryElement = e.target as HTMLElement;
     const beforeBoundaryElement = this._rowElements[position === BoundaryPosition.TOP ? 1 : this._rowElements.length - 2];
 
     // Don't scroll if the buffer top has reached the end in that direction

src/browser/ColorManager.test.ts

@@ -17,7 +17,7 @@ describe('ColorManager', () => {
     dom = new jsdom.JSDOM('');
     window = dom.window;
     document = window.document;
-    (<any>window).HTMLCanvasElement.prototype.getContext = () => ({
+    (window as any).HTMLCanvasElement.prototype.getContext = () => ({
       createLinearGradient(): any {
         return null;
       },
@@ -36,7 +36,7 @@ describe('ColorManager', () => {
       for (const key of Object.keys(cm.colors)) {
         if (key !== 'ansi' && key !== 'contrastCache') {
           // A #rrggbb or rgba(...)
-          assert.ok((<any>cm.colors)[key].css.length >= 7);
+          assert.ok((cm.colors as any)[key].css.length >= 7);
         }
       }
       assert.equal(cm.colors.ansi.length, 256);

src/browser/Linkifier.test.ts

@@ -174,7 +174,7 @@ describe('Linkifier', () => {
             assert.equal(mouseZoneManager.zones[0].y1, 1);
             assert.equal(mouseZoneManager.zones[0].y2, 1);
             // Fires done()
-            mouseZoneManager.zones[0].clickCallback(<any>{});
+            mouseZoneManager.zones[0].clickCallback({} as any);
           }
         });
         linkifier.linkifyRows();
@@ -210,7 +210,7 @@ describe('Linkifier', () => {
         let count = 0;
         linkifier.registerLinkMatcher(/test/, () => assert.fail(), {
           validationCallback: (url, cb) => {
-            count += 1;
+            count++;
             if (count === 2) {
               done();
             }

src/browser/Linkifier.ts

@@ -89,7 +89,9 @@ export class Linkifier implements ILinkifier {
     if (this._rowsTimeoutId) {
       clearTimeout(this._rowsTimeoutId);
     }
-    this._rowsTimeoutId = <number><any>setTimeout(() => this._linkifyRows(), Linkifier._timeBeforeLatency);
+
+    // Cannot use window.setTimeout since tests need to run in node
+    this._rowsTimeoutId = setTimeout(() => this._linkifyRows(), Linkifier._timeBeforeLatency) as any as number;
   }
 
   /**

src/browser/RenderDebouncer.ts

@@ -3,12 +3,12 @@
  * @license MIT
  */
 
-import { IDisposable } from 'common/Types';
+import { IRenderDebouncer } from 'browser/Types';
 
 /**
  * Debounces calls to render terminal rows using animation frames.
  */
-export class RenderDebouncer implements IDisposable {
+export class RenderDebouncer implements IRenderDebouncer {
   private _rowStart: number | undefined;
   private _rowEnd: number | undefined;
   private _rowCount: number | undefined;

src/browser/Terminal.test.ts

@@ -29,10 +29,10 @@ describe('Terminal', () => {
   beforeEach(() => {
     term = new TestTerminal(termOptions);
     term.refresh = () => { };
-    (<any>term).renderer = new MockRenderer();
+    (term as any).renderer = new MockRenderer();
     term.viewport = new MockViewport();
-    (<any>term)._compositionHelper = new MockCompositionHelper();
-    (<any>term).element = {
+    (term as any)._compositionHelper = new MockCompositionHelper();
+    (term as any).element = {
       classList: {
         toggle: () => { },
         remove: () => { }
@@ -86,12 +86,12 @@ describe('Terminal', () => {
         assert.equal(e.domEvent instanceof Object, true);
         done();
       });
-      const evKeyPress = <KeyboardEvent>{
+      const evKeyPress = {
         preventDefault: () => { },
         stopPropagation: () => { },
         type: 'keypress',
         keyCode: 13
-      };
+      } as KeyboardEvent;
       term.keyPress(evKeyPress);
     });
     it('should fire a key event after a keydown DOM event', (done) => {
@@ -100,13 +100,13 @@ describe('Terminal', () => {
         assert.equal(e.domEvent instanceof Object, true);
         done();
       });
-      (<any>term).textarea = { value: '' };
-      const evKeyDown = <KeyboardEvent>{
+      (term as any).textarea = { value: '' };
+      const evKeyDown = {
         preventDefault: () => { },
         stopPropagation: () => { },
         type: 'keydown',
         keyCode: 13
-      };
+      } as KeyboardEvent;
       term.keyDown(evKeyDown);
     });
     it('should fire the onResize event', (done) => {
@@ -140,18 +140,18 @@ describe('Terminal', () => {
   });
 
   describe('attachCustomKeyEventHandler', () => {
-    const evKeyDown = <KeyboardEvent>{
+    const evKeyDown = {
       preventDefault: () => { },
       stopPropagation: () => { },
       type: 'keydown',
       keyCode: 77
-    };
-    const evKeyPress = <KeyboardEvent>{
+    } as KeyboardEvent;
+    const evKeyPress = {
       preventDefault: () => { },
       stopPropagation: () => { },
       type: 'keypress',
       keyCode: 77
-    };
+    } as KeyboardEvent;
 
     beforeEach(() => {
       term.clearSelection = () => { };
@@ -374,13 +374,13 @@ describe('Terminal', () => {
 
     describe('keyPress', () => {
       it('should scroll down, when a key is pressed and terminal is scrolled up', () => {
-        const event = <KeyboardEvent>{
+        const event = {
           type: 'keydown',
           key: 'a',
           keyCode: 65,
           preventDefault: () => { },
           stopPropagation: () => { }
-        };
+        } as KeyboardEvent;
 
         term.buffer.ydisp = 0;
         term.buffer.ybase = 40;
@@ -403,7 +403,7 @@ describe('Terminal', () => {
         assert.equal(term.buffer.ydisp, startYDisp);
         term.scrollLines(-1);
         assert.equal(term.buffer.ydisp, startYDisp - 1);
-        term.keyPress(<KeyboardEvent>{ keyCode: 0 });
+        term.keyPress({ keyCode: 0 });
         assert.equal(term.buffer.ydisp, startYDisp - 1);
       });
     });
@@ -732,80 +732,78 @@ describe('Terminal', () => {
   });
 
   describe('unicode - surrogates', () => {
-    it('2 characters per cell', async function (): Promise<void> {
-      this.timeout(10000);  // This is needed because istanbul patches code and slows it down
-      const high = String.fromCharCode(0xD800);
-      const cell = new CellData();
-      for (let i = 0xDC00; i <= 0xDCFF; ++i) {
-        await term.writeP(high + String.fromCharCode(i));
-        const tchar = term.buffer.lines.get(0)!.loadCell(0, cell);
-        assert.equal(tchar.getChars(), high + String.fromCharCode(i));
-        assert.equal(tchar.getChars().length, 2);
-        assert.equal(tchar.getWidth(), 1);
-        assert.equal(term.buffer.lines.get(0)!.loadCell(1, cell).getChars(), '');
-        term.reset();
-      }
-    });
-    it('2 characters at last cell', async () => {
-      const high = String.fromCharCode(0xD800);
-      const cell = new CellData();
-      for (let i = 0xDC00; i <= 0xDCFF; ++i) {
-        term.buffer.x = term.cols - 1;
-        await term.writeP(high + String.fromCharCode(i));
-        assert.equal(term.buffer.lines.get(0)!.loadCell(term.buffer.x - 1, cell).getChars(), high + String.fromCharCode(i));
-        assert.equal(term.buffer.lines.get(0)!.loadCell(term.buffer.x - 1, cell).getChars().length, 2);
-        assert.equal(term.buffer.lines.get(1)!.loadCell(0, cell).getChars(), '');
-        term.reset();
-      }
-    });
-    it('2 characters per cell over line end with autowrap', async function (): Promise<void> {
-      this.timeout(10000);
-      const high = String.fromCharCode(0xD800);
-      const cell = new CellData();
-      for (let i = 0xDC00; i <= 0xDCFF; ++i) {
-        term.buffer.x = term.cols - 1;
-
-        await term.writeP('a' + high + String.fromCharCode(i));
-        assert.equal(term.buffer.lines.get(0)!.loadCell(term.cols - 1, cell).getChars(), 'a');
-        assert.equal(term.buffer.lines.get(1)!.loadCell(0, cell).getChars(), high + String.fromCharCode(i));
-        assert.equal(term.buffer.lines.get(1)!.loadCell(0, cell).getChars().length, 2);
-        assert.equal(term.buffer.lines.get(1)!.loadCell(1, cell).getChars(), '');
-        term.reset();
-      }
-    });
-    it('2 characters per cell over line end without autowrap', async function (): Promise<void> {
-      this.timeout(10000);
-      const high = String.fromCharCode(0xD800);
-      const cell = new CellData();
-      for (let i = 0xDC00; i <= 0xDCFF; ++i) {
-        term.buffer.x = term.cols - 1;
-        await term.writeP('\x1b[?7l'); // Disable wraparound mode
-        const width = wcwidth((0xD800 - 0xD800) * 0x400 + i - 0xDC00 + 0x10000);
-        if (width !== 1) {
-          continue;
+    for (let i = 0xDC00; i <= 0xDCF0; i += 0x10) {
+      const range = `0x${i.toString(16).toUpperCase()}-0x${(i + 0xF).toString(16).toUpperCase()}`;
+      it(`${range}: 2 characters per cell`, async function (): Promise<void> {
+        const high = String.fromCharCode(0xD800);
+        const cell = new CellData();
+        for (let j = i; j <= i + 0xF; j++) {
+          await term.writeP(high + String.fromCharCode(j));
+          const tchar = term.buffer.lines.get(0)!.loadCell(0, cell);
+          assert.equal(tchar.getChars(), high + String.fromCharCode(j));
+          assert.equal(tchar.getChars().length, 2);
+          assert.equal(tchar.getWidth(), 1);
+          assert.equal(term.buffer.lines.get(0)!.loadCell(1, cell).getChars(), '');
+          term.reset();
         }
-        await term.writeP('a' + high + String.fromCharCode(i));
-        // auto wraparound mode should cut off the rest of the line
-        assert.equal(term.buffer.lines.get(0)!.loadCell(term.cols - 1, cell).getChars(), high + String.fromCharCode(i));
-        assert.equal(term.buffer.lines.get(0)!.loadCell(term.cols - 1, cell).getChars().length, 2);
-        assert.equal(term.buffer.lines.get(1)!.loadCell(1, cell).getChars(), '');
-        term.reset();
-      }
-    });
-    it('splitted surrogates', async function (): Promise<void> {
-      this.timeout(10000);
-      const high = String.fromCharCode(0xD800);
-      const cell = new CellData();
-      for (let i = 0xDC00; i <= 0xDCFF; ++i) {
-        await term.writeP(high + String.fromCharCode(i));
-        const tchar = term.buffer.lines.get(0)!.loadCell(0, cell);
-        assert.equal(tchar.getChars(), high + String.fromCharCode(i));
-        assert.equal(tchar.getChars().length, 2);
-        assert.equal(tchar.getWidth(), 1);
-        assert.equal(term.buffer.lines.get(0)!.loadCell(1, cell).getChars(), '');
-        term.reset();
-      }
-    });
+      });
+      it(`${range}: 2 characters at last cell`, async () => {
+        const high = String.fromCharCode(0xD800);
+        const cell = new CellData();
+        term.buffer.x = term.cols - 1;
+        for (let j = i; j <= i + 0xF; j++) {
+          await term.writeP(high + String.fromCharCode(j));
+          assert.equal(term.buffer.lines.get(0)!.loadCell(term.buffer.x - 1, cell).getChars(), high + String.fromCharCode(j));
+          assert.equal(term.buffer.lines.get(0)!.loadCell(term.buffer.x - 1, cell).getChars().length, 2);
+          assert.equal(term.buffer.lines.get(1)!.loadCell(0, cell).getChars(), '');
+          term.reset();
+        }
+      });
+      it(`${range}: 2 characters per cell over line end with autowrap`, async function (): Promise<void> {
+        const high = String.fromCharCode(0xD800);
+        const cell = new CellData();
+        for (let j = i; j <= i + 0xF; j++) {
+          term.buffer.x = term.cols - 1;
+          await term.writeP('a' + high + String.fromCharCode(j));
+          assert.equal(term.buffer.lines.get(0)!.loadCell(term.cols - 1, cell).getChars(), 'a');
+          assert.equal(term.buffer.lines.get(1)!.loadCell(0, cell).getChars(), high + String.fromCharCode(j));
+          assert.equal(term.buffer.lines.get(1)!.loadCell(0, cell).getChars().length, 2);
+          assert.equal(term.buffer.lines.get(1)!.loadCell(1, cell).getChars(), '');
+          term.reset();
+        }
+      });
+      it(`${range}: 2 characters per cell over line end without autowrap`, async function (): Promise<void> {
+        const high = String.fromCharCode(0xD800);
+        const cell = new CellData();
+        for (let j = i; j <= i + 0xF; j++) {
+          term.buffer.x = term.cols - 1;
+          await term.writeP('\x1b[?7l'); // Disable wraparound mode
+          const width = wcwidth((0xD800 - 0xD800) * 0x400 + j - 0xDC00 + 0x10000);
+          if (width !== 1) {
+            continue;
+          }
+          await term.writeP('a' + high + String.fromCharCode(j));
+          // auto wraparound mode should cut off the rest of the line
+          assert.equal(term.buffer.lines.get(0)!.loadCell(term.cols - 1, cell).getChars(), high + String.fromCharCode(j));
+          assert.equal(term.buffer.lines.get(0)!.loadCell(term.cols - 1, cell).getChars().length, 2);
+          assert.equal(term.buffer.lines.get(1)!.loadCell(1, cell).getChars(), '');
+          term.reset();
+        }
+      });
+      it(`${range}: splitted surrogates`, async function (): Promise<void> {
+        const high = String.fromCharCode(0xD800);
+        const cell = new CellData();
+        for (let j = i; j <= i + 0xF; j++) {
+          await term.writeP(high + String.fromCharCode(j));
+          const tchar = term.buffer.lines.get(0)!.loadCell(0, cell);
+          assert.equal(tchar.getChars(), high + String.fromCharCode(j));
+          assert.equal(tchar.getChars().length, 2);
+          assert.equal(tchar.getWidth(), 1);
+          assert.equal(term.buffer.lines.get(0)!.loadCell(1, cell).getChars(), '');
+          term.reset();
+        }
+      });
+    }
   });
 
   describe('unicode - combining characters', () => {

src/browser/Terminal.ts

@@ -72,7 +72,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
   // private _visualBellTimer: number;
 
-  public browser: IBrowser = <any>Browser;
+  public browser: IBrowser = Browser as any;
 
   // TODO: We should remove options once components adopt optionsService
   public get options(): IInitializedTerminalOptions { return this.optionsService.options; }
@@ -94,6 +94,20 @@ export class Terminal extends CoreTerminal implements ITerminal {
    */
   private _keyDownHandled: boolean = false;
 
+  /**
+   * Records whether the keypress event has already been handled and triggered a data event, if so
+   * the input event should not trigger a data event but should still print to the textarea so
+   * screen readers will announce it.
+   */
+  private _keyPressHandled: boolean = false;
+
+  /**
+   * Records whether there has been a keydown event for a dead key without a corresponding keydown
+   * event for the composed/alternative character. If we cancel the keydown event for the dead key,
+   * no events will be emitted for the final character.
+   */
+  private _unprocessedDeadKey: boolean = false;
+
   public linkifier: ILinkifier;
   public linkifier2: ILinkifier2;
   public viewport: IViewport | undefined;
@@ -113,8 +127,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
   public get onSelectionChange(): IEvent<void> { return this._onSelectionChange.event; }
   private _onTitleChange = new EventEmitter<string>();
   public get onTitleChange(): IEvent<string> { return this._onTitleChange.event; }
-  private _onBell  = new EventEmitter<void>();
-  public get onBell (): IEvent<void> { return this._onBell.event; }
+  private _onBell = new EventEmitter<void>();
+  public get onBell(): IEvent<void> { return this._onBell.event; }
 
   private _onFocus = new EventEmitter<void>();
   public get onFocus(): IEvent<void> { return this._onFocus.event; }
@@ -224,6 +238,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
         // The DOM renderer needs a row refresh to update the cursor styles
         this.refresh(this.buffer.y, this.buffer.y);
         break;
+      case 'customGlyphs':
       case 'drawBoldTextInBrightColors':
       case 'letterSpacing':
       case 'lineHeight':
@@ -267,8 +282,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
    * Binds the desired focus behavior on a given terminal object.
    */
   private _onTextAreaFocus(ev: KeyboardEvent): void {
-    if (this._coreService.decPrivateModes.sendFocus) {
-      this._coreService.triggerDataEvent(C0.ESC + '[I');
+    if (this.coreService.decPrivateModes.sendFocus) {
+      this.coreService.triggerDataEvent(C0.ESC + '[I');
     }
     this.updateCursorStyle(ev);
     this.element!.classList.add('focus');
@@ -292,8 +307,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
     // screen readers reading it out.
     this.textarea!.value = '';
     this.refresh(this.buffer.y, this.buffer.y);
-    if (this._coreService.decPrivateModes.sendFocus) {
-      this._coreService.triggerDataEvent(C0.ESC + '[O');
+    if (this.coreService.decPrivateModes.sendFocus) {
+      this.coreService.triggerDataEvent(C0.ESC + '[O');
     }
     this.element!.classList.remove('focus');
     this._onBlur.fire();
@@ -340,7 +355,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
       }
       copyHandler(event, this._selectionService!);
     }));
-    const pasteHandlerWrapper = (event: ClipboardEvent): void => handlePasteEvent(event, this.textarea!, this._coreService);
+    const pasteHandlerWrapper = (event: ClipboardEvent): void => handlePasteEvent(event, this.textarea!, this.coreService);
     this.register(addDisposableDomListener(this.textarea!, 'paste', pasteHandlerWrapper));
     this.register(addDisposableDomListener(this.element!, 'paste', pasteHandlerWrapper));
 
@@ -382,6 +397,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.register(addDisposableDomListener(this.textarea!, 'compositionstart', () => this._compositionHelper!.compositionstart()));
     this.register(addDisposableDomListener(this.textarea!, 'compositionupdate', (e: CompositionEvent) => this._compositionHelper!.compositionupdate(e)));
     this.register(addDisposableDomListener(this.textarea!, 'compositionend', () => this._compositionHelper!.compositionend()));
+    this.register(addDisposableDomListener(this.textarea!, 'input', (ev: InputEvent) => this._inputEvent(ev), true));
     this.register(this.onRender(() => this._compositionHelper!.updateCompositionElements()));
     this.register(this.onRender(e => this._queueLinkification(e.start, e.end)));
   }
@@ -408,7 +424,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.element.classList.add('terminal');
     this.element.classList.add('xterm');
     this.element.setAttribute('tabindex', '0');
-    this.element.setAttribute('role', 'document');
     parent.appendChild(this.element);
 
     // Performance: Use a document fragment to build the terminal
@@ -526,7 +541,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.register(addDisposableDomListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService!.onMouseDown(e)));
 
     // apply mouse event classes set by escape codes before terminal was attached
-    if (this._coreMouseService.areMouseEventsActive) {
+    if (this.coreMouseService.areMouseEventsActive) {
       this._selectionService.disable();
       this.element.classList.add('enable-mouse-events');
     } else {
@@ -601,7 +616,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
       let but: CoreMouseButton;
       let action: CoreMouseAction | undefined;
-      switch ((<any>ev).overrideType || ev.type) {
+      switch ((ev as any).overrideType || ev.type) {
         case 'mousemove':
           action = CoreMouseAction.MOVE;
           if (ev.buttons === undefined) {
@@ -644,7 +659,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
         return false;
       }
 
-      return self._coreMouseService.triggerMouseEvent({
+      return self.coreMouseService.triggerMouseEvent({
         col: pos.x - 33, // FIXME: why -33 here?
         row: pos.y - 33,
         button: but,
@@ -699,11 +714,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
         }
       }
     };
-    this.register(this._coreMouseService.onProtocolChange(events => {
+    this.register(this.coreMouseService.onProtocolChange(events => {
       // apply global changes on events
       if (events) {
         if (this.optionsService.options.logLevel === 'debug') {
-          this._logService.debug('Binding to mouse events:', this._coreMouseService.explainEvents(events));
+          this._logService.debug('Binding to mouse events:', this.coreMouseService.explainEvents(events));
         }
         this.element!.classList.add('enable-mouse-events');
         this._selectionService!.disable();
@@ -746,7 +761,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
       }
     }));
     // force initial onProtocolChange so we dont miss early mouse requests
-    this._coreMouseService.activeProtocol = this._coreMouseService.activeProtocol;
+    this.coreMouseService.activeProtocol = this.coreMouseService.activeProtocol;
 
     /**
      * "Always on" event listeners.
@@ -758,7 +773,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
       // Don't send the mouse button to the pty if mouse events are disabled or
       // if the selection manager is having selection forced (ie. a modifier is
       // held).
-      if (!this._coreMouseService.areMouseEventsActive || this._selectionService!.shouldForceSelection(ev)) {
+      if (!this.coreMouseService.areMouseEventsActive || this._selectionService!.shouldForceSelection(ev)) {
         return;
       }
 
@@ -791,12 +806,12 @@ export class Terminal extends CoreTerminal implements ITerminal {
           }
 
           // Construct and send sequences
-          const sequence = C0.ESC + (this._coreService.decPrivateModes.applicationCursorKeys ? 'O' : '[') + (ev.deltaY < 0 ? 'A' : 'B');
+          const sequence = C0.ESC + (this.coreService.decPrivateModes.applicationCursorKeys ? 'O' : '[') + (ev.deltaY < 0 ? 'A' : 'B');
           let data = '';
           for (let i = 0; i < Math.abs(amount); i++) {
             data += sequence;
           }
-          this._coreService.triggerDataEvent(data, true);
+          this.coreService.triggerDataEvent(data, true);
         }
         return;
       }
@@ -812,13 +827,13 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }, { passive: false }));
 
     this.register(addDisposableDomListener(el, 'touchstart', (ev: TouchEvent) => {
-      if (this._coreMouseService.areMouseEventsActive) return;
+      if (this.coreMouseService.areMouseEventsActive) return;
       this.viewport!.onTouchStart(ev);
       return this.cancel(ev);
     }, { passive: true }));
 
     this.register(addDisposableDomListener(el, 'touchmove', (ev: TouchEvent) => {
-      if (this._coreMouseService.areMouseEventsActive) return;
+      if (this.coreMouseService.areMouseEventsActive) return;
       if (!this.viewport!.onTouchMove(ev)) {
         return this.cancel(ev);
       }
@@ -860,8 +875,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
    * Display the cursor element
    */
   private _showCursor(): void {
-    if (!this._coreService.isCursorInitialized) {
-      this._coreService.isCursorInitialized = true;
+    if (!this.coreService.isCursorInitialized) {
+      this.coreService.isCursorInitialized = true;
       this.refresh(this.buffer.y, this.buffer.y);
     }
   }
@@ -872,7 +887,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
   }
 
   public paste(data: string): void {
-    paste(data, this.textarea!, this._coreService);
+    paste(data, this.textarea!, this.coreService);
   }
 
   /**
@@ -1025,7 +1040,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
       return false;
     }
 
-    const result = evaluateKeyboardEvent(event, this._coreService.decPrivateModes.applicationCursorKeys, this.browser.isMac, this.options.macOptionIsMeta);
+    if (event.key === 'Dead' || event.key === 'AltGraph') {
+      this._unprocessedDeadKey = true;
+    }
+
+    const result = evaluateKeyboardEvent(event, this.coreService.decPrivateModes.applicationCursorKeys, this.browser.isMac, this.options.macOptionIsMeta);
 
     this.updateCursorStyle(event);
 
@@ -1052,6 +1071,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
       return true;
     }
 
+    if (this._unprocessedDeadKey) {
+      this._unprocessedDeadKey = false;
+      return true;
+    }
+
     // If ctrl+c or enter is being sent, clear out the textarea. This is done so that screen readers
     // will announce deleted characters. This will not work 100% of the time but it should cover
     // most scenarios.
@@ -1061,7 +1085,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     this._onKey.fire({ key: result.key, domEvent: event });
     this._showCursor();
-    this._coreService.triggerDataEvent(result.key, true);
+    this.coreService.triggerDataEvent(result.key, true);
 
     // Cancel events when not in screen reader mode so events don't get bubbled up and handled by
     // other listeners. When screen reader mode is enabled, this could cause issues if the event
@@ -1074,10 +1098,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._keyDownHandled = true;
   }
 
-  private _isThirdLevelShift(browser: IBrowser, ev: IKeyboardEvent): boolean {
+  private _isThirdLevelShift(browser: IBrowser, ev: KeyboardEvent): boolean {
     const thirdLevelKey =
       (browser.isMac && !this.options.macOptionIsMeta && ev.altKey && !ev.ctrlKey && !ev.metaKey) ||
-      (browser.isWindows && ev.altKey && ev.ctrlKey && !ev.metaKey);
+      (browser.isWindows && ev.altKey && ev.ctrlKey && !ev.metaKey) ||
+      (browser.isWindows && ev.getModifierState('AltGraph'));
 
     if (ev.type === 'keypress') {
       return thirdLevelKey;
@@ -1097,6 +1122,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }
 
     this.updateCursorStyle(ev);
+    this._keyPressHandled = false;
   }
 
   /**
@@ -1108,6 +1134,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
   protected _keyPress(ev: KeyboardEvent): boolean {
     let key;
 
+    this._keyPressHandled = false;
+
     if (this._keyDownHandled) {
       return false;
     }
@@ -1138,11 +1166,35 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     this._onKey.fire({ key, domEvent: ev });
     this._showCursor();
-    this._coreService.triggerDataEvent(key, true);
+    this.coreService.triggerDataEvent(key, true);
+
+    this._keyPressHandled = true;
 
     return true;
   }
 
+  /**
+   * Handle an input event.
+   * Key Resources:
+   *   - https://developer.mozilla.org/en-US/docs/Web/API/InputEvent
+   * @param ev The input event to be handled.
+   */
+  protected _inputEvent(ev: InputEvent): boolean {
+    if (ev.data && ev.inputType === 'insertText') {
+      if (this._keyPressHandled) {
+        return false;
+      }
+
+      const text = ev.data;
+      this.coreService.triggerDataEvent(text, true);
+
+      this.cancel(ev);
+      return true;
+    }
+
+    return false;
+  }
+
   /**
    * Ring the bell.
    * Note: We could do sweet things with webaudio here
@@ -1247,12 +1299,12 @@ export class Terminal extends CoreTerminal implements ITerminal {
       case WindowsOptionsReportType.GET_WIN_SIZE_PIXELS:
         const canvasWidth = this._renderService.dimensions.scaledCanvasWidth.toFixed(0);
         const canvasHeight = this._renderService.dimensions.scaledCanvasHeight.toFixed(0);
-        this._coreService.triggerDataEvent(`${C0.ESC}[4;${canvasHeight};${canvasWidth}t`);
+        this.coreService.triggerDataEvent(`${C0.ESC}[4;${canvasHeight};${canvasWidth}t`);
         break;
       case WindowsOptionsReportType.GET_CELL_SIZE_PIXELS:
         const cellWidth = this._renderService.dimensions.scaledCellWidth.toFixed(0);
         const cellHeight = this._renderService.dimensions.scaledCellHeight.toFixed(0);
-        this._coreService.triggerDataEvent(`${C0.ESC}[6;${cellHeight};${cellWidth}t`);
+        this.coreService.triggerDataEvent(`${C0.ESC}[6;${cellHeight};${cellWidth}t`);
         break;
     }
   }

src/browser/Terminal2.test.ts

@@ -17,6 +17,7 @@ const ROWS = 25;
 
 const TESTFILES = glob.sync('**/escape_sequence_files/*.in', { cwd: path.join(__dirname, '../..')});
 const SKIP_FILES = [
+  't0055-EL.in',            // EL/ED handle cursor at cols differently (see #3362)
   't0084-CBT.in',
   't0101-NLM.in',
   't0103-reverse_wrap.in',  // not comparable, we deviate from xterm reverse wrap on purpose
@@ -73,7 +74,7 @@ describe('Escape Sequence Files', function(): void {
       // register handler to trigger viewport scraping, wait for it to finish
       let content = '';
       const OSC_CODE = 12345;
-      await new Promise(resolve => {
+      await new Promise<void>(resolve => {
         customHandler = term.registerOscHandler(OSC_CODE, () => {
           // grab terminal viewport content
           content = terminalToString(term);
@@ -105,7 +106,7 @@ function formatError(input: string, output: string, expected: string): string {
   function addLineNumber(start: number, color: string): (s: string) => string {
     let counter = start || 0;
     return (s: string): string => {
-      counter += 1;
+      counter++;
       return '\x1b[33m' + (' ' + counter).slice(-2) + color + s;
     };
   }

src/browser/TestUtils.test.ts

@@ -13,7 +13,7 @@ import { IBufferLine, ICellData, IAttributeData, ICircularList, XtermListener, I
 import { Buffer } from 'common/buffer/Buffer';
 import * as Browser from 'common/Platform';
 import { Terminal } from 'browser/Terminal';
-import { IUnicodeService, IOptionsService } from 'common/services/Services';
+import { IUnicodeService, IOptionsService, ICoreService, ICoreMouseService } from 'common/services/Services';
 import { IFunctionIdentifier, IParams } from 'common/parser/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
 
@@ -43,6 +43,8 @@ export class MockTerminal implements ITerminal {
   public onRender!: IEvent<{ start: number, end: number }>;
   public onResize!: IEvent<{ cols: number, rows: number }>;
   public markers!: IMarker[];
+  public coreMouseService!: ICoreMouseService;
+  public coreService!: ICoreService;
   public optionsService!: IOptionsService;
   public unicodeService!: IUnicodeService;
   public addMarker(cursorYOffset: number): IMarker {
@@ -153,7 +155,7 @@ export class MockTerminal implements ITerminal {
   public textarea!: HTMLTextAreaElement;
   public rows!: number;
   public cols!: number;
-  public browser: IBrowser = <any>Browser;
+  public browser: IBrowser = Browser as any;
   public writeBuffer!: string[];
   public children!: HTMLElement[];
   public cursorHidden!: boolean;

src/browser/TimeBasedDebouncer.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+const RENDER_DEBOUNCE_THRESHOLD_MS = 1000; // 1 Second
+
+import { IRenderDebouncer } from 'browser/Types';
+
+/**
+ * Debounces calls to update screen readers to update at most once configurable interval of time.
+ */
+export class TimeBasedDebouncer implements IRenderDebouncer {
+  private _rowStart: number | undefined;
+  private _rowEnd: number | undefined;
+  private _rowCount: number | undefined;
+
+  // The last moment that the Terminal was refreshed at
+  private _lastRefreshMs = 0;
+  // Whether a trailing refresh should be triggered due to a refresh request that was throttled
+  private _additionalRefreshRequested = false;
+
+  private _refreshTimeoutID: number | undefined;
+
+  constructor(
+    private _renderCallback: (start: number, end: number) => void,
+    private readonly _debounceThresholdMS = RENDER_DEBOUNCE_THRESHOLD_MS
+  ) {
+  }
+
+  public dispose(): void {
+    if (this._refreshTimeoutID) {
+      clearTimeout(this._refreshTimeoutID);
+    }
+  }
+
+  public refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void {
+    this._rowCount = rowCount;
+    // Get the min/max row start/end for the arg values
+    rowStart = rowStart !== undefined ? rowStart : 0;
+    rowEnd = rowEnd !== undefined ? rowEnd : this._rowCount - 1;
+    // Set the properties to the updated values
+    this._rowStart = this._rowStart !== undefined ? Math.min(this._rowStart, rowStart) : rowStart;
+    this._rowEnd = this._rowEnd !== undefined ? Math.max(this._rowEnd, rowEnd) : rowEnd;
+
+    // Only refresh if the time since last refresh is above a threshold, otherwise wait for
+    // enough time to pass before refreshing again.
+    const refreshRequestTime: number = Date.now();
+    if (refreshRequestTime - this._lastRefreshMs >= this._debounceThresholdMS) {
+      // Enough time has lapsed since the last refresh; refresh immediately
+      this._lastRefreshMs = refreshRequestTime;
+      this._innerRefresh();
+    } else if (!this._additionalRefreshRequested) {
+      // This is the first additional request throttled; set up trailing refresh
+      const elapsed = refreshRequestTime - this._lastRefreshMs;
+      const waitPeriodBeforeTrailingRefresh = this._debounceThresholdMS - elapsed;
+      this._additionalRefreshRequested = true;
+
+      this._refreshTimeoutID = window.setTimeout(() => {
+        this._lastRefreshMs = Date.now();
+        this._innerRefresh();
+        this._additionalRefreshRequested = false;
+        this._refreshTimeoutID = undefined; // No longer need to clear the timeout
+      }, waitPeriodBeforeTrailingRefresh);
+    }
+  }
+
+  private _innerRefresh(): void {
+    // Make sure values are set
+    if (this._rowStart === undefined || this._rowEnd === undefined || this._rowCount === undefined) {
+      return;
+    }
+
+    // Clamp values
+    const start = Math.max(this._rowStart, 0);
+    const end = Math.min(this._rowEnd, this._rowCount - 1);
+
+    // Reset debouncer (this happens before render callback as the render could trigger it again)
+    this._rowStart = undefined;
+    this._rowEnd = undefined;
+
+    // Run render callback
+    this._renderCallback(start, end);
+  }
+}
+

src/browser/Types.d.ts

@@ -15,7 +15,6 @@ export interface ITerminal extends IPublicTerminal, ICoreTerminal {
   screenElement: HTMLElement | undefined;
   browser: IBrowser;
   buffer: IBuffer;
-  buffers: IBufferSet;
   viewport: IViewport | undefined;
   // TODO: We should remove options once components adopt optionsService
   options: ITerminalOptions;
@@ -310,3 +309,7 @@ export interface ICharacterJoiner {
   id: number;
   handler: CharacterJoinerHandler;
 }
+
+export interface IRenderDebouncer extends IDisposable {
+  refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void;
+}

src/browser/Viewport.ts

@@ -8,6 +8,8 @@ import { addDisposableDomListener } from 'browser/Lifecycle';
 import { IColorSet, IViewport } from 'browser/Types';
 import { ICharSizeService, IRenderService } from 'browser/services/Services';
 import { IBufferService, IOptionsService } from 'common/services/Services';
+import { IBuffer } from 'common/buffer/Types';
+import { IRenderDimensions } from 'browser/renderer/Types';
 
 const FALLBACK_SCROLL_BAR_WIDTH = 15;
 
@@ -18,11 +20,15 @@ const FALLBACK_SCROLL_BAR_WIDTH = 15;
 export class Viewport extends Disposable implements IViewport {
   public scrollBarWidth: number = 0;
   private _currentRowHeight: number = 0;
+  private _currentScaledCellHeight: number = 0;
   private _lastRecordedBufferLength: number = 0;
   private _lastRecordedViewportHeight: number = 0;
   private _lastRecordedBufferHeight: number = 0;
   private _lastTouchY: number = 0;
   private _lastScrollTop: number = 0;
+  private _lastHadScrollBar: boolean = false;
+  private _activeBuffer: IBuffer;
+  private _renderDimensions: IRenderDimensions;
 
   // Stores a partial line amount when scrolling, this is used to keep track of how much of a line
   // is scrolled so we can "scroll" over partial lines and feel natural on touchpads. This is a
@@ -47,8 +53,15 @@ export class Viewport extends Disposable implements IViewport {
     // Unfortunately the overlay scrollbar would be hidden underneath the screen element in that case,
     // therefore we account for a standard amount to make it visible
     this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH;
+    this._lastHadScrollBar = true;
     this.register(addDisposableDomListener(this._viewportElement, 'scroll', this._onScroll.bind(this)));
 
+    // Track properties used in performance critical code manually to avoid using slow getters
+    this._activeBuffer = this._bufferService.buffer;
+    this.register(this._bufferService.buffers.onBufferActivate(e => this._activeBuffer = e.activeBuffer));
+    this._renderDimensions = this._renderService.dimensions;
+    this.register(this._renderService.onDimensionsChange(e => this._renderDimensions = e));
+
     // Perform this async to ensure the ICharSizeService is ready.
     setTimeout(() => this.syncScrollArea(), 0);
   }
@@ -77,6 +90,7 @@ export class Viewport extends Disposable implements IViewport {
   private _innerRefresh(): void {
     if (this._charSizeService.height > 0) {
       this._currentRowHeight = this._renderService.dimensions.scaledCellHeight / window.devicePixelRatio;
+      this._currentScaledCellHeight = this._renderService.dimensions.scaledCellHeight;
       this._lastRecordedViewportHeight = this._viewportElement.offsetHeight;
       const newBufferHeight = Math.round(this._currentRowHeight * this._lastRecordedBufferLength) + (this._lastRecordedViewportHeight - this._renderService.dimensions.canvasHeight);
       if (this._lastRecordedBufferHeight !== newBufferHeight) {
@@ -94,8 +108,18 @@ export class Viewport extends Disposable implements IViewport {
       this._viewportElement.scrollTop = scrollTop;
     }
 
+    // Update scroll bar width
+    if (this._optionsService.options.scrollback === 0) {
+      this.scrollBarWidth = 0;
+    } else {
+      this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH;
+    }
+    this._lastHadScrollBar = this.scrollBarWidth > 0;
+
+    this._viewportElement.style.width = (this._renderService.dimensions.actualCellWidth * (this._bufferService.cols) + this.scrollBarWidth).toString() + 'px';
     this._refreshAnimationFrame = null;
   }
+
   /**
    * Updates dimensions and synchronizes the scroll area if necessary.
    */
@@ -114,23 +138,21 @@ export class Viewport extends Disposable implements IViewport {
     }
 
     // If the buffer position doesn't match last scroll top
-    const newScrollTop = this._bufferService.buffer.ydisp * this._currentRowHeight;
-    if (this._lastScrollTop !== newScrollTop) {
-      this._refresh(immediate);
-      return;
-    }
-
-    // If element's scroll top changed, this can happen when hiding the element
-    if (this._lastScrollTop !== this._viewportElement.scrollTop) {
+    if (this._lastScrollTop !== this._activeBuffer.ydisp * this._currentRowHeight) {
       this._refresh(immediate);
       return;
     }
 
     // If row height changed
-    if (this._renderService.dimensions.scaledCellHeight / window.devicePixelRatio !== this._currentRowHeight) {
+    if (this._renderDimensions.scaledCellHeight !== this._currentScaledCellHeight) {
       this._refresh(immediate);
       return;
     }
+
+    // If the scroll bar visibility changed
+    if (this._lastHadScrollBar !== (this._optionsService.options.scrollback > 0)) {
+      this._refresh(immediate);
+    }
   }
 
   /**

src/browser/input/CompositionHelper.test.ts

@@ -49,7 +49,7 @@ describe('CompositionHelper', () => {
     it('Should insert simple characters', (done) => {
       // First character 'ㅇ'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent><CompositionEvent>{ data: 'ㅇ' });
+      compositionHelper.compositionupdate({ data: 'ㅇ' });
       textarea.value = 'ㅇ';
       setTimeout(() => { // wait for any textarea updates
         compositionHelper.compositionend();
@@ -57,7 +57,7 @@ describe('CompositionHelper', () => {
           assert.equal(handledText, 'ㅇ');
           // Second character 'ㅇ'
           compositionHelper.compositionstart();
-          compositionHelper.compositionupdate(<CompositionEvent><CompositionEvent>{ data: 'ㅇ' });
+          compositionHelper.compositionupdate({ data: 'ㅇ' });
           textarea.value = 'ㅇㅇ';
           setTimeout(() => { // wait for any textarea updates
             compositionHelper.compositionend();
@@ -73,13 +73,13 @@ describe('CompositionHelper', () => {
     it('Should insert complex characters', (done) => {
       // First character '앙'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent>{ data: 'ㅇ' });
+      compositionHelper.compositionupdate({ data: 'ㅇ' });
       textarea.value = 'ㅇ';
       setTimeout(() => { // wait for any textarea updates
-        compositionHelper.compositionupdate(<CompositionEvent>{ data: '아' });
+        compositionHelper.compositionupdate({ data: '아' });
         textarea.value = '아';
         setTimeout(() => { // wait for any textarea updates
-          compositionHelper.compositionupdate(<CompositionEvent>{ data: '앙' });
+          compositionHelper.compositionupdate({ data: '앙' });
           textarea.value = '앙';
           setTimeout(() => { // wait for any textarea updates
             compositionHelper.compositionend();
@@ -87,13 +87,13 @@ describe('CompositionHelper', () => {
               assert.equal(handledText, '앙');
               // Second character '앙'
               compositionHelper.compositionstart();
-              compositionHelper.compositionupdate(<CompositionEvent>{ data: 'ㅇ' });
+              compositionHelper.compositionupdate({ data: 'ㅇ' });
               textarea.value = '앙ㅇ';
               setTimeout(() => { // wait for any textarea updates
-                compositionHelper.compositionupdate(<CompositionEvent>{ data: '아' });
+                compositionHelper.compositionupdate({ data: '아' });
                 textarea.value = '앙아';
                 setTimeout(() => { // wait for any textarea updates
-                  compositionHelper.compositionupdate(<CompositionEvent>{ data: '앙' });
+                  compositionHelper.compositionupdate({ data: '앙' });
                   textarea.value = '앙앙';
                   setTimeout(() => { // wait for any textarea updates
                     compositionHelper.compositionend();
@@ -113,19 +113,19 @@ describe('CompositionHelper', () => {
     it('Should insert complex characters that change with following character', (done) => {
       // First character '아'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent>{ data: 'ㅇ' });
+      compositionHelper.compositionupdate({ data: 'ㅇ' });
       textarea.value = 'ㅇ';
       setTimeout(() => { // wait for any textarea updates
-        compositionHelper.compositionupdate(<CompositionEvent>{ data: '아' });
+        compositionHelper.compositionupdate({ data: '아' });
         textarea.value = '아';
         setTimeout(() => { // wait for any textarea updates
           // Start second character '아' in first character
-          compositionHelper.compositionupdate(<CompositionEvent>{ data: '앙' });
+          compositionHelper.compositionupdate({ data: '앙' });
           textarea.value = '앙';
           setTimeout(() => { // wait for any textarea updates
             compositionHelper.compositionend();
             compositionHelper.compositionstart();
-            compositionHelper.compositionupdate(<CompositionEvent>{ data: '아' });
+            compositionHelper.compositionupdate({ data: '아' });
             textarea.value = '아아';
             setTimeout(() => { // wait for any textarea updates
               compositionHelper.compositionend();
@@ -142,14 +142,14 @@ describe('CompositionHelper', () => {
     it('Should insert multi-characters compositions', (done) => {
       // First character 'だ'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent>{ data: 'd' });
+      compositionHelper.compositionupdate({ data: 'd' });
       textarea.value = 'd';
       setTimeout(() => { // wait for any textarea updates
-        compositionHelper.compositionupdate(<CompositionEvent>{ data: 'だ' });
+        compositionHelper.compositionupdate({ data: 'だ' });
         textarea.value = 'だ';
         setTimeout(() => { // wait for any textarea updates
           // Second character 'あ'
-          compositionHelper.compositionupdate(<CompositionEvent>{ data: 'だあ' });
+          compositionHelper.compositionupdate({ data: 'だあ' });
           textarea.value = 'だあ';
           setTimeout(() => { // wait for any textarea updates
             compositionHelper.compositionend();
@@ -165,18 +165,18 @@ describe('CompositionHelper', () => {
     it('Should insert multi-character compositions that are converted to other characters with the same length', (done) => {
       // First character 'だ'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent>{ data: 'd' });
+      compositionHelper.compositionupdate({ data: 'd' });
       textarea.value = 'd';
       setTimeout(() => { // wait for any textarea updates
-        compositionHelper.compositionupdate(<CompositionEvent>{ data: 'だ' });
+        compositionHelper.compositionupdate({ data: 'だ' });
         textarea.value = 'だ';
         setTimeout(() => { // wait for any textarea updates
           // Second character 'ー'
-          compositionHelper.compositionupdate(<CompositionEvent>{ data: 'だー' });
+          compositionHelper.compositionupdate({ data: 'だー' });
           textarea.value = 'だー';
           setTimeout(() => { // wait for any textarea updates
             // Convert to katakana 'ダー'
-            compositionHelper.compositionupdate(<CompositionEvent>{ data: 'ダー' });
+            compositionHelper.compositionupdate({ data: 'ダー' });
             textarea.value = 'ダー';
             setTimeout(() => { // wait for any textarea updates
               compositionHelper.compositionend();
@@ -193,18 +193,18 @@ describe('CompositionHelper', () => {
     it('Should insert multi-character compositions that are converted to other characters with different lengths', (done) => {
       // First character 'い'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent>{ data: 'い' });
+      compositionHelper.compositionupdate({ data: 'い' });
       textarea.value = 'い';
       setTimeout(() => { // wait for any textarea updates
         // Second character 'ま'
-        compositionHelper.compositionupdate(<CompositionEvent>{ data: 'いm' });
+        compositionHelper.compositionupdate({ data: 'いm' });
         textarea.value = 'いm';
         setTimeout(() => { // wait for any textarea updates
-          compositionHelper.compositionupdate(<CompositionEvent>{ data: 'いま' });
+          compositionHelper.compositionupdate({ data: 'いま' });
           textarea.value = 'いま';
           setTimeout(() => { // wait for any textarea updates
             // Convert to kanji '今'
-            compositionHelper.compositionupdate(<CompositionEvent>{ data: '今' });
+            compositionHelper.compositionupdate({ data: '今' });
             textarea.value = '今';
             setTimeout(() => { // wait for any textarea updates
               compositionHelper.compositionend();
@@ -221,7 +221,7 @@ describe('CompositionHelper', () => {
     it('Should insert non-composition characters input immediately after composition characters', (done) => {
       // First character 'ㅇ'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent>{ data: 'ㅇ' });
+      compositionHelper.compositionupdate({ data: 'ㅇ' });
       textarea.value = 'ㅇ';
       setTimeout(() => { // wait for any textarea updates
         compositionHelper.compositionend();

src/browser/input/CompositionHelper.ts

@@ -69,7 +69,7 @@ export class CompositionHelper {
    * Handles the compositionupdate event, updating the composition view.
    * @param ev The event.
    */
-  public compositionupdate(ev: CompositionEvent): void {
+  public compositionupdate(ev: Pick<CompositionEvent, 'data'>): void {
     this._compositionView.textContent = ev.data;
     this.updateCompositionElements();
     setTimeout(() => {

src/browser/public/Terminal.ts

@@ -3,17 +3,15 @@
  * @license MIT
  */
 
-import { Terminal as ITerminalApi, ITerminalOptions, IMarker, IDisposable, ILinkMatcherOptions, ITheme, ILocalizableStrings, ITerminalAddon, ISelectionPosition, IBuffer as IBufferApi, IBufferNamespace as IBufferNamespaceApi, IBufferLine as IBufferLineApi, IBufferCell as IBufferCellApi, IParser, IFunctionIdentifier, ILinkProvider, IUnicodeHandling, IUnicodeVersionProvider, FontWeight } from 'xterm';
+import { Terminal as ITerminalApi, ITerminalOptions, IMarker, IDisposable, ILinkMatcherOptions, ITheme, ILocalizableStrings, ITerminalAddon, ISelectionPosition, IBufferNamespace as IBufferNamespaceApi, IParser, ILinkProvider, IUnicodeHandling, FontWeight, IModes } from 'xterm';
 import { ITerminal } from 'browser/Types';
-import { IBufferLine, ICellData } from 'common/Types';
-import { IBuffer, IBufferSet } from 'common/buffer/Types';
-import { CellData } from 'common/buffer/CellData';
-import { Terminal as TerminalCore } from '../Terminal';
-import * as Strings from '../LocalizableStrings';
-import { IEvent, EventEmitter } from 'common/EventEmitter';
-import { AddonManager } from './AddonManager';
-import { IParams } from 'common/parser/Types';
-import { BufferSet } from 'common/buffer/BufferSet';
+import { Terminal as TerminalCore } from 'browser/Terminal';
+import * as Strings from 'browser/LocalizableStrings';
+import { IEvent } from 'common/EventEmitter';
+import { ParserApi } from 'common/public/ParserApi';
+import { UnicodeApi } from 'common/public/UnicodeApi';
+import { AddonManager } from 'common/public/AddonManager';
+import { BufferNamespaceApi } from 'common/public/BufferNamespaceApi';
 
 export class Terminal implements ITerminalApi {
   private _core: ITerminal;
@@ -32,17 +30,17 @@ export class Terminal implements ITerminalApi {
     }
   }
 
-  public get onCursorMove(): IEvent<void> { return this._core.onCursorMove; }
-  public get onLineFeed(): IEvent<void> { return this._core.onLineFeed; }
-  public get onSelectionChange(): IEvent<void> { return this._core.onSelectionChange; }
-  public get onData(): IEvent<string> { return this._core.onData; }
-  public get onBinary(): IEvent<string> { return this._core.onBinary; }
-  public get onTitleChange(): IEvent<string> { return this._core.onTitleChange; }
   public get onBell(): IEvent<void> { return this._core.onBell; }
-  public get onScroll(): IEvent<number> { return this._core.onScroll; }
+  public get onBinary(): IEvent<string> { return this._core.onBinary; }
+  public get onCursorMove(): IEvent<void> { return this._core.onCursorMove; }
+  public get onData(): IEvent<string> { return this._core.onData; }
   public get onKey(): IEvent<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; }
+  public get onLineFeed(): IEvent<void> { return this._core.onLineFeed; }
   public get onRender(): IEvent<{ start: number, end: number }> { return this._core.onRender; }
   public get onResize(): IEvent<{ cols: number, rows: number }> { return this._core.onResize; }
+  public get onScroll(): IEvent<number> { return this._core.onScroll; }
+  public get onSelectionChange(): IEvent<void> { return this._core.onSelectionChange; }
+  public get onTitleChange(): IEvent<string> { return this._core.onTitleChange; }
 
   public get element(): HTMLElement | undefined { return this._core.element; }
   public get parser(): IParser {
@@ -70,6 +68,27 @@ export class Terminal implements ITerminalApi {
     this._checkProposedApi();
     return this._core.markers;
   }
+  public get modes(): IModes {
+    const m = this._core.coreService.decPrivateModes;
+    let mouseTrackingMode: 'none' | 'x10' | 'vt200' | 'drag' | 'any' = 'none';
+    switch (this._core.coreMouseService.activeProtocol) {
+      case 'X10': mouseTrackingMode = 'x10'; break;
+      case 'VT200': mouseTrackingMode = 'vt200'; break;
+      case 'DRAG': mouseTrackingMode = 'drag'; break;
+      case 'ANY': mouseTrackingMode = 'any'; break;
+    }
+    return {
+      applicationCursorKeysMode: m.applicationCursorKeys,
+      applicationKeypadMode: m.applicationKeypad,
+      bracketedPasteMode: m.bracketedPasteMode,
+      insertMode: this._core.coreService.modes.insertMode,
+      mouseTrackingMode: mouseTrackingMode,
+      originMode: m.origin,
+      reverseWraparoundMode: m.reverseWraparound,
+      sendFocusMode: m.sendFocus,
+      wraparoundMode: m.wraparound
+    };
+  }
   public blur(): void {
     this._core.blur();
   }
@@ -218,123 +237,3 @@ export class Terminal implements ITerminalApi {
     }
   }
 }
-
-class BufferApiView implements IBufferApi {
-  constructor(
-    private _buffer: IBuffer,
-    public readonly type: 'normal' | 'alternate'
-  ) { }
-
-  public init(buffer: IBuffer): BufferApiView {
-    this._buffer = buffer;
-    return this;
-  }
-
-  public get cursorY(): number { return this._buffer.y; }
-  public get cursorX(): number { return this._buffer.x; }
-  public get viewportY(): number { return this._buffer.ydisp; }
-  public get baseY(): number { return this._buffer.ybase; }
-  public get length(): number { return this._buffer.lines.length; }
-  public getLine(y: number): IBufferLineApi | undefined {
-    const line = this._buffer.lines.get(y);
-    if (!line) {
-      return undefined;
-    }
-    return new BufferLineApiView(line);
-  }
-  public getNullCell(): IBufferCellApi { return new CellData(); }
-}
-
-class BufferNamespaceApi implements IBufferNamespaceApi {
-  private _normal: BufferApiView;
-  private _alternate: BufferApiView;
-  private _onBufferChange = new EventEmitter<IBufferApi>();
-  public get onBufferChange(): IEvent<IBufferApi> { return this._onBufferChange.event; }
-
-  constructor(private _core: ITerminal) {
-    this._normal = new BufferApiView(this._core.buffers.normal, 'normal');
-    this._alternate = new BufferApiView(this._core.buffers.alt, 'alternate');
-    this._core.buffers.onBufferActivate(() => this._onBufferChange.fire(this.active));
-  }
-  public get active(): IBufferApi {
-    if (this._core.buffers.active === this._core.buffers.normal) { return this.normal; }
-    if (this._core.buffers.active === this._core.buffers.alt) { return this.alternate; }
-    throw new Error('Active buffer is neither normal nor alternate');
-  }
-  public get normal(): IBufferApi {
-    return this._normal.init(this._core.buffers.normal);
-  }
-  public get alternate(): IBufferApi {
-    return this._alternate.init(this._core.buffers.alt);
-  }
-}
-
-class BufferLineApiView implements IBufferLineApi {
-  constructor(private _line: IBufferLine) { }
-
-  public get isWrapped(): boolean { return this._line.isWrapped; }
-  public get length(): number { return this._line.length; }
-  public getCell(x: number, cell?: IBufferCellApi): IBufferCellApi | undefined {
-    if (x < 0 || x >= this._line.length) {
-      return undefined;
-    }
-
-    if (cell) {
-      this._line.loadCell(x, <ICellData>cell);
-      return cell;
-    }
-    return this._line.loadCell(x, new CellData());
-  }
-  public translateToString(trimRight?: boolean, startColumn?: number, endColumn?: number): string {
-    return this._line.translateToString(trimRight, startColumn, endColumn);
-  }
-}
-
-class ParserApi implements IParser {
-  constructor(private _core: ITerminal) { }
-
-  public registerCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean | Promise<boolean>): IDisposable {
-    return this._core.registerCsiHandler(id, (params: IParams) => callback(params.toArray()));
-  }
-  public addCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean | Promise<boolean>): IDisposable {
-    return this.registerCsiHandler(id, callback);
-  }
-  public registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean | Promise<boolean>): IDisposable {
-    return this._core.registerDcsHandler(id, (data: string, params: IParams) => callback(data, params.toArray()));
-  }
-  public addDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean | Promise<boolean>): IDisposable {
-    return this.registerDcsHandler(id, callback);
-  }
-  public registerEscHandler(id: IFunctionIdentifier, handler: () => boolean | Promise<boolean>): IDisposable {
-    return this._core.registerEscHandler(id, handler);
-  }
-  public addEscHandler(id: IFunctionIdentifier, handler: () => boolean | Promise<boolean>): IDisposable {
-    return this.registerEscHandler(id, handler);
-  }
-  public registerOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
-    return this._core.registerOscHandler(ident, callback);
-  }
-  public addOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
-    return this.registerOscHandler(ident, callback);
-  }
-}
-
-class UnicodeApi implements IUnicodeHandling {
-  constructor(private _core: ITerminal) { }
-
-  public register(provider: IUnicodeVersionProvider): void {
-    this._core.unicodeService.register(provider);
-  }
-
-  public get versions(): string[] {
-    return this._core.unicodeService.versions;
-  }
-
-  public get activeVersion(): string {
-    return this._core.unicodeService.activeVersion;
-  }
-
-  public set activeVersion(version: string) {
-    this._core.unicodeService.activeVersion = version;
-  }
-}

src/browser/renderer/BaseRenderLayer.ts

@@ -17,6 +17,7 @@ import { IBufferService, IOptionsService } from 'common/services/Services';
 import { throwIfFalsy } from 'browser/renderer/RendererUtils';
 import { channels, color, rgba } from 'browser/Color';
 import { removeElementFromParent } from 'browser/Dom';
+import { tryDrawCustomChar } from 'browser/renderer/CustomGlyphs';
 
 export abstract class BaseRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -152,6 +153,21 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       height * this._scaledCellHeight);
   }
 
+  /**
+     * Fills a 1px line (2px on HDPI) at the middle of the cell. This uses the
+     * existing fillStyle on the context.
+     * @param x The column to fill.
+     * @param y The row to fill.
+     */
+  protected _fillMiddleLineAtCells(x: number, y: number, width: number = 1): void {
+    const cellOffset = Math.ceil(this._scaledCellHeight * 0.5);
+    this._ctx.fillRect(
+      x * this._scaledCellWidth,
+      (y + 1) * this._scaledCellHeight - cellOffset - window.devicePixelRatio,
+      width * this._scaledCellWidth,
+      window.devicePixelRatio);
+  }
+
   /**
    * Fills a 1px line (2px on HDPI) at the bottom of the cell. This uses the
    * existing fillStyle on the context.
@@ -244,10 +260,20 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.font = this._getFont(false, false);
     this._ctx.textBaseline = 'ideographic';
     this._clipRow(y);
-    this._ctx.fillText(
-      cell.getChars(),
-      x * this._scaledCellWidth + this._scaledCharLeft,
-      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
+
+    // Draw custom characters if applicable
+    let drawSuccess = false;
+    if (this._optionsService.options.customGlyphs !== false) {
+      drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._scaledCellWidth, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight);
+    }
+
+    // Draw the character
+    if (!drawSuccess) {
+      this._ctx.fillText(
+        cell.getChars(),
+        x * this._scaledCellWidth + this._scaledCharLeft,
+        y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
+    }
   }
 
   /**
@@ -358,14 +384,25 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     if (cell.isDim()) {
       this._ctx.globalAlpha = DIM_OPACITY;
     }
+
+    // Draw custom characters if applicable
+    let drawSuccess = false;
+    if (this._optionsService.options.customGlyphs !== false) {
+      drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._scaledCellWidth, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight);
+    }
+
     // Draw the character
-    this._ctx.fillText(
-      cell.getChars(),
-      x * this._scaledCellWidth + this._scaledCharLeft,
-      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
+    if (!drawSuccess) {
+      this._ctx.fillText(
+        cell.getChars(),
+        x * this._scaledCellWidth + this._scaledCharLeft,
+        y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
+    }
+
     this._ctx.restore();
   }
 
+
   /**
    * Clips a row to ensure no pixels will be drawn outside the cells in the row.
    * @param y The row to clip.

src/browser/renderer/CursorRenderLayer.ts

@@ -58,6 +58,14 @@ export class CursorRenderLayer extends BaseRenderLayer {
     // TODO: Consider initial options? Maybe onOptionsChanged should be called at the end of open?
   }
 
+  public dispose(): void {
+    if (this._cursorBlinkStateManager) {
+      this._cursorBlinkStateManager.dispose();
+      this._cursorBlinkStateManager = undefined;
+    }
+    super.dispose();
+  }
+
   public resize(dim: IRenderDimensions): void {
     super.resize(dim);
     // Resizing the canvas discards the contents of the canvas so clear state
@@ -197,7 +205,12 @@ export class CursorRenderLayer extends BaseRenderLayer {
 
   private _clearCursor(): void {
     if (this._state) {
-      this._clearCells(this._state.x, this._state.y, this._state.width, 1);
+      // Avoid potential rounding errors when device pixel ratio is less than 1
+      if (window.devicePixelRatio < 1) {
+        this._clearAll();
+      } else {
+        this._clearCells(this._state.x, this._state.y, this._state.width, 1);
+      }
       this._state = {
         x: 0,
         y: 0,

src/browser/renderer/CustomGlyphs.ts

@@ -0,0 +1,563 @@
+/**
+ * Copyright (c) 2021 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { throwIfFalsy } from 'browser/renderer/RendererUtils';
+
+interface IBlockVector {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export const blockElementDefinitions: { [index: string]: IBlockVector[] | undefined } = {
+  // Block elements (0x2580-0x2590)
+  '▀': [{ x: 0, y: 0, w: 8, h: 4 }], // UPPER HALF BLOCK
+  '▁': [{ x: 0, y: 7, w: 8, h: 1 }], // LOWER ONE EIGHTH BLOCK
+  '▂': [{ x: 0, y: 6, w: 8, h: 2 }], // LOWER ONE QUARTER BLOCK
+  '▃': [{ x: 0, y: 5, w: 8, h: 3 }], // LOWER THREE EIGHTHS BLOCK
+  '▄': [{ x: 0, y: 4, w: 8, h: 4 }], // LOWER HALF BLOCK
+  '▅': [{ x: 0, y: 3, w: 8, h: 5 }], // LOWER FIVE EIGHTHS BLOCK
+  '▆': [{ x: 0, y: 2, w: 8, h: 6 }], // LOWER THREE QUARTERS BLOCK
+  '▇': [{ x: 0, y: 1, w: 8, h: 7 }], // LOWER SEVEN EIGHTHS BLOCK
+  '█': [{ x: 0, y: 0, w: 8, h: 8 }], // FULL BLOCK
+  '▉': [{ x: 0, y: 0, w: 7, h: 8 }], // LEFT SEVEN EIGHTHS BLOCK
+  '▊': [{ x: 0, y: 0, w: 6, h: 8 }], // LEFT THREE QUARTERS BLOCK
+  '▋': [{ x: 0, y: 0, w: 5, h: 8 }], // LEFT FIVE EIGHTHS BLOCK
+  '▌': [{ x: 0, y: 0, w: 4, h: 8 }], // LEFT HALF BLOCK
+  '▍': [{ x: 0, y: 0, w: 3, h: 8 }], // LEFT THREE EIGHTHS BLOCK
+  '▎': [{ x: 0, y: 0, w: 2, h: 8 }], // LEFT ONE QUARTER BLOCK
+  '▏': [{ x: 0, y: 0, w: 1, h: 8 }], // LEFT ONE EIGHTH BLOCK
+  '▐': [{ x: 4, y: 0, w: 4, h: 8 }], // RIGHT HALF BLOCK
+
+  // Block elements (0x2594-0x2595)
+  '▔': [{ x: 0, y: 0, w: 9, h: 1 }], // UPPER ONE EIGHTH BLOCK
+  '▕': [{ x: 7, y: 0, w: 1, h: 8 }], // RIGHT ONE EIGHTH BLOCK
+
+  // Terminal graphic characters (0x2596-0x259F)
+  '▖': [{ x: 0, y: 4, w: 4, h: 4 }],                             // QUADRANT LOWER LEFT
+  '▗': [{ x: 4, y: 4, w: 4, h: 4 }],                             // QUADRANT LOWER RIGHT
+  '▘': [{ x: 0, y: 0, w: 4, h: 4 }],                             // QUADRANT UPPER LEFT
+  '▙': [{ x: 0, y: 0, w: 4, h: 8 }, { x: 0, y: 4, w: 8, h: 4 }], // QUADRANT UPPER LEFT AND LOWER LEFT AND LOWER RIGHT
+  '▚': [{ x: 0, y: 0, w: 4, h: 4 }, { x: 4, y: 4, w: 4, h: 4 }], // QUADRANT UPPER LEFT AND LOWER RIGHT
+  '▛': [{ x: 0, y: 0, w: 4, h: 8 }, { x: 0, y: 0, w: 4, h: 8 }], // QUADRANT UPPER LEFT AND UPPER RIGHT AND LOWER LEFT
+  '▜': [{ x: 0, y: 0, w: 8, h: 4 }, { x: 4, y: 0, w: 4, h: 8 }], // QUADRANT UPPER LEFT AND UPPER RIGHT AND LOWER RIGHT
+  '▝': [{ x: 4, y: 0, w: 4, h: 4 }],                             // QUADRANT UPPER RIGHT
+  '▞': [{ x: 4, y: 0, w: 4, h: 4 }, { x: 0, y: 4, w: 4, h: 4 }], // QUADRANT UPPER RIGHT AND LOWER LEFT
+  '▟': [{ x: 4, y: 0, w: 4, h: 8 }, { x: 0, y: 4, w: 8, h: 4 }], // QUADRANT UPPER RIGHT AND LOWER LEFT AND LOWER RIGHT
+
+  // VERTICAL ONE EIGHTH BLOCK-2 through VERTICAL ONE EIGHTH BLOCK-7
+  '\u{1FB70}': [{ x: 1, y: 0, w: 1, h: 8 }],
+  '\u{1FB71}': [{ x: 2, y: 0, w: 1, h: 8 }],
+  '\u{1FB72}': [{ x: 3, y: 0, w: 1, h: 8 }],
+  '\u{1FB73}': [{ x: 4, y: 0, w: 1, h: 8 }],
+  '\u{1FB74}': [{ x: 5, y: 0, w: 1, h: 8 }],
+  '\u{1FB75}': [{ x: 6, y: 0, w: 1, h: 8 }],
+
+  // HORIZONTAL ONE EIGHTH BLOCK-2 through HORIZONTAL ONE EIGHTH BLOCK-7
+  '\u{1FB76}': [{ x: 0, y: 1, w: 8, h: 1 }],
+  '\u{1FB77}': [{ x: 0, y: 2, w: 8, h: 1 }],
+  '\u{1FB78}': [{ x: 0, y: 3, w: 8, h: 1 }],
+  '\u{1FB79}': [{ x: 0, y: 4, w: 8, h: 1 }],
+  '\u{1FB7A}': [{ x: 0, y: 5, w: 8, h: 1 }],
+  '\u{1FB7B}': [{ x: 0, y: 6, w: 8, h: 1 }],
+
+  // LEFT AND LOWER ONE EIGHTH BLOCK
+  '\u{1FB7C}': [{ x: 0, y: 0, w: 1, h: 8 }, { x: 0, y: 7, w: 8, h: 1 }],
+  // LEFT AND UPPER ONE EIGHTH BLOCK
+  '\u{1FB7D}': [{ x: 0, y: 0, w: 1, h: 8 }, { x: 0, y: 0, w: 8, h: 1 }],
+  // RIGHT AND UPPER ONE EIGHTH BLOCK
+  '\u{1FB7E}': [{ x: 7, y: 0, w: 1, h: 8 }, { x: 0, y: 0, w: 8, h: 1 }],
+  // RIGHT AND LOWER ONE EIGHTH BLOCK
+  '\u{1FB7F}': [{ x: 7, y: 0, w: 1, h: 8 }, { x: 0, y: 7, w: 8, h: 1 }],
+  // UPPER AND LOWER ONE EIGHTH BLOCK
+  '\u{1FB80}': [{ x: 0, y: 0, w: 8, h: 1 }, { x: 0, y: 7, w: 8, h: 1 }],
+  // HORIZONTAL ONE EIGHTH BLOCK-1358
+  '\u{1FB81}': [{ x: 0, y: 0, w: 8, h: 1 }, { x: 0, y: 2, w: 8, h: 1 }, { x: 0, y: 4, w: 8, h: 1 }, { x: 0, y: 7, w: 8, h: 1 }],
+
+  // UPPER ONE QUARTER BLOCK
+  '\u{1FB82}': [{ x: 0, y: 0, w: 8, h: 2 }],
+  // UPPER THREE EIGHTHS BLOCK
+  '\u{1FB83}': [{ x: 0, y: 0, w: 8, h: 3 }],
+  // UPPER FIVE EIGHTHS BLOCK
+  '\u{1FB84}': [{ x: 0, y: 0, w: 8, h: 5 }],
+  // UPPER THREE QUARTERS BLOCK
+  '\u{1FB85}': [{ x: 0, y: 0, w: 8, h: 6 }],
+  // UPPER SEVEN EIGHTHS BLOCK
+  '\u{1FB86}': [{ x: 0, y: 0, w: 8, h: 7 }],
+
+  // RIGHT ONE QUARTER BLOCK
+  '\u{1FB87}': [{ x: 6, y: 0, w: 2, h: 8 }],
+  // RIGHT THREE EIGHTHS B0OCK
+  '\u{1FB88}': [{ x: 5, y: 0, w: 3, h: 8 }],
+  // RIGHT FIVE EIGHTHS BL0CK
+  '\u{1FB89}': [{ x: 3, y: 0, w: 5, h: 8 }],
+  // RIGHT THREE QUARTERS 0LOCK
+  '\u{1FB8A}': [{ x: 2, y: 0, w: 6, h: 8 }],
+  // RIGHT SEVEN EIGHTHS B0OCK
+  '\u{1FB8B}': [{ x: 1, y: 0, w: 7, h: 8 }],
+
+  // CHECKER BOARD FILL
+  '\u{1FB95}': [
+    { x: 0, y: 0, w: 2, h: 2 }, { x: 4, y: 0, w: 2, h: 2 },
+    { x: 2, y: 2, w: 2, h: 2 }, { x: 6, y: 2, w: 2, h: 2 },
+    { x: 0, y: 4, w: 2, h: 2 }, { x: 4, y: 4, w: 2, h: 2 },
+    { x: 2, y: 6, w: 2, h: 2 }, { x: 6, y: 6, w: 2, h: 2 }
+  ],
+  // INVERSE CHECKER BOARD FILL
+  '\u{1FB96}': [
+    { x: 2, y: 0, w: 2, h: 2 }, { x: 6, y: 0, w: 2, h: 2 },
+    { x: 0, y: 2, w: 2, h: 2 }, { x: 4, y: 2, w: 2, h: 2 },
+    { x: 2, y: 4, w: 2, h: 2 }, { x: 6, y: 4, w: 2, h: 2 },
+    { x: 0, y: 6, w: 2, h: 2 }, { x: 4, y: 6, w: 2, h: 2 }
+  ],
+  // HEAVY HORIZONTAL FILL (upper middle and lower one quarter block)
+  '\u{1FB97}': [{ x: 0, y: 2, w: 8, h: 2 }, { x: 0, y: 6, w: 8, h: 2 }]
+};
+
+type PatternDefinition = number[][];
+
+/**
+ * Defines the repeating pattern used by special characters, the pattern is made up of a 2d array of
+ * pixel values to be filled (1) or not filled (0).
+ */
+const patternCharacterDefinitions: { [key: string]: PatternDefinition | undefined } = {
+  // Shade characters (0x2591-0x2593)
+  '░': [ // LIGHT SHADE (25%)
+    [1, 0, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 1, 0],
+    [0, 0, 0, 0]
+  ],
+  '▒': [ // MEDIUM SHADE (50%)
+    [1, 0],
+    [0, 0],
+    [0, 1],
+    [0, 0]
+  ],
+  '▓': [ // DARK SHADE (75%)
+    [0, 1],
+    [1, 1],
+    [1, 0],
+    [1, 1]
+  ]
+};
+
+const enum Shapes {
+  /** │ */ TOP_TO_BOTTOM = 'M.5,0 L.5,1',
+  /** ─ */ LEFT_TO_RIGHT = 'M0,.5 L1,.5',
+
+  /** └ */ TOP_TO_RIGHT = 'M.5,0 L.5,.5 L1,.5',
+  /** ┘ */ TOP_TO_LEFT = 'M.5,0 L.5,.5 L0,.5',
+  /** ┐ */ LEFT_TO_BOTTOM = 'M0,.5 L.5,.5 L.5,1',
+  /** ┌ */ RIGHT_TO_BOTTOM = 'M0.5,1 L.5,.5 L1,.5',
+
+  /** ╵ */ MIDDLE_TO_TOP = 'M.5,.5 L.5,0',
+  /** ╴ */ MIDDLE_TO_LEFT = 'M.5,.5 L0,.5',
+  /** ╶ */ MIDDLE_TO_RIGHT = 'M.5,.5 L1,.5',
+  /** ╷ */ MIDDLE_TO_BOTTOM = 'M.5,.5 L.5,1',
+
+  /** ┴ */ T_TOP = 'M0,.5 L1,.5 M.5,.5 L.5,0',
+  /** ┤ */ T_LEFT = 'M.5,0 L.5,1 M.5,.5 L0,.5',
+  /** ├ */ T_RIGHT = 'M.5,0 L.5,1 M.5,.5 L1,.5',
+  /** ┬ */ T_BOTTOM = 'M0,.5 L1,.5 M.5,.5 L.5,1',
+
+  /** ┼ */ CROSS = 'M0,.5 L1,.5 M.5,0 L.5,1',
+
+  /** ╌ */ TWO_DASHES_HORIZONTAL = 'M.1,.5 L.4,.5 M.6,.5 L.9,.5', // .2 empty, .3 filled
+  /** ┄ */ THREE_DASHES_HORIZONTAL = 'M.0667,.5 L.2667,.5 M.4,.5 L.6,.5 M.7333,.5 L.9333,.5', // .1333 empty, .2 filled
+  /** ┉ */ FOUR_DASHES_HORIZONTAL = 'M.05,.5 L.2,.5 M.3,.5 L.45,.5 M.55,.5 L.7,.5 M.8,.5 L.95,.5', // .1 empty, .15 filled
+  /** ╎ */ TWO_DASHES_VERTICAL = 'M.5,.1 L.5,.4 M.5,.6 L.5,.9',
+  /** ┆ */ THREE_DASHES_VERTICAL = 'M.5,.0667 L.5,.2667 M.5,.4 L.5,.6 M.5,.7333 L.5,.9333',
+  /** ┊ */ FOUR_DASHES_VERTICAL = 'M.5,.05 L.5,.2 M.5,.3 L.5,.45 L.5,.55 M.5,.7 L.5,.95',
+}
+
+const enum Style {
+  NORMAL = 1,
+  BOLD = 3
+}
+
+/**
+ * This contains the definitions of all box drawing characters in the format of SVG paths (ie. the
+ * svg d attribute).
+ */
+export const boxDrawingDefinitions: { [character: string]: { [fontWeight: number]: string | ((xp: number, yp: number) => string) } | undefined } = {
+  // Uniform normal and bold
+  '─': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT },
+  '━': { [Style.BOLD]:   Shapes.LEFT_TO_RIGHT },
+  '│': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM },
+  '┃': { [Style.BOLD]:   Shapes.TOP_TO_BOTTOM },
+  '┌': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM },
+  '┏': { [Style.BOLD]:   Shapes.RIGHT_TO_BOTTOM },
+  '┐': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM },
+  '┓': { [Style.BOLD]:   Shapes.LEFT_TO_BOTTOM },
+  '└': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT },
+  '┗': { [Style.BOLD]:   Shapes.TOP_TO_RIGHT },
+  '┘': { [Style.NORMAL]: Shapes.TOP_TO_LEFT },
+  '┛': { [Style.BOLD]:   Shapes.TOP_TO_LEFT },
+  '├': { [Style.NORMAL]: Shapes.T_RIGHT },
+  '┣': { [Style.BOLD]:   Shapes.T_RIGHT },
+  '┤': { [Style.NORMAL]: Shapes.T_LEFT },
+  '┫': { [Style.BOLD]:   Shapes.T_LEFT },
+  '┬': { [Style.NORMAL]: Shapes.T_BOTTOM },
+  '┳': { [Style.BOLD]:   Shapes.T_BOTTOM },
+  '┴': { [Style.NORMAL]: Shapes.T_TOP },
+  '┻': { [Style.BOLD]:   Shapes.T_TOP },
+  '┼': { [Style.NORMAL]: Shapes.CROSS },
+  '╋': { [Style.BOLD]:   Shapes.CROSS },
+  '╴': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT },
+  '╸': { [Style.BOLD]:   Shapes.MIDDLE_TO_LEFT },
+  '╵': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP },
+  '╹': { [Style.BOLD]:   Shapes.MIDDLE_TO_TOP },
+  '╶': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT },
+  '╺': { [Style.BOLD]:   Shapes.MIDDLE_TO_RIGHT },
+  '╷': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM },
+  '╻': { [Style.BOLD]:   Shapes.MIDDLE_TO_BOTTOM },
+
+  // Double border
+  '═': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` },
+  '║': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` },
+  '╒': { [Style.NORMAL]: (xp, yp) => `M.5,1 L.5,${.5 - yp} L1,${.5 - yp} M.5,${.5 + yp} L1,${.5 + yp}` },
+  '╓': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},1 L${.5 - xp},.5 L1,.5 M${.5 + xp},.5 L${.5 + xp},1` },
+  '╔': { [Style.NORMAL]: (xp, yp) => `M1,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1` },
+  '╕': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L.5,${.5 - yp} L.5,1 M0,${.5 + yp} L.5,${.5 + yp}` },
+  '╖': { [Style.NORMAL]: (xp, yp) => `M${.5 + xp},1 L${.5 + xp},.5 L0,.5 M${.5 - xp},.5 L${.5 - xp},1` },
+  '╗': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M0,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},1` },
+  '╘': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 + yp} L1,${.5 + yp} M.5,${.5 - yp} L1,${.5 - yp}` },
+  '╙': { [Style.NORMAL]: (xp, yp) => `M1,.5 L${.5 - xp},.5 L${.5 - xp},0 M${.5 + xp},.5 L${.5 + xp},0` },
+  '╚': { [Style.NORMAL]: (xp, yp) => `M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0 M1,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},0` },
+  '╛': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L.5,${.5 + yp} L.5,0 M0,${.5 - yp} L.5,${.5 - yp}` },
+  '╜': { [Style.NORMAL]: (xp, yp) => `M0,.5 L${.5 + xp},.5 L${.5 + xp},0 M${.5 - xp},.5 L${.5 - xp},0` },
+  '╝': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M0,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},0` },
+  '╞': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M.5,${.5 - yp} L1,${.5 - yp} M.5,${.5 + yp} L1,${.5 + yp}` },
+  '╟': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1 M${.5 + xp},.5 L1,.5` },
+  '╠': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` },
+  '╡': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M0,${.5 - yp} L.5,${.5 - yp} M0,${.5 + yp} L.5,${.5 + yp}` },
+  '╢': { [Style.NORMAL]: (xp, yp) => `M0,.5 L${.5 - xp},.5 M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` },
+  '╣': { [Style.NORMAL]: (xp, yp) => `M${.5 + xp},0 L${.5 + xp},1 M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0` },
+  '╤': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp} M.5,${.5 + yp} L.5,1` },
+  '╥': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},.5 L${.5 - xp},1 M${.5 + xp},.5 L${.5 + xp},1` },
+  '╦': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1` },
+  '╧': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 - yp} M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` },
+  '╨': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},.5 L${.5 - xp},0 M${.5 + xp},.5 L${.5 + xp},0` },
+  '╩': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L1,${.5 + yp} M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` },
+  '╪': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` },
+  '╫': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` },
+  '╬': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1 M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` },
+
+  // Diagonal
+  '╱': { [Style.NORMAL]: 'M1,0 L0,1' },
+  '╲': { [Style.NORMAL]: 'M0,0 L1,1' },
+  '╳': { [Style.NORMAL]: 'M1,0 L0,1 M0,0 L1,1' },
+
+  // Mixed weight
+  '╼': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '╽': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '╾': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '╿': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┍': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┎': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┑': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┒': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┕': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┖': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┙': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┚': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┝': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM,                                 [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┞': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM,                               [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┟': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT,                                  [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┠': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.TOP_TO_BOTTOM },
+  '┡': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.TOP_TO_RIGHT },
+  '┢': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM },
+  '┥': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM,                                 [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┦': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM,                                [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┧': { [Style.NORMAL]: Shapes.TOP_TO_LEFT,                                   [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┨': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.TOP_TO_BOTTOM },
+  '┩': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.TOP_TO_LEFT },
+  '┪': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.LEFT_TO_BOTTOM },
+  '┭': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM,                               [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┮': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM,                                [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┯': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.LEFT_TO_RIGHT },
+  '┰': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT,                                 [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┱': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.LEFT_TO_BOTTOM },
+  '┲': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM },
+  '┵': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT,                                  [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┶': { [Style.NORMAL]: Shapes.TOP_TO_LEFT,                                   [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┷': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.LEFT_TO_RIGHT },
+  '┸': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT,                                 [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┹': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.TOP_TO_LEFT },
+  '┺': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.TOP_TO_RIGHT },
+  '┽': { [Style.NORMAL]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_RIGHT}`,  [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┾': { [Style.NORMAL]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_LEFT}`,   [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┿': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM,                                 [Style.BOLD]: Shapes.LEFT_TO_RIGHT },
+  '╀': { [Style.NORMAL]: `${Shapes.LEFT_TO_RIGHT} ${Shapes.MIDDLE_TO_BOTTOM}`, [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '╁': { [Style.NORMAL]: `${Shapes.MIDDLE_TO_TOP} ${Shapes.LEFT_TO_RIGHT}`,    [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '╂': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT,                                 [Style.BOLD]: Shapes.TOP_TO_BOTTOM },
+  '╃': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM,                               [Style.BOLD]: Shapes.TOP_TO_LEFT },
+  '╄': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM,                                [Style.BOLD]: Shapes.TOP_TO_RIGHT },
+  '╅': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT,                                  [Style.BOLD]: Shapes.LEFT_TO_BOTTOM },
+  '╆': { [Style.NORMAL]: Shapes.TOP_TO_LEFT,                                   [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM },
+  '╇': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: `${Shapes.MIDDLE_TO_TOP} ${Shapes.LEFT_TO_RIGHT}` },
+  '╈': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: `${Shapes.LEFT_TO_RIGHT} ${Shapes.MIDDLE_TO_BOTTOM}` },
+  '╉': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_LEFT}` },
+  '╊': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_RIGHT}` },
+
+  // Dashed
+  '╌': { [Style.NORMAL]: Shapes.TWO_DASHES_HORIZONTAL },
+  '╍': { [Style.BOLD]:   Shapes.TWO_DASHES_HORIZONTAL },
+  '┄': { [Style.NORMAL]: Shapes.THREE_DASHES_HORIZONTAL },
+  '┅': { [Style.BOLD]:   Shapes.THREE_DASHES_HORIZONTAL },
+  '┈': { [Style.NORMAL]: Shapes.FOUR_DASHES_HORIZONTAL },
+  '┉': { [Style.BOLD]:   Shapes.FOUR_DASHES_HORIZONTAL },
+  '╎': { [Style.NORMAL]: Shapes.TWO_DASHES_VERTICAL },
+  '╏': { [Style.BOLD]:   Shapes.TWO_DASHES_VERTICAL },
+  '┆': { [Style.NORMAL]: Shapes.THREE_DASHES_VERTICAL  },
+  '┇': { [Style.BOLD]:   Shapes.THREE_DASHES_VERTICAL },
+  '┊': { [Style.NORMAL]: Shapes.FOUR_DASHES_VERTICAL },
+  '┋': { [Style.BOLD]:   Shapes.FOUR_DASHES_VERTICAL },
+
+  // Curved
+  '╭': { [Style.NORMAL]: 'C.5,1,.5,.5,1,.5' },
+  '╮': { [Style.NORMAL]: 'C.5,1,.5,.5,0,.5' },
+  '╯': { [Style.NORMAL]: 'C.5,0,.5,.5,0,.5' },
+  '╰': { [Style.NORMAL]: 'C.5,0,.5,.5,1,.5' }
+};
+
+/**
+ * Try drawing a custom block element or box drawing character, returning whether it was
+ * successfully drawn.
+ */
+export function tryDrawCustomChar(
+  ctx: CanvasRenderingContext2D,
+  c: string,
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): boolean {
+  const blockElementDefinition = blockElementDefinitions[c];
+  if (blockElementDefinition) {
+    drawBlockElementChar(ctx, blockElementDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    return true;
+  }
+
+  const patternDefinition = patternCharacterDefinitions[c];
+  if (patternDefinition) {
+    drawPatternChar(ctx, patternDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    return true;
+  }
+
+  const boxDrawingDefinition = boxDrawingDefinitions[c];
+  if (boxDrawingDefinition) {
+    drawBoxDrawingChar(ctx, boxDrawingDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    return true;
+  }
+
+  return false;
+}
+
+function drawBlockElementChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: IBlockVector[],
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): void {
+  for (let i = 0; i < charDefinition.length; i++) {
+    const box = charDefinition[i];
+    const xEighth = scaledCellWidth / 8;
+    const yEighth = scaledCellHeight / 8;
+    ctx.fillRect(
+      xOffset + box.x * xEighth,
+      yOffset + box.y * yEighth,
+      box.w * xEighth,
+      box.h * yEighth
+    );
+  }
+}
+
+const cachedPatterns: Map<PatternDefinition, Map</* fillStyle */string, CanvasPattern>> = new Map();
+
+function drawPatternChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: number[][],
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): void {
+  let patternSet = cachedPatterns.get(charDefinition);
+  if (!patternSet) {
+    patternSet = new Map();
+    cachedPatterns.set(charDefinition, patternSet);
+  }
+  const fillStyle = ctx.fillStyle;
+  if (typeof fillStyle !== 'string') {
+    throw new Error(`Unexpected fillStyle type "${fillStyle}"`);
+  }
+  let pattern = patternSet.get(fillStyle);
+  if (!pattern) {
+    const width = charDefinition[0].length;
+    const height = charDefinition.length;
+    const tmpCanvas = document.createElement('canvas');
+    tmpCanvas.width = width;
+    tmpCanvas.height = height;
+    const tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d'));
+    const imageData = new ImageData(width, height);
+
+    // Extract rgba from fillStyle
+    let r: number;
+    let g: number;
+    let b: number;
+    let a: number;
+    if (fillStyle.startsWith('#')) {
+      r = parseInt(fillStyle.substr(1, 2), 16);
+      g = parseInt(fillStyle.substr(3, 2), 16);
+      b = parseInt(fillStyle.substr(5, 2), 16);
+      a = fillStyle.length > 7 && parseInt(fillStyle.substr(7, 2), 16) || 1;
+    } else if (fillStyle.startsWith('rgba')) {
+      ([r, g, b, a] = fillStyle.substring(5, fillStyle.length - 1).split(',').map(e => parseFloat(e)));
+    } else {
+      throw new Error(`Unexpected fillStyle color format "${fillStyle}" when drawing pattern glyph`);
+    }
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        imageData.data[(y * width + x) * 4    ] = r;
+        imageData.data[(y * width + x) * 4 + 1] = g;
+        imageData.data[(y * width + x) * 4 + 2] = b;
+        imageData.data[(y * width + x) * 4 + 3] = charDefinition[y][x] * (a * 255);
+      }
+    }
+    tmpCtx.putImageData(imageData, 0, 0);
+    pattern = throwIfFalsy(ctx.createPattern(tmpCanvas, null));
+    patternSet.set(fillStyle, pattern);
+  }
+  ctx.fillStyle = pattern;
+  ctx.fillRect(xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+}
+
+/**
+ * Draws the following box drawing characters by mapping a subset of SVG d attribute instructions to
+ * canvas draw calls.
+ *
+ * Box styles:       ┎┰┒┍┯┑╓╥╖╒╤╕ ┏┳┓┌┲┓┌┬┐┏┱┐
+ * ┌─┬─┐ ┏━┳━┓ ╔═╦═╗ ┠╂┨┝┿┥╟╫╢╞╪╡ ┡╇┩├╊┫┢╈┪┣╉┤
+ * │ │ │ ┃ ┃ ┃ ║ ║ ║ ┖┸┚┕┷┙╙╨╜╘╧╛ └┴┘└┺┛┗┻┛┗┹┘
+ * ├─┼─┤ ┣━╋━┫ ╠═╬═╣ ┏┱┐┌┲┓┌┬┐┌┬┐ ┏┳┓┌┮┓┌┬┐┏┭┐
+ * │ │ │ ┃ ┃ ┃ ║ ║ ║ ┡╃┤├╄┩├╆┪┢╅┤ ┞╀┦├┾┫┟╁┧┣┽┤
+ * └─┴─┘ ┗━┻━┛ ╚═╩═╝ └┴┘└┴┘└┺┛┗┹┘ └┴┘└┶┛┗┻┛┗┵┘
+ *
+ * Other:
+ * ╭─╮ ╲ ╱ ╷╻╎╏┆┇┊┋ ╺╾╴ ╌╌╌ ┄┄┄ ┈┈┈
+ * │ │  ╳  ╽╿╎╏┆┇┊┋ ╶╼╸ ╍╍╍ ┅┅┅ ┉┉┉
+ * ╰─╯ ╱ ╲ ╹╵╎╏┆┇┊┋
+ *
+ * All box drawing characters:
+ * ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏
+ * ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟
+ * ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯
+ * ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿
+ * ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏
+ * ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟
+ * ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯
+ * ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿
+ *
+ * ---
+ *
+ * Box drawing alignment tests:                                          █
+ *                                                                       ▉
+ *   ╔══╦══╗  ┌──┬──┐  ╭──┬──╮  ╭──┬──╮  ┏━━┳━━┓  ┎┒┏┑   ╷  ╻ ┏┯┓ ┌┰┐    ▊ ╱╲╱╲╳╳╳
+ *   ║┌─╨─┐║  │╔═╧═╗│  │╒═╪═╕│  │╓─╁─╖│  ┃┌─╂─┐┃  ┗╃╄┙  ╶┼╴╺╋╸┠┼┨ ┝╋┥    ▋ ╲╱╲╱╳╳╳
+ *   ║│╲ ╱│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╿ │┃  ┍╅╆┓   ╵  ╹ ┗┷┛ └┸┘    ▌ ╱╲╱╲╳╳╳
+ *   ╠╡ ╳ ╞╣  ├╢   ╟┤  ├┼─┼─┼┤  ├╫─╂─╫┤  ┣┿╾┼╼┿┫  ┕┛┖┚     ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳
+ *   ║│╱ ╲│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╽ │┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▎
+ *   ║└─╥─┘║  │╚═╤═╝│  │╘═╪═╛│  │╙─╀─╜│  ┃└─╂─┘┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▏
+ *   ╚══╩══╝  └──┴──┘  ╰──┴──╯  ╰──┴──╯  ┗━━┻━━┛           └╌╌┘ ╎ ┗╍╍┛ ┋  ▁▂▃▄▅▆▇█
+ *
+ * Source: https://www.w3.org/2001/06/utf-8-test/UTF-8-demo.html
+ */
+function drawBoxDrawingChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: { [fontWeight: number]: string | ((xp: number, yp: number) => string) },
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): void {
+  ctx.strokeStyle = ctx.fillStyle;
+  for (const [fontWeight, instructions] of Object.entries(charDefinition)) {
+    ctx.beginPath();
+    ctx.lineWidth = window.devicePixelRatio * Number.parseInt(fontWeight);
+    let actualInstructions: string;
+    if (typeof instructions === 'function') {
+      const xp = .15;
+      const yp = .15 / scaledCellHeight * scaledCellWidth;
+      actualInstructions = instructions(xp, yp);
+    } else {
+      actualInstructions = instructions;
+    }
+    for (const instruction of actualInstructions.split(' ')) {
+      const type = instruction[0];
+      const f = svgToCanvasInstructionMap[type];
+      if (!f) {
+        console.error(`Could not find drawing instructions for "${type}"`);
+        continue;
+      }
+      const args: string[] = instruction.substring(1).split(',');
+      if (!args[0] || !args[1]) {
+        continue;
+      }
+      f(ctx, translateArgs(args, scaledCellWidth, scaledCellHeight, xOffset, yOffset));
+    }
+    ctx.stroke();
+    ctx.closePath();
+  }
+}
+
+function clamp(value: number, max: number, min: number = 0): number {
+  return Math.max(Math.min(value, max), min);
+}
+
+const svgToCanvasInstructionMap: { [index: string]: any } = {
+  'C': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.bezierCurveTo(args[0], args[1], args[2], args[3], args[4], args[5]),
+  'L': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.lineTo(args[0], args[1]),
+  'M': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.moveTo(args[0], args[1])
+};
+
+function translateArgs(args: string[], cellWidth: number, cellHeight: number, xOffset: number, yOffset: number): number[] {
+  const result = args.map(e => parseFloat(e) || parseInt(e));
+
+  if (result.length < 2) {
+    throw new Error('Too few arguments for instruction');
+  }
+
+  for (let x = 0; x < result.length; x += 2) {
+    // Translate from 0-1 to 0-cellWidth
+    result[x] *= cellWidth;
+    // Ensure coordinate doesn't escape cell bounds and round to the nearest 0.5 to ensure a crisp
+    // line at 100% devicePixelRatio
+    if (result[x] !== 0) {
+      result[x] = clamp(Math.round(result[x] + 0.5) - 0.5, cellWidth, 0);
+    }
+    // Apply the cell's offset (ie. x*cellWidth)
+    result[x] += xOffset;
+  }
+
+  for (let y = 1; y < result.length; y += 2) {
+    // Translate from 0-1 to 0-cellHeight
+    result[y] *= cellHeight;
+    // Ensure coordinate doesn't escape cell bounds and round to the nearest 0.5 to ensure a crisp
+    // line at 100% devicePixelRatio
+    if (result[y] !== 0) {
+      result[y] = clamp(Math.round(result[y] + 0.5) - 0.5, cellHeight, 0);
+    }
+    // Apply the cell's offset (ie. x*cellHeight)
+    result[y] += yOffset;
+  }
+
+  return result;
+}

src/browser/renderer/TextRenderLayer.ts

@@ -215,7 +215,7 @@ export class TextRenderLayer extends BaseRenderLayer {
         return;
       }
       this._drawChars(cell, x, y);
-      if (cell.isUnderline()) {
+      if (cell.isUnderline() || cell.isStrikethrough()) {
         this._ctx.save();
 
         if (cell.isInverse()) {
@@ -244,7 +244,12 @@ export class TextRenderLayer extends BaseRenderLayer {
           }
         }
 
-        this._fillBottomLineAtCells(x, y, cell.getWidth());
+        if (cell.isStrikethrough()) {
+          this._fillMiddleLineAtCells(x, y, cell.getWidth());
+        }
+        if (cell.isUnderline()) {
+          this._fillBottomLineAtCells(x, y, cell.getWidth());
+        }
         this._ctx.restore();
       }
     });

src/browser/renderer/atlas/CharAtlasUtils.ts

@@ -10,7 +10,7 @@ import { ITerminalOptions } from 'common/services/Services';
 
 export function generateConfig(scaledCharWidth: number, scaledCharHeight: number, options: ITerminalOptions, colors: IColorSet): ICharAtlasConfig {
   // null out some fields that don't matter
-  const clonedColors = <IPartialColorSet>{
+  const clonedColors: IPartialColorSet = {
     foreground: colors.foreground,
     background: colors.background,
     cursor: undefined,

src/browser/renderer/atlas/DynamicCharAtlas.ts

@@ -266,11 +266,10 @@ export class DynamicCharAtlas extends BaseCharAtlas {
     }
     // Draw the character
     this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight);
-    this._tmpCtx.restore();
 
     // clear the background from the character to avoid issues with drawing over the previous
     // character if it extends past it's bounds
-    const imageData = this._tmpCtx.getImageData(
+    let imageData = this._tmpCtx.getImageData(
       0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight
     );
     let isEmpty = false;
@@ -278,6 +277,27 @@ export class DynamicCharAtlas extends BaseCharAtlas {
       isEmpty = clearColor(imageData, backgroundColor);
     }
 
+    // If this charcater is underscore and empty, shift it up until it is visible, try for a maximum
+    // of 5 pixels.
+    if (isEmpty && glyph.chars === '_' && !this._config.allowTransparency) {
+      for (let offset = 1; offset <= 5; offset++) {
+        // Draw the character
+        this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight - offset);
+
+        // clear the background from the character to avoid issues with drawing over the previous
+        // character if it extends past it's bounds
+        imageData = this._tmpCtx.getImageData(
+          0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight
+        );
+        isEmpty = clearColor(imageData, backgroundColor);
+        if (!isEmpty) {
+          break;
+        }
+      }
+    }
+
+    this._tmpCtx.restore();
+
     // copy the data from imageData to _cacheCanvas
     const x = this._toCoordinateX(index);
     const y = this._toCoordinateY(index);

src/browser/renderer/dom/DomRenderer.ts

@@ -387,7 +387,7 @@ export class DomRenderer extends Disposable implements IRenderer {
       if (!row) {
         return;
       }
-      const span = <HTMLElement>row.children[x];
+      const span = row.children[x] as HTMLElement;
       if (span) {
         span.style.textDecoration = enabled ? 'underline' : 'none';
       }

src/browser/renderer/dom/DomRendererRowFactory.test.ts

@@ -132,6 +132,16 @@ describe('DomRendererRowFactory', () => {
         );
       });
 
+      it('should add class for strikethrough', () => {
+        const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
+        cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.STRIKETHROUGH;
+        lineData.setCell(0, cell);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
+        assert.equal(getFragmentHtml(fragment),
+          '<span class="xterm-strikethrough">a</span>'
+        );
+      });
+
       it('should add classes for 256 foreground colors', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.fg |= Attributes.CM_P256;

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -17,6 +17,7 @@ export const BOLD_CLASS = 'xterm-bold';
 export const DIM_CLASS = 'xterm-dim';
 export const ITALIC_CLASS = 'xterm-italic';
 export const UNDERLINE_CLASS = 'xterm-underline';
+export const STRIKETHROUGH_CLASS = 'xterm-strikethrough';
 export const CURSOR_CLASS = 'xterm-cursor';
 export const CURSOR_BLINK_CLASS = 'xterm-cursor-blink';
 export const CURSOR_STYLE_BLOCK_CLASS = 'xterm-cursor-block';
@@ -151,6 +152,10 @@ export class DomRendererRowFactory {
         charElement.textContent = cell.getChars() || WHITESPACE_CELL_CHAR;
       }
 
+      if (cell.isStrikethrough()) {
+        charElement.classList.add(STRIKETHROUGH_CLASS);
+      }
+
       let fg = cell.getFgColor();
       let fgColorMode = cell.getFgColorMode();
       let bg = cell.getBgColor();

src/browser/services/CharacterJoinerService.test.ts

@@ -270,7 +270,7 @@ function lineData(data: IPartialLineData[]): IBufferLine {
   const tline = new BufferLine(0);
   for (let i = 0; i < data.length; ++i) {
     const line = data[i][0];
-    const attr = <number>(data[i][1] || 0);
+    const attr = (data[i][1] || 0) as number;
     const offset = tline.length;
     tline.resize(tline.length + line.split('').length, CellData.fromCharData([0, '', 0, 0]));
     line.split('').map((char, idx) => tline.setCell(idx + offset, CellData.fromCharData([attr, char, 1, char.charCodeAt(0)])));

src/browser/services/RenderService.ts

@@ -9,7 +9,7 @@ import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { Disposable } from 'common/Lifecycle';
 import { ScreenDprMonitor } from 'browser/ScreenDprMonitor';
 import { addDisposableDomListener } from 'browser/Lifecycle';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, IRenderDebouncer } from 'browser/Types';
 import { IOptionsService, IBufferService } from 'common/services/Services';
 import { ICharSizeService, IRenderService } from 'browser/services/Services';
 
@@ -22,7 +22,7 @@ interface ISelectionState {
 export class RenderService extends Disposable implements IRenderService {
   public serviceBrand: undefined;
 
-  private _renderDebouncer: RenderDebouncer;
+  private _renderDebouncer: IRenderDebouncer;
   private _screenDprMonitor: ScreenDprMonitor;
 
   private _isPaused: boolean = false;

src/browser/services/SelectionService.ts

@@ -133,8 +133,8 @@ export class SelectionService extends Disposable implements ISelectionService {
     super();
 
     // Init listeners
-    this._mouseMoveListener = event => this._onMouseMove(<MouseEvent>event);
-    this._mouseUpListener = event => this._onMouseUp(<MouseEvent>event);
+    this._mouseMoveListener = event => this._onMouseMove(event as MouseEvent);
+    this._mouseUpListener = event => this._onMouseUp(event as MouseEvent);
     this._coreService.onUserInput(() => {
       if (this.hasSelection) {
         this.clearSelection();

src/browser/services/SoundService.ts

@@ -13,7 +13,7 @@ export class SoundService implements ISoundService {
 
   public static get audioContext(): AudioContext | null {
     if (!SoundService._audioContext) {
-      const audioContextCtor: typeof AudioContext = (<any>window).AudioContext || (<any>window).webkitAudioContext;
+      const audioContextCtor: typeof AudioContext = (window as any).AudioContext || (window as any).webkitAudioContext;
       if (!audioContextCtor) {
         console.warn('Web Audio API is not supported by this browser. Consider upgrading to the latest version');
         return null;

src/common/Clone.ts

@@ -16,7 +16,7 @@ export function clone<T>(val: T, depth: number = 5): T {
 
   for (const key in val) {
     // Recursively clone eack item unless we're at the maximum depth
-    clonedObject[key] = depth <= 1 ? val[key] : (val[key] ? clone(val[key], depth - 1) : val[key]);
+    clonedObject[key] = depth <= 1 ? val[key] : (val[key] && clone(val[key], depth - 1));
   }
 
   return clonedObject as T;

src/common/CoreTerminal.ts

@@ -47,11 +47,11 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
   protected readonly _instantiationService: IInstantiationService;
   protected readonly _bufferService: IBufferService;
   protected readonly _logService: ILogService;
-  protected readonly _coreService: ICoreService;
   protected readonly _charsetService: ICharsetService;
-  protected readonly _coreMouseService: ICoreMouseService;
   protected readonly _dirtyRowService: IDirtyRowService;
 
+  public readonly coreMouseService: ICoreMouseService;
+  public readonly coreService: ICoreService;
   public readonly unicodeService: IUnicodeService;
   public readonly optionsService: IOptionsService;
 
@@ -100,10 +100,10 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     this._instantiationService.setService(IBufferService, this._bufferService);
     this._logService = this._instantiationService.createInstance(LogService);
     this._instantiationService.setService(ILogService, this._logService);
-    this._coreService = this.register(this._instantiationService.createInstance(CoreService, () => this.scrollToBottom()));
-    this._instantiationService.setService(ICoreService, this._coreService);
-    this._coreMouseService = this._instantiationService.createInstance(CoreMouseService);
-    this._instantiationService.setService(ICoreMouseService, this._coreMouseService);
+    this.coreService = this.register(this._instantiationService.createInstance(CoreService, () => this.scrollToBottom()));
+    this._instantiationService.setService(ICoreService, this.coreService);
+    this.coreMouseService = this._instantiationService.createInstance(CoreMouseService);
+    this._instantiationService.setService(ICoreMouseService, this.coreMouseService);
     this._dirtyRowService = this._instantiationService.createInstance(DirtyRowService);
     this._instantiationService.setService(IDirtyRowService, this._dirtyRowService);
     this.unicodeService = this._instantiationService.createInstance(UnicodeService);
@@ -112,19 +112,23 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     this._instantiationService.setService(ICharsetService, this._charsetService);
 
     // Register input handler and handle/forward events
-    this._inputHandler = new InputHandler(this._bufferService, this._charsetService, this._coreService, this._dirtyRowService, this._logService, this.optionsService, this._coreMouseService, this.unicodeService);
+    this._inputHandler = new InputHandler(this._bufferService, this._charsetService, this.coreService, this._dirtyRowService, this._logService, this.optionsService, this.coreMouseService, this.unicodeService);
     this.register(forwardEvent(this._inputHandler.onLineFeed, this._onLineFeed));
     this.register(this._inputHandler);
 
     // Setup listeners
     this.register(forwardEvent(this._bufferService.onResize, this._onResize));
-    this.register(forwardEvent(this._coreService.onData, this._onData));
-    this.register(forwardEvent(this._coreService.onBinary, this._onBinary));
+    this.register(forwardEvent(this.coreService.onData, this._onData));
+    this.register(forwardEvent(this.coreService.onBinary, this._onBinary));
     this.register(this.optionsService.onOptionChange(key => this._updateOptions(key)));
     this.register(this._bufferService.onScroll(event => {
       this._onScroll.fire({ position: this._bufferService.buffer.ydisp, source: ScrollSource.TERMINAL });
       this._dirtyRowService.markRangeDirty(this._bufferService.buffer.scrollTop, this._bufferService.buffer.scrollBottom);
     }));
+    this.register(this._inputHandler.onScroll(event => {
+      this._onScroll.fire({ position: this._bufferService.buffer.ydisp, source: ScrollSource.TERMINAL });
+      this._dirtyRowService.markRangeDirty(this._bufferService.buffer.scrollTop, this._bufferService.buffer.scrollBottom);
+    }));
 
     // Setup WriteBuffer
     this._writeBuffer = new WriteBuffer((data, promiseResult) => this._inputHandler.parse(data, promiseResult));
@@ -246,8 +250,8 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     this._inputHandler.reset();
     this._bufferService.reset();
     this._charsetService.reset();
-    this._coreService.reset();
-    this._coreMouseService.reset();
+    this.coreService.reset();
+    this.coreMouseService.reset();
   }
 
   protected _updateOptions(key: string): void {

src/common/InputHandler.test.ts

@@ -77,7 +77,7 @@ describe('InputHandler', () => {
       optionsService.options.scrollback = 1;
       bufferService.reset();
     });
-    it('SL (scrollLeft)', async () => {
+    it('SL (scrollLeft)', () => {
       inputHandler.parseP('12345'.repeat(6));
       inputHandler.parseP('\x1b[ @');
       assert.deepEqual(getLines(bufferService, 6), ['12345', '2345', '2345', '2345', '2345', '2345']);
@@ -86,7 +86,7 @@ describe('InputHandler', () => {
       inputHandler.parseP('\x1b[2 @');
       assert.deepEqual(getLines(bufferService, 6), ['12345', '5', '5', '5', '5', '5']);
     });
-    it('SR (scrollRight)', async () => {
+    it('SR (scrollRight)', () => {
       inputHandler.parseP('12345'.repeat(6));
       inputHandler.parseP('\x1b[ A');
       assert.deepEqual(getLines(bufferService, 6), ['12345', ' 1234', ' 1234', ' 1234', ' 1234', ' 1234']);
@@ -95,7 +95,7 @@ describe('InputHandler', () => {
       inputHandler.parseP('\x1b[2 A');
       assert.deepEqual(getLines(bufferService, 6), ['12345', '    1', '    1', '    1', '    1', '    1']);
     });
-    it('insertColumns (DECIC)', async () => {
+    it('insertColumns (DECIC)', () => {
       inputHandler.parseP('12345'.repeat(6));
       inputHandler.parseP('\x1b[3;3H');
       inputHandler.parseP('\x1b[\'}');
@@ -111,7 +111,7 @@ describe('InputHandler', () => {
       inputHandler.parseP('\x1b[2\'}');
       assert.deepEqual(getLines(bufferService, 6), ['12345', '12  3', '12  3', '12  3', '12  3', '12  3']);
     });
-    it('deleteColumns (DECDC)', async () => {
+    it('deleteColumns (DECDC)', () => {
       inputHandler.parseP('12345'.repeat(6));
       inputHandler.parseP('\x1b[3;3H');
       inputHandler.parseP('\x1b[\'~');
@@ -137,7 +137,7 @@ describe('InputHandler', () => {
       bufferService.reset();
     });
     describe('reverseWraparound set', () => {
-      it('should not reverse outside of scroll margins', async () => {
+      it('should not reverse outside of scroll margins', () => {
         // prepare buffer content
         inputHandler.parseP('#####abcdefghijklmnopqrstuvwxy');
         assert.deepEqual(getLines(bufferService, 6), ['#####', 'abcde', 'fghij', 'klmno', 'pqrst', 'uvwxy']);
@@ -636,6 +636,12 @@ describe('InputHandler', () => {
       await inputHandler.parseP('\x1b[28m');
       assert.equal(!!inputHandler.curAttrData.isInvisible(), false);
     });
+    it('strikethrough', async () => {
+      await inputHandler.parseP('\x1b[9m');
+      assert.equal(!!inputHandler.curAttrData.isStrikethrough(), true);
+      await inputHandler.parseP('\x1b[29m');
+      assert.equal(!!inputHandler.curAttrData.isStrikethrough(), false);
+    });
     it('colormode palette 16', async () => {
       assert.equal(inputHandler.curAttrData.getFgColorMode(), 0); // DEFAULT
       assert.equal(inputHandler.curAttrData.getBgColorMode(), 0); // DEFAULT
@@ -1913,6 +1919,92 @@ describe('InputHandler', () => {
       });
     });
   });
+
+  // issue #3362 and #2979
+  describe('EL/ED cursor at buffer.cols', () => {
+    beforeEach(() => {
+      bufferService.resize(10, 5);
+    });
+    describe('cursor should stay at cols / does not overflow', () => {
+      it('EL0', async () => {
+        await inputHandler.parseP('##########\x1b[0K');
+        assert.equal(bufferService.buffer.x, 10);
+        assert.deepEqual(getLines(bufferService), ['#'.repeat(10), '', '', '', '']);
+      });
+      it('EL1', async () => {
+        await inputHandler.parseP('##########\x1b[1K');
+        assert.equal(bufferService.buffer.x, 10);
+        assert.deepEqual(getLines(bufferService), ['', '', '', '', '']);
+      });
+      it('EL2', async () => {
+        await inputHandler.parseP('##########\x1b[2K');
+        assert.equal(bufferService.buffer.x, 10);
+        assert.deepEqual(getLines(bufferService), ['', '', '', '', '']);
+      });
+      it('ED0', async () => {
+        await inputHandler.parseP('##########\x1b[0J');
+        assert.equal(bufferService.buffer.x, 10);
+        assert.deepEqual(getLines(bufferService), ['#'.repeat(10), '', '', '', '']);
+      });
+      it('ED1', async () => {
+        await inputHandler.parseP('##########\x1b[1J');
+        assert.equal(bufferService.buffer.x, 10);
+        assert.deepEqual(getLines(bufferService), ['', '', '', '', '']);
+      });
+      it('ED2', async () => {
+        await inputHandler.parseP('##########\x1b[2J');
+        assert.equal(bufferService.buffer.x, 10);
+        assert.deepEqual(getLines(bufferService), ['', '', '', '', '']);
+      });
+      it('ED3', async () => {
+        await inputHandler.parseP('##########\x1b[3J');
+        assert.equal(bufferService.buffer.x, 10);
+        assert.deepEqual(getLines(bufferService), ['#'.repeat(10), '', '', '', '']);
+      });
+    });
+    describe('following sequence keeps working', () => {
+      // sequences to test (cursor related ones)
+      const SEQ = [
+        /* ICH */   '\x1b[10@',
+        /* SL */    '\x1b[10 @',
+        /* CUU */   '\x1b[10A',
+        /* SR */    '\x1b[10 A',
+        /* CUD */   '\x1b[10B',
+        /* CUF */   '\x1b[10C',
+        /* CUB */   '\x1b[10D',
+        /* CNL */   '\x1b[10E',
+        /* CPL */   '\x1b[10F',
+        /* CHA */   '\x1b[10G',
+        /* CUP */   '\x1b[10;10H',
+        /* CHT */   '\x1b[10I',
+        /* IL */    '\x1b[10L',
+        /* DL */    '\x1b[10M',
+        /* DCH */   '\x1b[10P',
+        /* SU */    '\x1b[10S',
+        /* SD */    '\x1b[10T',
+        /* ECH */   '\x1b[10X',
+        /* CBT */   '\x1b[10Z',
+        /* HPA */   '\x1b[10`',
+        /* HPR */   '\x1b[10a',
+        /* REP */   '\x1b[10b',
+        /* VPA */   '\x1b[10d',
+        /* VPR */   '\x1b[10e',
+        /* HVP */   '\x1b[10;10f',
+        /* TBC */   '\x1b[0g',
+        /* SCOSC */ '\x1b[s',
+        /* DECIC */ '\x1b[10\'}',
+        /* DECDC */ '\x1b[10\'~'
+      ];
+      it('cursor never advances beyond cols', async () => {
+        for (const seq of SEQ) {
+          await inputHandler.parseP('##########\x1b[2J' + seq);
+          assert.equal(bufferService.buffer.x <= bufferService.cols, true);
+          inputHandler.reset();
+          bufferService.reset();
+        }
+      });
+    });
+  });
 });
 
 

src/common/InputHandler.ts

@@ -20,6 +20,7 @@ import { AttributeData } from 'common/buffer/AttributeData';
 import { ICoreService, IBufferService, IOptionsService, ILogService, IDirtyRowService, ICoreMouseService, ICharsetService, IUnicodeService, LogLevelEnum } from 'common/services/Services';
 import { OscHandler } from 'common/parser/OscParser';
 import { DcsHandler } from 'common/parser/DcsParser';
+import { IBuffer } from 'common/buffer/Types';
 
 /**
  * Map collect to glevel. Used in `selectCharset`.
@@ -234,6 +235,8 @@ export class InputHandler extends Disposable implements IInputHandler {
   private _curAttrData: IAttributeData = DEFAULT_ATTR_DATA.clone();
   private _eraseAttrDataInternal: IAttributeData = DEFAULT_ATTR_DATA.clone();
 
+  private _activeBuffer: IBuffer;
+
   private _onRequestBell = new EventEmitter<void>();
   public get onRequestBell(): IEvent<void> { return this._onRequestBell.event; }
   private _onRequestRefreshRows = new EventEmitter<number, number>();
@@ -282,6 +285,10 @@ export class InputHandler extends Disposable implements IInputHandler {
     super();
     this.register(this._parser);
 
+    // Track properties used in performance critical code manually to avoid using slow getters
+    this._activeBuffer = this._bufferService.buffer;
+    this.register(this._bufferService.buffers.onBufferActivate(e => this._activeBuffer = e.activeBuffer));
+
     /**
      * custom fallback handlers
      */
@@ -508,9 +515,8 @@ export class InputHandler extends Disposable implements IInputHandler {
    */
   public parse(data: string | Uint8Array, promiseResult?: boolean): void | Promise<boolean> {
     let result: void | Promise<boolean>;
-    let buffer = this._bufferService.buffer;
-    let cursorStartX = buffer.x;
-    let cursorStartY = buffer.y;
+    let cursorStartX = this._activeBuffer.x;
+    let cursorStartY = this._activeBuffer.y;
     let start = 0;
     const wasPaused = this._parseStack.paused;
 
@@ -569,8 +575,7 @@ export class InputHandler extends Disposable implements IInputHandler {
       }
     }
 
-    buffer = this._bufferService.buffer;
-    if (buffer.x !== cursorStartX || buffer.y !== cursorStartY) {
+    if (this._activeBuffer.x !== cursorStartX || this._activeBuffer.y !== cursorStartY) {
       this._onCursorMove.fire();
     }
 
@@ -581,20 +586,19 @@ export class InputHandler extends Disposable implements IInputHandler {
   public print(data: Uint32Array, start: number, end: number): void {
     let code: number;
     let chWidth: number;
-    const buffer = this._bufferService.buffer;
     const charset = this._charsetService.charset;
     const screenReaderMode = this._optionsService.options.screenReaderMode;
     const cols = this._bufferService.cols;
     const wraparoundMode = this._coreService.decPrivateModes.wraparound;
     const insertMode = this._coreService.modes.insertMode;
     const curAttr = this._curAttrData;
-    let bufferRow = buffer.lines.get(buffer.ybase + buffer.y)!;
+    let bufferRow = this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y)!;
 
-    this._dirtyRowService.markDirty(buffer.y);
+    this._dirtyRowService.markDirty(this._activeBuffer.y);
 
     // handle wide chars: reset start_cell-1 if we would overwrite the second cell of a wide char
-    if (buffer.x && end - start > 0 && bufferRow.getWidth(buffer.x - 1) === 2) {
-      bufferRow.setCellFromCodePoint(buffer.x - 1, 0, 1, curAttr.fg, curAttr.bg, curAttr.extended);
+    if (this._activeBuffer.x && end - start > 0 && bufferRow.getWidth(this._activeBuffer.x - 1) === 2) {
+      bufferRow.setCellFromCodePoint(this._activeBuffer.x - 1, 0, 1, curAttr.fg, curAttr.bg, curAttr.extended);
     }
 
     for (let pos = start; pos < end; ++pos) {
@@ -619,17 +623,17 @@ export class InputHandler extends Disposable implements IInputHandler {
       }
 
       // insert combining char at last cursor position
-      // buffer.x should never be 0 for a combining char
+      // this._activeBuffer.x should never be 0 for a combining char
       // since they always follow a cell consuming char
-      // therefore we can test for buffer.x to avoid overflow left
-      if (!chWidth && buffer.x) {
-        if (!bufferRow.getWidth(buffer.x - 1)) {
+      // therefore we can test for this._activeBuffer.x to avoid overflow left
+      if (!chWidth && this._activeBuffer.x) {
+        if (!bufferRow.getWidth(this._activeBuffer.x - 1)) {
           // found empty cell after fullwidth, need to go 2 cells back
           // it is save to step 2 cells back here
           // since an empty cell is only set by fullwidth chars
-          bufferRow.addCodepointToCell(buffer.x - 2, code);
+          bufferRow.addCodepointToCell(this._activeBuffer.x - 2, code);
         } else {
-          bufferRow.addCodepointToCell(buffer.x - 1, code);
+          bufferRow.addCodepointToCell(this._activeBuffer.x - 1, code);
         }
         continue;
       }
@@ -637,31 +641,31 @@ export class InputHandler extends Disposable implements IInputHandler {
       // goto next line if ch would overflow
       // NOTE: To avoid costly width checks here,
       // the terminal does not allow a cols < 2.
-      if (buffer.x + chWidth - 1 >= cols) {
+      if (this._activeBuffer.x + chWidth - 1 >= cols) {
         // autowrap - DECAWM
         // automatically wraps to the beginning of the next line
         if (wraparoundMode) {
           // clear left over cells to the right
-          while (buffer.x < cols) {
-            bufferRow.setCellFromCodePoint(buffer.x++, 0, 1, curAttr.fg, curAttr.bg, curAttr.extended);
+          while (this._activeBuffer.x < cols) {
+            bufferRow.setCellFromCodePoint(this._activeBuffer.x++, 0, 1, curAttr.fg, curAttr.bg, curAttr.extended);
           }
-          buffer.x = 0;
-          buffer.y++;
-          if (buffer.y === buffer.scrollBottom + 1) {
-            buffer.y--;
+          this._activeBuffer.x = 0;
+          this._activeBuffer.y++;
+          if (this._activeBuffer.y === this._activeBuffer.scrollBottom + 1) {
+            this._activeBuffer.y--;
             this._bufferService.scroll(this._eraseAttrData(), true);
           } else {
-            if (buffer.y >= this._bufferService.rows) {
-              buffer.y = this._bufferService.rows - 1;
+            if (this._activeBuffer.y >= this._bufferService.rows) {
+              this._activeBuffer.y = this._bufferService.rows - 1;
             }
             // The line already exists (eg. the initial viewport), mark it as a
             // wrapped line
-            buffer.lines.get(buffer.ybase + buffer.y)!.isWrapped = true;
+            this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y)!.isWrapped = true;
           }
           // row changed, get it again
-          bufferRow = buffer.lines.get(buffer.ybase + buffer.y)!;
+          bufferRow = this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y)!;
         } else {
-          buffer.x = cols - 1;
+          this._activeBuffer.x = cols - 1;
           if (chWidth === 2) {
             // FIXME: check for xterm behavior
             // What to do here? We got a wide char that does not fit into last cell
@@ -673,7 +677,7 @@ export class InputHandler extends Disposable implements IInputHandler {
       // insert mode: move characters to right
       if (insertMode) {
         // right shift cells according to the width
-        bufferRow.insertCells(buffer.x, chWidth, buffer.getNullCell(curAttr), curAttr);
+        bufferRow.insertCells(this._activeBuffer.x, chWidth, this._activeBuffer.getNullCell(curAttr), curAttr);
         // test last cell - since the last cell has only room for
         // a halfwidth char any fullwidth shifted there is lost
         // and will be set to empty cell
@@ -683,15 +687,15 @@ export class InputHandler extends Disposable implements IInputHandler {
       }
 
       // write current char to buffer and advance cursor
-      bufferRow.setCellFromCodePoint(buffer.x++, code, chWidth, curAttr.fg, curAttr.bg, curAttr.extended);
+      bufferRow.setCellFromCodePoint(this._activeBuffer.x++, code, chWidth, curAttr.fg, curAttr.bg, curAttr.extended);
 
       // fullwidth char - also set next cell to placeholder stub and advance cursor
       // for graphemes bigger than fullwidth we can simply loop to zero
-      // we already made sure above, that buffer.x + chWidth will not overflow right
+      // we already made sure above, that this._activeBuffer.x + chWidth will not overflow right
       if (chWidth > 0) {
         while (--chWidth) {
           // other than a regular empty cell a cell following a wide char has no width
-          bufferRow.setCellFromCodePoint(buffer.x++, 0, 0, curAttr.fg, curAttr.bg, curAttr.extended);
+          bufferRow.setCellFromCodePoint(this._activeBuffer.x++, 0, 0, curAttr.fg, curAttr.bg, curAttr.extended);
         }
       }
     }
@@ -700,7 +704,7 @@ export class InputHandler extends Disposable implements IInputHandler {
     //  - fullwidth + surrogates: reset
     //  - combining: only base char gets carried on (bug in xterm?)
     if (end - start > 0) {
-      bufferRow.loadCell(buffer.x - 1, this._workCell);
+      bufferRow.loadCell(this._activeBuffer.x - 1, this._workCell);
       if (this._workCell.getWidth() === 2 || this._workCell.getCode() > 0xFFFF) {
         this._parser.precedingCodepoint = 0;
       } else if (this._workCell.isCombined()) {
@@ -711,11 +715,11 @@ export class InputHandler extends Disposable implements IInputHandler {
     }
 
     // handle wide chars: reset cell to the right if it is second cell of a wide char
-    if (buffer.x < cols && end - start > 0 && bufferRow.getWidth(buffer.x) === 0 && !bufferRow.hasContent(buffer.x)) {
-      bufferRow.setCellFromCodePoint(buffer.x, 0, 1, curAttr.fg, curAttr.bg, curAttr.extended);
+    if (this._activeBuffer.x < cols && end - start > 0 && bufferRow.getWidth(this._activeBuffer.x) === 0 && !bufferRow.hasContent(this._activeBuffer.x)) {
+      bufferRow.setCellFromCodePoint(this._activeBuffer.x, 0, 1, curAttr.fg, curAttr.bg, curAttr.extended);
     }
 
-    this._dirtyRowService.markDirty(buffer.y);
+    this._dirtyRowService.markDirty(this._activeBuffer.y);
   }
 
   /**
@@ -779,25 +783,22 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #Y   C0    FF   "Form Feed"            "\f, \x0C"  "Treated as LF."
    */
   public lineFeed(): boolean {
-    // make buffer local for faster access
-    const buffer = this._bufferService.buffer;
-
-    this._dirtyRowService.markDirty(buffer.y);
+    this._dirtyRowService.markDirty(this._activeBuffer.y);
     if (this._optionsService.options.convertEol) {
-      buffer.x = 0;
+      this._activeBuffer.x = 0;
     }
-    buffer.y++;
-    if (buffer.y === buffer.scrollBottom + 1) {
-      buffer.y--;
+    this._activeBuffer.y++;
+    if (this._activeBuffer.y === this._activeBuffer.scrollBottom + 1) {
+      this._activeBuffer.y--;
       this._bufferService.scroll(this._eraseAttrData());
-    } else if (buffer.y >= this._bufferService.rows) {
-      buffer.y = this._bufferService.rows - 1;
+    } else if (this._activeBuffer.y >= this._bufferService.rows) {
+      this._activeBuffer.y = this._bufferService.rows - 1;
     }
     // If the end of the line is hit, prevent this action from wrapping around to the next line.
-    if (buffer.x >= this._bufferService.cols) {
-      buffer.x--;
+    if (this._activeBuffer.x >= this._bufferService.cols) {
+      this._activeBuffer.x--;
     }
-    this._dirtyRowService.markDirty(buffer.y);
+    this._dirtyRowService.markDirty(this._activeBuffer.y);
 
     this._onLineFeed.fire();
     return true;
@@ -810,7 +811,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #Y   C0    CR   "Carriage Return"  "\r, \x0D"  "Move the cursor to the beginning of the row."
    */
   public carriageReturn(): boolean {
-    this._bufferService.buffer.x = 0;
+    this._activeBuffer.x = 0;
     return true;
   }
 
@@ -826,13 +827,11 @@ export class InputHandler extends Disposable implements IInputHandler {
    * with the cursor, thus at the home position (top-leftmost cell) this has no effect.
    */
   public backspace(): boolean {
-    const buffer = this._bufferService.buffer;
-
     // reverse wrap-around is disabled
     if (!this._coreService.decPrivateModes.reverseWraparound) {
       this._restrictCursor();
-      if (buffer.x > 0) {
-        buffer.x--;
+      if (this._activeBuffer.x > 0) {
+        this._activeBuffer.x--;
       }
       return true;
     }
@@ -842,8 +841,8 @@ export class InputHandler extends Disposable implements IInputHandler {
     // to be at x=cols to be able to address the last cell of a row by BS
     this._restrictCursor(this._bufferService.cols);
 
-    if (buffer.x > 0) {
-      buffer.x--;
+    if (this._activeBuffer.x > 0) {
+      this._activeBuffer.x--;
     } else {
       /**
        * reverse wrap-around handling:
@@ -853,21 +852,21 @@ export class InputHandler extends Disposable implements IInputHandler {
        * - cannot peek into scrollbuffer
        * - any cursor movement sequence keeps working as expected
        */
-      if (buffer.x === 0
-          && buffer.y > buffer.scrollTop
-          && buffer.y <= buffer.scrollBottom
-          && buffer.lines.get(buffer.ybase + buffer.y)?.isWrapped)
+      if (this._activeBuffer.x === 0
+          && this._activeBuffer.y > this._activeBuffer.scrollTop
+          && this._activeBuffer.y <= this._activeBuffer.scrollBottom
+          && this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y)?.isWrapped)
       {
-        buffer.lines.get(buffer.ybase + buffer.y)!.isWrapped = false;
-        buffer.y--;
-        buffer.x = this._bufferService.cols - 1;
+        this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y)!.isWrapped = false;
+        this._activeBuffer.y--;
+        this._activeBuffer.x = this._bufferService.cols - 1;
         // find last taken cell - last cell can have 3 different states:
         // - hasContent(true) + hasWidth(1): narrow char - we are done
         // - hasWidth(0): second part of wide char - we are done
         // - hasContent(false) + hasWidth(1): empty cell due to early wrapping wide char, go one cell further back
-        const line = buffer.lines.get(buffer.ybase + buffer.y)!;
-        if (line.hasWidth(buffer.x) && !line.hasContent(buffer.x)) {
-          buffer.x--;
+        const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y)!;
+        if (line.hasWidth(this._activeBuffer.x) && !line.hasContent(this._activeBuffer.x)) {
+          this._activeBuffer.x--;
           // We do this only once, since width=1 + hasContent=false currently happens only once before
           // early wrapping of a wide char.
           // This needs to be fixed once we support graphemes taking more than 2 cells.
@@ -885,13 +884,13 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #Y   C0    HT   "Horizontal Tabulation"  "\t, \x09"  "Move the cursor to the next character tab stop."
    */
   public tab(): boolean {
-    if (this._bufferService.buffer.x >= this._bufferService.cols) {
+    if (this._activeBuffer.x >= this._bufferService.cols) {
       return true;
     }
-    const originalX = this._bufferService.buffer.x;
-    this._bufferService.buffer.x = this._bufferService.buffer.nextStop();
+    const originalX = this._activeBuffer.x;
+    this._activeBuffer.x = this._activeBuffer.nextStop();
     if (this._optionsService.options.screenReaderMode) {
-      this._onA11yTab.fire(this._bufferService.buffer.x - originalX);
+      this._onA11yTab.fire(this._activeBuffer.x - originalX);
     }
     return true;
   }
@@ -924,27 +923,27 @@ export class InputHandler extends Disposable implements IInputHandler {
    * Restrict cursor to viewport size / scroll margin (origin mode).
    */
   private _restrictCursor(maxCol: number = this._bufferService.cols - 1): void {
-    this._bufferService.buffer.x = Math.min(maxCol, Math.max(0, this._bufferService.buffer.x));
-    this._bufferService.buffer.y = this._coreService.decPrivateModes.origin
-      ? Math.min(this._bufferService.buffer.scrollBottom, Math.max(this._bufferService.buffer.scrollTop, this._bufferService.buffer.y))
-      : Math.min(this._bufferService.rows - 1, Math.max(0, this._bufferService.buffer.y));
-    this._dirtyRowService.markDirty(this._bufferService.buffer.y);
+    this._activeBuffer.x = Math.min(maxCol, Math.max(0, this._activeBuffer.x));
+    this._activeBuffer.y = this._coreService.decPrivateModes.origin
+      ? Math.min(this._activeBuffer.scrollBottom, Math.max(this._activeBuffer.scrollTop, this._activeBuffer.y))
+      : Math.min(this._bufferService.rows - 1, Math.max(0, this._activeBuffer.y));
+    this._dirtyRowService.markDirty(this._activeBuffer.y);
   }
 
   /**
    * Set absolute cursor position.
    */
   private _setCursor(x: number, y: number): void {
-    this._dirtyRowService.markDirty(this._bufferService.buffer.y);
+    this._dirtyRowService.markDirty(this._activeBuffer.y);
     if (this._coreService.decPrivateModes.origin) {
-      this._bufferService.buffer.x = x;
-      this._bufferService.buffer.y = this._bufferService.buffer.scrollTop + y;
+      this._activeBuffer.x = x;
+      this._activeBuffer.y = this._activeBuffer.scrollTop + y;
     } else {
-      this._bufferService.buffer.x = x;
-      this._bufferService.buffer.y = y;
+      this._activeBuffer.x = x;
+      this._activeBuffer.y = y;
     }
     this._restrictCursor();
-    this._dirtyRowService.markDirty(this._bufferService.buffer.y);
+    this._dirtyRowService.markDirty(this._activeBuffer.y);
   }
 
   /**
@@ -954,7 +953,7 @@ export class InputHandler extends Disposable implements IInputHandler {
     // for relative changes we have to make sure we are within 0 .. cols/rows - 1
     // before calculating the new position
     this._restrictCursor();
-    this._setCursor(this._bufferService.buffer.x + x, this._bufferService.buffer.y + y);
+    this._setCursor(this._activeBuffer.x + x, this._activeBuffer.y + y);
   }
 
   /**
@@ -966,7 +965,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    */
   public cursorUp(params: IParams): boolean {
     // stop at scrollTop
-    const diffToTop = this._bufferService.buffer.y - this._bufferService.buffer.scrollTop;
+    const diffToTop = this._activeBuffer.y - this._activeBuffer.scrollTop;
     if (diffToTop >= 0) {
       this._moveCursor(0, -Math.min(diffToTop, params.params[0] || 1));
     } else {
@@ -984,7 +983,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    */
   public cursorDown(params: IParams): boolean {
     // stop at scrollBottom
-    const diffToBottom = this._bufferService.buffer.scrollBottom - this._bufferService.buffer.y;
+    const diffToBottom = this._activeBuffer.scrollBottom - this._activeBuffer.y;
     if (diffToBottom >= 0) {
       this._moveCursor(0, Math.min(diffToBottom, params.params[0] || 1));
     } else {
@@ -1025,7 +1024,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    */
   public cursorNextLine(params: IParams): boolean {
     this.cursorDown(params);
-    this._bufferService.buffer.x = 0;
+    this._activeBuffer.x = 0;
     return true;
   }
 
@@ -1039,7 +1038,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    */
   public cursorPrecedingLine(params: IParams): boolean {
     this.cursorUp(params);
-    this._bufferService.buffer.x = 0;
+    this._activeBuffer.x = 0;
     return true;
   }
 
@@ -1050,7 +1049,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #Y CSI CHA   "Cursor Horizontal Absolute" "CSI Ps G" "Move cursor to `Ps`-th column of the active row (default=1)."
    */
   public cursorCharAbsolute(params: IParams): boolean {
-    this._setCursor((params.params[0] || 1) - 1, this._bufferService.buffer.y);
+    this._setCursor((params.params[0] || 1) - 1, this._activeBuffer.y);
     return true;
   }
 
@@ -1081,7 +1080,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #Y CSI HPA   "Horizontal Position Absolute"  "CSI Ps ` " "Same as CHA."
    */
   public charPosAbsolute(params: IParams): boolean {
-    this._setCursor((params.params[0] || 1) - 1, this._bufferService.buffer.y);
+    this._setCursor((params.params[0] || 1) - 1, this._activeBuffer.y);
     return true;
   }
 
@@ -1103,7 +1102,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #Y CSI VPA   "Vertical Position Absolute"    "CSI Ps d"  "Move cursor to `Ps`-th row (default=1)."
    */
   public linePosAbsolute(params: IParams): boolean {
-    this._setCursor(this._bufferService.buffer.x, (params.params[0] || 1) - 1);
+    this._setCursor(this._activeBuffer.x, (params.params[0] || 1) - 1);
     return true;
   }
 
@@ -1146,9 +1145,9 @@ export class InputHandler extends Disposable implements IInputHandler {
   public tabClear(params: IParams): boolean {
     const param = params.params[0];
     if (param === 0) {
-      delete this._bufferService.buffer.tabs[this._bufferService.buffer.x];
+      delete this._activeBuffer.tabs[this._activeBuffer.x];
     } else if (param === 3) {
-      this._bufferService.buffer.tabs = {};
+      this._activeBuffer.tabs = {};
     }
     return true;
   }
@@ -1160,12 +1159,12 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #Y CSI CHT   "Cursor Horizontal Tabulation" "CSI Ps I" "Move cursor `Ps` times tabs forward (default=1)."
    */
   public cursorForwardTab(params: IParams): boolean {
-    if (this._bufferService.buffer.x >= this._bufferService.cols) {
+    if (this._activeBuffer.x >= this._bufferService.cols) {
       return true;
     }
     let param = params.params[0] || 1;
     while (param--) {
-      this._bufferService.buffer.x = this._bufferService.buffer.nextStop();
+      this._activeBuffer.x = this._activeBuffer.nextStop();
     }
     return true;
   }
@@ -1176,16 +1175,13 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #Y CSI CBT   "Cursor Backward Tabulation"  "CSI Ps Z"  "Move cursor `Ps` tabs backward (default=1)."
    */
   public cursorBackwardTab(params: IParams): boolean {
-    if (this._bufferService.buffer.x >= this._bufferService.cols) {
+    if (this._activeBuffer.x >= this._bufferService.cols) {
       return true;
     }
     let param = params.params[0] || 1;
 
-    // make buffer local for faster access
-    const buffer = this._bufferService.buffer;
-
     while (param--) {
-      buffer.x = buffer.prevStop();
+      this._activeBuffer.x = this._activeBuffer.prevStop();
     }
     return true;
   }
@@ -1199,11 +1195,11 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @param end   end - 1 is last erased cell
    */
   private _eraseInBufferLine(y: number, start: number, end: number, clearWrap: boolean = false): void {
-    const line = this._bufferService.buffer.lines.get(this._bufferService.buffer.ybase + y)!;
+    const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!;
     line.replaceCells(
       start,
       end,
-      this._bufferService.buffer.getNullCell(this._eraseAttrData()),
+      this._activeBuffer.getNullCell(this._eraseAttrData()),
       this._eraseAttrData()
     );
     if (clearWrap) {
@@ -1217,8 +1213,8 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @param y row index
    */
   private _resetBufferLine(y: number): void {
-    const line = this._bufferService.buffer.lines.get(this._bufferService.buffer.ybase + y)!;
-    line.fill(this._bufferService.buffer.getNullCell(this._eraseAttrData()));
+    const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!;
+    line.fill(this._activeBuffer.getNullCell(this._eraseAttrData()));
     line.isWrapped = false;
   }
 
@@ -1247,26 +1243,26 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #P[Protection attributes are not supported.] CSI DECSED   "Selective Erase In Display"  "CSI ? Ps J"  "Currently the same as ED."
    */
   public eraseInDisplay(params: IParams): boolean {
-    this._restrictCursor();
+    this._restrictCursor(this._bufferService.cols);
     let j;
     switch (params.params[0]) {
       case 0:
-        j = this._bufferService.buffer.y;
+        j = this._activeBuffer.y;
         this._dirtyRowService.markDirty(j);
-        this._eraseInBufferLine(j++, this._bufferService.buffer.x, this._bufferService.cols, this._bufferService.buffer.x === 0);
+        this._eraseInBufferLine(j++, this._activeBuffer.x, this._bufferService.cols, this._activeBuffer.x === 0);
         for (; j < this._bufferService.rows; j++) {
           this._resetBufferLine(j);
         }
         this._dirtyRowService.markDirty(j);
         break;
       case 1:
-        j = this._bufferService.buffer.y;
+        j = this._activeBuffer.y;
         this._dirtyRowService.markDirty(j);
         // Deleted front part of line and everything before. This line will no longer be wrapped.
-        this._eraseInBufferLine(j, 0, this._bufferService.buffer.x + 1, true);
-        if (this._bufferService.buffer.x + 1 >= this._bufferService.cols) {
+        this._eraseInBufferLine(j, 0, this._activeBuffer.x + 1, true);
+        if (this._activeBuffer.x + 1 >= this._bufferService.cols) {
           // Deleted entire previous line. This next line can no longer be wrapped.
-          this._bufferService.buffer.lines.get(j + 1)!.isWrapped = false;
+          this._activeBuffer.lines.get(j + 1)!.isWrapped = false;
         }
         while (j--) {
           this._resetBufferLine(j);
@@ -1283,11 +1279,11 @@ export class InputHandler extends Disposable implements IInputHandler {
         break;
       case 3:
         // Clear scrollback (everything not in viewport)
-        const scrollBackSize = this._bufferService.buffer.lines.length - this._bufferService.rows;
+        const scrollBackSize = this._activeBuffer.lines.length - this._bufferService.rows;
         if (scrollBackSize > 0) {
-          this._bufferService.buffer.lines.trimStart(scrollBackSize);
-          this._bufferService.buffer.ybase = Math.max(this._bufferService.buffer.ybase - scrollBackSize, 0);
-          this._bufferService.buffer.ydisp = Math.max(this._bufferService.buffer.ydisp - scrollBackSize, 0);
+          this._activeBuffer.lines.trimStart(scrollBackSize);
+          this._activeBuffer.ybase = Math.max(this._activeBuffer.ybase - scrollBackSize, 0);
+          this._activeBuffer.ydisp = Math.max(this._activeBuffer.ydisp - scrollBackSize, 0);
           // Force a scroll event to refresh viewport
           this._onScroll.fire(0);
         }
@@ -1319,19 +1315,19 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #P[Protection attributes are not supported.] CSI DECSEL   "Selective Erase In Line"  "CSI ? Ps K"  "Currently the same as EL."
    */
   public eraseInLine(params: IParams): boolean {
-    this._restrictCursor();
+    this._restrictCursor(this._bufferService.cols);
     switch (params.params[0]) {
       case 0:
-        this._eraseInBufferLine(this._bufferService.buffer.y, this._bufferService.buffer.x, this._bufferService.cols);
+        this._eraseInBufferLine(this._activeBuffer.y, this._activeBuffer.x, this._bufferService.cols);
         break;
       case 1:
-        this._eraseInBufferLine(this._bufferService.buffer.y, 0, this._bufferService.buffer.x + 1);
+        this._eraseInBufferLine(this._activeBuffer.y, 0, this._activeBuffer.x + 1);
         break;
       case 2:
-        this._eraseInBufferLine(this._bufferService.buffer.y, 0, this._bufferService.cols);
+        this._eraseInBufferLine(this._activeBuffer.y, 0, this._bufferService.cols);
         break;
     }
-    this._dirtyRowService.markDirty(this._bufferService.buffer.y);
+    this._dirtyRowService.markDirty(this._activeBuffer.y);
     return true;
   }
 
@@ -1348,26 +1344,23 @@ export class InputHandler extends Disposable implements IInputHandler {
     this._restrictCursor();
     let param = params.params[0] || 1;
 
-    // make buffer local for faster access
-    const buffer = this._bufferService.buffer;
-
-    if (buffer.y > buffer.scrollBottom || buffer.y < buffer.scrollTop) {
+    if (this._activeBuffer.y > this._activeBuffer.scrollBottom || this._activeBuffer.y < this._activeBuffer.scrollTop) {
       return true;
     }
 
-    const row: number = buffer.ybase + buffer.y;
+    const row: number = this._activeBuffer.ybase + this._activeBuffer.y;
 
-    const scrollBottomRowsOffset = this._bufferService.rows - 1 - buffer.scrollBottom;
-    const scrollBottomAbsolute = this._bufferService.rows - 1 + buffer.ybase - scrollBottomRowsOffset + 1;
+    const scrollBottomRowsOffset = this._bufferService.rows - 1 - this._activeBuffer.scrollBottom;
+    const scrollBottomAbsolute = this._bufferService.rows - 1 + this._activeBuffer.ybase - scrollBottomRowsOffset + 1;
     while (param--) {
       // test: echo -e '\e[44m\e[1L\e[0m'
       // blankLine(true) - xterm/linux behavior
-      buffer.lines.splice(scrollBottomAbsolute - 1, 1);
-      buffer.lines.splice(row, 0, buffer.getBlankLine(this._eraseAttrData()));
+      this._activeBuffer.lines.splice(scrollBottomAbsolute - 1, 1);
+      this._activeBuffer.lines.splice(row, 0, this._activeBuffer.getBlankLine(this._eraseAttrData()));
     }
 
-    this._dirtyRowService.markRangeDirty(buffer.y, buffer.scrollBottom);
-    buffer.x = 0; // see https://vt100.net/docs/vt220-rm/chapter4.html - vt220 only?
+    this._dirtyRowService.markRangeDirty(this._activeBuffer.y, this._activeBuffer.scrollBottom);
+    this._activeBuffer.x = 0; // see https://vt100.net/docs/vt220-rm/chapter4.html - vt220 only?
     return true;
   }
 
@@ -1384,27 +1377,24 @@ export class InputHandler extends Disposable implements IInputHandler {
     this._restrictCursor();
     let param = params.params[0] || 1;
 
-    // make buffer local for faster access
-    const buffer = this._bufferService.buffer;
-
-    if (buffer.y > buffer.scrollBottom || buffer.y < buffer.scrollTop) {
+    if (this._activeBuffer.y > this._activeBuffer.scrollBottom || this._activeBuffer.y < this._activeBuffer.scrollTop) {
       return true;
     }
 
-    const row: number = buffer.ybase + buffer.y;
+    const row: number = this._activeBuffer.ybase + this._activeBuffer.y;
 
     let j: number;
-    j = this._bufferService.rows - 1 - buffer.scrollBottom;
-    j = this._bufferService.rows - 1 + buffer.ybase - j;
+    j = this._bufferService.rows - 1 - this._activeBuffer.scrollBottom;
+    j = this._bufferService.rows - 1 + this._activeBuffer.ybase - j;
     while (param--) {
       // test: echo -e '\e[44m\e[1M\e[0m'
       // blankLine(true) - xterm/linux behavior
-      buffer.lines.splice(row, 1);
-      buffer.lines.splice(j, 0, buffer.getBlankLine(this._eraseAttrData()));
+      this._activeBuffer.lines.splice(row, 1);
+      this._activeBuffer.lines.splice(j, 0, this._activeBuffer.getBlankLine(this._eraseAttrData()));
     }
 
-    this._dirtyRowService.markRangeDirty(buffer.y, buffer.scrollBottom);
-    buffer.x = 0; // see https://vt100.net/docs/vt220-rm/chapter4.html - vt220 only?
+    this._dirtyRowService.markRangeDirty(this._activeBuffer.y, this._activeBuffer.scrollBottom);
+    this._activeBuffer.x = 0; // see https://vt100.net/docs/vt220-rm/chapter4.html - vt220 only?
     return true;
   }
 
@@ -1421,15 +1411,15 @@ export class InputHandler extends Disposable implements IInputHandler {
    */
   public insertChars(params: IParams): boolean {
     this._restrictCursor();
-    const line = this._bufferService.buffer.lines.get(this._bufferService.buffer.ybase + this._bufferService.buffer.y);
+    const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y);
     if (line) {
       line.insertCells(
-        this._bufferService.buffer.x,
+        this._activeBuffer.x,
         params.params[0] || 1,
-        this._bufferService.buffer.getNullCell(this._eraseAttrData()),
+        this._activeBuffer.getNullCell(this._eraseAttrData()),
         this._eraseAttrData()
       );
-      this._dirtyRowService.markDirty(this._bufferService.buffer.y);
+      this._dirtyRowService.markDirty(this._activeBuffer.y);
     }
     return true;
   }
@@ -1447,15 +1437,15 @@ export class InputHandler extends Disposable implements IInputHandler {
    */
   public deleteChars(params: IParams): boolean {
     this._restrictCursor();
-    const line = this._bufferService.buffer.lines.get(this._bufferService.buffer.ybase + this._bufferService.buffer.y);
+    const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y);
     if (line) {
       line.deleteCells(
-        this._bufferService.buffer.x,
+        this._activeBuffer.x,
         params.params[0] || 1,
-        this._bufferService.buffer.getNullCell(this._eraseAttrData()),
+        this._activeBuffer.getNullCell(this._eraseAttrData()),
         this._eraseAttrData()
       );
-      this._dirtyRowService.markDirty(this._bufferService.buffer.y);
+      this._dirtyRowService.markDirty(this._activeBuffer.y);
     }
     return true;
   }
@@ -1471,14 +1461,11 @@ export class InputHandler extends Disposable implements IInputHandler {
   public scrollUp(params: IParams): boolean {
     let param = params.params[0] || 1;
 
-    // make buffer local for faster access
-    const buffer = this._bufferService.buffer;
-
     while (param--) {
-      buffer.lines.splice(buffer.ybase + buffer.scrollTop, 1);
-      buffer.lines.splice(buffer.ybase + buffer.scrollBottom, 0, buffer.getBlankLine(this._eraseAttrData()));
+      this._activeBuffer.lines.splice(this._activeBuffer.ybase + this._activeBuffer.scrollTop, 1);
+      this._activeBuffer.lines.splice(this._activeBuffer.ybase + this._activeBuffer.scrollBottom, 0, this._activeBuffer.getBlankLine(this._eraseAttrData()));
     }
-    this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom);
+    this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom);
     return true;
   }
 
@@ -1490,14 +1477,11 @@ export class InputHandler extends Disposable implements IInputHandler {
   public scrollDown(params: IParams): boolean {
     let param = params.params[0] || 1;
 
-    // make buffer local for faster access
-    const buffer = this._bufferService.buffer;
-
     while (param--) {
-      buffer.lines.splice(buffer.ybase + buffer.scrollBottom, 1);
-      buffer.lines.splice(buffer.ybase + buffer.scrollTop, 0, buffer.getBlankLine(DEFAULT_ATTR_DATA));
+      this._activeBuffer.lines.splice(this._activeBuffer.ybase + this._activeBuffer.scrollBottom, 1);
+      this._activeBuffer.lines.splice(this._activeBuffer.ybase + this._activeBuffer.scrollTop, 0, this._activeBuffer.getBlankLine(DEFAULT_ATTR_DATA));
     }
-    this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom);
+    this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom);
     return true;
   }
 
@@ -1520,17 +1504,16 @@ export class InputHandler extends Disposable implements IInputHandler {
    * SL has no effect outside of the scroll margins.
    */
   public scrollLeft(params: IParams): boolean {
-    const buffer = this._bufferService.buffer;
-    if (buffer.y > buffer.scrollBottom || buffer.y < buffer.scrollTop) {
+    if (this._activeBuffer.y > this._activeBuffer.scrollBottom || this._activeBuffer.y < this._activeBuffer.scrollTop) {
       return true;
     }
     const param = params.params[0] || 1;
-    for (let y = buffer.scrollTop; y <= buffer.scrollBottom; ++y) {
-      const line = buffer.lines.get(buffer.ybase + y)!;
-      line.deleteCells(0, param, buffer.getNullCell(this._eraseAttrData()), this._eraseAttrData());
+    for (let y = this._activeBuffer.scrollTop; y <= this._activeBuffer.scrollBottom; ++y) {
+      const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!;
+      line.deleteCells(0, param, this._activeBuffer.getNullCell(this._eraseAttrData()), this._eraseAttrData());
       line.isWrapped = false;
     }
-    this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom);
+    this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom);
     return true;
   }
 
@@ -1554,17 +1537,16 @@ export class InputHandler extends Disposable implements IInputHandler {
    * SL has no effect outside of the scroll margins.
    */
   public scrollRight(params: IParams): boolean {
-    const buffer = this._bufferService.buffer;
-    if (buffer.y > buffer.scrollBottom || buffer.y < buffer.scrollTop) {
+    if (this._activeBuffer.y > this._activeBuffer.scrollBottom || this._activeBuffer.y < this._activeBuffer.scrollTop) {
       return true;
     }
     const param = params.params[0] || 1;
-    for (let y = buffer.scrollTop; y <= buffer.scrollBottom; ++y) {
-      const line = buffer.lines.get(buffer.ybase + y)!;
-      line.insertCells(0, param, buffer.getNullCell(this._eraseAttrData()), this._eraseAttrData());
+    for (let y = this._activeBuffer.scrollTop; y <= this._activeBuffer.scrollBottom; ++y) {
+      const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!;
+      line.insertCells(0, param, this._activeBuffer.getNullCell(this._eraseAttrData()), this._eraseAttrData());
       line.isWrapped = false;
     }
-    this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom);
+    this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom);
     return true;
   }
 
@@ -1578,17 +1560,16 @@ export class InputHandler extends Disposable implements IInputHandler {
    * DECIC has no effect outside the scrolling margins.
    */
   public insertColumns(params: IParams): boolean {
-    const buffer = this._bufferService.buffer;
-    if (buffer.y > buffer.scrollBottom || buffer.y < buffer.scrollTop) {
+    if (this._activeBuffer.y > this._activeBuffer.scrollBottom || this._activeBuffer.y < this._activeBuffer.scrollTop) {
       return true;
     }
     const param = params.params[0] || 1;
-    for (let y = buffer.scrollTop; y <= buffer.scrollBottom; ++y) {
-      const line = this._bufferService.buffer.lines.get(buffer.ybase + y)!;
-      line.insertCells(buffer.x, param, buffer.getNullCell(this._eraseAttrData()), this._eraseAttrData());
+    for (let y = this._activeBuffer.scrollTop; y <= this._activeBuffer.scrollBottom; ++y) {
+      const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!;
+      line.insertCells(this._activeBuffer.x, param, this._activeBuffer.getNullCell(this._eraseAttrData()), this._eraseAttrData());
       line.isWrapped = false;
     }
-    this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom);
+    this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom);
     return true;
   }
 
@@ -1602,17 +1583,16 @@ export class InputHandler extends Disposable implements IInputHandler {
    * DECDC has no effect outside the scrolling margins.
    */
   public deleteColumns(params: IParams): boolean {
-    const buffer = this._bufferService.buffer;
-    if (buffer.y > buffer.scrollBottom || buffer.y < buffer.scrollTop) {
+    if (this._activeBuffer.y > this._activeBuffer.scrollBottom || this._activeBuffer.y < this._activeBuffer.scrollTop) {
       return true;
     }
     const param = params.params[0] || 1;
-    for (let y = buffer.scrollTop; y <= buffer.scrollBottom; ++y) {
-      const line = buffer.lines.get(buffer.ybase + y)!;
-      line.deleteCells(buffer.x, param, buffer.getNullCell(this._eraseAttrData()), this._eraseAttrData());
+    for (let y = this._activeBuffer.scrollTop; y <= this._activeBuffer.scrollBottom; ++y) {
+      const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!;
+      line.deleteCells(this._activeBuffer.x, param, this._activeBuffer.getNullCell(this._eraseAttrData()), this._eraseAttrData());
       line.isWrapped = false;
     }
-    this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom);
+    this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom);
     return true;
   }
 
@@ -1626,15 +1606,15 @@ export class InputHandler extends Disposable implements IInputHandler {
    */
   public eraseChars(params: IParams): boolean {
     this._restrictCursor();
-    const line = this._bufferService.buffer.lines.get(this._bufferService.buffer.ybase + this._bufferService.buffer.y);
+    const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y);
     if (line) {
       line.replaceCells(
-        this._bufferService.buffer.x,
-        this._bufferService.buffer.x + (params.params[0] || 1),
-        this._bufferService.buffer.getNullCell(this._eraseAttrData()),
+        this._activeBuffer.x,
+        this._activeBuffer.x + (params.params[0] || 1),
+        this._activeBuffer.getNullCell(this._eraseAttrData()),
         this._eraseAttrData()
       );
-      this._dirtyRowService.markDirty(this._bufferService.buffer.y);
+      this._dirtyRowService.markDirty(this._activeBuffer.y);
     }
     return true;
   }
@@ -2365,7 +2345,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    * | 6         | Rapidly blinking.                                        | #N      |
    * | 7         | Inverse. Flips foreground and background color.          | #Y      |
    * | 8         | Invisible (hidden).                                      | #Y      |
-   * | 9         | Crossed-out characters.                                  | #N      |
+   * | 9         | Crossed-out characters (strikethrough).                  | #Y      |
    * | 21        | Doubly underlined.                                       | #P[Currently outputs a single underline.] |
    * | 22        | Normal (neither bold nor faint).                         | #Y      |
    * | 23        | No italic.                                               | #Y      |
@@ -2373,7 +2353,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    * | 25        | Steady (not blinking).                                   | #Y      |
    * | 27        | Positive (not inverse).                                  | #Y      |
    * | 28        | Visible (not hidden).                                    | #Y      |
-   * | 29        | Not Crossed-out.                                         | #N      |
+   * | 29        | Not Crossed-out (strikethrough).                         | #Y      |
    * | 30        | Foreground color: Black.                                 | #Y      |
    * | 31        | Foreground color: Red.                                   | #Y      |
    * | 32        | Foreground color: Green.                                 | #Y      |
@@ -2478,6 +2458,9 @@ export class InputHandler extends Disposable implements IInputHandler {
       } else if (p === 8) {
         // invisible
         attr.fg |= FgFlags.INVISIBLE;
+      } else if (p === 9) {
+        // strikethrough
+        attr.fg |= FgFlags.STRIKETHROUGH;
       } else if (p === 2) {
         // dimmed text
         attr.bg |= BgFlags.DIM;
@@ -2503,6 +2486,9 @@ export class InputHandler extends Disposable implements IInputHandler {
       } else if (p === 28) {
         // not invisible
         attr.fg &= ~FgFlags.INVISIBLE;
+      } else if (p === 29) {
+        // not strikethrough
+        attr.fg &= ~FgFlags.STRIKETHROUGH;
       } else if (p === 39) {
         // reset fg
         attr.fg &= ~(Attributes.CM_MASK | Attributes.RGB_MASK);
@@ -2564,8 +2550,8 @@ export class InputHandler extends Disposable implements IInputHandler {
         break;
       case 6:
         // cursor position
-        const y = this._bufferService.buffer.y + 1;
-        const x = this._bufferService.buffer.x + 1;
+        const y = this._activeBuffer.y + 1;
+        const x = this._activeBuffer.x + 1;
         this._coreService.triggerDataEvent(`${C0.ESC}[${y};${x}R`);
         break;
     }
@@ -2579,8 +2565,8 @@ export class InputHandler extends Disposable implements IInputHandler {
     switch (params.params[0]) {
       case 6:
         // cursor position
-        const y = this._bufferService.buffer.y + 1;
-        const x = this._bufferService.buffer.x + 1;
+        const y = this._activeBuffer.y + 1;
+        const x = this._activeBuffer.x + 1;
         this._coreService.triggerDataEvent(`${C0.ESC}[?${y};${x}R`);
         break;
       case 15:
@@ -2625,18 +2611,18 @@ export class InputHandler extends Disposable implements IInputHandler {
   public softReset(params: IParams): boolean {
     this._coreService.isCursorHidden = false;
     this._onRequestSyncScrollBar.fire();
-    this._bufferService.buffer.scrollTop = 0;
-    this._bufferService.buffer.scrollBottom = this._bufferService.rows - 1;
+    this._activeBuffer.scrollTop = 0;
+    this._activeBuffer.scrollBottom = this._bufferService.rows - 1;
     this._curAttrData = DEFAULT_ATTR_DATA.clone();
     this._coreService.reset();
     this._charsetService.reset();
 
     // reset DECSC data
-    this._bufferService.buffer.savedX = 0;
-    this._bufferService.buffer.savedY = this._bufferService.buffer.ybase;
-    this._bufferService.buffer.savedCurAttrData.fg = this._curAttrData.fg;
-    this._bufferService.buffer.savedCurAttrData.bg = this._curAttrData.bg;
-    this._bufferService.buffer.savedCharset = this._charsetService.charset;
+    this._activeBuffer.savedX = 0;
+    this._activeBuffer.savedY = this._activeBuffer.ybase;
+    this._activeBuffer.savedCurAttrData.fg = this._curAttrData.fg;
+    this._activeBuffer.savedCurAttrData.bg = this._curAttrData.bg;
+    this._activeBuffer.savedCharset = this._charsetService.charset;
 
     // reset DECOM
     this._coreService.decPrivateModes.origin = false;
@@ -2699,8 +2685,8 @@ export class InputHandler extends Disposable implements IInputHandler {
     }
 
     if (bottom > top) {
-      this._bufferService.buffer.scrollTop = top - 1;
-      this._bufferService.buffer.scrollBottom = bottom - 1;
+      this._activeBuffer.scrollTop = top - 1;
+      this._activeBuffer.scrollBottom = bottom - 1;
       this._setCursor(0, 0);
     }
     return true;
@@ -2795,11 +2781,11 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #Y ESC  SC   "Save Cursor"   "ESC 7"   "Save cursor position, charmap and text attributes."
    */
   public saveCursor(params?: IParams): boolean {
-    this._bufferService.buffer.savedX = this._bufferService.buffer.x;
-    this._bufferService.buffer.savedY = this._bufferService.buffer.ybase + this._bufferService.buffer.y;
-    this._bufferService.buffer.savedCurAttrData.fg = this._curAttrData.fg;
-    this._bufferService.buffer.savedCurAttrData.bg = this._curAttrData.bg;
-    this._bufferService.buffer.savedCharset = this._charsetService.charset;
+    this._activeBuffer.savedX = this._activeBuffer.x;
+    this._activeBuffer.savedY = this._activeBuffer.ybase + this._activeBuffer.y;
+    this._activeBuffer.savedCurAttrData.fg = this._curAttrData.fg;
+    this._activeBuffer.savedCurAttrData.bg = this._curAttrData.bg;
+    this._activeBuffer.savedCharset = this._charsetService.charset;
     return true;
   }
 
@@ -2813,13 +2799,13 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #Y ESC  RC "Restore Cursor"  "ESC 8"   "Restore cursor position, charmap and text attributes."
    */
   public restoreCursor(params?: IParams): boolean {
-    this._bufferService.buffer.x = this._bufferService.buffer.savedX || 0;
-    this._bufferService.buffer.y = Math.max(this._bufferService.buffer.savedY - this._bufferService.buffer.ybase, 0);
-    this._curAttrData.fg = this._bufferService.buffer.savedCurAttrData.fg;
-    this._curAttrData.bg = this._bufferService.buffer.savedCurAttrData.bg;
+    this._activeBuffer.x = this._activeBuffer.savedX || 0;
+    this._activeBuffer.y = Math.max(this._activeBuffer.savedY - this._activeBuffer.ybase, 0);
+    this._curAttrData.fg = this._activeBuffer.savedCurAttrData.fg;
+    this._curAttrData.bg = this._activeBuffer.savedCurAttrData.bg;
     this._charsetService.charset = (this as any)._savedCharset;
-    if (this._bufferService.buffer.savedCharset) {
-      this._charsetService.charset = this._bufferService.buffer.savedCharset;
+    if (this._activeBuffer.savedCharset) {
+      this._charsetService.charset = this._activeBuffer.savedCharset;
     }
     this._restrictCursor();
     return true;
@@ -2901,7 +2887,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #Y   ESC   NEL   "Next Line"   "ESC E"   "Move the cursor to the beginning of the next row."
    */
   public nextLine(): boolean {
-    this._bufferService.buffer.x = 0;
+    this._activeBuffer.x = 0;
     this.index();
     return true;
   }
@@ -2981,13 +2967,12 @@ export class InputHandler extends Disposable implements IInputHandler {
    */
   public index(): boolean {
     this._restrictCursor();
-    const buffer = this._bufferService.buffer;
-    this._bufferService.buffer.y++;
-    if (buffer.y === buffer.scrollBottom + 1) {
-      buffer.y--;
+    this._activeBuffer.y++;
+    if (this._activeBuffer.y === this._activeBuffer.scrollBottom + 1) {
+      this._activeBuffer.y--;
       this._bufferService.scroll(this._eraseAttrData());
-    } else if (buffer.y >= this._bufferService.rows) {
-      buffer.y = this._bufferService.rows - 1;
+    } else if (this._activeBuffer.y >= this._bufferService.rows) {
+      this._activeBuffer.y = this._bufferService.rows - 1;
     }
     this._restrictCursor();
     return true;
@@ -3004,7 +2989,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    * @vt: #Y   ESC   HTS   "Horizontal Tabulation Set" "ESC H"   "Places a tab stop at the current cursor position."
    */
   public tabSet(): boolean {
-    this._bufferService.buffer.tabs[this._bufferService.buffer.x] = true;
+    this._activeBuffer.tabs[this._activeBuffer.x] = true;
     return true;
   }
 
@@ -3019,17 +3004,16 @@ export class InputHandler extends Disposable implements IInputHandler {
    */
   public reverseIndex(): boolean {
     this._restrictCursor();
-    const buffer = this._bufferService.buffer;
-    if (buffer.y === buffer.scrollTop) {
+    if (this._activeBuffer.y === this._activeBuffer.scrollTop) {
       // possibly move the code below to term.reverseScroll();
       // test: echo -ne '\e[1;1H\e[44m\eM\e[0m'
       // blankLine(true) is xterm/linux behavior
-      const scrollRegionHeight = buffer.scrollBottom - buffer.scrollTop;
-      buffer.lines.shiftElements(buffer.ybase + buffer.y, scrollRegionHeight, 1);
-      buffer.lines.set(buffer.ybase + buffer.y, buffer.getBlankLine(this._eraseAttrData()));
-      this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom);
+      const scrollRegionHeight = this._activeBuffer.scrollBottom - this._activeBuffer.scrollTop;
+      this._activeBuffer.lines.shiftElements(this._activeBuffer.ybase + this._activeBuffer.y, scrollRegionHeight, 1);
+      this._activeBuffer.lines.set(this._activeBuffer.ybase + this._activeBuffer.y, this._activeBuffer.getBlankLine(this._eraseAttrData()));
+      this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom);
     } else {
-      buffer.y--;
+      this._activeBuffer.y--;
       this._restrictCursor(); // quickfix to not run out of bounds
     }
     return true;
@@ -3090,12 +3074,11 @@ export class InputHandler extends Disposable implements IInputHandler {
     cell.fg = this._curAttrData.fg;
     cell.bg = this._curAttrData.bg;
 
-    const buffer = this._bufferService.buffer;
 
     this._setCursor(0, 0);
     for (let yOffset = 0; yOffset < this._bufferService.rows; ++yOffset) {
-      const row = buffer.ybase + buffer.y + yOffset;
-      const line = buffer.lines.get(row);
+      const row = this._activeBuffer.ybase + this._activeBuffer.y + yOffset;
+      const line = this._activeBuffer.lines.get(row);
       if (line) {
         line.fill(cell);
         line.isWrapped = false;

src/common/TestUtils.test.ts

@@ -125,7 +125,7 @@ export class MockOptionsService implements IOptionsService {
   constructor(testOptions?: IPartialTerminalOptions) {
     if (testOptions) {
       for (const key of Object.keys(testOptions)) {
-        this.options[key] = (<any>testOptions)[key];
+        this.options[key] = (testOptions as any)[key];
       }
     }
   }

src/common/Types.d.ts

@@ -7,11 +7,19 @@ import { IFunctionIdentifier, ITerminalOptions as IPublicTerminalOptions } from
 import { IEvent, IEventEmitter } from 'common/EventEmitter';
 import { IDeleteEvent, IInsertEvent } from 'common/CircularList';
 import { IParams } from 'common/parser/Types';
-import { IOptionsService, IUnicodeService } from 'common/services/Services';
+import { ICoreMouseService, ICoreService, IOptionsService, IUnicodeService } from 'common/services/Services';
+import { IBufferSet } from 'common/buffer/Types';
 
 export interface ICoreTerminal {
+  coreMouseService: ICoreMouseService;
+  coreService: ICoreService;
   optionsService: IOptionsService;
   unicodeService: IUnicodeService;
+  buffers: IBufferSet;
+  registerCsiHandler(id: IFunctionIdentifier, callback: (params: IParams) => boolean | Promise<boolean>): IDisposable;
+  registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: IParams) => boolean | Promise<boolean>): IDisposable;
+  registerEscHandler(id: IFunctionIdentifier, callback: () => boolean | Promise<boolean>): IDisposable;
+  registerOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable;
 }
 
 export interface IDisposable {
@@ -117,6 +125,7 @@ export interface IAttributeData {
   isInvisible(): number;
   isItalic(): number;
   isDim(): number;
+  isStrikethrough(): number;
 
   // color modes
   getFgColorMode(): number;

src/common/buffer/AttributeData.ts

@@ -33,13 +33,14 @@ export class AttributeData implements IAttributeData {
   public extended = new ExtendedAttrs();
 
   // flags
-  public isInverse(): number   { return this.fg & FgFlags.INVERSE; }
-  public isBold(): number      { return this.fg & FgFlags.BOLD; }
-  public isUnderline(): number { return this.fg & FgFlags.UNDERLINE; }
-  public isBlink(): number     { return this.fg & FgFlags.BLINK; }
-  public isInvisible(): number { return this.fg & FgFlags.INVISIBLE; }
-  public isItalic(): number    { return this.bg & BgFlags.ITALIC; }
-  public isDim(): number       { return this.bg & BgFlags.DIM; }
+  public isInverse(): number       { return this.fg & FgFlags.INVERSE; }
+  public isBold(): number          { return this.fg & FgFlags.BOLD; }
+  public isUnderline(): number     { return this.fg & FgFlags.UNDERLINE; }
+  public isBlink(): number         { return this.fg & FgFlags.BLINK; }
+  public isInvisible(): number     { return this.fg & FgFlags.INVISIBLE; }
+  public isItalic(): number        { return this.bg & BgFlags.ITALIC; }
+  public isDim(): number           { return this.bg & BgFlags.DIM; }
+  public isStrikethrough(): number { return this.fg & FgFlags.STRIKETHROUGH; }
 
   // color modes
   public getFgColorMode(): number { return this.fg & Attributes.CM_MASK; }

src/common/buffer/BufferRange.test.ts

@@ -16,10 +16,10 @@ describe('BufferRange', () => {
       assert.throws(() => getRangeLength(createRange(1, 3, 1, 1), 0));
     });
     it('should get range multiple lines', () => {
-      assert.equal(getRangeLength(createRange(1, 1, 4, 5), 5), 23);
+      assert.equal(getRangeLength(createRange(1, 1, 4, 5), 5), 24);
     });
     it('should get range for end line right after start line', () => {
-      assert.equal(getRangeLength(createRange(1, 1, 7, 2), 5), 11);
+      assert.equal(getRangeLength(createRange(1, 1, 7, 2), 5), 12);
     });
   });
 });

src/common/buffer/BufferRange.ts

@@ -5,12 +5,9 @@
 
 import { IBufferRange } from 'xterm';
 
-export function getRangeLength(range: IBufferRange, cols: number): number {
-  if (range.start.y === range.end.y) {
-    return range.end.x - range.start.x + 1;
-  }
+export function getRangeLength(range: IBufferRange, bufferCols: number): number {
   if (range.start.y > range.end.y) {
     throw new Error(`Buffer range end (${range.end.x}, ${range.end.y}) cannot be before start (${range.start.x}, ${range.start.y})`);
   }
-  return cols * (range.end.y - range.start.y - 1) + cols - range.start.x + range.end.x;
+  return bufferCols * (range.end.y - range.start.y) + (range.end.x - range.start.x + 1);
 }

src/common/buffer/BufferSet.ts

@@ -42,6 +42,10 @@ export class BufferSet extends Disposable implements IBufferSet {
     // See http://invisible-island.net/xterm/ctlseqs/ctlseqs.html#h2-The-Alternate-Screen-Buffer
     this._alt = new Buffer(false, this._optionsService, this._bufferService);
     this._activeBuffer = this._normal;
+    this._onBufferActivate.fire({
+      activeBuffer: this._normal,
+      inactiveBuffer: this._alt
+    });
 
     this.setupTabStops();
   }

src/common/buffer/Constants.ts

@@ -110,13 +110,14 @@ export const enum Attributes {
 
 export const enum FgFlags {
   /**
-   * bit 27..31 (32th bit unused)
+   * bit 27..32
    */
   INVERSE = 0x4000000,
   BOLD = 0x8000000,
   UNDERLINE = 0x10000000,
   BLINK = 0x20000000,
-  INVISIBLE = 0x40000000
+  INVISIBLE = 0x40000000,
+  STRIKETHROUGH = 0x80000000,
 }
 
 export const enum BgFlags {

src/common/public/AddonManager.ts

@@ -31,7 +31,7 @@ export class AddonManager implements IDisposable {
     };
     this._addons.push(loadedAddon);
     instance.dispose = () => this._wrappedAddonDispose(loadedAddon);
-    instance.activate(<any>terminal);
+    instance.activate(terminal as any);
   }
 
   private _wrappedAddonDispose(loadedAddon: ILoadedAddon): void {

src/common/public/BufferApiView.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2021 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IBuffer as IBufferApi, IBufferLine as IBufferLineApi, IBufferCell as IBufferCellApi } from 'xterm';
+import { IBuffer } from 'common/buffer/Types';
+import { BufferLineApiView } from 'common/public/BufferLineApiView';
+import { CellData } from 'common/buffer/CellData';
+
+export class BufferApiView implements IBufferApi {
+  constructor(
+    private _buffer: IBuffer,
+    public readonly type: 'normal' | 'alternate'
+  ) { }
+
+  public init(buffer: IBuffer): BufferApiView {
+    this._buffer = buffer;
+    return this;
+  }
+
+  public get cursorY(): number { return this._buffer.y; }
+  public get cursorX(): number { return this._buffer.x; }
+  public get viewportY(): number { return this._buffer.ydisp; }
+  public get baseY(): number { return this._buffer.ybase; }
+  public get length(): number { return this._buffer.lines.length; }
+  public getLine(y: number): IBufferLineApi | undefined {
+    const line = this._buffer.lines.get(y);
+    if (!line) {
+      return undefined;
+    }
+    return new BufferLineApiView(line);
+  }
+  public getNullCell(): IBufferCellApi { return new CellData(); }
+}

src/common/public/BufferLineApiView.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2021 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { CellData } from 'common/buffer/CellData';
+import { IBufferLine, ICellData } from 'common/Types';
+import { IBufferCell as IBufferCellApi, IBufferLine as IBufferLineApi } from 'xterm';
+
+export class BufferLineApiView implements IBufferLineApi {
+  constructor(private _line: IBufferLine) { }
+
+  public get isWrapped(): boolean { return this._line.isWrapped; }
+  public get length(): number { return this._line.length; }
+  public getCell(x: number, cell?: IBufferCellApi): IBufferCellApi | undefined {
+    if (x < 0 || x >= this._line.length) {
+      return undefined;
+    }
+
+    if (cell) {
+      this._line.loadCell(x, cell as ICellData);
+      return cell;
+    }
+    return this._line.loadCell(x, new CellData());
+  }
+  public translateToString(trimRight?: boolean, startColumn?: number, endColumn?: number): string {
+    return this._line.translateToString(trimRight, startColumn, endColumn);
+  }
+}

src/common/public/BufferNamespaceApi.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2021 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IBuffer as IBufferApi, IBufferNamespace as IBufferNamespaceApi } from 'xterm';
+import { BufferApiView } from 'common/public/BufferApiView';
+import { IEvent, EventEmitter } from 'common/EventEmitter';
+import { ICoreTerminal } from 'common/Types';
+
+export class BufferNamespaceApi implements IBufferNamespaceApi {
+  private _normal: BufferApiView;
+  private _alternate: BufferApiView;
+  private _onBufferChange = new EventEmitter<IBufferApi>();
+  public get onBufferChange(): IEvent<IBufferApi> { return this._onBufferChange.event; }
+
+  constructor(private _core: ICoreTerminal) {
+    this._normal = new BufferApiView(this._core.buffers.normal, 'normal');
+    this._alternate = new BufferApiView(this._core.buffers.alt, 'alternate');
+    this._core.buffers.onBufferActivate(() => this._onBufferChange.fire(this.active));
+  }
+  public get active(): IBufferApi {
+    if (this._core.buffers.active === this._core.buffers.normal) { return this.normal; }
+    if (this._core.buffers.active === this._core.buffers.alt) { return this.alternate; }
+    throw new Error('Active buffer is neither normal nor alternate');
+  }
+  public get normal(): IBufferApi {
+    return this._normal.init(this._core.buffers.normal);
+  }
+  public get alternate(): IBufferApi {
+    return this._alternate.init(this._core.buffers.alt);
+  }
+}

src/common/public/ParserApi.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2021 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IParams } from 'common/parser/Types';
+import { IDisposable, IFunctionIdentifier, IParser } from 'xterm';
+import { ICoreTerminal } from 'common/Types';
+
+export class ParserApi implements IParser {
+  constructor(private _core: ICoreTerminal) { }
+
+  public registerCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean | Promise<boolean>): IDisposable {
+    return this._core.registerCsiHandler(id, (params: IParams) => callback(params.toArray()));
+  }
+  public addCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean | Promise<boolean>): IDisposable {
+    return this.registerCsiHandler(id, callback);
+  }
+  public registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean | Promise<boolean>): IDisposable {
+    return this._core.registerDcsHandler(id, (data: string, params: IParams) => callback(data, params.toArray()));
+  }
+  public addDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean | Promise<boolean>): IDisposable {
+    return this.registerDcsHandler(id, callback);
+  }
+  public registerEscHandler(id: IFunctionIdentifier, handler: () => boolean | Promise<boolean>): IDisposable {
+    return this._core.registerEscHandler(id, handler);
+  }
+  public addEscHandler(id: IFunctionIdentifier, handler: () => boolean | Promise<boolean>): IDisposable {
+    return this.registerEscHandler(id, handler);
+  }
+  public registerOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
+    return this._core.registerOscHandler(ident, callback);
+  }
+  public addOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
+    return this.registerOscHandler(ident, callback);
+  }
+}

src/common/public/UnicodeApi.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2021 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICoreTerminal } from 'common/Types';
+import { IUnicodeHandling, IUnicodeVersionProvider } from 'xterm';
+
+export class UnicodeApi implements IUnicodeHandling {
+  constructor(private _core: ICoreTerminal) { }
+
+  public register(provider: IUnicodeVersionProvider): void {
+    this._core.unicodeService.register(provider);
+  }
+
+  public get versions(): string[] {
+    return this._core.unicodeService.versions;
+  }
+
+  public get activeVersion(): string {
+    return this._core.unicodeService.activeVersion;
+  }
+
+  public set activeVersion(version: string) {
+    this._core.unicodeService.activeVersion = version;
+  }
+}

src/common/services/BufferService.ts

@@ -36,8 +36,8 @@ export class BufferService extends Disposable implements IBufferService {
     @IOptionsService private _optionsService: IOptionsService
   ) {
     super();
-    this.cols = Math.max(_optionsService.options.cols, MINIMUM_COLS);
-    this.rows = Math.max(_optionsService.options.rows, MINIMUM_ROWS);
+    this.cols = Math.max(_optionsService.options.cols || 0, MINIMUM_COLS);
+    this.rows = Math.max(_optionsService.options.rows || 0, MINIMUM_ROWS);
     this.buffers = new BufferSet(_optionsService, this);
   }
 

src/common/services/OptionsService.test.ts

@@ -15,6 +15,16 @@ describe('OptionsService', () => {
     afterEach(() => {
       console.error = originalError;
     });
+    it('uses default value if invalid constructor option values passed for cols/rows', () => {
+      const optionsService = new OptionsService({ cols: undefined, rows: undefined });
+      assert.equal(optionsService.getOption('rows'), DEFAULT_OPTIONS.rows);
+      assert.equal(optionsService.getOption('cols'), DEFAULT_OPTIONS.cols);
+    });
+    it('uses values from constructor option values if correctly passed', () => {
+      const optionsService = new OptionsService({ cols: 80, rows: 25 });
+      assert.equal(optionsService.getOption('rows'), 25);
+      assert.equal(optionsService.getOption('cols'), 80);
+    });
     it('uses default value if invalid constructor option value passed', () => {
       assert.equal(new OptionsService({tabStopWidth: 0}).getOption('tabStopWidth'), DEFAULT_OPTIONS.tabStopWidth);
     });

src/common/services/OptionsService.ts

@@ -21,6 +21,7 @@ export const DEFAULT_OPTIONS: ITerminalOptions = Object.freeze({
   cursorBlink: false,
   cursorStyle: 'block',
   cursorWidth: 1,
+  customGlyphs: true,
   bellSound:  DEFAULT_BELL_SOUND,
   bellStyle: 'none',
   drawBoldTextInBrightColors: true,
@@ -148,6 +149,11 @@ export class OptionsService implements IOptionsService {
         if (value <= 0) {
           throw new Error(`${key} cannot be less than or equal to 0, value: ${value}`);
         }
+      case 'rows':
+      case 'cols':
+        if (!value && value !== 0) {
+          throw new Error(`${key} must be numeric, value: ${value}`);
+        }
         break;
     }
     return value;

src/common/services/Services.ts

@@ -244,6 +244,7 @@ export interface ITerminalOptions {
   cursorBlink: boolean;
   cursorStyle: 'block' | 'underline' | 'bar';
   cursorWidth: number;
+  customGlyphs: boolean;
   disableStdin: boolean;
   drawBoldTextInBrightColors: boolean;
   fastScrollModifier: 'alt' | 'ctrl' | 'shift' | undefined;

src/headless/Terminal.ts

@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * @license MIT
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ *
+ * Terminal Emulation References:
+ *   http://vt100.net/
+ *   http://invisible-island.net/xterm/ctlseqs/ctlseqs.txt
+ *   http://invisible-island.net/xterm/ctlseqs/ctlseqs.html
+ *   http://invisible-island.net/vttest/
+ *   http://www.inwap.com/pdp10/ansicode.txt
+ *   http://linux.die.net/man/4/console_codes
+ *   http://linux.die.net/man/7/urxvt
+ */
+
+import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
+import { IBuffer } from 'common/buffer/Types';
+import { CoreTerminal } from 'common/CoreTerminal';
+import { EventEmitter, forwardEvent, IEvent } from 'common/EventEmitter';
+import { ITerminalOptions as IInitializedTerminalOptions } from 'common/services/Services';
+import { IMarker, ITerminalOptions, ScrollSource } from 'common/Types';
+
+export class Terminal extends CoreTerminal {
+  // TODO: We should remove options once components adopt optionsService
+  public get options(): IInitializedTerminalOptions { return this.optionsService.options; }
+
+  private _onBell = new EventEmitter<void>();
+  public get onBell(): IEvent<void> { return this._onBell.event; }
+  private _onCursorMove = new EventEmitter<void>();
+  public get onCursorMove(): IEvent<void> { return this._onCursorMove.event; }
+  private _onTitleChange = new EventEmitter<string>();
+  public get onTitleChange(): IEvent<string> { return this._onTitleChange.event; }
+
+  private _onA11yCharEmitter = new EventEmitter<string>();
+  public get onA11yChar(): IEvent<string> { return this._onA11yCharEmitter.event; }
+  private _onA11yTabEmitter = new EventEmitter<number>();
+  public get onA11yTab(): IEvent<number> { return this._onA11yTabEmitter.event; }
+
+  /**
+   * Creates a new `Terminal` object.
+   *
+   * @param options An object containing a set of options, the available options are:
+   *   - `cursorBlink` (boolean): Whether the terminal cursor blinks
+   *   - `cols` (number): The number of columns of the terminal (horizontal size)
+   *   - `rows` (number): The number of rows of the terminal (vertical size)
+   *
+   * @public
+   * @class Xterm Xterm
+   * @alias module:xterm/src/xterm
+   */
+  constructor(
+    options: ITerminalOptions = {}
+  ) {
+    super(options);
+
+    this._setup();
+
+    // Setup InputHandler listeners
+    this.register(this._inputHandler.onRequestBell(() => this.bell()));
+    this.register(this._inputHandler.onRequestReset(() => this.reset()));
+    this.register(forwardEvent(this._inputHandler.onCursorMove, this._onCursorMove));
+    this.register(forwardEvent(this._inputHandler.onTitleChange, this._onTitleChange));
+    this.register(forwardEvent(this._inputHandler.onA11yChar, this._onA11yCharEmitter));
+    this.register(forwardEvent(this._inputHandler.onA11yTab, this._onA11yTabEmitter));
+  }
+
+  public dispose(): void {
+    if (this._isDisposed) {
+      return;
+    }
+    super.dispose();
+    this.write = () => { };
+  }
+
+  /**
+   * Convenience property to active buffer.
+   */
+  public get buffer(): IBuffer {
+    return this.buffers.active;
+  }
+
+  protected _updateOptions(key: string): void {
+    super._updateOptions(key);
+
+    // TODO: These listeners should be owned by individual components
+    switch (key) {
+      case 'tabStopWidth': this.buffers.setupTabStops(); break;
+    }
+  }
+
+  // TODO: Support paste here?
+
+  public get markers(): IMarker[] {
+    return this.buffer.markers;
+  }
+
+  public addMarker(cursorYOffset: number): IMarker | undefined {
+    // Disallow markers on the alt buffer
+    if (this.buffer !== this.buffers.normal) {
+      return;
+    }
+
+    return this.buffer.addMarker(this.buffer.ybase + this.buffer.y + cursorYOffset);
+  }
+
+  public bell(): void {
+    this._onBell.fire();
+  }
+
+  /**
+   * Resizes the terminal.
+   *
+   * @param x The number of columns to resize to.
+   * @param y The number of rows to resize to.
+   */
+  public resize(x: number, y: number): void {
+    if (x === this.cols && y === this.rows) {
+      return;
+    }
+
+    super.resize(x, y);
+  }
+
+  /**
+   * Clear the entire buffer, making the prompt line the new first line.
+   */
+  public clear(): void {
+    if (this.buffer.ybase === 0 && this.buffer.y === 0) {
+      // Don't clear if it's already clear
+      return;
+    }
+    this.buffer.lines.set(0, this.buffer.lines.get(this.buffer.ybase + this.buffer.y)!);
+    this.buffer.lines.length = 1;
+    this.buffer.ydisp = 0;
+    this.buffer.ybase = 0;
+    this.buffer.y = 0;
+    for (let i = 1; i < this.rows; i++) {
+      this.buffer.lines.push(this.buffer.getBlankLine(DEFAULT_ATTR_DATA));
+    }
+    this._onScroll.fire({ position: this.buffer.ydisp, source: ScrollSource.TERMINAL });
+  }
+
+  /**
+   * Reset terminal.
+   * Note: Calling this directly from JS is synchronous but does not clear
+   * input buffers and does not reset the parser, thus the terminal will
+   * continue to apply pending input data.
+   * If you need in band reset (synchronous with input data) consider
+   * using DECSTR (soft reset, CSI ! p) or RIS instead (hard reset, ESC c).
+   */
+  public reset(): void {
+    /**
+     * Since _setup handles a full terminal creation, we have to carry forward
+     * a few things that should not reset.
+     */
+    this.options.rows = this.rows;
+    this.options.cols = this.cols;
+
+    this._setup();
+    super.reset();
+  }
+}