Merge pull request #5021 from Tyriar/tyriar5_5

v5.5
2024-04-05 07:00:05 -07:00 · 2024-04-05 06:50:30 -07:00 · 2024-03-20 10:09:19 -07:00 · 2024-03-20 10:02:53 -07:00 · 2024-03-19 09:03:36 -07:00 · 2024-03-19 08:56:13 -07:00
321 changed files with 5613 additions and 2480 deletions
@@ -1,7 +1,7 @@
 {
  "env": {
    "browser": true,
-    "es6": true,
+    "es2021": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
@@ -14,29 +14,36 @@
      "test/api/tsconfig.json",
      "test/benchmark/tsconfig.json",
      "test/playwright/tsconfig.json",
-      "addons/xterm-addon-attach/src/tsconfig.json",
-      "addons/xterm-addon-attach/test/tsconfig.json",
-      "addons/xterm-addon-canvas/src/tsconfig.json",
-      "addons/xterm-addon-fit/src/tsconfig.json",
-      "addons/xterm-addon-fit/test/tsconfig.json",
-      "addons/xterm-addon-image/src/tsconfig.json",
-      "addons/xterm-addon-image/test/tsconfig.json",
-      "addons/xterm-addon-ligatures/src/tsconfig.json",
-      "addons/xterm-addon-search/src/tsconfig.json",
-      "addons/xterm-addon-search/test/tsconfig.json",
-      "addons/xterm-addon-serialize/src/tsconfig.json",
-      "addons/xterm-addon-serialize/test/tsconfig.json",
-      "addons/xterm-addon-serialize/benchmark/tsconfig.json",
-      "addons/xterm-addon-unicode11/src/tsconfig.json",
-      "addons/xterm-addon-unicode11/test/tsconfig.json",
-      "addons/xterm-addon-web-links/src/tsconfig.json",
-      "addons/xterm-addon-web-links/test/tsconfig.json",
-      "addons/xterm-addon-webgl/src/tsconfig.json",
-      "addons/xterm-addon-webgl/test/tsconfig.json"
+      "addons/addon-attach/src/tsconfig.json",
+      "addons/addon-attach/test/tsconfig.json",
+      "addons/addon-canvas/src/tsconfig.json",
+      "addons/addon-canvas/test/tsconfig.json",
+      "addons/addon-fit/src/tsconfig.json",
+      "addons/addon-fit/test/tsconfig.json",
+      "addons/addon-image/src/tsconfig.json",
+      "addons/addon-image/test/tsconfig.json",
+      "addons/addon-ligatures/src/tsconfig.json",
+      "addons/addon-search/src/tsconfig.json",
+      "addons/addon-search/test/tsconfig.json",
+      "addons/addon-serialize/src/tsconfig.json",
+      "addons/addon-serialize/test/tsconfig.json",
+      "addons/addon-serialize/benchmark/tsconfig.json",
+      "addons/addon-unicode11/src/tsconfig.json",
+      "addons/addon-unicode11/test/tsconfig.json",
+      "addons/addon-unicode-graphemes/src/tsconfig.json",
+      "addons/addon-unicode-graphemes/test/tsconfig.json",
+      "addons/addon-unicode-graphemes/benchmark/tsconfig.json",
+      "addons/addon-web-links/src/tsconfig.json",
+      "addons/addon-web-links/test/tsconfig.json",
+      "addons/addon-webgl/src/tsconfig.json",
+      "addons/addon-webgl/test/tsconfig.json"
    ],
    "sourceType": "module"
  },
  "ignorePatterns": [
+    "addons/*/src/third-party/*.ts",
+    "out/*",
+    "out-test/*",
    "**/inwasm-sdks/*",
    "**/typings/*.d.ts",
    "**/node_modules",
@@ -1,7 +1,7 @@
 {
  "env": {
    "browser": true,
-    "es6": true,
+    "es2021": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
@@ -26,26 +26,28 @@ jobs:
        zip -r compressed-build \
          ./out/* \
          ./out-test/* \
-          ./addons/xterm-addon-attach/out/* \
-          ./addons/xterm-addon-attach/out-test/* \
-          ./addons/xterm-addon-canvas/out/* \
-          ./addons/xterm-addon-canvas/out-test/* \
-          ./addons/xterm-addon-fit/out/* \
-          ./addons/xterm-addon-fit/out-test/* \
-          ./addons/xterm-addon-image/out/* \
-          ./addons/xterm-addon-image/out-test/* \
-          ./addons/xterm-addon-ligatures/out/* \
-          ./addons/xterm-addon-ligatures/out-test/* \
-          ./addons/xterm-addon-search/out/* \
-          ./addons/xterm-addon-search/out-test/* \
-          ./addons/xterm-addon-serialize/out/* \
-          ./addons/xterm-addon-serialize/out-test/* \
-          ./addons/xterm-addon-unicode11/out/* \
-          ./addons/xterm-addon-unicode11/out-test/* \
-          ./addons/xterm-addon-web-links/out/* \
-          ./addons/xterm-addon-web-links/out-test/* \
-          ./addons/xterm-addon-webgl/out/* \
-          ./addons/xterm-addon-webgl/out-test/*
+          ./addons/addon-attach/out/* \
+          ./addons/addon-attach/out-test/* \
+          ./addons/addon-canvas/out/* \
+          ./addons/addon-canvas/out-test/* \
+          ./addons/addon-fit/out/* \
+          ./addons/addon-fit/out-test/* \
+          ./addons/addon-image/out/* \
+          ./addons/addon-image/out-test/* \
+          ./addons/addon-ligatures/out/* \
+          ./addons/addon-ligatures/out-test/* \
+          ./addons/addon-search/out/* \
+          ./addons/addon-search/out-test/* \
+          ./addons/addon-serialize/out/* \
+          ./addons/addon-serialize/out-test/* \
+          ./addons/addon-unicode11/out/* \
+          ./addons/addon-unicode11/out-test/* \
+          ./addons/addon-unicode-graphemes/out/* \
+          ./addons/addon-unicode-graphemes/out-test/* \
+          ./addons/addon-web-links/out/* \
+          ./addons/addon-web-links/out-test/* \
+          ./addons/addon-webgl/out/* \
+          ./addons/addon-webgl/out-test/*
    - name: Upload artifacts
      uses: actions/upload-artifact@v3
      with:
@@ -68,6 +70,8 @@ jobs:
        yarn --frozen-lockfile
        yarn install-addons
    - name: Lint code
+      env:
+        NODE_OPTIONS: --max_old_space_size=4096
      run: yarn lint
    - name: Lint API
      run: yarn lint-api
@@ -144,40 +148,6 @@ jobs:
    - name: Unit tests
      run: yarn test-unit --forbid-only

-  test-unit:
-    needs: build
-    timeout-minutes: 20
-    strategy:
-      matrix:
-        node-version: [16]
-        runs-on: [ubuntu, macos, windows]
-    runs-on: ${{ matrix.runs-on }}-latest
-    steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}.x
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}.x
-        cache: 'yarn'
-    - name: Install dependencies
-      run: |
-        yarn --frozen-lockfile
-        yarn install-addons
-    - uses: actions/download-artifact@v3
-      with:
-        name: build-artifacts
-    - name: Unzip artifacts
-      shell: bash
-      run: |
-        if [ "$RUNNER_OS" == "Windows" ]; then
-          pwsh -Command "7z x compressed-build.zip -aoa -o${{ github.workspace }}"
-        else
-          unzip -o compressed-build.zip
-        fi
-        ls -R
-    - name: Unit tests
-      run: yarn test-unit --forbid-only
-
  test-api-parallel:
    timeout-minutes: 20
    strategy:
@@ -259,8 +229,12 @@ jobs:
        ls -R
    - name: Build demo
      run: yarn build-demo
-    - name: Integration tests
-      run: yarn test-playwright-${{ matrix.browser }} --forbid-only
+    - name: Integration tests (core) # Tests use 50% workers to reduce flakiness
+      run: yarn test-playwright-${{ matrix.browser }} --workers=50% --forbid-only --suite=core
+    - name: Integration tests (addon-canvas)
+      run: yarn test-playwright-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-canvas
+    - name: Integration tests (addon-webgl)
+      run: yarn test-playwright-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-webgl

  test-api:
    needs: build
@@ -298,3 +272,41 @@ jobs:
        ls -R
    - name: Integration tests (${{ matrix.browser }})
      run: yarn test-api-${{ matrix.browser }} --headless --forbid-only
+
+  release-dry-run:
+    needs: build
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18]
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}.x
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}.x
+        cache: 'yarn'
+    - name: Install dependencies
+      run: |
+        yarn --frozen-lockfile
+        yarn install-addons
+    - name: Install playwright
+      run: npx playwright install
+    - uses: actions/download-artifact@v3
+      with:
+        name: build-artifacts
+    - name: Unzip artifacts
+      shell: bash
+      run: |
+        if [ "$RUNNER_OS" == "Windows" ]; then
+          pwsh -Command "7z x compressed-build.zip -aoa -o${{ github.workspace }}"
+        else
+          unzip -o compressed-build.zip
+        fi
+        ls -R
+    - name: Package headless
+      run: |
+        yarn package-headless
+        node ./bin/package_headless.js
+    - name: Publish to npm (dry run)
+      run: node ./bin/publish.js --dry
@@ -43,7 +43,14 @@
    {
      "type": "chrome",
      "request": "launch",
-      "name": "Demo Client",
+      "name": "Demo Client (Chrome)",
+      "url": "http://127.0.0.1:3000",
+      "webRoot": "${workspaceFolder}/"
+    },
+    {
+      "type": "msedge",
+      "request": "launch",
+      "name": "Demo Client (Edge)",
      "url": "http://127.0.0.1:3000",
      "webRoot": "${workspaceFolder}/"
    },
@@ -52,11 +59,9 @@
      "request": "launch",
      "name": "Demo Server",
      "runtimeExecutable": "npm",
-      "runtimeArgs": [
-        "run",
-        "start-debug"
-      ],
-      "port": 9229,
+      "runtimeArgs": ["start"],
+      "stopOnEntry": true,
+      "runtimeVersion": "16",
      "serverReadyAction": {
        "action": "openExternally",
        "pattern": "App listening to (http://.*?:[0-9]+)"
@@ -21,7 +21,7 @@ Xterm.js is a front-end component written in TypeScript that lets applications b
 First, you need to install the module, we ship exclusively through [npm](https://www.npmjs.com/), so you need that installed and then add xterm.js as a dependency by running:

 ```bash
-npm install xterm
+npm install @xterm/xterm
 ```

 To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to the head of your HTML page. Then create a `<div id="terminal"></div>` onto which xterm can attach itself. Finally, instantiate the `Terminal` object and then call the `open` function with the DOM object of the `div`.
@@ -30,8 +30,8 @@ To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to t
 <!doctype html>
  <html>
    <head>
-      <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
-      <script src="node_modules/xterm/lib/xterm.js"></script>
+      <link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
+      <script src="node_modules/@xterm/xterm/lib/xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
@@ -49,7 +49,7 @@ To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to t
 The recommended way to load xterm.js is via the ES6 module syntax:

 ```javascript
-import { Terminal } from 'xterm';
+import { Terminal } from '@xterm/xterm';
 ```

 ### Addons
@@ -59,14 +59,14 @@ import { Terminal } from 'xterm';
 Addons are separate modules that extend the `Terminal` by building on the [xterm.js API](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts). To use an addon, you first need to install it in your project:

 ```bash
-npm i -S xterm-addon-web-links
+npm i -S @xterm/addon-web-links
 ```

 Then import the addon, instantiate it and call `Terminal.loadAddon`:

 ```ts
-import { Terminal } from 'xterm';
-import { WebLinksAddon } from 'xterm-addon-web-links';
+import { Terminal } from '@xterm/xterm';
+import { WebLinksAddon } from '@xterm/addon-web-links';

 const terminal = new Terminal();
 // Load WebLinksAddon on terminal, this is all that's needed to get web links
@@ -76,10 +76,15 @@ terminal.loadAddon(new WebLinksAddon());

 The xterm.js team maintains the following addons, but anyone can build them:

- [`xterm-addon-attach`](https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-attach): Attaches to a server running a process via a websocket
- [`xterm-addon-fit`](https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-fit): Fits the terminal to the containing element
- [`xterm-addon-search`](https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-search): Adds search functionality
- [`xterm-addon-web-links`](https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-web-links): Adds web link detection and interaction
+- [`@xterm/addon-attach`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-attach): Attaches to a server running a process via a websocket
+- [`@xterm/addon-canvas`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-canvas): Renders xterm.js using a `canvas` element's 2d context
+- [`@xterm/addon-fit`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-fit): Fits the terminal to the containing element
+- [`@xterm/addon-image`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-image): Adds image support
+- [`@xterm/addon-search`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-search): Adds search functionality
+- [`@xterm/addon-serialize`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-serialize): Serializes the terminal's buffer to a VT sequences or HTML
+- [`@xterm/addon-unicode11`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-unicode11): Updates character widths to their unicode11 values
+- [`@xterm/addon-web-links`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-web-links): Adds web link detection and interaction
+- [`@xterm/addon-webgl`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-webgl): Renders xterm.js using a `canvas` element's webgl2 context

 ## Browser Support

@@ -108,7 +113,7 @@ All current and past releases are available on this repo's [Releases page](https
 Our CI releases beta builds to npm for every change that goes into master. Install the latest beta build with:

 ```bash
-npm install -S xterm@beta
+npm install -S @xterm/xterm@beta
 ```

 These should generally be stable, but some bugs may slip in. We recommend using the beta build primarily to test out new features and to verify bug fixes.
@@ -1,22 +1,22 @@
-## xterm-addon-attach
+## @xterm/addon-attach

 An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables attaching to a web socket. This addon requires xterm.js v4+.

 ### Install

 ```bash
-npm install --save xterm-addon-attach
+npm install --save @xterm/addon-attach
 ```

 ### Usage

 ```ts
-import { Terminal } from 'xterm';
-import { AttachAddon } from 'xterm-addon-attach';
+import { Terminal } from '@xterm/xterm';
+import { AttachAddon } from '@xterm/addon-attach';

 const terminal = new Terminal();
 const attachAddon = new AttachAddon(webSocket);
 terminal.loadAddon(attachAddon);
 ```

-See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/xterm-addon-attach/typings/xterm-addon-attach.d.ts) for more advanced usage.
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-attach/typings/addon-attach.d.ts) for more advanced usage.
@@ -1,17 +1,16 @@
 {
-  "name": "xterm-addon-canvas",
-  "version": "0.5.0",
+  "name": "@xterm/addon-attach",
+  "version": "0.11.0",
  "author": {
    "name": "The xterm.js authors",
    "url": "https://xtermjs.org/"
  },
-  "main": "lib/xterm-addon-canvas.js",
-  "types": "typings/xterm-addon-canvas.d.ts",
-  "repository": "https://github.com/xtermjs/xterm.js",
+  "main": "lib/addon-attach.js",
+  "types": "typings/addon-attach.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-attach",
  "license": "MIT",
  "keywords": [
    "terminal",
-    "canvas",
    "xterm",
    "xterm.js"
  ],
@@ -22,6 +21,6 @@
    "prepublishOnly": "npm run package"
  },
  "peerDependencies": {
-    "xterm": "^5.0.0"
+    "@xterm/xterm": "^5.0.0"
  }
 }
@@ -5,13 +5,14 @@
 * Implements the attach method, that attaches the terminal to a WebSocket stream.
 */

-import { Terminal, IDisposable, ITerminalAddon } from 'xterm';
+import type { Terminal, IDisposable, ITerminalAddon } from '@xterm/xterm';
+import type { AttachAddon as IAttachApi } from '@xterm/addon-attach';

 interface IAttachOptions {
  bidirectional?: boolean;
 }

-export class AttachAddon implements ITerminalAddon {
+export class AttachAddon implements ITerminalAddon , IAttachApi {
  private _socket: WebSocket;
  private _bidirectional: boolean;
  private _disposables: IDisposable[] = [];
@@ -1,7 +1,7 @@
 {
  "compilerOptions": {
    "module": "commonjs",
-    "target": "es2015",
+    "target": "es2021",
    "lib": [
      "dom",
      "es2015"
@@ -13,7 +13,12 @@
    "strict": true,
    "types": [
      "../../../node_modules/@types/mocha"
-    ]
+    ],
+    "paths": {
+      "@xterm/addon-attach": [
+        "../typings/addon-attach.d.ts"
+      ]
+    }
  },
  "include": [
    "./**/*",
@@ -1,7 +1,7 @@
 {
  "compilerOptions": {
    "module": "commonjs",
-    "target": "es2015",
+    "target": "es2021",
    "lib": [
      "es2015"
    ],
@@ -3,9 +3,9 @@
 * @license MIT
 */

-import { Terminal, ITerminalAddon } from 'xterm';
+import { Terminal, ITerminalAddon } from '@xterm/xterm';

-declare module 'xterm-addon-attach' {
+declare module '@xterm/addon-attach' {
  export interface IAttachOptions {
    /**
     * Whether input should be written to the backend. Defaults to `true`.
@@ -6,7 +6,7 @@
 const path = require('path');

 const addonName = 'AttachAddon';
-const mainFile = 'xterm-addon-attach.js';
+const mainFile = 'addon-attach.js';

 module.exports = {
  entry: `./out/${addonName}.js`,
@@ -0,0 +1,28 @@
+## @xterm/addon-canvas
+
+An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables a canvas-based renderer using a 2d context to draw. This addon requires xterm.js v5+.
+
+The purpose of this addon is to be used as a fallback for the [webgl addon](https://www.npmjs.com/package/@xterm/addon-webgl) when better performance is desired over the default DOM renderer, but WebGL2 isn't supported or performant for some reason.
+
+### Install
+
+```bash
+npm install --save @xterm/addon-canvas
+```
+
+### Usage
+
+```ts
+import { Terminal } from '@xterm/xterm';
+import { CanvasAddon } from '@xterm/addon-canvas';
+
+const terminal = new Terminal();
+terminal.open(element);
+terminal.loadAddon(new CanvasAddon());
+```
+
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-canvas/typings/addon-canvas.d.ts) for more advanced usage.
+
+### See also
+
+- [@xterm/addon-webgl](https://www.npmjs.com/package/@xterm/addon-webgl) A renderer for xterm.js that uses WebGL
@@ -0,0 +1,28 @@
+{
+  "name": "@xterm/addon-canvas",
+  "version": "0.7.0",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/addon-canvas.js",
+  "types": "typings/addon-canvas.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-canvas",
+  "license": "MIT",
+  "keywords": [
+    "terminal",
+    "canvas",
+    "xterm",
+    "xterm.js"
+  ],
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p .",
+    "prepackage": "npm run build",
+    "package": "../../node_modules/.bin/webpack",
+    "prepublishOnly": "npm run package",
+    "start-server-only": "node ../../demo/start-server-only"
+  },
+  "peerDependencies": {
+    "@xterm/xterm": "^5.0.0"
+  }
+}
@@ -8,7 +8,7 @@ import { CellColorResolver } from 'browser/renderer/shared/CellColorResolver';
 import { acquireTextureAtlas } from 'browser/renderer/shared/CharAtlasCache';
 import { TEXT_BASELINE } from 'browser/renderer/shared/Constants';
 import { tryDrawCustomChar } from 'browser/renderer/shared/CustomGlyphs';
-import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { createSelectionRenderModel } from 'browser/renderer/shared/SelectionRenderModel';
 import { IRasterizedGlyph, IRenderDimensions, ISelectionRenderModel, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
@@ -19,7 +19,7 @@ import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { WHITESPACE_CELL_CODE } from 'common/buffer/Constants';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { Terminal } from 'xterm';
+import { Terminal } from '@xterm/xterm';
 import { IRenderLayer } from './Types';

 export abstract class BaseRenderLayer extends Disposable implements IRenderLayer {
@@ -58,8 +58,8 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    protected readonly _coreBrowserService: ICoreBrowserService
  ) {
    super();
-    this._cellColorResolver = new CellColorResolver(this._terminal, this._selectionModel, this._decorationService, this._coreBrowserService, this._themeService);
-    this._canvas = document.createElement('canvas');
+    this._cellColorResolver = new CellColorResolver(this._terminal, this._optionsService, this._selectionModel, this._decorationService, this._coreBrowserService, this._themeService);
+    this._canvas = this._coreBrowserService.mainDocument.createElement('canvas');
    this._canvas.classList.add(`xterm-${id}-layer`);
    this._canvas.style.zIndex = zIndex.toString();
    this._initCanvas();
@@ -91,7 +91,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
  public handleGridChanged(startRow: number, endRow: number): void {}

  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
-    this._selectionModel.update(this._terminal, start, end, columnSelectMode);
+    this._selectionModel.update((this._terminal as any)._core, start, end, columnSelectMode);
  }

  protected _setTransparency(alpha: boolean): void {
@@ -365,7 +365,9 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
   */
  protected _drawChars(cell: ICellData, x: number, y: number): void {
    const chars = cell.getChars();
-    this._cellColorResolver.resolve(cell, x, this._bufferService.buffer.ydisp + y);
+    const code = cell.getCode();
+    const width = cell.getWidth();
+    this._cellColorResolver.resolve(cell, x, this._bufferService.buffer.ydisp + y, this._deviceCellWidth);

    if (!this._charAtlas) {
      return;
@@ -400,6 +402,16 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
      this._bitmapGenerator[glyph.texturePage]!.refresh();
      this._bitmapGenerator[glyph.texturePage]!.version = this._charAtlas.pages[glyph.texturePage].version;
    }
+
+    // Reduce scale horizontally for wide glyphs printed in cells that would overlap with the
+    // following cell (ie. the width is not 2).
+    let renderWidth = glyph.size.x;
+    if (this._optionsService.rawOptions.rescaleOverlappingGlyphs) {
+      if (allowRescaling(code, width, glyph.size.x, this._deviceCellWidth)) {
+        renderWidth = this._deviceCellWidth - 1; // - 1 to improve readability
+      }
+    }
+
    this._ctx.drawImage(
      this._bitmapGenerator[glyph.texturePage]?.bitmap || this._charAtlas!.pages[glyph.texturePage].canvas,
      glyph.texturePosition.x,
@@ -408,7 +420,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
      glyph.size.y,
      x * this._deviceCellWidth + this._deviceCharLeft - glyph.offset.x,
      y * this._deviceCellHeight + this._deviceCharTop - glyph.offset.y,
-      glyph.size.x,
+      renderWidth,
      glyph.size.y
    );
    this._ctx.restore();
@@ -3,16 +3,17 @@
 * @license MIT
 */

+import type { ITerminalAddon, Terminal } from '@xterm/xterm';
+import type { CanvasAddon as ICanvasApi } from '@xterm/addon-canvas';
 import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
 import { ITerminal } from 'browser/Types';
 import { EventEmitter, forwardEvent } from 'common/EventEmitter';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { setTraceLogger } from 'common/services/LogService';
 import { IBufferService, IDecorationService, ILogService } from 'common/services/Services';
-import { ITerminalAddon, Terminal } from 'xterm';
 import { CanvasRenderer } from './CanvasRenderer';

-export class CanvasAddon extends Disposable implements ITerminalAddon {
+export class CanvasAddon extends Disposable implements ITerminalAddon , ICanvasApi {
  private _terminal?: Terminal;
  private _renderer?: CanvasRenderer;

@@ -36,7 +37,7 @@ export class CanvasAddon extends Disposable implements ITerminalAddon {
    const coreService = core.coreService;
    const optionsService = core.optionsService;
    const screenElement = core.screenElement!;
-    const linkifier = core.linkifier2;
+    const linkifier = core.linkifier!;

    const unsafeCore = core as any;
    const bufferService: IBufferService = unsafeCore._bufferService;
@@ -65,4 +66,8 @@ export class CanvasAddon extends Disposable implements ITerminalAddon {
      this._renderer = undefined;
    }));
  }
+
+  public clearTextureAtlas(): void {
+    this._renderer?.clearTextureAtlas();
+  }
 }
@@ -10,9 +10,9 @@ import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
 import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
 import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { EventEmitter, forwardEvent } from 'common/EventEmitter';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
 import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { Terminal } from 'xterm';
+import { Terminal } from '@xterm/xterm';
 import { CursorRenderLayer } from './CursorRenderLayer';
 import { LinkRenderLayer } from './LinkRenderLayer';
 import { SelectionRenderLayer } from './SelectionRenderLayer';
@@ -22,6 +22,7 @@ import { IRenderLayer } from './Types';
 export class CanvasRenderer extends Disposable implements IRenderer {
  private _renderLayers: IRenderLayer[];
  private _devicePixelRatio: number;
+  private _observerDisposable = this.register(new MutableDisposable());

  public dimensions: IRenderDimensions;

@@ -60,7 +61,11 @@ export class CanvasRenderer extends Disposable implements IRenderer {
    this._devicePixelRatio = this._coreBrowserService.dpr;
    this._updateDimensions();

-    this.register(observeDevicePixelDimensions(this._renderLayers[0].canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h)));
+    this._observerDisposable.value = observeDevicePixelDimensions(this._renderLayers[0].canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
+    this.register(this._coreBrowserService.onWindowChange(w => {
+      this._observerDisposable.value = observeDevicePixelDimensions(this._renderLayers[0].canvas, w, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
+    }));
+
    this.register(toDisposable(() => {
      for (const l of this._renderLayers) {
        l.dispose();
@@ -12,7 +12,7 @@ import { isFirefox } from 'common/Platform';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { Terminal } from 'xterm';
+import { Terminal } from '@xterm/xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';

 interface ICursorState {
@@ -9,7 +9,7 @@ import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { Terminal } from 'xterm';
+import { Terminal } from '@xterm/xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';

 export class LinkRenderLayer extends BaseRenderLayer {
@@ -7,7 +7,7 @@ import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { Terminal } from 'xterm';
+import { Terminal } from '@xterm/xterm';

 interface ISelectionState {
  start?: [number, number];
@@ -11,7 +11,7 @@ import { AttributeData } from 'common/buffer/AttributeData';
 import { CellData } from 'common/buffer/CellData';
 import { Content, NULL_CELL_CODE } from 'common/buffer/Constants';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { Terminal } from 'xterm';
+import { Terminal } from '@xterm/xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { GridCache } from './GridCache';

@@ -1,10 +1,10 @@
 {
  "compilerOptions": {
    "module": "commonjs",
-    "target": "es2015",
+    "target": "es2021",
    "lib": [
      "dom",
-      "es6"
+      "es2021"
    ],
    "rootDir": ".",
    "outDir": "../out",
@@ -17,6 +17,9 @@
      ],
      "browser/*": [
        "../../../src/browser/*"
+      ],
+      "@xterm/addon-canvas": [
+        "../typings/addon-canvas.d.ts"
      ]
    },
    "strict": true,
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import test from '@playwright/test';
+import { ISharedRendererTestContext, injectSharedRendererTests, injectSharedRendererTestsStandalone } from '../../../out-test/playwright/SharedRendererTests';
+import { ITestContext, createTestContext, openTerminal } from '../../../out-test/playwright/TestUtils';
+
+let ctx: ITestContext;
+const ctxWrapper: ISharedRendererTestContext = {
+  value: undefined,
+  skipCanvasExceptions: true
+} as any;
+test.beforeAll(async ({ browser }) => {
+  ctx = await createTestContext(browser);
+  await openTerminal(ctx);
+  ctxWrapper.value = ctx;
+  await ctx.page.evaluate(`
+    window.addon = new window.CanvasAddon(true);
+    window.term.loadAddon(window.addon);
+  `);
+});
+test.afterAll(async () => await ctx.page.close());
+
+test.describe('Canvas Renderer Integration Tests', () => {
+  // HACK: The tests fail for an unknown reason
+  test.skip(({ browserName }) => browserName === 'webkit');
+
+  injectSharedRendererTests(ctxWrapper);
+  injectSharedRendererTestsStandalone(ctxWrapper, async () => {
+    await ctx.page.evaluate(`
+      window.addon = new window.CanvasAddon(true);
+      window.term.loadAddon(window.addon);
+    `);
+  });
+});
@@ -0,0 +1,35 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: '.',
+  timeout: 10000,
+  projects: [
+    {
+      name: 'Chrome Stable',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome'
+      }
+    },
+    {
+      name: 'Firefox Stable',
+      use: {
+        browserName: 'firefox'
+      }
+    },
+    {
+      name: 'WebKit',
+      use: {
+        browserName: 'webkit'
+      }
+    }
+  ],
+  reporter: 'list',
+  webServer: {
+    command: 'npm run start-server-only',
+    port: 3000,
+    timeout: 120000,
+    reuseExistingServer: !process.env.CI
+  }
+};
+export default config;
@@ -20,9 +20,10 @@
    },
    "strict": true,
    "types": [
-      "../../../node_modules/@types/mocha",
      "../../../node_modules/@types/node",
-      "../../../out-test/api/TestUtils"
+      "../../../node_modules/@lunapaint/png-codec",
+      "../../../out-test/playwright/TestUtils",
+      "../../../out-test/playwright/SharedRendererTests"
    ]
  },
  "include": [
@@ -3,9 +3,9 @@
 * @license MIT
 */

-import { Terminal, ITerminalAddon, IEvent } from 'xterm';
+import { Terminal, ITerminalAddon, IEvent } from '@xterm/xterm';

-declare module 'xterm-addon-canvas' {
+declare module '@xterm/addon-canvas' {
  /**
   * An xterm.js addon that provides search functionality.
   */
@@ -6,7 +6,7 @@
 const path = require('path');

 const addonName = 'CanvasAddon';
-const mainFile = 'xterm-addon-canvas.js';
+const mainFile = 'addon-canvas.js';

 module.exports = {
  entry: `./out/${addonName}.js`,
@@ -1,18 +1,18 @@
-## xterm-addon-fit
+## @xterm/addon-fit

 An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables fitting the terminal's dimensions to a containing element. This addon requires xterm.js v4+.

 ### Install

 ```bash
-npm install --save xterm-addon-fit
+npm install --save @xterm/addon-fit
 ```

 ### Usage

 ```ts
-import { Terminal } from 'xterm';
-import { FitAddon } from 'xterm-addon-fit';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';

 const terminal = new Terminal();
 const fitAddon = new FitAddon();
@@ -21,4 +21,4 @@ terminal.open(containerElement);
 fitAddon.fit();
 ```

-See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/xterm-addon-fit/typings/xterm-addon-fit.d.ts) for more advanced usage.
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-fit/typings/addon-fit.d.ts) for more advanced usage.
@@ -1,13 +1,13 @@
 {
-  "name": "xterm-addon-attach",
-  "version": "0.9.0",
+  "name": "@xterm/addon-fit",
+  "version": "0.10.0",
  "author": {
    "name": "The xterm.js authors",
    "url": "https://xtermjs.org/"
  },
-  "main": "lib/xterm-addon-attach.js",
-  "types": "typings/xterm-addon-attach.d.ts",
-  "repository": "https://github.com/xtermjs/xterm.js",
+  "main": "lib/addon-fit.js",
+  "types": "typings/addon-fit.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-fit",
  "license": "MIT",
  "keywords": [
    "terminal",
@@ -21,6 +21,6 @@
    "prepublishOnly": "npm run package"
  },
  "peerDependencies": {
-    "xterm": "^5.0.0"
+    "@xterm/xterm": "^5.0.0"
  }
 }
@@ -3,7 +3,8 @@
 * @license MIT
 */

-import { Terminal, ITerminalAddon } from 'xterm';
+import type { Terminal, ITerminalAddon } from '@xterm/xterm';
+import type { FitAddon as IFitApi } from '@xterm/addon-fit';
 import { IRenderDimensions } from 'browser/renderer/shared/Types';

 interface ITerminalDimensions {
@@ -21,7 +22,7 @@ interface ITerminalDimensions {
 const MINIMUM_COLS = 2;
 const MINIMUM_ROWS = 1;

-export class FitAddon implements ITerminalAddon {
+export class FitAddon implements ITerminalAddon , IFitApi {
  private _terminal: Terminal | undefined;

  public activate(terminal: Terminal): void {
@@ -1,7 +1,7 @@
 {
  "compilerOptions": {
    "module": "commonjs",
-    "target": "es2015",
+    "target": "es2021",
    "lib": [
      "dom",
      "es2015"
@@ -17,6 +17,9 @@
    "paths": {
      "browser/*": [
        "../../../src/browser/*"
+      ],
+      "@xterm/addon-fit": [
+        "../typings/addon-fit.d.ts"
      ]
    }
  },
@@ -4,7 +4,7 @@
 */

 import { assert } from 'chai';
-import { openTerminal, launchBrowser } from '../../../out-test/api/TestUtils';
+import { openTerminal, launchBrowser, timeout } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from '@playwright/test';

 const APP = 'http://127.0.0.1:3001/test';
@@ -75,7 +75,15 @@ describe('FitAddon', () => {
      await page.evaluate(`window.term = new Terminal()`);
      await page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
      await loadFit();
-      assert.equal(await page.evaluate(`window.fit.proposeDimensions()`), undefined);
+      const dimensions: { cols: number, rows: number } | undefined = await page.evaluate(`window.fit.proposeDimensions()`);
+      // The value of dims will be undefined if the char measure strategy falls back to the DOM
+      // method, so only assert if it's not undefined.
+      if (dimensions) {
+        assert.isAbove(dimensions.cols, 85);
+        assert.isBelow(dimensions.cols, 88);
+        assert.isAbove(dimensions.rows, 24);
+        assert.isBelow(dimensions.rows, 29);
+      }
    });
  });

@@ -1,7 +1,7 @@
 {
  "compilerOptions": {
    "module": "commonjs",
-    "target": "es2015",
+    "target": "es2021",
    "lib": [
      "es2015"
    ],
@@ -3,9 +3,9 @@
 * @license MIT
 */

-import { Terminal, ITerminalAddon } from 'xterm';
+import { Terminal, ITerminalAddon } from '@xterm/xterm';

-declare module 'xterm-addon-fit' {
+declare module '@xterm/addon-fit' {
  /**
   * An xterm.js addon that enables resizing the terminal to the dimensions of
   * its containing element.
@@ -6,7 +6,7 @@
 const path = require('path');

 const addonName = 'FitAddon';
-const mainFile = 'xterm-addon-fit.js';
+const mainFile = 'addon-fit.js';

 module.exports = {
  entry: `./out/${addonName}.js`,
@@ -1,4 +1,4 @@
-## xterm-addon-image
+## @xterm/addon-image

 Inline image output in xterm.js. Supports SIXEL and iTerm's inline image protocol (IIP).

@@ -9,15 +9,15 @@ Inline image output in xterm.js. Supports SIXEL and iTerm's inline image protoco
 ### Install from npm

 ```bash
-npm install --save xterm-addon-image
+npm install --save @xterm/addon-image
 ```


 ### Usage

 ```ts
-import { Terminal } from 'xterm';
-import { ImageAddon, IImageAddonOptions } from 'xterm-addon-image';
+import { Terminal } from '@xterm/xterm';
+import { ImageAddon, IImageAddonOptions } from '@xterm/addon-image';

 // customize as needed (showing addon defaults)
 const customSettings: IImageAddonOptions = {
@@ -227,5 +227,5 @@ _How can I adjust the memory usage?_
 - 0.1.2 bugfix: reset clear flag
 - 0.1.1 bugfixes:
  - clear sticky image tiles on render
-  - create xterm-addon-image folder from bootstrap.sh
+  - create folder from bootstrap.sh
  - fix peer dependency in package.json
@@ -1,13 +1,13 @@
 {
-  "name": "xterm-addon-image",
-  "version": "0.6.0",
+  "name": "@xterm/addon-image",
+  "version": "0.8.0",
  "author": {
    "name": "The xterm.js authors",
    "url": "https://xtermjs.org/"
  },
-  "main": "lib/xterm-addon-image.js",
-  "types": "typings/xterm-addon-image.d.ts",
-  "repository": "https://github.com/xtermjs/xterm.js",
+  "main": "lib/addon-image.js",
+  "types": "typings/addon-image.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-image",
  "license": "MIT",
  "keywords": [
    "terminal",
@@ -22,7 +22,7 @@
    "prepublishOnly": "npm run package"
  },
  "peerDependencies": {
-    "xterm": "^5.2.0"
+    "@xterm/xterm": "^5.2.0"
  },
  "devDependencies": {
    "sixel": "^0.16.0",
@@ -36,7 +36,7 @@ const TEST_IMAGES: [string, IMetrics][] = [
 describe('IIPMetrics', () => {
  it('bunch of testimages', () => {
    for (let i = 0; i < TEST_IMAGES.length; ++i) {
-      const imageData = fs.readFileSync('./addons/xterm-addon-image/fixture/testimages/' + TEST_IMAGES[i][0]);
+      const imageData = fs.readFileSync('./addons/addon-image/fixture/testimages/' + TEST_IMAGES[i][0]);
      assert.deepStrictEqual(imageType(imageData), TEST_IMAGES[i][1]);
    }
  });
@@ -3,14 +3,14 @@
 * @license MIT
 */

+import type { ITerminalAddon, IDisposable } from '@xterm/xterm';
+import type { ImageAddon as IImageApi } from '@xterm/addon-image';
 import { IIPHandler } from './IIPHandler';
-import { ITerminalAddon, IDisposable } from 'xterm';
 import { ImageRenderer } from './ImageRenderer';
 import { ImageStorage, CELL_SIZE_DEFAULT } from './ImageStorage';
 import { SixelHandler } from './SixelHandler';
 import { ITerminalExt, IImageAddonOptions, IResetHandler } from './Types';

-
 // default values of addon ctor options
 const DEFAULT_OPTIONS: IImageAddonOptions = {
  enableSizeReports: true,
@@ -48,7 +48,7 @@ const enum GaStatus {
 }


-export class ImageAddon implements ITerminalAddon {
+export class ImageAddon implements ITerminalAddon , IImageApi {
  private _opts: IImageAddonOptions;
  private _defaultOpts: IImageAddonOptions;
  private _storage: ImageStorage | undefined;
@@ -4,7 +4,7 @@
 */

 import { toRGBA8888 } from 'sixel/lib/Colors';
-import { IDisposable } from 'xterm';
+import { IDisposable } from '@xterm/xterm';
 import { ICellSize, ITerminalExt, IImageSpec, IRenderDimensions, IRenderService } from './Types';
 import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';

@@ -3,7 +3,7 @@
 * @license MIT
 */

-import { IDisposable } from 'xterm';
+import { IDisposable } from '@xterm/xterm';
 import { ImageRenderer } from './ImageRenderer';
 import { ITerminalExt, IExtendedAttrsImage, IImageAddonOptions, IImageSpec, IBufferLineExt, BgFlags, Cell, Content, ICellSize, ExtFlags, Attributes, UnderlineStyle } from './Types';

@@ -53,6 +53,18 @@ class ExtendedAttrsImage implements IExtendedAttrsImage {
    this._ext |= value & (Attributes.CM_MASK | Attributes.RGB_MASK);
  }

+  public get underlineVariantOffset(): number {
+    const val = (this._ext & ExtFlags.VARIANT_OFFSET) >> 29;
+    if (val < 0) {
+      return val ^ 0xFFFFFFF8;
+    }
+    return val;
+  }
+  public set underlineVariantOffset(value: number) {
+    this._ext &= ~ExtFlags.VARIANT_OFFSET;
+    this._ext |= (value << 29) & ExtFlags.VARIANT_OFFSET;
+  }
+
  private _urlId: number = 0;
  public get urlId(): number {
    return this._urlId;
@@ -3,7 +3,7 @@
 * @license MIT
 */

-import { IDisposable, IMarker, Terminal } from 'xterm';
+import { IDisposable, IMarker, Terminal } from '@xterm/xterm';

 // private imports from base repo we build against
 import { Attributes, BgFlags, Content, ExtFlags, UnderlineStyle } from 'common/buffer/Constants';
@@ -14,7 +14,8 @@
    "baseUrl": ".",
    "paths": {
      "browser/*": [ "../../../src/browser/*" ],
-      "common/*": [ "../../../src/common/*" ]
+      "common/*": [ "../../../src/common/*" ],
+      "@xterm/addon-image": [ "../typings/addon-image.d.ts" ]
    }
  },
  "include": [
--- a/Show More
+++ b/Show More