From d03b382f58f409be56a532389ba171be3ecceed4 Mon Sep 17 00:00:00 2001 From: Coltin Kifer Date: Mon, 9 Sep 2024 04:57:35 +0000 Subject: [PATCH] refactor: move utils and index file to ts, fix build and other config --- .gitignore | 2 ++ demo/webpack.config.js | 2 +- package.json | 8 +++++--- src/Animate.jsx | 5 +++-- src/{index.js => index.ts} | 0 src/{util.js => util.ts} | 21 +++++++++++++++------ test/util.spec.ts | 2 ++ webpack.config.js | 2 +- 8 files changed, 29 insertions(+), 13 deletions(-) rename src/{index.js => index.ts} (100%) rename src/{util.js => util.ts} (72%) diff --git a/.gitignore b/.gitignore index db18013..6c6e4e7 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,5 @@ es6 coverage npm-debug.log *.orig +build +types diff --git a/demo/webpack.config.js b/demo/webpack.config.js index 8a72270..3c6a8ed 100644 --- a/demo/webpack.config.js +++ b/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: { diff --git a/package.json b/package.json index 176b9a0..7c8b66a 100644 --- a/package.json +++ b/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", diff --git a/src/Animate.jsx b/src/Animate.jsx index 67e8ff1..746d5fe 100644 --- a/src/Animate.jsx +++ b/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; diff --git a/src/index.js b/src/index.ts similarity index 100% rename from src/index.js rename to src/index.ts diff --git a/src/util.js b/src/util.ts similarity index 72% rename from src/util.js rename to src/util.ts index f26452c..9a6d0ae 100644 --- a/src/util.js +++ b/src/util.ts @@ -6,7 +6,7 @@ * @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, nextObj: Record): string[] => [Object.keys(preObj), Object.keys(nextObj)].reduce((a, b) => a.filter(c => b.includes(c))); /** @@ -14,7 +14,7 @@ export const getIntersectionKeys = (preObj, nextObj) => * @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 @@ -22,7 +22,7 @@ export const getDashCase = name => name.replace(/([A-Z])/g, v => `-${v.toLowerCa * @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) => 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'); diff --git a/test/util.spec.ts b/test/util.spec.ts index 782f0f0..18f253d 100644 --- a/test/util.spec.ts +++ b/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( diff --git a/webpack.config.js b/webpack.config.js index 965c9d7..3362c3c 100644 --- a/webpack.config.js +++ b/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`,