Clean up #795

Author: sindresorhus

readme.md

@@ -2037,10 +2037,10 @@ This functionality is powered by [patch-console](https://github.com/vadimdemedes
 
 ###### onRender
 
-Type: `(renderTime: number) => void`\
+Type: `({renderTime: number}) => void`\
 Default: `undefined`
 
-Runs the given callback after each render and re-render with a renderResult object.
+Runs the given callback after each render and re-render with a metrics object.
 
 ###### debug
 

src/ink.tsx

@@ -20,7 +20,13 @@ import {accessibilityContext as AccessibilityContext} from './components/Accessi
 
 const noop = () => {};
 
-export type RenderResult = {
+/**
+Performance metrics for a render operation.
+*/
+export type RenderMetrics = {
+	/**
+	Time spent rendering in milliseconds.
+	*/
 	renderTime: number;
 };
 
@@ -31,7 +37,7 @@ export type Options = {
 	debug: boolean;
 	exitOnCtrlC: boolean;
 	patchConsole: boolean;
-	onRender?: (renderTime: RenderResult) => void;
+	onRender?: (metrics: RenderMetrics) => void;
 	isScreenReaderEnabled?: boolean;
 	waitUntilExit?: () => Promise<void>;
 	maxFps?: number;
@@ -173,9 +179,8 @@ export default class Ink {
 			this.rootNode,
 			this.isScreenReaderEnabled,
 		);
-		if (this.options.onRender) {
-			this.options.onRender({renderTime: performance.now() - startTime});
-		}
+
+		this.options.onRender?.({renderTime: performance.now() - startTime});
 
 		// If <Static> output isn't empty, it means new children have been added to it
 		const hasStaticOutput = staticOutput && staticOutput !== '\n';
@@ -287,17 +292,12 @@ export default class Ink {
 			</AccessibilityContext.Provider>
 		);
 
-		const start = performance.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 = performance.now();
-			this.options.onRender({renderTime: end - start});
-		}
 	}
 
 	writeToStdout(data: string): void {

src/render.ts

@@ -1,7 +1,7 @@
 import {Stream} from 'node:stream';
 import process from 'node:process';
 import type {ReactNode} from 'react';
-import Ink, {type Options as InkOptions, type RenderResult} from './ink.js';
+import Ink, {type Options as InkOptions, type RenderMetrics} from './ink.js';
 import instances from './instances.js';
 
 export type RenderOptions = {
@@ -47,9 +47,9 @@ export type RenderOptions = {
 	patchConsole?: boolean;
 
 	/**
-	Runs the given callback after each render and re-render with a RenderResult object.
+	Runs the given callback after each render and re-render.
 	*/
-	onRender?: (renderTime: RenderResult) => void;
+	onRender?: (metrics: RenderMetrics) => void;
 
 	/**
 	Enable screen reader support. See https://github.com/vadimdemedes/ink/blob/master/readme.md#screen-reader-support

test/render.tsx

@@ -6,13 +6,13 @@ import {createRequire} from 'node:module';
 import FakeTimers from '@sinonjs/fake-timers';
 import {stub} from 'sinon';
 import test from 'ava';
-import React, {useEffect, useState} from 'react';
+import React, {type ReactNode, useEffect, useState} from 'react';
 import ansiEscapes from 'ansi-escapes';
 import stripAnsi from 'strip-ansi';
 import boxen from 'boxen';
 import delay from 'delay';
 import {render, Box, Text, useInput} from '../src/index.js';
-import {type RenderResult} from '../src/ink.js';
+import {type RenderMetrics} from '../src/ink.js';
 import createStdout from './helpers/create-stdout.js';
 
 const require = createRequire(import.meta.url);
@@ -300,28 +300,18 @@ test.serial('throttle renders to maxFps', t => {
 });
 
 test.serial('outputs renderTime when onRender is passed', async t => {
-	const clock = FakeTimers.install(); // Controls timers + Date.now()
-	let lastRenderTime = -1;
-	let tickTime = 100;
+	const renderTimes: number[] = [];
 	const funcObj = {
-		onRender(renderResult: RenderResult) {
-			const {renderTime} = renderResult;
-			lastRenderTime = renderTime;
+		onRender(metrics: RenderMetrics) {
+			const {renderTime} = metrics;
+			renderTimes.push(renderTime);
 		},
 	};
 
 	const onRenderStub = stub(funcObj, 'onRender').callThrough();
 
-	function Nested({text}) {
-		clock.tick(tickTime);
-		return <Text>{text}</Text>;
-	}
-
-	function Test() {
+	function Test({children}: {readonly children?: ReactNode}) {
 		const [text, setText] = useState('Test');
-		useEffect(() => {
-			clock.tick(tickTime);
-		});
 
 		useInput(input => {
 			setText(input);
@@ -330,7 +320,7 @@ test.serial('outputs renderTime when onRender is passed', async t => {
 		return (
 			<Box borderStyle="round">
 				<Text>{text}</Text>
-				<Nested text={text} />
+				{children}
 			</Box>
 		);
 	}
@@ -341,24 +331,32 @@ test.serial('outputs renderTime when onRender is passed', async t => {
 		stdin,
 	});
 
-	t.is(onRenderStub.callCount, 2);
+	// Initial render
+	t.is(onRenderStub.callCount, 1);
+	t.true(renderTimes[0] >= 0);
 
+	// Manual rerender
 	onRenderStub.resetHistory();
-	tickTime = 200;
-	rerender(<Test />);
-
-	t.is(onRenderStub.callCount, 2);
+	rerender(
+		<Test>
+			<Text>Updated</Text>
+		</Test>,
+	);
+	await delay(100);
+	t.is(onRenderStub.callCount, 1);
+	t.true(renderTimes[1] >= 0);
 
+	// Internal state update via useInput
 	onRenderStub.resetHistory();
 	emitReadable(stdin, 'a');
 	await delay(100);
-
-	t.is(lastRenderTime, 0);
 	t.is(onRenderStub.callCount, 1);
+	t.true(renderTimes[2] >= 0);
 
-	unmount();
+	// Verify all renders were tracked
+	t.is(renderTimes.length, 3);
 
-	clock.uninstall();
+	unmount();
 });
 
 test.serial('no throttled renders after unmount', t => {