ionicabizau / anser Goto Github PK

If you have a URL that's got color codes around it and linkify the output, you'll get a </span> in the link because the regex for URL (specifically the host/path portion) will match any non-whitespace character:

Example

(Same code, just inlined here)

var anser = require("anser")

const link = anser.linkify(anser.ansiToHtml(
    "\u001b[31mhttps://github.com/IonicaBizau/anser\u001b[0m"
))

console.log(link)

RunKit repro (same code as here): https://runkit.com/milas/605a270caf5fed001a4b6e93

Output

<span style="color:rgb(187, 0, 0)"><a href="https://github.com/IonicaBizau/anser</span>">https://github.com/IonicaBizau/anser</span></a>

Solution

If we assume the input has been escaped with escapeForHtml, perhaps linkify's regex could be made more strict to only match on URL safe characters? Just adding < to the not matching set would also probably be sufficient for this case, but there might be other edge cases re: linkifying in general (i.e. not induced by having a surrounding color code) that are still missed.

Howdy! Some terminals seem to be offering an ansi extension to support terminal links.

ref: https://iterm2.com/documentation-escape-codes.html

the logic i think is something along these lines:

    const m = source.match(/\x1B\]8;;(.+)\u0007(.+)\x1B\]8;;\u0007/)
    if (m) {
      return (
        <span>
          {source.slice(0, m.index)}
          <a href={m[1]}>{m[2]}</a>
          {source.slice(m.index + m[0].length)}
         </span>
      )
    }

According to the Wikipedia article linked in the README (and from a quick test in my terminal), valid values for the 8-bit color mode include the range [232,255] for grayscale values, but it seems the library doesn't support this. use_classes: true seems to still work as expected, so it really just seems to be the conversion from palette color to RGB that is not supported:

var anser = require("anser")

const txt = "\u001b[38;5;255mHello\u001b[39m \u001b[48;5;235mWorld\u001b[49m";

console.log(anser.ansiToHtml(txt));
// <span style="color:rgb(undefined, undefined, undefined)">Hello</span> <span style="background-color:rgb(undefined, undefined, undefined)">World</span>

console.log(anser.ansiToHtml(txt, { use_classes: true }));
// <span class="ansi-palette-255-fg">Hello</span> <span class="ansi-palette-235-bg">World</span>

Converting to JSON instead produces similar results.

I want to be able to create an Anser instance, and call it with "chunks" of text such that colors carry over from chunk to chunk.

However, this currently only works correctly if each chunk starts with a color code:

const a = new Anser();

// set fg to yellow
a.ansiToJson("\u001b[32mhello") // fg: '0, 187, 0', bg: null

// fg doesn't carry over
a.ansiToJson("world") // fg: null, bg: null

// fg does carry over
a.ansiToJson("\u001b[43mworld") // fg: '0, 187, 0', bg: '187, 187, 0'

Is the intended behavior to reset between calls? This seems like a clear bug one way or another.

Example: https://runkit.com/embed/2dwa8vsh09mo

Log:

$ npm run build

> [email protected] build /Users/rgbkrk/code/src/github.com/nteract/nbp-trial
> npm run clean && npm run build:webpack


> [email protected] clean /Users/rgbkrk/code/src/github.com/nteract/nbp-trial
> rimraf dist


> [email protected] build:webpack /Users/rgbkrk/code/src/github.com/nteract/nbp-trial
> cross-env NODE_ENV=production webpack --config webpack.config.prod.js

Hash: 7c58c29adad66177efb8
Version: webpack 1.13.0
Time: 5435ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  2.39 MB       0  [emitted]  main
bundle.js.map  2.88 MB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
    + 310 hidden modules

ERROR in bundle.js from UglifyJs
Unexpected token: name (Anser) [./~/anser/lib/index.js:28,0]

Related repo: https://github.com/rgbkrk/notebook-preview-demo

Found this initially nteract/nteract#4816. This might be as intended, but as I think about it more, I think its an issue here rather than in ansi-to-react.

tl;dr:

