drudru / ansi_up Goto Github PK

For url to be displayed as html anchor tag, do you need escape_for_html set to false? Or regardless of escape_for_html value, provided that the url begins with http or https (defined in url_whitelist), html anchor tag will be displayed as hyperlink? I am trying to get hyperlink to work in drone ui which is using ansi_up to process the terminal output.

We're using ansi_up to parse console output from some of our build tools (thanks for the great lib!), and some of them (e.g. Composer) use backspace when streaming output.

This takes place on a single line, so we end up with a line that looks like:

  - Installing �[32mcomposer/installers�[39m (�[33mv1.6.0�[39m): Downloading (�[33mconnecting...�[39m)���������������������������Downloading (�[33m0%�[39m)           ���������������������������Downloading (�[33m5%�[39m)����������������Downloading (�[33m40%�[39m)�����������������Downloading (�[33m45%�[39m)�����������������Downloading (�[33m50%�[39m)�����������������Downloading (�[33m85%�[39m)�����������������Downloading (�[33m90%�[39m)�����������������Downloading (�[33m95%�[39m)�����������������Downloading (�[33m100%�[39m)

(That's the ASCII backspace character after each update.)

Is it possible for ansi_up to resolve these backspace characters, or should we implement this ourselves atop ansi_up?

Because of the AMD wrapper, the AnsiUp export is seen as default.default.AnsiUp when the module is loaded in ESM context:

$ node
> await import("ansi_up")
[Module: null prototype] {
  __esModule: true,
  default: { default: [Function: AnsiUp] }
}

Ideally convert the module to ESM with export default AnsiUp which can be loaded direcly in a browser via import AnsiUp from "./ansi_up.js" without any extra <script> tag needed.

Hi @drudru

I just wanted to tell you that I've built a gem from your javascript library for ruby on rails.

The URL: https://github.com/Scalingo/ansi_up-rails

It's working perfectly, thanks.

Hello,

thank you for all the awesome work and maintenance, much appreciated!

Would it be possible to have URLs to be detected automatically and be converted to weblinks?

Thank you very much.

This was originally called out in #51 (comment), but wasn't addressed before the issue was closed. I want to be able to create relative links in my output, but due to URLs without protocols being ignored (https://github.com/drudru/ansi_up/blob/master/ansi_up.ts#L691) this doesn't work. Is there a reason that relative URLs are explicitly disallowed here?

Hi,

Can you please fill in the license field in package.json?

https://docs.npmjs.com/files/package.json#license

Can we add functionality so that when installed globally with npm -g install ansi_up, we can pipe input output?

E.g.:

 ls -lah --color | ansi_up  > test.html

As seen in:

• agnoster/ansi2html (node)
• ralphbean/ansi2html (python)
• ansi2html.sh (bash)

That would really make this module versatile.

For some reason, the URL RegEx is restricted to 512 characters, which causes issues when displaying long URLs.

Shouldn't it be 2048 characters?

const str = "ERROR�[0;31m---------------------------------------------------------------------------�[0m�[0;31mNameError�[0m Traceback (most recent call last)�[0;32m�[0m in �[0;36m�[0;34m�[0m�[1;32m 117�[0m �[0;34m�[0m�[0m�[1;32m 118�[0m �[0;31m# 输入python脚本，双击左侧算法函数叶子节点引入算法，双击数据叶子节点引入数据�[0m�[0;34m�[0m�[0;34m�[0m�[0;34m�[0m�[0m�[0;32m--> 119�[0;31m �[0mdfdsf�[0m�[0;34m�[0m�[0;34m�[0m�[0m�[0m�[0;31mNameError�[0m: name 'dfdsf' is not defined"

I think the file /ansi_up.d.ts should be removed, it has a bad influence to the /dist/ansi_up.d.ts

It would be nice to have an example of how to consume the library in an ES6 project and in a TS project.

Code -

var stderr = "\n\u001b[1;31mError retrieving a new session from the selenium server\u001b[0m\nError: connect ECONNREFUSED\n    at exports._errnoException (util.js:746:11)\n    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:983:19)\n\n\u001b[0;31m\nConnection refused! Is selenium server started?\n\u001b[0m\n";

var html = ansi_up.ansi_to_html(stderr);

Output looks like this following image -

Hello,

When i want to use the package in the browser i get this error:
Unexpected token 'export'

followed up with this error:

slLog_public.js:4 Uncaught ReferenceError: AnsiUp is not defined
    at slLog_public.js:4

If i comment out line 348: export { AnsiUp }; Then it works!

Am i doing something wrong of is this an issue?

OSC hyperlinks do not work when the text includes spaces.

> const AnsiUp = require('ansi_up'); 

> const ansi = new AnsiUp.default;

> ansi.ansi_to_html('\x1B]8;;http://www.google.com\x07bb\x1B]8;;\x07')
'<a href="http://www.google.com">bb</a>'

> ansi.ansi_to_html('\x1B]8;;http://www.google.com\x07b b\x1B]8;;\x07')
']8;;http://www.google.com\x07b b'

ansi_up: 5.0.0
node: 15.13.0
Ubuntu 20.10

Hello!

I'm having issues using "ansi_up": "6.0.2" while using noImplicitAny: true in my tsconfig.json.

Error: ../../node_modules/ansi_up/ansi_up.ts:749:15 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
  No index signature with a parameter of type 'string' was found on type '{}'.

749         if (! this._url_allowlist[parts[0]])
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: ../../node_modules/ansi_up/ansi_up.ts:762:14 - error TS7006: Parameter 'tmplObj' implicitly has an 'any' type.

762 function rgx(tmplObj, ...subst) {
                 ~~~~~~~


Error: ../../node_modules/ansi_up/ansi_up.ts:762:23 - error TS7019: Rest parameter 'subst' implicitly has an 'any[]' type.

762 function rgx(tmplObj, ...subst) {
                          ~~~~~~~~


Error: ../../node_modules/ansi_up/ansi_up.ts:774:15 - error TS7006: Parameter 'tmplObj' implicitly has an 'any' type.

774 function rgxG(tmplObj, ...subst) {
                  ~~~~~~~


Error: ../../node_modules/ansi_up/ansi_up.ts:774:24 - error TS7019: Rest parameter 'subst' implicitly has an 'any[]' type.

774 function rgxG(tmplObj, ...subst) {
                           ~~~~~~~~

Did anyone experience this and have a solution?

Nobody uses it, and it will simplify the regex

The 16 basic ansi colors can be open to interpretation, many themes exist out there defining what the colors look like, so having the use_classes option is great for that.

But the 256 color palette and true-color aren't really open for interpretation, they are exact color specifications. I was wondering if we could add an option to allow for using classes for the basic 16 colors, but when rendering 256 or true-color, use inline styles.

Right now, if you use_classes and render 256 color, it renders a class, which could theoretically be used to build a stylesheet for all 256 colors (but that would be tedious). But for true-color, it only adds a data- attribute, which would mean I'd need to add an extra js library of some sort to actually apply the color. Seems like ansi_up could do that for me instead, right?

I got a bit confused because someone in our code base had written the below and it was failing to actually use classes.

ansi_up.ansi_to_html('txt', {
  use_classes: true
})

I'm not sure if this is because we were converting from 1.3.0 and it used to be this way, but there wasn't really any clear documentation on how to set the properties from the Readme when I was trying to fix this.

I eventually found the correct usage from the tests

It'd be great to just have an example of setting properties right in the README.md

According to this article, \e[22 is "Normal color or intensity". It is output by chalk like this:

> "foo" + chalk.bold("bar") + "baz"
'foo\u001b[1mbar\u001b[22mbaz'

The latest ansi_up (2.0.0) doesn't stop the bold from continuing:

> ansiUp.ansi_to_html('foo\u001b[1mbar\u001b[21mbaz')
'foo<span style="color:rgb(255,255,255)">bar</span><span style="color:rgb(255,255,255)">baz</span>'

Any subsequent calls to ansi_to_html will now all be "bold", until a full reset (\e[0) is encountered.

Documentation needs to be updated to reflect the removal of the linkify function.

I'm not 100% sure whether this is a flaw of git's (coloured) ANSI output or otherwise, but this script http://www.pixelbeat.org/scripts/ansi2html.sh more or less provided the newlines.

The issue I'm getting is that everything is concatenated onto one infinitely long line (the specific output being git show console output for large file edits with the colour option on).

Happy to provide more input/information if needed to debug the issue.

Hello, I am using ansi_up in an Angular app and today I wanted to update to version 6.0.0. But after the update I get this error:

Could not find a declaration file for module 'ansi_up'. '<redacted>/node_modules/ansi_up/ansi_up.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/ansi_up` if it exists or add a new declaration (.d.ts) file containing `declare module 'ansi_up';`ts(7016)

I am importing it like this: import AnsiUp from 'ansi_up'; which has worked fine until now. I don't exactly understand what went wrong here. Somehow it tries to import the .js file instead of the .ts file. Is there a different way I could try to import it?

Why do I have a VERSION file?
Fix or simplify this.

I added the following to the code so that resetting of fg and bg values work.

    } else if (num == 39) {
      self.fg = null;
    } else if (num == 49) {
      self.bg = null;

The version I have is 1.2.1 (from bower) and the version indicated in the code here on github is also 1.2.1. However the code isn't the same, so I assume it's not updated. That's also the reason why I didn't do a pull request.

Hi, thanks for this library, I'm considering using it over my homebrew solution for ANSI to HTML.
I've a need for "colored links" but combining links and color results in rendering errors in ansi_up.

Here's a test.py producing ANSI using Python's Rich. (pip3 install rich)

from rich.console import Console

console = Console(color_system="standard", width=160, highlight=False)

console.print("[bold red]This is bold red text[/bold red]")
console.print("[link=https://google.com/]This links to Google[/link]")
console.print("[link=https://google.com/][bold red]This links to Google and is bold red[/bold red][/link]")
console.print("[bold red]bold red here[/bold red] then a [link=https://google.com/]a link[/link]")

If you then run it

python3 test.py > test.ans
cat test.ans # renders correctly in iTerm2 etc

But rendering it though ansi_up I get:

Any ideas?
Super thanks!

Hi! We've been using this js package for while now in order to translate our CI logs and save them as easy to read html logs.
Now, we've always preformatted the text to html ourselves because there are a few caveats we needed to take care of. So we changed the escape_for_html property to true.

However, since v5.0.0, that property is ignored, so if for example you would run:

var ansi = new AnsiUp;
ansi.escape_for_html = false;
ansi.ansi_to_html('hello<br>')

The result would be:

"hello<br>"

For now, we are going to regress and use v4.0.4.

Thanks in advance!

Thank you for sharing this. It is helpful.

Two concerns, though:

1. In the browser you are exposing ansi_up without exposing the underlying Ansi_Up class. Thus every time escape_for_html or ansi_to_html is called a new Ansi_up object is created, not an elegant solution while calling these methods on thousands of lines in a loop (template processing). Exposing the underlying class itself helps the caller to create the object once and call the methods multiple times.
2. In some situation (read, templates processing again), the external pages will have predefined css styles for the color-classes. Manually editing them in your js file is not a maintainable solution.

Would be great if you could expose an API to set the class names to override the default class names. For example, below is one example mapping (ansicode, class name).

ansi_colormap = {
    '30': 'ansiblack',
    '31': 'ansired',
    '32': 'ansigreen',
    '33': 'ansiyellow',
    '34': 'ansiblue',
    '35': 'ansipurple',
    '36': 'ansicyan',
    '37': 'ansigrey',
    '01': 'ansibold',
}

Ansi_up.setColorClasses(ansi_colormap ); // something like this

There are very few instances of the phrase whitelist in ansi_up.

They could be replaced relatively quickly and easily with allowlist.

https://developers.google.com/style/inclusive-documentation#replace

We would appreciate this change.

sample from https://github.com/constantology/ansi-pansi
input:
\u001b[0m\u001b[1;31mfoo bar\u001b[0m \u001b[3;34mlorem ipsum\u001b[0m\u001b[m
output:
foo bar lorem ipsumm

Thanks.

The character �[32m√ gets rendered as √. Is this an issue with ansi_up or the encoding?

Currently the ansi_up.js file in the root of this project is about 23KB. Providing a minified version of this file would be nice so that you don't have to vendor and minify the file yourself.

In my testing I was able to get the file size down to 9.2KB using esbuild:

$ esbuild --minify --loader=ts < ansi_up.ts > ansi_up.min.js

$ ls -alh ansi_up.min.js
-rw-r--r-- 1 loot loot 9.2K Apr 21 16:18 ansi_up.min.js

This is an improvement, but looking at the file you'll find that there is a lot of whitespace due to the rgx and rgxG templates:

"use strict";var PacketKind=(r=>(r[r.EOS=0]="EOS",r[r.Text=1]="Text", /* SNIPPING */ rgx`
                        ^                           # beginning of line
                                                    #
                                                    # First attempt
                        (?:                         # legal sequence
                          \x1b\[                      # CSI
                          ([\x3c-\x3f]?)              # private-mode char
                          ([\d;]*)                    # any digits or semicolons
                          ([\x20-\x2f]?               # an intermediate modifier
                          [\x40-\x7e])                # the command
                        )
                        |                           # alternate (second attempt)
                        (?:                         # illegal sequence
                          \x1b\[                      # CSI
                          [\x20-\x7e]*                # anything legal
                          ([\x00-\x1f:])              # anything illegal
                        )
`)
/* SNIPPING */

By manually removing the comments and whitespace from the templates I was able to get the file size down to 6.5KB:

$ ls -alh ansi_up.min.js
-rw-r--r--   1 loot loot 6.5K Apr 21 16:23 ansi_up.min.js

Manually minifying the templates for each release would be a pain though, so perhaps changing how the rgx functions are called would be a better option (perhaps by using string concatenation or de-indenting the whitespace).

I have no issue manually minifying the file for my own project, but having a minified version that others could use would be nice. I don't know what the release process looks like for this library, but I would be more than happy to write a build script that automates this minification process.

Thanks!

Hi,

Not sure if that is intended to be like so, but seems like ansi_up preserves state between calls and if previous call contained incomplete ANSI sequence, the next output will be corrupted:

import { AnsiUp } from "ansi_up";

const out1 = "\x1b[0m\x1b[0;32mTEXT\x1b[0m\x1b[1";
const out2 = "\x1b[0m\x1b[1;34mTEST";

const ansi_up = new AnsiUp();
ansi_up.use_classes = true;

ansi_up.ansi_to_html(out1);
console.log(ansi_up.ansi_to_html(out2));

It outputs [1 at the start of the second call, but doesn't do it if I comment the first call.

Related: #88

Thanks.

Consider the following code:

const chalk = require('chalk')
const { default: AnsiUp } = require('ansi_up');

const ansiUp = new AnsiUp();
console.log(ansiUp.ansi_to_html(chalk.dim('testing')));

Per the "SGR" section where $n = 2$ on https://en.wikipedia.org/wiki/ANSI_escape_code, the modifier in use here is defined as "Faint, decreased intensity, or dim". I would expect this to render as something like either of the following:

<span style="filter:brightness(0.7)">testing</span>
<span style="opacity:0.7">testing</span>

However, it just prints the string testing, indicating that this library doesn't support this modifier.

I'd be willing to open a PR if you'd accept one!

For reference, here's how a few other similar libraries implement this:

• https://github.com/Aloso/to-html/blob/4b427d59d986a937795d337a0e40d524c578cf50/crates/ansi-to-html/src/html/mod.rs#L23
• https://github.com/rburns/ansi-to-html/pull/44/files (note that this was later reverted, see rburns/ansi-to-html#45 - maybe this is more complex than it looks on the surface?)

They need to be reviewed for the new API changes

This is probably the best client-side library for rendering ANSI escape codes client-side, but one of the features that would be really nice to have is the ability to support carriage returns, since I am using it to stream terminal output.

When running the following Python code:

for i in range(10):
    print(f"{i}\r", end="")

print()

A single 9 is printed at the end, since the carriage return moves the cursor to the start of the line and each print overrides the last line.

The equivalent code in ansi_up doesn't do the same thing though:

<html>

<head>
<script src="./ansi_up.js"></script>
</head>

<body>
<pre id="console"></pre>

<script>
const ansi_up = new AnsiUp();

for (let i = 0; i < 10; i++) {
  const html = ansi_up.ansi_to_html(`${i}\r`);

  document.getElementById("console").innerHTML += html;
}
</script>
</body>
</html>

When running this you get:

0
1
2
3
4
5
6
7
8
9

I would imagine this could be implemented by popping the last HTML element, that or adding a new element with a relative vertical position (and making sure to set the background so the last line doesnt bleed through). I wouldn't mind implementing this myself, but I might need a few pointers on where to start.

Thanks!

How about add a flag for ansi_to_html, or add a function like ansi_to_plane_text?

add transform_to_plane like transform_to_html. (or just make with_state optional and make optional?).

by this way, I can parse log conveniently and get html at the same time.

Hey,

please make sure to tag every version you publish on bower/npm. Currently everyone who installs this package will always install the #master version of it. That might be not desired in many cases. So after you bump up your version please tag it (via git tag -a v1.1.4) and push that tag to github (git push --tags).

Thanks!

The DTS file https://github.com/drudru/ansi_up/blob/master/ansi_up.d.ts used in package.json does not have default export. The proper file which should be referenced in types property of package.json is
https://github.com/drudru/ansi_up/blob/master/dist/ansi_up.d.ts (it has the default export).

I'm looking for a package that can convert ansi-tagged links to html.

This would produce a link from bash

echo -e '\e]8;;http://example.com\e\\This is a link\e]8;;\e\\'

or in a JS module:

'use strict';

/*
A hyperlink is opened upon encountering an OSC 8 escape sequence with the target URI. The syntax is
OSC 8 ; params ; URI BEL|ST
Following this, all subsequent cells that are painted are hyperlinks to this target. A hyperlink is closed with the same escape sequence, omitting the parameters and the URI but keeping the separators:
OSC 8 ; ; BEL|ST
const ST = '\u001B\\';
 */
const OSC = '\u001B]';
const BEL = '\u0007';
const SEP = ';';

const PARAM_SEP = ':';
const EQ = '=';

module.exports = (text, uri, params) => {
	params = params || {};

	return [
		OSC,
		'8',
		SEP,
		Object.keys(params).map(key => key + EQ + params[key]).join(PARAM_SEP),
		SEP,
		uri,
		BEL,
		text,
		OSC,
		'8',
		SEP,
		SEP,
		BEL
	].join('');
};

Both test cases seem to be skipped by ansi_up. They are neither convertable to text, nor to html. Both seem to work in the terminal.

Could we get these supported?

Thank you very much.

I recently found out that xterm uses a weird escape sequence for the normal/reset sequence (aka sgr0). Most terminals use \e[0m, but xterm uses \e(B\e[m:

$ env TERM=st-256color tput sgr0 | xxd
00000000: 1b5b 306d                                .[0m
$ env TERM=xterm tput sgr0 | xxd
00000000: 1b28 421b 5b6d                           .(B.[m

Here is a small repro:

<html>

<head>
<script src="./ansi_up.js"></script>
</head>

<body>
<pre id="console"></pre>

<script>
const ansi_up = new AnsiUp();

const colors = "\033[1m\033[32mABC";

const xterm = "\033(B\033[mDEF\n";
const notXterm = "\033[0mDEF\n";

const html = ansi_up.ansi_to_html(colors + xterm + colors + notXterm);

document.getElementById("console").innerHTML += html;
</script>
</body>
</html>

And this is what it is displaying:

They both reset the color, though the (B bit shouldn't be there in the top line.

ansi_to_html("foo \033[1mbar \033[mbaz") somewhat unexpectedly produces
foo <span style="color:rgb(255,255,255)">bar </span>baz

SGR code 1 is meant to turn text "Bold".
While the library description only seems to explicitly address color I'd expect either
foo <span style="font-weight: bold;">bar </span>baz or the code to be ignored.

Any reason to do so?
This seems bad. It breaks our build as we're using an older npm version

Hey there!

We use this library for rendering deploy logs at Netlify. When upgrading to 6.0.0, I've noticed that if one call to ansi_to_html detects an ansi value that should bold the text, that bold state carries over to subsequent calls to ansi_to_html.

I've created a CodeSandbox comparing 5.2.1 and 6.0.0 behavior. The first bold ansi value appears around the Netlify Build line. In 6.0.0, it bolds all subsequent lines while this doesn't happen in v5.

A workaround is to create a new instance of AnsiUp for every call.

Hi, I've a question I don't find the answer at the docs or the code.

If I call ansi_up.ansi_to_html() and the content ends with red fg color, the next time I call it the result will start with red? because I'm receiving the terminal output via stream and the stream may be paused anywhere. If the answer is no is there a class I could instantiate to store the state?

Also I don't find anything about underline, stroke, inverse or italics, is this supported?

When using bold ansi like in chalk:
https://github.com/chalk/ansi-styles/blob/master/index.js#L31

I get bold on the terminal, but nothing on ansi_up.

I haven't used .vscode for a long time.
I risk annoying people with a broken out of date .vscode config.

In the readme you speak about a usecase, I'm trying to build the same thing on a Node express server, do you have some code to share? Client and server side? That would be very useful!

https://github.com/drudru/ansi_up#example-of-a-use-case

Thanks

Luca