Duplicated Output

[mAAdhaTTah]

Loving the concept of Ink but having some issues with the rendering. I'm seeing this duplicated output:

Have you seen this before? Any idea what the issue could be? I'm not sure this is a bug, but I can't seem to nail down the cause. While I'm typing the answers to the questions, it works fine. It only starts to break when it renders the other parts of the UI.

Thanks for your help and happy holidays!

[mAAdhaTTah]

Playing around with this today, it appears to only happen when rendering multiline strings. So rendering:

<div>{message}</div>

where message is a multiline string, using either template string or output from a spawned process. I'm working on producing an isolated reproducible case.

[mAAdhaTTah]

Isolated to a log-update issue: sindresorhus/log-update#28

[Kikobeats]

I'm running into this issue, so I don't think is part of log-update logic.

In my case, I want to output an array as string, something like:

const urls = map(links, (statusCode, url) => `${statusCode} ${url}`)

Then I want to write it into the stdout

<div>
  {urls.join(os.EOL)}
 </div>

I tested that, when more than 37 elements are present into the array, the output is twice times printed, first print show just 14 elements, but the second print show all of them.

Not sure why the arbitrary 37 nombre, probably something related with the render layout?

[Kikobeats]

Having the same issue using Table component with a dataset higher than 37

[Kikobeats]

oh wow, looks like the bug actually depends of your terminal size 🤔

[mAAdhaTTah]

Yeah.. I have to imagine this is a fairly low level issue. I personally have made zero progress here, unfortunately.

[vadimdemedes]

This bug indeed depends on terminal size. If output from your command is taller than terminal height, it can't be correctly rendered, unfortunately. That's the limitation of the environment Ink is in 🤷‍♂️

In Ink 2 there's a <Static> component which permanently flushes output of its children to terminal, which I believe should help most cases. For example, in Jest or AVA or any other test framework, there's a list of completed tests. This sort of thing will never ever fit into terminal's "viewport", so it's useful to use <Static> to flush those tests and forget about them:

<Static>
	<Test key="test-1" title="Completed test #1"/>
	<Test key="test-2" title="Completed test #2"/>
	{/* ... */}
</Static>