Render last frame only when there is no output TTY

src/components/App.tsx

@@ -22,6 +22,7 @@ type Props = {
 	readonly writeToStderr: (data: string) => void;
 	readonly exitOnCtrlC: boolean;
 	readonly onExit: (error?: Error) => void;
+	readonly hasCursor: boolean;
 };
 
 type State = {
@@ -127,11 +128,15 @@ export default class App extends PureComponent<Props, State> {
 	}
 
 	override componentDidMount() {
-		cliCursor.hide(this.props.stdout);
+		if (this.props.hasCursor) {
+			cliCursor.hide(this.props.stdout);
+		}
 	}
 
 	override componentWillUnmount() {
-		cliCursor.show(this.props.stdout);
+		if (this.props.hasCursor) {
+			cliCursor.show(this.props.stdout);
+		}
 
 		// ignore calling setRawMode on an handle stdin it cannot be called
 		if (this.isRawModeSupported()) {

src/ink.tsx

@@ -25,6 +25,7 @@ export type Options = {
 	debug: boolean;
 	exitOnCtrlC: boolean;
 	patchConsole: boolean;
+	renderLastFrameOnly?: boolean;
 	waitUntilExit?: () => Promise<void>;
 };
 
@@ -40,6 +41,9 @@ export default class Ink {
 	// This variable is used only in debug mode to store full static output
 	// so that it's rerendered every time, not just new static parts, like in non-debug mode
 	private fullStaticOutput: string;
+	// CI environments and piped output don't handle erasing ansi escapes well,
+	// so it's better to only render last frame of non-static output
+	private readonly renderLastFrameOnly: boolean;
 	private exitPromise?: Promise<void>;
 	private restoreConsole?: () => void;
 	private readonly unsubscribeResize?: () => void;
@@ -66,6 +70,8 @@ export default class Ink {
 					leading: true,
 					trailing: true,
 				});
+		this.renderLastFrameOnly =
+			options.renderLastFrameOnly ?? (isInCi || !options.stdout.isTTY);
 
 		// Ignore last render after unmounting a tree to prevent empty output before exit
 		this.isUnmounted = false;
@@ -107,7 +113,7 @@ export default class Ink {
 			this.patchConsole();
 		}
 
-		if (!isInCi) {
+		if (!this.renderLastFrameOnly) {
 			options.stdout.on('resize', this.resized);
 
 			this.unsubscribeResize = () => {
@@ -158,7 +164,7 @@ export default class Ink {
 			return;
 		}
 
-		if (isInCi) {
+		if (this.renderLastFrameOnly) {
 			if (hasStaticOutput) {
 				this.options.stdout.write(staticOutput);
 			}
@@ -202,6 +208,7 @@ export default class Ink {
 				writeToStdout={this.writeToStdout}
 				writeToStderr={this.writeToStderr}
 				exitOnCtrlC={this.options.exitOnCtrlC}
+				hasCursor={!this.options.debug && !this.renderLastFrameOnly}
 				onExit={this.unmount}
 			>
 				{node}
@@ -221,7 +228,7 @@ export default class Ink {
 			return;
 		}
 
-		if (isInCi) {
+		if (this.renderLastFrameOnly) {
 			this.options.stdout.write(data);
 			return;
 		}
@@ -242,7 +249,7 @@ export default class Ink {
 			return;
 		}
 
-		if (isInCi) {
+		if (this.renderLastFrameOnly) {
 			this.options.stderr.write(data);
 			return;
 		}
@@ -270,9 +277,7 @@ export default class Ink {
 			this.unsubscribeResize();
 		}
 
-		// CIs don't handle erasing ansi escapes well, so it's better to
-		// only render last frame of non-static output
-		if (isInCi) {
+		if (this.renderLastFrameOnly) {
 			this.options.stdout.write(this.lastOutput + '\n');
 		} else if (!this.options.debug) {
 			this.log.done();
@@ -300,7 +305,7 @@ export default class Ink {
 	}
 
 	clear(): void {
-		if (!isInCi && !this.options.debug) {
+		if (!this.renderLastFrameOnly && !this.options.debug) {
 			this.log.clear();
 		}
 	}

src/render.ts

@@ -41,6 +41,13 @@ export type RenderOptions = {
 	 * @default true
 	 */
 	patchConsole?: boolean;
+
+	/**
+	 * Configure whether Ink should only render the last frame of non-static output. Useful when ANSI erase codes are not supported.
+	 *
+	 * @default true if in CI or stdout is not a TTY
+	 */
+	renderLastFrameOnly?: boolean;
 };
 
 export type Instance = {

test/components.tsx

@@ -1,8 +1,8 @@
 import EventEmitter from 'node:events';
 import test from 'ava';
 import chalk from 'chalk';
-import React, {Component, useState} from 'react';
-import {spy} from 'sinon';
+import React, {Component, useEffect, useState} from 'react';
+import {spy, type SinonSpy} from 'sinon';
 import ansiEscapes from 'ansi-escapes';
 import {
 	Box,
@@ -645,7 +645,7 @@ test('render only last frame when run in CI', async t => {
 	t.true(output.includes('Counter: 5'));
 });
 
-test('render all frames if CI environment variable equals false', async t => {
+test('render all frames if CI environment variable equals false and there is an output TTY', async t => {
 	const output = await run('ci', {
 		// eslint-disable-next-line @typescript-eslint/naming-convention
 		env: {CI: 'false'},
@@ -657,6 +657,111 @@ test('render all frames if CI environment variable equals false', async t => {
 	}
 });
 
+function TestLastFrame(props: {
+	readonly continueTest: () => void;
+	readonly message1: string;
+	readonly message2: string;
+}) {
+	const [message, setMessage] = useState(props.message1);
+	useEffect(() => {
+		setTimeout(() => {
+			setMessage(props.message2);
+			props.continueTest();
+		}, 1);
+	}, [message]);
+	return <Text>{message}</Text>;
+}
+
+test('render only last frame when run without an output tty', async t => {
+	// Create without a TTY
+	const stdout = createStdout(undefined, false);
+	const message1 = 'Hello';
+	const message2 = 'World';
+
+	let continueTest = () => {};
+	const synchronizer = new Promise<void>((resolve, _reject) => {
+		continueTest = resolve;
+	});
+
+	const {unmount} = render(
+		<TestLastFrame
+			continueTest={continueTest}
+			message1={message1}
+			message2={message2}
+		/>,
+		{
+			stdout,
+		},
+	);
+	await synchronizer;
+	unmount();
+
+	const writeSpy = stdout.write as SinonSpy;
+	t.true(writeSpy.calledOnce);
+	t.true((writeSpy.firstCall.args[0] as string).includes(message2));
+});
+
+test('render only last frame when enabled in options', async t => {
+	const stdout = createStdout();
+	const message1 = 'Hello';
+	const message2 = 'World';
+
+	let continueTest = () => {};
+	const synchronizer = new Promise<void>((resolve, _reject) => {
+		continueTest = resolve;
+	});
+
+	const {unmount} = render(
+		<TestLastFrame
+			continueTest={continueTest}
+			message1={message1}
+			message2={message2}
+		/>,
+		{
+			stdout,
+			renderLastFrameOnly: true,
+		},
+	);
+	await synchronizer;
+	unmount();
+
+	const writeSpy = stdout.write as SinonSpy;
+	t.true(writeSpy.calledOnce);
+	t.true((writeSpy.firstCall.args[0] as string).includes(message2));
+});
+
+test('render all frames when enabled in options', async t => {
+	// Create without a TTY so last frame is the default
+	const stdout = createStdout(undefined, false);
+	const message1 = 'Hello';
+	const message2 = 'World';
+
+	let continueTest = () => {};
+	const synchronizer = new Promise<void>((resolve, _reject) => {
+		continueTest = resolve;
+	});
+
+	const {unmount} = render(
+		<TestLastFrame
+			continueTest={continueTest}
+			message1={message1}
+			message2={message2}
+		/>,
+		{
+			stdout,
+			// Override the default
+			renderLastFrameOnly: false,
+		},
+	);
+	await synchronizer;
+	unmount();
+
+	const writeSpy = stdout.write as SinonSpy;
+	t.true(writeSpy.calledTwice);
+	t.true((writeSpy.firstCall.args[0] as string).includes(message1));
+	t.true((writeSpy.secondCall.args[0] as string).includes(message2));
+});
+
 test('reset prop when it’s removed from the element', t => {
 	const stdout = createStdout();
 

test/errors.tsx

@@ -22,7 +22,10 @@ test('catch and display error', t => {
 		throw new Error('Oh no');
 	};
 
-	render(<Test />, {stdout});
+	render(<Test />, {
+		stdout,
+		debug: true,
+	});
 
 	t.deepEqual(
 		stripAnsi((stdout.write as any).lastCall.args[0] as string)
@@ -40,7 +43,7 @@ test('catch and display error', t => {
 			" 22:     throw new Error('Oh no');",
 			' 23:   };',
 			' 24:',
-			' 25:   render(<Test />, {stdout});',
+			' 25:   render(<Test />, {',
 			'',
 			' - Test (test/errors.tsx:22:9)',
 		],

test/helpers/create-stdout.ts

@@ -6,12 +6,13 @@ type FakeStdout = {
 	get: () => string;
 } & NodeJS.WriteStream;
 
-const createStdout = (columns?: number): FakeStdout => {
+const createStdout = (columns?: number, isTTY?: boolean): FakeStdout => {
 	const stdout = new EventEmitter() as unknown as FakeStdout;
 	stdout.columns = columns ?? 100;
 
 	const write = spy();
 	stdout.write = write;
+	stdout.isTTY = isTTY ?? true;
 
 	stdout.get = () => write.lastCall.args[0] as string;