Skip to content

Commit

Permalink
feat: convert overlay template to DOM (#15852)
Browse files Browse the repository at this point in the history
Co-authored-by: 翠 / green <green@sapphi.red>
Co-authored-by: patak <matias.capeletto@gmail.com>
  • Loading branch information
3 people authored Mar 12, 2024
1 parent 3efb1a1 commit dd49505
Showing 1 changed file with 52 additions and 17 deletions.
69 changes: 52 additions & 17 deletions packages/vite/src/client/overlay.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,22 @@ declare const __HMR_CONFIG_NAME__: string
const hmrConfigName = __HMR_CONFIG_NAME__
const base = __BASE__ || '/'

// Create an element with provided attributes and optional children
function h(
e: string,
attrs: Record<string, string> = {},
...children: (string | Node)[]
) {
const elem = document.createElement(e)
for (const [k, v] of Object.entries(attrs)) {
elem.setAttribute(k, v)
}
elem.append(...children)
return elem
}

// set :host styles to make playwright detect the element as visible
const template = /*html*/ `
<style>
const templateStyle = /*css*/ `
:host {
position: fixed;
top: 0;
Expand Down Expand Up @@ -149,22 +162,43 @@ kbd {
border-color: rgb(54, 57, 64);
border-image: initial;
}
</style>
<div class="backdrop" part="backdrop">
<div class="window" part="window">
<pre class="message" part="message"><span class="plugin" part="plugin"></span><span class="message-body" part="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, press <kbd>Esc</kbd> key, or fix the code to dismiss.<br>
You can also disable this overlay by setting
<code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">${hmrConfigName}.</code>
</div>
</div>
</div>
`

// Error Template
const template = h(
'div',
{ class: 'backdrop', part: 'backdrop' },
h(
'div',
{ class: 'window', part: 'window' },
h(
'pre',
{ class: 'message', part: 'message' },
h('span', { class: 'plugin', part: 'plugin' }),
h('span', { class: 'message-body', part: 'message-body' }),
),
h('pre', { class: 'file', part: 'file' }),
h('pre', { class: 'frame', part: 'frame' }),
h('pre', { class: 'stack', part: 'stack' }),
h(
'div',
{ class: 'tip', part: 'tip' },
'Click outside, press ',
h('kbd', {}, 'Esc'),
' key, or fix the code to dismiss.',
h('br'),
'You can also disable this overlay by setting ',
h('code', { part: 'config-option-name' }, 'server.hmr.overlay'),
' to ',
h('code', { part: 'config-option-value' }, 'false'),
' in ',
h('code', { part: 'config-file-name' }, hmrConfigName),
'.',
),
),
h('style', {}, templateStyle),
)

const fileRE = /(?:[a-zA-Z]:\\|\/).*?:\d+:\d+/g
const codeframeRE = /^(?:>?\s*\d+\s+\|.*|\s+\|\s*\^.*)\r?\n/gm

Expand All @@ -178,7 +212,8 @@ export class ErrorOverlay extends HTMLElement {
constructor(err: ErrorPayload['err'], links = true) {
super()
this.root = this.attachShadow({ mode: 'open' })
this.root.innerHTML = template

this.root.appendChild(template)

codeframeRE.lastIndex = 0
const hasFrame = err.frame && codeframeRE.test(err.frame)
Expand Down

0 comments on commit dd49505

Please sign in to comment.