chore: upgrade dependencies and add playwright checks

Author: jacob-lcs

.github/workflows/webpack.yml

@@ -1,4 +1,4 @@
-name: NodeJS with Webpack
+name: CI
 
 on:
   push:
@@ -10,23 +10,34 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [22.x]
-
     steps:
     - uses: actions/checkout@v6
 
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: Use Node.js 24.x
       uses: actions/setup-node@v6
       with:
-        node-version: ${{ matrix.node-version }}
-    - name: Use Pnpm v10.18.0
+        node-version: 24.x
+        cache: pnpm
+
+    - name: Use pnpm 10.18.3
       uses: pnpm/action-setup@v2
       with:
-        version: 10.18.0
+        version: 10.18.3
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Install Playwright browser
+      run: pnpm exec playwright install --with-deps chromium
+
+    - name: Lint
+      run: pnpm lint
+
+    - name: Typecheck
+      run: pnpm typecheck
 
     - name: Build
-      run: |
-        pnpm install
-        pnpm build
+      run: pnpm build
+
+    - name: End-to-end tests
+      run: pnpm test:e2e

.gitignore

@@ -1,3 +1,6 @@
 node_modules
 dist
 .idea
+.DS_Store
+playwright-report
+test-results

.swcrc

@@ -7,9 +7,8 @@
     },
     "transform": {
       "react": {
-        "pragma": "React.createElement",
-        "pragmaFrag": "React.Fragment"
+        "runtime": "automatic"
       }
     }
   }
-}
+}

eslint.config.mjs

@@ -1,22 +1,47 @@
 import globals from "globals";
 import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
-import reactCompiler from 'eslint-plugin-react-compiler'
+import reactPlugin from "@eslint-react/eslint-plugin";
+import reactCompiler from "eslint-plugin-react-compiler";
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
-  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
-  { languageOptions: { globals: globals.browser } },
+  {
+    ignores: ["dist/**", "node_modules/**", "playwright-report/**", "test-results/**"],
+  },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
-  pluginReact.configs.flat.recommended,
   {
+    files: ["src/**/*.{js,jsx,ts,tsx}"],
+    languageOptions: { globals: globals.browser },
+  },
+  {
+    files: [
+      "*.config.{js,cjs,mjs,ts}",
+      "webpack*.js",
+      "postcss.config.js",
+    ],
+    languageOptions: { globals: globals.node },
+    rules: {
+      "@typescript-eslint/no-require-imports": "off",
+    },
+  },
+  {
+    files: ["playwright.config.ts", "tests/**/*.{js,ts}"],
+    languageOptions: { globals: globals.node },
+  },
+  {
+    ...reactPlugin.configs["recommended-typescript"],
+    files: ["src/**/*.{jsx,tsx}"],
+  },
+  {
+    files: ["src/**/*.{jsx,tsx}"],
     plugins: {
-      'react-compiler': reactCompiler,
+      "react-compiler": reactCompiler,
     },
     rules: {
-      'react-compiler/react-compiler': 'error',
+      "@typescript-eslint/no-unused-vars": ["error", { varsIgnorePattern: "^React$" }],
+      "react-compiler/react-compiler": "error",
     },
   },
 ];

package.json

@@ -12,7 +12,11 @@
   ],
   "scripts": {
     "dev": "webpack serve --config webpack.dev.js --hot",
-    "build": "webpack --config webpack.prod.js"
+    "build": "webpack --config webpack.prod.js",
+    "lint": "eslint . --max-warnings=0",
+    "typecheck": "tsc --noEmit",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed"
   },
   "repository": {
     "type": "git",
@@ -25,62 +29,68 @@
     "url": "https://github.com/jacob-lcs/react-webpack5-template/issues"
   },
   "homepage": "https://github.com/jacob-lcs/react-webpack5-template#readme",
