Migrate to Ink 2 (#2)

index.js

@@ -1,4 +1,5 @@
-import {h, renderToString} from 'ink';
+import React from 'react';
+import {Text} from 'ink';
 import PropTypes from 'prop-types';
 import gradientString from 'gradient-string';
 import stripAnsi from 'strip-ansi';
@@ -9,8 +10,9 @@ const Gradient = props => {
 	}
 
 	const gradient = props.name ? gradientString[props.name] : gradientString(props.colors);
-	const text = renderToString(<span>{props.children}</span>);
-	return <span>{gradient.multiline(stripAnsi(text))}</span>;
+	const applyGradient = text => gradient.multiline(stripAnsi(text));
+
+	return <Text unstable__transformChildren={applyGradient}>{props.children}</Text>;
 };
 
 Gradient.propTypes = {

package.json

@@ -45,45 +45,32 @@
 		"prop-types": "^15.6.1"
 	},
 	"devDependencies": {
+		"@babel/cli": "^7.2.3",
+		"@babel/core": "^7.3.3",
+		"@babel/preset-react": "^7.0.0",
 		"ava": "*",
-		"babel-cli": "^6.26.0",
-		"babel-plugin-transform-react-jsx": "^6.24.1",
-		"clear-module": "^2.1.0",
+		"clear-module": "^3.1.0",
 		"eslint-config-xo-react": "^0.16.0",
 		"eslint-plugin-react": "^7.7.0",
-		"ink": "^0.5.0",
+		"ink": "^2.0.0",
+		"ink-testing-library": "^1.0.0",
+		"react": "^16.8.2",
 		"strip-ansi": "^4.0.0",
 		"xo": "*"
 	},
 	"babel": {
 		"presets": [
-			"@ava/stage-4"
-		],
-		"plugins": [
-			[
-				"transform-react-jsx",
-				{
-					"pragma": "h",
-					"useBuiltIns": true
-				}
-			]
+			"@ava/stage-4",
+			"@babel/preset-react"
 		]
 	},
-	"ava": {
-		"babel": "inherit"
-	},
 	"xo": {
 		"extends": [
 			"xo-react"
 		],
 		"ignores": [
 			"dist.js"
 		],
-		"settings": {
-			"react": {
-				"pragma": "h"
-			}
-		},
 		"rules": {
 			"react/require-default-props": "off"
 		}

test.js

@@ -1,5 +1,6 @@
+import React from 'react';
 import {serial as test} from 'ava';
-import {h, renderToString} from 'ink';
+import {render} from 'ink-testing-library';
 import clearModule from 'clear-module';
 import stripAnsi from 'strip-ansi';
 
@@ -9,7 +10,7 @@ test('render', t => {
 	clearModule('.');
 	const Gradient = require('.');
 
-	const actual = renderToString(
+	const {lastFrame} = render(
 		<Gradient name="rainbow">
 			{`
 
@@ -22,8 +23,8 @@ test('render', t => {
 			`}
 		</Gradient>
 	);
-	console.log(actual);
-	t.snapshot(stripAnsi(actual));
+	console.log(lastFrame());
+	t.snapshot(stripAnsi(lastFrame()));
 
 	delete process.env.FORCE_COLOR;
 });