Xterm.js: How to use with "colors" lib?

[aventurella]

https://github.com/Marak/colors.js
https://www.npmjs.com/package/colors
https://www.npmjs.com/package/chalk

Is there anything preventing this from working with the lib mentioned above? It should just be dealing with the escape sequences correct?

I'm having an issue getting it to work, which is not to say it's an issue with xterm.js just that I am not aware of how to make it work or is an alternate color lib would be better suited.

[mofux]

How are you using it? Are you generating a coloured string and then directly write it to the xterm.js instance?

[aventurella]

Yes, for example, I just tried it with chalk (https://www.npmjs.com/package/chalk)

terminal.writeln(chalk.blue('Hello') + ' World' + chalk.red('!'));

I also tried it with colors (https://www.npmjs.com/package/colors)

terminal.writeln(colors.green('Hello World'));

and the output is black and white in both cases

[mofux]

I would expect this to work, as long as it generates the correct ansi escape codes for the color. How does the output from xterm look like? An uncoloured string? Can you send a screenshot?

[aventurella]

[Tyriar]

Works for me:

Are you on windows? If so what shell are you using?

[Tyriar]

Oh wait, Windows shouldn't matter here. You wouldn't even need a shell hooked up for this to work.

I'm not sure why it's not working for you. Any errors in the console?

[aventurella]

Ya from the node repl it works, this is in the browser which I think might be the issue.

[mofux]

I think @Tyriar was writing in the chrome developer console of the xterm.js demo (see the second screenshot, term.writeln...). Could you try with the same string he was using and see if it works for you?

[mofux]

@Tyriar Do you think this would also work if the terminal is vanilla and wasn't connected to a tty process that sets up xterm.js first? Just thinking if there are any sequences that xterm.js consumes to set the color mode...

[Tyriar]

Works for me

[aventurella]

If I format the message on the server, instead of running chalk in the browser I get colors. If I use chalk directly in the browser, I don't get any colors.. lemme try one more thing to be sure I'm not just a total idiot (it may already be too late)

[Tyriar]

@aventurella try running the term.writeln('\u001b[34mHello\u001b[39m World\u001b[31m!\u001b[39m') directly without chalk.

[aventurella]

@Tyriar ya, that works fine...

Now this has me wondering if it's not webpack doing something to chalk at bundle time.

[Tyriar]

Yeah it seems like a chalk issue then, try logging what chalk is returning or debug into the chalk call.

Closing since it's not a problem with xterm.js, I'm curious to hear the reason though.

[aventurella]

@Tyriar ok I figured it out..

Chalk is doing some auto detection to see what it should support, using this lib: https://github.com/chalk/supports-color

Long story short, chalk thinks nothing is supported color wise, so it doesn't process the strings.

let options: any = {enabled: true, level: 2};
const forcedChalk = new chalk.constructor(options);

^ fixes it in the browser

where Levels are:

0: All colors disabled
1: Basic color support (16 colors)
2: 256 color support
3: Truecolor support (16 million colors)

[Tyriar]

Interesting, does chalk check by checking environment variables or something?

[cdaringe]

thanks @aventurella!

@Tyriar, ready for it? https://github.com/chalk/supports-color/blob/master/browser.js

boom. when chalk creates its config, it asks supports-color, which returns false for the browser.

[Tyriar]

@cdaringe Does this happen only when you build via browserify? Don't you always run chalk through a node process? 😕

[cdaringe]

@Tyriar, correct, im talking via a browser bundler ref. to clarify, my remark wasn't to highlight any issue with this package, rather, to just help drive further understanding :)

[mbnatafgi]

@aventurella thank you! but it seems that chalk.constructor is deprecated and may have been removed in the latest versions. We ought to use chalk.Instance instead.