+  "browserslist": [
+    "last 2 versions",
+    "> 1%",
+    "ios >= 7"
+  ],
   "dependencies": {
-    "antd": "^6.1.4",
-    "dayjs": "^1.11.19",
-    "lodash-es": "^4.17.22",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+    "antd": "^6.3.2",
+    "dayjs": "^1.11.20",
+    "lodash-es": "^4.17.23",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
+    "@eslint-react/eslint-plugin": "^2.13.0",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.58.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
-    "@swc/core": "^1.15.8",
+    "@swc/core": "^1.15.18",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "autoprefixer": "^10.4.23",
+    "autoprefixer": "^10.4.27",
     "browserslist": "^4.28.1",
-    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.4",
-    "dotenv-webpack": "^8.1.1",
-    "eslint": "^9.39.2",
-    "eslint-plugin-react": "^7.37.5",
+    "css-loader": "^7.1.4",
+    "css-minimizer-webpack-plugin": "^8.0.0",
+    "dotenv-webpack": "^9.0.0",
+    "eslint": "^10.0.3",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
-    "globals": "^17.0.0",
-    "html-webpack-plugin": "^5.6.5",
-    "less": "^4.5.1",
-    "less-loader": "^12.3.0",
-    "lightningcss": "^1.30.2",
-    "mini-css-extract-plugin": "^2.9.4",
-    "path": "^0.12.7",
-    "postcss": "^8.5.6",
-    "postcss-loader": "^8.2.0",
+    "globals": "^17.4.0",
+    "html-webpack-plugin": "^5.6.6",
+    "less": "^4.6.4",
+    "less-loader": "^12.3.2",
+    "lightningcss": "^1.32.0",
+    "mini-css-extract-plugin": "^2.10.1",
+    "postcss": "^8.5.8",
+    "postcss-loader": "^8.2.1",
     "postcss-normalize": "^13.0.1",
-    "postcss-preset-env": "^10.6.0",
+    "postcss-preset-env": "^11.2.0",
     "react-compiler-webpack": "^1.0.0",
     "react-refresh": "^0.18.0",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.97.1",
-    "sass-loader": "^16.0.6",
+    "sass": "^1.98.0",
+    "sass-loader": "^16.0.7",
     "style-loader": "^4.0.0",
     "stylus": "^0.64.0",
-    "stylus-loader": "^8.1.2",
-    "swc-loader": "^0.2.6",
-    "terser-webpack-plugin": "^5.3.16",
+    "stylus-loader": "^8.1.3",
+    "swc-loader": "^0.2.7",
+    "terser-webpack-plugin": "^5.4.0",
     "thread-loader": "^4.0.4",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.51.0",
-    "webpack": "^5.104.1",
-    "webpack-bundle-analyzer": "^5.1.0",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2",
+    "typescript-eslint": "^8.57.0",
+    "webpack": "^5.105.4",
+    "webpack-bundle-analyzer": "^5.2.0",
+    "webpack-cli": "^7.0.0",
+    "webpack-dev-server": "^5.2.3",
     "webpack-manifest-plugin": "^6.0.1",
     "webpack-merge": "^6.0.1",
     "webpackbar": "^7.0.0"
   },
   "engines": {
     "pnpm": "^10.0.0"
-  }
+  },
+  "packageManager": "pnpm@10.32.1"
 }

playwright.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const playwrightPort = 45173;
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? `http://127.0.0.1:${playwrightPort}`;
+
+export default defineConfig({
+  testDir: "./tests",
+  fullyParallel: false,
+  retries: process.env.CI ? 2 : 0,
+  reporter: [["list"], ["html", { open: "never" }]],
+  use: {
+    baseURL,
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: process.env.PLAYWRIGHT_BASE_URL
+    ? undefined
+    : {
+        command: `./node_modules/.bin/webpack serve --config webpack.dev.js --hot --host 127.0.0.1 --port ${playwrightPort}`,
+        url: `http://127.0.0.1:${playwrightPort}`,
+        reuseExistingServer: !process.env.CI,
+        timeout: 120_000,
+      },
+});