@xterm/addon-ligatures 0.8.0-beta.1

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@xterm/addon-ligatures",
+  "version": "0.8.0-beta.1",
+  "description": "Add support for programming ligatures to xterm.js",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/addon-ligatures.js",
+  "types": "typings/addon-ligatures.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-ligatures",
+  "engines": {
+    "node": ">8.0.0"
+  },
+  "scripts": {
+    "prepare": "node bin/download-fonts.js",
+    "build": "tsc -p src",
+    "watch": "tsc -w -p src",
+    "prepackage": "npm run build",
+    "package": "webpack",
+    "pretest": "npm run build",
+    "test": "nyc mocha out/**/*.test.js",
+    "prepublish": "npm run package"
+  },
+  "keywords": [
+    "font",
+    "ligature",
+    "terminal",
+    "xterm",
+    "xterm.js"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "font-finder": "^1.1.0",
+    "font-ligatures": "^1.4.1"
+  },
+  "devDependencies": {
+    "@types/sinon": "^5.0.1",
+    "axios": "^0.21.2",
+    "mkdirp": "0.5.5",
+    "sinon": "6.3.5",
+    "yauzl": "^2.10.0"
+  },
+  "peerDependencies": {
+    "xterm": "^5.0.0"
+  }
+}

package/src/LigaturesAddon.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Terminal } from '@xterm/xterm';
+import { enableLigatures } from '.';
+import { ILigatureOptions } from './Types';
+
+export interface ITerminalAddon {
+  activate(terminal: Terminal): void;
+  dispose(): void;
+}
+
+export class LigaturesAddon implements ITerminalAddon {
+  private readonly _fallbackLigatures: string[];
+
+  private _terminal: Terminal | undefined;
+  private _characterJoinerId: number | undefined;
+
+  constructor(options?: Partial<ILigatureOptions>) {
+    this._fallbackLigatures = (options?.fallbackLigatures || [
+      '<--', '<---', '<<-', '<-', '->', '->>', '-->', '--->',
+      '<==', '<===', '<<=', '<=', '=>', '=>>', '==>', '===>', '>=', '>>=',
+      '<->', '<-->', '<--->', '<---->', '<=>', '<==>', '<===>', '<====>', '-------->',
+      '<~~', '<~', '~>', '~~>', '::', ':::', '==', '!=', '===', '!==',
+      ':=', ':-', ':+', '<*', '<*>', '*>', '<|', '<|>', '|>', '+:', '-:', '=:', ':>',
+      '++', '+++', '<!--', '<!---', '<***>'
+    ]).sort((a, b) => b.length - a.length);
+  }
+
+  public activate(terminal: Terminal): void {
+    this._terminal = terminal;
+    this._characterJoinerId = enableLigatures(terminal, this._fallbackLigatures);
+  }
+
+  public dispose(): void {
+    if (this._characterJoinerId !== undefined) {
+      this._terminal?.deregisterCharacterJoiner(this._characterJoinerId);
+      this._characterJoinerId = undefined;
+    }
+  }
+}

package/src/Types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2022 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+export interface ILigatureOptions {
+  fallbackLigatures: string[];
+}

package/src/font.ts

