Upgrade for Ink 3 (#9)

.github/workflows/test.yml

@@ -0,0 +1,19 @@
+name: test
+on: [push]
+
+jobs:
+  test:
+    name: Node.js ${{ matrix.node_version }}
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node_version: [10, 12]
+
+    steps:
+      - uses: actions/checkout@master
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node_version }}
+      - run: npm install
+      - run: npm test

package.json

@@ -9,20 +9,17 @@
 		"email": "[email protected]",
 		"url": "github.com/vadimdemedes"
 	},
-	"main": "build/index.js",
-	"types": "index.d.ts",
+	"main": "build",
+	"types": "build/index.d.ts",
 	"engines": {
-		"node": ">=8"
+		"node": ">=10"
 	},
 	"scripts": {
-		"pretest": "npm run build",
-		"test": "tsc --noEmit --jsx react --module commonjs index.test-d.tsx && xo && ava",
-		"build": "babel src --out-dir=build",
-		"prepare": "npm run build"
+		"test": "tsc && xo && ava",
+		"prepare": "tsc"
 	},
 	"files": [
-		"build",
-		"index.d.ts"
+		"build"
 	],
 	"keywords": [
 		"ink",
@@ -35,54 +32,52 @@
 		"react"
 	],
 	"dependencies": {
-		"cli-spinners": "^1.0.0",
-		"prop-types": "^15.5.10"
+		"@types/react": "^16.9.38",
+		"cli-spinners": "^2.3.0"
 	},
 	"devDependencies": {
 		"@ava/babel": "^1.0.1",
-		"@babel/cli": "^7.2.3",
-		"@babel/core": "^7.3.3",
-		"@babel/plugin-proposal-class-properties": "^7.3.3",
-		"@babel/preset-react": "^7.0.0",
-		"@babel/register": "^7.10.3",
+		"@babel/preset-react": "^7.10.1",
+		"@sindresorhus/tsconfig": "^0.7.0",
+		"@vdemedes/prettier-config": "^1.0.0",
 		"ava": "^3.9.0",
-		"babel-eslint": "^10.1.0",
 		"delay": "^4.1.0",
 		"eslint-config-xo-react": "^0.23.0",
 		"eslint-plugin-react": "^7.20.0",
 		"eslint-plugin-react-hooks": "^4.0.4",
-		"ink": "^2.0.0",
-		"ink-testing-library": "^1.0.0",
+		"husky": "^4.2.5",
+		"ink": "^3.0.0-4",
+		"ink-testing-library": "^2.0.0",
+		"prettier": "^2.0.5",
+		"pretty-quick": "^2.0.1",
 		"react": "^16.8.2",
 		"typescript": "^3.9.5",
 		"xo": "^0.32.0"
 	},
 	"peerDependencies": {
 		"react": "^16.8.2",
-		"ink": "^2.0.0"
-	},
-	"babel": {
-		"plugins": [
-			"@babel/plugin-proposal-class-properties"
-		],
-		"presets": [
-			"@babel/preset-react"
-		]
+		"ink": "^3.0.0-4"
 	},
 	"ava": {
-		"babel": true,
-		"require": [
-			"@babel/register"
-		]
+		"babel": {
+			"testOptions": {
+				"presets": [
+					"@babel/preset-react"
+				]
+			}
+		}
 	},
 	"xo": {
-		"parser": "babel-eslint",
-		"extends": [
-			"xo-react"
-		],
-		"ignores": [
-			"index.d.ts",
-			"index.test-d.tsx"
-		]
+		"extends": "xo-react",
+		"prettier": true,
+		"rules": {
+			"react/prop-types": "off"
+		}
+	},
+	"prettier": "@vdemedes/prettier-config",
+	"husky": {
+		"hooks": {
+			"pre-commit": "pretty-quick --staged"
+		}
 	}
 }

readme.md

@@ -1,33 +1,34 @@
-# ink-spinner [![Build Status](https://travis-ci.org/vadimdemedes/ink-spinner.svg?branch=master)](https://travis-ci.org/vadimdemedes/ink-spinner)
+# ink-spinner ![test](https://github.com/vadimdemedes/ink-spinner/workflows/test/badge.svg)
 
 > Spinner component for [Ink](https://github.com/vadimdemedes/ink). Uses [cli-spinners](https://github.com/sindresorhus/cli-spinners) for the collection of spinners.
 
+Looking for a version compatible with Ink 2.x? Check out [previous release](https://github.com/vadimdemedes/ink-spinner/tree/v3.1.0).
 
 ## Install
 
 ```
 $ npm install ink-spinner
 ```
 
-
 ## Usage
 
-```js
-import React, {Fragment} from 'react';
-import {render, Color} from 'ink';
+```jsx
+import React from 'react';
+import { render, Text } from 'ink';
 import Spinner from 'ink-spinner';
 
 render(
-	<Fragment>
-		<Color green><Spinner type="dots"/></Color>
+	<Text>
+		<Text color="green">
+			<Spinner type="dots" />
+		</Text>
 		{' Loading'}
-	</Fragment>
+	</Text>
 );
 ```
 
 <img src="media/demo.gif" width="482">
 
-
 ## Props
 
 ### type
@@ -36,8 +37,3 @@ Type: `string`<br>
 Defaults: `dots`
 
 Type of a spinner. See [cli-spinners](https://github.com/sindresorhus/cli-spinners) for available spinners.
-
-
-## License
-
-MIT © [Vadim Demedes](https://github.com/vadimdemedes)

source/index.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import type { FC } from 'react';
+import { Text } from 'ink';
+import spinners from 'cli-spinners';
+import type { SpinnerName } from 'cli-spinners';
+
+interface Props {
+	/**
+	 * Type of a spinner.
+	 * See [cli-spinners](https://github.com/sindresorhus/cli-spinners) for available spinners.
+	 *
+	 * @default dots
+	 */
+	type?: SpinnerName;
+}
+
+/**
+ * Spinner.
+ */
+const Spinner: FC<Props> = ({ type = 'dots' }) => {
+	const [frame, setFrame] = useState(0);
+	const spinner = spinners[type];
+
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setFrame(previousFrame => {
+				const isLastFrame = previousFrame === spinner.frames.length - 1;
+				return isLastFrame ? 0 : previousFrame + 1;
+			});
+		}, spinner.interval);
+
+		return () => {
+			clearInterval(timer);
+		};
+	}, [spinner]);
+
+	return <Text>{spinner.frames[frame]}</Text>;
+};
+
+export default Spinner;

test.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import {render} from 'ink-testing-library';
+import { render } from 'ink-testing-library';
 import spinners from 'cli-spinners';
 import test from 'ava';
 import delay from 'delay';
 import Spinner from '.';
 
 test('render spinner', async t => {
 	const spinner = spinners.dots;
-	const {frames, unmount} = render(<Spinner/>);
+	const { frames, unmount } = render(<Spinner />);
 
 	await delay(spinner.frames.length * spinner.interval);
 	unmount();

tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"extends": "@sindresorhus/tsconfig",
+	"compilerOptions": {
+		"outDir": "build",
+		"target": "es2018",
+		"lib": ["es2018"]
+	}
+}