Move code over

Author: Shi Shu

src/ink.tsx

@@ -27,6 +27,7 @@ export type Options = {
 	debug: boolean;
 	exitOnCtrlC: boolean;
 	patchConsole: boolean;
+	onRender?: (renderTime: number) => void;
 	isScreenReaderEnabled?: boolean;
 	waitUntilExit?: () => Promise<void>;
 	maxFps?: number;
@@ -280,12 +281,17 @@ export default class Ink {
 			</AccessibilityContext.Provider>
 		);
 
+		const start = Date.now();
 		// @ts-expect-error the types for `react-reconciler` are not up to date with the library.
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-call
 		reconciler.updateContainerSync(tree, this.container, null, noop);
 		// @ts-expect-error the types for `react-reconciler` are not up to date with the library.
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-call
 		reconciler.flushSyncWork();
+		if (this.options.onRender) {
+			const end = Date.now();
+			this.options.onRender(end - start);
+		}
 	}
 
 	writeToStdout(data: string): void {

src/render.ts

@@ -42,6 +42,11 @@ export type RenderOptions = {
 	*/
 	patchConsole?: boolean;
 
+	/**
+	Function to call after each render.
+	*/
+	onRender?: (renderTime: number) => void;
+
 	/**
 	Enable screen reader support. See https://github.com/vadimdemedes/ink/blob/master/readme.md#screen-reader-support
 

test/render.tsx

@@ -4,7 +4,7 @@ import * as path from 'node:path';
 import {createRequire} from 'node:module';
 import FakeTimers from '@sinonjs/fake-timers';
 import test from 'ava';
-import React from 'react';
+import React, {useEffect} from 'react';
 import ansiEscapes from 'ansi-escapes';
 import stripAnsi from 'strip-ansi';
 import boxen from 'boxen';
@@ -273,3 +273,48 @@ test.serial('throttle renders to maxFps', t => {
 		clock.uninstall();
 	}
 });
+
+test.serial('outputs renderTime when onRender is passed', t => {
+	const clock = FakeTimers.install(); // Controls timers + Date.now()
+	let lastRenderTime = -1;
+	let tickTime = 100;
+
+	const onRender = (renderTime: number) => {
+		lastRenderTime = renderTime;
+	};
+
+	function Nested() {
+		clock.tick(tickTime);
+		return <Text>Nested</Text>;
+	}
+
+	function Test() {
+		useEffect(() => {
+			clock.tick(tickTime);
+		}, []);
+
+		return (
+			<Box borderStyle="round">
+				<Text>Test</Text>
+				<Nested />
+			</Box>
+		);
+	}
+
+	const {unmount, rerender} = render(<Test />, {
+		debug: true,
+		onRender,
+	});
+
+	t.is(lastRenderTime, 200);
+
+	tickTime = 200;
+	rerender(<Test />);
+
+	// Component props haven't changed for Nested so it doesn't trigger tick
+	t.is(lastRenderTime, 200);
+
+	unmount();
+
+	clock.uninstall();
+});