Refactor terminal preview rendering

Author: ciembor

src/application/terminal-preview/ansi-terminal-sequence.js

@@ -0,0 +1,21 @@
+export const TERMINAL_LINE_BREAK = '\r\n';
+
+export function sgr(...codes) {
+  if (codes.length === 0) {
+    return '';
+  }
+
+  return `\x1b[${codes.join(';')}m`;
+}
+
+export function resetSgr() {
+  return '\x1b[0m';
+}
+
+export function styledText(text, codes) {
+  return `${sgr(...codes)}${text}${resetSgr()}`;
+}
+
+export function joinTerminalLines(lines) {
+  return lines.join(TERMINAL_LINE_BREAK);
+}

src/application/terminal-preview/build-colors-preview-command.js

@@ -0,0 +1,56 @@
+import {
+  TERMINAL_PREVIEW_COLUMNS,
+  TERMINAL_PREVIEW_ROWS,
+  TERMINAL_PREVIEW_SAMPLE_TEXT,
+} from '../../domain/terminal-preview/terminal-preview-model';
+import {
+  joinTerminalLines,
+  resetSgr,
+  styledText,
+} from './ansi-terminal-sequence';
+
+const ROW_LABEL_WIDTH = 6;
+const CELL_WIDTH = 7;
+const CELL_SEPARATOR = ' ';
+const ROW_LABEL_SEPARATOR = ' ';
+
+function padRight(value, width) {
+  return value.padEnd(width, ' ');
+}
+
+function padLeft(value, width) {
+  return value.padStart(width, ' ');
+}
+
+function padCenter(value, width) {
+  const availablePadding = Math.max(width - value.length, 0);
+  const leftPadding = Math.floor(availablePadding / 2);
+  const rightPadding = availablePadding - leftPadding;
+
+  return `${' '.repeat(leftPadding)}${value}${' '.repeat(rightPadding)}`;
+}
+
+function renderTableHeader() {
+  const labels = TERMINAL_PREVIEW_COLUMNS.map((column) => padCenter(column.label, CELL_WIDTH));
+
+  return `${padRight('', ROW_LABEL_WIDTH)}${ROW_LABEL_SEPARATOR}${labels.join(CELL_SEPARATOR)}`;
+}
+
+function renderTableRow(row) {
+  const label = padLeft(row.label, ROW_LABEL_WIDTH);
+  const cells = TERMINAL_PREVIEW_COLUMNS.map((column) => {
+    const codes = [...row.sgr, ...column.sgr];
+    const sample = padCenter(TERMINAL_PREVIEW_SAMPLE_TEXT, CELL_WIDTH);
+
+    return styledText(sample, codes);
+  });
+
+  return `${label}${ROW_LABEL_SEPARATOR}${cells.join(CELL_SEPARATOR)}${resetSgr()}`;
+}
+
+export function buildColorsPreviewCommand() {
+  return joinTerminalLines([
+    renderTableHeader(),
+    ...TERMINAL_PREVIEW_ROWS.map((row) => renderTableRow(row)),
+  ]);
+}

src/application/terminal-preview/build-terminal-preview-sequence.js

@@ -1,48 +1,9 @@
 import {
-  TERMINAL_PREVIEW_COLUMNS,
-  TERMINAL_PREVIEW_ROWS,
-  TERMINAL_PREVIEW_SAMPLE_TEXT,
   terminalPreviewHeaderLines,
   terminalPreviewPromptCommand,
 } from '../../domain/terminal-preview/terminal-preview-model';
