refactor: upgrade deps, setup tailwind4 and correct ci

.github/workflows/build.yml

@@ -1,6 +1,7 @@
 name: Build
 
 on:
+  workflow_dispatch:
   push:
     branches: [main]
     paths-ignore:
@@ -14,6 +15,9 @@ on:
       - ".github/**"
       - "!.github/workflows/build.yml"
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ${{ matrix.os }}
@@ -24,24 +28,32 @@ jobs:
 
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
+        with:
+          persist-credentials: false
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v6
+        with:
+          version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v6
         with:
-          node-version: 18
+          node-version: 22
+          cache: pnpm
 
       - name: Install Dependencies
-        run: npm install
+        run: pnpm install --frozen-lockfile
 
       - name: Build Release Files
-        run: npm run build
+        run: pnpm build
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload Artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v7
         with:
-          name: release_on_${{ matrix. os }}
+          name: release_on_${{ matrix.os }}
           path: release/
           retention-days: 5

.github/workflows/ci.yml

@@ -1,81 +1,29 @@
 name: CI
 
 on:
-  pull_request_target:
+  pull_request:
     branches:
       - main
+    paths:
+      - '*.md'
+      - '**/*.md'
 
 permissions:
-  pull-requests: write
+  contents: read
 
-jobs:
-  job1:
-    name: Check Not Allowed File Changes
-    runs-on: ubuntu-latest
-    outputs:
-      markdown_change: ${{ steps.filter_markdown.outputs.change }}
-      markdown_files: ${{ steps.filter_markdown.outputs.change_files }}
-    steps:
+concurrency:
+  group: ci-${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
-      - name: Check Not Allowed File Changes
-        uses: dorny/paths-filter@v2
-        id: filter_not_allowed
-        with:
-          list-files: json
-          filters: |
-            change:
-              - 'package-lock.json'
-              - 'yarn.lock'
-              - 'pnpm-lock.yaml'
-
-      # ref: https://github.com/github/docs/blob/main/.github/workflows/triage-unallowed-contributions.yml
-      - name: Comment About Changes We Can't Accept
-        if: ${{ steps.filter_not_allowed.outputs.change == 'true' }}
-        uses: actions/github-script@v6
-        with:
-          script: |
-            let workflowFailMessage = "It looks like you've modified some files that we can't accept as contributions."
-            try {
-              const badFilesArr = [
-                'package-lock.json',
-                'yarn.lock',
-                'pnpm-lock.yaml',
-              ]
-              const badFiles = badFilesArr.join('\n- ')
-              const reviewMessage = `👋 Hey there spelunker. It looks like you've modified some files that we can't accept as contributions. The complete list of files we can't accept are:\n- ${badFiles}\n\nYou'll need to revert all of the files you changed in that list using [GitHub Desktop](https://docs.github.com/en/free-pro-team@latest/desktop/contributing-and-collaborating-using-github-desktop/managing-commits/reverting-a-commit) or \`git checkout origin/main <file name>\`. Once you get those files reverted, we can continue with the review process. :octocat:\n\nMore discussion:\n- https://github.com/electron-vite/electron-vite-vue/issues/192`
-              createdComment = await github.rest.issues.createComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: context.payload.number,
-                body: reviewMessage,
-              })
-              workflowFailMessage = `${workflowFailMessage} Please see ${createdComment.data.html_url} for details.`
-            } catch(err) {
-              console.log("Error creating comment.", err)
-            }
-            core.setFailed(workflowFailMessage)
-
-      - name: Check Not Linted Markdown
-        if: ${{ always() }}
-        uses: dorny/paths-filter@v2
-        id: filter_markdown
-        with:
-          list-files: shell
-          filters: |
-            change:
-              - added|modified: '*.md'
-
-
-  job2:
+jobs:
+  lint-markdown:
     name: Lint Markdown
     runs-on: ubuntu-latest
-    needs: job1
-    if: ${{ always() && needs.job1.outputs.markdown_change == 'true' }}
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
         with:
-          ref: ${{ github.event.pull_request.head.sha }}
+          persist-credentials: false
 
       - name: Lint markdown
-        run: npx markdownlint-cli ${{ needs.job1.outputs.markdown_files }} --ignore node_modules
+        run: npx --yes markdownlint-cli@0.48.0 '**/*.md' --ignore node_modules --disable MD013

.github/workflows/pr-guard.yml

