Convert to TypeScript (#8)

.github/workflows/main.yml

@@ -1,22 +1,16 @@
 name: CI
-on:
- - push
- - pull_request
+on: [push, pull_request]
 jobs:
  test:
- name: Node.js ${{ matrix.node-version }}
  runs-on: ubuntu-latest
+
  strategy:
- fail-fast: false
  matrix:
- node-version:
- - 14
- - 12
- - 10
- - 8
+ node_version: [14, 16, 18]
+
  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,4 @@
 node_modules
 yarn.lock
 /dist.js
+build

package.json

@@ -11,17 +11,22 @@
  "url": "https://sindresorhus.com"
  },
  "main": "dist.js",
+ "type": "module",
+ "exports": {
+ "types": "./build/index.d.ts",
+ "default": "./build/index.js"
+ },
  "engines": {
- "node": ">=8"
+ "node": ">=14.16"
  },
  "scripts": {
- "build": "babel index.js --out-file=dist.js",
+ "build": "tsc",
  "prepublish": "npm run build",
  "pretest": "npm run build",
  "test": "xo && ava"
  },
  "files": [
- "dist.js"
+ "build"
  ],
  "keywords": [
  "ink-component",
@@ -47,15 +52,19 @@
  "@babel/cli": "^7.2.3",
  "@babel/core": "^7.3.3",
  "@babel/preset-react": "^7.0.0",
- "ava": "^1.3.1",
+ "@sindresorhus/tsconfig": "^3.0.1",
+ "@types/react": "^18.0.28",
+ "ava": "^5.1.1",
  "clear-module": "^3.1.0",
  "eslint-config-xo-react": "^0.19.0",
  "eslint-plugin-react": "^7.7.0",
  "eslint-plugin-react-hooks": "^1.4.0",
- "ink": "^2.0.3",
- "ink-testing-library": "^1.0.0",
- "react": "^16.8.2",
+ "ink": "^4",
+ "ink-testing-library": "^3",
+ "react": "^18",
  "strip-ansi": "^5.0.0",
+ "ts-node": "^10.9.1",
+ "typescript": "^5.0.2",
  "xo": "^0.24.0"
  },
  "peerDependencies": {
@@ -72,8 +81,19 @@
  "extends": [
  "xo-react"
  ],
+ "prettier": true,
  "rules": {
- "react/no-unused-prop-types": "off"
+ "unicorn/no-hex-escape": "off",
+ "unicorn/filename-case": "off"
  }
+ },
+ "ava": {
+ "extensions": {
+ "ts": "module",
+ "tsx": "module"
+ },
+ "nodeArguments": [
+ "--loader=ts-node/esm"
+ ]
  }
 }

src/cfonts.d.ts

@@ -0,0 +1 @@
+declare module "cfonts";

src/index.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Text } from "ink";
+import CFonts from "cfonts";
+
+type BigTextProps = { text: string } & Partial<CFontProps>;
+
+type CFontProps = {
+ font:
+ | "block"
+ | "slick"
+ | "tiny"
+ | "grid"
+ | "pallet"
+ | "shade"
+ | "simple"
+ | "simpleBlock"
+ | "3d"
+ | "simple3d"
+ | "chrome"
+ | "huge";
+ align: "left" | "center" | "right";
+ colors: string[];
+ backgroundColor:
+ | "transparent"
+ | "black"
+ | "red"
+ | "green"
+ | "yellow"
+ | "blue"
+ | "magenta"
+ | "cyan"
+ | "white";
+ letterSpacing: number;
+ lineHeight: number;
+ space: boolean;
+ maxLength: number;
+};
+
+const defaultCFontProps: CFontProps = {
+ font: "block",
+ align: "left",
+ colors: ["system"],
+ backgroundColor: "transparent",
+ letterSpacing: 1,
+ lineHeight: 1,
+ space: true,
+ maxLength: 0
+};
+
+export const BigText: React.FC<BigTextProps> = ({ text, ...props }) => {
+ const cFontProps = { ...defaultCFontProps, ...props };
+ return <Text>{CFonts.render(text, cFontProps).string}</Text>;
+};
+
+export default BigText;

test.js.md → test/snapshots/test.tsx.md

@@ -1,8 +1,8 @@
-# Snapshot report for `test.js`
+# Snapshot report for `test/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
 

test/test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import test from "ava";
+import { render } from "ink-testing-library";
+import clearModule from "clear-module";
+import stripAnsi from "strip-ansi";
+import { BigText } from "../src/index.js";
+
+test("render", t => {
+ // TODO: Find out why this doesn't work to prevent color
+ process.env.FORCE_COLOR = "0";
+ clearModule.all();
+ // const BigText = require('.');
+
+ const { lastFrame } = render(<BigText text="unicorns" />);
+ console.log(lastFrame());
+ t.snapshot(stripAnsi(lastFrame()));
+
+ delete process.env.FORCE_COLOR;
+});

tsconfig.json

@@ -0,0 +1,13 @@
+{
+ "extends": "@sindresorhus/tsconfig",
+ "compilerOptions": {
+ "outDir": "build",
+ "sourceMap": true,
+ "jsx": "react"
+ },
+ "include": ["src"],
+ "ts-node": {
+ "transpileOnly": true,
+ "files": true
+ }
+}