React 19 support (#719)

Author: msmps

package.json

@@ -56,7 +56,7 @@
 		"indent-string": "^5.0.0",
 		"is-in-ci": "^1.0.0",
 		"patch-console": "^2.0.0",
-		"react-reconciler": "^0.29.0",
+		"react-reconciler": "^0.32.0",
 		"scheduler": "^0.23.0",
 		"signal-exit": "^3.0.7",
 		"slice-ansi": "^7.1.0",
@@ -74,8 +74,8 @@
 		"@types/benchmark": "^2.1.2",
 		"@types/ms": "^0.7.31",
 		"@types/node": "^22.9.0",
-		"@types/react": "^18.3.12",
-		"@types/react-reconciler": "^0.28.2",
+		"@types/react": "^19.1.5",
+		"@types/react-reconciler": "^0.32.0",
 		"@types/scheduler": "^0.23.0",
 		"@types/signal-exit": "^3.0.0",
 		"@types/sinon": "^17.0.3",
@@ -92,7 +92,7 @@
 		"node-pty": "^1.0.0",
 		"p-queue": "^8.0.0",
 		"prettier": "^3.3.3",
-		"react": "^18.0.0",
+		"react": "^19.1.0",
 		"react-devtools-core": "^5.0.0",
 		"sinon": "^19.0.2",
 		"strip-ansi": "^7.1.0",
@@ -101,8 +101,8 @@
 		"xo": "^0.59.3"
 	},
 	"peerDependencies": {
-		"@types/react": ">=18.0.0",
-		"react": ">=18.0.0",
+		"@types/react": ">=19.0.0",
+		"react": ">=19.0.0",
 		"react-devtools-core": "^4.19.1"
 	},
 	"peerDependenciesMeta": {

src/components/Box.tsx

@@ -14,6 +14,10 @@ const Box = forwardRef<DOMElement, PropsWithChildren<Props>>(
 			<ink-box
 				ref={ref}
 				style={{
+					flexWrap: 'nowrap',
+					flexDirection: 'row',
+					flexGrow: 0,
+					flexShrink: 1,
 					...style,
 					overflowX: style.overflowX ?? style.overflow ?? 'visible',
 					overflowY: style.overflowY ?? style.overflow ?? 'visible',
@@ -27,11 +31,4 @@ const Box = forwardRef<DOMElement, PropsWithChildren<Props>>(
 
 Box.displayName = 'Box';
 
-Box.defaultProps = {
-	flexWrap: 'nowrap',
-	flexDirection: 'row',
-	flexGrow: 0,
-	flexShrink: 1,
-};
-
 export default Box;

src/devtools-window-polyfill.ts

@@ -5,6 +5,7 @@ import ws from 'ws';
 const customGlobal = global as any;
 
 // These things must exist before importing `react-devtools-core`
+// eslint-disable-next-line n/no-unsupported-features/node-builtins
 customGlobal.WebSocket ||= ws;
 
 customGlobal.window ||= global;

src/global.d.ts

@@ -3,7 +3,7 @@ import {type Except} from 'type-fest';
 import {type DOMElement} from './dom.js';
 import {type Styles} from './styles.js';
 
-declare global {
+declare module 'react' {
 	namespace JSX {
 		// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 		interface IntrinsicElements {

src/ink.tsx

@@ -6,6 +6,7 @@ import isInCi from 'is-in-ci';
 import autoBind from 'auto-bind';
 import signalExit from 'signal-exit';
 import patchConsole from 'patch-console';
+import {LegacyRoot} from 'react-reconciler/constants.js';
 import {type FiberRoot} from 'react-reconciler';
 import Yoga from 'yoga-layout';
 import reconciler from './reconciler.js';
@@ -79,13 +80,17 @@ export default class Ink {
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 		this.container = reconciler.createContainer(
 			this.rootNode,
-			// Legacy mode
-			0,
+			LegacyRoot,
 			null,
 			false,
 			null,
 			'id',
 			() => {},
+			() => {},
+			// @ts-expect-error the types for `react-reconciler` are not up to date with the library.
+			// See https://github.com/facebook/react/blob/c0464aedb16b1c970d717651bba8d1c66c578729/packages/react-reconciler/src/ReactFiberReconciler.js#L236-L259
+			() => {},
+			() => {},
 			null,
 		);
 
@@ -207,7 +212,12 @@ export default class Ink {
 			</App>
 		);
 
-		reconciler.updateContainer(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.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();
 	}
 
 	writeToStdout(data: string): void {
@@ -279,7 +289,12 @@ export default class Ink {
 
 		this.isUnmounted = true;
 
-		reconciler.updateContainer(null, 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.updateContainerSync(null, 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();
 		instances.delete(this.options.stdout);
 
 		if (error instanceof Error) {

src/reconciler.ts

@@ -1,7 +1,11 @@
 import process from 'node:process';
-import createReconciler from 'react-reconciler';
-import {DefaultEventPriority} from 'react-reconciler/constants.js';
+import createReconciler, {type ReactContext} from 'react-reconciler';
+import {
+	DefaultEventPriority,
+	NoEventPriority,
+} from 'react-reconciler/constants.js';
 import Yoga, {type Node as YogaNode} from 'yoga-layout';
+import {createContext} from 'react';
 import {
 	createTextNode,
 	appendChildNode,
@@ -90,10 +94,7 @@ type HostContext = {
 	isInsideText: boolean;
 };
 
-type UpdatePayload = {
-	props: Props | undefined;
-	style: Styles | undefined;
-};
+let currentUpdatePriority = NoEventPriority;
 
 export default createReconciler<
 	ElementNames,
@@ -104,8 +105,9 @@ export default createReconciler<
 	DOMElement,
 	unknown,
 	unknown,
+	unknown,
 	HostContext,
-	UpdatePayload,
+	unknown,
 	unknown,
 	unknown,
 	unknown
@@ -148,7 +150,7 @@ export default createReconciler<
 		return {isInsideText};
 	},
 	shouldSetTextContent: () => false,
-	createInstance(originalType, newProps, _root, hostContext) {
+	createInstance(originalType, newProps, rootNode, hostContext) {
 		if (hostContext.isInsideText && originalType === 'ink-box') {
 			throw new Error(`<Box> can’t be nested inside <Text> component`);
 		}
@@ -182,6 +184,11 @@ export default createReconciler<
 
 			if (key === 'internal_static') {
 				node.internal_static = true;
+				rootNode.isStaticDirty = true;
+
+				// Save reference to <Static> node to skip traversal of entire
+				// node tree to find it
+				rootNode.staticNode = node;
 				continue;
 			}
 
@@ -216,15 +223,7 @@ export default createReconciler<
 	appendInitialChild: appendChildNode,
 	appendChild: appendChildNode,
 	insertBefore: insertBeforeNode,
-	finalizeInitialChildren(node, _type, _props, rootNode) {
-		if (node.internal_static) {
-			rootNode.isStaticDirty = true;
-
-			// Save reference to <Static> node to skip traversal of entire
-			// node tree to find it
-			rootNode.staticNode = node;
-		}
-
+	finalizeInitialChildren() {
 		return false;
 	},
 	isPrimaryRenderer: true,
@@ -234,7 +233,6 @@ export default createReconciler<
 	scheduleTimeout: setTimeout,
 	cancelTimeout: clearTimeout,
 	noTimeout: -1,
-	getCurrentEventPriority: () => DefaultEventPriority,
 	beforeActiveInstanceBlur() {},
 	afterActiveInstanceBlur() {},
 	detachDeletedInstance() {},
@@ -247,11 +245,7 @@ export default createReconciler<
 		removeChildNode(node, removeNode);
 		cleanupYogaNode(removeNode.yogaNode);
 	},
-	prepareUpdate(node, _type, oldProps, newProps, rootNode) {
-		if (node.internal_static) {
-			rootNode.isStaticDirty = true;
-		}
-
+	commitUpdate(node, _type, oldProps, newProps, _root) {
 		const props = diff(oldProps, newProps);
 
 		const style = diff(
@@ -260,12 +254,9 @@ export default createReconciler<
 		);
 
 		if (!props && !style) {
-			return null;
+			return;
 		}
 
-		return {props, style};
-	},
-	commitUpdate(node, {props, style}) {
 		if (props) {
 			for (const [key, value] of Object.entries(props)) {
 				if (key === 'style') {
@@ -298,4 +289,44 @@ export default createReconciler<
 		removeChildNode(node, removeNode);
 		cleanupYogaNode(removeNode.yogaNode);
 	},
+	setCurrentUpdatePriority(newPriority: number) {
+		currentUpdatePriority = newPriority;
+	},
+	getCurrentUpdatePriority: () => currentUpdatePriority,
+	resolveUpdatePriority() {
+		if (currentUpdatePriority !== NoEventPriority) {
+			return currentUpdatePriority;
+		}
+
+		return DefaultEventPriority;
+	},
+	maySuspendCommit() {
+		return false;
+	},
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	NotPendingTransition: undefined,
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	HostTransitionContext: createContext(
+		null,
+	) as unknown as ReactContext<unknown>,
+	resetFormInstance() {},
+	requestPostPaintCallback() {},
+	shouldAttemptEagerTransition() {
+		return false;
+	},
+	trackSchedulerEvent() {},
+	resolveEventType() {
+		return null;
+	},
+	resolveEventTimeStamp() {
+		return -1.1;
+	},
+	preloadInstance() {
+		return true;
+	},
+	startSuspendingCommit() {},
+	suspendInstance() {},
+	waitForCommitToBeReady() {
+		return null;
+	},
 });

test/focus.tsx

@@ -283,6 +283,7 @@ test('switch focus to the last component if currently focused component is the f
 
 	await delay(100);
 	emitReadable(stdin, '\u001B[Z');
+	await delay(100);
 
 	t.is(
 		(stdout.write as any).lastCall.args[0],

test/helpers/render-to-string.ts

@@ -2,7 +2,7 @@ import {render} from '../../src/index.js';
 import createStdout from './create-stdout.js';
 
 export const renderToString: (
-	node: JSX.Element,
+	node: React.JSX.Element,
 	options?: {columns: number},
 ) => string = (node, options) => {
 	const stdout = createStdout(options?.columns ?? 100);

tsconfig.json

@@ -9,8 +9,7 @@
 		],
 		"sourceMap": true,
 		"jsx": "react",
-		"isolatedModules": true,
-		"lib": ["ES2023"]
+		"isolatedModules": true
 	},
 	"include": ["src"],
 	"ts-node": {