@xterm/xterm 5.6.0-beta.9 → 5.6.0-beta.91

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@xterm/xterm",
   "description": "Full xterm terminal, in your browser",
-  "version": "5.6.0-beta.9",
+  "version": "5.6.0-beta.91",
   "main": "lib/xterm.js",
+  "module": "lib/xterm.mjs",
   "style": "css/xterm.css",
   "types": "typings/xterm.d.ts",
   "repository": "https://github.com/xtermjs/xterm.js",
@@ -23,44 +24,50 @@
     "xterm"
   ],
   "scripts": {
-    "prepackage": "npm run build",
-    "package": "webpack",
-    "package-headless": "webpack --config ./webpack.config.headless.js",
-    "postpackage-headless": "node ./bin/package_headless.js",
+    "setup": "npm run build",
+    "presetup": "npm run install-addons",
+    "install-addons": "node ./bin/install-addons.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/",
+    "build": "npm run tsc",
+    "watch": "npm run tsc-watch",
+    "tsc": "tsc -b ./tsconfig.all.json",
+    "tsc-watch": "tsc -b -w ./tsconfig.all.json --preserveWatchOutput",
+    "esbuild": "node bin/esbuild_all.mjs",
+    "esbuild-watch": "node bin/esbuild_all.mjs --watch",
+    "esbuild-package": "node bin/esbuild_all.mjs --prod",
+    "esbuild-package-watch": "node bin/esbuild_all.mjs --prod --watch",
+    "esbuild-package-headless-only": "node bin/esbuild.mjs --prod --headless",
+    "esbuild-demo": "node bin/esbuild.mjs --demo-client",
+    "esbuild-demo-watch": "node bin/esbuild.mjs --demo-client --watch",
     "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",
+    "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-unit": "node ./bin/test_unit.js",
+    "test-unit-coverage": "node ./bin/test_unit.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",
+    "test-integration": "node ./bin/test_integration.js --workers=75%",
+    "test-integration-chromium": "node ./bin/test_integration.js --workers=75% \"--project=ChromeStable\"",
+    "test-integration-firefox": "node ./bin/test_integration.js --workers=75% \"--project=FirefoxStable\"",
+    "test-integration-webkit": "node ./bin/test_integration.js --workers=75% \"--project=WebKit\"",
+    "test-integration-debug": "node ./bin/test_integration.js  --workers=1 --headed --timeout=30000",
     "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",
+    "benchmark-baseline": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --baseline out-test/benchmark/*benchmark.js",
+    "benchmark-eval": "NODE_PATH=./out xterm-benchmark -r 5 -c test/benchmark/benchmark.json --eval out-test/benchmark/*benchmark.js",
     "clean": "rm -rf lib out addons/*/lib addons/*/out",
-    "vtfeatures": "node bin/extract_vtfeatures.js src/**/*.ts src/*.ts"
+    "vtfeatures": "node bin/extract_vtfeatures.js src/**/*.ts src/*.ts",
+    "prepackage": "npm run build",
+    "package": "webpack",
+    "postpackage": "npm run esbuild-package",
+    "prepackage-headless": "npm run esbuild-package-headless-only",
+    "package-headless": "webpack --config ./webpack.config.headless.js",
+    "postpackage-headless": "node ./bin/package_headless.js",
+    "prepublishOnly": "npm run package"
   },
   "devDependencies": {
     "@lunapaint/png-codec": "^0.2.0",
     "@playwright/test": "^1.37.1",
+    "@stylistic/eslint-plugin": "^2.3.0",
     "@types/chai": "^4.2.22",
     "@types/debug": "^4.1.7",
     "@types/deep-equal": "^1.0.1",
@@ -70,6 +77,7 @@
     "@types/jsdom": "^16.2.13",
     "@types/mocha": "^9.0.0",
     "@types/node": "^18.16.0",
+    "@types/trusted-types": "^1.0.6",
     "@types/utf8": "^3.0.0",
     "@types/webpack": "^5.28.0",
     "@types/ws": "^8.2.0",
@@ -78,24 +86,26 @@
     "chai": "^4.3.4",
     "cross-env": "^7.0.3",
     "deep-equal": "^2.0.5",
+    "esbuild": "^0.23.0",
     "eslint": "^8.56.0",
     "eslint-plugin-jsdoc": "^46.9.1",
-    "express": "^4.17.1",
+    "express": "^4.19.2",
     "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",
+    "node-pty": "1.1.0-beta19",
     "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",
+    "typescript": "5.5",
     "utf8": "^3.0.0",
     "webpack": "^5.61.0",
     "webpack-cli": "^4.9.1",
     "ws": "^8.2.3",
     "xterm-benchmark": "^0.3.1"
-  }
+  },
+  "commit": "ef4a3fd933c003df868b70d963d73486973f084b"
 }

package/src/browser/AccessibilityManager.ts

@@ -6,11 +6,11 @@
 import * as Strings from 'browser/LocalizableStrings';
 import { ITerminal, IRenderDebouncer } from 'browser/Types';
 import { TimeBasedDebouncer } from 'browser/TimeBasedDebouncer';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { ICoreBrowserService, IRenderService } from 'browser/services/Services';
 import { IBuffer } from 'common/buffer/Types';
 import { IInstantiationService } from 'common/services/Services';
-import { addDisposableDomListener } from 'browser/Lifecycle';
+import { addDisposableListener } from 'vs/base/browser/dom';
 
 const MAX_ROWS_TO_READ = 20;
 
@@ -58,10 +58,11 @@ export class AccessibilityManager extends Disposable {
     @IRenderService private readonly _renderService: IRenderService
   ) {
     super();
-    this._accessibilityContainer = this._coreBrowserService.mainDocument.createElement('div');
+    const doc = this._coreBrowserService.mainDocument;
+    this._accessibilityContainer = doc.createElement('div');
     this._accessibilityContainer.classList.add('xterm-accessibility');
 
-    this._rowContainer = this._coreBrowserService.mainDocument.createElement('div');
+    this._rowContainer = doc.createElement('div');
     this._rowContainer.setAttribute('role', 'list');
     this._rowContainer.classList.add('xterm-accessibility-tree');
     this._rowElements = [];
@@ -75,14 +76,13 @@ export class AccessibilityManager extends Disposable {
     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 = doc.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)));
+    this._liveRegionDebouncer = this._register(new TimeBasedDebouncer(this._renderRows.bind(this)));
 
     if (!this._terminal.element) {
       throw new Error('Cannot enable accessibility before Terminal.open');
@@ -93,33 +93,34 @@ export class AccessibilityManager extends Disposable {
       this._rowContainer.classList.add('debug');
 
       // Use a `<div class="xterm">` container so that the css will still apply.
-      this._debugRootContainer = document.createElement('div');
+      this._debugRootContainer = doc.createElement('div');
       this._debugRootContainer.classList.add('xterm');
 
-      this._debugRootContainer.appendChild(document.createTextNode('------start a11y------'));
+      this._debugRootContainer.appendChild(doc.createTextNode('------start a11y------'));
       this._debugRootContainer.appendChild(this._accessibilityContainer);
-      this._debugRootContainer.appendChild(document.createTextNode('------end a11y------'));
+      this._debugRootContainer.appendChild(doc.createTextNode('------end a11y------'));
 
       this._terminal.element.insertAdjacentElement('afterend', this._debugRootContainer);
     } else {
       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()));
+    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(addDisposableDomListener(document, 'selectionchange', () => this._handleSelectionChange()));
-    this.register(this._coreBrowserService.onDprChange(() => this._refreshRowsDimensions()));
+    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(addDisposableListener(doc, 'selectionchange', () => this._handleSelectionChange()));
+    this._register(this._coreBrowserService.onDprChange(() => this._refreshRowsDimensions()));
 
+    this._refreshRowsDimensions();
     this._refreshRows();
-    this.register(toDisposable(() => {
+    this._register(toDisposable(() => {
       if (DEBUG) {
         this._debugRootContainer!.remove();
       } else {
@@ -150,7 +151,7 @@ export class AccessibilityManager extends Disposable {
       if (char === '\n') {
         this._liveRegionLineCount++;
         if (this._liveRegionLineCount === MAX_ROWS_TO_READ + 1) {
-          this._liveRegion.textContent += Strings.tooMuchOutput;
+          this._liveRegion.textContent += Strings.tooMuchOutput.get();
         }
       }
     }
@@ -192,6 +193,7 @@ export class AccessibilityManager extends Disposable {
         }
         element.setAttribute('aria-posinset', posInSet);
         element.setAttribute('aria-setsize', setSize);
+        this._alignRowWidth(element);
       }
     }
     this._announceCharacters();
@@ -270,7 +272,7 @@ export class AccessibilityManager extends Disposable {
       return;
     }
 
-    const selection = document.getSelection();
+    const selection = this._coreBrowserService.mainDocument.getSelection();
     if (!selection) {
       return;
     }
@@ -389,19 +391,45 @@ export class AccessibilityManager extends Disposable {
     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`;
+    Object.assign(this._accessibilityContainer.style, {
+      width: `${this._renderService.dimensions.css.canvas.width}px`,
+      fontSize: `${this._terminal.options.fontSize}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]);
+      this._alignRowWidth(this._rowElements[i]);
     }
   }
+
   private _refreshRowDimensions(element: HTMLElement): void {
     element.style.height = `${this._renderService.dimensions.css.cell.height}px`;
   }
+
+  /**
+   * Scale the width of a row so that each of the character is (mostly) aligned
+   * with the actual rendering. This will allow the screen reader to draw
+   * selection outline at the correct position.
+   *
+   * On top of using the "monospace" font and correct font size, the scaling
+   * here is necessary to handle characters that are not covered by the font
+   * (e.g. CJK).
+   */
+  private _alignRowWidth(element: HTMLElement): void {
+    element.style.transform = '';
+    const width = element.getBoundingClientRect().width;
+    const lastColumn = this._rowColumns.get(element)?.slice(-1)?.[0];
+    if (!lastColumn) {
+      return;
+    }
+    const targetWidth = lastColumn * this._renderService.dimensions.css.cell.width;
+    element.style.transform = `scaleX(${targetWidth / width})`;
+  }
 }