feat: modules update (#18)

- updated npm dependencies
- migrated to eslint 9

Author: denchiklut

.eslintignore

@@ -1 +1 @@
-v18.16.0
+v22.0.0

.node-version

@@ -0,0 +1,38 @@
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import prettier from 'eslint-plugin-prettier'
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import { fixupPluginRules } from '@eslint/compat'
+import tsParser from '@typescript-eslint/parser'
+
+export default [
+	{
+		ignores: ['**/node_modules', '**/dist', '**/webpack']
+	},
+	{
+		files: ['*.ts', '*.tsx'],
+		plugins: {
+			prettier,
+			'@typescript-eslint': typescriptEslint,
+			react: fixupPluginRules(react)
+		},
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.jest
+			},
+			parser: tsParser,
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+			parserOptions: {
+				ecmaFeatures: {
+					jsx: true
+				}
+			}
+		},
+		settings: {
+			react: {
+				version: 'detect'
+			}
+		}
+	}]

eslint.config.mjs

@@ -18,116 +18,119 @@
 		"postinstall": "husky install",
 		"prettier": "prettier --write \"src/**/*.{ts,tsx,html,css,scss}\"",
 		"lint": "run-p lint:**",
-		"lint:script": "eslint --fix --cache --quiet --ext .ts,.tsx ./",
+		"lint:script": "eslint --fix --cache --quiet ./",
 		"lint:style": "stylelint --fix \"src/**/*.{css,scss}\"",
 		"analyze": "npx webpack-bundle-analyzer dist/client/analyze.json",
 		"setup": "sh setup.sh"
 	},
 	"dependencies": {
-		"@babel/runtime": "7.22.11",
-		"@loadable/component": "^5.15.3",
-		"@loadable/server": "5.16.1",
-		"classnames": "^2.3.2",
-		"core-js": "^3.32.1",
-		"dotenv": "^16.3.1",
+		"@babel/runtime": "7.24.7",
+		"@loadable/component": "^5.16.4",
+		"@loadable/server": "5.16.5",
+		"classnames": "^2.5.1",
+		"core-js": "^3.37.1",
+		"dotenv": "^16.4.5",
 		"morgan": "^1.10.0",
-		"postcss": "^8.4.28",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-helmet-async": "^2.0.4",
-		"react-router": "^6.15.0",
-		"react-router-dom": "^6.15.0",
-		"reflect-metadata": "^0.1.13",
-		"uuid": "^9.0.1",
-		"winston": "^3.10.0",
-		"workbox-window": "^7.0.0",
-		"yup": "^1.3.3"
+		"postcss": "^8.4.39",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-helmet-async": "^2.0.5",
+		"react-router": "^6.24.1",
+		"react-router-dom": "^6.24.1",
+		"reflect-metadata": "^0.2.2",
+		"uuid": "^10.0.0",
+		"winston": "^3.13.0",
+		"workbox-window": "^7.1.0",
+		"yup": "^1.4.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "7.22.10",
-		"@babel/core": "7.22.11",
-		"@babel/plugin-proposal-decorators": "^7.22.10",
-		"@babel/plugin-transform-runtime": "^7.22.10",
-		"@babel/preset-env": "7.22.10",
-		"@babel/preset-react": "^7.22.5",
-		"@babel/preset-typescript": "^7.22.11",
-		"@babel/register": "7.22.5",
+		"@babel/cli": "7.24.7",
+		"@babel/core": "7.24.7",
+		"@babel/plugin-proposal-decorators": "^7.24.7",
+		"@babel/plugin-transform-runtime": "^7.24.7",
+		"@babel/preset-env": "7.24.7",
+		"@babel/preset-react": "^7.24.7",
+		"@babel/preset-typescript": "^7.24.7",
+		"@babel/register": "7.24.6",
+		"@eslint/compat": "^1.1.0",
 		"@loadable/babel-plugin": "5.16.1",
 		"@loadable/webpack-plugin": "^5.15.2",
-		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
 		"@svgr/webpack": "^8.1.0",
-		"@testing-library/dom": "^9.3.1",
-		"@testing-library/jest-dom": "^6.1.2",
-		"@testing-library/react": "^14.0.0",
-		"@testing-library/user-event": "^14.4.3",
+		"@testing-library/dom": "^10.3.1",
+		"@testing-library/jest-dom": "^6.4.6",
+		"@testing-library/react": "^16.0.0",
+		"@testing-library/user-event": "^14.5.2",
 		"@types/classnames": "^2.3.0",
-		"@types/express": "^4.17.17",
-		"@types/jest": "^29.5.4",
-		"@types/loadable__component": "^5.13.4",
-		"@types/loadable__server": "^5.12.6",
-		"@types/loadable__webpack-plugin": "^5.7.3",
+		"@types/express": "^4.17.21",
+		"@types/jest": "^29.5.12",
+		"@types/loadable__component": "^5.13.9",
+		"@types/loadable__server": "^5.12.11",
+		"@types/loadable__webpack-plugin": "^5.7.6",
 		"@types/mini-css-extract-plugin": "^2.5.0",
-		"@types/morgan": "^1.9.5",
-		"@types/node": "^20.5.6",
-		"@types/react-dom": "^18.2.7",
+		"@types/morgan": "^1.9.9",
+		"@types/node": "^20.14.10",
+		"@types/react-dom": "^18.3.0",
 		"@types/react-router-dom": "^5.3.3",
-		"@types/require-from-string": "^1.2.1",
-		"@types/serve-favicon": "^2.5.4",
-		"@types/uuid": "^9.0.8",
-		"@types/webpack-env": "^1.18.1",
-		"@types/webpack-node-externals": "^3.0.0",
+		"@types/require-from-string": "^1.2.3",
+		"@types/serve-favicon": "^2.5.7",
+		"@types/uuid": "^10.0.0",
+		"@types/webpack-env": "^1.18.5",
+		"@types/webpack-node-externals": "^3.0.4",
 		"@types/webpack-stats-plugin": "^0.3.5",
-		"@typescript-eslint/eslint-plugin": "^6.4.1",
-		"@typescript-eslint/parser": "^6.4.1",
-		"autoprefixer": "^10.4.15",
+		"@typescript-eslint/eslint-plugin": "^7.15.0",
+		"@typescript-eslint/parser": "^7.15.0",
+		"autoprefixer": "^10.4.19",
 		"babel-loader": "^9.1.3",
-		"copy-webpack-plugin": "^11.0.0",
+		"copy-webpack-plugin": "^12.0.2",
 		"cross-env": "^7.0.3",
-		"css-loader": "6.8.1",
-		"cssnano": "^6.0.1",
-		"eslint": "^8.48.0",
-		"eslint-plugin-prettier": "^5.0.0",
-		"eslint-plugin-react": "^7.33.2",
-		"express": "^4.18.2",
-		"fork-ts-checker-webpack-plugin": "^8.0.0",
-		"html-loader": "^4.2.0",
-		"html-webpack-plugin": "^5.5.3",
-		"husky": "^8.0.3",
+		"css-loader": "7.1.2",
+		"cssnano": "^7.0.4",
+		"eslint": "^9.6.0",
+		"eslint-plugin-prettier": "^5.1.3",
+		"eslint-plugin-react": "^7.34.3",
+		"eslint-plugin-react-compiler": "^0.0.0-experimental-0998c1e-20240625",
+		"express": "^4.19.2",
+		"fork-ts-checker-webpack-plugin": "^9.0.2",
+		"globals": "^15.8.0",
+		"html-loader": "^5.0.0",
+		"html-webpack-plugin": "^5.6.0",
+		"husky": "^9.0.11",
 		"identity-obj-proxy": "^3.0.0",
-		"jest": "^29.6.4",
-		"jest-environment-jsdom": "^29.6.4",
-		"lint-staged": "^14.0.1",
-		"mini-css-extract-plugin": "^2.7.6",
-		"nodemon": "^3.0.1",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
+		"lint-staged": "^15.2.7",
+		"mini-css-extract-plugin": "^2.9.0",
+		"nodemon": "^3.1.4",
 		"npm-run-all": "^4.1.5",
-		"postcss-loader": "^7.3.3",
-		"postcss-scss": "^4.0.7",
-		"prettier": "^3.0.2",
-		"react-refresh": "^0.14.0",
+		"postcss-loader": "^8.1.1",
+		"postcss-scss": "^4.0.9",
+		"prettier": "^3.3.2",
+		"react-refresh": "^0.14.2",
 		"require-from-string": "^2.0.2",
-		"rimraf": "^5.0.1",
-		"sass": "^1.66.1",
-		"sass-loader": "^13.3.2",
+		"rimraf": "^5.0.8",
+		"sass": "^1.77.6",
+		"sass-loader": "^14.2.1",
 		"serve-favicon": "^2.5.0",
-		"stylelint": "^15.10.3",
+		"stylelint": "^16.6.1",
 		"stylelint-config-prettier": "^9.0.5",
-		"stylelint-config-standard-scss": "^10.0.0",
-		"stylelint-order": "^6.0.3",
-		"ts-jest": "^29.1.1",
-		"ts-node": "^10.9.1",
+		"stylelint-config-standard-scss": "^13.1.0",
+		"stylelint-order": "^6.0.4",
+		"ts-jest": "^29.1.5",
+		"ts-node": "^10.9.2",
 		"tsconfig-paths-webpack-plugin": "^4.1.0",
-		"typescript": "^5.2.2",
-		"webpack": "^5.88.2",
+		"typescript": "^5.5.3",
+		"webpack": "^5.92.1",
 		"webpack-cli": "^5.1.4",
-		"webpack-dev-middleware": "^6.1.1",
-		"webpack-dev-server": "^4.15.1",
-		"webpack-hot-middleware": "2.25.4",
+		"webpack-dev-middleware": "^7.2.1",
+		"webpack-dev-server": "^5.0.4",
+		"webpack-hot-middleware": "2.26.1",
 		"webpack-node-externals": "^3.0.0",
 		"webpack-stats-plugin": "^1.1.3",
-		"workbox-precaching": "^7.0.0",
-		"workbox-recipes": "^7.0.0",
-		"workbox-routing": "^7.0.0",
-		"workbox-strategies": "^7.0.0",
-		"workbox-webpack-plugin": "^7.0.0"
+		"workbox-precaching": "^7.1.0",
+		"workbox-recipes": "^7.1.0",
+		"workbox-routing": "^7.1.0",
+		"workbox-strategies": "^7.1.0",
+		"workbox-webpack-plugin": "^7.1.0"
 	}
 }

package.json

@@ -9,6 +9,7 @@ export const cssRule = {
 			...cssLoader,
 			options: {
 				modules: {
+					namedExport: false,
 					exportLocalsConvention: 'camelCaseOnly',
 					localIdentName: '[local]__[contenthash:base64:5]'
 				}