Fix broken linter

Fixes #606

XO started failing with some internal ESLint error for some reason,
so I updated XO along with its config and plugins to fix this. It
also required some minor code changes to fix new errors that popped up.

benchmark/static/static.tsx

@@ -10,7 +10,7 @@ function App() {
 	const itemCountRef = React.useRef(0);
 
 	React.useEffect(() => {
-		let timer;
+		let timer: NodeJS.Timeout | undefined;
 
 		const run = () => {
 			if (itemCountRef.current++ > 1000) {

examples/jest/jest.tsx

@@ -32,7 +32,7 @@ type State = {
 };
 
 class Jest extends React.Component<Record<string, unknown>, State> {
-	constructor(props) {
+	constructor(props: Record<string, unknown>) {
 		super(props);
 
 		this.state = {

examples/static/static.tsx

@@ -11,7 +11,7 @@ function Example() {
 
 	React.useEffect(() => {
 		let completedTests = 0;
-		let timer;
+		let timer: NodeJS.Timeout | undefined;
 
 		const run = () => {
 			if (completedTests++ < 10) {

package.json

@@ -102,7 +102,7 @@
 		"strip-ansi": "^6.0.0",
 		"ts-node": "10.9.1",
 		"typescript": "^4.9.4",
-		"xo": "^0.53.0"
+		"xo": "^0.55.0"
 	},
 	"peerDependencies": {
 		"@types/react": ">=18.0.0",
@@ -180,7 +180,9 @@
 					"@typescript-eslint/explicit-function-return": "off",
 					"@typescript-eslint/explicit-function-return-type": "off",
 					"dot-notation": "off",
-					"react/boolean-prop-naming": "off"
+					"react/boolean-prop-naming": "off",
+					"unicorn/prefer-dom-node-remove": "off",
+					"unicorn/prefer-event-target": "off"
 				}
 			},
 			{

src/components/App.tsx

@@ -247,8 +247,7 @@ export default class App extends PureComponent<Props, State> {
 
 	focusPrevious = (): void => {
 		this.setState(previousState => {
-			const lastFocusableId =
-				previousState.focusables[previousState.focusables.length - 1]?.id;
+			const lastFocusableId = previousState.focusables.at(-1)?.id;
 			const previousFocusableId = this.findPreviousFocusable(previousState);
 
 			return {

src/devtools.ts

@@ -1,3 +1,5 @@
+/* eslint-disable import/order */
+
 // eslint-disable-next-line import/no-unassigned-import
 import './devtools-window-polyfill.js';
 

src/global.d.ts

@@ -26,6 +26,8 @@ declare namespace Ink {
 		children?: ReactNode;
 		key?: Key;
 		style?: Styles;
+
+		// eslint-disable-next-line @typescript-eslint/naming-convention
 		internal_transform?: (children: string) => string;
 	};
 }

src/output.ts

@@ -114,7 +114,7 @@ export default class Output {
 				let {x, y} = operation;
 				let lines = text.split('\n');
 
-				const clip = clips[clips.length - 1];
+				const clip = clips.at(-1);
 
 				if (clip) {
 					const clipHorizontally =

src/reconciler.ts

@@ -26,7 +26,6 @@ import {type OutputTransformer} from './render-node-to-output.js';
 if (process.env['DEV'] === 'true') {
 	try {
 		await import('./devtools.js');
-		// eslint-disable-next-line @typescript-eslint/no-implicit-any-catch
 	} catch (error: any) {
 		if (error.code === 'MODULE_NOT_FOUND') {
 			console.warn(

src/render.ts

@@ -1,6 +1,6 @@
 import {Stream} from 'node:stream';
 import process from 'node:process';
-import {type ReactElement} from 'react';
+import type {ReactNode} from 'react';
 import Ink, {type Options as InkOptions} from './ink.js';
 import instances from './instances.js';
 
@@ -64,15 +64,13 @@ export type Instance = {
 	clear: () => void;
 };
 
-type RenderFunction = <Props, K extends NodeJS.WriteStream | RenderOptions>(
-	tree: ReactElement<Props>,
-	options?: K
-) => Instance;
-
 /**
  * Mount a component and render the output.
  */
-const render: RenderFunction = (node, options): Instance => {
+const render = (
+	node: ReactNode,
+	options?: NodeJS.WriteStream | RenderOptions
+): Instance => {
 	const inkOptions: InkOptions = {
 		stdout: process.stdout,
 		stdin: process.stdin,

test/components.tsx

@@ -1,5 +1,5 @@
 import EventEmitter from 'node:events';
-import React, {useState, Component, FC} from 'react';
+import React, {useState, Component} from 'react';
 import chalk from 'chalk';
 import {spy} from 'sinon';
 import test from 'ava';
@@ -465,6 +465,7 @@ test('disable raw mode when all input components are unmounted', t => {
 
 	const {rerender} = render(
 		<Test renderFirstInput renderSecondInput />,
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 		options as any
 	);
 
@@ -596,6 +597,7 @@ test('render different component based on whether stdin is a TTY or not', t => {
 
 	const {rerender} = render(
 		<Test renderFirstInput renderSecondInput />,
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 		options as any
 	);
 

test/errors.tsx

@@ -25,7 +25,7 @@ test('catch and display error', t => {
 	render(<Test />, {stdout});
 
 	t.deepEqual(
-		stripAnsi((stdout.write as any).lastCall.args[0])
+		stripAnsi((stdout.write as any).lastCall.args[0] as string)
 			.split('\n')
 			.slice(0, 14),
 		[

test/focus.tsx

@@ -7,7 +7,7 @@ import {render, Box, Text, useFocus, useFocusManager} from '../src/index.js';
 import createStdout from './helpers/create-stdout.js';
 
 const createStdin = () => {
-	const stdin = new EventEmitter() as NodeJS.WriteStream;
+	const stdin = new EventEmitter() as unknown as NodeJS.WriteStream;
 	stdin.isTTY = true;
 	stdin.setRawMode = spy();
 	stdin.setEncoding = () => {};

test/helpers/create-stdout.ts

@@ -7,7 +7,7 @@ type FakeStdout = {
 } & NodeJS.WriteStream;
 
 const createStdout = (columns?: number): FakeStdout => {
-	const stdout = new EventEmitter() as FakeStdout;
+	const stdout = new EventEmitter() as unknown as FakeStdout;
 	stdout.columns = columns ?? 100;
 
 	const write = spy();

test/measure-element.tsx

@@ -2,18 +2,28 @@ import React, {useState, useRef, useEffect} from 'react';
 import test from 'ava';
 import delay from 'delay';
 import stripAnsi from 'strip-ansi';
-import {Box, Text, render, measureElement} from '../src/index.js';
+import {
+	Box,
+	Text,
+	render,
+	measureElement,
+	type DOMElement
+} from '../src/index.js';
 import createStdout from './helpers/create-stdout.js';
 
 test('measure element', async t => {
 	const stdout = createStdout();
 
 	function Test() {
 		const [width, setWidth] = useState(0);
-		const ref = useRef(null);
+		const ref = useRef<DOMElement>(null);
 
 		useEffect(() => {
-			setWidth(measureElement(ref.current as any).width);
+			if (!ref.current) {
+				return;
+			}
+
+			setWidth(measureElement(ref.current).width);
 		}, []);
 
 		return (
@@ -34,10 +44,14 @@ test.serial('calculate layout while rendering is throttled', async t => {
 
 	function Test() {
 		const [width, setWidth] = useState(0);
-		const ref = useRef(null);
+		const ref = useRef<DOMElement>(null);
 
 		useEffect(() => {
-			setWidth(measureElement(ref.current as any).width);
+			if (!ref.current) {
+				return;
+			}
+
+			setWidth(measureElement(ref.current).width);
 		}, []);
 
 		return (
@@ -51,5 +65,8 @@ test.serial('calculate layout while rendering is throttled', async t => {
 	rerender(<Test />);
 	await delay(50);
 
-	t.is(stripAnsi((stdout.write as any).lastCall.firstArg).trim(), 'Width: 100');
+	t.is(
+		stripAnsi((stdout.write as any).lastCall.firstArg as string).trim(),
+		'Width: 100'
+	);
 });

test/render.tsx

@@ -161,7 +161,7 @@ test.serial('rerender on resize', async t => {
 	const {unmount} = render(<Test />, {stdout});
 
 	t.is(
-		stripAnsi((stdout.write as any).firstCall.args[0]),
+		stripAnsi((stdout.write as any).firstCall.args[0] as string),
 		boxen('Test'.padEnd(8), {borderStyle: 'round'}) + '\n'
 	);
 
@@ -172,7 +172,7 @@ test.serial('rerender on resize', async t => {
 	await delay(100);
 
 	t.is(
-		stripAnsi((stdout.write as any).lastCall.args[0]),
+		stripAnsi((stdout.write as any).lastCall.args[0] as string),
 		boxen('Test'.padEnd(6), {borderStyle: 'round'}) + '\n'
 	);