Merge pull request #106 from aleleba/PR-923441

PR-923441: Updating packages and migrating eslint rules.

.eslintignore

@@ -1,10 +0,0 @@
-#Build
-build
-#Webpack
-webpack.config.ts
-webpack.config.dev.ts
-webpack.config.dev.server.ts
-webpack.cy.config.ts
-#Service Worker
-service-worker.ts
-serviceWorkerRegistration.ts

.eslintrc.js

@@ -1,52 +0,0 @@
-module.exports = {
-	'env': {
-		'browser': true,
-		'node': true,
-		'es2021': true
-	},
-	'extends': [
-		'eslint:recommended',
-		'plugin:react/recommended',
-		'plugin:@typescript-eslint/recommended'
-	],
-	'parser': '@typescript-eslint/parser',
-	'parserOptions': {
-		'ecmaFeatures': {
-			'jsx': true
-		},
-		'ecmaVersion': 'latest',
-		'sourceType': 'module'
-	},
-	'plugins': [
-		'react',
-		'@typescript-eslint'
-	],
-	'rules': {
-		'indent': [
-			'error',
-			'tab'
-		],
-		'linebreak-style': [
-			'error',
-			'unix'
-		],
-		'quotes': [
-			'error',
-			'single'
-		],
-		'semi': [
-			'error',
-			'always'
-		],
-		'eol-last': [
-			'error',
-			'always'
-		],
-		'@typescript-eslint/no-var-requires': 0,
-	},
-	'settings': {
-		'react': {
-			'version': 'detect',
-		}
-	}
-};

cypress/support/component.ts

@@ -22,7 +22,7 @@ import './commands';
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/react18';
+import { mount } from '@cypress/react'
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.

eslint.config.ts

@@ -0,0 +1,55 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import reactPlugin from 'eslint-plugin-react';
+import globals from 'globals';
+
+export default tseslint.config(
+    eslint.configs.recommended,
+    ...tseslint.configs.recommended,
+    {
+        files: ['**/*.{js,jsx,ts,tsx}'],
+        ignores: [
+            'build/',
+            'webpack.config.ts',
+            'webpack.config.dev.ts',
+            'webpack.config.dev.server.ts',
+            'webpack.cy.config.ts',
+            'service-worker.ts',
+            'serviceWorkerRegistration.ts'
+        ],
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parser: tseslint.parser,
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true
+                },
+                globals: {
+                    ...globals.browser,
+                    ...globals.node,
+                    ...globals.es2021
+                }
+            }
+        },
+        plugins: {
+            react: reactPlugin,
+            '@typescript-eslint': tseslint.plugin
+        },
+        settings: {
+            react: {
+                version: 'detect'
+            }
+        },
+        rules: {
+            'indent': ['error', 'tab'],
+            'linebreak-style': ['error', 'unix'],
+            'quotes': ['error', 'single'],
+            'semi': ['error', 'always'],
+            'eol-last': ['error', 'always'],
+            '@typescript-eslint/no-var-requires': 'off',
+            // Include here the recommended rules for react
+            ...reactPlugin.configs.recommended.rules
+        }
+    }
+);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleleba/create-react-ssr",
-  "version": "3.9.27",
+  "version": "3.9.28",
   "description": "Starter Kit of server side render of react",
   "bin": "./bin/cli.js",
   "main": "src/server/index",
@@ -37,20 +37,20 @@
   "homepage": "https://github.com/aleleba/create-react-ssr#readme",
   "dependencies": {
     "@babel/register": "^7.25.9",
-    "dotenv": "^16.4.5",
+    "dotenv": "^16.4.7",
-    "express": "^4.21.1",
+    "express": "^4.21.2",
-    "helmet": "^8.0.0",
+    "helmet": "^8.1.0",
     "history": "^5.3.0",
     "ignore-styles": "^5.0.1",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.2.0",
-    "react-router-dom": "^6.28.0",
+    "react-router-dom": "^7.4.0",
     "react-router-hash-link": "^2.4.3",
     "redux": "^5.0.1",
-    "webpack": "^5.96.1",
+    "webpack": "^5.98.0",
-    "webpack-dev-server": "^5.1.0",
+    "webpack-dev-server": "^5.2.0",
-    "webpack-manifest-plugin": "^5.0.0",
+    "webpack-manifest-plugin": "^5.0.1",
     "workbox-background-sync": "^7.3.0",
     "workbox-broadcast-update": "^7.3.0",
     "workbox-cacheable-response": "^7.3.0",
@@ -65,52 +65,56 @@
     "workbox-streams": "^7.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
+    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.26.0",
+    "@babel/preset-typescript": "^7.27.0",
+    "@cypress/react": "^9.0.1",
+    "@eslint/js": "^9.23.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@redux-devtools/extension": "^3.3.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.2.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.9.0",
+    "@types/node": "^22.13.13",
-    "@types/react": "^18.3.12",
+    "@types/react": "^19.0.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^19.0.4",
     "@types/webpack": "^5.28.5",
     "@types/webpack-hot-middleware": "^2.25.9",
     "@types/webpack-node-externals": "^3.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/eslint-plugin": "^8.28.0",
-    "@typescript-eslint/parser": "^8.14.0",
+    "@typescript-eslint/parser": "^8.28.0",
     "babel-jest": "^29.7.0",
-    "babel-loader": "^9.2.1",
+    "babel-loader": "^10.0.0",
     "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "^11.1.0",
-    "copy-webpack-plugin": "^12.0.2",
+    "copy-webpack-plugin": "^13.0.0",
     "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.0",
+    "css-minimizer-webpack-plugin": "^7.0.2",
-    "cypress": "^13.15.2",
+    "cypress": "^14.2.0",
-    "eslint": "^9.14.0",
+    "eslint": "^9.23.0",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.4",
-    "eslint-webpack-plugin": "^4.2.0",
+    "eslint-webpack-plugin": "^5.0.0",
     "file-loader": "^6.2.0",
+    "globals": "^16.0.0",
     "html-webpack-plugin": "^5.6.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "mini-css-extract-plugin": "^2.9.2",
-    "react-refresh": "^0.14.2",
+    "react-refresh": "^0.16.0",
     "resolve-ts-aliases": "^1.0.1",
-    "sass": "^1.80.7",
+    "sass": "^1.86.0",
-    "sass-loader": "^16.0.3",
+    "sass-loader": "^16.0.5",
     "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.10",
+    "terser-webpack-plugin": "^5.3.14",
-    "ts-jest": "^29.2.5",
+    "ts-jest": "^29.3.0",
-    "typescript": "^5.6.3",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.28.0",
     "url-loader": "^4.1.1",
-    "webpack-cli": "^5.1.4",
+    "webpack-cli": "^6.0.1",
     "webpack-dev-middleware": "^7.4.2",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-node-externals": "^3.0.0",

setupTest.ts

@@ -3,6 +3,7 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import { TextEncoder, TextDecoder } from 'util';
 
 //import fetch Mock
 import fetchMock from 'jest-fetch-mock';
@@ -18,3 +19,6 @@ function() {
 		removeListener: () => {/**/}
 	};
 };
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder as typeof global.TextDecoder;

src/server/server.tsx

@@ -14,7 +14,7 @@ import webpackHotMiddleware from 'webpack-hot-middleware';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 //Router
-import { StaticRouter } from 'react-router-dom/server';
+import { StaticRouter } from 'react-router-dom';
 import routes from '../routes';
 //Redux
 import { Provider } from 'react-redux';