Fix rendering when terminal is erased on first render

package.json

@@ -149,7 +149,8 @@
 			"unicorn/import-index": "off",
 			"import/no-useless-path-segments": "off",
 			"react-hooks/exhaustive-deps": "off",
-			"complexity": "off"
+			"complexity": "off",
+			"react/prefer-read-only-props": "off"
 		},
 		"ignores": [
 			"src/parse-keypress.ts"

src/ink.tsx

@@ -175,8 +175,10 @@ export default class Ink {
 
 		if (outputHeight >= this.options.stdout.rows) {
 			this.options.stdout.write(
-				ansiEscapes.clearTerminal + this.fullStaticOutput + output
+				ansiEscapes.clearTerminal + this.fullStaticOutput
 			);
+
+			this.log(output, {force: true, erase: false});
 			this.lastOutput = output;
 			return;
 		}

src/log-update.ts

@@ -5,27 +5,33 @@ import cliCursor from 'cli-cursor';
 export type LogUpdate = {
 	clear: () => void;
 	done: () => void;
-	(str: string): void;
+	(str: string, options?: {force?: boolean; erase?: boolean}): void;
 };
 
 const create = (stream: Writable, {showCursor = false} = {}): LogUpdate => {
 	let previousLineCount = 0;
 	let previousOutput = '';
 	let hasHiddenCursor = false;
 
-	const render = (str: string) => {
+	const render = (
+		str: string,
+		{force = false, erase = true}: {force?: boolean; erase?: boolean} = {}
+	) => {
 		if (!showCursor && !hasHiddenCursor) {
 			cliCursor.hide();
 			hasHiddenCursor = true;
 		}
 
 		const output = str + '\n';
-		if (output === previousOutput) {
+		if (output === previousOutput && !force) {
 			return;
 		}
 
 		previousOutput = output;
-		stream.write(ansiEscapes.eraseLines(previousLineCount) + output);
+
+		const eraser = erase ? ansiEscapes.eraseLines(previousLineCount) : '';
+		stream.write(eraser + output);
+
 		previousLineCount = output.split('\n').length;
 	};
 

test/fixtures/erase-once-with-static.tsx

@@ -0,0 +1,31 @@
+import React, {useState} from 'react';
+import {Box, Static, Text, render, useInput} from '../../src/index.js';
+
+function EraseOnceWithStatic() {
+	const [fullHeight, setFullHeight] = useState(true);
+
+	useInput(
+		input => {
+			if (input === 'x') {
+				setFullHeight(false);
+			}
+		},
+		{isActive: fullHeight}
+	);
+
+	return (
+		<>
+			<Static items={['X', 'Y', 'Z']}>
+				{item => <Text key={item}>{item}</Text>}
+			</Static>
+
+			<Box flexDirection="column">
+				<Text>A</Text>
+				<Text>B</Text>
+				{fullHeight && <Text>C</Text>}
+			</Box>
+		</>
+	);
+}
+
+render(<EraseOnceWithStatic />);

test/fixtures/erase-once.tsx

@@ -0,0 +1,25 @@
+import React, {useState} from 'react';
+import {Box, Text, render, useInput} from '../../src/index.js';
+
+function EraseOnce() {
+	const [fullHeight, setFullHeight] = useState(true);
+
+	useInput(
+		input => {
+			if (input === 'x') {
+				setFullHeight(false);
+			}
+		},
+		{isActive: fullHeight}
+	);
+
+	return (
+		<Box flexDirection="column">
+			<Text>A</Text>
+			<Text>B</Text>
+			{fullHeight && <Text>C</Text>}
+		</Box>
+	);
+}
+
+render(<EraseOnce />);

test/fixtures/erase-with-static.tsx

@@ -1,4 +1,3 @@
-import process from 'node:process';
 import React from 'react';
 import {Static, Box, Text, render} from '../../src/index.js';
 
@@ -18,5 +17,4 @@ function EraseWithStatic() {
 	);
 }
 
-process.stdout.rows = Number(process.argv[3]);
 render(<EraseWithStatic />);

test/fixtures/erase.tsx

@@ -1,4 +1,3 @@
-import process from 'node:process';
 import React from 'react';
 import {Box, Text, render} from '../../src/index.js';
 
@@ -12,5 +11,4 @@ function Erase() {
 	);
 }
 
-process.stdout.rows = Number(process.argv[2]);
 render(<Erase />);

test/render.tsx

@@ -18,7 +18,11 @@ const {spawn} = require('node-pty') as typeof import('node-pty');
 
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
-const term = (fixture: string, args: string[] = []) => {
+const term = (
+	fixture: string,
+	args: string[] = [],
+	{rows}: {rows?: number} = {}
+) => {
 	let resolve: (value?: unknown) => void;
 	let reject: (error: Error) => void;
 
@@ -30,7 +34,9 @@ const term = (fixture: string, args: string[] = []) => {
 	const env = {
 		...process.env,
 		// eslint-disable-next-line @typescript-eslint/naming-convention
-		NODE_NO_WARNINGS: '1'
+		NODE_NO_WARNINGS: '1',
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		CI: 'false'
 	};
 
 	const ps = spawn(
@@ -43,6 +49,7 @@ const term = (fixture: string, args: string[] = []) => {
 		{
 			name: 'xterm-color',
 			cols: 100,
+			rows,
 			cwd: __dirname,
 			env
 		}
@@ -73,7 +80,7 @@ const term = (fixture: string, args: string[] = []) => {
 };
 
 test.serial('do not erase screen', async t => {
-	const ps = term('erase', ['4']);
+	const ps = term('erase', [], {rows: 4});
 	await ps.waitForExit();
 	t.false(ps.output.includes(ansiEscapes.clearTerminal));
 
@@ -85,7 +92,7 @@ test.serial('do not erase screen', async t => {
 test.serial(
 	'do not erase screen where <Static> is taller than viewport',
 	async t => {
-		const ps = term('erase-with-static', ['4']);
+		const ps = term('erase-with-static', [], {rows: 4});
 
 		await ps.waitForExit();
 		t.false(ps.output.includes(ansiEscapes.clearTerminal));
@@ -97,7 +104,7 @@ test.serial(
 );
 
 test.serial('erase screen', async t => {
-	const ps = term('erase', ['3']);
+	const ps = term('erase', [], {rows: 3});
 	await ps.waitForExit();
 	t.true(ps.output.includes(ansiEscapes.clearTerminal));
 
@@ -106,10 +113,54 @@ test.serial('erase screen', async t => {
 	}
 });
 
+test.serial('erase screen once then continue rendering as usual', async t => {
+	const ps = term('erase-once', [], {rows: 3});
+	await delay(1000);
+
+	t.true(ps.output.includes('A'));
+	t.true(ps.output.includes('B'));
+	t.true(ps.output.includes('C'));
+
+	ps.output = '';
+	ps.write('x');
+
+	await ps.waitForExit();
+
+	t.true(ps.output.includes(ansiEscapes.eraseLines(3)));
+	t.true(ps.output.includes('A'));
+	t.true(ps.output.includes('B'));
+	t.false(ps.output.includes('C'));
+});
+
+test.serial(
+	'erase screen once then continue rendering as usual with <Static> present',
+	async t => {
+		const ps = term('erase-once-with-static', [], {rows: 3});
+		await delay(1000);
+
+		t.true(ps.output.includes('X'));
+		t.true(ps.output.includes('Y'));
+		t.true(ps.output.includes('Z'));
+		t.true(ps.output.includes('A'));
+		t.true(ps.output.includes('B'));
+		t.true(ps.output.includes('C'));
+
+		ps.output = '';
+		ps.write('x');
+
+		await ps.waitForExit();
+
+		t.true(ps.output.includes(ansiEscapes.eraseLines(2)));
+		t.true(ps.output.includes('A'));
+		t.true(ps.output.includes('B'));
+		t.false(ps.output.includes('C'));
+	}
+);
+
 test.serial(
 	'erase screen where <Static> exists but interactive part is taller than viewport',
 	async t => {
-		const ps = term('erase', ['3']);
+		const ps = term('erase', [], {rows: 3});
 		await ps.waitForExit();
 		t.true(ps.output.includes(ansiEscapes.clearTerminal));