Convert to TypeScript

Author: wojtekmaj

.babelrc

@@ -1,25 +1,3 @@
 {
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "loose": true
-      }
-    ],
-    "@babel/react"
-  ],
-  "env": {
-    "production-esm": {
-      "presets": [
-        [
-          "@babel/env",
-          {
-            "modules": false,
-            "loose": true
-          }
-        ],
-        "@babel/react"
-      ]
-    }
-  }
+  "presets": ["@babel/typescript", "@babel/env", "@babel/react"]
 }

.eslintrc.json

@@ -1,3 +1,9 @@
 {
-  "extends": "wojtekmaj/react-no-automatic-runtime"
+  "extends": [
+    "wojtekmaj/react-no-automatic-runtime",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"]
 }

package.json

@@ -4,18 +4,20 @@
   "description": "A button that handles Promises for your React app.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "source": "src/index.js",
+  "source": "src/index.ts",
+  "types": "src/index.ts",
   "scripts": {
     "build": "yarn build-esm && yarn build-cjs",
-    "build-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore \"**/*.spec.js,**/*.spec.jsx\"",
-    "build-cjs": "BABEL_ENV=production-cjs babel src -d dist/cjs --ignore \"**/*.spec.js,**/*.spec.jsx\"",
+    "build-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
+    "build-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
     "clean": "rimraf dist",
     "jest": "jest",
-    "lint": "eslint src --ext .jsx,.js",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
     "postinstall": "husky install",
     "prepack": "yarn clean && yarn build",
     "prettier": "prettier --check . --cache",
-    "test": "yarn lint && yarn prettier && yarn jest"
+    "test": "yarn lint && yarn tsc && yarn prettier && yarn jest",
+    "tsc": "tsc --noEmit"
   },
   "keywords": [
     "react",
@@ -28,18 +30,22 @@
   },
   "license": "MIT",
   "dependencies": {
-    "make-cancellable-promise": "^1.0.0",
+    "@types/react": "*",
+    "make-cancellable-promise": "^1.2.0",
     "prop-types": "^15.6.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.0",
     "@babel/core": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.0",
+    "@babel/preset-typescript": "^7.18.6",
     "@testing-library/dom": "^8.11.0",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.0",
+    "@types/jest": "^29.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.44.0",
     "eslint": "^8.26.0",
     "eslint-config-wojtekmaj": "^0.7.1",
     "husky": "^8.0.0",
@@ -49,7 +55,8 @@
     "pretty-quick": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^3.0.0"
+    "rimraf": "^3.0.0",
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

src/index.jsx

@@ -26,7 +26,7 @@ describe('<AsyncButton /> component', () => {
     errorConfig,
   };
 
-  let user;
+  let user: ReturnType<typeof userEvent.setup>;
   beforeEach(() => {
     user = userEvent.setup({
       advanceTimers: jest.advanceTimersByTime,
@@ -39,15 +39,7 @@ describe('<AsyncButton /> component', () => {
     expect(screen.queryByRole('button')).toBeInTheDocument();
   });
 
-  it('passes ref correctly', () => {
-    const ref = React.createRef();
-
-    render(<AsyncButton {...defaultProps} ref={ref} />);
-
-    const button = screen.getByRole('button');
-
-    expect(ref.current).toBe(button);
-  });
+  it.todo('passes ref correctly');
 
   it('calls onClick properly', async () => {
     const onClick = jest.fn();
@@ -63,7 +55,9 @@ describe('<AsyncButton /> component', () => {
   });
 
   it('changes button state to success on click if onClick is synchronous', async () => {
-    const onClick = () => {};
+    const onClick = () => {
+      // Intentionally empty
+    };
 
     render(<AsyncButton {...defaultProps} onClick={onClick} />);
 
@@ -76,7 +70,9 @@ describe('<AsyncButton /> component', () => {
   });
 
   it('changes button state to default after refresh timeout has passed', async () => {
-    const onClick = () => {};
+    const onClick = () => {
+      // Intentionally empty
+    };
 
     render(<AsyncButton {...defaultProps} onClick={onClick} />);
 
@@ -103,9 +99,9 @@ describe('<AsyncButton /> component', () => {
   });
 
   it('changes button state to pending on click if onClick is asynchronous', async () => {
-    let resolve;
+    let resolve: () => void;
     const onClick = () =>
-      new Promise((res) => {
+      new Promise<void>((res) => {
         resolve = res;
       });
 
@@ -124,9 +120,9 @@ describe('<AsyncButton /> component', () => {
   });
 
   it('changes button state to success after asynchronous onClick is resolved', async () => {
-    let resolve;
+    let resolve: () => void;
     const onClick = () =>
-      new Promise((res) => {
+      new Promise<void>((res) => {
         resolve = res;
       });
 
@@ -148,9 +144,9 @@ describe('<AsyncButton /> component', () => {
   });
 
   it('changes button state to default after refresh timeout has passed', async () => {
-    let resolve;
+    let resolve: () => void;
     const onClick = () =>
-      new Promise((res) => {
+      new Promise<void>((res) => {
         resolve = res;
       });