@xterm/xterm 5.4.0-beta.1

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@xterm/xterm",
+  "description": "Full xterm terminal, in your browser",
+  "version": "5.4.0-beta.1",
+  "main": "lib/xterm.js",
+  "style": "css/xterm.css",
+  "types": "typings/xterm.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js",
+  "license": "MIT",
+  "keywords": [
+    "cli",
+    "command-line",
+    "console",
+    "pty",
+    "shell",
+    "ssh",
+    "styles",
+    "terminal-emulator",
+    "terminal",
+    "tty",
+    "vt100",
+    "webgl",
+    "xterm"
+  ],
+  "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-server-only": "node demo/start-server-only",
+    "build-demo": "webpack --config ./demo/webpack.config.js",
+    "lint": "eslint -c .eslintrc.json --max-warnings 0 --ext .ts src/ addons/",
+    "lint-api": "eslint --no-eslintrc -c .eslintrc.json.typings --max-warnings 0 --no-ignore --ext .d.ts typings/",
+    "test": "npm run test-unit",
+    "posttest": "npm run lint",
+    "test-api": "npm run test-api-chromium",
+    "test-api-chromium": "node ./bin/test_api.js --browser=chromium --timeout=20000",
+    "test-api-firefox": "node ./bin/test_api.js --browser=firefox --timeout=20000",
+    "test-api-webkit": "node ./bin/test_api.js --browser=webkit --timeout=20000",
+    "test-playwright": "node ./bin/test_playwright.js --workers=75%",
+    "test-playwright-chromium": "node ./bin/test_playwright.js --workers=75% \"--project=Chrome Stable\"",
+    "test-playwright-firefox": "node ./bin/test_playwright.js --workers=75% \"--project=Firefox Stable\"",
+    "test-playwright-webkit": "node ./bin/test_playwright.js --workers=75% \"--project=WebKit\"",
+    "test-playwright-debug": "node ./bin/test_playwright.js  --workers=1 --headed --timeout=30000",
+    "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",
+    "install-addons": "node ./bin/install-addons.js",
+    "presetup": "npm run install-addons",
+    "setup": "npm run build",
+    "prepublishOnly": "npm run package",
+    "watch": "tsc -b -w ./tsconfig.all.json --preserveWatchOutput",
+    "benchmark": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json",
+    "benchmark-baseline": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --baseline out-test/benchmark/test/benchmark/*benchmark.js",
+    "benchmark-eval": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --eval out-test/benchmark/test/benchmark/*benchmark.js",
+    "clean": "rm -rf lib out addons/*/lib addons/*/out",
+    "vtfeatures": "node bin/extract_vtfeatures.js src/**/*.ts src/*.ts"
+  },
+  "devDependencies": {
+    "@lunapaint/png-codec": "^0.2.0",
+    "@playwright/test": "^1.37.1",
+    "@types/chai": "^4.2.22",
+    "@types/debug": "^4.1.7",
+    "@types/deep-equal": "^1.0.1",
+    "@types/express": "4",
+    "@types/express-ws": "^3.0.1",
+    "@types/glob": "^7.2.0",
+    "@types/jsdom": "^16.2.13",
+    "@types/mocha": "^9.0.0",
+    "@types/node": "^18.16.0",
+    "@types/utf8": "^3.0.0",
+    "@types/webpack": "^5.28.0",
+    "@types/ws": "^8.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.00",
+    "@typescript-eslint/parser": "^6.2.00",
+    "chai": "^4.3.4",
+    "cross-env": "^7.0.3",
+    "deep-equal": "^2.0.5",
+    "eslint": "^8.45.0",
+    "eslint-plugin-jsdoc": "^39.3.6",
+    "express": "^4.17.1",
+    "express-ws": "^5.0.2",
+    "glob": "^7.2.0",
+    "jsdom": "^18.0.1",
+    "mocha": "^10.1.0",
+    "mustache": "^4.2.0",
+    "node-pty": "1.1.0-beta5",
+    "nyc": "^15.1.0",
+    "source-map-loader": "^3.0.0",
+    "source-map-support": "^0.5.20",
+    "ts-loader": "^9.3.1",
+    "typescript": "^5.1.6",
+    "utf8": "^3.0.0",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.1",
+    "ws": "^8.2.3",
+    "xterm-benchmark": "^0.3.1"
+  }
+}

package/src/browser/AccessibilityManager.ts

@@ -0,0 +1,278 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import * as Strings from 'browser/LocalizableStrings';
+import { ITerminal, IRenderDebouncer } from 'browser/Types';
+import { TimeBasedDebouncer } from 'browser/TimeBasedDebouncer';
+import { Disposable, toDisposable } from 'common/Lifecycle';
+import { ICoreBrowserService, IRenderService } from 'browser/services/Services';
+import { IBuffer } from 'common/buffer/Types';
+import { IInstantiationService } from 'common/services/Services';
+
+const MAX_ROWS_TO_READ = 20;
+
+const enum BoundaryPosition {
+  TOP,
+  BOTTOM
+}
+
+export class AccessibilityManager extends Disposable {
+  private _accessibilityContainer: HTMLElement;
+
+  private _rowContainer: HTMLElement;
+  private _rowElements: HTMLElement[];
+
+  private _liveRegion: HTMLElement;
+  private _liveRegionLineCount: number = 0;
+  private _liveRegionDebouncer: IRenderDebouncer;
+
+  private _topBoundaryFocusListener: (e: FocusEvent) => void;
+  private _bottomBoundaryFocusListener: (e: FocusEvent) => void;
+
+  /**
+   * This queue has a character pushed to it for keys that are pressed, if the
+   * next character added to the terminal is equal to the key char then it is
+   * not announced (added to live region) because it has already been announced
+   * by the textarea event (which cannot be canceled). There are some race
+   * condition cases if there is typing while data is streaming, but this covers
+   * the main case of typing into the prompt and inputting the answer to a
+   * question (Y/N, etc.).
+   */
+  private _charsToConsume: string[] = [];
+
+  private _charsToAnnounce: string = '';
+
+  constructor(
+    private readonly _terminal: ITerminal,
+    @IInstantiationService instantiationService: IInstantiationService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
+    @IRenderService private readonly _renderService: IRenderService
+  ) {
+    super();
+    this._accessibilityContainer = this._coreBrowserService.mainDocument.createElement('div');
+    this._accessibilityContainer.classList.add('xterm-accessibility');
+
+    this._rowContainer = this._coreBrowserService.mainDocument.createElement('div');
+    this._rowContainer.setAttribute('role', 'list');
+    this._rowContainer.classList.add('xterm-accessibility-tree');
+    this._rowElements = [];
+    for (let i = 0; i < this._terminal.rows; i++) {
+      this._rowElements[i] = this._createAccessibilityTreeNode();
+      this._rowContainer.appendChild(this._rowElements[i]);
+    }
+
+    this._topBoundaryFocusListener = e => this._handleBoundaryFocus(e, BoundaryPosition.TOP);
+    this._bottomBoundaryFocusListener = e => this._handleBoundaryFocus(e, BoundaryPosition.BOTTOM);
+    this._rowElements[0].addEventListener('focus', this._topBoundaryFocusListener);
+    this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);
+
+    this._refreshRowsDimensions();
+    this._accessibilityContainer.appendChild(this._rowContainer);
+
+    this._liveRegion = this._coreBrowserService.mainDocument.createElement('div');
+    this._liveRegion.classList.add('live-region');
+    this._liveRegion.setAttribute('aria-live', 'assertive');
+    this._accessibilityContainer.appendChild(this._liveRegion);
+    this._liveRegionDebouncer = this.register(new TimeBasedDebouncer(this._renderRows.bind(this)));
+
+    if (!this._terminal.element) {
+      throw new Error('Cannot enable accessibility before Terminal.open');
+    }
+    this._terminal.element.insertAdjacentElement('afterbegin', this._accessibilityContainer);
+
+    this.register(this._terminal.onResize(e => this._handleResize(e.rows)));
+    this.register(this._terminal.onRender(e => this._refreshRows(e.start, e.end)));
+    this.register(this._terminal.onScroll(() => this._refreshRows()));
+    // Line feed is an issue as the prompt won't be read out after a command is run
+    this.register(this._terminal.onA11yChar(char => this._handleChar(char)));
+    this.register(this._terminal.onLineFeed(() => this._handleChar('\n')));
+    this.register(this._terminal.onA11yTab(spaceCount => this._handleTab(spaceCount)));
+    this.register(this._terminal.onKey(e => this._handleKey(e.key)));
+    this.register(this._terminal.onBlur(() => this._clearLiveRegion()));
+    this.register(this._renderService.onDimensionsChange(() => this._refreshRowsDimensions()));
+    this.register(this._coreBrowserService.onDprChange(() => this._refreshRowsDimensions()));
+
+    this._refreshRows();
+    this.register(toDisposable(() => {
+      this._accessibilityContainer.remove();
+      this._rowElements.length = 0;
+    }));
+  }
+
+  private _handleTab(spaceCount: number): void {
+    for (let i = 0; i < spaceCount; i++) {
+      this._handleChar(' ');
+    }
+  }
+
+  private _handleChar(char: string): void {
+    if (this._liveRegionLineCount < MAX_ROWS_TO_READ + 1) {
+      if (this._charsToConsume.length > 0) {
+        // Have the screen reader ignore the char if it was just input
+        const shiftedChar = this._charsToConsume.shift();
+        if (shiftedChar !== char) {
+          this._charsToAnnounce += char;
+        }
+      } else {
+        this._charsToAnnounce += char;
+      }
+
+      if (char === '\n') {
+        this._liveRegionLineCount++;
+        if (this._liveRegionLineCount === MAX_ROWS_TO_READ + 1) {
+          this._liveRegion.textContent += Strings.tooMuchOutput;
+        }
+      }
+    }
+  }
+
+  private _clearLiveRegion(): void {
+    this._liveRegion.textContent = '';
+    this._liveRegionLineCount = 0;
+  }
+
+  private _handleKey(keyChar: string): void {
+    this._clearLiveRegion();
+    // Only add the char if there is no control character.
+    if (!/\p{Control}/u.test(keyChar)) {
+      this._charsToConsume.push(keyChar);
+    }
+  }
+
+  private _refreshRows(start?: number, end?: number): void {
+    this._liveRegionDebouncer.refresh(start, end, this._terminal.rows);
+  }
+
+  private _renderRows(start: number, end: number): void {
+    const buffer: IBuffer = this._terminal.buffer;
+    const setSize = buffer.lines.length.toString();
+    for (let i = start; i <= end; i++) {
+      const lineData = buffer.translateBufferLineToString(buffer.ydisp + i, true);
+      const posInSet = (buffer.ydisp + i + 1).toString();
+      const element = this._rowElements[i];
+      if (element) {
+        if (lineData.length === 0) {
+          element.innerText = '\u00a0';
+        } else {
+          element.textContent = lineData;
+        }
+        element.setAttribute('aria-posinset', posInSet);
+        element.setAttribute('aria-setsize', setSize);
+      }
+    }
+    this._announceCharacters();
+  }
+
+  private _announceCharacters(): void {
+    if (this._charsToAnnounce.length === 0) {
+      return;
+    }
+    this._liveRegion.textContent += this._charsToAnnounce;
+    this._charsToAnnounce = '';
+  }
+
+  private _handleBoundaryFocus(e: FocusEvent, position: BoundaryPosition): void {
+    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
+    const posInSet = boundaryElement.getAttribute('aria-posinset');
+    const lastRowPos = position === BoundaryPosition.TOP ? '1' : `${this._terminal.buffer.lines.length}`;
+    if (posInSet === lastRowPos) {
+      return;
+    }
+
+    // Don't scroll when the last focused item was not the second row (focus is going the other
+    // direction)
+    if (e.relatedTarget !== beforeBoundaryElement) {
+      return;
+    }
+
+    // Remove old boundary element from array
+    let topBoundaryElement: HTMLElement;
+    let bottomBoundaryElement: HTMLElement;
+    if (position === BoundaryPosition.TOP) {
+      topBoundaryElement = boundaryElement;
+      bottomBoundaryElement = this._rowElements.pop()!;
+      this._rowContainer.removeChild(bottomBoundaryElement);
+    } else {
+      topBoundaryElement = this._rowElements.shift()!;
+      bottomBoundaryElement = boundaryElement;
+      this._rowContainer.removeChild(topBoundaryElement);
+    }
+
+    // Remove listeners from old boundary elements
+    topBoundaryElement.removeEventListener('focus', this._topBoundaryFocusListener);
+    bottomBoundaryElement.removeEventListener('focus', this._bottomBoundaryFocusListener);
+
+    // Add new element to array/DOM
+    if (position === BoundaryPosition.TOP) {
+      const newElement = this._createAccessibilityTreeNode();
+      this._rowElements.unshift(newElement);
+      this._rowContainer.insertAdjacentElement('afterbegin', newElement);
+    } else {
+      const newElement = this._createAccessibilityTreeNode();
+      this._rowElements.push(newElement);
+      this._rowContainer.appendChild(newElement);
+    }
+
+    // Add listeners to new boundary elements
+    this._rowElements[0].addEventListener('focus', this._topBoundaryFocusListener);
+    this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);
+
+    // Scroll up
+    this._terminal.scrollLines(position === BoundaryPosition.TOP ? -1 : 1);
+
+    // Focus new boundary before element
+    this._rowElements[position === BoundaryPosition.TOP ? 1 : this._rowElements.length - 2].focus();
+
+    // Prevent the standard behavior
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+
+  private _handleResize(rows: number): void {
+    // Remove bottom boundary listener
+    this._rowElements[this._rowElements.length - 1].removeEventListener('focus', this._bottomBoundaryFocusListener);
+
+    // Grow rows as required
+    for (let i = this._rowContainer.children.length; i < this._terminal.rows; i++) {
+      this._rowElements[i] = this._createAccessibilityTreeNode();
+      this._rowContainer.appendChild(this._rowElements[i]);
+    }
+    // Shrink rows as required
+    while (this._rowElements.length > rows) {
+      this._rowContainer.removeChild(this._rowElements.pop()!);
+    }
+
+    // Add bottom boundary listener
+    this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);
+
+    this._refreshRowsDimensions();
+  }
+
+  private _createAccessibilityTreeNode(): HTMLElement {
+    const element = this._coreBrowserService.mainDocument.createElement('div');
+    element.setAttribute('role', 'listitem');
+    element.tabIndex = -1;
+    this._refreshRowDimensions(element);
+    return element;
+  }
+  private _refreshRowsDimensions(): void {
+    if (!this._renderService.dimensions.css.cell.height) {
+      return;
+    }
+    this._accessibilityContainer.style.width = `${this._renderService.dimensions.css.canvas.width}px`;
+    if (this._rowElements.length !== this._terminal.rows) {
+      this._handleResize(this._terminal.rows);
+    }
+    for (let i = 0; i < this._terminal.rows; i++) {
+      this._refreshRowDimensions(this._rowElements[i]);
+    }
+  }
+  private _refreshRowDimensions(element: HTMLElement): void {
+    element.style.height = `${this._renderService.dimensions.css.cell.height}px`;
+  }
+}

