Modernise tooling configuration

Author: tanem

eslint.config.mjs

@@ -1,49 +1,37 @@
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-import { fixupPluginRules } from '@eslint/compat'
-import { FlatCompat } from '@eslint/eslintrc'
 import js from '@eslint/js'
-import typescriptEslint from '@typescript-eslint/eslint-plugin'
-import tsParser from '@typescript-eslint/parser'
+import eslintConfigPrettier from 'eslint-config-prettier'
 import react from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
 import simpleImportSort from 'eslint-plugin-simple-import-sort'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
-const compat = new FlatCompat({
-  allConfig: js.configs.all,
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-})
 
-export default [
+export default tseslint.config(
   {
     ignores: ['**/compiled/', '**/coverage/', '**/dist/', '**/node_modules/'],
   },
-  ...compat.extends(
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-  ),
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  react.configs.flat.recommended,
+  eslintConfigPrettier,
   {
     languageOptions: {
-      ecmaVersion: 5,
-      parser: tsParser,
       parserOptions: {
         ecmaFeatures: {
           jsx: true,
         },
         project: path.join(__dirname, 'tsconfig.eslint.json'),
       },
-      sourceType: 'module',
     },
 
     plugins: {
-      '@typescript-eslint': typescriptEslint,
-      react,
-      'react-hooks': fixupPluginRules(reactHooks),
+      'react-hooks': reactHooks,
       'simple-import-sort': simpleImportSort,
     },
 
@@ -67,11 +55,24 @@ export default [
   },
   {
     files: ['**/*.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
     rules: {
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-require-imports': 'off',
     },
   },
+  {
+    files: ['examples/plain-js/**/*.js'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
   {
     files: ['examples/**/*'],
     rules: {
@@ -85,4 +86,4 @@ export default [
       'react/prop-types': 'off',
     },
   },
-]
+)

package-lock.json

@@ -4,8 +4,7 @@
   "description": "A React primitive for building slim progress bars.",
   "main": "dist/index.js",
   "module": "dist/react-nprogress.esm.js",
-  "jsnext:main": "dist/react-nprogress.esm.js",
-  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
   "files": [
     "dist"
@@ -71,13 +70,11 @@
     "hoist-non-react-statics": "^3.3.2"
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/plugin-transform-runtime": "7.29.0",
-    "@babel/preset-env": "7.29.0",
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-runtime": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "7.28.5",
     "@babel/preset-typescript": "7.28.5",
-    "@eslint/compat": "2.0.2",
-    "@eslint/eslintrc": "3.3.3",
     "@eslint/js": "9.39.2",
     "@rollup/plugin-babel": "6.1.0",
     "@rollup/plugin-commonjs": "29.0.0",
@@ -91,26 +88,24 @@
     "@types/node": "24.10.13",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@typescript-eslint/eslint-plugin": "8.55.0",
-    "@typescript-eslint/parser": "8.55.0",
     "eslint": "9.39.2",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.0.1",
     "eslint-plugin-simple-import-sort": "12.1.1",
+    "globals": "^17.3.0",
     "jest": "30.2.0",
     "jest-environment-jsdom": "30.2.0",
     "mock-raf": "1.0.1",
     "npm-run-all2": "8.0.4",
     "prettier": "3.8.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "react-test-renderer": "19.2.4",
-    "regenerator-runtime": "0.14.1",
     "rollup": "4.57.1",
     "shx": "0.4.0",
     "tanem-scripts": "8.0.2",
     "ts-jest": "29.4.6",
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.55.0"
   }
 }

package.json

@@ -47,7 +47,10 @@ const getBabelConfig = () => ({
   exclude: 'node_modules/**',
   inputSourceMap: true,
   plugins: ['@babel/transform-runtime'],
-  presets: [['@babel/env', { loose: true, modules: false }], '@babel/react'],
+  presets: [
+    ['@babel/env', { modules: false }],
+    ['@babel/react', { runtime: 'automatic' }],
+  ],
 })
 
 const getPlugins = (bundleType) => [
@@ -68,10 +71,7 @@ const getPlugins = (bundleType) => [
         keep_infinity: true,
         pure_getters: true,
       },
-      ecma: 5,
       output: { comments: false },
-      toplevel: false,
-      warnings: true,
     }),
 ]
 
@@ -113,6 +113,7 @@ const getUmdConfig = (bundleType) => ({
     globals: {
       react: 'React',
       'react-dom': 'ReactDOM',
+      'react/jsx-runtime': 'React',
     },
     name: 'NProgress',
     sourcemap: true,

rollup.config.mjs

@@ -1,16 +1,13 @@
-import * as React from 'react'
+import type { FC, ReactElement } from 'react'
 
-import { Options } from './types'
+import type { Options } from './types'
 import { useNProgress } from './useNProgress'
 
 type Props = Options & {
-  children: (renderProps: ReturnType<typeof useNProgress>) => React.ReactElement
+  children: (renderProps: ReturnType<typeof useNProgress>) => ReactElement
 }
 
-export const NProgress: React.FC<Props> = ({
-  children,
-  ...restProps
-}: Props) => {
+export const NProgress: FC<Props> = ({ children, ...restProps }: Props) => {
   const renderProps = useNProgress(restProps)
   return children(renderProps)
 }

src/NProgress.tsx

@@ -1 +0,0 @@
-declare module 'react-lifecycles-compat'