Require Node.js 16 & Ink 4, move to ESM

.github/workflows/main.yml

@@ -10,12 +10,11 @@ jobs:
       fail-fast: false
       matrix:
         node-version:
-          - 14
-          - 12
-          - 10
+          - 18
+          - 16
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm install

.gitignore

@@ -1,3 +1,3 @@
 node_modules
 yarn.lock
-/dist.js
+/dist

package.json

@@ -10,18 +10,22 @@
 		"email": "[email protected]",
 		"url": "https://sindresorhus.com"
 	},
-	"main": "dist.js",
+	"type": "module",
+	"exports": {
+		"types": "./dist/index.d.ts",
+		"default": "./dist/index.js"
+	},
 	"engines": {
-		"node": ">=10"
+		"node": ">=16"
 	},
 	"scripts": {
-		"build": "babel index.js --out-file=dist.js",
-		"prepublish": "npm run build",
 		"pretest": "npm run build",
-		"test": "xo && ava"
+		"prepublish": "npm run build",
+		"test": "xo && ava",
+		"build": "tsc"
 	},
 	"files": [
-		"dist.js"
+		"dist"
 	],
 	"keywords": [
 		"ink-component",
@@ -42,43 +46,41 @@
 		"command-line"
 	],
 	"dependencies": {
-		"gradient-string": "^1.2.0",
-		"prop-types": "^15.7.2",
-		"strip-ansi": "^6.0.0"
-	},
-	"devDependencies": {
-		"@babel/cli": "^7.2.3",
-		"@babel/core": "^7.3.3",
-		"@babel/preset-react": "^7.0.0",
-		"ava": "^2.4.0",
-		"clear-module": "^4.1.1",
-		"eslint-config-xo-react": "^0.23.0",
-		"eslint-plugin-react": "^7.7.0",
-		"eslint-plugin-react-hooks": "^4.0.8",
-		"ink": "^3.0.3",
-		"ink-testing-library": "^2.0.1",
-		"react": "^16.8.2",
-		"xo": "^0.33.0"
+		"@types/gradient-string": "^1.1.2",
+		"gradient-string": "^2.0.2",
+		"prop-types": "^15.8.1",
+		"strip-ansi": "^7.1.0"
 	},
 	"peerDependencies": {
-		"ink": ">=3.0.0",
-		"react": ">=16.8.0"
+		"ink": ">=4"
 	},
-	"babel": {
-		"presets": [
-			"@ava/stage-4",
-			"@babel/preset-react"
-		]
+	"devDependencies": {
+		"@sindresorhus/tsconfig": "^3.0.1",
+		"@types/react": "^18.2.10",
+		"ava": "^5.3.0",
+		"eslint-config-xo-react": "^0.27.0",
+		"eslint-plugin-react": "^7.32.2",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"ink": "^4.2.0",
+		"ink-testing-library": "^3.0.0",
+		"react": "^18.2.0",
+		"ts-node": "^10.9.1",
+		"typescript": "^5.1.3",
+		"xo": "^0.54.2"
 	},
 	"ava": {
-		"color": true
+		"color": true,
+		"extensions": {
+			"ts": "module",
+			"tsx": "module"
+		},
+		"nodeArguments": [
+			"--loader=ts-node/esm"
+		]
 	},
 	"xo": {
 		"extends": [
 			"xo-react"
-		],
-		"rules": {
-			"react/require-default-props": "off"
-		}
+		]
 	}
 }

readme.md

@@ -4,12 +4,10 @@
 
 ![](screenshot.png)
 
