Fix stale output when outputHeight changes from above stdout.rows to below stdout.rows (#717)

Author: thkim1011

src/ink.tsx

@@ -35,6 +35,7 @@ export default class Ink {
 	// Ignore last render after unmounting a tree to prevent empty output before exit
 	private isUnmounted: boolean;
 	private lastOutput: string;
+	private lastOutputHeight: number;
 	private readonly container: FiberRoot;
 	private readonly rootNode: dom.DOMElement;
 	// This variable is used only in debug mode to store full static output
@@ -72,6 +73,7 @@ export default class Ink {
 
 		// Store last output to only rerender when needed
 		this.lastOutput = '';
+		this.lastOutputHeight = 0;
 
 		// 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
@@ -168,18 +170,21 @@ export default class Ink {
 			}
 
 			this.lastOutput = output;
+			this.lastOutputHeight = outputHeight;
 			return;
 		}
 
 		if (hasStaticOutput) {
 			this.fullStaticOutput += staticOutput;
 		}
 
-		if (outputHeight >= this.options.stdout.rows) {
+		if (this.lastOutputHeight >= this.options.stdout.rows) {
 			this.options.stdout.write(
-				ansiEscapes.clearTerminal + this.fullStaticOutput + output,
+				ansiEscapes.clearTerminal + this.fullStaticOutput + output + '\n',
 			);
 			this.lastOutput = output;
+			this.lastOutputHeight = outputHeight;
+			this.log.sync(output);
 			return;
 		}
 
@@ -195,6 +200,7 @@ export default class Ink {
 		}
 
 		this.lastOutput = output;
+		this.lastOutputHeight = outputHeight;
 	};
 
 	render(node: ReactNode): void {

src/log-update.ts

@@ -5,6 +5,7 @@ import cliCursor from 'cli-cursor';
 export type LogUpdate = {
 	clear: () => void;
 	done: () => void;
+	sync: (str: string) => void;
 	(str: string): void;
 };
 
@@ -45,6 +46,12 @@ const create = (stream: Writable, {showCursor = false} = {}): LogUpdate => {
 		}
 	};
 
+	render.sync = (str: string) => {
+		const output = str + '\n';
+		previousOutput = output;
+		previousLineCount = output.split('\n').length;
+	};
+
 	return render;
 };
 

test/fixtures/erase-with-state-change.tsx

@@ -0,0 +1,32 @@
+import process from 'node:process';
+import React, {useEffect, useState} from 'react';
+import {Box, Text, render} from '../../src/index.js';
+
+function Erase() {
+	const [show, setShow] = useState(true);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setShow(false);
+		});
+
+		return () => {
+			clearTimeout(timer);
+		};
+	}, []);
+
+	return (
+		<Box flexDirection="column">
+			{show && (
+				<>
+					<Text>A</Text>
+					<Text>B</Text>
+					<Text>C</Text>
+				</>
+			)}
+		</Box>
+	);
+}
+
+process.stdout.rows = Number(process.argv[2]);
+render(<Erase />);

test/render.tsx

@@ -120,6 +120,29 @@ test.serial(
 	},
 );
 
+test.serial('erase screen where state changes', async t => {
+	const ps = term('erase-with-state-change', ['4']);
+	await ps.waitForExit();
+
+	const secondFrame = ps.output.split(ansiEscapes.eraseLines(3))[1];
+
+	for (const letter of ['A', 'B', 'C']) {
+		t.false(secondFrame?.includes(letter));
+	}
+});
+
+test.serial('erase screen where state changes in small viewport', async t => {
+	const ps = term('erase-with-state-change', ['3']);
+	await ps.waitForExit();
+
+	const frames = ps.output.split(ansiEscapes.clearTerminal);
+	const lastFrame = frames.at(-1);
+
+	for (const letter of ['A', 'B', 'C']) {
+		t.false(lastFrame?.includes(letter));
+	}
+});
+
 test.serial('clear output', async t => {
 	const ps = term('clear');
 	await ps.waitForExit();