You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
33 KiB
1 line
33 KiB
2 years ago
|
{"version":3,"file":"client.mjs","sources":["../../src/client/overlay.ts","../../src/client/client.ts"],"sourcesContent":["import type { ErrorPayload } from 'types/hmrPayload'\n\nconst template = /*html*/ `\n<style>\n:host {\n position: fixed;\n z-index: 99999;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow-y: scroll;\n margin: 0;\n background: rgba(0, 0, 0, 0.66);\n --monospace: 'SFMono-Regular', Consolas,\n 'Liberation Mono', Menlo, Courier, monospace;\n --red: #ff5555;\n --yellow: #e2aa53;\n --purple: #cfa4ff;\n --cyan: #2dd9da;\n --dim: #c9c9c9;\n}\n\n.window {\n font-family: var(--monospace);\n line-height: 1.5;\n width: 800px;\n color: #d8d8d8;\n margin: 30px auto;\n padding: 25px 40px;\n position: relative;\n background: #181818;\n border-radius: 6px 6px 8px 8px;\n box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);\n overflow: hidden;\n border-top: 8px solid var(--red);\n direction: ltr;\n text-align: left;\n}\n\npre {\n font-family: var(--monospace);\n font-size: 16px;\n margin-top: 0;\n margin-bottom: 1em;\n overflow-x: scroll;\n scrollbar-width: none;\n}\n\npre::-webkit-scrollbar {\n display: none;\n}\n\n.message {\n line-height: 1.3;\n font-weight: 600;\n white-space: pre-wrap;\n}\n\n.message-body {\n color: var(--red);\n}\n\n.plugin {\n color: var(--purple);\n}\n\n.file {\n color: var(--cyan);\n margin-bottom: 0;\n white-space: pre-wrap;\n word-break: break-all;\n}\n\n.frame {\n color: var(--yellow);\n}\n\n.stack {\n font-size: 13px;\n color: var(--dim);\n}\n\n.tip {\n font-size: 13px;\n color: #999;\n border-top: 1px dotted #999;\n padding-top: 13px;\n}\n\ncode {\n font-size: 13px;\n font-family: var(--monospace);\n color: var(--yellow);\n}\n\n.file-link {\n text-decoration: underline;\n cursor: pointer;\n}\n</style>\n<div class=\"window\">\n <pre class=\"message\"><span class=\"plugin\"></span><span class=\"message-body\"></span></pre>\n <pre class=\"file\"></pre>\n <pre class=\"frame\"></pre>\n <pre class=\"stack\"></pre>\n <div class=\"tip\">\n Click outside or fix the code to dismiss.<br>\n You can also disable this overlay by setting\n <code>server.hmr.overlay</code> to <code>false</code> in <code>vite.config.js.</code>\n </div>\n</div>\n`\n\nconst fileRE = /(?:[a-zA-Z]:\\\\|\\/).*?:\\d+:\\d+/g\nconst codeframeRE = /^(?:>?\\s+\\d+\\s+\\|.*|\\s+\\|\\s*\\^.*)\\r?\\n/gm\n\nexport class ErrorOverlay extends HTMLElement {\n root: ShadowRoot\n\n constructor(err: ErrorPayload['err']) {\n super()\n this.root = this.attachShadow({ mode: 'open' })\n this.root.innerHTML = template\n\n codeframeRE.lastIndex = 0\n const hasFrame = err.frame && codeframeRE.test(err.frame)\n const message = hasFrame\n ? err.message.replace(codeframeRE, '')\n : err.message\n if (err.plugin) {\n this.text('.plugin', `[plugin:${err.plugin}] `)\n }\n this.text('.message-body', message.trim())\n\n const [file] = (err.loc?.file || err.id || 'unknown file').split(`?`)\n if (err.loc) {\n this.text('.file', `${file}:${err.loc.line}:${err.loc.column}`, true)\n } else if (err.id) {\n this.text('.file', file)\n }\n\n if (hasFrame) {\n this.text('.frame', err.frame!.trim())\n }\n this.text('.stack', err.stack, true)\n\n this.root.querySelector('.window')!.addEventListener('click', (e) => {\n e.stopPropagation()\n })\n this.addEventListener('click', () => {\n this.close()\n })\n }\n\n text(selector: string, text: string, linkFiles = false): void {\n const el = this.root.querySelector(selector)!\n if (!linkFiles) {\n el.textContent = text\n } else {\n let curIndex = 0\n let match: RegExpExecArray | null\n while ((match = fileRE.exec(text))) {\n const { 0: file, index } = match\n if (index != null) {\n const frag = text.slice(curIndex, index)\n el.appendChild(document.createTextNode(frag))\n const link = document.createElement('a')\n link.textContent
|