@valyrianjs/terminal 0.2.2 → 0.2.3

package/src/ansi.ts

@@ -1,4 +1,4 @@
-import { terminalCellWidth, terminalGraphemes } from "./text.js";
+import { dropTerminalCells, terminalCellWidth, terminalGraphemes } from "./text.js";
 import { resolveTerminalStyle, resolveTerminalStyleToken } from "./theme.js";
 import type { CursorPosition, TerminalFrame, TerminalStyleSpan, TerminalTheme } from "./types.js";
 
@@ -234,6 +234,134 @@ export function toAnsiFrame(lines: string[], cursor: CursorPosition | null, span
   return `\u001b[?25l\u001b[H${ansiLines.join("\n")}${cursorCode}`;
 }
 
+function commonPrefixCellWidth(previousLine: string, nextLine: string) {
+  const previousGraphemes = terminalGraphemes(previousLine);
+  const nextGraphemes = terminalGraphemes(nextLine);
+  const length = Math.min(previousGraphemes.length, nextGraphemes.length);
+  let width = 0;
+
+  for (let index = 0; index < length; index += 1) {
+    if (previousGraphemes[index] !== nextGraphemes[index]) {
+      return width;
+    }
+    if (previousGraphemes[index] !== "|") {
+      width += terminalCellWidth(previousGraphemes[index]);
+    }
+  }
+
+  return width;
+}
+
+function renderAnsiLineSuffix(line: string, spans: TerminalStyleSpan[], y: number, startColumn: number, theme?: TerminalTheme) {
+  let output = "";
+  let visibleColumn = Math.max(1, startColumn);
+  const rowSpans = lineSpans(spans, y);
+  let activeSpanIndex = rowSpans.findIndex((span) => span.x1 >= visibleColumn);
+  if (activeSpanIndex < 0) {
+    activeSpanIndex = rowSpans.length;
+  }
+
+  for (const span of rowSpans) {
+    if (span.x1 <= visibleColumn && span.x2 > visibleColumn) {
+      output += spanAnsiOpen(span, theme);
+    }
+  }
+
+  for (const grapheme of terminalGraphemes(dropTerminalCells(line, visibleColumn - 1))) {
+    while (rowSpans[activeSpanIndex]?.x1 === visibleColumn) {
+      output += spanAnsiOpen(rowSpans[activeSpanIndex], theme);
+      activeSpanIndex += 1;
+    }
+
+    if (grapheme === "|") {
+      continue;
+    }
+
+    output += grapheme;
+    visibleColumn += terminalCellWidth(grapheme);
+
+    let closedSpan = false;
+    for (const span of rowSpans) {
+      if (span.x2 === visibleColumn) {
+        if (span.kind !== "focus") {
+          output += spanAnsiClose(span, theme);
+          closedSpan = true;
+        }
+      }
+    }
+    for (const span of rowSpans) {
+      if (span.x2 === visibleColumn && span.kind === "focus") {
+        output += spanAnsiClose(span, theme);
+        closedSpan = true;
+      }
+    }
+    if (closedSpan && visibleColumn <= terminalCellWidth(line)) {
+      for (const span of rowSpans) {
+        if (span.x1 < visibleColumn && span.x2 > visibleColumn) {
+          output += spanAnsiOpen(span, theme);
+        }
+      }
+    }
+  }
+
+  for (const span of rowSpans) {
+    if (span.x1 < visibleColumn && span.x2 > visibleColumn) {
+      if (span.kind !== "focus") {
+        output += spanAnsiClose(span, theme);
+      }
+    }
+  }
+  for (const span of rowSpans) {
+    if (span.x1 < visibleColumn && span.x2 > visibleColumn && span.kind === "focus") {
+      output += spanAnsiClose(span, theme);
+    }
+  }
+
+  return output;
+}
+
+
+function sameSpanStyle(previous: TerminalStyleSpan["style"], next: TerminalStyleSpan["style"]) {
+  if (previous === next) {
+    return true;
+  }
+  if (!previous || !next) {
+    return false;
+  }
+  return previous.color === next.color
+    && previous.background === next.background
+    && previous.plainPrefix === next.plainPrefix
+    && previous.plainSuffix === next.plainSuffix
+    && JSON.stringify(previous.border) === JSON.stringify(next.border)
+    && JSON.stringify(previous.padding) === JSON.stringify(next.padding);
+}
+
+function sameLineSpans(previousSpans: TerminalStyleSpan[], nextSpans: TerminalStyleSpan[], y: number) {
+  if (previousSpans.length === 0 && nextSpans.length === 0) {
+    return true;
+  }
+
+  const previousRowSpans = lineSpans(previousSpans, y);
+  const nextRowSpans = lineSpans(nextSpans, y);
+  if (previousRowSpans.length !== nextRowSpans.length) {
+    return false;
+  }
+
+  for (let index = 0; index < previousRowSpans.length; index += 1) {
+    const previous = previousRowSpans[index];
+    const next = nextRowSpans[index];
+    if (previous.kind !== next.kind
+      || previous.x1 !== next.x1
+      || previous.x2 !== next.x2
+      || previous.y !== next.y
+      || !sameSpanStyle(previous.style, next.style)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 export function createAnsiFrameDiff(
   previousAnsiLines: string[],
   nextAnsiLines: string[],
@@ -267,13 +395,77 @@ export function createAnsiFrameDiff(
   };
 }
 
+function createAnsiFramePatch(
+  previousLines: string[],
+  previousAnsiLines: string[],
+  nextLines: string[],
+  previousSpans: TerminalStyleSpan[],
+  nextSpans: TerminalStyleSpan[],
+  cursor: CursorPosition | null,
+  options: AnsiFrameOptions = {}
+): AnsiFrameDiffResult & { nextAnsiLines: string[] } {
+  const nextAnsiLines: string[] = [];
+  const changedLineIndexes: number[] = [];
+  const writes: string[] = ["\u001b[?25l"];
+  const maxLines = Math.max(previousAnsiLines.length, nextLines.length);
+
+  for (let i = 0; i < maxLines; i += 1) {
+    const previousLine = previousLines[i] || "";
+    const nextLine = nextLines[i] || "";
+    const previousAnsiLine = previousAnsiLines[i] || "";
+    const spansMatch = sameLineSpans(previousSpans, nextSpans, i + 1);
+    const nextAnsiLine = i < nextLines.length && previousLine === nextLine && spansMatch
+      ? previousAnsiLine
+      : i < nextLines.length
+        ? renderAnsiLine(nextLine, nextSpans, i + 1, options.theme)
+        : "";
+    nextAnsiLines[i] = nextAnsiLine;
+    if (nextAnsiLine === previousAnsiLine) {
+      continue;
+    }
+
+    changedLineIndexes.push(i);
+    const canPatchSuffix = cursor?.y === i + 1
+      && lineSpans(previousSpans, i + 1).length === 0
+      && lineSpans(nextSpans, i + 1).length === 0;
+    const prefixWidth = canPatchSuffix && i < previousLines.length && i < nextLines.length && previousLine !== nextLine
+      ? commonPrefixCellWidth(previousLine, nextLine)
+      : 0;
+
+    if (prefixWidth > 0) {
+      const startColumn = prefixWidth + 1;
+      const suffix = renderAnsiLineSuffix(nextLine, nextSpans, i + 1, startColumn, options.theme);
+      writes.push(`\u001b[${i + 1};${startColumn}H${suffix}\u001b[0m\u001b[K`);
+    } else {
+      writes.push(`\u001b[${i + 1};1H${nextAnsiLine}\u001b[0m\u001b[K`);
+    }
+  }
+
+  if (cursor) {
+    writes.push(`\u001b[${cursor.y};${cursor.x}H`);
+  }
+  if (options.showCursor !== false || (options.showCursorWhenFrameHasCursor === true && cursor)) {
+    writes.push(ANSI_SHOW_CURSOR);
+  }
+
+  return {
+    changedLineIndexes,
+    outputChunk: writes.join(""),
+    restoresCursor: Boolean(cursor),
+    nextAnsiLines: nextAnsiLines.slice(0, nextLines.length)
+  };
+}
+
 export function createAnsiDiffWriter(options: AnsiFrameOptions = {}) {
+  let previousLines: string[] = [];
   let previousAnsiLines: string[] = [];
+  let previousSpans: TerminalStyleSpan[] = [];
 
   return function toAnsiDiff(lines: string[], cursor: CursorPosition | null, spans: TerminalStyleSpan[] = []) {
-    const ansiLines = lines.map((line, index) => renderAnsiLine(line, spans, index + 1, options.theme));
-    const diff = createAnsiFrameDiff(previousAnsiLines, ansiLines, cursor, options);
-    previousAnsiLines = ansiLines.slice();
+    const diff = createAnsiFramePatch(previousLines, previousAnsiLines, lines, previousSpans, spans, cursor, options);
+    previousLines = lines.slice();
+    previousAnsiLines = diff.nextAnsiLines.slice();
+    previousSpans = spans.map((span) => ({ ...span }));
     return diff.outputChunk;
   };
 }