-
-const LINE_BREAK = '\r\n';
-const ROW_LABEL_WIDTH = 6;
-const CELL_WIDTH = 7;
-const CELL_SEPARATOR = ' ';
-const ROW_LABEL_SEPARATOR = ' ';
-
-function sgr(...codes) {
-  if (codes.length === 0) {
-    return '';
-  }
-
-  return `\x1b[${codes.join(';')}m`;
-}
-
-function reset() {
-  return '\x1b[0m';
-}
-
-function padRight(value, width) {
-  return value.padEnd(width, ' ');
-}
-
-function padLeft(value, width) {
-  return value.padStart(width, ' ');
-}
-
-function padCenter(value, width) {
-  const availablePadding = Math.max(width - value.length, 0);
-  const leftPadding = Math.floor(availablePadding / 2);
-  const rightPadding = availablePadding - leftPadding;
-
-  return `${' '.repeat(leftPadding)}${value}${' '.repeat(rightPadding)}`;
-}
-
-function styledText(text, codes) {
-  return `${sgr(...codes)}${text}${reset()}`;
-}
+import { buildColorsPreviewCommand } from './build-colors-preview-command';
+import { joinTerminalLines, styledText } from './ansi-terminal-sequence';
 
 function renderPrompt({ command = null } = {}) {
   const prompt = terminalPreviewPromptCommand();
@@ -64,39 +25,14 @@ function renderHelpLine() {
   return `Type ${styledText('help', [32])} for instructions on how to use fish`;
 }
 
-function renderTableHeader() {
-  const labels = TERMINAL_PREVIEW_COLUMNS.map((column) => padCenter(column.label, CELL_WIDTH));
-
-  return `${padRight('', ROW_LABEL_WIDTH)}${ROW_LABEL_SEPARATOR}${labels.join(CELL_SEPARATOR)}`;
-}
-
-function renderTableRow(row) {
-  const label = padLeft(row.label, ROW_LABEL_WIDTH);
-  const cells = TERMINAL_PREVIEW_COLUMNS.map((column) => {
-    const codes = [...row.sgr, ...column.sgr];
-    const sample = padCenter(TERMINAL_PREVIEW_SAMPLE_TEXT, CELL_WIDTH);
-
-    return styledText(sample, codes);
-  });
-
-  return `${label}${ROW_LABEL_SEPARATOR}${cells.join(CELL_SEPARATOR)}${reset()}`;
-}
-
-function renderPreviewTable() {
-  return [
-    renderTableHeader(),
-    ...TERMINAL_PREVIEW_ROWS.map((row) => renderTableRow(row)),
-  ].join(LINE_BREAK);
-}
-
 export function buildTerminalPreviewSequence() {
-  return [
+  return joinTerminalLines([
     terminalPreviewHeaderLines()[0],
     renderHelpLine(),
     renderPrompt({ command: terminalPreviewPromptCommand().command }),
     '',
-    renderPreviewTable(),
+    buildColorsPreviewCommand(),
     '',
     renderPrompt(),
-  ].join(LINE_BREAK);
+  ]);
 }

src/presentation/editor-page/components/TerminalDisplay.vue

@@ -26,7 +26,7 @@ export default {
       (colors) => {
         this.renderTerminalPreview(colors);
       },
-      { immediate: true, deep: true }
+      { immediate: true }
     );
   },
   beforeUnmount() {

src/presentation/editor-page/terminal-preview/xterm-terminal-preview.js

@@ -15,14 +15,17 @@ function waitForTerminalFont() {
   return document.fonts.load(TERMINAL_FONT_LOAD).then(() => document.fonts.ready);
 }
 
-export function createXtermTerminalPreview(container, options = {}) {
+export function createXtermTerminalPreview(container, options = {}, dependencies = {}) {
+  const TerminalClass = dependencies.TerminalClass ?? Terminal;
+  const waitForFont = dependencies.waitForFont ?? waitForTerminalFont;
   let terminal = null;
   let disposed = false;
   let lastSequence = '';
+  let renderedSequence = '';
   let lastTheme = options.theme;
 
   function createTerminal() {
-    return new Terminal({
+    return new TerminalClass({
       allowProposedApi: false,
       cols: TERMINAL_COLUMNS,
       rows: TERMINAL_ROWS,
@@ -55,7 +58,7 @@ export function createXtermTerminalPreview(container, options = {}) {
     }
   }
 
-  waitForTerminalFont().then(openTerminal);
+  waitForFont().then(openTerminal);
 
   function render(sequence, theme) {
     lastSequence = sequence;
@@ -66,6 +69,12 @@ export function createXtermTerminalPreview(container, options = {}) {
     }
 
     terminal.options.theme = theme;
+
+    if (sequence === renderedSequence) {
+      return;
+    }
+
+    renderedSequence = sequence;
     terminal.reset();
     terminal.write(sequence);
   }

tests/application/terminal-preview/ansi-terminal-sequence.test.js

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import {
+  joinTerminalLines,
+  resetSgr,
+  sgr,
+  styledText,
+  TERMINAL_LINE_BREAK,
+} from '../../../src/application/terminal-preview/ansi-terminal-sequence';
+
+describe('ansi-terminal-sequence', () => {
+  it('renders SGR styling primitives', () => {
+    expect(sgr()).toBe('');
+    expect(sgr(1, 32)).toBe('\x1b[1;32m');
+    expect(resetSgr()).toBe('\x1b[0m');
+    expect(styledText('help', [32])).toBe('\x1b[32mhelp\x1b[0m');
+  });
+
+  it('joins terminal lines with CRLF', () => {
+    expect(TERMINAL_LINE_BREAK).toBe('\r\n');
+    expect(joinTerminalLines(['one', 'two'])).toBe('one\r\ntwo');
+  });
+});

tests/application/terminal-preview/build-colors-preview-command.test.js

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { buildColorsPreviewCommand } from '../../../src/application/terminal-preview/build-colors-preview-command';
+
+function stripAnsi(value) {
+  return value.replace(/\x1b\[[0-9;]*m/g, '');
+}
+
+describe('buildColorsPreviewCommand', () => {
+  it('renders the color table preview as a standalone terminal command result', () => {
+    const commandOutput = buildColorsPreviewCommand();
+    const plainText = stripAnsi(commandOutput);
+
+    expect(plainText).toContain('40m');
+    expect(plainText).toContain('47m');
+    expect(plainText).toContain('1;30m');
+    expect(plainText).toContain('1;37m');
+    expect(plainText.match(/gYw/g)).toHaveLength(162);
+  });
+
+  it('keeps the first row label column aligned for long SGR labels', () => {
+    const commandOutput = buildColorsPreviewCommand();
+    const plainText = stripAnsi(commandOutput);
+
+    expect(plainText).toContain(' 1;30m   gYw');
+  });
+
+  it('renders colored table cells with SGR resets', () => {
+    const commandOutput = buildColorsPreviewCommand();
+
+    expect(commandOutput).toContain('\x1b[1;30;40m');
+    expect(commandOutput).toContain('\x1b[1;37;47m');
+    expect(commandOutput).toContain('\r\n');
+  });
+});

tests/application/terminal-preview/build-terminal-preview-sequence.test.js

@@ -15,20 +15,14 @@ describe('buildTerminalPreviewSequence', () => {
     expect(plainText).toContain('ciembor@browser ~> ./colors.sh');
     expect(plainText).toContain('ciembor@browser ~>');
     expect(plainText).toContain('40m');
-    expect(plainText).toContain('47m');
-    expect(plainText).toContain('1;30m');
-    expect(plainText).toContain('1;37m');
-    expect(plainText.match(/gYw/g)).toHaveLength(162);
   });
 
-  it('renders colored prompt and table cells with SGR resets', () => {
+  it('renders colored shell prompt segments with SGR resets', () => {
     const sequence = buildTerminalPreviewSequence();
 
     expect(sequence).toContain('\x1b[32mhelp\x1b[0m');
     expect(sequence).toContain('\x1b[36mciembor\x1b[0m');
     expect(sequence).toContain('\x1b[34m./colors.sh\x1b[0m');
-    expect(sequence).toContain('\x1b[1;30;40m');
-    expect(sequence).toContain('\x1b[1;37;47m');
     expect(sequence).toContain('\r\n');
   });
 });

tests/presentation/editor-page/xterm-terminal-preview.test.js

@@ -0,0 +1,80 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createXtermTerminalPreview } from '../../../src/presentation/editor-page/terminal-preview/xterm-terminal-preview';
+
+function createTerminalClass() {
+  const instances = [];
+
+  class TerminalClass {
+    constructor(options) {
+      this.options = options;
+      this.open = vi.fn();
+      this.reset = vi.fn();
+      this.write = vi.fn();
+      this.dispose = vi.fn();
+      instances.push(this);
+    }
+  }
+
+  return { TerminalClass, instances };
+}
+
+describe('createXtermTerminalPreview', () => {
+  it('waits for the terminal font before opening xterm', async () => {
+    const { TerminalClass, instances } = createTerminalClass();
+    let resolveFont;
+    const waitForFont = vi.fn(() => new Promise((resolve) => {
+      resolveFont = resolve;
+    }));
+    const container = {};
+
+    createXtermTerminalPreview(container, {}, { TerminalClass, waitForFont });
+
+    expect(waitForFont).toHaveBeenCalledTimes(1);
+    expect(instances).toHaveLength(0);
+
+    resolveFont();
+    await Promise.resolve();
+
+    expect(instances).toHaveLength(1);
+    expect(instances[0].open).toHaveBeenCalledWith(container);
+  });
+
+  it('updates theme without rewriting unchanged terminal content', async () => {
+    const { TerminalClass, instances } = createTerminalClass();
+    const preview = createXtermTerminalPreview({}, {}, {
+      TerminalClass,
+      waitForFont: () => Promise.resolve(),
+    });
+
+    preview.render('same-sequence', { background: '#000000' });
+    await Promise.resolve();
+
+    const terminal = instances[0];
+    expect(terminal.reset).toHaveBeenCalledTimes(1);
+    expect(terminal.write).toHaveBeenCalledTimes(1);
+    expect(terminal.write).toHaveBeenCalledWith('same-sequence');
+    expect(terminal.options.theme).toEqual({ background: '#000000' });
+
+    preview.render('same-sequence', { background: '#111111' });
+
+    expect(terminal.reset).toHaveBeenCalledTimes(1);
+    expect(terminal.write).toHaveBeenCalledTimes(1);
+    expect(terminal.options.theme).toEqual({ background: '#111111' });
+  });
+
+  it('rewrites terminal content when the sequence changes', async () => {
+    const { TerminalClass, instances } = createTerminalClass();
+    const preview = createXtermTerminalPreview({}, {}, {
+      TerminalClass,
+      waitForFont: () => Promise.resolve(),
+    });
+
+    preview.render('first-sequence', {});
+    await Promise.resolve();
+    preview.render('second-sequence', {});
+
+    expect(instances[0].reset).toHaveBeenCalledTimes(2);
+    expect(instances[0].write).toHaveBeenCalledTimes(2);
+    expect(instances[0].write).toHaveBeenLastCalledWith('second-sequence');
+  });
+});