Follow up of nteract/nteract#4875. We need to implement the same functionality when not using class names (i.e., when using the style prop).

We'll probably support just a few (e.g., bold, underline, and not blink or reverse).

Describe the problem
When a extremely large output of text is being rendered, React cannot seem to handle the memory pressure and crashes the app. Chunking the outputs to allow react to handle them in pieces seems to relieve the memory pressure. However, this creates a problem with ansi-to-react using <code> which changes how the chunks are now rendered.

Describe the solution you'd like
If the data length passes a high threshold of character count, we split the output into chunks and then render the chunks as span using the ansi-to-react change and wrap it outside as code.

In order to do this, we will need to modify two nteract repos:

1. outputs: add support to split the props.data in multiple chunks, map the array, and make sure to call ANSI in each iteration to render that piece of data.
2. ansi-to-react: add support to treat each piece of chunk as a <span> element and let media plain wrap it in a <code> element.

Migrating this from an external bug tracker.

I am not sure if it is our bug or not.
Try running "!conda install nltk -y", you can see that some of the output looks like this: "Solving environment: / ��- ��\ ��| ��/ ��- ��\ ��| ��/ ��- ��\ ��| ��/", where block character stands backspace, I assume, and it is supposed to erase previous state of the spinner.

On the other hand, later when you see progress bars growing such as this:
Downloading and Extracting Packages conda-4.7.11 | 3.0 MB | ##################################### | 100%
I think in that case backspace is being handled correctly, because you can see numbers appearing first, then they are getting erased, and then "#" appears.

So this is why I am hesitant to call that we do not handle backspaces - it looks like in some cases we do, but in others, such as with this spinner, we don't.

In either case, I think we should fix these spinners.

Hi! This is a really cool library, it made the problem of the rendering of ANSI for a project I work just stupidly easy 😅 Thanks!

I found a problem with some stuff that is not properly rendered and I'm not sure if I'm doing something wrong (with the input) or if it is a bug.

I have the following text:

$ docker-compose down
Stopping server_tsplay_1 ... ^M
^[[1A^[[2K^MStopping server_tsplay_1 ... ^[[32mdone^[[0m^M^[[1BRemoving server_tsplay_1 ... ^M
^[[1A^[[2K^MRemoving server_tsplay_1 ... ^[[32mdone^[[0m^M^[[1BRemoving network server_default
$ docker-compose up -d
Creating network "server_default" with the default driver
Creating server_tsplay_1 ... ^M
^[[1A^[[2K^MCreating server_tsplay_1 ... ^[[32mdone^[[0m^M^[[1B$ docker-compose logs
Attaching to server_tsplay_1

This is how it looks on the terminal:

And this is how it looks rendered (split by line):

<div className="logs">
  {log.split('\n').map((line, index) => (
    <Ansi key={index}>{line}</Ansi>
  ))}
</div>

This is just the text, just in case it serves as reference.

$ docker-compose down
Stopping server_tsplay_1 ... done
Removing server_tsplay_1 ... done
Removing network server_default
$ docker-compose up -d
Creating network "server_default" with the default driver
Creating server_tsplay_1 ... done
$ docker-compose logs
Attaching to server_tsplay_1

/cc nteract/transformime#52 (comment)

This package implicitly relies on React yet doesn't specify it. I'm in the process of making PRs for other repos to bump to React 15 and noticed this one is missing it.

Version 2.8.1 of enzyme just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As enzyme is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Ansi can be very slow for rendering large amounts of text to the point where nteract cannot keep up and crashes.

For me performance issues are appearing when executing anything larger than:

print("This is too large to render smoothly :( "*500000)

This seems to be caused by the Ansi component even without the linkify option. Improving the performance of escape-carriage also didn't help 😕

could u change this in the package.json
to allow react v17 ?

i can confirm that it works for me with react 17, if i force install, but it would be better to just install without force.

"peerDependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  }

it could be

    "react": "^16.3.2 || ^17.0.0",
    "react-dom": "^16.3.2 || ^17.0.0"

Currently, peer dependencies are set to allow v16 and v17 of react and react-dom. This prevents projects using this module from upgrading to v18.

Is it straightforward to also support ^18.0.0?

Looks like the current linkify regular expression does not handle well strings with a significant number of whitespaces characters in a row (potentially a Catastrophic backtracking regex condition / ReDoS?)

Here is a reduced test case that replicates the root issue showing the potential regex fix and the current regex crashing

This is partially a duplicate of IonicaBizau/ansi-to-json#2 with a bit more. The escape codes I definitely want to support are related to clearing (which needs to know the line). As brought up in xtermjs/xterm.js#48, we'd like to reduce:

to this:

What has to be done that this option works? the classes are set but it looks like the css isn't generated/included

I have an error when opening page of a project using nextjs :

./pages/xxx.js:10:0
Module not found: Can't resolve 'ansi-to-react'
> 10 | import Ansi from "ansi-to-react";

versions :

• react 17
• ansi-to-react 6.1.1

I have no error when using ansi-to-react 5

Does anyone have a clue ?

here is the code

// pages/xxx.js
import React from 'react'
import Ansi from "ansi-to-react";

function sexylogs() {
    return (
        <Ansi>{'test'}</Ansi>
    );
}

Why trying to enable <Ansi> via https://review.opendev.org/#/c/716251/4/web/src/containers/build/BuildOutput.jsx I observed that this produces failures like https://storage.gra.cloud.ovh.net/v1/AUTH_dcaab5e32b234d56b626f72581e3644c/zuul_opendev_logs_aa6/716251/4/check/zuul-build-dashboard/aa6b67f/npm/html/build/f88a6e20be834d5a8245b5473e609a8e

TypeError: "e.split is not a function"
    value index.js:291
    value index.js:251
    value index.js:99
    default index.js:28
    default index.js:115
    React 6
    unstable_runWithPriority scheduler.production.min.js:19
    React 6
    Redux 7
    N build.js:280
react-dom.production.min.js:209:194
    React 5
    unstable_runWithPriority scheduler.production.min.js:19
    React 4
    unstable_runWithPriority scheduler.production.min.js:19
    React 6
    Redux 7
    N build.js:280

This error happens only on this proposed change so it should have something to so with how I tried to use it.

Package published at https://www.npmjs.com/package/ansi-to-react points to https://github.com/nteract/nteract/tree/master/packages/ansi-to-react instead of the current repository.

Current implementation assumes it will render a single line which is really problematic because ANSI text cannot just be split by line and processed individually, mainly because an escape set on one line will not be reset at the next line.

Another issue with multilines is that i completely breaks the formatting if you feed it multiline strings by combining the lines.

Ideally it should produce results similar to <pre> blocks. This means it it should, at least, produce different spans+<br/> or for each line.

Hello, it looks like the current npm package is a commonjs module, but when building locally I obtain an ESM module so it looks that the published version is not the latest one and ESM module looks like a better option anyway since it's the standard now.

I'm finding more and more notebooks that are breaking with ansi-to-reacts Linkify setup.

Example cases:

 <transport.model.TransportInfo

<module 'something' from '/usr/local/lib/python2.7/dist-packages/something/__init__.pyc'>

I want to contribute some changes to ansi-to-react but I am unable to find the command I need to run in order to run its unittesting. I am sure that this may be obvious for some JS devs but for occasional contributors it is not.

One or two lines added to the README would likely be enough to give a head start.

Hi,

On some older versions, the NPM package has the BSD-3-Clause LICENSE file (example), but then says MPL 2.0 on the package.json (example).

Is the package LICENSE just BSD-3-Clause?

Thank you!

All in title ?

Could you please make linkifying of the content that was recently released optional?

It is causing side effects that are not desired.

There are some non-ES5 bits in this code that, while they don't affect our desktop app, do affect old browsers when bundled and uglified for production. We either need to ditch the template literals and use of const or rely on a babel setup here too.

ansi-to-react is AFAIK the only nteract module that uses prop-types as a direct peer dependency. I think we should switch to flow.

Should we add ansi-to-react to the nteract monorepo as well?

Github releases are not updated from 2017... I know you might not be creating release at github side but wanted to see change log and where it is maintained

Hi! Version 6.0.6 seems broken. There is no lib directory, so it can not load. All is fine in 6.0.5.

I've spent 30 minutes trying to figure out how to achieve dark mode, only to find out it was REALLY simple.

For the benefit of others who wish to support ANSI output in both dark/light mode:

Ansi output does not normally dictates the background and text color of non highlighted text. Ansi colors render well on both dark and light backgrounds.

For dark/light modes, simply set the background-color and color style properties of the container:

import Ansi from "ansi-to-react";
export function AnsiOutput() {
  return (
    <div style={{ backgroundColor: 'black', color: 'white' }}>
      <Ansi>{'\u001b[34mhello world'}</Ansi>
    </div>
  );
}

Please release a new version to npm that is compatible with react 18