Migrate Ink to ESM and update React (#546)

.github/workflows/test.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node_version: [10, 12, 14, 16]
+        node_version: [14, 16, 18]
 
     steps:
       - uses: actions/checkout@master

benchmark/simple/index.ts

@@ -0,0 +1 @@
+import './simple.js';

benchmark/simple/simple.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {render, Box, Text} from '../../src/index.js';
+
+function App() {
+	return (
+		<Box flexDirection="column" padding={1}>
+			<Text underline bold color="red">
+				{/* eslint-disable-next-line react/jsx-curly-brace-presence */}
+				{'Hello'} {'World'}
+			</Text>
+
+			<Box marginTop={1} width={60}>
+				<Text>
+					Cupcake ipsum dolor sit amet candy candy. Sesame snaps cookie I love
+					tootsie roll apple pie bonbon wafer. Caramels sesame snaps icing
+					cotton candy I love cookie sweet roll. I love bonbon sweet.
+				</Text>
+			</Box>
+
+			<Box marginTop={1} flexDirection="column">
+				<Text backgroundColor="white" color="black">
+					Colors:
+				</Text>
+
+				<Box flexDirection="column" paddingLeft={1}>
+					<Text>
+						- <Text color="red">Red</Text>
+					</Text>
+					<Text>
+						- <Text color="blue">Blue</Text>
+					</Text>
+					<Text>
+						- <Text color="green">Green</Text>
+					</Text>
+				</Box>
+			</Box>
+		</Box>
+	);
+}
+
+const {rerender} = render(<App />);
+
+for (let index = 0; index < 100_000; index++) {
+	rerender(<App />);
+}

benchmark/static/index.ts

@@ -0,0 +1 @@
+import './static.js';

benchmark/static/static.js → benchmark/static/static.tsx

@@ -1,10 +1,12 @@
-/* eslint-disable react/jsx-curly-brace-presence */
-'use strict';
-const React = require('react');
-const {render, Static, Box, Text} = require('../..');
+import React from 'react';
+import {render, Box, Text, Static} from '../../src/index.js';
 
-const App = () => {
-	const [items, setItems] = React.useState([]);
+function App() {
+	const [items, setItems] = React.useState<
+		Array<{
+			id: number;
+		}>
+	>([]);
 	const itemCountRef = React.useRef(0);
 
 	React.useEffect(() => {
@@ -45,6 +47,7 @@ const App = () => {
 
 			<Box flexDirection="column" padding={1}>
 				<Text underline bold color="red">
+					{/* eslint-disable-next-line react/jsx-curly-brace-presence */}
 					{'Hello'} {'World'}
 				</Text>
 
@@ -78,6 +81,6 @@ const App = () => {
 			</Box>
 		</Box>
 	);
-};
+}
 
 render(<App />);

examples/borders/borders.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {render, Box, Text} from '../../src/index.js';
+
+function Borders() {
+	return (
+		<Box flexDirection="column" padding={2}>
+			<Box>
+				<Box borderStyle="single" marginRight={2}>
+					<Text>single</Text>
+				</Box>
+
+				<Box borderStyle="double" marginRight={2}>
+					<Text>double</Text>
+				</Box>
+
+				<Box borderStyle="round" marginRight={2}>
+					<Text>round</Text>
+				</Box>
+
+				<Box borderStyle="bold">
+					<Text>bold</Text>
+				</Box>
+			</Box>
+
+			<Box marginTop={1}>
+				<Box borderStyle="singleDouble" marginRight={2}>
+					<Text>singleDouble</Text>
+				</Box>
+
+				<Box borderStyle="doubleSingle" marginRight={2}>
+					<Text>doubleSingle</Text>
+				</Box>
+
+				<Box borderStyle="classic">
+					<Text>classic</Text>
+				</Box>
+			</Box>
+		</Box>
+	);
+}
+
+render(<Borders />);

examples/borders/index.ts

@@ -0,0 +1 @@
+import './borders.js';

examples/counter/counter.js → examples/counter/counter.tsx

@@ -1,8 +1,7 @@
-'use strict';
-const React = require('react');
-const {render, Text} = require('../..');
+import React from 'react';
+import {render, Text} from '../../src/index.js';
 
-const Counter = () => {
+function Counter() {
 	const [counter, setCounter] = React.useState(0);
 
 	React.useEffect(() => {
@@ -16,6 +15,6 @@ const Counter = () => {
 	}, []);
 
 	return <Text color="green">{counter} tests passed</Text>;
-};
+}
 
 render(<Counter />);

examples/counter/index.ts

@@ -0,0 +1 @@
+import './counter.js';

examples/jest/index.ts

@@ -0,0 +1 @@
+import './jest.js';

examples/jest/jest.js → examples/jest/jest.tsx

@@ -1,13 +1,10 @@
-'use strict';
-const React = require('react');
-const {default: PQueue} = require('p-queue');
-const delay = require('delay');
-const ms = require('ms');
-const importJsx = require('import-jsx');
-const {Static, Box, render} = require('../..');
-
-const Summary = importJsx('./summary');
-const Test = importJsx('./test');
+import React from 'react';
+import PQueue from 'p-queue';
+import delay from 'delay';
+import ms from 'ms';
+import {Static, Box, render} from '../../src/index.js';
+import Summary from './summary.jsx';
+import Test from './test.js';
 
 const paths = [
 	'tests/login.js',
@@ -22,9 +19,21 @@ const paths = [
 	'tests/comments.js'
 ];
 
-class Jest extends React.Component {
-	constructor() {
-		super();
+type State = {
+	startTime: number;
+	completedTests: Array<{
+		path: string;
+		status: string;
+	}>;
+	runningTests: Array<{
+		path: string;
+		status: string;
+	}>;
+};
+
+class Jest extends React.Component<Record<string, unknown>, State> {
+	constructor(props) {
+		super(props);
 
 		this.state = {
 			startTime: Date.now(),
@@ -65,12 +74,12 @@ class Jest extends React.Component {
 	componentDidMount() {
 		const queue = new PQueue({concurrency: 4});
 
-		paths.forEach(path => {
-			queue.add(this.runTest.bind(this, path));
-		});
+		for (const path of paths) {
+			void queue.add(this.runTest.bind(this, path));
+		}
 	}
 
-	async runTest(path) {
+	async runTest(path: string) {
 		this.setState(previousState => ({
 			runningTests: [
 				...previousState.runningTests,