package/src/browser/Clipboard.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ISelectionService } from 'browser/services/Services';
+import { ICoreService, IOptionsService } from 'common/services/Services';
+
+/**
+ * Prepares text to be pasted into the terminal by normalizing the line endings
+ * @param text The pasted text that needs processing before inserting into the terminal
+ */
+export function prepareTextForTerminal(text: string): string {
+  return text.replace(/\r?\n/g, '\r');
+}
+
+/**
+ * Bracket text for paste, if necessary, as per https://cirw.in/blog/bracketed-paste
+ * @param text The pasted text to bracket
+ */
+export function bracketTextForPaste(text: string, bracketedPasteMode: boolean): string {
+  if (bracketedPasteMode) {
+    return '\x1b[200~' + text + '\x1b[201~';
+  }
+  return text;
+}
+
+/**
+ * Binds copy functionality to the given terminal.
+ * @param ev The original copy event to be handled
+ */
+export function copyHandler(ev: ClipboardEvent, selectionService: ISelectionService): void {
+  if (ev.clipboardData) {
+    ev.clipboardData.setData('text/plain', selectionService.selectionText);
+  }
+  // Prevent or the original text will be copied.
+  ev.preventDefault();
+}
+
+/**
+ * Redirect the clipboard's data to the terminal's input handler.
+ */
+export function handlePasteEvent(ev: ClipboardEvent, textarea: HTMLTextAreaElement, coreService: ICoreService, optionsService: IOptionsService): void {
+  ev.stopPropagation();
+  if (ev.clipboardData) {
+    const text = ev.clipboardData.getData('text/plain');
+    paste(text, textarea, coreService, optionsService);
+  }
+}
+
+export function paste(text: string, textarea: HTMLTextAreaElement, coreService: ICoreService, optionsService: IOptionsService): void {
+  text = prepareTextForTerminal(text);
+  text = bracketTextForPaste(text, coreService.decPrivateModes.bracketedPasteMode && optionsService.rawOptions.ignoreBracketedPasteMode !== true);
+  coreService.triggerDataEvent(text, true);
+  textarea.value = '';
+}
+
+/**
+ * Moves the textarea under the mouse cursor and focuses it.
+ * @param ev The original right click event to be handled.
+ * @param textarea The terminal's textarea.
+ */
+export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextAreaElement, screenElement: HTMLElement): void {
+
+  // Calculate textarea position relative to the screen element
+  const pos = screenElement.getBoundingClientRect();
+  const left = ev.clientX - pos.left - 10;
+  const top = ev.clientY - pos.top - 10;
+
+  // Bring textarea at the cursor position
+  textarea.style.width = '20px';
+  textarea.style.height = '20px';
+  textarea.style.left = `${left}px`;
+  textarea.style.top = `${top}px`;
+  textarea.style.zIndex = '1000';
+
+  textarea.focus();
+}
+
+/**
+ * Bind to right-click event and allow right-click copy and paste.
+ */
+export function rightClickHandler(ev: MouseEvent, textarea: HTMLTextAreaElement, screenElement: HTMLElement, selectionService: ISelectionService, shouldSelectWord: boolean): void {
+  moveTextAreaUnderMouseCursor(ev, textarea, screenElement);
+
+  if (shouldSelectWord) {
+    selectionService.rightClickSelect(ev);
+  }
+
+  // Get textarea ready to copy from the context menu
+  textarea.value = selectionService.selectionText;
+  textarea.select();
+}

