fix: resume overlay after Vite full-reload

fi3ework · Jan 9, 2022 · 60aaa93 · 60aaa93
1 parent 6542594
commit 60aaa93
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 19 deletions.
diff --git a/packages/vite-plugin-checker/src/checkers/eslint/main.ts b/packages/vite-plugin-checker/src/checkers/eslint/main.ts
@@ -57,15 +57,15 @@ const createDiagnostic: CreateDiagnostic<'eslint'> = (pluginConfig) => {
 
         const lastErr = diagnosticsCache[0]
 
-        if (!lastErr) return
-
         if (overlay) {
           parentPort?.postMessage({
             type: ACTION_TYPES.overlayError,
-            payload: {
-              type: 'error',
-              err: diagnosticToViteError(lastErr),
-            },
+            payload: lastErr
+              ? {
+                  type: 'error',
+                  err: diagnosticToViteError(lastErr),
+                }
+              : null,
           })
         }
       }

diff --git a/packages/vite-plugin-checker/src/checkers/typescript/main.ts b/packages/vite-plugin-checker/src/checkers/typescript/main.ts
@@ -79,13 +79,15 @@ const createDiagnostic: CreateDiagnostic<'typescript'> = (pluginConfig) => {
             return
           case 6193: // 1 Error
           case 6194: // 0 errors or 2+ errors
-            if (currErr && overlay) {
+            if (overlay) {
               parentPort?.postMessage({
                 type: ACTION_TYPES.overlayError,
-                payload: {
-                  type: 'error',
-                  err: currErr,
-                },
+                payload: currErr
+                  ? {
+                      type: 'error',
+                      err: currErr,
+                    }
+                  : null,
               })
             }
         }

diff --git a/packages/vite-plugin-checker/src/checkers/vls/main.ts b/packages/vite-plugin-checker/src/checkers/vls/main.ts
@@ -20,13 +20,14 @@ export const createDiagnostic: CreateDiagnostic<'vls'> = (pluginConfig) => {
       const workDir: string = root
       const errorCallback: DiagnosticOptions['errorCallback'] = (diagnostics, overlayErr) => {
         if (!overlay) return
-        if (!overlayErr) return
         parentPort?.postMessage({
           type: ACTION_TYPES.overlayError,
-          payload: {
-            type: 'error',
-            err: overlayErr,
-          },
+          payload: overlayErr
+            ? {
+                type: 'error',
+                err: overlayErr,
+              }
+            : null,
         })
       }
       await diagnostics(workDir, 'WARN', { watch: true, errorCallback, verbose: false })

diff --git a/packages/vite-plugin-checker/src/main.ts b/packages/vite-plugin-checker/src/main.ts
@@ -94,21 +94,38 @@ export default function Plugin(userConfig: UserPluginConfig): Plugin {
       })()
     },
     configureServer(server) {
+      let connectedTimes = 0
+      let latestOverlayErrors: OverlayErrorAction['payload'][] = new Array(checkers.length)
       // for dev mode (2/2)
       // Get the server instance and keep reference in a closure
-      checkers.forEach((checker) => {
+      checkers.forEach((checker, index) => {
         const { worker, configureServer: workerConfigureServer } = checker.serve
         workerConfigureServer({ root: server.config.root })
         worker.on('message', (action: OverlayErrorAction) => {
           if (action.type === ACTION_TYPES.overlayError) {
-            server.ws.send(action.payload)
+            latestOverlayErrors[index] = action.payload
+            if (action.payload) {
+              server.ws.send(action.payload)
+            }
           } else if (action.type === ACTION_TYPES.console) {
             Checker.log(action)
           }
         })
       })
 
       return () => {
+        // sometimes Vite will trigger a full-reload instead of HMR, but the checker
+        // may update the overlay before full-reload fired. So we make sure the overlay
+        // will be displayed again after full-reload.
+        server.ws.on('connection', () => {
+          connectedTimes++
+          // if connectedCount !== 1, means Vite is doing a full-reload, so we don't need to send overlay again
+          const latestOverlayError = latestOverlayErrors.filter(Boolean).slice(-1)[0]
+          if (connectedTimes > 1 && latestOverlayError) {
+            server.ws.send(latestOverlayError)
+          }
+        })
+
         server.middlewares.use((req, res, next) => {
           next()
         })

diff --git a/packages/vite-plugin-checker/src/types.ts b/packages/vite-plugin-checker/src/types.ts
@@ -106,7 +106,11 @@ interface Action {
 
 export interface OverlayErrorAction extends Action {
   type: ACTION_TYPES.overlayError
-  payload: HMRPayload
+  /**
+   * send `HMRPayload` to raise error overlay provided by Vite
+   * send `null` to clear overlay for current checker
+   */
+  payload: HMRPayload | null
 }
 
 export interface ConfigAction extends Action {