Anser.ansiToJson("\u001b[40mhello\u001b[0m", {use_classes: true}

yields

[
  {
    "content": "",
    "fg": null,
    "bg": null,
    "fg_truecolor": null,
    "bg_truecolor": null,
    "clearLine": false,
    "decoration": null,
    "was_processed": false
  },
  {
    "content": "hello",
    "fg": null,
    "bg": "ansi-black",
    "fg_truecolor": null,
    "bg_truecolor": null,
    "clearLine": false,
    "decoration": null,
    "was_processed": true
  },
  {
    "content": "",
    "fg": null,
    "bg": null,
    "fg_truecolor": null,
    "bg_truecolor": null,
    "clearLine": false,
    "decoration": null,
    "was_processed": false
  }
]

where the colors are given as ansi-black instead of ansi-black-fg.

The HTML output is

<span class="ansi-black-bg">hello</span>

_{Ported issue from IonicaBizau/ansi-to-json#2}

• [1m/bold Set "bright" attribute
• [2m/dim Set "dim" attribute
• [4m/smul Set "underscore" (underlined text) attribute
• [5m/blink Set "blink" attribute
• [7m/rev Set "reverse" attribute
• [8m/invis Set "hidden" attribute

Code ref

Only a subset of all ansi styles are being supported, for instance, grey, bold, striketrough are missing.

The parser could be improved to deal with the ansi-styles present here: https://github.com/chalk/ansi-styles/blob/master/index.js#L21, probably by using that module itself.

Thoughts?

This library doesn't seem to handle the escape codes for links properly.
Documentation: https://gist.github.com/egmontkob/eb114294efbcd5adb1944c9f3cb5feda

Thanks for the great project! You recently fixed a lng-standing issue where bold text was "sticky". Great! The only issue we see now is the bold+underline combo. On the left is the output as expected. On the right is as-rendered by anser 2.1.0.

Hi @IonicaBizau
I hope you are doing well 😄

I just begun coding an Angular App with Typescript,
and would like to provide Typings for Anser.

I will create a PR for DefinetlyTyped and maybe you can also review/contribute.
Howto:
https://github.com/DefinitelyTyped/DefinitelyTyped

I will report back here once I have something working

cheers

I am currently working on a Project, where I want to output shell-commands via a Websocket "live" to the browser. Your Project is amazing!

I was just wondering if you could support ncurses formatted output like complex loading bars.

I have this dummy-shell command I use to test the parsing:
https://gist.github.com/clouless/c60680a737be2b71c21d6e51cd8ec1b7

And that works very well with your tool except the ncurses part at the bottom.
Maybe that cannot be supported but I was thinking of some Cursor-Reset or Screen-Reset feature which could be included in the toJSON function.

Let's say we have a progress bar:

#!/bin/bash

echo "now comes the progress bar"
sleep 1s
echo -ne '#####                     (33%)\r'
sleep 1
echo -ne '#############             (66%)\r'
sleep 1
echo -ne '#######################   (100%)\r'
echo -ne '\n'

Maybe when that get's parsed the special chars that delete the line in the terminal lead to a new property inside the json like: resetLastLine: false

console.log(Anser.ansiToJson(txt));
// [ { content: 'now comes the progress bar',
//     fg: null,
//     bg: null,
//     fg_truecolor: null,
//     bg_truecolor: null,
//     was_processed: false,
//     resetLastLine: false,
//     isEmpty: [Function] },
// [ { content: '#####                     (33%)',
//     fg: null,
//     bg: null,
//     fg_truecolor: null,
//     bg_truecolor: null,
//     was_processed: false,
//     resetLastLine: true,
//     isEmpty: [Function] },
// [ { content: '#############             (66%)',
//     fg: null,
//     bg: null,
//     fg_truecolor: null,
//     bg_truecolor: null,
//     was_processed: false,
//     resetLastLine: true,
//     isEmpty: [Function] },
// [ { content: '#######################   (100%)',
//     fg: null,
//     bg: null,
//     fg_truecolor: null,
//     bg_truecolor: null,
//     was_processed: false,
//     resetLastLine: true,
//     isEmpty: [Function] },

When I then parse the JSON to use it in my custom Output in HTML I can interpret it and delete the last object. Basically I will have something like an ReactJS-Component for each Line of STDOUT in an Array and that get's rendered live. And once the resetLastLine: true comes in, I just remove the previous array element and React Rerenders all components and removes the old ProgressBar and adds the new. This way it looks just like on the commandline - at least I hope so :D

What do you think, could something like that be done?

06527e4#diff-0e3ac3694919aca1db302bc3ebe669f2R34

export default should be export = , according to the way your package is actually behaving.

export default makes TypeScript think that there is a default property like exports.default = , which is not the case.