ionicabizau / anser Goto Github PK
View Code? Open in Web Editor NEW:tv: A low level parser for ANSI sequences.
License: MIT License
:tv: A low level parser for ANSI sequences.
License: MIT License
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:
Lines 196 to 198 in fb58237
(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
<span style="color:rgb(187, 0, 0)"><a href="https://github.com/IonicaBizau/anser</span>">https://github.com/IonicaBizau/anser</span></a>
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.
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" attributeOnly 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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.