package/src/browser/ColorContrastCache.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IColorContrastCache } from 'browser/Types';
+import { IColor } from 'common/Types';
+import { TwoKeyMap } from 'common/MultiKeyMap';
+
+export class ColorContrastCache implements IColorContrastCache {
+  private _color: TwoKeyMap</* bg */number, /* fg */number, IColor | null> = new TwoKeyMap();
+  private _css: TwoKeyMap</* bg */number, /* fg */number, string | null> = new TwoKeyMap();
+
+  public setCss(bg: number, fg: number, value: string | null): void {
+    this._css.set(bg, fg, value);
+  }
+
+  public getCss(bg: number, fg: number): string | null | undefined {
+    return this._css.get(bg, fg);
+  }
+
+  public setColor(bg: number, fg: number, value: IColor | null): void {
+    this._color.set(bg, fg, value);
+  }
+
+  public getColor(bg: number, fg: number): IColor | null | undefined {
+    return this._color.get(bg, fg);
+  }
+
+  public clear(): void {
+    this._color.clear();
+    this._css.clear();
+  }
+}

package/src/browser/Lifecycle.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IDisposable } from 'common/Types';
+
+/**
+ * Adds a disposable listener to a node in the DOM, returning the disposable.
+ * @param node The node to add a listener to.
+ * @param type The event type.
+ * @param handler The handler for the listener.
+ * @param options The boolean or options object to pass on to the event
+ * listener.
+ */
+export function addDisposableDomListener(
+  node: Element | Window | Document,
+  type: string,
+  handler: (e: any) => void,
+  options?: boolean | AddEventListenerOptions
+): IDisposable {
+  node.addEventListener(type, handler, options);
+  let disposed = false;
+  return {
+    dispose: () => {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      node.removeEventListener(type, handler, options);
+    }
+  };
+}