fix: show overlay even runtime is loaded after connection event (#207)

Author: fi3ework

packages/runtime/src/main.js

@@ -87,5 +87,5 @@ export function inject(params) {
   listenToCustomMessage(updateErrorOverlay)
   listenToReconnectMessage(resumeErrorOverlay)
 
-  ws.start()
+  ws.startListening()
 }

packages/runtime/src/ws.js

@@ -33,11 +33,17 @@ export function prepareListen() {
   }
 
   return {
-    start: () => {
+    startListening: () => {
       if (import.meta.hot) {
+        // listen server -> client messages
         import.meta.hot.on('vite-plugin-checker', (data) => {
           onMessage(data)
         })
+
+        // told server that vite-plugin-checker runtime has loaded
+        // then server should send stored diagnostics to display overlay
+        // NOTE: sync modification with packages /packages/vite-plugin-checker/src/main.ts
+        import.meta.hot.send('vite-plugin-checker', { event: 'runtime-loaded' })
       }
     },
   }

packages/vite-plugin-checker/src/main.ts

@@ -190,14 +190,14 @@ export function checker(userConfig: UserPluginConfig): Plugin {
 
       return () => {
         if (server.ws.on) {
-          // 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', () => {
-            server.ws.send('vite-plugin-checker', {
-              event: WS_CHECKER_RECONNECT_EVENT,
-              data: latestOverlayErrors.filter(Boolean),
-            })
+          server.ws.on('vite-plugin-checker', (data) => {
+            // NOTE: sync modification with packages /packages/runtime/src/ws.js
+            if (data.event === 'runtime-loaded') {
+              server.ws.send('vite-plugin-checker', {
+                event: WS_CHECKER_RECONNECT_EVENT,
+                data: latestOverlayErrors.filter(Boolean),
+              })
+            }
           })
         } else {
           setTimeout(() => {