-Looking for a version compatible with Ink 2.x? Check out [this release](https://github.com/sindresorhus/ink-gradient/tree/v1.0.0).
-
 ## Install
 
-```
-$ npm install ink-gradient
+```sh
+npm install ink-gradient
 ```
 
 ## Usage
@@ -31,24 +29,27 @@ render(
 
 ### `<Gradient>`
 
-It accepts a string or Ink component as `children`, for example, [`ink-box`](https://github.com/sindresorhus/ink-box).
+It accepts a string or Ink component as `children`. For example, [`<Box/>`](https://github.com/vadimdemedes/ink#box).
 
 #### Props
 
 ##### name
 
 Type: `string`
 
-Name of a [built-in gradient](https://github.com/bokub/gradient-string#available-built-in-gradients).
+The name of a [built-in gradient](https://github.com/bokub/gradient-string#available-built-in-gradients).
+
+Mutually exclusive with `colors`.
 
 ##### colors
 
 Type: `string[] | object[]`
 
 [Colors to use to make the gradient.](https://github.com/bokub/gradient-string#initialize-a-gradient)
 
+Mutually exclusive with `name`.
+
 ## Related
 
-- [ink-box](https://github.com/sindresorhus/ink-box) - Box component for Ink
 - [ink-big-text](https://github.com/sindresorhus/ink-big-text) - Awesome text component for Ink
 - [ink-link](https://github.com/sindresorhus/ink-link) - Link component for Ink

source/index.tsx

@@ -0,0 +1,105 @@
+import React, {type FC as ReactFC, type ReactNode} from 'react';
+import {Transform} from 'ink';
+import PropTypes, {type Validator} from 'prop-types';
+import gradientString, {type Gradient as GradientStringType} from 'gradient-string';
+import stripAnsi from 'strip-ansi';
+
+export type GradientName =
+	| 'cristal'
+	| 'teen'
+	| 'mind'
+	| 'morning'
+	| 'vice'
+	| 'passion'
+	| 'fruit'
+	| 'instagram'
+	| 'atlas'
+	| 'retro'
+	| 'summer'
+	| 'pastel'
+	| 'rainbow';
+
+export type GradientColors = Array<string | Record<string, unknown>>;
+
+export type Props = {
+	readonly children: ReactNode;
+
+	/**
+	The name of a [built-in gradient](https://github.com/bokub/gradient-string#available-built-in-gradients).
+
+	Mutually exclusive with `colors`.
+	*/
+	readonly name?: GradientName;
+
+	/**
+	[Colors to use to make the gradient.](https://github.com/bokub/gradient-string#initialize-a-gradient)
+
+	Mutually exclusive with `name`.
+	*/
+	readonly colors?: GradientColors;
+};
+
+/**
+@example
+```
+import React from 'react';
+import {render} from 'ink';
+import Gradient from 'ink-gradient';
+import BigText from 'ink-big-text';
+
+render(
+	<Gradient name="rainbow">
+		<BigText text="unicorns"/>
+	</Gradient>
+);
+```
+*/
+const Gradient: ReactFC<Props> = props => { // eslint-disable-line react/function-component-definition
+	if (props.name && props.colors) {
+		throw new Error('The `name` and `colors` props are mutually exclusive');
+	}
+
+	let gradient: GradientStringType;
+	if (props.name) {
+		gradient = gradientString[props.name];
+	} else if (props.colors) {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+		gradient = gradientString(props.colors as any); // TODO: Make stronger type.
+	} else {
+		throw new Error('Either `name` or `colors` prop must be provided');
+	}
+
+	const applyGradient = (text: string) => gradient.multiline(stripAnsi(text));
+
+	return <Transform transform={applyGradient}>{props.children}</Transform>;
+};
+
+Gradient.propTypes = {
+	children: PropTypes.oneOfType([
+		PropTypes.arrayOf(PropTypes.node),
+		PropTypes.node,
+	]).isRequired,
+	name: PropTypes.oneOf([
+		'cristal',
+		'teen',
+		'mind',
+		'morning',
+		'vice',
+		'passion',
+		'fruit',
+		'instagram',
+		'atlas',
+		'retro',
+		'summer',
+		'pastel',
+		'rainbow',
+	]),
+	colors: PropTypes.arrayOf(
+		PropTypes.oneOfType([
+			PropTypes.string,
+			PropTypes.object,
+		]),
+	) as Validator<GradientColors>,
+};
+
+export default Gradient;

test.js → test.tsx

@@ -1,14 +1,13 @@
+import process from 'node:process';
 import React from 'react';
-import {serial as test} from 'ava';
+import test from 'ava';
 import {Text} from 'ink';
 import {render} from 'ink-testing-library';
-import clearModule from 'clear-module';
 import stripAnsi from 'strip-ansi';
+import Gradient from './source/index.js';
 
 test('render', t => {
 	process.env.FORCE_COLOR = 1;
-	clearModule('.');
-	const Gradient = require('.');
 
 	const text = `
 		██╗   ██╗ ███╗   ██╗ ██╗  ██████╗  ██████╗  ██████╗  ███╗   ██╗ ███████╗
@@ -19,9 +18,9 @@ test('render', t => {
 	`.trim().split('\n').map(line => line.trimStart()).join('\n');
 
 	const {lastFrame} = render(
-		<Gradient name="rainbow">
+		<Gradient name='rainbow'>
 			<Text>{text}</Text>
-		</Gradient>
+		</Gradient>,
 	);
 
 	console.log(lastFrame());

test.js.md → test.tsx.md

@@ -1,8 +1,8 @@
-# Snapshot report for `test.js`
+# Snapshot report for `test.tsx`
 
-The actual snapshot is saved in `test.js.snap`.
+The actual snapshot is saved in `test.tsx.snap`.
 
-Generated by [AVA](https://ava.li).
+Generated by [AVA](https://avajs.dev).
 
 ## render
 

tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "@sindresorhus/tsconfig",
+	"compilerOptions": {
+		"outDir": "dist"
+	},
+	"include": [
+		"source"
+	],
+	"ts-node": {
+		"transpileOnly": true,
+		"files": true
+	}
+}