diff --git a/.eslintrc.json b/.eslintrc.json index 0d1bcba28..aed3c1ca5 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -90,6 +90,8 @@ "@typescript-eslint/ban-ts-comment": "off", "dot-notation": "off", "no-shadow": "off", - "@typescript-eslint/no-shadow": "error" + "@typescript-eslint/no-shadow": "error", + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn" } } diff --git a/.github/workflows/beta-release.yaml b/.github/workflows/beta-release.yaml index 33df04daa..ed1684907 100644 --- a/.github/workflows/beta-release.yaml +++ b/.github/workflows/beta-release.yaml @@ -15,7 +15,7 @@ jobs: ref: ${{ github.head_ref }} - uses: actions/setup-node@v4 with: - node-version: '16.x' + node-version: '18.x' registry-url: 'https://registry.npmjs.org' cache: 'yarn' diff --git a/beta-release.js b/beta-release.js index cefe53e5e..833fb7db2 100644 --- a/beta-release.js +++ b/beta-release.js @@ -1,13 +1,17 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -const util = require('util') -const exec = util.promisify(require('child_process').exec) -const package = require('./package.json') +import util from 'util' +import { exec as execCallback } from 'child_process' +import minimist from 'minimist' +import pkg from './package.json' assert { type: 'json' } -const args = require('minimist')(process.argv.slice(2)) +const exec = util.promisify(execCallback) + +const args = minimist(process.argv.slice(2)) + +console.log({ args }) const issueNumber = args['issue'] -console.log(issueNumber) +console.log({ issueNumber }) const runCommand = async (command) => { return new Promise((resolve) => { @@ -26,7 +30,7 @@ const AutoBetaRelease = async () => { // check if there is a beta release with the same issue number on published versions const arrayOfBetaReleases = JSON.parse(stdout).filter((version) => - version.includes(`${package.version}-beta.${issueNumber}`), + version.includes(`${pkg.version}-beta.${issueNumber}`), ) let fullLastBetaRelease = null @@ -56,9 +60,9 @@ const AutoBetaRelease = async () => { } // next beta release version. Output: 1.0.0-beta.1.rc.1 - const nextBetaReleaseVesionFull = `${package.version}-beta.${issueNumber}.rc.${nextBetaReleaseVersion}` + const nextBetaReleaseVesionFull = `${pkg.version}-beta.${issueNumber}.rc.${nextBetaReleaseVersion}` - // update the beta version on package.json + // update the beta version on packageJson.json const { error } = await runCommand( `npm version ${nextBetaReleaseVesionFull} --no-git-tag-version`, ) diff --git a/jest.config.ts b/jest.config.ts index 2d71696ed..b9c665d33 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -1,3 +1,4 @@ +/* eslint-disable max-len */ /* * For a detailed explanation regarding each configuration property and type check, visit: * https://jestjs.io/docs/configuration @@ -25,8 +26,6 @@ export default { // dev stuff '!src/*', '!src/**/*.d.ts', - // deprecated - '!src/components/TooltipProvider/*', ], // The directory where Jest should output its coverage files @@ -93,7 +92,10 @@ export default { // ], // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module - // moduleNameMapper: {}, + moduleNameMapper: { + '^(\\.{1,2}/.*)\\.js$': '$1', + }, + extensionsToTreatAsEsm: ['.ts'], // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader // modulePathIgnorePatterns: [], @@ -184,6 +186,7 @@ export default { 'ts-jest', { tsconfig: 'tsconfig.json', + useESM: true, }, ], '^.+\\.ts?$': [ diff --git a/package.json b/package.json index 9c70e4fb3..96f067fd2 100644 --- a/package.json +++ b/package.json @@ -1,23 +1,24 @@ { "name": "react-tooltip", - "version": "5.27.1", + "version": "6.0.0", "description": "react tooltip component", "scripts": { - "dev-rollup": "node ./prebuild.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch", - "build": "node ./prebuild.js --env=production && npm run types && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.prod.js", + "dev-rollup": "node ./prebuild.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.mjs --watch", + "build": "node ./prebuild.js --env=production && npm run types && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.prod.mjs", "dev": "node ./prebuild.js --env=development && node ./esbuild.config.dev.mjs", "build-esbuild": "node ./prebuild.js --env=production && node ./esbuild.config.prod.mjs", - "types": "node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.types.js", + "types": "node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.types.mjs", "eslint": "eslint --ext=js --ext=jsx --ext=ts --ext=tsx --fix ./src", "stylelint": "stylelint \"src/**/*.css\"", "prettier": "prettier --config ./.prettierrc.json --write \"src/**/*{.js,.jsx,.ts,.tsx,.css}\"", - "prepare": "husky install", + "prepare": "husky", "bundlesize": "bundlesize", "esbuild": "esbuild", "test": "jest", - "postbuild": "npm run types && npm run bundlesize", + "postbuild": "npm run types", "prepublishOnly": "npm run build" }, + "type": "module", "types": "dist/react-tooltip.d.ts", "license": "MIT", "private": false, @@ -48,65 +49,64 @@ }, "homepage": "https://github.com/ReactTooltip/react-tooltip#readme", "devDependencies": { - "@rollup/plugin-commonjs": "22.0.2", - "@rollup/plugin-node-resolve": "14.1.0", - "@rollup/plugin-replace": "4.0.0", - "@rollup/plugin-typescript": "8.5.0", - "@testing-library/jest-dom": "^5.16.5", + "@rollup/plugin-commonjs": "26.0.1", + "@rollup/plugin-node-resolve": "15.2.3", + "@rollup/plugin-replace": "5.0.7", + "@rollup/plugin-typescript": "11.1.6", + "@testing-library/jest-dom": "5.16.5", "@testing-library/react": "12.1.5", - "@testing-library/user-event": "^14.4.3", - "@types/css": "^0.0.33", - "@types/css-modules": "^1.0.2", - "@types/jest": "29.4.0", - "@types/node": "^18.15.3", - "@types/react": "^18.2.17", - "@types/react-dom": "18.0.11", - "@types/react-test-renderer": "^18.0.0", - "@typescript-eslint/eslint-plugin": "5.54.0", - "@typescript-eslint/parser": "5.54.0", - "bundlesize": "^0.18.1", - "css-loader": "6.7.3", - "esbuild": "0.17.11", - "esbuild-css-modules-plugin": "^2.7.1", - "eslint": "8.35.0", + "@testing-library/user-event": "14.5.2", + "@types/css": "0.0.37", + "@types/css-modules": "1.0.5", + "@types/jest": "29.5.12", + "@types/node": "18.15.3", + "@types/react": "18.3.1", + "@types/react-dom": "18.3.0", + "@types/react-test-renderer": "18.3.0", + "@typescript-eslint/eslint-plugin": "7.16.1", + "@typescript-eslint/parser": "7.16.1", + "bundlesize": "0.18.2", + "css-loader": "6.10.0", + "esbuild": "0.23.0", + "esbuild-css-modules-plugin": "2.7.1", + "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", - "eslint-config-prettier": "8.6.0", - "eslint-plugin-import": "2.27.5", - "eslint-plugin-jsx-a11y": "6.7.1", - "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-react": "7.32.2", - "eslint-plugin-react-hooks": "^4.2.0", - "husky": "8.0.3", - "jest": "29.4.3", - "jest-environment-jsdom": "29.4.3", + "eslint-config-prettier": "9.1.0", + "eslint-plugin-import": "2.29.1", + "eslint-plugin-jsx-a11y": "6.9.0", + "eslint-plugin-prettier": "5.2.1", + "eslint-plugin-react": "7.35.0", + "eslint-plugin-react-hooks": "4.6.2", + "husky": "9.1.6", + "jest": "29.7.0", + "jest-environment-jsdom": "29.7.0", "jest-transform-css": "6.0.1", - "lint-staged": "13.1.2", - "minimist": "^1.2.8", - "postcss": "8.4.21", - "prettier": "2.8.4", - "process": "^0.11.10", + "lint-staged": "15.2.7", + "minimist": "1.2.8", + "postcss": "8.4.39", + "prettier": "3.3.3", + "process": "0.11.10", "react": "16.14.0", "react-dom": "16.14.0", - "rimraf": "^3.0.2", - "rollup": "2.79.1", - "rollup-plugin-analyzer": "^4.0.0", - "rollup-plugin-browsersync": "^1.3.3", - "rollup-plugin-copy": "^3.4.0", - "rollup-plugin-dts": "5.2.0", - "rollup-plugin-filesize": "^9.1.1", - "rollup-plugin-html-scaffold": "^0.2.0", - "rollup-plugin-postcss": "^4.0.1", - "rollup-plugin-progress": "^1.1.2", - "rollup-plugin-string": "^3.0.0", - "rollup-plugin-terser": "^7.0.2", - "rollup-plugin-visualizer": "5.9.0", - "style-loader": "^3.3.0", - "stylelint": "^13.13.1", - "stylelint-config-prettier": "^8.0.2", - "stylelint-config-standard": "^22.0.0", - "ts-jest": "29.0.5", - "ts-node": "^10.9.1", - "typescript": "4.9.5" + "rimraf": "6.0.1", + "rollup": "4.35.0", + "rollup-plugin-analyzer": "4.0.0", + "rollup-plugin-browsersync": "1.3.3", + "rollup-plugin-copy": "3.5.0", + "rollup-plugin-dts": "6.1.1", + "rollup-plugin-html-scaffold": "0.2.0", + "rollup-plugin-postcss": "4.0.1", + "rollup-plugin-progress": "1.1.2", + "rollup-plugin-string": "3.0.0", + "rollup-plugin-terser": "7.0.2", + "rollup-plugin-visualizer": "5.12.0", + "style-loader": "3.3.4", + "stylelint": "16.7.0", + "stylelint-config-prettier": "9.0.5", + "stylelint-config-standard": "36.0.1", + "ts-jest": "29.2.5", + "ts-node": "10.9.2", + "typescript": "5.4.5" }, "peerDependencies": { "react": ">=16.14.0", @@ -125,7 +125,7 @@ ] }, "dependencies": { - "@floating-ui/dom": "^1.6.1", - "classnames": "^2.3.0" + "@floating-ui/dom": "1.6.13", + "clsx": "2.1.1" } } diff --git a/prebuild.js b/prebuild.js index c6804c59a..0558bf7b3 100755 --- a/prebuild.js +++ b/prebuild.js @@ -1,5 +1,5 @@ -const fs = require('fs') // eslint-disable-line @typescript-eslint/no-var-requires -const rimraf = require('rimraf') // eslint-disable-line @typescript-eslint/no-var-requires +import fs from 'fs' +import { rimraf } from 'rimraf' const args = process.argv.slice(2) const parameters = args.reduce((acc, arg) => { @@ -25,7 +25,7 @@ log(`Building for env: ${parameters.env}`) // check if directory exists if (fs.existsSync(dir)) { - rimraf(dir, () => { + rimraf(dir).then(() => { fs.mkdirSync(dir) }) } else { diff --git a/rollup.config.dev.js b/rollup.config.dev.mjs similarity index 97% rename from rollup.config.dev.js rename to rollup.config.dev.mjs index 2d9c0e6b9..b7237af8a 100644 --- a/rollup.config.dev.js +++ b/rollup.config.dev.mjs @@ -18,8 +18,7 @@ const name = 'ReactTooltip' const globals = { react: 'React', 'react-dom': 'ReactDOM', - classnames: 'classNames', - 'prop-types': 'PropTypes', + clsx: 'clsx', } const plugins = [ diff --git a/rollup.config.prod.js b/rollup.config.prod.mjs similarity index 81% rename from rollup.config.prod.js rename to rollup.config.prod.mjs index 7c29d6e83..82edbeaae 100644 --- a/rollup.config.prod.js +++ b/rollup.config.prod.mjs @@ -1,5 +1,4 @@ import commonjs from '@rollup/plugin-commonjs' -import filesize from 'rollup-plugin-filesize' import postcss from 'rollup-plugin-postcss' import progress from 'rollup-plugin-progress' import replace from '@rollup/plugin-replace' @@ -7,8 +6,16 @@ import { nodeResolve } from '@rollup/plugin-node-resolve' import ts from '@rollup/plugin-typescript' import { terser } from 'rollup-plugin-terser' import typescript from 'typescript' +import { readFileSync } from 'fs' +import { fileURLToPath } from 'url' +import { dirname, resolve } from 'path' import replaceBeforeSaveFile from './rollup-plugins/replace-before-save-file.js' -import * as pkg from './package.json' + +const filename = fileURLToPath(import.meta.url) +const dirName = dirname(filename) + +// Read package.json +const pkg = JSON.parse(readFileSync(resolve(dirName, './package.json'), 'utf8')) const input = ['src/index.tsx'] @@ -39,8 +46,7 @@ const buildFormats = [ '@floating-ui/dom': 'FloatingUIDOM', react: 'React', 'react-dom': 'ReactDOM', - classnames: 'classNames', - 'prop-types': 'PropTypes', + clsx: 'clsx', }, }, { @@ -58,7 +64,7 @@ const sharedPlugins = [ replace({ preventAssignment: true, values: { - 'process.env.NODE_ENV': JSON.stringify('development'), + 'process.env.NODE_ENV': JSON.stringify('production'), }, }), nodeResolve(), @@ -76,7 +82,7 @@ const minifiedBuildFormats = buildFormats.map(({ file, ...rest }) => ({ file: file.replace(/(\.[cm]?js)$/, '.min$1'), ...rest, minify: true, - plugins: [terser({ compress: { directives: false } }), filesize()], + plugins: [terser({ compress: { directives: false } })], })) const allBuildFormats = [...buildFormats, ...minifiedBuildFormats] @@ -115,6 +121,10 @@ const config = allBuildFormats.map( name, globals, sourcemap: true, + // Exclude the actual source content from the source map. + // This means that the source maps will contain references + // to positions in the original code, but not the source code itself. + sourcemapExcludeSources: true, banner, }, external, diff --git a/rollup.config.types.js b/rollup.config.types.mjs similarity index 100% rename from rollup.config.types.js rename to rollup.config.types.mjs diff --git a/src/App.tsx b/src/App.tsx index 18a48af99..3fc85daa4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -35,7 +35,7 @@ function App() { return () => { window.removeEventListener('keydown', handleQ) } - }) + }, []) return (
@@ -47,25 +47,30 @@ function App() { > My button - + @@ -182,7 +187,7 @@ function App() { console.log('After show')} // eslint-disable-next-line no-console @@ -192,9 +197,9 @@ function App() { console.log('After show with click')} // eslint-disable-next-line no-console @@ -206,7 +211,7 @@ function App() { console.log('After show with delay')} // eslint-disable-next-line no-console @@ -238,7 +243,7 @@ function App() { @@ -267,7 +272,7 @@ function App() {