@@ -0,0 +1,65 @@
+name: PR Guard
+
+on:
+  pull_request_target:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pull-requests: write
+
+concurrency:
+  group: pr-guard-${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  validate:
+    name: Validate Pull Request
+    runs-on: ubuntu-latest
+    steps:
+      - name: Detect Changed Files
+        uses: dorny/paths-filter@v3
+        id: changes
+        with:
+          list-files: shell
+          filters: |
+            lockfiles:
+              - 'package-lock.json'
+              - 'yarn.lock'
+              - 'pnpm-lock.yaml'
+              - 'bun.lock'
+
+      # ref: https://github.com/github/docs/blob/main/.github/workflows/triage-unallowed-contributions.yml
+      - name: Comment About Changes We Can't Accept
+        if: ${{ steps.changes.outputs.lockfiles == 'true' }}
+        uses: actions/github-script@v7
+        with:
+          script: |
+            try {
+              const badFilesArr = [
+                'package-lock.json',
+                'yarn.lock',
+                'pnpm-lock.yaml',
+                'bun.lock',
+              ]
+              const badFiles = badFilesArr.join('\n- ')
+              const reviewMessage = `👋 Hey there spelunker. It looks like you've modified some files that we can't accept as contributions. The complete list of files we can't accept are:\n- ${badFiles}\n\nYou'll need to revert all of the files you changed in that list using [GitHub Desktop](https://docs.github.com/en/free-pro-team@latest/desktop/contributing-and-collaborating-using-github-desktop/managing-commits/reverting-a-commit) or \`git checkout origin/main <file name>\`. Once you get those files reverted, we can continue with the review process. :octocat:\n\nMore discussion:\n- https://github.com/electron-vite/electron-vite-vue/issues/192`
+
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.payload.pull_request.number,
+                body: reviewMessage,
+              })
+            } catch(err) {
+              core.warning(`Failed to create PR comment: ${err.message}`)
+            }
+
+      - name: Fail on Restricted Lockfile Changes
+        if: ${{ steps.changes.outputs.lockfiles == 'true' }}
+        run: |
+          echo "Lockfiles are managed by maintainers and should not be changed in PRs."
+          echo "Changed lockfiles:"
+          echo "${{ steps.changes.outputs.lockfiles_files }}"
+          exit 1

.gitignore

@@ -31,3 +31,5 @@ yarn.lock
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+test/screenshots

.vscode/launch.json

@@ -1,54 +1,39 @@
 {
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
-  "compounds": [
-    {
-      "name": "Debug App",
-      "preLaunchTask": "Before Debug",
-      "configurations": [
-        "Debug Main Process",
-        "Debug Renderer Process"
-      ],
-      "presentation": {
-        "hidden": false,
-        "group": "",
-        "order": 1
-      },
-      "stopAll": true
-    }
-  ],
   "configurations": [
     {
       "name": "Debug Main Process",
       "type": "node",
       "request": "launch",
-      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/vite",
       "windows": {
-        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
+        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/vite.cmd"
       },
-      "runtimeArgs": [
-        "--no-sandbox",
-        "--remote-debugging-port=9229",
-        "."
-      ],
-      "envFile": "${workspaceFolder}/.vscode/.debug.env",
-      "console": "integratedTerminal"
+      "runtimeArgs": ["dev"],
+      "env": {
+        "REMOTE_DEBUGGING_PORT": "9222"
+      }
     },
     {
       "name": "Debug Renderer Process",
-      "port": 9229,
+      "port": 9222,
       "request": "attach",
       "type": "chrome",
+      "webRoot": "${workspaceFolder}/src",
       "timeout": 60000,
-      "skipFiles": [
-        "<node_internals>/**",
-        "${workspaceRoot}/node_modules/**",
-        "${workspaceRoot}/dist-electron/**",
-        // Skip files in host(VITE_DEV_SERVER_URL)
-        "http://127.0.0.1:7777/**"
-      ]
-    },
+      "presentation": {
+        "hidden": true
+      }
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug All",
+      "configurations": ["Debug Main Process", "Debug Renderer Process"],
+      "presentation": {
+        "order": 1
+      }
+    }
   ]
 }

.vscode/settings.json

@@ -1,10 +1,7 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.tsc.autoDetect": "off",
   "json.schemas": [
     {
       "fileMatch": [
-        "/*electron-builder.json5",
         "/*electron-builder.json"
       ],
       "url": "https://json.schemastore.org/electron-builder"

.vscode/tasks.json

@@ -6,19 +6,26 @@
     {
       "label": "Before Debug",
       "type": "shell",
-      "command": "node .vscode/.debug.script.mjs",
+      "command": "node --enable-source-maps .vscode/.debug.script.mjs",
       "isBackground": true,
+      "options": {
+        "cwd": "${workspaceFolder}"
+      },
+      "presentation": {
+        "reveal": "always",
+        "panel": "shared",
+        "clear": false
+      },
       "problemMatcher": {
         "owner": "typescript",
         "fileLocation": "relative",
         "pattern": {
-          // TODO: correct "regexp"
-          "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "regexp": "^(.*):(\\d+):(\\d+): (ERROR|WARNING): (.*)$",
           "file": 1,
-          "line": 3,
-          "column": 4,
-          "code": 5,
-          "message": 6
+          "line": 2,
+          "column": 3,
+          "code": 4,
+          "message": 5
         },
         "background": {
           "activeOnStart": true,