Fancy colorful console output for build system

vorpal-research · Sep 2, 2021 · 13339cd · 13339cd
1 parent feb6220
commit 13339cd
Show file tree

Hide file tree

Showing 3 changed files with 1,796 additions and 1,782 deletions.
diff --git a/kotoed-js/package.json b/kotoed-js/package.json
@@ -31,6 +31,7 @@
     "@types/sockjs-client": "~1.0.30",
     "@types/vertx3-eventbus-client": "~3.4.0",
     "@types/webpack": "~3.0.4",
+    "ansi_up": "~5.0.1",
     "awesome-typescript-loader": "~3.2.1",
     "babel-core": "~6.25.0",
     "babel-loader": "~7.1.1",
@@ -60,6 +61,7 @@
     "@types/emoji-mart": "^2.8.1",
     "@types/react-click-outside": "^3.0.2",
     "@types/tinycolor2": "^1.4.0",
+    "ansi-to-html": "~0.7.1",
     "axios": "~0.16.2",
     "babel-polyfill": "~6.23.0",
     "babel-preset-es2015": "~6.24.1",
@@ -79,6 +81,7 @@
     "lodash": "~4.17.4",
     "moment": "~2.18.1",
     "mousetrap": "1.6.1",
+    "natsort": "^2.0.2",
     "path-to-regexp": "^1.7.0",
     "query-string": "~5.0.0",
     "radium": "~0.19.1",
@@ -103,7 +106,6 @@
     "tinycolor2": "^1.4.1",
     "twemoji": "^11.0.1",
     "typescript-fsa": "~2.4.0",
-    "vertx3-eventbus-client": "~3.4.2",
-    "natsort": "^2.0.2"
+    "vertx3-eventbus-client": "~3.4.2"
   }
 }
diff --git a/kotoed-js/src/main/ts/buildSystem/status.tsx b/kotoed-js/src/main/ts/buildSystem/status.tsx
@@ -1,5 +1,6 @@
 import {render} from "react-dom";
 import * as React from "react";
+import * as AnsiUp from 'ansi_up';
 import {Panel, PanelGroup, Row} from 'react-bootstrap';
 import {Kotoed} from "../util/kotoed-api";
 import {WithId} from "../data/common";
@@ -8,6 +9,11 @@ import SpinnerWithVeil from "../views/components/SpinnerWithVeil";
 import * as moment from "../code/components/CommentComponent";
 import {poll, SimplePollingStrategy} from "../util/poll";
 
+const ansiToHtml = (() => {
+    const ansiUpObject = new AnsiUp.default()
+    return ansiUpObject.ansi_to_html.bind(ansiUpObject) as (txt:string) => string
+})()
+
 type BuildStatusState = { loading: true }
                       | { loading: false, status: BuildStatus }
 
@@ -51,7 +57,10 @@ class BuildStatusView extends React.Component<WithId, BuildStatusState> {
                            collapsible defaultExpanded={false}
                            header={<pre>{v.commandLine}</pre>}
                            bsStyle={this.bsClassFor(v)}
-                    > { <pre>{v.cout}{'\n'}{v.cerr}</pre> }
+                    > { <pre>
+                            <div dangerouslySetInnerHTML={{__html: ansiToHtml(v.cout)}} />
+                            <div dangerouslySetInnerHTML={{__html: ansiToHtml(v.cerr)}} />
+                         </pre> }
                     </Panel>
                 )
             }