Making log window colorful

[ZichaoNickFox]

For making the log window easy to read or distinguishing log types. I added a functionality to give users the chance to print logs in color. Such as.

The call from users would like

logDebug :: (?context :: context, LoggingProvider context) => Text -> IO ()
logDebug = Log.debug
logError :: (?context :: context, LoggingProvider context) => Text -> IO ()
logError = Log.error
logInfo :: (?context :: context, LoggingProvider context) => Text -> IO ()
logInfo = Log.info
logWarn :: (?context :: context, LoggingProvider context) => Text -> IO ()
logWarn = Log.warn

logController :: (?context :: context, LoggingProvider context) => LogLevel -> Text -> IO ()
logController level log = do
  logInfo $ "\\ESC[31m" <> log <> "\\ESC[0m"

Compiling hsx will discard \ESC. So I use fake \\ESC to keep \ESC to the frontend. Then, before ansiUp.ansi_to_html converts the string into HTML, I replace \\ESC back to \ESC in JavaScript.

    const ESC = "\u001b";
    const text = pre.textContent.replace(/\\ESC\[/g, ESC + "[");
    const html = ansiUp.ansi_to_html(text);

ansiUp will insert <span> by \ESC[ keywords, which is the principle of this implementation.

type="module" of <script type="module" src={assetPath "/vendor/ansi-up.min.js"}></script> is a trade-off. I cannot figure out another method for ansi-up, because it has export even in ansi-up.min.js. AI says it is a ES6 standard.

[unhammer]

shouldn't all those [37m…[0m in your screenshots be turned into span color's too then?

[ZichaoNickFox]

Other [37m…[0m was printed in other places, which use \ESC instead of \\ESC. Unlike mine logInfo $ "\\ESC[31m" <> log <> "\\ESC[0m".

So \ESCs are discarded when converting from hsx to html in

ihp/ihp-ide/IHP/IDE/Logs/View/Logs.hs

Line 7 in b6c60a5

data LogsView = LogsView { standardOutput :: ByteString, errorOutput :: ByteString }

To solve the problem, we should not discard \ESC in the <pre> element of <pre>{standardOutput}</pre> when compiling hsx.

I will confirm if the converting discards \ESCs or ByteString already discards \ESC.
\\ESC is the fake one to keep raw text into the frontend.