[migrate] upgrade to ESLint 9, Node.js 20 & other latest Upstream packages/actions

.github/workflows/main.yml

@@ -6,32 +6,29 @@ on:
 jobs:
     Build-and-Deploy:
         runs-on: ubuntu-latest
+        permissions:
+            contents: write
         env:
             VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
             VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
             VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
         steps:
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
 
-            - uses: pnpm/action-setup@v2
+            - uses: pnpm/action-setup@v4
               with:
                   version: 9
-            - uses: actions/setup-node@v3
-              if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
+            - uses: actions/setup-node@v4
               with:
-                  node-version: 18
+                  node-version: 20
                   cache: pnpm
-            - name: Install Dependencies
-              if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-              run: pnpm i --frozen-lockfile
+            - name: Install & Build
+              run: |
+                  pnpm i --frozen-lockfile
+                  pnpm build
 
-            - name: Build Production
-              if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-              run: pnpm build
-
-            - name: Deploy Production
-              uses: peaceiris/actions-gh-pages@v3
-              if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
+            - name: Deploy to GitHub pages
+              uses: peaceiris/actions-gh-pages@v4
               with:
                   publish_dir: ./dist
                   personal_token: ${{ secrets.GITHUB_TOKEN }}
@@ -45,5 +42,5 @@ jobs:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
                   vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
-                  working-directory: ./
+                  working-directory: ./dist
                   vercel-args: --prod

.github/workflows/pull-request.yml

@@ -6,22 +6,30 @@ on:
 jobs:
     Build-and-Deploy:
         runs-on: ubuntu-latest
-        permissions:
-            contents: write
         env:
             VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
             VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
             VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
         steps:
             - uses: actions/checkout@v4
-              if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
 
-            - name: Deploy to Vercel
-              uses: amondnet/vercel-action@v25
+            - uses: pnpm/action-setup@v4
+              with:
+                  version: 9
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  cache: pnpm
+            - name: Install & Build
+              run: |
+                  pnpm i --frozen-lockfile
+                  pnpm build
+
+            - uses: amondnet/vercel-action@v25
               if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
               with:
                   vercel-token: ${{ secrets.VERCEL_TOKEN }}
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
                   vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
-                  working-directory: ./
+                  working-directory: ./dist

.gitpod.yml

@@ -21,6 +21,8 @@ vscode:
         - eamodio.gitlens
         - github.vscode-pull-request-github
         - github.vscode-github-actions
+        - streetsidesoftware.code-spell-checker
+
 tasks:
     - init: pnpm i
       command: npm start

ReadMe.md

@@ -12,7 +12,7 @@
 ## Technology stack
 
 -   Language: [TypeScript v5][2]
--   Component engine: [PReact v10][9]
+-   Component engine: [React v18][1]
 -   State management: [MobX v6][3]
 -   Component suite: [React Bootstrap v2][10]
 -   HTTP Client: [KoAJAX v1][11]
@@ -72,7 +72,6 @@ pnpm build
 [6]: https://github.com/idea2app/React-MobX-Bootstrap-ts/actions/workflows/main.yml
 [7]: https://codespaces.new/idea2app/React-MobX-Bootstrap-ts
 [8]: https://gitpod.io/?autostart=true#https://github.com/idea2app/React-MobX-Bootstrap-ts
-[9]: https://preactjs.com/
 [10]: https://react-bootstrap.github.io/
 [11]: https://github.com/EasyWebApp/KoAJAX
 [12]: https://developers.google.com/web/tools/workbox

eslint.config.mjs

@@ -0,0 +1,73 @@
+import { fixupPluginRules } from '@eslint/compat';
+import eslint from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import reactPlugin from 'eslint-plugin-react';
+import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
+import globals from 'globals';
+import tsEslint from 'typescript-eslint';
+import url from 'url';
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+export default tsEslint.config(
+    // register all of the plugins up-front
+    {
+        plugins: {
+            '@typescript-eslint': tsEslint.plugin,
+            // https://github.com/jsx-eslint/eslint-plugin-react/issues/3699
+            react: fixupPluginRules(reactPlugin),
+            'simple-import-sort': simpleImportSortPlugin
+        }
+    },
+    {
+        // config with just ignores is the replacement for `.eslintignore`
+        ignores: ['**/node_modules/**', '**/dist/**', '**/.parcel-cache/**']
+    },
+
+    // extends ...
+    eslint.configs.recommended,
+    ...tsEslint.configs.recommended,
+
+    // base config
+    {
+        languageOptions: {
+            globals: {
+                ...globals.es2020,
+                ...globals.browser,
+                ...globals.node
+            },
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: __dirname,
+                warnOnUnsupportedTypeScriptVersion: false
+            }
+        },
+        rules: {
+            'simple-import-sort/exports': 'error',
+            'simple-import-sort/imports': 'error',
+            'react/jsx-no-target-blank': 'warn',
+            'react/jsx-sort-props': [
+                'error',
+                {
+                    reservedFirst: true,
+                    shorthandLast: true,
+                    callbacksLast: true,
+                    noSortAlphabetically: true
+                }
+            ],
+            '@typescript-eslint/no-empty-object-type': 'off'
+        }
+    },
+    {
+        files: ['**/*.js'],
+        extends: [tsEslint.configs.disableTypeChecked],
+        rules: {
+            // turn off other type-aware rules
+            '@typescript-eslint/internal/no-poorly-typed-ts-props': 'off',
+
+            // turn off rules that don't apply to JS code
+            '@typescript-eslint/explicit-function-return-type': 'off'
+        }
+    },
+    eslintConfigPrettier
+);

