@xterm/xterm 6.1.0-beta.28 → 6.1.0-beta.281

package/src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -3,18 +3,19 @@
  * @license MIT
  */
 
-import { IBufferLine, ICellData, IColor } from 'common/Types';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
-import { WHITESPACE_CELL_CHAR, Attributes } from 'common/buffer/Constants';
-import { CellData } from 'common/buffer/CellData';
-import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { channels, color } from 'common/Color';
-import { ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { JoinedCellData } from 'browser/services/CharacterJoinerService';
-import { treatGlyphAsBackgroundColor } from 'browser/renderer/shared/RendererUtils';
-import { AttributeData } from 'common/buffer/AttributeData';
-import { WidthCache } from 'browser/renderer/dom/WidthCache';
-import { IColorContrastCache } from 'browser/Types';
+import { IColor } from '../../../common/Types';
+import { IBufferLine, ICellData } from '../../../common/buffer/Types';
+import { INVERTED_DEFAULT_COLOR } from '../shared/Constants';
+import { WHITESPACE_CELL_CHAR, Attributes } from '../../../common/buffer/Constants';
+import { CellData } from '../../../common/buffer/CellData';
+import { ICoreService, IDecorationService, IOptionsService } from '../../../common/services/Services';
+import { channels, color } from '../../../common/Color';
+import { ICharacterJoinerService, ICoreBrowserService, IThemeService } from '../../services/Services';
+import { JoinedCellData } from '../../services/CharacterJoinerService';
+import { treatGlyphAsBackgroundColor } from '../shared/RendererUtils';
+import { AttributeData } from '../../../common/buffer/AttributeData';
+import { WidthCache } from './WidthCache';
+import { IColorContrastCache } from '../../Types';
 
 
 export const enum RowCss {
@@ -24,6 +25,7 @@ export const enum RowCss {
   UNDERLINE_CLASS = 'xterm-underline',
   OVERLINE_CLASS = 'xterm-overline',
   STRIKETHROUGH_CLASS = 'xterm-strikethrough',
+  BLINK_HIDDEN_CLASS = 'xterm-blink-hidden',
   CURSOR_CLASS = 'xterm-cursor',
   CURSOR_BLINK_CLASS = 'xterm-cursor-blink',
   CURSOR_STYLE_BLOCK_CLASS = 'xterm-cursor-block',
@@ -66,13 +68,18 @@ export class DomRendererRowFactory {
     cursorInactiveStyle: string | undefined,
     cursorX: number,
     cursorBlink: boolean,
+    blinkOn: boolean,
     cellWidth: number,
     widthCache: WidthCache,
     linkStart: number,
-    linkEnd: number
+    linkEnd: number,
+    rowInfo?: { hasBlinkingCells: boolean }
   ): HTMLSpanElement[] {
 
     const elements: HTMLSpanElement[] = [];
+    if (rowInfo) {
+      rowInfo.hasBlinkingCells = false;
+    }
     const joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
     const colors = this._themeService.colors;
 
@@ -84,14 +91,14 @@ export class DomRendererRowFactory {
     let charElement: HTMLSpanElement | undefined;
     let cellAmount = 0;
     let text = '';
-    let i = 0;
+    let i;
     let oldBg = 0;
     let oldFg = 0;
     let oldExt = 0;
     let oldLinkHover: number | boolean = false;
     let oldSpacing = 0;
     let oldIsInSelection: boolean = false;
-    let spacing = 0;
+    let spacing;
     let skipJoinedCheckUntilX = 0;
     const classes: string[] = [];
 
@@ -118,7 +125,7 @@ export class DomRendererRowFactory {
       // Process any joined character ranges as needed. Because of how the
       // ranges are produced, we know that they are valid for the characters
       // and attributes of our input.
-      let cell = this._workCell;
+      let cell: ICellData = this._workCell;
       if (joinedRanges.length > 0 && x === joinedRanges[0][0] && isValidJoinRange) {
         const range = joinedRanges.shift()!;
         // If the ligature's selection state is not consistent, don't join it. This helps the
@@ -153,6 +160,13 @@ export class DomRendererRowFactory {
       const isInSelection = this._isCellInSelection(x, row);
       const isCursorCell = isCursorRow && x === cursorX;
       const isLinkHover = hasHover && x >= linkStart && x <= linkEnd;
+      if (rowInfo && cell.isBlink()) {
+        rowInfo.hasBlinkingCells = true;
+      }
+      const isBlinkHidden = !blinkOn && cell.isBlink();
+      if (isBlinkHidden) {
+        classes.push(RowCss.BLINK_HIDDEN_CLASS);
+      }
 
       let isDecorated = false;
       this._decorationService.forEachDecorationAtCell(x, row, undefined, d => {
@@ -397,7 +411,7 @@ export class DomRendererRowFactory {
           break;
         case Attributes.CM_RGB:
           resolvedBg = channels.toColor(bg >> 16, bg >> 8 & 0xFF, bg & 0xFF);
-          this._addStyle(charElement, `background-color:#${padStart((bg >>> 0).toString(16), '0', 6)}`);
+          this._addStyle(charElement, `background-color:#${(bg >>> 0).toString(16).padStart(6, '0')}`);
           break;
         case Attributes.CM_DEFAULT:
         default:
@@ -434,7 +448,7 @@ export class DomRendererRowFactory {
             (fg      ) & 0xFF
           );
           if (!this._applyMinimumContrast(charElement, resolvedBg, color, cell, bgOverride, fgOverride)) {
-            this._addStyle(charElement, `color:#${padStart(fg.toString(16), '0', 6)}`);
+            this._addStyle(charElement, `color:#${fg.toString(16).padStart(6, '0')}`);
           }
           break;
         case Attributes.CM_DEFAULT:
@@ -494,8 +508,8 @@ export class DomRendererRowFactory {
       // Dim cells only require half the contrast, otherwise they wouldn't be distinguishable from
       // non-dim cells
       const ratio = this._optionsService.rawOptions.minimumContrastRatio / (cell.isDim() ? 2 : 1);
-      adjustedColor = color.ensureContrastRatio(bgOverride || bg, fgOverride || fg, ratio);
-      cache.setColor((bgOverride || bg).rgba, (fgOverride || fg).rgba, adjustedColor ?? null);
+      adjustedColor = color.ensureContrastRatio(bgOverride ?? bg, fgOverride ?? fg, ratio);
+      cache.setColor((bgOverride ?? bg).rgba, (fgOverride ?? fg).rgba, adjustedColor ?? null);
     }
 
     if (adjustedColor) {
@@ -537,10 +551,3 @@ export class DomRendererRowFactory {
         (start[1] < end[1] && y === start[1] && x >= start[0]);
   }
 }
-
-function padStart(text: string, padChar: string, length: number): string {
-  while (text.length < length) {
-    text = padChar + text;
-  }
-  return text;
-}

package/src/browser/renderer/dom/WidthCache.ts

@@ -3,8 +3,9 @@
  * @license MIT
  */
 
-import { IDisposable } from 'common/Types';
-import { FontWeight } from 'common/services/Services';
+import { throwIfFalsy } from '../shared/RendererUtils';
+import { IDisposable } from '../../../common/Types';
+import { FontWeight } from '../../../common/services/Services';
 
 
 export const enum WidthCacheSettings {
@@ -24,6 +25,10 @@ const enum FontVariant {
   BOLD_ITALIC = 3
 }
 
+export interface IWidthCacheFontVariantCanvas {
+  setFont(fontFamily: string, fontSize: number, fontWeight: FontWeight, italic: boolean): void;
+  measure(c: string): number;
+}
 
 export class WidthCache implements IDisposable {
   // flat cache for regular variant up to CacheSettings.FLAT_SIZE
@@ -42,50 +47,24 @@ export class WidthCache implements IDisposable {
   private _fontSize = 0;
   private _weight: FontWeight = 'normal';
   private _weightBold: FontWeight = 'bold';
-  private _container: HTMLDivElement;
-  private _measureElements: HTMLSpanElement[] = [];
-
-  constructor(_document: Document, _helperContainer: HTMLElement) {
-    this._container = _document.createElement('div');
-    this._container.classList.add('xterm-width-cache-measure-container');
-    this._container.setAttribute('aria-hidden', 'true');
-    // SP should stack in spans
-    this._container.style.whiteSpace = 'pre';
-    // avoid undercuts in non-monospace fonts from kerning
-    this._container.style.fontKerning = 'none';
-
-    const regular = _document.createElement('span');
-    regular.classList.add('xterm-char-measure-element');
-
-    const bold = _document.createElement('span');
-    bold.classList.add('xterm-char-measure-element');
-    bold.style.fontWeight = 'bold';
-
-    const italic = _document.createElement('span');
-    italic.classList.add('xterm-char-measure-element');
-    italic.style.fontStyle = 'italic';
-
-    const boldItalic = _document.createElement('span');
-    boldItalic.classList.add('xterm-char-measure-element');
-    boldItalic.style.fontWeight = 'bold';
-    boldItalic.style.fontStyle = 'italic';
-
-    // NOTE: must be in order of FontVariant
-    this._measureElements = [regular, bold, italic, boldItalic];
-    this._container.appendChild(regular);
-    this._container.appendChild(bold);
-    this._container.appendChild(italic);
-    this._container.appendChild(boldItalic);
-
-    _helperContainer.appendChild(this._container);
+  private _canvasElements: IWidthCacheFontVariantCanvas[] = [];
+
+  constructor(
+    canvasFactory: () => IWidthCacheFontVariantCanvas = () => new WidthCacheFontVariantCanvas()
+  ) {
+    this._canvasElements = [
+      canvasFactory(),
+      canvasFactory(),
+      canvasFactory(),
+      canvasFactory()
+    ];
 
     this.clear();
   }
 
   public dispose(): void {
-    this._container.remove();           // remove elements from DOM
-    this._measureElements.length = 0;   // release element refs
-    this._holey = undefined;            // free cache memory via GC
+    this._canvasElements.length = 0;
+    this._holey = undefined; // free cache memory via GC
   }
 
   /**
@@ -104,10 +83,11 @@ export class WidthCache implements IDisposable {
    */
   public setFont(font: string, fontSize: number, weight: FontWeight, weightBold: FontWeight): void {
     // skip if nothing changed
-    if (font === this._font
-      && fontSize === this._fontSize
-      && weight === this._weight
-      && weightBold === this._weightBold
+    if (
+      font === this._font &&
+      fontSize === this._fontSize &&
+      weight === this._weight &&
+      weightBold === this._weightBold
     ) {
       return;
     }
@@ -117,12 +97,10 @@ export class WidthCache implements IDisposable {
     this._weight = weight;
     this._weightBold = weightBold;
 
-    this._container.style.fontFamily = this._font;
-    this._container.style.fontSize = `${this._fontSize}px`;
-    this._measureElements[FontVariant.REGULAR].style.fontWeight = `${weight}`;
-    this._measureElements[FontVariant.BOLD].style.fontWeight = `${weightBold}`;
-    this._measureElements[FontVariant.ITALIC].style.fontWeight = `${weight}`;
-    this._measureElements[FontVariant.BOLD_ITALIC].style.fontWeight = `${weightBold}`;
+    this._canvasElements[FontVariant.REGULAR].setFont(font, fontSize, weight, false);
+    this._canvasElements[FontVariant.BOLD].setFont(font, fontSize, weightBold, false);
+    this._canvasElements[FontVariant.ITALIC].setFont(font, fontSize, weight, true);
+    this._canvasElements[FontVariant.BOLD_ITALIC].setFont(font, fontSize, weightBold, true);
 
     this.clear();
   }
@@ -132,7 +110,7 @@ export class WidthCache implements IDisposable {
    * `variant` denotes the font variant to be used.
    */
   public get(c: string, bold: boolean | number, italic: boolean | number): number {
-    let cp = 0;
+    let cp: number;
     if (!bold && !italic && c.length === 1 && (cp = c.charCodeAt(0)) < WidthCacheSettings.FLAT_SIZE) {
       if (this._flat[cp] !== WidthCacheSettings.FLAT_UNSET) {
         return this._flat[cp];
@@ -160,8 +138,32 @@ export class WidthCache implements IDisposable {
   }
 
   protected _measure(c: string, variant: FontVariant): number {
-    const el = this._measureElements[variant];
-    el.textContent = c.repeat(WidthCacheSettings.REPEAT);
-    return el.offsetWidth / WidthCacheSettings.REPEAT;
+    return this._canvasElements[variant].measure(c);
+  }
+}
+
+class WidthCacheFontVariantCanvas implements IWidthCacheFontVariantCanvas {
+  private _canvas: OffscreenCanvas | HTMLCanvasElement;
+  private _ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
+
+  constructor() {
+    if (typeof OffscreenCanvas !== 'undefined') {
+      this._canvas = new OffscreenCanvas(1, 1);
+      this._ctx = throwIfFalsy(this._canvas.getContext('2d'));
+    } else {
+      this._canvas = document.createElement('canvas');
+      this._canvas.width = 1;
+      this._canvas.height = 1;
+      this._ctx = throwIfFalsy(this._canvas.getContext('2d'));
+    }
+  }
+
+  public setFont(fontFamily: string, fontSize: number, fontWeight: FontWeight, italic: boolean): void {
+    const fontStyle = italic ? 'italic' : '';
+    this._ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`.trim();
+  }
+
+  public measure(c: string): number {
+    return this._ctx.measureText(c).width;
   }
 }

package/src/browser/renderer/shared/Constants.ts

@@ -4,3 +4,10 @@
  */
 
 export const INVERTED_DEFAULT_COLOR = 257;
+
+export const enum RendererConstants {
+  /**
+   * The idle time after which cursor blinking stops.
+   */
+  CURSOR_BLINK_IDLE_TIMEOUT = 5 * 60 * 1000
+}

package/src/browser/renderer/shared/RendererUtils.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IDimensions, IRenderDimensions } from 'browser/renderer/shared/Types';
+import { IDimensions, IRenderDimensions } from './Types';
 
 export function throwIfFalsy<T>(value: T | undefined | null): T {
   if (!value) {

package/src/browser/renderer/shared/SelectionRenderModel.ts

@@ -3,8 +3,8 @@
  * @license MIT
  */
 
-import { ITerminal } from 'browser/Types';
-import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
+import { ITerminal } from '../../Types';
+import { ISelectionRenderModel } from './Types';
 import { Terminal } from '@xterm/xterm';
 
 class SelectionRenderModel implements ISelectionRenderModel {

package/src/browser/renderer/shared/TextBlinkStateManager.ts

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2026 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICoreBrowserService } from '../../services/Services';
+import { Disposable, toDisposable } from '../../../common/Lifecycle';
+import { IOptionsService } from '../../../common/services/Services';
+
+export class TextBlinkStateManager extends Disposable {
+  private _intervalDuration: number = 0;
+  private _interval: number | undefined;
+  private _blinkOn: boolean = true;
+  private _needsBlinkInViewport: boolean = false;
+  private _isViewportVisible: boolean = true;
+
+  constructor(
+    private readonly _renderCallback: () => void,
+    private readonly _coreBrowserService: ICoreBrowserService,
+    private readonly _optionsService: IOptionsService
+  ) {
+    super();
+    this._register(this._optionsService.onSpecificOptionChange('blinkIntervalDuration', duration => {
+      this.setIntervalDuration(duration);
+    }));
+    this.setIntervalDuration(this._optionsService.rawOptions.blinkIntervalDuration);
+    this._register(toDisposable(() => this._clearInterval()));
+  }
+
+  public get isBlinkOn(): boolean {
+    return this._blinkOn;
+  }
+
+  public get isEnabled(): boolean {
+    return this._intervalDuration > 0;
+  }
+
+  public setNeedsBlinkInViewport(needsBlinkInViewport: boolean): void {
+    if (this._needsBlinkInViewport === needsBlinkInViewport) {
+      return;
+    }
+
+    this._needsBlinkInViewport = needsBlinkInViewport;
+    this._updateIntervalState();
+  }
+
+  public setViewportVisible(isVisible: boolean): void {
+    if (this._isViewportVisible === isVisible) {
+      return;
+    }
+
+    this._isViewportVisible = isVisible;
+    this._updateIntervalState();
+  }
+
+  public setIntervalDuration(duration: number): void {
+    if (duration === this._intervalDuration) {
+      return;
+    }
+
+    this._intervalDuration = duration;
+    this._clearInterval();
+    this._updateIntervalState();
+  }
+
+  private _updateIntervalState(): void {
+    const shouldBlink = this._intervalDuration > 0 && this._needsBlinkInViewport && this._isViewportVisible;
+    if (shouldBlink) {
+      if (this._interval !== undefined) {
+        return;
+      }
+      const wasBlinkOn = this._blinkOn;
+      this._blinkOn = true;
+      this._interval = this._coreBrowserService.window.setInterval(() => {
+        this._blinkOn = !this._blinkOn;
+        this._renderCallback();
+      }, this._intervalDuration);
+      if (!wasBlinkOn) {
+        this._renderCallback();
+      }
+      return;
+    }
+
+    this._clearInterval();
+    if (!this._blinkOn) {
+      this._blinkOn = true;
+      this._renderCallback();
+    }
+  }
+
+  private _clearInterval(): void {
+    if (this._interval !== undefined) {
+      this._coreBrowserService.window.clearInterval(this._interval);
+      this._interval = undefined;
+    }
+  }
+}

package/src/browser/renderer/shared/Types.ts

@@ -4,9 +4,9 @@
  */
 
 import { Terminal } from '@xterm/xterm';
-import { ITerminal } from 'browser/Types';
-import { IDisposable } from 'common/Types';
-import type { Event } from 'vs/base/common/event';
+import { ITerminal } from '../../Types';
+import { IDisposable } from '../../../common/Types';
+import type { IEvent } from '../../../common/Event';
 
 export interface IDimensions {
   width: number;
@@ -39,6 +39,11 @@ export interface IRenderDimensions {
 export interface IRequestRedrawEvent {
   start: number;
   end: number;
+  /**
+   * Whether the redraw should happen synchronously. This is used to avoid
+   * flicker when the canvas is resized.
+   */
+  sync?: boolean;
 }
 
 /**
@@ -52,7 +57,7 @@ export interface IRenderer extends IDisposable {
    * Fires when the renderer is requesting to be redrawn on the next animation
    * frame but is _not_ a result of content changing (eg. selection changes).
    */
-  readonly onRequestRedraw: Event<IRequestRedrawEvent>;
+  readonly onRequestRedraw: IEvent<IRequestRedrawEvent>;
 
   dispose(): void;
   handleDevicePixelRatioChange(): void;
@@ -60,6 +65,7 @@ export interface IRenderer extends IDisposable {
   handleCharSizeChanged(): void;
   handleBlur(): void;
   handleFocus(): void;
+  handleViewportVisibilityChange?(isVisible: boolean): void;
   handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
   handleCursorMove(): void;
   clear(): void;