fix: open-in-editor base url, deprecated openInEditorHost option (#86)

Author: webfansplz

README.md

@@ -134,9 +134,10 @@ interface VitePluginInspectorOptions {
   appendTo?: string | RegExp
 
   /**
-  * Customize openInEditor host (e.g. http://localhost:3000)
-  * @default false
-  */
+   * Customize openInEditor host (e.g. http://localhost:3000)
+   * @default false
+   * @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
+   */
   openInEditorHost?: string | false
 
   /**

packages/core/README.md

@@ -134,9 +134,11 @@ interface VitePluginInspectorOptions {
   appendTo?: string | RegExp
 
   /**
-  * Customize openInEditor host (e.g. http://localhost:3000)
-  * @default false
-  */
+   * Customize openInEditor host (e.g. http://localhost:3000)
+   * @default false
+   * @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
+   *
+   */
   openInEditorHost?: string | false
 }
 ```

packages/core/src/Overlay.vue

@@ -1,12 +1,7 @@
 <script>
 import inspectorOptions from 'virtual:vue-inspector-options'
-const isClient = typeof window !== 'undefined'
-const importMetaUrl = isClient ? new URL(import.meta.url) : {}
-const protocol = inspectorOptions.serverOptions?.https ? 'https:' : importMetaUrl?.protocol
-const hostOpts = inspectorOptions.serverOptions?.host
-const host = (hostOpts && hostOpts !== true) ? hostOpts : importMetaUrl?.hostname
-const port = (hostOpts && hostOpts !== true) ? inspectorOptions.serverOptions?.port : importMetaUrl?.port
-const baseUrl = isClient ? (inspectorOptions.openInEditorHost || `${protocol}//${host}:${port}`) : ''
+
+const base = inspectorOptions.base
 
 const KEY_DATA = 'data-v-inspector'
 const KEY_IGNORE = 'data-v-inspector-ignore'
@@ -173,7 +168,11 @@ export default {
       e.stopImmediatePropagation()
       const { file, line, column } = params
       this.overlayVisible = false
-      this.openInEditor(baseUrl, file, line, column)
+      const url = new URL(
+        `${base}__open-in-editor?file=${encodeURIComponent(`${file}:${line}:${column}`)}`,
+        import.meta.url,
+      )
+      this.openInEditor(url)
     },
     updateLinkParams(e) {
       const { targetNode, params } = this.getTargetNode(e)
@@ -215,9 +214,11 @@ export default {
       /**
        * Vite built-in support
        * https://github.com/vitejs/vite/blob/d59e1acc2efc0307488364e9f2fad528ec57f204/packages/vite/src/node/server/index.ts#L569-L570
-       * */
+       */
+
+      const _url = baseUrl instanceof URL ? baseUrl : `${baseUrl}/__open-in-editor?file=${file}:${line}:${column}`
       const promise = fetch(
-        `${baseUrl}/__open-in-editor?file=${file}:${line}:${column}`,
+        _url,
         {
           mode: 'no-cors',
         },

packages/core/src/index.ts

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url'
 import fs from 'node:fs'
 import { bold, dim, green, yellow } from 'kolorist'
 import { normalizePath } from 'vite'
-import type { PluginOption, ResolvedConfig, ServerOptions } from 'vite'
+import type { PluginOption, ResolvedConfig } from 'vite'
 import MagicString from 'magic-string'
 import { compileSFCTemplate } from './compiler'
 import { idToFile, parseVueRequest } from './utils'
@@ -75,6 +75,7 @@ export interface VitePluginInspectorOptions {
   /**
    * Customize openInEditor host (e.g. http://localhost:3000)
    * @default false
+   * @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
    */
   openInEditorHost?: string | false
 
@@ -122,7 +123,6 @@ export const DEFAULT_INSPECTOR_OPTIONS: VitePluginInspectorOptions = {
   toggleButtonVisibility: 'active',
   toggleButtonPos: 'top-right',
   appendTo: '',
-  openInEditorHost: false,
   lazyLoad: false,
 } as const
 
@@ -132,7 +132,6 @@ function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPE
     ...DEFAULT_INSPECTOR_OPTIONS,
     ...options,
   }
-  let serverOptions: ServerOptions | undefined
   let config: ResolvedConfig
 
   const {
@@ -161,7 +160,7 @@ function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPE
 
       async load(id) {
         if (id === 'virtual:vue-inspector-options') {
-          return `export default ${JSON.stringify({ ...normalizedOptions, serverOptions })}`
+          return `export default ${JSON.stringify({ ...normalizedOptions, base: config.base })}`
         }
         else if (id.startsWith(inspectorPath)) {
           const { query } = parseVueRequest(id)
@@ -220,7 +219,6 @@ function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPE
       },
       configResolved(resolvedConfig) {
         config = resolvedConfig
-        serverOptions = resolvedConfig.server
       },
     },
     {

packages/playground/vue3/vite.config.ts

@@ -10,7 +10,6 @@ export default defineConfig({
     VueJsx(),
     Inspector({
       enabled: true,
-      openInEditorHost: 'http://localhost:5173',
       toggleButtonVisibility: 'always',
     }),
     Inspect(),

packages/unplugin/README.md

@@ -134,9 +134,11 @@ interface VitePluginInspectorOptions {
   appendTo?: string | RegExp
 
   /**
-  * Customize openInEditor host (e.g. http://localhost:3000)
-  * @default false
-  */
+   * Customize openInEditor host (e.g. http://localhost:3000)
+   * @default false
+   * @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
+   *
+   */
   openInEditorHost?: string | false
 }
 ```