Skip to content

Commit

Permalink
feat: support show multiple errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@fi3ework
fi3ework committed Feb 6, 2022
1 parent 132cd4e commit 963fb65
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 66 deletions.
10 changes: 5 additions & 5 deletions packages/vite-plugin-checker/src/@runtime/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import type { ErrorPayload } from 'vite'
import { ErrorOverlay, overlayId } from './overlay'

let enableOverlay = true

const WS_CHECKER_ERROR_TYPE = 'vite-plugin-checker-error'
export function inject() {
const socketProtocol = null || (location.protocol === 'https:' ? 'wss' : 'ws')
const socketHost = `${null || location.hostname}:${'3000'}`
const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')

socket.addEventListener('message', async ({ data: dataStr }) => {
const data = JSON.parse(dataStr)
if (data.type === 'checker-error') {
createErrorOverlay(data.err)
if (data.type === WS_CHECKER_ERROR_TYPE) {
createErrorOverlay([data.err])
}
})
}

function createErrorOverlay(err: ErrorPayload['err']) {
function createErrorOverlay(err: ErrorPayload['err'][]) {
if (!enableOverlay) return
clearErrorOverlay()
console.log('error! 鏍囪!')
document.body.appendChild(new ErrorOverlay(err))
}

Expand Down
82 changes: 51 additions & 31 deletions packages/vite-plugin-checker/src/@runtime/overlay.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import type { ErrorPayload } from 'vite'

const template = `
const template = (errors: string[]) => `
<style>
:host {
position: fixed;
z-index: 99999;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
Expand All @@ -26,21 +26,21 @@ const template = `
line-height: 1.5;
width: 800px;
color: #d8d8d8;
margin: 30px auto;
padding: 25px 40px;
margin: 40px auto;
padding: 8px 16px;
position: relative;
background: #181818;
background: #0D1117;
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;
border-top: 8px solid var(--red);
overflow: scroll;
direction: ltr;
text-align: left;
max-height: 80vh;
}
pre {
font-family: var(--monospace);
font-size: 16px;
font-size: 14px;
margin-top: 0;
margin-bottom: 1em;
overflow-x: scroll;
Expand All @@ -51,6 +51,15 @@ pre::-webkit-scrollbar {
display: none;
}
.message-item {
border-top: 1px dotted #666;
padding: 12px 0 0 0;
}
.message-item:first-child {
border-top: none;
}
.message {
line-height: 1.3;
font-weight: 600;
Expand Down Expand Up @@ -100,10 +109,7 @@ code {
}
</style>
<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>
${errors.join('\n')}
<div class="tip">
Click outside or fix the code to dismiss.<br>
You can also disable this overlay by setting
Expand All @@ -112,36 +118,50 @@ code {
</div>
`

const errorTemplate = `
<div class="message-item">
<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>
`

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

export class ErrorOverlay extends HTMLElement {
public root: ShadowRoot

public constructor(err: ErrorPayload['err']) {
public constructor(errs: ErrorPayload['err'][]) {
super()
this.root = this.attachShadow({ mode: 'open' })
this.root.innerHTML = template
this.root.innerHTML = template(new Array(errs.length).fill(errorTemplate))

codeframeRE.lastIndex = 0
const hasFrame = err.frame && codeframeRE.test(err.frame)
const message = hasFrame ? err.message.replace(codeframeRE, '') : err.message
if (err.plugin) {
this.text('.plugin', `[plugin:${err.plugin}] `)
}
this.text('.message-body', message.trim())
errs.forEach((err, index) => {
codeframeRE.lastIndex = 0
const hasFrame = err.frame && codeframeRE.test(err.frame)
const message = hasFrame ? err.message.replace(codeframeRE, '') : err.message
const selectorPrefix = `.message-item:nth-child(${index + 1}) `

const [file] = (err.loc?.file || err.id || 'unknown file').split(`?`)
if (err.loc) {
this.text('.file', `${file}:${err.loc.line}:${err.loc.column}`, true)
} else if (err.id) {
this.text('.file', file)
}
if (err.plugin) {
this.text(selectorPrefix + '.plugin', `[plugin:${err.plugin}] `)
}
this.text(selectorPrefix + '.message-body', message.trim())

if (hasFrame) {
this.text('.frame', err.frame!.trim())
}
this.text('.stack', err.stack, true)
const [file] = (err.loc?.file || err.id || 'unknown file').split(`?`)
if (err.loc) {
this.text(selectorPrefix + '.file', `${file}:${err.loc.line}:${err.loc.column}`, true)
} else if (err.id) {
this.text(selectorPrefix + '.file', file)
}

if (hasFrame) {
this.text(selectorPrefix + '.frame', err.frame!.trim())
}
this.text(selectorPrefix + '.stack', err.stack, true)
})

this.root.querySelector('.window')!.addEventListener('click', (e) => {
e.stopPropagation()
Expand Down
11 changes: 5 additions & 6 deletions packages/vite-plugin-checker/src/client/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
const RUNTIME_PUBLIC_PATH = '/@vite-plugin-checker/runtime'
import fs from 'fs'

const runtimeFilePath = require.resolve('../@runtime/main.js')
const RUNTIME_PUBLIC_PATH = '/@vite-plugin-checker-runtime'
const RUNTIME_FILE_PATH = require.resolve('../@runtime/main.js')
const WS_CHECKER_ERROR_TYPE = 'vite-plugin-checker-error'

const runtimeCode = `
${fs.readFileSync(runtimeFilePath, 'utf-8')};
`
const runtimeCode = `${fs.readFileSync(RUNTIME_FILE_PATH, 'utf-8')};`

export { runtimeCode, RUNTIME_PUBLIC_PATH }
export { runtimeCode, RUNTIME_PUBLIC_PATH, WS_CHECKER_ERROR_TYPE }
32 changes: 8 additions & 24 deletions packages/vite-plugin-checker/src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@ import { spawn } from 'child_process'
import pick from 'lodash.pick'
import npmRunPath from 'npm-run-path'
import { ConfigEnv, Plugin } from 'vite'
import { Checker } from './Checker'
import { runtimeCode, RUNTIME_PUBLIC_PATH } from './client/index'

import { Checker } from './Checker'
import { RUNTIME_PUBLIC_PATH, runtimeCode, WS_CHECKER_ERROR_TYPE } from './client/index'
import {
OverlayErrorAction,
ACTION_TYPES,
BuildCheckBinStr,
BuildInCheckerNames,
OverlayErrorAction,
PluginConfig,
ServeAndBuildChecker,
UserPluginConfig,
SharedConfig,
BuildCheckBinStr,
PluginConfig,
ACTION_TYPES,
UserPluginConfig,
} from './types'

export * from './types'
Expand Down Expand Up @@ -83,27 +83,11 @@ export default function Plugin(userConfig: UserPluginConfig): Plugin {
},
transformIndexHtml() {
return [
// {
// tag: 'script',
// attrs: { type: 'module' },
// children: `
// const socketProtocol = null || (location.protocol === 'https:' ? 'wss' : 'ws');
// const socketHost = \`\${null || location.hostname}:\${'3000'}\`;
// const socket = new WebSocket(\`\${socketProtocol}://\${socketHost}\`, 'vite-hmr');
// socket.addEventListener('message', async ({ data }) => {
// console.log(data)
// });
// `,
// },
{
tag: 'script',
attrs: { type: 'module' },
children: `import { inject } from "${RUNTIME_PUBLIC_PATH}"; inject();`,
},
// {
// tag: 'script',
// attrs: { type: 'module', src: `/vue-template/vite-plugin-checker/lib/client/index.js` },
// },
]
},
buildStart: () => {
Expand Down Expand Up @@ -142,7 +126,7 @@ export default function Plugin(userConfig: UserPluginConfig): Plugin {
latestOverlayErrors[index] = action.payload
if (action.payload) {
// @ts-ignore
action.payload.type = 'checker-error'
action.payload.type = WS_CHECKER_ERROR_TYPE
server.ws.send(action.payload)
}
} else if (action.type === ACTION_TYPES.console) {
Expand Down

0 comments on commit 963fb65

Please sign in to comment.