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.
583 lines
19 KiB
583 lines
19 KiB
import '@vite/env'; |
|
|
|
const template = /*html*/ ` |
|
<style> |
|
:host { |
|
position: fixed; |
|
z-index: 99999; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
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; |
|
margin: 30px auto; |
|
padding: 25px 40px; |
|
position: relative; |
|
background: #181818; |
|
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); |
|
direction: ltr; |
|
text-align: left; |
|
} |
|
|
|
pre { |
|
font-family: var(--monospace); |
|
font-size: 16px; |
|
margin-top: 0; |
|
margin-bottom: 1em; |
|
overflow-x: scroll; |
|
scrollbar-width: none; |
|
} |
|
|
|
pre::-webkit-scrollbar { |
|
display: none; |
|
} |
|
|
|
.message { |
|
line-height: 1.3; |
|
font-weight: 600; |
|
white-space: pre-wrap; |
|
} |
|
|
|
.message-body { |
|
color: var(--red); |
|
} |
|
|
|
.plugin { |
|
color: var(--purple); |
|
} |
|
|
|
.file { |
|
color: var(--cyan); |
|
margin-bottom: 0; |
|
white-space: pre-wrap; |
|
word-break: break-all; |
|
} |
|
|
|
.frame { |
|
color: var(--yellow); |
|
} |
|
|
|
.stack { |
|
font-size: 13px; |
|
color: var(--dim); |
|
} |
|
|
|
.tip { |
|
font-size: 13px; |
|
color: #999; |
|
border-top: 1px dotted #999; |
|
padding-top: 13px; |
|
} |
|
|
|
code { |
|
font-size: 13px; |
|
font-family: var(--monospace); |
|
color: var(--yellow); |
|
} |
|
|
|
.file-link { |
|
text-decoration: underline; |
|
cursor: pointer; |
|
} |
|
</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> |
|
<div class="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> |
|
</div> |
|
</div> |
|
`; |
|
const fileRE = /(?:[a-zA-Z]:\\|\/).*?:\d+:\d+/g; |
|
const codeframeRE = /^(?:>?\s+\d+\s+\|.*|\s+\|\s*\^.*)\r?\n/gm; |
|
class ErrorOverlay extends HTMLElement { |
|
constructor(err) { |
|
var _a; |
|
super(); |
|
this.root = this.attachShadow({ mode: 'open' }); |
|
this.root.innerHTML = template; |
|
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()); |
|
const [file] = (((_a = err.loc) === null || _a === void 0 ? void 0 : _a.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 (hasFrame) { |
|
this.text('.frame', err.frame.trim()); |
|
} |
|
this.text('.stack', err.stack, true); |
|
this.root.querySelector('.window').addEventListener('click', (e) => { |
|
e.stopPropagation(); |
|
}); |
|
this.addEventListener('click', () => { |
|
this.close(); |
|
}); |
|
} |
|
text(selector, text, linkFiles = false) { |
|
const el = this.root.querySelector(selector); |
|
if (!linkFiles) { |
|
el.textContent = text; |
|
} |
|
else { |
|
let curIndex = 0; |
|
let match; |
|
while ((match = fileRE.exec(text))) { |
|
const { 0: file, index } = match; |
|
if (index != null) { |
|
const frag = text.slice(curIndex, index); |
|
el.appendChild(document.createTextNode(frag)); |
|
const link = document.createElement('a'); |
|
link.textContent = file; |
|
link.className = 'file-link'; |
|
link.onclick = () => { |
|
fetch('/__open-in-editor?file=' + encodeURIComponent(file)); |
|
}; |
|
el.appendChild(link); |
|
curIndex += frag.length + file.length; |
|
} |
|
} |
|
} |
|
} |
|
close() { |
|
var _a; |
|
(_a = this.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this); |
|
} |
|
} |
|
const overlayId = 'vite-error-overlay'; |
|
if (customElements && !customElements.get(overlayId)) { |
|
customElements.define(overlayId, ErrorOverlay); |
|
} |
|
|
|
console.log('[vite] connecting...'); |
|
// use server configuration, then fallback to inference |
|
const socketProtocol = __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws'); |
|
const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`; |
|
const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr'); |
|
const base = __BASE__ || '/'; |
|
const messageBuffer = []; |
|
function warnFailedFetch(err, path) { |
|
if (!err.message.match('fetch')) { |
|
console.error(err); |
|
} |
|
console.error(`[hmr] Failed to reload ${path}. ` + |
|
`This could be due to syntax errors or importing non-existent ` + |
|
`modules. (see errors above)`); |
|
} |
|
function cleanUrl(pathname) { |
|
const url = new URL(pathname, location.toString()); |
|
url.searchParams.delete('direct'); |
|
return url.pathname + url.search; |
|
} |
|
// Listen for messages |
|
socket.addEventListener('message', async ({ data }) => { |
|
handleMessage(JSON.parse(data)); |
|
}); |
|
let isFirstUpdate = true; |
|
async function handleMessage(payload) { |
|
switch (payload.type) { |
|
case 'connected': |
|
console.log(`[vite] connected.`); |
|
sendMessageBuffer(); |
|
// proxy(nginx, docker) hmr ws maybe caused timeout, |
|
// so send ping package let ws keep alive. |
|
setInterval(() => socket.send('{"type":"ping"}'), __HMR_TIMEOUT__); |
|
break; |
|
case 'update': |
|
notifyListeners('vite:beforeUpdate', payload); |
|
// if this is the first update and there's already an error overlay, it |
|
// means the page opened with existing server compile error and the whole |
|
// module script failed to load (since one of the nested imports is 500). |
|
// in this case a normal update won't work and a full reload is needed. |
|
if (isFirstUpdate && hasErrorOverlay()) { |
|
window.location.reload(); |
|
return; |
|
} |
|
else { |
|
clearErrorOverlay(); |
|
isFirstUpdate = false; |
|
} |
|
payload.updates.forEach((update) => { |
|
if (update.type === 'js-update') { |
|
queueUpdate(fetchUpdate(update)); |
|
} |
|
else { |
|
// css-update |
|
// this is only sent when a css file referenced with <link> is updated |
|
const { path, timestamp } = update; |
|
const searchUrl = cleanUrl(path); |
|
// can't use querySelector with `[href*=]` here since the link may be |
|
// using relative paths so we need to use link.href to grab the full |
|
// URL for the include check. |
|
const el = Array.from(document.querySelectorAll('link')).find((e) => cleanUrl(e.href).includes(searchUrl)); |
|
if (el) { |
|
const newPath = `${base}${searchUrl.slice(1)}${searchUrl.includes('?') ? '&' : '?'}t=${timestamp}`; |
|
// rather than swapping the href on the existing tag, we will |
|
// create a new link tag. Once the new stylesheet has loaded we |
|
// will remove the existing link tag. This removes a Flash Of |
|
// Unstyled Content that can occur when swapping out the tag href |
|
// directly, as the new stylesheet has not yet been loaded. |
|
const newLinkTag = el.cloneNode(); |
|
newLinkTag.href = new URL(newPath, el.href).href; |
|
const removeOldEl = () => el.remove(); |
|
newLinkTag.addEventListener('load', removeOldEl); |
|
newLinkTag.addEventListener('error', removeOldEl); |
|
el.after(newLinkTag); |
|
} |
|
console.log(`[vite] css hot updated: ${searchUrl}`); |
|
} |
|
}); |
|
break; |
|
case 'custom': { |
|
notifyListeners(payload.event, payload.data); |
|
break; |
|
} |
|
case 'full-reload': |
|
notifyListeners('vite:beforeFullReload', payload); |
|
if (payload.path && payload.path.endsWith('.html')) { |
|
// if html file is edited, only reload the page if the browser is |
|
// currently on that page. |
|
const pagePath = decodeURI(location.pathname); |
|
const payloadPath = base + payload.path.slice(1); |
|
if (pagePath === payloadPath || |
|
(pagePath.endsWith('/') && pagePath + 'index.html' === payloadPath)) { |
|
location.reload(); |
|
} |
|
return; |
|
} |
|
else { |
|
location.reload(); |
|
} |
|
break; |
|
case 'prune': |
|
notifyListeners('vite:beforePrune', payload); |
|
// After an HMR update, some modules are no longer imported on the page |
|
// but they may have left behind side effects that need to be cleaned up |
|
// (.e.g style injections) |
|
// TODO Trigger their dispose callbacks. |
|
payload.paths.forEach((path) => { |
|
const fn = pruneMap.get(path); |
|
if (fn) { |
|
fn(dataMap.get(path)); |
|
} |
|
}); |
|
break; |
|
case 'error': { |
|
notifyListeners('vite:error', payload); |
|
const err = payload.err; |
|
if (enableOverlay) { |
|
createErrorOverlay(err); |
|
} |
|
else { |
|
console.error(`[vite] Internal Server Error\n${err.message}\n${err.stack}`); |
|
} |
|
break; |
|
} |
|
default: { |
|
const check = payload; |
|
return check; |
|
} |
|
} |
|
} |
|
function notifyListeners(event, data) { |
|
const cbs = customListenersMap.get(event); |
|
if (cbs) { |
|
cbs.forEach((cb) => cb(data)); |
|
} |
|
} |
|
const enableOverlay = __HMR_ENABLE_OVERLAY__; |
|
function createErrorOverlay(err) { |
|
if (!enableOverlay) |
|
return; |
|
clearErrorOverlay(); |
|
document.body.appendChild(new ErrorOverlay(err)); |
|
} |
|
function clearErrorOverlay() { |
|
document |
|
.querySelectorAll(overlayId) |
|
.forEach((n) => n.close()); |
|
} |
|
function hasErrorOverlay() { |
|
return document.querySelectorAll(overlayId).length; |
|
} |
|
let pending = false; |
|
let queued = []; |
|
/** |
|
* buffer multiple hot updates triggered by the same src change |
|
* so that they are invoked in the same order they were sent. |
|
* (otherwise the order may be inconsistent because of the http request round trip) |
|
*/ |
|
async function queueUpdate(p) { |
|
queued.push(p); |
|
if (!pending) { |
|
pending = true; |
|
await Promise.resolve(); |
|
pending = false; |
|
const loading = [...queued]; |
|
queued = []; |
|
(await Promise.all(loading)).forEach((fn) => fn && fn()); |
|
} |
|
} |
|
async function waitForSuccessfulPing(ms = 1000) { |
|
// eslint-disable-next-line no-constant-condition |
|
while (true) { |
|
try { |
|
const pingResponse = await fetch(`${base}__vite_ping`); |
|
// success - 2xx status code |
|
if (pingResponse.ok) |
|
break; |
|
// failure - non-2xx status code |
|
else |
|
throw new Error(); |
|
} |
|
catch (e) { |
|
// wait ms before attempting to ping again |
|
await new Promise((resolve) => setTimeout(resolve, ms)); |
|
} |
|
} |
|
} |
|
// ping server |
|
socket.addEventListener('close', async ({ wasClean }) => { |
|
if (wasClean) |
|
return; |
|
console.log(`[vite] server connection lost. polling for restart...`); |
|
await waitForSuccessfulPing(); |
|
location.reload(); |
|
}); |
|
const sheetsMap = new Map(); |
|
function updateStyle(id, content) { |
|
let style = sheetsMap.get(id); |
|
{ |
|
if (style && !(style instanceof HTMLStyleElement)) { |
|
removeStyle(id); |
|
style = undefined; |
|
} |
|
if (!style) { |
|
style = document.createElement('style'); |
|
style.setAttribute('type', 'text/css'); |
|
style.innerHTML = content; |
|
document.head.appendChild(style); |
|
} |
|
else { |
|
style.innerHTML = content; |
|
} |
|
} |
|
sheetsMap.set(id, style); |
|
} |
|
function removeStyle(id) { |
|
const style = sheetsMap.get(id); |
|
if (style) { |
|
if (style instanceof CSSStyleSheet) { |
|
// @ts-expect-error: using experimental API |
|
document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s) => s !== style); |
|
} |
|
else { |
|
document.head.removeChild(style); |
|
} |
|
sheetsMap.delete(id); |
|
} |
|
} |
|
async function fetchUpdate({ path, acceptedPath, timestamp }) { |
|
const mod = hotModulesMap.get(path); |
|
if (!mod) { |
|
// In a code-splitting project, |
|
// it is common that the hot-updating module is not loaded yet. |
|
// https://github.com/vitejs/vite/issues/721 |
|
return; |
|
} |
|
const moduleMap = new Map(); |
|
const isSelfUpdate = path === acceptedPath; |
|
// make sure we only import each dep once |
|
const modulesToUpdate = new Set(); |
|
if (isSelfUpdate) { |
|
// self update - only update self |
|
modulesToUpdate.add(path); |
|
} |
|
else { |
|
// dep update |
|
for (const { deps } of mod.callbacks) { |
|
deps.forEach((dep) => { |
|
if (acceptedPath === dep) { |
|
modulesToUpdate.add(dep); |
|
} |
|
}); |
|
} |
|
} |
|
// determine the qualified callbacks before we re-import the modules |
|
const qualifiedCallbacks = mod.callbacks.filter(({ deps }) => { |
|
return deps.some((dep) => modulesToUpdate.has(dep)); |
|
}); |
|
await Promise.all(Array.from(modulesToUpdate).map(async (dep) => { |
|
const disposer = disposeMap.get(dep); |
|
if (disposer) |
|
await disposer(dataMap.get(dep)); |
|
const [path, query] = dep.split(`?`); |
|
try { |
|
const newMod = await import( |
|
/* @vite-ignore */ |
|
base + |
|
path.slice(1) + |
|
`?import&t=${timestamp}${query ? `&${query}` : ''}`); |
|
moduleMap.set(dep, newMod); |
|
} |
|
catch (e) { |
|
warnFailedFetch(e, dep); |
|
} |
|
})); |
|
return () => { |
|
for (const { deps, fn } of qualifiedCallbacks) { |
|
fn(deps.map((dep) => moduleMap.get(dep))); |
|
} |
|
const loggedPath = isSelfUpdate ? path : `${acceptedPath} via ${path}`; |
|
console.log(`[vite] hot updated: ${loggedPath}`); |
|
}; |
|
} |
|
function sendMessageBuffer() { |
|
if (socket.readyState === 1) { |
|
messageBuffer.forEach((msg) => socket.send(msg)); |
|
messageBuffer.length = 0; |
|
} |
|
} |
|
const hotModulesMap = new Map(); |
|
const disposeMap = new Map(); |
|
const pruneMap = new Map(); |
|
const dataMap = new Map(); |
|
const customListenersMap = new Map(); |
|
const ctxToListenersMap = new Map(); |
|
function createHotContext(ownerPath) { |
|
if (!dataMap.has(ownerPath)) { |
|
dataMap.set(ownerPath, {}); |
|
} |
|
// when a file is hot updated, a new context is created |
|
// clear its stale callbacks |
|
const mod = hotModulesMap.get(ownerPath); |
|
if (mod) { |
|
mod.callbacks = []; |
|
} |
|
// clear stale custom event listeners |
|
const staleListeners = ctxToListenersMap.get(ownerPath); |
|
if (staleListeners) { |
|
for (const [event, staleFns] of staleListeners) { |
|
const listeners = customListenersMap.get(event); |
|
if (listeners) { |
|
customListenersMap.set(event, listeners.filter((l) => !staleFns.includes(l))); |
|
} |
|
} |
|
} |
|
const newListeners = new Map(); |
|
ctxToListenersMap.set(ownerPath, newListeners); |
|
function acceptDeps(deps, callback = () => { }) { |
|
const mod = hotModulesMap.get(ownerPath) || { |
|
id: ownerPath, |
|
callbacks: [] |
|
}; |
|
mod.callbacks.push({ |
|
deps, |
|
fn: callback |
|
}); |
|
hotModulesMap.set(ownerPath, mod); |
|
} |
|
const hot = { |
|
get data() { |
|
return dataMap.get(ownerPath); |
|
}, |
|
accept(deps, callback) { |
|
if (typeof deps === 'function' || !deps) { |
|
// self-accept: hot.accept(() => {}) |
|
acceptDeps([ownerPath], ([mod]) => deps && deps(mod)); |
|
} |
|
else if (typeof deps === 'string') { |
|
// explicit deps |
|
acceptDeps([deps], ([mod]) => callback && callback(mod)); |
|
} |
|
else if (Array.isArray(deps)) { |
|
acceptDeps(deps, callback); |
|
} |
|
else { |
|
throw new Error(`invalid hot.accept() usage.`); |
|
} |
|
}, |
|
acceptDeps() { |
|
throw new Error(`hot.acceptDeps() is deprecated. ` + |
|
`Use hot.accept() with the same signature instead.`); |
|
}, |
|
dispose(cb) { |
|
disposeMap.set(ownerPath, cb); |
|
}, |
|
// @ts-expect-error untyped |
|
prune(cb) { |
|
pruneMap.set(ownerPath, cb); |
|
}, |
|
// TODO |
|
// eslint-disable-next-line @typescript-eslint/no-empty-function |
|
decline() { }, |
|
invalidate() { |
|
// TODO should tell the server to re-perform hmr propagation |
|
// from this module as root |
|
location.reload(); |
|
}, |
|
// custom events |
|
on(event, cb) { |
|
const addToMap = (map) => { |
|
const existing = map.get(event) || []; |
|
existing.push(cb); |
|
map.set(event, existing); |
|
}; |
|
addToMap(customListenersMap); |
|
addToMap(newListeners); |
|
}, |
|
send(event, data) { |
|
messageBuffer.push(JSON.stringify({ type: 'custom', event, data })); |
|
sendMessageBuffer(); |
|
} |
|
}; |
|
return hot; |
|
} |
|
/** |
|
* urls here are dynamic import() urls that couldn't be statically analyzed |
|
*/ |
|
function injectQuery(url, queryToInject) { |
|
// skip urls that won't be handled by vite |
|
if (!url.startsWith('.') && !url.startsWith('/')) { |
|
return url; |
|
} |
|
// can't use pathname from URL since it may be relative like ../ |
|
const pathname = url.replace(/#.*$/, '').replace(/\?.*$/, ''); |
|
const { search, hash } = new URL(url, 'http://vitejs.dev'); |
|
return `${pathname}?${queryToInject}${search ? `&` + search.slice(1) : ''}${hash || ''}`; |
|
} |
|
|
|
export { ErrorOverlay, createHotContext, injectQuery, removeStyle, updateStyle }; |
|
//# sourceMappingURL=client.mjs.map
|
|
|