fix: open in editor should respect base (fix #142)

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 @@
 />
 <main class={`window ${collapsed ? 'window-collapsed' : ''}`} on:click|stopPropagation>
   <div class="list-scroll">
-    <List {checkerResults} ulStyle="margin-bottom: 36px;" />
+    <List {checkerResults} {base} ulStyle="margin-bottom: 36px;" />
   </div>
 </main>
 

packages/runtime/src/components/Checker.svelte

@@ -1,11 +1,12 @@
 <script>
   import Diagnostic from './Diagnostic.svelte'
   export let diagnostics
+  export let base
 </script>
 
 <ul>
   {#each diagnostics as diagnostic}
-    <Diagnostic {diagnostic} />
+    <Diagnostic {diagnostic} {base} />
   {/each}
 </ul>
 

packages/runtime/src/components/Diagnostic.svelte

@@ -1,5 +1,6 @@
 <script>
   export let diagnostic
+  export let base
 
   const checkerColorMap = {
     TypeScript: '#3178c6',
@@ -35,7 +36,7 @@
         const link = {}
         link.textContent = file
         link.onclick = () => {
-          fetch('/__open-in-editor?file=' + encodeURIComponent(file))
+          fetch(`${base}__open-in-editor?file=` + encodeURIComponent(file))
         }
         curIndex += frag.length + file.length
         links.push(link)

packages/runtime/src/components/List.svelte

@@ -2,12 +2,13 @@
   import Checker from './Checker.svelte'
   export let checkerResults
   export let ulStyle
+  export let base
 </script>
 
 <ul style={ulStyle}>
   {#each checkerResults as checkerResult, index}
     <li>
-      <Checker diagnostics={checkerResult.diagnostics} {index} />
+      <Checker diagnostics={checkerResult.diagnostics} {base} {index} />
     </li>
   {/each}
 </ul>

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()
 }

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
       }
     }
   }

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')};`

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,