refactor: move utils and index file to ts, fix build and other config

.gitignore

@@ -7,3 +7,5 @@ es6
 coverage
 npm-debug.log
 *.orig
+build
+types

demo/webpack.config.js

@@ -15,7 +15,7 @@ module.exports = {
   },
   resolve: {
     alias: {
-      'react-smooth': path.join(__dirname, '../src/index.js'),
+      'react-smooth': path.join(__dirname, '../src/index.ts'),
     },
   },
   devServer: {

package.json

@@ -4,6 +4,7 @@
   "description": "react animation library",
   "main": "lib/index",
   "module": "es6/index",
+  "types": "types/index.d.ts",
   "files": [
     "*.md",
     "es6",
@@ -18,11 +19,12 @@
     "react-component"
   ],
   "scripts": {
-    "build": "npm run build-cjs && npm run build-es6 && rimraf umd && npm run build-umd && npm run build-min",
+    "build": "npm run build-types && npm run build-cjs && npm run build-es6 && rimraf umd && npm run build-umd && npm run build-min",
     "build-cjs": "rimraf lib && cross-env BABEL_ENV=commonjs babel ./src -d lib",
     "build-es6": "rimraf es6 && babel ./src -d es6",
-    "build-umd": "cross-env NODE_ENV=development BABEL_ENV=commonjs webpack --entry ./src/index.js -o umd",
-    "build-min": "cross-env NODE_ENV=production BABEL_ENV=commonjs webpack --entry ./src/index.js -o umd",
+    "build-umd": "cross-env NODE_ENV=development BABEL_ENV=commonjs webpack --entry ./src/index.ts -o umd",
+    "build-min": "cross-env NODE_ENV=production BABEL_ENV=commonjs webpack --entry ./src/index.ts -o umd",
+    "build-types": "rimraf types && tsc",
     "test": "vitest run --config vitest.config.mts",
     "test-coverage": "vitest run --config vitest.config.mts --coverage",
     "demo": "webpack serve --config demo/webpack.config.js --progress --profile",

src/Animate.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { PureComponent, cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import { deepEqual } from 'fast-equals';
@@ -7,8 +8,8 @@ import configUpdate from './configUpdate';
 import { getTransitionVal } from './util';
 
 class Animate extends PureComponent {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
 
     const { isActive, attributeName, from, to, steps, children, duration } = this.props;
 

src/util.js → src/util.ts

@@ -6,23 +6,23 @@
  * @param {object} nextObj next object
  * @returns an array of keys that exist in both objects
  */
-export const getIntersectionKeys = (preObj, nextObj) =>
+export const getIntersectionKeys = (preObj: Record<string, unknown>, nextObj: Record<string, unknown>): string[] =>
   [Object.keys(preObj), Object.keys(nextObj)].reduce((a, b) => a.filter(c => b.includes(c)));
 
 /**
  * converts a camel case string to dash case
  * @param {string} name string variable
  * @returns dash case string
  */
-export const getDashCase = name => name.replace(/([A-Z])/g, v => `-${v.toLowerCase()}`);
+export const getDashCase = (name: string) => name.replace(/([A-Z])/g, v => `-${v.toLowerCase()}`);
 
 /**
  * Maps an object to another object
  * @param {function} fn function to map
  * @param {object} obj object to map
  * @returns mapped object
  */
-export const mapObject = (fn, obj) =>
+export const mapObject = (fn: (key: string, value: unknown) => void, obj: Record<string, unknown>) =>
   Object.keys(obj).reduce(
     (res, key) => ({
       ...res,
@@ -34,16 +34,25 @@ export const mapObject = (fn, obj) =>
 /**
  * Gets the transition value for a set of properties
  * @param {array} props array of properties
- * @param {string} duration duration of transition
+ * @param {string | number} duration duration of transition
  * @param {string} easing easing of transition
  * @returns transition value
  */
-export const getTransitionVal = (props, duration, easing) =>
+export const getTransitionVal = (props: string[], duration: number | string, easing: string) =>
   props.map(prop => `${getDashCase(prop)} ${duration}ms ${easing}`).join(',');
 
 const isDev = () => process.env.NODE_ENV !== 'production';
 
-export const warn = (condition, format, a, b, c, d, e, f) => {
+export const warn = (
+  condition: boolean,
+  format: string,
+  a?: string,
+  b?: string,
+  c?: string,
+  d?: string,
+  e?: string,
+  f?: string,
+) => {
   if (isDev() && typeof console !== 'undefined' && console.warn) {
     if (format === undefined) {
       console.warn('LogUtils requires an error message argument');

test/util.spec.ts

@@ -112,6 +112,7 @@ describe('warn', () => {
   it('should log an error message when format is undefined', () => {
     // Set environment to development
     process.env.NODE_ENV = 'development';
+    // @ts-expect-error - testing undefined format
     warn(false);
     expect(console.warn).toHaveBeenCalledWith(
       `Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.`,
@@ -128,6 +129,7 @@ describe('warn', () => {
   it('should log the default error message when condition is false and format is undefined', () => {
     // Set environment to development
     process.env.NODE_ENV = 'development';
+    // @ts-expect-error - testing undefined format
     warn(false);
     expect(console.warn).toHaveBeenCalledWith(`LogUtils requires an error message argument`);
     expect(console.warn).toHaveBeenCalledWith(

webpack.config.js

@@ -5,7 +5,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const env = process.env.NODE_ENV;
 
 const config = {
-  entry: path.join(__dirname, './src/index.js'),
+  entry: path.join(__dirname, './src/index'),
 
   output: {
     filename: `ReactSmooth${env === 'production' ? '.min' : ''}.js`,