Alternate screen buffer option.

Author: jacob314

examples/scroll/index.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import {render} from '../../src/index.js';
 import ScrollableContent from './scroll.js';
 
-render(React.createElement(ScrollableContent));
+render(React.createElement(ScrollableContent), {alternateBuffer: true});

examples/scroll/scroll.tsx

@@ -112,7 +112,8 @@ function ScrollableContent() {
 			getNewValue: (current: number) => number,
 		) => {
 			let frame = 0;
-			const frames = 10;
+			const frames = 3;
+			setter(s => getNewValue(s));
 			scrollIntervalReference.current = setInterval(() => {
 				if (frame < frames) {
 					setter(s => getNewValue(s));

src/ink.tsx

@@ -28,6 +28,7 @@ export type Options = {
 	exitOnCtrlC: boolean;
 	patchConsole: boolean;
 	isScreenReaderEnabled?: boolean;
+	alternateBuffer?: boolean;
 	waitUntilExit?: () => Promise<void>;
 	maxFps?: number;
 };
@@ -37,6 +38,7 @@ export default class Ink {
 	private readonly log: LogUpdate;
 	private readonly throttledLog: LogUpdate;
 	private readonly isScreenReaderEnabled: boolean;
+	private readonly alternateBuffer: boolean;
 
 	// Ignore last render after unmounting a tree to prevent empty output before exit
 	private isUnmounted: boolean;
@@ -62,6 +64,12 @@ export default class Ink {
 			options.isScreenReaderEnabled ??
 			process.env['INK_SCREEN_READER'] === 'true';
 
+		this.alternateBuffer = options.alternateBuffer ?? false;
+
+		if (this.alternateBuffer && !isInCi) {
+			this.options.stdout.write(ansiEscapes.enterAlternativeScreen);
+		}
+
 		const unthrottled = options.debug || this.isScreenReaderEnabled;
 		const maxFps = options.maxFps ?? 30;
 		const renderThrottleMs =
@@ -232,6 +240,20 @@ export default class Ink {
 			return;
 		}
 
+		if (this.alternateBuffer) {
+			if (hasStaticOutput) {
+				this.fullStaticOutput += staticOutput;
+			}
+
+			this.options.stdout.write(
+				ansiEscapes.clearTerminal + this.fullStaticOutput + output,
+			);
+
+			this.lastOutput = output;
+			this.lastOutputHeight = outputHeight;
+			return;
+		}
+
 		if (hasStaticOutput) {
 			this.fullStaticOutput += staticOutput;
 		}
@@ -355,6 +377,10 @@ export default class Ink {
 			this.log.done();
 		}
 
+		if (this.alternateBuffer && !isInCi) {
+			this.options.stdout.write(ansiEscapes.exitAlternativeScreen);
+		}
+
 		this.isUnmounted = true;
 
 		// @ts-expect-error the types for `react-reconciler` are not up to date with the library.

src/render.ts

@@ -49,6 +49,14 @@ export type RenderOptions = {
 	*/
 	isScreenReaderEnabled?: boolean;
 
+	/**
+	Enable alternate screen buffer.
+	This will cause Ink to render to a new screen buffer, and restore the old one on exit.
+
+	@default false
+	*/
+	alternateBuffer?: boolean;
+
 	/**
 	Maximum frames per second for render updates.
 	This controls how frequently the UI can update to prevent excessive re-rendering.