Merge branch 'master' into add-pyTermTk-sandbox-project

Author: Tyriar

.github/workflows/ci.yml

@@ -167,9 +167,9 @@ jobs:
     strategy:
       matrix:
         node-version: [18] # just one as integration tests are about testing in browser
-        runs-on: [ubuntu] # macos is flaky
+        runs-on: [ubuntu-22.04] # macos is flaky
         browser: [chromium, firefox, webkit]
-    runs-on: ${{ matrix.runs-on }}-latest
+    runs-on: ${{ matrix.runs-on }}
     steps:
     - uses: actions/checkout@v3
     - name: Use Node.js ${{ matrix.node-version }}.x

.vscode/settings.json

@@ -2,13 +2,8 @@
   "files.associations": {
     ".eslintrc.json.typings": "jsonc"
   },
-  // Hide output files from the file explorer, comment this out to see the build output
   "files.exclude": {
-    "**/.nyc_output": true,
-    "**/lib": true,
-    "**/dist": true,
-    "**/out": true,
-    "**/out-*": true,
+    "**/.nyc_output": true
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "typescript.preferences.quoteStyle": "single",

README.md

@@ -227,6 +227,8 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**balena**](https://www.balena.io/): Balena is a full-stack solution for developing, deploying, updating, and troubleshooting IoT Edge devices. We use xterm.js to manage & debug devices on [balenaCloud](https://www.balena.io/cloud).
 - [**Filet Cloud**](https://github.com/fuglaro/filet-cloud): The lean and powerful personal cloud ⛅.
 - [**pyTermTk**](https://github.com/ceccopierangiolieugenio/pyTermTk): Python Terminal Toolkit - a Spiced Up Cross Compatible TUI Library 🌶️, use xterm.js for the [HTML5 exporter](https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html).
+- [**ecmaOS**](https://ecmaos.sh): A kernel and suite of applications tying modern web technologies into a browser-based operating system.
+- [**LabEx**](https://labex.io): Interactive learning platform with hands-on labs and xterm.js-based online terminals, focused on learn-by-doing approach.
 - [And much more...](https://github.com/xtermjs/xterm.js/network/dependents?package_id=UGFja2FnZS0xNjYzMjc4OQ%3D%3D)
 
 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/addon-ligatures/src/LigaturesAddon.ts

@@ -15,30 +15,40 @@ export interface ITerminalAddon {
 
 export class LigaturesAddon implements ITerminalAddon , ILigaturesApi {
   private readonly _fallbackLigatures: string[];
+  private readonly _fontFeatureSettings?: string;
 
   private _terminal: Terminal | undefined;
   private _characterJoinerId: number | undefined;
 
   constructor(options?: Partial<ILigatureOptions>) {
+    // Source: calt set from https://github.com/be5invis/Iosevka?tab=readme-ov-file#ligations
     this._fallbackLigatures = (options?.fallbackLigatures || [
       '<--', '<---', '<<-', '<-', '->', '->>', '-->', '--->',
       '<==', '<===', '<<=', '<=', '=>', '=>>', '==>', '===>', '>=', '>>=',
-      '<->', '<-->', '<--->', '<---->', '<=>', '<==>', '<===>', '<====>', '-------->',
-      '<~~', '<~', '~>', '~~>', '::', ':::', '==', '!=', '===', '!==',
-      ':=', ':-', ':+', '<*', '<*>', '*>', '<|', '<|>', '|>', '+:', '-:', '=:', ':>',
-      '++', '+++', '<!--', '<!---', '<***>'
+      '<->', '<-->', '<--->', '<---->', '<=>', '<==>', '<===>', '<====>', '::', ':::',
+      '<~~', '</', '</>', '/>', '~~>', '==', '!=', '/=', '~=', '<>', '===', '!==', '!===',
+      '<:', ':=', '*=', '*+', '<*', '<*>', '*>', '<|', '<|>', '|>', '+*', '=*', '=:', ':>',
+      '/*', '*/', '+++', '<!--', '<!---'
     ]).sort((a, b) => b.length - a.length);
+    this._fontFeatureSettings = options?.fontFeatureSettings;
   }
 
   public activate(terminal: Terminal): void {
+    if (!terminal.element) {
+      throw new Error('Cannot activate LigaturesAddon before open is called');
+    }
     this._terminal = terminal;
     this._characterJoinerId = enableLigatures(terminal, this._fallbackLigatures);
+    terminal.element.style.fontFeatureSettings = this._fontFeatureSettings ?? '"calt" on';
   }
 
   public dispose(): void {
     if (this._characterJoinerId !== undefined) {
       this._terminal?.deregisterCharacterJoiner(this._characterJoinerId);
       this._characterJoinerId = undefined;
     }
+    if (this._terminal?.element) {
+      this._terminal.element.style.fontFeatureSettings = '';
+    }
   }
 }

addons/addon-ligatures/src/Types.ts

@@ -5,4 +5,5 @@
 
 export interface ILigatureOptions {
   fallbackLigatures: string[];
+  fontFeatureSettings: string;
 }

addons/addon-ligatures/typings/addon-ligatures.d.ts

@@ -23,7 +23,10 @@ declare module '@xterm/addon-ligatures' {
     constructor(options?: Partial<ILigatureOptions>);
 
     /**
-     * Activates the addon
+     * Activates the addon. Note that if webgl is also being used, that addon
+     * should be reactivated after ligatures is activated in order to apply
+     * {@link ILigatureOptions.fontFeatureSettings} to the texture atlas.
+     *
      *
      * @param terminal The terminal the addon is being loaded in.
      */
@@ -40,19 +43,28 @@ declare module '@xterm/addon-ligatures' {
    */
   export interface ILigatureOptions {
     /**
-     * Fallback ligatures to use when the font access API is either not supported by the browser or
-     * access is denied. The default set of ligatures is taken from Iosevka's default "calt"
-     * ligation set: https://typeof.net/Iosevka/
+     * Fallback ligatures to use when the font access API is either not
+     * supported by the browser or access is denied. The default set of
+     * ligatures is taken from Iosevka's default "calt" ligation set:
+     * https://typeof.net/Iosevka/
      *
      * ```
      * <-- <--- <<- <- -> ->> --> --->
      * <== <=== <<= <= => =>> ==> ===> >= >>=
-     * <-> <--> <---> <----> <=> <==> <===> <====> -------->
-     * <~~ <~ ~> ~~> :: ::: == != === !==
-     * := :- :+ <* <*> *> <| <|> |> +: -: =: :>
-     * ++ +++ <!-- <!--- <***>
-     * ```
+     * <-> <--> <---> <----> <=> <==> <===> <====> :: :::
+     * <~~ </ </> /> ~~> == != /= ~= <> === !== !===
+     * <: := *= *+ <* <*> *> <| <|> |> +* =* =: :>
+     * /* <close block comment> +++ <!-- <!---
      */
     fallbackLigatures: string[]
+
+    /**
+     * The CSS `font-feature-settings` value to use for enabling ligatures. This
+     * also supports font variants for example with a value like
+     * `"calt" on, "ss03"`.
+     *
+     * The default value is `"calt" on`.
+     */
+    fontFeatureSettings: string;
   }
 }

addons/addon-ligatures/webpack.config.js

@@ -31,10 +31,10 @@ module.exports = {
   },
   mode: 'production',
   externals: {
-    'fs': 'fs',
-    'path': 'path',
-    'stream': 'stream',
-    'util': 'util'
+    'fs': 'commonjs fs',
+    'path': 'commonjs path',
+    'stream': 'commonjs stream',
+    'util': 'commonjs util'
   },
   resolve: {
     // The ligature modules contains fallbacks for node environments, we never want to browserify them

addons/addon-search/src/SearchAddon.ts

@@ -499,12 +499,16 @@ export class SearchAddon extends Disposable implements ITerminalAddon , ISearchA
     const [stringLine, offsets] = cache;
 
     const offset = this._bufferColsToStringOffset(row, col);
-    const searchTerm = searchOptions.caseSensitive ? term : term.toLowerCase();
-    const searchStringLine = searchOptions.caseSensitive ? stringLine : stringLine.toLowerCase();
+    let searchTerm = term;
+    let searchStringLine = stringLine;
+    if (!searchOptions.regex) {
+      searchTerm = searchOptions.caseSensitive ? term : term.toLowerCase();
+      searchStringLine = searchOptions.caseSensitive ? stringLine : stringLine.toLowerCase();
+    }
 
     let resultIndex = -1;
     if (searchOptions.regex) {
-      const searchRegex = RegExp(searchTerm, 'g');
+      const searchRegex = RegExp(searchTerm, searchOptions.caseSensitive ? 'g' : 'gi');
       let foundTerm: RegExpExecArray | null;
       if (isReverseSearch) {
         // This loop will get the resultIndex of the _last_ regex match in the range 0..offset

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

@@ -222,7 +222,7 @@ describe('SerializeAddon', () => {
 
     it('empty terminal with default options', async () => {
       const output = serializeAddon.serializeAsHTML();
-      assert.equal((output.match(/color: #000000; background-color: #ffffff; font-family: courier-new, courier, monospace; font-size: 15px;/g) || []).length, 1, output);
+      assert.equal((output.match(/color: #000000; background-color: #ffffff; font-family: monospace; font-size: 15px;/g) || []).length, 1, output);
     });
 
     it('empty terminal with custom options', async () => {
@@ -242,7 +242,7 @@ describe('SerializeAddon', () => {
       const output = serializeAddon.serializeAsHTML({
         includeGlobalBackground: true
       });
-      assert.equal((output.match(/color: #ffffff; background-color: #000000; font-family: courier-new, courier, monospace; font-size: 15px;/g) || []).length, 1, output);
+      assert.equal((output.match(/color: #ffffff; background-color: #000000; font-family: monospace; font-size: 15px;/g) || []).length, 1, output);
     });
 
     it('cells with custom color styling', async () => {

addons/addon-webgl/src/GlyphRenderer.ts

@@ -238,9 +238,9 @@ export class GlyphRenderer extends Disposable {
 
     // Get the glyph
     if (chars && chars.length > 1) {
-      $glyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg, ext, false);
+      $glyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg, ext, false, this._terminal.element);
     } else {
-      $glyph = this._atlas.getRasterizedGlyph(code, bg, fg, ext, false);
+      $glyph = this._atlas.getRasterizedGlyph(code, bg, fg, ext, false, this._terminal.element);
     }
 
     $leftCellPadding = Math.floor((this._dimensions.device.cell.width - this._dimensions.device.char.width) / 2);