Fix rendering when terminal is erased on first render

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 Test() {
+	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(<Test />);

test/fixtures/erase-once.tsx

@@ -0,0 +1,25 @@
+import React, {useState} from 'react';
+import {Box, Text, render, useInput} from '../../src/index.js';
+
+function Test() {
+	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(<Test />);

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;
 
@@ -43,6 +47,7 @@ const term = (fixture: string, args: string[] = []) => {
 		{
 			name: 'xterm-color',
 			cols: 100,
+			rows,
 			cwd: __dirname,
 			env
 		}
@@ -106,6 +111,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(ansiEscapes.clearTerminal));
+	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.false(ps.output.includes(ansiEscapes.clearTerminal));
+	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(ansiEscapes.clearTerminal));
+		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.false(ps.output.includes(ansiEscapes.clearTerminal));
+		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 => {