diff --git a/packages/core/src/client/hmr.ts b/packages/core/src/client/hmr.ts index 310ef8cd9f..fd96c62ca3 100644 --- a/packages/core/src/client/hmr.ts +++ b/packages/core/src/client/hmr.ts @@ -41,11 +41,11 @@ function clearOutdatedErrors() { } } -let createOverlay: undefined | ((err: string[]) => void); +let createOverlay: undefined | ((overlay: string, errors: string[]) => void); let clearOverlay: undefined | (() => void); export const registerOverlay = ( - createFn: (err: string[]) => void, + createFn: (overlay: string, errors: string[]) => void, clearFn: () => void, ): void => { createOverlay = createFn; @@ -91,7 +91,15 @@ function handleWarnings({ text }: { text: string[] }) { } // Compilation with errors (e.g. syntax error or missing modules). -function handleErrors({ text, html }: { text: string[]; html: string[] }) { +function handleErrors({ + text, + html, + overlay, +}: { + text: string[]; + html: string[]; + overlay: string; +}) { clearOutdatedErrors(); isFirstCompilation = false; @@ -103,7 +111,7 @@ function handleErrors({ text, html }: { text: string[]; html: string[] }) { } if (createOverlay) { - createOverlay(html); + createOverlay(overlay, html); } } diff --git a/packages/core/src/client/overlay.ts b/packages/core/src/client/overlay.ts index ffb0534c35..a0205cf51a 100644 --- a/packages/core/src/client/overlay.ts +++ b/packages/core/src/client/overlay.ts @@ -28,134 +28,13 @@ function linkedText(root: ShadowRoot, selector: string, text: string): void { el.insertAdjacentHTML('beforeend', frag); } -const overlayTemplate = ` - - -
-
-
-

Build failed

- 

-    
-  

-

-`;
-
 const {
   HTMLElement = class {} as typeof globalThis.HTMLElement,
   customElements,
 } = typeof window !== 'undefined' ? window : globalThis;
 
 class ErrorOverlay extends HTMLElement {
-  constructor(message: string[]) {
+  constructor(overlay: string, errors: string[]) {
     super();
 
     if (!this.attachShadow) {
@@ -166,15 +45,12 @@ class ErrorOverlay extends HTMLElement {
     }
 
     const root = this.attachShadow({ mode: 'open' });
-    root.innerHTML = overlayTemplate;
-
-    linkedText(root, '.content', message.join('\n\n').trim());
+    root.innerHTML = overlay;
 
+    linkedText(root, '.content', errors.join('\n\n').trim());
     root.querySelector('.close')?.addEventListener('click', this.close);
-
     // close overlay when click outside
     this.addEventListener('click', this.close);
-
     root.querySelector('.container')!.addEventListener('click', (e) => {
       e.stopPropagation();
     });
@@ -185,7 +61,6 @@ class ErrorOverlay extends HTMLElement {
       }
       document.removeEventListener('keydown', onEscKeydown);
     };
-
     document.addEventListener('keydown', onEscKeydown);
   }
 
@@ -209,9 +84,9 @@ if (customElements && !customElements.get(overlayId)) {
   customElements.define(overlayId, ErrorOverlay);
 }
 
-function createOverlay(err: string[]) {
+function createOverlay(overlay: string, errors: string[]) {
   clearOverlay();
-  document.body.appendChild(new ErrorOverlay(err));
+  document.body.appendChild(new ErrorOverlay(overlay, errors));
 }
 
 function clearOverlay() {
diff --git a/packages/core/src/server/socketServer.ts b/packages/core/src/server/socketServer.ts
index aa61787963..88212b030b 100644
--- a/packages/core/src/server/socketServer.ts
+++ b/packages/core/src/server/socketServer.ts
@@ -17,6 +17,128 @@ interface ExtWebSocket extends Ws {
   isAlive: boolean;
 }
 
+// HTML template for error overlay
+const overlayTemplate = `
+
+
+

+  

+    

+    
Build failed

+    

+    
+  

+

+`;
+
 function isEqualSet(a: Set, b: Set): boolean {
   if (a.size !== b.size) {
     return false;
@@ -297,6 +419,7 @@ export class SocketServer {
         data: {
           text: formattedErrors,
           html: formattedErrors.map((item) => ansiHTML(escapeHtml(item))),
+          overlay: overlayTemplate,
         },
       });
     }