feat: customize ErrorOverlay (#10234)

vitejs · Sep 28, 2022 · fe4dc8d · fe4dc8d
1 parent 78f74c9
commit fe4dc8d
Showing 1 changed file with 23 additions and 19 deletions.
diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
@@ -9,6 +9,17 @@ const template = /*html*/ `
   left: 0;
   width: 100%;
   height: 100%;
+
+  --monospace: 'SFMono-Regular', Consolas,
+  'Liberation Mono', Menlo, Courier, monospace;
+  --red: #ff5555;
+  --yellow: #e2aa53;
+  --purple: #cfa4ff;
+  --cyan: #2dd9da;
+  --dim: #c9c9c9;
+
+  --window-background: #181818;
+  --window-color: #d8d8d8;
 }
 
 .backdrop {
@@ -21,24 +32,17 @@ const template = /*html*/ `
   overflow-y: scroll;
   margin: 0;
   background: rgba(0, 0, 0, 0.66);
-  --monospace: 'SFMono-Regular', Consolas,
-              'Liberation Mono', Menlo, Courier, monospace;
-  --red: #ff5555;
-  --yellow: #e2aa53;
-  --purple: #cfa4ff;
-  --cyan: #2dd9da;
-  --dim: #c9c9c9;
 }
 
 .window {
   font-family: var(--monospace);
   line-height: 1.5;
   width: 800px;
-  color: #d8d8d8;
+  color: var(--window-color);
   margin: 30px auto;
   padding: 25px 40px;
   position: relative;
-  background: #181818;
+  background: var(--window-background);
   border-radius: 6px 6px 8px 8px;
   box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
   overflow: hidden;
@@ -108,13 +112,13 @@ code {
   cursor: pointer;
 }
 </style>
-<div class="backdrop">
-  <div class="window">
-    <pre class="message"><span class="plugin"></span><span class="message-body"></span></pre>
-    <pre class="file"></pre>
-    <pre class="frame"></pre>
-    <pre class="stack"></pre>
-    <div class="tip">
+<div class="backdrop" part="backdrop">
+  <div class="window" part="window">
+    <pre class="message" part="message"><span class="plugin"></span><span class="message-body"></span></pre>
+    <pre class="file" part="file"></pre>
+    <pre class="frame" part="frame"></pre>
+    <pre class="stack" part="stack"></pre>
+    <div class="tip" part="tip">
       Click outside or fix the code to dismiss.<br>
       You can also disable this overlay by setting
       <code>server.hmr.overlay</code> to <code>false</code> in <code>vite.config.js.</code>
@@ -132,7 +136,7 @@ const { HTMLElement = class {} as typeof globalThis.HTMLElement } = globalThis
 export class ErrorOverlay extends HTMLElement {
   root: ShadowRoot
 
-  constructor(err: ErrorPayload['err']) {
+  constructor(err: ErrorPayload['err'], links = true) {
     super()
     this.root = this.attachShadow({ mode: 'open' })
     this.root.innerHTML = template
@@ -149,15 +153,15 @@ export class ErrorOverlay extends HTMLElement {
 
     const [file] = (err.loc?.file || err.id || 'unknown file').split(`?`)
     if (err.loc) {
-      this.text('.file', `${file}:${err.loc.line}:${err.loc.column}`, true)
+      this.text('.file', `${file}:${err.loc.line}:${err.loc.column}`, links)
     } else if (err.id) {
       this.text('.file', file)
     }
 
     if (hasFrame) {
       this.text('.frame', err.frame!.trim())
     }
-    this.text('.stack', err.stack, true)
+    this.text('.stack', err.stack, links)
 
     this.root.querySelector('.window')!.addEventListener('click', (e) => {
       e.stopPropagation()