From aa9c9209800e07127065ad296a9d1d4af883ae36 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sat, 1 Apr 2023 20:57:05 +0800 Subject: [PATCH] Improve action log display with control chars (#23820) Close #23680 Some CLI programs use "\r" and control chars to print new content in current line. So, the strings in one line are actually from `\rReading...1%\rReading...5%\rReading...100%` This PR tries to make the output better. --- package-lock.json | 14 ++++++ package.json | 1 + vitest.config.js | 2 + web_src/js/components/RepoActionView.test.js | 30 ++++++++++++ web_src/js/components/RepoActionView.vue | 48 ++++++++++++++++++-- 5 files changed, 92 insertions(+), 3 deletions(-) create mode 100644 web_src/js/components/RepoActionView.test.js diff --git a/package-lock.json b/package-lock.json index 93adf5622f..313fa515ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55,6 +55,7 @@ "@playwright/test": "1.31.2", "@rollup/pluginutils": "5.0.2", "@stoplight/spectral-cli": "6.6.0", + "@vitejs/plugin-vue": "4.1.0", "eslint": "8.36.0", "eslint-plugin-import": "2.27.5", "eslint-plugin-jquery": "1.5.1", @@ -1609,6 +1610,19 @@ "integrity": "sha512-FDJNkyhmKLw7uEvTxx5tSXfPeQpO0iy73Ry+PmYZJvQy0QIWX8a7kJ4kLWRf+EbTPJEPDSgPXHaM7pzr5lmvCg==", "dev": true }, + "node_modules/@vitejs/plugin-vue": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.1.0.tgz", + "integrity": "sha512-++9JOAFdcXI3lyer9UKUV4rfoQ3T1RN8yDqoCLar86s0xQct5yblxAE+yWgRnU5/0FOlVCpTZpYSBV/bGWrSrQ==", + "dev": true, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.0.0", + "vue": "^3.2.25" + } + }, "node_modules/@vitest/expect": { "version": "0.29.3", "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.29.3.tgz", diff --git a/package.json b/package.json index a5d09157a6..dc781c6a32 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "@playwright/test": "1.31.2", "@rollup/pluginutils": "5.0.2", "@stoplight/spectral-cli": "6.6.0", + "@vitejs/plugin-vue": "4.1.0", "eslint": "8.36.0", "eslint-plugin-import": "2.27.5", "eslint-plugin-jquery": "1.5.1", diff --git a/vitest.config.js b/vitest.config.js index 37ebfa5722..0cf2996b6e 100644 --- a/vitest.config.js +++ b/vitest.config.js @@ -2,6 +2,7 @@ import {defineConfig} from 'vitest/dist/config.js'; import {readFile} from 'node:fs/promises'; import {dataToEsm} from '@rollup/pluginutils'; import {extname} from 'node:path'; +import vue from '@vitejs/plugin-vue'; function stringPlugin() { return { @@ -28,5 +29,6 @@ export default defineConfig({ }, plugins: [ stringPlugin(), + vue(), ], }); diff --git a/web_src/js/components/RepoActionView.test.js b/web_src/js/components/RepoActionView.test.js new file mode 100644 index 0000000000..011c20d8d1 --- /dev/null +++ b/web_src/js/components/RepoActionView.test.js @@ -0,0 +1,30 @@ +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('blackwhite'); + expect(ansiLogToHTML('