### Install Dependencies and Setup
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Install project dependencies and run the setup script before building and launching the demo.
```sh
npm ci
npm run setup
```
--------------------------------
### Build and Launch Demo
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Build all sources and launch the development demo after dependencies are installed and setup is complete.
```sh
npm run dev
```
--------------------------------
### Standalone HTML Example
Source: https://github.com/xtermjs/xterm.js/blob/master/README.md
A complete HTML file demonstrating the basic setup of xterm.js, including CSS and script includes, terminal instantiation, and initial output.
```html
```
--------------------------------
### Install @xterm/addon-search
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-search/README.md
Install the search addon using npm.
```bash
npm install --save @xterm/addon-search
```
--------------------------------
### Install Addon
Source: https://github.com/xtermjs/xterm.js/blob/master/README.md
Install an xterm.js addon, such as addon-web-links, using npm.
```bash
npm install --save @xterm/addon-web-links
```
--------------------------------
### Install Ligatures Addon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-ligatures/README.md
Install the addon using npm. This is the first step before using it in your project.
```bash
npm install --save @xterm/addon-ligatures
```
--------------------------------
### Install xterm.js
Source: https://github.com/xtermjs/xterm.js/blob/master/README.md
Install the xterm.js package as a dependency using npm.
```bash
npm install --save @xterm/xterm
```
--------------------------------
### Install Progress Addon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-progress/README.md
Install the addon using npm. This command adds the necessary package to your project's dependencies.
```bash
npm install --save @xterm/addon-progress
```
--------------------------------
### Install @xterm/addon-serialize
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-serialize/README.md
Install the addon using npm. This command adds the package to your project's dependencies.
```bash
npm install --save @xterm/addon-serialize
```
--------------------------------
### Install @xterm/addon-web-links
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-web-links/README.md
Install the addon using npm. This addon requires xterm.js v4+.
```bash
npm install --save @xterm/addon-web-links
```
--------------------------------
### Benchmark Execution for SerializeAddon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-serialize/README.md
Run benchmarks for the addon to evaluate performance. Ensure 'lolcat' and 'hexdump' are installed. This involves cloning the repository, installing dependencies, and running benchmark scripts.
```shell
$ git clone https://github.com/xtermjs/xterm.js.git
$ cd xterm.js
$ npm ci
$ cd addons/addon-serialize
$ npm run benchmark && npm run benchmark-baseline
$ # change some code in `@xterm/addon-serialize`
$ npm run benchmark-eval
```
--------------------------------
### Install Unicode11 Addon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-unicode11/README.md
Install the addon using npm. This command adds the package to your project's dependencies.
```bash
npm install --save @xterm/addon-unicode11
```
--------------------------------
### Install @xterm/addon-image
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-image/README.md
Install the addon using npm. This command adds the package to your project's dependencies.
```bash
npm install --save @xterm/addon-image
```
--------------------------------
### Install WebGL Addon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-webgl/README.md
Install the WebGL addon using npm. This command adds the addon to your project dependencies.
```bash
npm install --save @xterm/addon-webgl
```
--------------------------------
### Install @xterm/addon-attach
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-attach/README.md
Install the addon using npm. This command adds the package to your project's dependencies.
```bash
npm install --save @xterm/addon-attach
```
--------------------------------
### Dependency Injection Example
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Demonstrates how to use dependency injection with the IInstantiationService by injecting IBufferService into a class constructor.
```ts
class Example {
constructor(
@IBufferService bufferService: IBufferService
) {
}
}
```
--------------------------------
### Install @xterm/addon-fit
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-fit/README.md
Install the addon using npm. This addon requires xterm.js v4 or later.
```bash
npm install --save @xterm/addon-fit
```
--------------------------------
### Install @xterm/addon-clipboard
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-clipboard/README.md
Install the clipboard addon using npm. This addon requires xterm.js v4 or later.
```bash
npm install --save @xterm/addon-clipboard
```
--------------------------------
### Install Latest Beta Build with npm
Source: https://github.com/xtermjs/xterm.js/blob/master/README.md
Install the latest beta build of xterm.js using npm. This is useful for testing new features or verifying bug fixes.
```bash
npm install --save @xterm/xterm@beta
```
--------------------------------
### Initialize and Load Ligatures Addon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-ligatures/README.md
Import and initialize the Terminal and LigaturesAddon, then load the addon into the terminal instance. This setup is required to enable ligatures.
```typescript
import { Terminal } from '@xterm/xterm';
import { LigaturesAddon } from '@xterm/addon-ligatures';
const terminal = new Terminal();
const ligaturesAddon = new LigaturesAddon();
terminal.open(containerElement);
terminal.loadAddon(ligaturesAddon);
```
--------------------------------
### Basic Usage of Clipboard Addon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-clipboard/README.md
Load the ClipboardAddon into a Terminal instance. Ensure xterm.js v4+ is installed.
```typescript
import { Terminal } from 'xterm';
import { ClipboardAddon } from '@xterm/addon-clipboard';
const terminal = new Terminal();
const clipboardAddon = new ClipboardAddon();
terminal.loadAddon(clipboardAddon);
```
--------------------------------
### Install @xterm/addon-web-fonts
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-web-fonts/README.md
Install the addon using npm. This addon requires xterm.js v5 or later.
```bash
npm install --save @xterm/addon-web-fonts
```
--------------------------------
### Install xterm.js Headless
Source: https://github.com/xtermjs/xterm.js/blob/master/headless/README.md
Install the @xterm/headless module using npm. This is the first step to using the headless terminal in your Node.js project.
```sh
npm install @xterm/headless
```
--------------------------------
### Terminal Bootstrapping with Static WebFontsLoader (TypeScript)
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-web-fonts/README.md
Use the static loader to load webfonts before terminal setup, simplifying bootstrapping by omitting addon creation.
```typescript
import { Terminal } from '@xterm/xterm';
import { XYAddon } from '@xterm/addon-xy';
// import static loader
import { loadFonts } from '@xterm/addon-web-fonts';
loadFonts(['Web Mono 1', 'Super Powerline']).then(() => {
// create a `Terminal` instance, now with webfonts
const terminal = new Terminal({fontFamily: '"Web Mono 1", "Super Powerline", monospace'});
const xyInstance = new XYAddon();
terminal.loadAddon(xyInstance);
// optional when using static loader
const webfontsInstance = new WebFontsAddon();
terminal.loadAddon(webfontsInstance);
terminal.open(your_terminal_div_element);
// more boostrapping goes here ...
});
```
--------------------------------
### Basic Usage of FitAddon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-fit/README.md
Load the FitAddon and use it to fit the terminal to its container. Ensure xterm.js v4+ is installed.
```typescript
import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';
const terminal = new Terminal();
const fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);
terminal.open(containerElement);
fitAddon.fit();
```
--------------------------------
### Record Frame Start Time (TypeScript)
Source: https://github.com/xtermjs/xterm.js/wiki/Performance-testing
Place this line at the beginning of the _renderRows function to capture the start time of each rendering frame.
```typescript
const startTime = performance.now();
```
--------------------------------
### Initialize Terminal with WebGL Addon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-webgl/README.md
Load the WebGL addon into an existing xterm.js Terminal instance. Ensure xterm.js v4+ is installed.
```typescript
import { Terminal } from '@xterm/xterm';
import { WebglAddon } from '@xterm/addon-webgl';
const terminal = new Terminal();
terminal.open(element);
terminal.loadAddon(new WebglAddon());
```
--------------------------------
### Load Web Fonts with Fontsource and Vite
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-web-fonts/README.md
Example of integrating custom web fonts using Fontsource with Vite and ESM imports. Includes fallback to monospace if font loading fails.
```javascript
import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';
import { loadFonts } from '@xterm/addon-web-fonts';
import '@xterm/xterm/css/xterm.css';
import '@fontsource/roboto-mono';
import '@fontsource/roboto-mono/400.css';
import '@fontsource/roboto-mono/400-italic.css';
import '@fontsource/roboto-mono/700.css';
import '@fontsource/roboto-mono/700-italic.css';
async function main() {
let fontFamily = '"Roboto Mono", monospace';
try {
await loadFonts(['Roboto Mono']);
} catch (e) {
fontFamily = 'monospace';
}
const terminal = new Terminal({ fontFamily });
const fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);
terminal.open(document.getElementById('your-xterm-container-div'));
fitAddon.fit();
// sync writing shows up in Roboto Mono w'o FOUT
// and a fallback to monospace
terminal.write('put any unicode char here');
}
main();
```
--------------------------------
### Load WebLinksAddon in xterm.js
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-web-links/README.md
Import and load the WebLinksAddon into your xterm.js Terminal instance. Ensure xterm.js v4+ is installed.
```typescript
import { Terminal } from '@xterm/xterm';
import { WebLinksAddon } from '@xterm/addon-web-links';
const terminal = new Terminal();
terminal.loadAddon(new WebLinksAddon());
```
--------------------------------
### Breaking Change Example
Source: https://github.com/xtermjs/xterm.js/wiki/Release-notes-template
Illustrates a breaking change in the API between versions. Use this section to detail specific API modifications that may require users to update their code.
```typescript
// before x.y.z
...
// after x.y.z
...
```
--------------------------------
### Instantiate and Write to Terminal
Source: https://github.com/xtermjs/xterm.js/blob/master/README.md
Create a new Terminal instance, open it on a DOM element, and write initial text to it.
```javascript
const term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
```
--------------------------------
### Initialize ImageAddon with Custom Settings
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-image/README.md
Initialize the Terminal and ImageAddon with custom configuration options. This snippet shows how to set various parameters for image display.
```typescript
import { Terminal } from '@xterm/xterm';
import { ImageAddon, IImageAddonOptions } from '@xterm/addon-image';
// customize as needed (showing addon defaults)
const customSettings: IImageAddonOptions = {
enableSizeReports: true, // whether to enable CSI t reports (see below)
pixelLimit: 16777216, // max. pixel size of a single image
sixelSupport: true, // enable sixel support
sixelScrolling: true, // whether to scroll on image output
sixelPaletteLimit: 4096, // initial sixel palette size
sixelSizeLimit: 33554432, // size limit of a single sixel sequence
storageLimit: 128, // FIFO storage limit in MB
showPlaceholder: true, // whether to show a placeholder for evicted images
iipSupport: true, // enable iTerm IIP support
iipSizeLimit: 33554432, // size limit of a single IIP sequence
kittySupport: true, // enable Kitty graphics support
kittySizeLimit: 33554432 // size limit of a single Kitty sequence
}
// initialization
const terminal = new Terminal();
const imageAddon = new ImageAddon(customSettings);
terminal.loadAddon(imageAddon);
```
--------------------------------
### Instantiate Class with Dependency Injection
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Shows how to create an instance of a class that uses dependency injection by utilizing the IInstantiationService.
```ts
const example = instantiationService.createInstance(Example);
```
--------------------------------
### Registering a New Service for DI
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Illustrates the process of implementing and registering a new service for dependency injection. A service must have a 'serviceBrand' property and be registered with the IInstantiationService.
```ts
interface IExampleService {
serviceBrand: undefined;
}
class ExampleServiceImpl implements IExampleService {
public serviceBrand: undefined;
}
const exampleServiceImpl = new ExampleServiceImpl();
this._instantiationService.setService(IExampleService, exampleServiceImpl);
```
--------------------------------
### Basic Terminal Bootstrapping (TypeScript)
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-web-fonts/README.md
Standard terminal initialization without webfonts. This code is guaranteed to work synchronously.
```typescript
import { Terminal } from '@xterm/xterm';
import { XYAddon } from '@xterm/addon-xy';
// create a `Terminal` instance with some options, e.g. a custom font family
const terminal = new Terminal({fontFamily: 'monospace'});
// create and load all addons you want to use, e.g. fit addon
const xyInstance = new XYAddon();
terminal.loadAddon(xyInstance);
// finally: call `open` of the terminal instance
terminal.open(your_terminal_div_element); // <-- critical path for webfonts
// more boostrapping goes here ...
```
--------------------------------
### Basic Usage of SearchAddon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-search/README.md
Load the SearchAddon and perform a basic search for 'foo'.
```typescript
import { Terminal } from '@xterm/xterm';
import { SearchAddon } from '@xterm/addon-search';
const terminal = new Terminal();
const searchAddon = new SearchAddon();
terminal.loadAddon(searchAddon);
searchAddon.findNext('foo');
```
--------------------------------
### Terminal Bootstrapping with WebFontsAddon (TypeScript)
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-web-fonts/README.md
Initialize a terminal with webfonts, ensuring they are loaded before opening the terminal. Requires CSS font-face rules to be loaded beforehand.
```typescript
import { Terminal } from '@xterm/xterm';
import { XYAddon } from '@xterm/addon-xy';
import { WebFontsAddon } from '@xterm/addon-web-fonts';
// create a `Terminal` instance, now with webfonts
const terminal = new Terminal({fontFamily: '"Web Mono 1", "Super Powerline", monospace'});
const xyInstance = new XYAddon();
terminal.loadAddon(xyInstance);
const webFontsInstance = new WebFontsAddon();
terminal.loadAddon(webFontsInstance);
// wait for webfonts to be fully loaded
webFontsInstance.loadFonts(['Web Mono 1', 'Super Powerline']).then(() => {
terminal.open(your_terminal_div_element);
// more boostrapping goes here ...
});
```
--------------------------------
### Run Multiple Unit Test Files
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Execute unit tests for multiple specific files by listing them with their paths.
```sh
npm run test-unit out-esbuild/**/Terminal.test.js out-esbuild/**/InputHandler.test.js
```
--------------------------------
### Run All Unit Tests
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Execute all unit tests using the npm script. This command runs tests located in the esbuild output directory.
```sh
npm run test-unit
```
--------------------------------
### Initialize and Load Progress Addon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-progress/README.md
Load the ProgressAddon into an xterm.js Terminal instance. This sets up the terminal to recognize and process progress sequences.
```typescript
import { Terminal } from '@xterm/xterm';
import { ProgressAddon, IProgressState } from '@xterm/addon-progress';
const terminal = new Terminal();
const progressAddon = new ProgressAddon();
terminal.loadAddon(progressAddon);
progressAddon.onChange({state, value}: IProgressState) => {
// state: 0-4 integer (see below for meaning)
// value: 0-100 integer (percent value)
// do your visualisation based on state/value here
...
});
```
--------------------------------
### Run Specific Addon Unit Tests
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Execute unit tests for a specific addon by providing a path pattern that targets its test files.
```sh
npm run test-unit addons/addon-image/out-esbuild/*.test.js
```
--------------------------------
### Run Specific Addon Integration Tests
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Execute integration tests for a specific addon by specifying its suite name.
```sh
npm run test-integration --suite=addon-search
```
--------------------------------
### Lint API typings in xterm.js
Source: https://github.com/xtermjs/xterm.js/blob/master/AGENTS.md
Runs linting specifically for the 'typings/' directory.
```bash
npm run lint-api
```
--------------------------------
### Build xterm.js
Source: https://github.com/xtermjs/xterm.js/blob/master/AGENTS.md
Builds all TypeScript code and bundles the project using npm scripts.
```bash
npm run build && npm run esbuild # Build all TypeScript and bundle
```
--------------------------------
### Load WebLinksAddon
Source: https://github.com/xtermjs/xterm.js/blob/master/README.md
Import and load the WebLinksAddon to enable web link detection and interaction within the terminal. This requires importing both Terminal and the specific addon.
```typescript
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
// working in the terminal.
terminal.loadAddon(new WebLinksAddon());
```
--------------------------------
### Run Unit Tests by Absolute File Path
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Execute unit tests for a specific file by providing its absolute path.
```sh
npm run test-unit out-esbuild/browser/Terminal.test.js
```
--------------------------------
### Run Unit Tests by Wildcard Filter
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Execute unit tests by filtering files using a wildcard pattern. This is useful for running tests in a specific directory or matching a naming convention.
```sh
npm run test-unit out-esbuild/**/Terminal.test.js
```
--------------------------------
### Run Core Integration Tests
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Execute only the core integration tests by specifying the 'core' suite.
```sh
npm run test-integration --suite=core
```
--------------------------------
### Custom Clipboard Provider Implementation
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-clipboard/README.md
Implement a custom clipboard provider by extending IClipboardProvider. This allows for custom text encoding/decoding logic.
```typescript
import { Terminal } from '@xterm/xterm';
import { ClipboardAddon, IClipboardProvider, ClipboardSelectionType } from '@xterm/addon-clipboard';
function b64Encode(data: string): string {
// Base64 encode impl
}
function b64Decode(data: string): string {
// Base64 decode impl
}
class MyCustomClipboardProvider implements IClipboardProvider {
private _data: string
public readText(selection: ClipboardSelectionType): Promise {
return Promise.resolve(b64Encode(this._data));
}
public writeText(selection: ClipboardSelectionType, data: string): Promise {
this._data = b64Decode(data);
return Promise.resolve();
}
}
const terminal = new Terminal();
const clipboardAddon = new ClipboardAddon(new MyCustomClipboardProvider());
terminal.loadAddon(clipboardAddon);
```
--------------------------------
### Run Unit Tests in xterm.js
Source: https://github.com/xtermjs/xterm.js/blob/master/AGENTS.md
Executes all unit tests for the project using Mocha.
```bash
npm run test-unit
```
--------------------------------
### Basic HTML Structure for xterm.js Fixture
Source: https://github.com/xtermjs/xterm.js/blob/master/demo/test.html
This snippet shows the fundamental HTML and CSS required to set up a test environment for xterm.js. It defines basic styling for the body and a container for the terminal.
```html
xterm.js integration test fixture
```
--------------------------------
### Run Linting in xterm.js
Source: https://github.com/xtermjs/xterm.js/blob/master/AGENTS.md
Performs linting using oxlint with type-aware rules, followed by ESLint for naming conventions.
```bash
npm run lint
```
--------------------------------
### Basic Usage of AttachAddon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-attach/README.md
Load the AttachAddon into your xterm.js Terminal instance. Ensure you have imported Terminal and AttachAddon, and have a WebSocket instance available.
```typescript
import { Terminal } from '@xterm/xterm';
import { AttachAddon } from '@xterm/addon-attach';
const terminal = new Terminal();
const attachAddon = new AttachAddon(webSocket);
terminal.loadAddon(attachAddon);
```
--------------------------------
### Create Patch Release Branch
Source: https://github.com/xtermjs/xterm.js/wiki/Releasing
After checking out the released tag, create a new branch for the patch release.
```bash
git checkout -b release/3.9
```
--------------------------------
### Run Per-Addon Unit Tests in xterm.js
Source: https://github.com/xtermjs/xterm.js/blob/master/AGENTS.md
Executes unit tests specifically for an addon, targeting its output files.
```bash
npm run test-unit -- addons/addon-image/out-esbuild/*.test.js
```
--------------------------------
### Run All Integration Tests
Source: https://github.com/xtermjs/xterm.js/wiki/Contributing
Execute all integration tests using the npm script. These tests are run using Playwright.
```sh
npm run test-integration
```
--------------------------------
### Basic Usage of SerializeAddon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-serialize/README.md
Load the SerializeAddon into a Terminal instance and serialize its content. The serialized output is logged to the console.
```typescript
import { Terminal } from "@xterm/xterm";
import { SerializeAddon } from "@xterm/addon-serialize";
const terminal = new Terminal();
const serializeAddon = new SerializeAddon();
terminal.loadAddon(serializeAddon);
terminal.write("something...", () => {
console.log(serializeAddon.serialize());
});
```
--------------------------------
### Checkout Released Tag for Patch Release
Source: https://github.com/xtermjs/xterm.js/wiki/Releasing
Before creating a patch release, checkout the specific tag of the released version you are patching from.
```bash
git checkout 3.9.0
```
--------------------------------
### Filter Integration Tests by Addon Suite in xterm.js
Source: https://github.com/xtermjs/xterm.js/blob/master/AGENTS.md
Runs integration tests, filtering them by a specific addon suite. Suites follow the 'addon-' format.
```bash
npm run test-integration -- --suite=addon-search
```
--------------------------------
### Basic xterm.js Addon Structure
Source: https://github.com/xtermjs/xterm.js/blob/master/AGENTS.md
Implement the `ITerminalAddon` interface to create a new addon. The `activate` method is called when the addon is loaded, and `dispose` is used for cleanup.
```typescript
export class MyAddon implements ITerminalAddon {
activate(terminal: Terminal): void {
// Called when loaded via terminal.loadAddon()
// Register handlers, access terminal APIs
}
dispose(): void {
// Cleanup when addon is disposed
}
}
```
--------------------------------
### Load and Activate Unicode11 Addon
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-unicode11/README.md
Import and load the Unicode11Addon into an xterm.js Terminal instance. After loading, set the active Unicode version to '11' to enable its features.
```typescript
import { Terminal } from '@xterm/xterm';
import { Unicode11Addon } from '@xterm/addon-unicode11';
const terminal = new Terminal();
const unicode11Addon = new Unicode11Addon();
terminal.loadAddon(unicode11Addon);
// activate the new version
terminal.unicode.activeVersion = '11';
```
--------------------------------
### Generate Performance Report (JavaScript)
Source: https://github.com/xtermjs/xterm.js/wiki/Performance-testing
Execute this command in the browser's developer console after performing actions to generate and display the performance report, including frame count and average frame time.
```javascript
window.report();
```
--------------------------------
### Loading Webfont at Runtime with FontFace objects (TypeScript)
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-web-fonts/README.md
Dynamically load new webfonts at runtime using FontFace objects and apply them to an existing terminal. Requires the fit addon to be run after applying the new font.
```typescript
// either create font face objects in javascript
const ff1 = new FontFace('New Web Mono', url1, ...);
const ff2 = new FontFace('New Web Mono', url2, ...);
// and await their loading
loadFonts([ff1, ff2]).then(() => {
// apply new webfont to terminal
terminal.options.fontFamily = 'New Web Mono';
// since the new font might have slighly different metrics,
// also run the fit addon here (or any other custom resize logic)
fitAddon.fit();
});
```
--------------------------------
### Loading Webfont at Runtime with CSS (TypeScript)
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-web-fonts/README.md
Load new webfonts at runtime by adding CSS font-face rules and then using loadFonts with the font family name. Requires the fit addon to be run after applying the new font.
```typescript
// or alternatively use CSS to add new font-face rules, e.g.
document.styleSheets[0].insertRule(
"@font-face { font-family: 'New Web Mono'; src: url(newfont.woff); }", 0);
// and await the new font family name
loadFonts(['New Web Mono']).then(() => {
// apply new webfont to terminal
terminal.options.fontFamily = 'New Web Mono';
// since the new font might have slighly different metrics,
// also run the fit addon here (or any other custom resize logic)
fitAddon.fit();
});
```
--------------------------------
### Import xterm.js Headless
Source: https://github.com/xtermjs/xterm.js/blob/master/headless/README.md
Import the Terminal class from @xterm/headless using TypeScript and ES6 module syntax. This is the recommended way to load the package.
```javascript
import { Terminal } from '@xterm/headless';
```
--------------------------------
### Filter Integration Tests by File in xterm.js
Source: https://github.com/xtermjs/xterm.js/blob/master/AGENTS.md
Runs integration tests, filtering them to a specific test file.
```bash
npm run test-integration -- test/playwright/InputHandler.test.ts
```
--------------------------------
### Filter Unit Tests by File in xterm.js
Source: https://github.com/xtermjs/xterm.js/blob/master/AGENTS.md
Runs unit tests, filtering them to a specific file using a glob pattern.
```bash
npm run test-unit -- **/fileName.ts
```
--------------------------------
### Preload Webfonts with Link Tags
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-web-fonts/README.md
Preload font files by adding link elements to the document's head. This can increase initial loading times but ensures fonts are available for xterm.js.
```html
...
```
--------------------------------
### Progress Sequence Format
Source: https://github.com/xtermjs/xterm.js/blob/master/addons/addon-progress/README.md
The ANSI escape sequence format for setting progress information. This sequence is used to communicate progress states and values to the addon.
```plain
ESC ] 9 ; 4 ; ;