| import '@vite/env'; |
|
|
| class HMRContext { |
| constructor(hmrClient, ownerPath) { |
| this.hmrClient = hmrClient; |
| this.ownerPath = ownerPath; |
| if (!hmrClient.dataMap.has(ownerPath)) { |
| hmrClient.dataMap.set(ownerPath, {}); |
| } |
| const mod = hmrClient.hotModulesMap.get(ownerPath); |
| if (mod) { |
| mod.callbacks = []; |
| } |
| const staleListeners = hmrClient.ctxToListenersMap.get(ownerPath); |
| if (staleListeners) { |
| for (const [event, staleFns] of staleListeners) { |
| const listeners = hmrClient.customListenersMap.get(event); |
| if (listeners) { |
| hmrClient.customListenersMap.set( |
| event, |
| listeners.filter((l) => !staleFns.includes(l)) |
| ); |
| } |
| } |
| } |
| this.newListeners = new Map(); |
| hmrClient.ctxToListenersMap.set(ownerPath, this.newListeners); |
| } |
| get data() { |
| return this.hmrClient.dataMap.get(this.ownerPath); |
| } |
| accept(deps, callback) { |
| if (typeof deps === "function" || !deps) { |
| this.acceptDeps([this.ownerPath], ([mod]) => deps?.(mod)); |
| } else if (typeof deps === "string") { |
| this.acceptDeps([deps], ([mod]) => callback?.(mod)); |
| } else if (Array.isArray(deps)) { |
| this.acceptDeps(deps, callback); |
| } else { |
| throw new Error(`invalid hot.accept() usage.`); |
| } |
| } |
| |
| |
| acceptExports(_, callback) { |
| this.acceptDeps([this.ownerPath], ([mod]) => callback?.(mod)); |
| } |
| dispose(cb) { |
| this.hmrClient.disposeMap.set(this.ownerPath, cb); |
| } |
| prune(cb) { |
| this.hmrClient.pruneMap.set(this.ownerPath, cb); |
| } |
| |
| |
| decline() { |
| } |
| invalidate(message) { |
| const firstInvalidatedBy = this.hmrClient.currentFirstInvalidatedBy ?? this.ownerPath; |
| this.hmrClient.notifyListeners("vite:invalidate", { |
| path: this.ownerPath, |
| message, |
| firstInvalidatedBy |
| }); |
| this.send("vite:invalidate", { |
| path: this.ownerPath, |
| message, |
| firstInvalidatedBy |
| }); |
| this.hmrClient.logger.debug( |
| `invalidate ${this.ownerPath}${message ? `: ${message}` : ""}` |
| ); |
| } |
| on(event, cb) { |
| const addToMap = (map) => { |
| const existing = map.get(event) || []; |
| existing.push(cb); |
| map.set(event, existing); |
| }; |
| addToMap(this.hmrClient.customListenersMap); |
| addToMap(this.newListeners); |
| } |
| off(event, cb) { |
| const removeFromMap = (map) => { |
| const existing = map.get(event); |
| if (existing === void 0) { |
| return; |
| } |
| const pruned = existing.filter((l) => l !== cb); |
| if (pruned.length === 0) { |
| map.delete(event); |
| return; |
| } |
| map.set(event, pruned); |
| }; |
| removeFromMap(this.hmrClient.customListenersMap); |
| removeFromMap(this.newListeners); |
| } |
| send(event, data) { |
| this.hmrClient.send({ type: "custom", event, data }); |
| } |
| acceptDeps(deps, callback = () => { |
| }) { |
| const mod = this.hmrClient.hotModulesMap.get(this.ownerPath) || { |
| id: this.ownerPath, |
| callbacks: [] |
| }; |
| mod.callbacks.push({ |
| deps, |
| fn: callback |
| }); |
| this.hmrClient.hotModulesMap.set(this.ownerPath, mod); |
| } |
| } |
| class HMRClient { |
| constructor(logger, transport, importUpdatedModule) { |
| this.logger = logger; |
| this.transport = transport; |
| this.importUpdatedModule = importUpdatedModule; |
| this.hotModulesMap = new Map(); |
| this.disposeMap = new Map(); |
| this.pruneMap = new Map(); |
| this.dataMap = new Map(); |
| this.customListenersMap = new Map(); |
| this.ctxToListenersMap = new Map(); |
| this.updateQueue = []; |
| this.pendingUpdateQueue = false; |
| } |
| async notifyListeners(event, data) { |
| const cbs = this.customListenersMap.get(event); |
| if (cbs) { |
| await Promise.allSettled(cbs.map((cb) => cb(data))); |
| } |
| } |
| send(payload) { |
| this.transport.send(payload).catch((err) => { |
| this.logger.error(err); |
| }); |
| } |
| clear() { |
| this.hotModulesMap.clear(); |
| this.disposeMap.clear(); |
| this.pruneMap.clear(); |
| this.dataMap.clear(); |
| this.customListenersMap.clear(); |
| this.ctxToListenersMap.clear(); |
| } |
| |
| |
| |
| async prunePaths(paths) { |
| await Promise.all( |
| paths.map((path) => { |
| const disposer = this.disposeMap.get(path); |
| if (disposer) return disposer(this.dataMap.get(path)); |
| }) |
| ); |
| paths.forEach((path) => { |
| const fn = this.pruneMap.get(path); |
| if (fn) { |
| fn(this.dataMap.get(path)); |
| } |
| }); |
| } |
| warnFailedUpdate(err, path) { |
| if (!(err instanceof Error) || !err.message.includes("fetch")) { |
| this.logger.error(err); |
| } |
| this.logger.error( |
| `Failed to reload ${path}. This could be due to syntax errors or importing non-existent modules. (see errors above)` |
| ); |
| } |
| |
| |
| |
| |
| |
| async queueUpdate(payload) { |
| this.updateQueue.push(this.fetchUpdate(payload)); |
| if (!this.pendingUpdateQueue) { |
| this.pendingUpdateQueue = true; |
| await Promise.resolve(); |
| this.pendingUpdateQueue = false; |
| const loading = [...this.updateQueue]; |
| this.updateQueue = []; |
| (await Promise.all(loading)).forEach((fn) => fn && fn()); |
| } |
| } |
| async fetchUpdate(update) { |
| const { path, acceptedPath, firstInvalidatedBy } = update; |
| const mod = this.hotModulesMap.get(path); |
| if (!mod) { |
| return; |
| } |
| let fetchedModule; |
| const isSelfUpdate = path === acceptedPath; |
| const qualifiedCallbacks = mod.callbacks.filter( |
| ({ deps }) => deps.includes(acceptedPath) |
| ); |
| if (isSelfUpdate || qualifiedCallbacks.length > 0) { |
| const disposer = this.disposeMap.get(acceptedPath); |
| if (disposer) await disposer(this.dataMap.get(acceptedPath)); |
| try { |
| fetchedModule = await this.importUpdatedModule(update); |
| } catch (e) { |
| this.warnFailedUpdate(e, acceptedPath); |
| } |
| } |
| return () => { |
| try { |
| this.currentFirstInvalidatedBy = firstInvalidatedBy; |
| for (const { deps, fn } of qualifiedCallbacks) { |
| fn( |
| deps.map( |
| (dep) => dep === acceptedPath ? fetchedModule : void 0 |
| ) |
| ); |
| } |
| const loggedPath = isSelfUpdate ? path : `${acceptedPath} via ${path}`; |
| this.logger.debug(`hot updated: ${loggedPath}`); |
| } finally { |
| this.currentFirstInvalidatedBy = void 0; |
| } |
| }; |
| } |
| } |
|
|
| |
| let urlAlphabet = |
| 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'; |
| let nanoid = (size = 21) => { |
| let id = ''; |
| let i = size | 0; |
| while (i--) { |
| id += urlAlphabet[(Math.random() * 64) | 0]; |
| } |
| return id |
| }; |
|
|
| typeof process !== "undefined" && process.platform === "win32"; |
| function promiseWithResolvers() { |
| let resolve; |
| let reject; |
| const promise = new Promise((_resolve, _reject) => { |
| resolve = _resolve; |
| reject = _reject; |
| }); |
| return { promise, resolve, reject }; |
| } |
|
|
| function reviveInvokeError(e) { |
| const error = new Error(e.message || "Unknown invoke error"); |
| Object.assign(error, e, { |
| |
| |
| runnerError: new Error("RunnerError") |
| }); |
| return error; |
| } |
| const createInvokeableTransport = (transport) => { |
| if (transport.invoke) { |
| return { |
| ...transport, |
| async invoke(name, data) { |
| const result = await transport.invoke({ |
| type: "custom", |
| event: "vite:invoke", |
| data: { |
| id: "send", |
| name, |
| data |
| } |
| }); |
| if ("error" in result) { |
| throw reviveInvokeError(result.error); |
| } |
| return result.result; |
| } |
| }; |
| } |
| if (!transport.send || !transport.connect) { |
| throw new Error( |
| "transport must implement send and connect when invoke is not implemented" |
| ); |
| } |
| const rpcPromises = new Map(); |
| return { |
| ...transport, |
| connect({ onMessage, onDisconnection }) { |
| return transport.connect({ |
| onMessage(payload) { |
| if (payload.type === "custom" && payload.event === "vite:invoke") { |
| const data = payload.data; |
| if (data.id.startsWith("response:")) { |
| const invokeId = data.id.slice("response:".length); |
| const promise = rpcPromises.get(invokeId); |
| if (!promise) return; |
| if (promise.timeoutId) clearTimeout(promise.timeoutId); |
| rpcPromises.delete(invokeId); |
| const { error, result } = data.data; |
| if (error) { |
| promise.reject(error); |
| } else { |
| promise.resolve(result); |
| } |
| return; |
| } |
| } |
| onMessage(payload); |
| }, |
| onDisconnection |
| }); |
| }, |
| disconnect() { |
| rpcPromises.forEach((promise) => { |
| promise.reject( |
| new Error( |
| `transport was disconnected, cannot call ${JSON.stringify(promise.name)}` |
| ) |
| ); |
| }); |
| rpcPromises.clear(); |
| return transport.disconnect?.(); |
| }, |
| send(data) { |
| return transport.send(data); |
| }, |
| async invoke(name, data) { |
| const promiseId = nanoid(); |
| const wrappedData = { |
| type: "custom", |
| event: "vite:invoke", |
| data: { |
| name, |
| id: `send:${promiseId}`, |
| data |
| } |
| }; |
| const sendPromise = transport.send(wrappedData); |
| const { promise, resolve, reject } = promiseWithResolvers(); |
| const timeout = transport.timeout ?? 6e4; |
| let timeoutId; |
| if (timeout > 0) { |
| timeoutId = setTimeout(() => { |
| rpcPromises.delete(promiseId); |
| reject( |
| new Error( |
| `transport invoke timed out after ${timeout}ms (data: ${JSON.stringify(wrappedData)})` |
| ) |
| ); |
| }, timeout); |
| timeoutId?.unref?.(); |
| } |
| rpcPromises.set(promiseId, { resolve, reject, name, timeoutId }); |
| if (sendPromise) { |
| sendPromise.catch((err) => { |
| clearTimeout(timeoutId); |
| rpcPromises.delete(promiseId); |
| reject(err); |
| }); |
| } |
| try { |
| return await promise; |
| } catch (err) { |
| throw reviveInvokeError(err); |
| } |
| } |
| }; |
| }; |
| const normalizeModuleRunnerTransport = (transport) => { |
| const invokeableTransport = createInvokeableTransport(transport); |
| let isConnected = !invokeableTransport.connect; |
| let connectingPromise; |
| return { |
| ...transport, |
| ...invokeableTransport.connect ? { |
| async connect(onMessage) { |
| if (isConnected) return; |
| if (connectingPromise) { |
| await connectingPromise; |
| return; |
| } |
| const maybePromise = invokeableTransport.connect({ |
| onMessage: onMessage ?? (() => { |
| }), |
| onDisconnection() { |
| isConnected = false; |
| } |
| }); |
| if (maybePromise) { |
| connectingPromise = maybePromise; |
| await connectingPromise; |
| connectingPromise = void 0; |
| } |
| isConnected = true; |
| } |
| } : {}, |
| ...invokeableTransport.disconnect ? { |
| async disconnect() { |
| if (!isConnected) return; |
| if (connectingPromise) { |
| await connectingPromise; |
| } |
| isConnected = false; |
| await invokeableTransport.disconnect(); |
| } |
| } : {}, |
| async send(data) { |
| if (!invokeableTransport.send) return; |
| if (!isConnected) { |
| if (connectingPromise) { |
| await connectingPromise; |
| } else { |
| throw new Error("send was called before connect"); |
| } |
| } |
| await invokeableTransport.send(data); |
| }, |
| async invoke(name, data) { |
| if (!isConnected) { |
| if (connectingPromise) { |
| await connectingPromise; |
| } else { |
| throw new Error("invoke was called before connect"); |
| } |
| } |
| return invokeableTransport.invoke(name, data); |
| } |
| }; |
| }; |
| const createWebSocketModuleRunnerTransport = (options) => { |
| const pingInterval = options.pingInterval ?? 3e4; |
| let ws; |
| let pingIntervalId; |
| return { |
| async connect({ onMessage, onDisconnection }) { |
| const socket = options.createConnection(); |
| socket.addEventListener("message", async ({ data }) => { |
| onMessage(JSON.parse(data)); |
| }); |
| let isOpened = socket.readyState === socket.OPEN; |
| if (!isOpened) { |
| await new Promise((resolve, reject) => { |
| socket.addEventListener( |
| "open", |
| () => { |
| isOpened = true; |
| resolve(); |
| }, |
| { once: true } |
| ); |
| socket.addEventListener("close", async () => { |
| if (!isOpened) { |
| reject(new Error("WebSocket closed without opened.")); |
| return; |
| } |
| onMessage({ |
| type: "custom", |
| event: "vite:ws:disconnect", |
| data: { webSocket: socket } |
| }); |
| onDisconnection(); |
| }); |
| }); |
| } |
| onMessage({ |
| type: "custom", |
| event: "vite:ws:connect", |
| data: { webSocket: socket } |
| }); |
| ws = socket; |
| pingIntervalId = setInterval(() => { |
| if (socket.readyState === socket.OPEN) { |
| socket.send(JSON.stringify({ type: "ping" })); |
| } |
| }, pingInterval); |
| }, |
| disconnect() { |
| clearInterval(pingIntervalId); |
| ws?.close(); |
| }, |
| send(data) { |
| ws.send(JSON.stringify(data)); |
| } |
| }; |
| }; |
|
|
| function createHMRHandler(handler) { |
| const queue = new Queue(); |
| return (payload) => queue.enqueue(() => handler(payload)); |
| } |
| class Queue { |
| constructor() { |
| this.queue = []; |
| this.pending = false; |
| } |
| enqueue(promise) { |
| return new Promise((resolve, reject) => { |
| this.queue.push({ |
| promise, |
| resolve, |
| reject |
| }); |
| this.dequeue(); |
| }); |
| } |
| dequeue() { |
| if (this.pending) { |
| return false; |
| } |
| const item = this.queue.shift(); |
| if (!item) { |
| return false; |
| } |
| this.pending = true; |
| item.promise().then(item.resolve).catch(item.reject).finally(() => { |
| this.pending = false; |
| this.dequeue(); |
| }); |
| return true; |
| } |
| } |
|
|
| const hmrConfigName = __HMR_CONFIG_NAME__; |
| const base$1 = __BASE__ || "/"; |
| function h(e, attrs = {}, ...children) { |
| const elem = document.createElement(e); |
| for (const [k, v] of Object.entries(attrs)) { |
| elem.setAttribute(k, v); |
| } |
| elem.append(...children); |
| return elem; |
| } |
| const templateStyle = ( |
| |
| ` |
| :host { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: 99999; |
| --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 { |
| 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); |
| } |
| |
| .window { |
| font-family: var(--monospace); |
| line-height: 1.5; |
| max-width: 80vw; |
| color: var(--window-color); |
| box-sizing: border-box; |
| margin: 30px auto; |
| padding: 2.5vh 4vw; |
| position: relative; |
| 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; |
| 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; |
| } |
| |
| pre.frame::-webkit-scrollbar { |
| display: block; |
| height: 5px; |
| } |
| |
| pre.frame::-webkit-scrollbar-thumb { |
| background: #999; |
| border-radius: 5px; |
| } |
| |
| pre.frame { |
| scrollbar-width: thin; |
| } |
| |
| .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; |
| line-height: 1.8; |
| } |
| |
| code { |
| font-size: 13px; |
| font-family: var(--monospace); |
| color: var(--yellow); |
| } |
| |
| .file-link { |
| text-decoration: underline; |
| cursor: pointer; |
| } |
| |
| kbd { |
| line-height: 1.5; |
| font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
| font-size: 0.75rem; |
| font-weight: 700; |
| background-color: rgb(38, 40, 44); |
| color: rgb(166, 167, 171); |
| padding: 0.15rem 0.3rem; |
| border-radius: 0.25rem; |
| border-width: 0.0625rem 0.0625rem 0.1875rem; |
| border-style: solid; |
| border-color: rgb(54, 57, 64); |
| border-image: initial; |
| } |
| ` |
| ); |
| const createTemplate = () => 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; |
| const { HTMLElement = class { |
| } } = globalThis; |
| class ErrorOverlay extends HTMLElement { |
| constructor(err, links = true) { |
| super(); |
| this.root = this.attachShadow({ mode: "open" }); |
| this.root.appendChild(createTemplate()); |
| 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] = (err.loc?.file || err.id || "unknown file").split(`?`); |
| if (err.loc) { |
| 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, links); |
| this.root.querySelector(".window").addEventListener("click", (e) => { |
| e.stopPropagation(); |
| }); |
| this.addEventListener("click", () => { |
| this.close(); |
| }); |
| this.closeOnEsc = (e) => { |
| if (e.key === "Escape" || e.code === "Escape") { |
| this.close(); |
| } |
| }; |
| document.addEventListener("keydown", this.closeOnEsc); |
| } |
| text(selector, text, linkFiles = false) { |
| const el = this.root.querySelector(selector); |
| if (!linkFiles) { |
| el.textContent = text; |
| } else { |
| let curIndex = 0; |
| let match; |
| fileRE.lastIndex = 0; |
| while (match = fileRE.exec(text)) { |
| const { 0: file, index } = match; |
| 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( |
| new URL( |
| `${base$1}__open-in-editor?file=${encodeURIComponent(file)}`, |
| import.meta.url |
| ) |
| ); |
| }; |
| el.appendChild(link); |
| curIndex += frag.length + file.length; |
| } |
| } |
| } |
| close() { |
| this.parentNode?.removeChild(this); |
| document.removeEventListener("keydown", this.closeOnEsc); |
| } |
| } |
| const overlayId = "vite-error-overlay"; |
| const { customElements } = globalThis; |
| if (customElements && !customElements.get(overlayId)) { |
| customElements.define(overlayId, ErrorOverlay); |
| } |
|
|
| console.debug("[vite] connecting..."); |
| const importMetaUrl = new URL(import.meta.url); |
| const serverHost = __SERVER_HOST__; |
| const socketProtocol = __HMR_PROTOCOL__ || (importMetaUrl.protocol === "https:" ? "wss" : "ws"); |
| const hmrPort = __HMR_PORT__; |
| const socketHost = `${__HMR_HOSTNAME__ || importMetaUrl.hostname}:${hmrPort || importMetaUrl.port}${__HMR_BASE__}`; |
| const directSocketHost = __HMR_DIRECT_TARGET__; |
| const base = __BASE__ || "/"; |
| const hmrTimeout = __HMR_TIMEOUT__; |
| const wsToken = __WS_TOKEN__; |
| const transport = normalizeModuleRunnerTransport( |
| (() => { |
| let wsTransport = createWebSocketModuleRunnerTransport({ |
| createConnection: () => new WebSocket( |
| `${socketProtocol}://${socketHost}?token=${wsToken}`, |
| "vite-hmr" |
| ), |
| pingInterval: hmrTimeout |
| }); |
| return { |
| async connect(handlers) { |
| try { |
| await wsTransport.connect(handlers); |
| } catch (e) { |
| if (!hmrPort) { |
| wsTransport = createWebSocketModuleRunnerTransport({ |
| createConnection: () => new WebSocket( |
| `${socketProtocol}://${directSocketHost}?token=${wsToken}`, |
| "vite-hmr" |
| ), |
| pingInterval: hmrTimeout |
| }); |
| try { |
| await wsTransport.connect(handlers); |
| console.info( |
| "[vite] Direct websocket connection fallback. Check out https://vite.dev/config/server-options.html#server-hmr to remove the previous connection error." |
| ); |
| } catch (e2) { |
| if (e2 instanceof Error && e2.message.includes("WebSocket closed without opened.")) { |
| const currentScriptHostURL = new URL(import.meta.url); |
| const currentScriptHost = currentScriptHostURL.host + currentScriptHostURL.pathname.replace(/@vite\/client$/, ""); |
| console.error( |
| `[vite] failed to connect to websocket. |
| your current setup: |
| (browser) ${currentScriptHost} <--[HTTP]--> ${serverHost} (server) |
| (browser) ${socketHost} <--[WebSocket (failing)]--> ${directSocketHost} (server) |
| Check out your Vite / network configuration and https://vite.dev/config/server-options.html#server-hmr .` |
| ); |
| } |
| } |
| return; |
| } |
| console.error(`[vite] failed to connect to websocket (${e}). `); |
| throw e; |
| } |
| }, |
| async disconnect() { |
| await wsTransport.disconnect(); |
| }, |
| send(data) { |
| wsTransport.send(data); |
| } |
| }; |
| })() |
| ); |
| let willUnload = false; |
| if (typeof window !== "undefined") { |
| window.addEventListener("beforeunload", () => { |
| willUnload = true; |
| }); |
| } |
| function cleanUrl(pathname) { |
| const url = new URL(pathname, "http://vite.dev"); |
| url.searchParams.delete("direct"); |
| return url.pathname + url.search; |
| } |
| let isFirstUpdate = true; |
| const outdatedLinkTags = new WeakSet(); |
| const debounceReload = (time) => { |
| let timer; |
| return () => { |
| if (timer) { |
| clearTimeout(timer); |
| timer = null; |
| } |
| timer = setTimeout(() => { |
| location.reload(); |
| }, time); |
| }; |
| }; |
| const pageReload = debounceReload(50); |
| const hmrClient = new HMRClient( |
| { |
| error: (err) => console.error("[vite]", err), |
| debug: (...msg) => console.debug("[vite]", ...msg) |
| }, |
| transport, |
| async function importUpdatedModule({ |
| acceptedPath, |
| timestamp, |
| explicitImportRequired, |
| isWithinCircularImport |
| }) { |
| const [acceptedPathWithoutQuery, query] = acceptedPath.split(`?`); |
| const importPromise = import( |
| |
| base + acceptedPathWithoutQuery.slice(1) + `?${explicitImportRequired ? "import&" : ""}t=${timestamp}${query ? `&${query}` : ""}` |
| ); |
| if (isWithinCircularImport) { |
| importPromise.catch(() => { |
| console.info( |
| `[hmr] ${acceptedPath} failed to apply HMR as it's within a circular import. Reloading page to reset the execution order. To debug and break the circular import, you can run \`vite --debug hmr\` to log the circular dependency path if a file change triggered it.` |
| ); |
| pageReload(); |
| }); |
| } |
| return await importPromise; |
| } |
| ); |
| transport.connect(createHMRHandler(handleMessage)); |
| async function handleMessage(payload) { |
| switch (payload.type) { |
| case "connected": |
| console.debug(`[vite] connected.`); |
| break; |
| case "update": |
| await hmrClient.notifyListeners("vite:beforeUpdate", payload); |
| if (hasDocument) { |
| if (isFirstUpdate && hasErrorOverlay()) { |
| location.reload(); |
| return; |
| } else { |
| if (enableOverlay) { |
| clearErrorOverlay(); |
| } |
| isFirstUpdate = false; |
| } |
| } |
| await Promise.all( |
| payload.updates.map(async (update) => { |
| if (update.type === "js-update") { |
| return hmrClient.queueUpdate(update); |
| } |
| const { path, timestamp } = update; |
| const searchUrl = cleanUrl(path); |
| const el = Array.from( |
| document.querySelectorAll("link") |
| ).find( |
| (e) => !outdatedLinkTags.has(e) && cleanUrl(e.href).includes(searchUrl) |
| ); |
| if (!el) { |
| return; |
| } |
| const newPath = `${base}${searchUrl.slice(1)}${searchUrl.includes("?") ? "&" : "?"}t=${timestamp}`; |
| return new Promise((resolve) => { |
| const newLinkTag = el.cloneNode(); |
| newLinkTag.href = new URL(newPath, el.href).href; |
| const removeOldEl = () => { |
| el.remove(); |
| console.debug(`[vite] css hot updated: ${searchUrl}`); |
| resolve(); |
| }; |
| newLinkTag.addEventListener("load", removeOldEl); |
| newLinkTag.addEventListener("error", removeOldEl); |
| outdatedLinkTags.add(el); |
| el.after(newLinkTag); |
| }); |
| }) |
| ); |
| await hmrClient.notifyListeners("vite:afterUpdate", payload); |
| break; |
| case "custom": { |
| await hmrClient.notifyListeners(payload.event, payload.data); |
| if (payload.event === "vite:ws:disconnect") { |
| if (hasDocument && !willUnload) { |
| console.log(`[vite] server connection lost. Polling for restart...`); |
| const socket = payload.data.webSocket; |
| const url = new URL(socket.url); |
| url.search = ""; |
| await waitForSuccessfulPing(url.href); |
| location.reload(); |
| } |
| } |
| break; |
| } |
| case "full-reload": |
| await hmrClient.notifyListeners("vite:beforeFullReload", payload); |
| if (hasDocument) { |
| if (payload.path && payload.path.endsWith(".html")) { |
| const pagePath = decodeURI(location.pathname); |
| const payloadPath = base + payload.path.slice(1); |
| if (pagePath === payloadPath || payload.path === "/index.html" || pagePath.endsWith("/") && pagePath + "index.html" === payloadPath) { |
| pageReload(); |
| } |
| return; |
| } else { |
| pageReload(); |
| } |
| } |
| break; |
| case "prune": |
| await hmrClient.notifyListeners("vite:beforePrune", payload); |
| await hmrClient.prunePaths(payload.paths); |
| break; |
| case "error": { |
| await hmrClient.notifyListeners("vite:error", payload); |
| if (hasDocument) { |
| const err = payload.err; |
| if (enableOverlay) { |
| createErrorOverlay(err); |
| } else { |
| console.error( |
| `[vite] Internal Server Error |
| ${err.message} |
| ${err.stack}` |
| ); |
| } |
| } |
| break; |
| } |
| case "ping": |
| break; |
| default: { |
| const check = payload; |
| return check; |
| } |
| } |
| } |
| const enableOverlay = __HMR_ENABLE_OVERLAY__; |
| const hasDocument = "document" in globalThis; |
| function createErrorOverlay(err) { |
| clearErrorOverlay(); |
| const { customElements } = globalThis; |
| if (customElements) { |
| const ErrorOverlayConstructor = customElements.get(overlayId); |
| document.body.appendChild(new ErrorOverlayConstructor(err)); |
| } |
| } |
| function clearErrorOverlay() { |
| document.querySelectorAll(overlayId).forEach((n) => n.close()); |
| } |
| function hasErrorOverlay() { |
| return document.querySelectorAll(overlayId).length; |
| } |
| async function waitForSuccessfulPing(socketUrl, ms = 1e3) { |
| async function ping() { |
| const socket = new WebSocket(socketUrl, "vite-ping"); |
| return new Promise((resolve) => { |
| function onOpen() { |
| resolve(true); |
| close(); |
| } |
| function onError() { |
| resolve(false); |
| close(); |
| } |
| function close() { |
| socket.removeEventListener("open", onOpen); |
| socket.removeEventListener("error", onError); |
| socket.close(); |
| } |
| socket.addEventListener("open", onOpen); |
| socket.addEventListener("error", onError); |
| }); |
| } |
| if (await ping()) { |
| return; |
| } |
| await wait(ms); |
| while (true) { |
| if (document.visibilityState === "visible") { |
| if (await ping()) { |
| break; |
| } |
| await wait(ms); |
| } else { |
| await waitForWindowShow(); |
| } |
| } |
| } |
| function wait(ms) { |
| return new Promise((resolve) => setTimeout(resolve, ms)); |
| } |
| function waitForWindowShow() { |
| return new Promise((resolve) => { |
| const onChange = async () => { |
| if (document.visibilityState === "visible") { |
| resolve(); |
| document.removeEventListener("visibilitychange", onChange); |
| } |
| }; |
| document.addEventListener("visibilitychange", onChange); |
| }); |
| } |
| const sheetsMap = new Map(); |
| if ("document" in globalThis) { |
| document.querySelectorAll("style[data-vite-dev-id]").forEach((el) => { |
| sheetsMap.set(el.getAttribute("data-vite-dev-id"), el); |
| }); |
| } |
| const cspNonce = "document" in globalThis ? document.querySelector("meta[property=csp-nonce]")?.nonce : void 0; |
| let lastInsertedStyle; |
| function updateStyle(id, content) { |
| let style = sheetsMap.get(id); |
| if (!style) { |
| style = document.createElement("style"); |
| style.setAttribute("type", "text/css"); |
| style.setAttribute("data-vite-dev-id", id); |
| style.textContent = content; |
| if (cspNonce) { |
| style.setAttribute("nonce", cspNonce); |
| } |
| if (!lastInsertedStyle) { |
| document.head.appendChild(style); |
| setTimeout(() => { |
| lastInsertedStyle = void 0; |
| }, 0); |
| } else { |
| lastInsertedStyle.insertAdjacentElement("afterend", style); |
| } |
| lastInsertedStyle = style; |
| } else { |
| style.textContent = content; |
| } |
| sheetsMap.set(id, style); |
| } |
| function removeStyle(id) { |
| const style = sheetsMap.get(id); |
| if (style) { |
| document.head.removeChild(style); |
| sheetsMap.delete(id); |
| } |
| } |
| function createHotContext(ownerPath) { |
| return new HMRContext(hmrClient, ownerPath); |
| } |
| function injectQuery(url, queryToInject) { |
| if (url[0] !== "." && url[0] !== "/") { |
| return url; |
| } |
| const pathname = url.replace(/[?#].*$/, ""); |
| const { search, hash } = new URL(url, "http://vite.dev"); |
| return `${pathname}?${queryToInject}${search ? `&` + search.slice(1) : ""}${hash || ""}`; |
| } |
|
|
| export { ErrorOverlay, createHotContext, injectQuery, removeStyle, updateStyle }; |
|
|