fix: support off-screen lines when re-rendering

This fixes a deep, difficult bug 👀

Let's try explain by example...

If you have an `autocomplete` which has 2 options:

- First option is multiple lines (let's say 6 lines)
- Second option is one line

In a terminal which is 10 rows tall, we are likely to exceed the
terminal height since `6 (row 1) + 1 (row 2) + 4 (message and UI) = 11`.

When this happens, the first render will be fine and the top row will be
off screen.

Now when we navigate (e.g. press `<down>`), the current rendering logic
will assume that the _entire_ frame is on screen. It'll diff the
previous frame and this frame, then update the changed rows.

Because it assumes the entire frame is on screen, it'll try move down to
row `N` (where `N` is the changed row). Here lies the problem: row `N`
will be off by `1` (because `1` row is off screen right now). That means
row `4` of the raw text is visually row `3` in your terminal.

This fix basically accounts for that offset, which fixes a whole bunch
of weird behaviours in smaller terminals, or just long prompts.

One notable thing we also account for in this fix: if the new frame fits
on screen, but the last frame didn't, we erase the entire frame and
render it all to regain screen space.

Author: 43081j

.changeset/little-ghosts-retire.md

@@ -0,0 +1,5 @@
+---
+"@clack/core": patch
+---
+
+Support short terminal windows when re-rendering by accounting for off-screen lines

packages/core/src/prompts/prompt.ts

@@ -5,7 +5,14 @@ import { wrapAnsi } from 'fast-wrap-ansi';
 import { cursor, erase } from 'sisteransi';
 import type { ClackEvents, ClackState } from '../types.js';
 import type { Action } from '../utils/index.js';
-import { CANCEL_SYMBOL, diffLines, isActionKey, setRawMode, settings } from '../utils/index.js';
+import {
+	CANCEL_SYMBOL,
+	diffLines,
+	getRows,
+	isActionKey,
+	setRawMode,
+	settings,
+} from '../utils/index.js';
 
 export interface PromptOptions<TValue, Self extends Prompt<TValue>> {
 	render(this: Omit<Self, 'prompt'>): string | undefined;
@@ -274,28 +281,44 @@ export default class Prompt<TValue> {
 			this.output.write(cursor.hide);
 		} else {
 			const diff = diffLines(this._prevFrame, frame);
+			const rows = getRows(this.output);
 			this.restoreCursor();
-			// If a single line has changed, only update that line
-			if (diff && diff?.length === 1) {
-				const diffLine = diff[0];
-				this.output.write(cursor.move(0, diffLine));
-				this.output.write(erase.lines(1));
-				const lines = frame.split('\n');
-				this.output.write(lines[diffLine]);
-				this._prevFrame = frame;
-				this.output.write(cursor.move(0, lines.length - diffLine - 1));
-				return;
-				// If many lines have changed, rerender everything past the first line
-			}
-			if (diff && diff?.length > 1) {
-				const diffLine = diff[0];
-				this.output.write(cursor.move(0, diffLine));
-				this.output.write(erase.down());
-				const lines = frame.split('\n');
-				const newLines = lines.slice(diffLine);
-				this.output.write(newLines.join('\n'));
-				this._prevFrame = frame;
-				return;
+			if (diff) {
+				const diffOffsetAfter = Math.max(0, diff.numLinesAfter - rows);
+				const diffOffsetBefore = Math.max(0, diff.numLinesBefore - rows);
+				let diffLine = diff.lines.find((line) => line >= diffOffsetAfter);
+
+				if (diffLine === undefined) {
+					this._prevFrame = frame;
+					return;
+				}
+
+				// If a single line has changed, only update that line
+				if (diff.lines.length === 1) {
+					this.output.write(cursor.move(0, diffLine - diffOffsetBefore));
+					this.output.write(erase.lines(1));
+					const lines = frame.split('\n');
+					this.output.write(lines[diffLine]);
+					this._prevFrame = frame;
+					this.output.write(cursor.move(0, lines.length - diffLine - 1));
+					return;
+					// If many lines have changed, rerender everything past the first line
+				} else if (diff.lines.length > 1) {
+					if (diffOffsetAfter < diffOffsetBefore) {
+						diffLine = diffOffsetAfter;
+					} else {
+						const adjustedDiffLine = diffLine - diffOffsetBefore;
+						if (adjustedDiffLine > 0) {
+							this.output.write(cursor.move(0, adjustedDiffLine));
+						}
+					}
+					this.output.write(erase.down());
+					const lines = frame.split('\n');
+					const newLines = lines.slice(diffLine);
+					this.output.write(newLines.join('\n'));
+					this._prevFrame = frame;
+					return;
+				}
 			}
 
 			this.output.write(erase.down());

packages/core/src/utils/string.ts

@@ -3,11 +3,17 @@ export function diffLines(a: string, b: string) {
 
 	const aLines = a.split('\n');
 	const bLines = b.split('\n');
+	const numLines = Math.max(aLines.length, bLines.length);
 	const diff: number[] = [];
 
-	for (let i = 0; i < Math.max(aLines.length, bLines.length); i++) {
+	for (let i = 0; i < numLines; i++) {
 		if (aLines[i] !== bLines[i]) diff.push(i);
 	}
 
-	return diff;
+	return {
+		lines: diff,
+		numLinesBefore: aLines.length,
+		numLinesAfter: bLines.length,
+		numLines,
+	};
 }

packages/prompts/test/__snapshots__/autocomplete.test.ts.snap

@@ -61,7 +61,6 @@ exports[`autocomplete > renders bottom ellipsis when items do not fit 1`] = `
 │  ↑/↓ to select • Enter: confirm • Type: to search
 └",
   "<cursor.backward count=999><cursor.up count=10>",
-  "<cursor.down count=1>",
   "<erase.down>",
   "◇  Select an option
 │  Line 0
@@ -136,9 +135,9 @@ exports[`autocomplete > renders top ellipsis when scrolled down and its do not f
 │  ↑/↓ to select • Enter: confirm • Type: to search
 └",
   "<cursor.backward count=999><cursor.up count=7>",
-  "<cursor.down count=1>",
   "<erase.down>",
-  "◇  Select an option
+  "│
+◇  Select an option
 │  Option 2",
   "
 ",