V6 - [WIP]

.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"
   }
 }

.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'
 

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`,
   )

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?$': [

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 && npm run test",
     "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",
     "prepublishOnly": "npm run build"
   },
+  "type": "module",
   "types": "dist/react-tooltip.d.ts",
   "license": "MIT",
   "private": false,
@@ -48,65 +49,65 @@
   },
   "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",
+    "@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",
+    "@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.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",
+    "@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.35.0",
+    "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",
+    "lint-staged": "15.2.7",
     "minimist": "^1.2.8",
-    "postcss": "8.4.21",
-    "prettier": "2.8.4",
+    "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",
+    "rimraf": "6.0.1",
+    "rollup": "4.19.0",
     "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-copy": "3.5.0",
+    "rollup-plugin-dts": "6.1.1",
+    "rollup-plugin-filesize": "10.0.0",
     "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"
+    "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 +126,7 @@
     ]
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.1",
-    "classnames": "^2.3.0"
+    "@floating-ui/dom": "1.6.8",
+    "clsx": "2.1.1"
   }
 }

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 {

rollup.config.dev.js → 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 = [

rollup.config.prod.js → rollup.config.prod.mjs

@@ -8,7 +8,7 @@ import ts from '@rollup/plugin-typescript'
 import { terser } from 'rollup-plugin-terser'
 import typescript from 'typescript'
 import replaceBeforeSaveFile from './rollup-plugins/replace-before-save-file.js'
-import * as pkg from './package.json'
+import pkg from './package.json' assert { type: 'json' }
 
 const input = ['src/index.tsx']
 
@@ -39,8 +39,7 @@ const buildFormats = [
       '@floating-ui/dom': 'FloatingUIDOM',
       react: 'React',
       'react-dom': 'ReactDOM',
-      classnames: 'classNames',
-      'prop-types': 'PropTypes',
+      clsx: 'clsx',
     },
   },
   {
@@ -58,7 +57,7 @@ const sharedPlugins = [
   replace({
     preventAssignment: true,
     values: {
-      'process.env.NODE_ENV': JSON.stringify('development'),
+      'process.env.NODE_ENV': JSON.stringify('production'),
     },
   }),
   nodeResolve(),
@@ -115,6 +114,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,