@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Font, loadBuffer } from 'font-ligatures';
+
+import parse from './parse';
+
+interface IFontMetadata {
+  family: string;
+  fullName: string;
+  postscriptName: string;
+  blob: () => Promise<Blob>;
+}
+
+interface IFontAccessNavigator {
+  fonts: {
+    query: () => Promise<IFontMetadata[]>;
+  };
+  permissions: {
+    request?: (permission: { name: string }) => Promise<{state: string}>;
+  };
+}
+
+let fontsPromise: Promise<Record<string, IFontMetadata[]>> | undefined = undefined;
+
+/**
+ * Loads the font ligature wrapper for the specified font family if it could be
+ * resolved, throwing if it is unable to find a suitable match.
+ * @param fontFamily The CSS font family definition to resolve
+ * @param cacheSize The size of the ligature cache to maintain if the font is resolved
+ */
+export default async function load(fontFamily: string, cacheSize: number): Promise<Font | undefined> {
+  if (!fontsPromise) {
+    // Web environment that supports font access API
+    if (typeof navigator !== 'undefined' && 'fonts' in navigator) {
+      try {
+        const status = await (navigator as unknown as IFontAccessNavigator).permissions.request?.({
+          name: 'local-fonts'
+        });
+        if (status && status.state !== 'granted') {
+          throw new Error('Permission to access local fonts not granted.');
+        }
+      } catch (err: any) {
+        // A `TypeError` indicates the 'local-fonts'
+        // permission is not yet implemented, so
+        // only `throw` if this is _not_ the problem.
+        if (err.name !== 'TypeError') {
+          throw err;
+        }
+      }
+      const fonts: Record<string, IFontMetadata[]> = {};
+      try {
+        const fontsIterator = await (navigator as unknown as IFontAccessNavigator).fonts.query();
+        for (const metadata of fontsIterator) {
+          if (!fonts.hasOwnProperty(metadata.family)) {
+            fonts[metadata.family] = [];
+          }
+          fonts[metadata.family].push(metadata);
+        }
+        fontsPromise = Promise.resolve(fonts);
+      } catch (err: any) {
+        console.error(err.name, err.message);
+      }
+    }
+    // Latest proposal https://bugs.chromium.org/p/chromium/issues/detail?id=1312603
+    else if (typeof window !== 'undefined' && 'queryLocalFonts' in window) {
+      const fonts: Record<string, IFontMetadata[]> = {};
+      try {
+        const fontsIterator = await (window as any).queryLocalFonts();
+        for (const metadata of fontsIterator) {
+          if (!fonts.hasOwnProperty(metadata.family)) {
+            fonts[metadata.family] = [];
+          }
+          fonts[metadata.family].push(metadata);
+        }
+        fontsPromise = Promise.resolve(fonts);
+      } catch (err: any) {
+        console.error(err.name, err.message);
+      }
+    }
+    if (!fontsPromise) {
+      fontsPromise = Promise.resolve({});
+    }
+  }
+
+  const fonts = await fontsPromise;
+  for (const family of parse(fontFamily)) {
+    // If we reach one of the generic font families, the font resolution
+    // will end for the browser and we can't determine the specific font
+    // used. Throw.
+    if (genericFontFamilies.includes(family)) {
+      return undefined;
+    }
+
+    if (fonts.hasOwnProperty(family) && fonts[family].length > 0) {
+      const font = fonts[family][0];
+      if ('blob' in font) {
+        const bytes = await font.blob();
+        const buffer = await bytes.arrayBuffer();
+        return loadBuffer(buffer, { cacheSize });
+      }
+      return undefined;
+    }
+  }
+
+  // If none of the fonts could resolve, throw an error
+  return undefined;
+}
+
+// https://drafts.csswg.org/css-fonts-4/#generic-font-families
+const genericFontFamilies = [
+  'serif',
+  'sans-serif',
+  'cursive',
+  'fantasy',
+  'monospace',
+  'system-ui',
+  'emoji',
+  'math',
+  'fangsong'
+];

