Convert to TypeScript (#66)

Co-authored-by: Borys Palka <34033913+KsavinN@users.noreply.github.com>

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.spec.jsx renamed to src/index.spec.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -26,7 +26,7 @@ describe('<AsyncButton /> component', () => {
     errorConfig,
   };
 
-  let user;
+  let user: ReturnType<typeof userEvent.setup>;
   beforeEach(() => {
     user = userEvent.setup({
       advanceTimers: jest.advanceTimersByTime,
@@ -40,7 +40,7 @@ describe('<AsyncButton /> component', () => {
   });
 
   it('passes ref correctly', () => {
-    const ref = React.createRef();
+    const ref = createRef<HTMLButtonElement>();
 
     render(<AsyncButton {...defaultProps} ref={ref} />);
 
@@ -63,7 +63,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 +78,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 +107,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 +128,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 +152,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;
       });
 
@@ -184,4 +188,71 @@ describe('<AsyncButton /> component', () => {
     const button5 = screen.getByRole('button');
     expect(button5).toHaveTextContent('Click me');
   });
+
+  it('should allow button props to be passed by default', () => {
+    // @ts-expect-no-error
+    <AsyncButton {...defaultProps} type="submit" />;
+  });
+
+  it('should allow button props to be passed given as="button"', () => {
+    // @ts-expect-no-error
+    <AsyncButton {...defaultProps} as="button" disabled />;
+  });
+
+  it('should not allow link props to be passed given as="button"', () => {
+    // @ts-expect-error-next-line
+    <AsyncButton {...defaultProps} as="button" href="https://example.com" />;
+
+    // Sanity check
+    // @ts-expect-error-next-line
+    <button href="https://example.com"></button>;
+  });
+
+  it('should allow link props to be passed given as="a"', () => {
+    // @ts-expect-no-error
+    <AsyncButton {...defaultProps} as="a" href="https://example.com" />;
+  });
+
+  it('should not allow button props to be passed given as="a"', () => {
+    // @ts-expect-error-next-line
+    <AsyncButton {...defaultProps} as="a" disabled href="https://example.com" />;
+
+    // Sanity check
+    // @ts-expect-error-next-line
+    <a disabled href="https://example.com">
+      Click me
+    </a>;
+  });
+
+  it('should not allow button props to be passed given as={MyButton}', () => {
+    function MyButton() {
+      return <button type="submit"></button>;
+    }
+
+    // @ts-expect-error-next-line
+    <AsyncButton {...defaultProps} as={MyButton} type="submit" />;
+
+    // Sanity check
+    function MyCustomComponent({ as, ...otherProps }: { as: React.ElementType }) {
+      const Component = as || 'div';
+      return <Component {...otherProps} />;
+    }
+
+    // @ts-expect-error-next-line
+    <MyCustomComponent as={MyButton} type="submit" />;
+  });
+
+  it('should not allow invalid values for as', () => {
+    // @ts-expect-error-next-line
+    <AsyncButton {...defaultProps} as={5} type="submit" />;
+
+    // Sanity check
+    function MyCustomComponent({ as }: { as: React.ElementType }) {
+      const Component = as || 'div';
+      return <Component />;
+    }
+
+    // @ts-expect-error-next-line
+    <MyCustomComponent as={5} />;
+  });
 });

src/index.jsx renamed to src/index.tsx

@@ -2,29 +2,42 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import makeCancellable from 'make-cancellable-promise';
 
+type Config<T extends React.ElementType> = React.ComponentPropsWithoutRef<T>;
+
+type AsyncButtonProps<T extends React.ElementType> = {
+  as?: T;
+  errorConfig?: Config<T>;
+  onClick?: (event: React.MouseEvent) => void | Promise<void>;
+  pendingConfig?: Config<T>;
+  resetTimeout?: number;
+  successConfig?: Config<T>;
+} & Config<T>;
+
+type PolymorphicRef<T extends React.ElementType> = React.ComponentPropsWithRef<T>['ref'];
+
 const STATES = {
   ERROR: 'error',
   INIT: 'init',
   PENDING: 'pending',
   SUCCESS: 'success',
-};
+} as const;
 
 const AsyncButton = React.forwardRef(
-  (
+  <T extends React.ElementType = 'button'>(
     {
-      as = 'button',
+      as,
       errorConfig,
       onClick,
       pendingConfig,
       resetTimeout = 2000,
       successConfig,
       ...otherProps
-    },
-    ref,
+    }: AsyncButtonProps<T>,
+    ref?: PolymorphicRef<T>,
   ) => {
-    const [buttonState, setButtonState] = useState(STATES.INIT);
-    const cancellablePromise = useRef();
-    const timeout = useRef();
+    const [buttonState, setButtonState] = useState<typeof STATES[keyof typeof STATES]>(STATES.INIT);
+    const cancellablePromise = useRef<ReturnType<typeof makeCancellable>>();
+    const timeout = useRef<ReturnType<typeof setTimeout>>();
 
     useEffect(
       () => () => {
@@ -37,7 +50,11 @@ const AsyncButton = React.forwardRef(
     );
 
     const onClickInternal = useCallback(
-      (event) => {
+      (event: React.MouseEvent) => {
+        if (!onClick) {
+          return;
+        }
+
         clearTimeout(timeout.current);
 
         const onSuccess = () => {
@@ -76,9 +93,9 @@ const AsyncButton = React.forwardRef(
       [onClick, resetTimeout],
     );
 
-    const Component = as;
+    const Component = as || 'button';
 
-    const buttonConfig = (() => {
+    const buttonConfig: Config<typeof Component> | null | undefined = (() => {
       switch (buttonState) {
         case STATES.ERROR:
           return errorConfig;
@@ -120,4 +137,6 @@ AsyncButton.propTypes = {
   successConfig: isConfigObject,
 };
 
-export default AsyncButton;
+export default AsyncButton as <T extends React.ElementType = 'button'>(
+  props: AsyncButtonProps<T> & { ref?: PolymorphicRef<T> },
+) => React.ReactElement | null;

tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx"]
+}

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "esModuleInterop": true,
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "noUncheckedIndexedAccess": true,
+    "outDir": "dist",
+    "strict": true,
+    "strictNullChecks": true,
+    "target": "es5"
+  },
+  "include": ["src"]
+}