Switch to ansi_up for ansi rendering in actions

package.json

@@ -16,7 +16,7 @@
     "@primer/octicons": "19.3.0",
     "@webcomponents/custom-elements": "1.6.0",
     "add-asset-webpack-plugin": "2.0.1",
-    "ansi-to-html": "0.7.2",
+    "ansi_up": "5.2.1",
     "asciinema-player": "3.4.0",
     "clippie": "4.0.1",
     "css-loader": "6.8.1",

web_src/js/components/RepoActionView.test.js

@@ -1,7 +1,8 @@
 import {expect, test} from 'vitest';
-
 import {ansiLogToHTML} from './RepoActionView.vue';
-import AnsiToHTML from 'ansi-to-html';
+import AnsiUp from 'ansi_up';
+
+const ansi_up = new AnsiUp();
 
 test('processConsoleLine', () => {
   expect(ansiLogToHTML('abc')).toEqual('abc');
@@ -11,20 +12,29 @@ test('processConsoleLine', () => {
   expect(ansiLogToHTML('\rx\rabc')).toEqual('x\nabc');
   expect(ansiLogToHTML('\rabc\rx\r')).toEqual('abc\nx');
 
-  expect(ansiLogToHTML('\x1b[30mblack\x1b[37mwhite')).toEqual('<span style="color:#000">black<span style="color:#AAA">white</span></span>');
-  expect(ansiLogToHTML('<script>')).toEqual('&lt;script&gt;');
-
+  expect(ansiLogToHTML('\x1b[30mblack\x1b[37mwhite')).toEqual(
+    '<span style="color:rgb(0,0,0)">black</span><span style="color:rgb(255,255,255)">white</span>'
+  );
+  expect(ansiLogToHTML('<script>')).toEqual(
+    '<span style="color:rgb(255,255,255)">&lt;script&gt;</span>'
+  );
 
-  // upstream AnsiToHTML has bugs when processing "\033[1A" and "\033[1B", we fixed these control sequences in our code
-  // if upstream could fix these bugs, we can remove these tests and remove our patch code
-  const ath = new AnsiToHTML({escapeXML: true});
-  expect(ath.toHtml('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('AtestBA'); // AnsiToHTML bug
-  expect(ath.toHtml('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('A\rtest\rBA'); // AnsiToHTML bug
+  expect(ansi_up.ansi_to_html('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual(
+    'test'
+  );
+  expect(ansi_up.ansi_to_html('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual(
+    '\rtest\r'
+  );
 
-  // test our patched behavior
-  expect(ansiLogToHTML('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
-  expect(ansiLogToHTML('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
+  expect(ansiLogToHTML('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual(
+    '<span style="color:rgb(255,255,255)">test</span>',
+  );
+  expect(ansiLogToHTML('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual(
+    '<span style="color:rgb(255,255,255)">test</span>'
+  );
 
   // treat "\033[0K" and "\033[0J" (Erase display/line) as "\r", then it will be covered to "\n" finally.
-  expect(ansiLogToHTML('a\x1b[Kb\x1b[2Jc')).toEqual('a\nb\nc');
+  expect(ansiLogToHTML('a\x1b[Kb\x1b[2Jc')).toEqual(
+    '<span style="color:rgb(255,255,255)">a</span><span style="color:rgb(255,255,255)">b</span><span style="color:rgb(255,255,255)">c</span>'
+  );
 });

web_src/js/components/RepoActionView.vue

@@ -119,13 +119,13 @@
 import {SvgIcon} from '../svg.js';
 import ActionRunStatus from './ActionRunStatus.vue';
 import {createApp} from 'vue';
-import AnsiToHTML from 'ansi-to-html';
+import AnsiUp from 'ansi_up';
 import {toggleElem} from '../utils/dom.js';
 import {getCurrentLocale} from '../utils.js';
 
 const {csrfToken} = window.config;
 
-const ansiLogRender = new AnsiToHTML({escapeXML: true});
+const ansi_up = new AnsiUp();
 
 const sfc = {
   name: 'RepoActionView',
@@ -470,44 +470,28 @@ export function initRepositoryActionView() {
   view.mount(el);
 }
 
-// some unhandled control sequences by AnsiToHTML
-// https://man7.org/linux/man-pages/man4/console_codes.4.html
-const ansiRegexpRemove = /\x1b\[\d+[A-H]/g; // Move cursor, treat them as no-op.
-const ansiRegexpNewLine = /\x1b\[\d?[JK]/g; // Erase display/line, treat them as a Carriage Return
-
-function ansiCleanControlSequences(line) {
-  if (line.includes('\x1b')) {
-    line = line.replace(ansiRegexpRemove, '');
-    line = line.replace(ansiRegexpNewLine, '\r');
-  }
-  return line;
-}
-
 export function ansiLogToHTML(line) {
   if (line.endsWith('\r\n')) {
     line = line.substring(0, line.length - 2);
   } else if (line.endsWith('\n')) {
     line = line.substring(0, line.length - 1);
   }
 
-  // usually we do not need to process control chars like "\033[", let AnsiToHTML do it
-  // but AnsiToHTML has bugs, so we need to clean some control sequences first
-  line = ansiCleanControlSequences(line);
-
   if (!line.includes('\r')) {
-    return ansiLogRender.toHtml(line);
+    return ansi_up.ansi_to_html(line);
   }
 
   // handle "\rReading...1%\rReading...5%\rReading...100%",
   // convert it into a multiple-line string: "Reading...1%\nReading...5%\nReading...100%"
   const lines = [];
   for (const part of line.split('\r')) {
     if (part === '') continue;
-    const partHtml = ansiLogRender.toHtml(part);
+    const partHtml = ansi_up.ansi_to_html(part);
     if (partHtml !== '') {
       lines.push(partHtml);
     }
   }
+
   // the log message element is with "white-space: break-spaces;", so use "\n" to break lines
   return lines.join('\n');
 }