package/src/index.ts

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import type { Terminal } from '@xterm/xterm';
+import { Font } from 'font-ligatures';
+
+import load from './font';
+
+const enum LoadingState {
+  UNLOADED,
+  LOADING,
+  LOADED,
+  FAILED
+}
+
+// Caches 100K characters worth of ligatures. In practice this works out to
+// about 650 KB worth of cache, when a moderate number of ligatures are present.
+const CACHE_SIZE = 100000;
+
+/**
+ * Enable ligature support for the provided Terminal instance. To function
+ * properly, this must be called after `open()` is called on the therminal. If
+ * the font currently in use supports ligatures, the terminal will automatically
+ * start to render them.
+ * @param term Terminal instance from xterm.js
+ */
+export function enableLigatures(term: Terminal, fallbackLigatures: string[] = []): number {
+  let currentFontName: string | undefined = undefined;
+  let font: Font | undefined = undefined;
+  let loadingState: LoadingState = LoadingState.UNLOADED;
+  let loadError: any | undefined = undefined;
+
+  return term.registerCharacterJoiner((text: string): [number, number][] => {
+    // If the font hasn't been loaded yet, load it and return an empty result
+    const termFont = term.options.fontFamily;
+    if (
+      termFont &&
+      (loadingState === LoadingState.UNLOADED || currentFontName !== termFont)
+    ) {
+      font = undefined;
+      loadingState = LoadingState.LOADING;
+      currentFontName = termFont;
+      const currentCallFontName = currentFontName;
+
+      load(currentCallFontName, CACHE_SIZE)
+        .then(f => {
+          // Another request may have come in while we were waiting, so make
+          // sure our font is still vaild.
+          if (currentCallFontName === term.options.fontFamily) {
+            loadingState = LoadingState.LOADED;
+            font = f;
+
+            // Only refresh things if we actually found a font
+            if (f) {
+              term.refresh(0, term.rows - 1);
+            }
+          }
+        })
+        .catch(e => {
+          // Another request may have come in while we were waiting, so make
+          // sure our font is still vaild.
+          if (currentCallFontName === term.options.fontFamily) {
+            loadingState = LoadingState.FAILED;
+            if (term.options.logLevel === 'debug') {
+              console.debug(loadError, new Error('Failure while loading font'));
+            }
+            font = undefined;
+            loadError = e;
+          }
+        });
+    }
+
+    if (font && loadingState === LoadingState.LOADED) {
+      // We clone the entries to avoid the internal cache of the ligature finder
+      // getting messed up.
+      return font.findLigatureRanges(text).map<[number, number]>(
+        range => [range[0], range[1]]
+      );
+    }
+
+    return getFallbackRanges(text, fallbackLigatures);
+  });
+}
+
+function getFallbackRanges(text: string, fallbackLigatures: string[]): [number, number][] {
+  const ranges: [number, number][] = [];
+  for (let i = 0; i < text.length; i++) {
+    for (let j = 0; j < fallbackLigatures.length; j++) {
+      if (text.startsWith(fallbackLigatures[j], i)) {
+        ranges.push([i, i + fallbackLigatures[j].length]);
+        i += fallbackLigatures[j].length - 1;
+        break;
+      }
+    }
+  }
+  return ranges;
+}

package/src/parse.ts