package.json

@@ -5,68 +5,77 @@
     "author": "[email protected]",
     "dependencies": {
         "@editorjs/code": "^2.9.0",
-        "@editorjs/editorjs": "^2.29.1",
-        "@editorjs/header": "^2.8.1",
-        "@editorjs/image": "^2.9.0",
+        "@editorjs/editorjs": "^2.30.5",
+        "@editorjs/header": "^2.8.7",
+        "@editorjs/image": "^2.9.3",
         "@editorjs/link": "^2.6.2",
-        "@editorjs/list": "^1.9.0",
-        "@editorjs/paragraph": "^2.11.5",
-        "@editorjs/quote": "^2.6.0",
+        "@editorjs/list": "^1.10.0",
+        "@editorjs/paragraph": "^2.11.6",
+        "@editorjs/quote": "^2.7.2",
         "browser-fs-access": "^0.35.0",
         "browser-unhandled-rejection": "^1.0.2",
-        "echarts-jsx": "^1.2.0",
+        "echarts-jsx": "^1.2.1",
         "editorjs-html": "^3.4.3",
         "idea-react": "^2.0.0-rc.2",
-        "koajax": "^1.1.2",
+        "koajax": "^3.0.2",
         "lodash": "^4.17.21",
-        "mobx": "^6.12.4",
-        "mobx-github": "^0.3.2",
+        "mobx": "^6.13.2",
+        "mobx-github": "^0.3.4",
         "mobx-i18n": "^0.5.0",
         "mobx-react": "^9.1.1",
-        "mobx-restful": "^1.0.0",
-        "mobx-restful-table": "^2.0.0-rc.1",
-        "preact": "^10.22.0",
-        "react-bootstrap": "^2.10.3",
+        "mobx-restful": "^1.0.1",
+        "mobx-restful-table": "^2.0.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-bootstrap": "^2.10.4",
         "react-bootstrap-editor": "^2.0.4",
         "react-editor-js": "^2.1.0",
         "react-router-class-tools": "^0.1.3",
-        "react-router-dom": "^6.24.0",
+        "react-router-dom": "^6.26.2",
         "web-utility": "^4.4.0"
     },
     "devDependencies": {
-        "@babel/runtime": "^7.24.7",
+        "@babel/runtime": "^7.25.6",
+        "@eslint/compat": "^1.1.1",
+        "@eslint/js": "^9.10.0",
         "@parcel/config-default": "~2.12.0",
         "@parcel/packager-raw-url": "~2.12.0",
         "@parcel/transformer-less": "~2.12.0",
         "@parcel/transformer-typescript-tsc": "~2.12.0",
         "@parcel/transformer-webmanifest": "~2.12.0",
-        "@types/lodash": "^4.17.5",
-        "@types/node": "^18.19.39",
+        "@types/lodash": "^4.17.7",
+        "@types/node": "^20.16.5",
+        "@types/react": "^18.3.5",
+        "@types/react-dom": "^18.3.0",
+        "@typescript-eslint/eslint-plugin": "^8.5.0",
+        "@typescript-eslint/parser": "^8.5.0",
         "buffer": "^6.0.3",
-        "husky": "^9.0.11",
-        "lint-staged": "^15.2.7",
+        "eslint": "^9.10.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-react": "^7.36.1",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
+        "eslint-plugin-spellcheck": "^0.0.20",
+        "globals": "^15.9.0",
+        "husky": "^9.1.6",
+        "lint-staged": "^15.2.10",
         "parcel": "~2.12.0",
-        "parcel-transformer-mdx": "^0.3.3",
-        "prettier": "^3.3.2",
+        "parcel-transformer-mdx": "^0.4.2",
+        "prettier": "^3.3.3",
         "prismjs": "^1.29.0",
         "process": "^0.11.10",
-        "typescript": "~5.5.2",
+        "typescript": "~5.6.2",
+        "typescript-eslint": "^8.5.0",
         "workbox-cli": "^7.1.0"
     },
-    "alias": {
-        "react": "preact/compat",
-        "react-dom/test-utils": "preact/test-utils",
-        "react-dom": "preact/compat",
-        "react/jsx-runtime": "preact/jsx-runtime"
-    },
     "prettier": {
         "singleQuote": true,
         "trailingComma": "none",
         "arrowParens": "avoid",
         "tabWidth": 4
     },
     "lint-staged": {
-        "*.{html,md,less,json,yml,js,ts,tsx}": "prettier --write"
+        "*.{html,md,less,json,yml,js,mjs,ts,tsx}": "prettier --write",
+        "*.{js,mjs,ts,tsx}": "eslint --fix"
     },
     "browserslist": "> 0.5%, last 2 versions, not dead, IE 11",
     "scripts": {