diff options
| -rw-r--r-- | package-lock.json | 32 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | web_src/js/components/RepoActionView.test.js | 30 | ||||
| -rw-r--r-- | web_src/js/components/RepoActionView.vue | 48 | ||||
| -rw-r--r-- | web_src/js/render/ansi.js | 44 | ||||
| -rw-r--r-- | web_src/js/render/ansi.test.js | 21 |
6 files changed, 77 insertions, 100 deletions
diff --git a/package-lock.json b/package-lock.json index e808ccf2a8..43846cf4a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,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", @@ -2465,6 +2465,14 @@ "ajv": "^8.8.2" } }, + "node_modules/ansi_up": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/ansi_up/-/ansi_up-5.2.1.tgz", + "integrity": "sha512-5bz5T/7FRmlxA37zDXhG6cAwlcZtfnmNLDJra66EEIT3kYlw5aPJdbkJEhm59D6kA4Wi5ict6u6IDYHJaQlH+g==", + "engines": { + "node": "*" + } + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -2487,20 +2495,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/ansi-to-html": { - "version": "0.7.2", - "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz", - "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==", - "dependencies": { - "entities": "^2.2.0" - }, - "bin": { - "ansi-to-html": "bin/ansi-to-html" - }, - "engines": { - "node": ">=8.0.0" - } - }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -4210,14 +4204,6 @@ "node": ">=10.13.0" } }, - "node_modules/entities": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", - "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", - "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" - } - }, "node_modules/envinfo": { "version": "7.8.1", "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz", diff --git a/package.json b/package.json index 0701862cc2..dd2eff7195 100644 --- a/package.json +++ b/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", diff --git a/web_src/js/components/RepoActionView.test.js b/web_src/js/components/RepoActionView.test.js deleted file mode 100644 index 011c20d8d1..0000000000 --- a/web_src/js/components/RepoActionView.test.js +++ /dev/null @@ -1,30 +0,0 @@ -import {expect, test} from 'vitest'; - -import {ansiLogToHTML} from './RepoActionView.vue'; -import AnsiToHTML from 'ansi-to-html'; - -test('processConsoleLine', () => { - expect(ansiLogToHTML('abc')).toEqual('abc'); - expect(ansiLogToHTML('abc\n')).toEqual('abc'); - expect(ansiLogToHTML('abc\r\n')).toEqual('abc'); - expect(ansiLogToHTML('\r')).toEqual(''); - 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('<script>'); - - - // 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 - - // 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'); - - // 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'); -}); diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index ebc78b049b..fd40bd7ee5 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -119,14 +119,12 @@ import {SvgIcon} from '../svg.js'; import ActionRunStatus from './ActionRunStatus.vue'; import {createApp} from 'vue'; -import AnsiToHTML from 'ansi-to-html'; import {toggleElem} from '../utils/dom.js'; import {getCurrentLocale} from '../utils.js'; +import {renderAnsi} from '../render/ansi.js'; const {csrfToken} = window.config; -const ansiLogRender = new AnsiToHTML({escapeXML: true}); - const sfc = { name: 'RepoActionView', components: { @@ -304,7 +302,7 @@ const sfc = { const logMessage = document.createElement('span'); logMessage.className = 'log-msg'; - logMessage.innerHTML = ansiLogToHTML(line.message); + logMessage.innerHTML = renderAnsi(line.message); div.append(logTimeStamp); div.append(logMessage); div.append(logTimeSeconds); @@ -470,48 +468,6 @@ 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); - } - - // 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); - 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'); -} - </script> <style scoped> diff --git a/web_src/js/render/ansi.js b/web_src/js/render/ansi.js new file mode 100644 index 0000000000..68e8f2c544 --- /dev/null +++ b/web_src/js/render/ansi.js @@ -0,0 +1,44 @@ +import AnsiUp from 'ansi_up'; + +const replacements = [ + [/\x1b\[\d+[A-H]/g, ''], // Move cursor, treat them as no-op + [/\x1b\[\d?[JK]/g, '\r'], // Erase display/line, treat them as a Carriage Return +]; + +// render ANSI to HTML +export function renderAnsi(line) { + // create a fresh ansi_up instance because otherwise previous renders can influence + // the output of future renders, because ansi_up is stateful and remembers things like + // unclosed opening tags for colors. + const ansi_up = new (AnsiUp.default || AnsiUp)(); + + if (line.endsWith('\r\n')) { + line = line.substring(0, line.length - 2); + } else if (line.endsWith('\n')) { + line = line.substring(0, line.length - 1); + } + + if (line.includes('\x1b')) { + for (const [regex, replacement] of replacements) { + line = line.replace(regex, replacement); + } + } + + if (!line.includes('\r')) { + 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 = 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'); +} diff --git a/web_src/js/render/ansi.test.js b/web_src/js/render/ansi.test.js new file mode 100644 index 0000000000..7542ba0ede --- /dev/null +++ b/web_src/js/render/ansi.test.js @@ -0,0 +1,21 @@ +import {expect, test} from 'vitest'; +import {renderAnsi} from './ansi.js'; + +test('renderAnsi', () => { + expect(renderAnsi('abc')).toEqual('abc'); + expect(renderAnsi('abc\n')).toEqual('abc'); + expect(renderAnsi('abc\r\n')).toEqual('abc'); + expect(renderAnsi('\r')).toEqual(''); + expect(renderAnsi('\rx\rabc')).toEqual('x\nabc'); + expect(renderAnsi('\rabc\rx\r')).toEqual('abc\nx'); + expect(renderAnsi('\x1b[30mblack\x1b[37mwhite')).toEqual('<span style="color:rgb(0,0,0)">black</span><span style="color:rgb(255,255,255)">white</span>'); // unclosed + expect(renderAnsi('<script>')).toEqual('<script>'); + expect(renderAnsi('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); + expect(renderAnsi('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); + expect(renderAnsi('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); + expect(renderAnsi('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); + + // treat "\033[0K" and "\033[0J" (Erase display/line) as "\r", then it will be covered to "\n" finally. + expect(renderAnsi('a\x1b[Kb\x1b[2Jc')).toEqual('a\nb\nc'); + expect(renderAnsi('\x1b[48;5;88ma\x1b[38;208;48;5;159mb\x1b[m')).toEqual(`<span style="background-color:rgb(135,0,0)">a</span><span style="background-color:rgb(175,255,255)">b</span>`); +}); |