@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+interface IParseContext {
+  input: string;
+  offset: number;
+}
+
+/**
+ * Parses a CSS font family value, returning the component font families
+ * contained within.
+ *
+ * @param family The CSS font family input string to parse
+ */
+export default function parse(family: string): string[] {
+  if (typeof family !== 'string') {
+    throw new Error('Font family must be a string');
+  }
+
+  const context: IParseContext = {
+    input: family,
+    offset: 0
+  };
+
+  const families = [];
+  let currentFamily = '';
+
+  // Work through the input character by character until there are none left.
+  // This lexing and parsing in one pass.
+  while (context.offset < context.input.length) {
+    const char = context.input[context.offset++];
+    switch (char) {
+      // String
+      case '\'':
+      case '"':
+        currentFamily += parseString(context, char);
+        break;
+      // End of family
+      case ',':
+        families.push(currentFamily);
+        currentFamily = '';
+        break;
+      default:
+        // Identifiers (whitespace between families is swallowed)
+        if (!/\s/.test(char)) {
+          context.offset--;
+          currentFamily += parseIdentifier(context);
+          families.push(currentFamily);
+          currentFamily = '';
+        }
+    }
+  }
+
+  return families;
+}
+
+/**
+ * Parse a CSS string.
+ *
+ * @param context Parsing input and offset
+ * @param quoteChar The quote character for the string (' or ")
+ */
+function parseString(context: IParseContext, quoteChar: '\'' | '"'): string {
+  let str = '';
+  let escaped = false;
+  while (context.offset < context.input.length) {
+    const char = context.input[context.offset++];
+    if (escaped) {
+      if (/[\dA-Fa-f]/.test(char)) {
+        // Unicode escape
+        context.offset--;
+        str += parseUnicode(context);
+      } else if (char !== '\n') {
+        // Newlines are ignored if escaped. Other characters are used as is.
+        str += char;
+      }
+      escaped = false;
+    } else {
+      switch (char) {
+        // Terminated quote
+        case quoteChar:
+          return str;
+        // Begin escape
+        case '\\':
+          escaped = true;
+          break;
+        // Add character to string
+        default:
+          str += char;
+      }
+    }
+  }
+
+  throw new Error('Unterminated string');
+}
+
+/**
+ * Parse a CSS custom identifier.
+ *
+ * @param context Parsing input and offset
+ */
+function parseIdentifier(context: IParseContext): string {
+  let str = '';
+  let escaped = false;
+  while (context.offset < context.input.length) {
+    const char = context.input[context.offset++];
+    if (escaped) {
+      if (/[\dA-Fa-f]/.test(char)) {
+        // Unicode escape
+        context.offset--;
+        str += parseUnicode(context);
+      } else {
+        // Everything else is used as is
+        str += char;
+      }
+      escaped = false;
+    } else {
+      switch (char) {
+        // Begin escape
+        case '\\':
+          escaped = true;
+          break;
+        // Terminate identifier
+        case ',':
+          return str;
+        default:
+          if (/\s/.test(char)) {
+            // Whitespace is collapsed into a single space within an identifier
+            if (!str.endsWith(' ')) {
+              str += ' ';
+            }
+          } else {
+            // Add other characters directly
+            str += char;
+          }
+      }
+    }
+  }
+
+  return str;
+}
+
+/**
+ * Parse a CSS unicode escape.
+ *
+ * @param context Parsing input and offset
+ */
+function parseUnicode(context: IParseContext): string {
+  let str = '';
+  while (context.offset < context.input.length) {
+    const char = context.input[context.offset++];
+    if (/\s/.test(char)) {
+      // The first whitespace character after a unicode escape indicates the end
+      // of the escape and is swallowed.
+      return unicodeToString(str);
+    }
+    if (str.length >= 6 || !/[\dA-Fa-f]/.test(char)) {
+      // If the next character is not a valid hex digit or we have reached the
+      // maximum of 6 digits in the escape, terminate the escape.
+      context.offset--;
+      return unicodeToString(str);
+    }
+
+    // Otherwise, just add it to the escape
+    str += char;
+  }
+
+  return unicodeToString(str);
+}
+
+/**
+ * Convert a unicode code point from a hex string to a utf8 string.
+ *
+ * @param codePoint Unicode code point represented as a hex string
+ */
+function unicodeToString(codePoint: string): string {
+  return String.fromCodePoint(parseInt(codePoint, 16));
+}

package/typings/addon-ligatures.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ *
+ * This contains the type declarations for the @xterm/addon-ligatures library.
+ * Note that some interfaces may differ between this file and the actual
+ * implementation in src/, that's because this file declares the *public* API
+ * which is intended to be stable and consumed by external programs.
+ */
+
+import { Terminal, ITerminalAddon } from '@xterm/xterm';
+
+declare module '@xterm/addon-ligatures' {
+  /**
+   * An xterm.js addon that enables web links.
+   */
+  export class LigaturesAddon implements ITerminalAddon {
+    /**
+     * Creates a new ligatures addon.
+     *
+     * @param options Options for the ligatures addon.
+     */
+    constructor(options?: Partial<ILigatureOptions>);
+
+    /**
+     * Activates the addon
+     *
+     * @param terminal The terminal the addon is being loaded in.
+     */
+    public activate(terminal: Terminal): void;
+
+    /**
+     * Disposes the addon.
+     */
+    public dispose(): void;
+  }
+
+  /**
+   * Options for the ligatures addon.
+   */
+  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/
+     *
+     * ```
+     * <-- <--- <<- <- -> ->> --> --->
+     * <== <=== <<= <= => =>> ==> ===> >= >>=
+     * <-> <--> <---> <----> <=> <==> <===> <====> -------->
+     * <~~ <~ ~> ~~> :: ::: == != === !==
+     * := :- :+ <* <*> *> <| <|> |> +: -: =: :>
+     * ++ +++ <!-- <!--- <***>
+     * ```
+     */
+    fallbackLigatures: string[]
+  }
+}