diff --git a/packages/runtime/src/App.svelte b/packages/runtime/src/App.svelte index a3650cd7..adb4d951 100644 --- a/packages/runtime/src/App.svelte +++ b/packages/runtime/src/App.svelte @@ -3,6 +3,7 @@ import Badge from './components/Badge.svelte' export let overlayConfig = {} export let checkerResults + export let base const initialIsOpen = overlayConfig?.initialIsOpen ?? true $: collapsed = !initialIsOpen @@ -20,7 +21,7 @@ />
- +
diff --git a/packages/runtime/src/components/Checker.svelte b/packages/runtime/src/components/Checker.svelte index 9fa671f3..38f37cf7 100644 --- a/packages/runtime/src/components/Checker.svelte +++ b/packages/runtime/src/components/Checker.svelte @@ -1,11 +1,12 @@ diff --git a/packages/runtime/src/components/Diagnostic.svelte b/packages/runtime/src/components/Diagnostic.svelte index 4db942b3..dd7f6589 100644 --- a/packages/runtime/src/components/Diagnostic.svelte +++ b/packages/runtime/src/components/Diagnostic.svelte @@ -1,5 +1,6 @@ diff --git a/packages/runtime/src/main.js b/packages/runtime/src/main.js index 81884fef..c7310d41 100644 --- a/packages/runtime/src/main.js +++ b/packages/runtime/src/main.js @@ -2,17 +2,13 @@ import App from './App.svelte' let enableOverlay = true -import { - prepareListen, - listenToCustomMessage, - listenToReconnectMessage, - listenToConfigMessage, -} from './ws' +import { prepareListen, listenToCustomMessage, listenToReconnectMessage } from './ws' -let overlayEle = null let app = null +let overlayEle = null let checkerResultsStore = [] let overlayConfig = {} +let base = null class ErrorOverlay extends HTMLElement { constructor() { @@ -59,6 +55,7 @@ function updateErrorOverlay(payloads) { app = new App({ target: overlayEle.root, props: { + base, checkerResults: checkerResultsStore, overlayConfig, }, @@ -76,20 +73,19 @@ function resumeErrorOverlay(data) { updateErrorOverlay(payloadsToResume) } -function configOverlay(data) { - overlayConfig = data -} - function clearErrorOverlay() { document.querySelectorAll(overlayId).forEach((n) => n.close()) overlayEle = null app = null } -export function inject() { +export function inject(params) { + base = params.base + overlayConfig = params.overlayConfig const ws = prepareListen() + listenToCustomMessage(updateErrorOverlay) listenToReconnectMessage(resumeErrorOverlay) - listenToConfigMessage(configOverlay) + ws.start() } diff --git a/packages/runtime/src/ws.js b/packages/runtime/src/ws.js index 9d8201ea..96e71059 100644 --- a/packages/runtime/src/ws.js +++ b/packages/runtime/src/ws.js @@ -12,7 +12,6 @@ const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr') // NOTE: sync modification with packages/vite-plugin-checker/client/index.ts const WS_CHECKER_ERROR_EVENT = 'vite-plugin-checker:error' const WS_CHECKER_RECONNECT_EVENT = 'vite-plugin-checker:reconnect' -const WS_CHECKER_CONFIG_RUNTIME_EVENT = 'vite-plugin-checker:config-runtime' // #endregion const onCustomMessage = [] @@ -49,9 +48,6 @@ export function prepareListen() { case WS_CHECKER_RECONNECT_EVENT: onReconnectMessage.forEach((callbackfn) => callbackfn(data.data)) break - case WS_CHECKER_CONFIG_RUNTIME_EVENT: - onConfigMessage.forEach((callbackfn) => callbackfn(data.data)) - break } } } diff --git a/packages/vite-plugin-checker/src/client/index.ts b/packages/vite-plugin-checker/src/client/index.ts index 4369a4d6..13d1bdb4 100644 --- a/packages/vite-plugin-checker/src/client/index.ts +++ b/packages/vite-plugin-checker/src/client/index.ts @@ -6,7 +6,6 @@ export const RUNTIME_PUBLIC_PATH = '/@vite-plugin-checker-runtime' export const RUNTIME_FILE_PATH = require.resolve('../@runtime/main.js') export const WS_CHECKER_ERROR_EVENT = 'vite-plugin-checker:error' export const WS_CHECKER_RECONNECT_EVENT = 'vite-plugin-checker:reconnect' -export const WS_CHECKER_CONFIG_RUNTIME_EVENT = 'vite-plugin-checker:config-runtime' // #endregion export const runtimeCode = `${fs.readFileSync(RUNTIME_FILE_PATH, 'utf-8')};` diff --git a/packages/vite-plugin-checker/src/main.ts b/packages/vite-plugin-checker/src/main.ts index f2384c5d..67c072aa 100644 --- a/packages/vite-plugin-checker/src/main.ts +++ b/packages/vite-plugin-checker/src/main.ts @@ -6,12 +6,7 @@ import path from 'path' import { ConfigEnv, Plugin, ResolvedConfig } from 'vite' import { Checker } from './Checker' -import { - RUNTIME_PUBLIC_PATH, - runtimeCode, - WS_CHECKER_CONFIG_RUNTIME_EVENT, - WS_CHECKER_RECONNECT_EVENT, -} from './client/index' +import { RUNTIME_PUBLIC_PATH, runtimeCode, WS_CHECKER_RECONNECT_EVENT } from './client/index' import { ACTION_TYPES, BuildCheckBinStr, @@ -46,7 +41,7 @@ export default function Plugin(userConfig: UserPluginConfig): Plugin { const enableBuild = userConfig?.enableBuild ?? true const enableOverlay = userConfig?.overlay !== false const enableTerminal = userConfig?.terminal !== false - const overlayConfig = typeof userConfig?.overlay === 'object' ? userConfig?.overlay : null + const overlayConfig = typeof userConfig?.overlay === 'object' ? userConfig?.overlay : {} let resolvedRuntimePath = RUNTIME_PUBLIC_PATH let checkers: ServeAndBuildChecker[] = [] @@ -141,7 +136,11 @@ export default function Plugin(userConfig: UserPluginConfig): Plugin { { tag: 'script', attrs: { type: 'module' }, - children: `import { inject } from "${resolvedRuntimePath}"; inject();`, + children: `import { inject } from "${resolvedRuntimePath}"; +inject({ + overlayConfig: ${JSON.stringify(overlayConfig)}, + base: "${resolvedConfig?.base}", +});`, }, ] } @@ -174,13 +173,6 @@ export default function Plugin(userConfig: UserPluginConfig): Plugin { let latestOverlayErrors: OverlayErrorAction['payload'][] = new Array(checkers.length) // for dev mode (2/2) // Get the server instance and keep reference in a closure - if (overlayConfig) { - server.ws.send({ - type: 'custom', - event: WS_CHECKER_CONFIG_RUNTIME_EVENT, - data: overlayConfig, - }) - } checkers.forEach((checker, index) => { const { worker, configureServer: workerConfigureServer } = checker.serve workerConfigureServer({ root: server.config.root }) @@ -205,13 +197,6 @@ export default function Plugin(userConfig: UserPluginConfig): Plugin { connectedTimes++ // if connectedCount !== 1, means Vite is doing a full-reload, so we don't need to send overlay again if (connectedTimes > 1) { - if (overlayConfig) { - server.ws.send({ - type: 'custom', - event: WS_CHECKER_CONFIG_RUNTIME_EVENT, - data: overlayConfig, - }) - } server.ws.send({ type: 'custom', event: WS_CHECKER_RECONNECT_EVENT,