refactor: change to typescript (#26)

Author: homerchen19

.babelrc

@@ -0,0 +1 @@
+_

.husky/.gitignore

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run pretty-quick

.husky/pre-commit

@@ -3,7 +3,7 @@ import { render, cleanup, fireEvent } from '@testing-library/react';
 
 import useUndo from '../index';
 
-const UndoComponent = React.memo(({ disabled }) => {
+const UndoComponent = ({ disabled }: { disabled: boolean }) => {
   const [
     countState,
     {
@@ -62,18 +62,18 @@ const UndoComponent = React.memo(({ disabled }) => {
       </button>
     </div>
   );
-});
+};
 
 const setup = (defaultDisabled = true) => {
   const { getByTestId } = render(<UndoComponent disabled={defaultDisabled} />);
 
   const count = getByTestId('count');
-  const unchangeButton = getByTestId('unchange');
-  const incrementButton = getByTestId('increment');
-  const decrementButton = getByTestId('decrement');
-  const undoButton = getByTestId('undo');
-  const redoButton = getByTestId('redo');
-  const resetButton = getByTestId('reset');
+  const unchangeButton = getByTestId('unchange') as HTMLButtonElement;
+  const incrementButton = getByTestId('increment') as HTMLButtonElement;
+  const decrementButton = getByTestId('decrement') as HTMLButtonElement;
+  const undoButton = getByTestId('undo') as HTMLButtonElement;
+  const redoButton = getByTestId('redo') as HTMLButtonElement;
+  const resetButton = getByTestId('reset') as HTMLButtonElement;
 
   return {
     count,
@@ -167,14 +167,7 @@ describe('use-undo', () => {
   });
 
   it('present count should not be changed when canUndo or canRedo is false', () => {
-    const {
-      count,
-      unchangeButton,
-      incrementButton,
-      decrementButton,
-      undoButton,
-      redoButton,
-    } = setup(false);
+    const { count, undoButton, redoButton } = setup(false);
 
     expect(count.textContent).toBe('count: 0');
     expect(undoButton.disabled).toBe(false);

__test__/index.spec.js renamed to __test__/index.spec.tsx

@@ -1,21 +1,43 @@
 import { useReducer, useCallback } from 'react';
 
-const UNDO = 'UNDO';
-const REDO = 'REDO';
-const SET = 'SET';
-const RESET = 'RESET';
+enum ActionType {
+  Undo = 'UNDO',
+  Redo = 'REDO',
+  Set = 'SET',
+  Reset = 'RESET',
+}
+
+export interface Actions<T> {
+  set: (newPresent: T) => void;
+  reset: (newPresent: T) => void;
+  undo: () => void;
+  redo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+}
+
+interface Action<T> {
+  type: ActionType;
+  newPresent?: T;
+}
+
+export interface State<T> {
+  past: T[];
+  present: T;
+  future: T[];
+}
 
 const initialState = {
   past: [],
   present: null,
   future: [],
 };
 
-const reducer = (state, action) => {
+const reducer = <T>(state: State<T>, action: Action<T>) => {
   const { past, present, future } = state;
 
   switch (action.type) {
-    case UNDO: {
+    case ActionType.Undo: {
       const previous = past[past.length - 1];
       const newPast = past.slice(0, past.length - 1);
 
@@ -26,7 +48,7 @@ const reducer = (state, action) => {
       };
     }
 
-    case REDO: {
+    case ActionType.Redo: {
       const next = future[0];
       const newFuture = future.slice(1);
 
@@ -37,7 +59,7 @@ const reducer = (state, action) => {
       };
     }
 
-    case SET: {
+    case ActionType.Set: {
       const { newPresent } = action;
 
       if (newPresent === present) {
@@ -50,7 +72,7 @@ const reducer = (state, action) => {
       };
     }
 
-    case RESET: {
+    case ActionType.Reset: {
       const { newPresent } = action;
 
       return {
@@ -62,30 +84,30 @@ const reducer = (state, action) => {
   }
 };
 
-const useUndo = initialPresent => {
+const useUndo = <T>(initialPresent: T): [State<T>, Actions<T>] => {
   const [state, dispatch] = useReducer(reducer, {
     ...initialState,
     present: initialPresent,
-  });
+  }) as [State<T>, React.Dispatch<Action<T>>];
 
   const canUndo = state.past.length !== 0;
   const canRedo = state.future.length !== 0;
   const undo = useCallback(() => {
     if (canUndo) {
-      dispatch({ type: UNDO });
+      dispatch({ type: ActionType.Undo });
     }
   }, [canUndo]);
   const redo = useCallback(() => {
     if (canRedo) {
-      dispatch({ type: REDO });
+      dispatch({ type: ActionType.Redo });
     }
   }, [canRedo]);
   const set = useCallback(
-    newPresent => dispatch({ type: SET, newPresent }),
+    (newPresent: T) => dispatch({ type: ActionType.Set, newPresent }),
     []
   );
   const reset = useCallback(
-    newPresent => dispatch({ type: RESET, newPresent }),
+    (newPresent: T) => dispatch({ type: ActionType.Reset, newPresent }),
     []
   );
 

index.d.ts

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+};

index.js renamed to index.ts

@@ -3,66 +3,53 @@
   "version": "1.0.3",
   "description": "undo/redo functionality with React Hooks",
   "license": "MIT",
-  "author": "xxhomey19",
-  "homepage": "https://github.com/xxhomey19/use-undo#readme",
+  "author": "homerchen19",
+  "homepage": "https://github.com/homerchen19/use-undo#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/xxhomey19/use-undo.git"
+    "url": "git+https://github.com/homerchen19/use-undo.git"
   },
   "bugs": {
-    "url": "https://github.com/xxhomey19/use-undo/issues"
+    "url": "https://github.com/homerchen19/use-undo/issues"
   },
+  "source": "index.ts",
   "main": "lib/use-undo.js",
   "umd:main": "lib/use-undo.umd.js",
   "module": "lib/use-undo.m.js",
+  "types": "lib/index.d.ts",
   "scripts": {
-    "build": "rimraf lib && microbundle -o lib/ --name use-undo --sourcemap false",
+    "build": "rimraf lib && microbundle -o lib/ --name use-undo --sourcemap false --no-compress",
     "prepublishOnly": "yarn build",
     "preversion": "yarn test:cov",
     "test": "jest",
     "test:cov": "jest --coverage --runInBand --forceExit",
     "test:watch": "jest --watch",
-    "pretty-quick": "pretty-quick"
+    "pre-commit": "pretty-quick --staged",
+    "pretty-quick": "pretty-quick",
+    "prepare": "husky install"
   },
   "files": [
-    "lib",
-    "index.d.ts"
+    "lib"
   ],
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
-    "@testing-library/react": "^9.1.3",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^24.9.0",
-    "husky": "^3.0.4",
-    "jest": "^24.9.0",
-    "microbundle": "^0.11.0",
-    "prettier": "^1.18.2",
-    "pretty-quick": "^1.11.1",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "regenerator-runtime": "^0.13.3",
-    "rimraf": "^3.0.0"
-  },
-  "jest": {
-    "collectCoverageFrom": [
-      "index.js"
-    ],
-    "testPathIgnorePatterns": [
-      "/node_modules/",
-      "<rootDir>/lib"
-    ],
-    "resetModules": true,
-    "resetMocks": true
+    "@testing-library/react": "^11.2.7",
+    "@types/jest": "^26.0.23",
+    "@types/node": "^15.6.1",
+    "@types/react": "^17.0.8",
+    "@types/react-dom": "^17.0.5",
+    "husky": "^6.0.0",
+    "jest": "^27.0.3",
+    "microbundle": "^0.13.1",
+    "prettier": "^2.3.0",
+    "pretty-quick": "^3.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^27.0.1",
+    "typescript": "^4.3.2"
   },
   "peerDependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
   }
 }

jest.config.js

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "allowJs": false,
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["dom", "esnext"],
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "outDir": "lib",
+    "jsx": "react",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "preserveConstEnums": true,
+    "sourceMap": false,
+    "strict": true
+  },
+  "exclude": ["node_modules", "lib"]
+}