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 @@
{#each diagnostics as diagnostic}
-
+
{/each}
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 @@
{#each checkerResults as checkerResult, index}
-
-
+
{/each}
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,