fix: respect open-in-editor host option (#281)

Author: webfansplz

packages/client/src/components/assets/AssetDetails.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useTimeAgo } from '@vueuse/core'
 import type { AssetInfo, CodeSnippet, ImageMeta } from '@vue/devtools-core'
-import { callViteServerAction, openInEditor, useDevToolsState } from '@vue/devtools-core'
+import { callViteServerAction, useDevToolsState } from '@vue/devtools-core'
 import { VueButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
+import { openInEditor } from '../../composables/open-in-editor'
 
 const props = defineProps<{
   modelValue: AssetInfo

packages/client/src/components/graph/GraphDrawer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { VueButton, VueDrawer, showVueNotification } from '@vue/devtools-ui'
-import { openInEditor, useDevToolsState } from '@vue/devtools-core'
+import { useDevToolsState } from '@vue/devtools-core'
+import { openInEditor } from '../../composables/open-in-editor'
 
 defineProps<{
   top?: HTMLElement

packages/client/src/components/pages/RoutesTable.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { VueBadge } from '@vue/devtools-ui'
 import type { RouteRecordNormalized } from 'vue-router'
-import { openInEditor, useDevToolsState } from '@vue/devtools-core'
+import { useDevToolsState } from '@vue/devtools-core'
+import { openInEditor } from '../../composables/open-in-editor'
 
 const props = defineProps<{
   pages: RouteRecordNormalized[]

packages/client/src/composables/open-in-editor.ts

@@ -1 +1,9 @@
+import { openInEditor as _openInEditor, callViteServerAction } from '@vue/devtools-core'
+
+const getOpenInEditorHost = callViteServerAction<string>('get-open-in-editor-host')
 export const vueInspectorDetected = ref(false)
+
+export const openInEditor = async (file: string) => {
+  const openInEditorHost = await getOpenInEditorHost()
+  return openInEditorHost ? _openInEditor(file, openInEditorHost) : _openInEditor(file)
+}

packages/client/src/pages/components.vue

@@ -6,7 +6,6 @@ import {
   inspectComponentInspector as inspectComponentInspectorAction,
   onInspectorStateUpdated,
   onInspectorTreeUpdated,
-  openInEditor,
   scrollToComponent as scrollToComponentAction,
   toggleComponentInspector as toggleComponentInspectorAction,
   updateInspectorTreeId,
@@ -19,6 +18,7 @@ import { parse } from '@vue/devtools-kit'
 
 import { VueIcon, VueInput, VTooltip as vTooltip } from '@vue/devtools-ui'
 import { Pane, Splitpanes } from 'splitpanes'
+import { openInEditor } from '../composables/open-in-editor'
 
 const inspectorId = 'components'
 const bridge = useDevToolsBridge()

packages/core/src/bridge-events/devtools-actions.ts

@@ -20,8 +20,8 @@ export const editInspectorState = defineDevToolsAction('devtools:edit-inspector-
   devtools.api.editInspectorState(payload)
 })
 
-export const openInEditor = defineDevToolsAction('devtools:open-in-editor', (devtools, file: string) => {
-  devtools.api.openInEditor({ file })
+export const openInEditor = defineDevToolsAction('devtools:open-in-editor', (devtools, file: string, baseUrl?: string) => {
+  devtools.api.openInEditor({ file, baseUrl })
 })
 
 export const getInspectorTree = defineDevToolsAction('devtools:inspector-tree', async (devtools, payload) => {

packages/devtools-kit/src/core/open-in-editor/index.ts

@@ -2,15 +2,15 @@ import { target } from '@vue/devtools-shared'
 import { devtoolsState } from '../../state'
 
 export interface OpenInEditorOptions {
+  baseUrl?: string
   file?: string
   line?: number
   column?: number
 }
 
 export function openInEditor(options: OpenInEditorOptions = {}) {
-  const { file, line = 0, column = 0 } = options
+  const { file, baseUrl = window.location.origin, line = 0, column = 0 } = options
   if (file) {
-    const baseUrl = window.location.origin
     if (devtoolsState.vitePluginDetected) {
       target.__VUE_INSPECTOR__.openInEditor(baseUrl, file, line, column)
     }

packages/vite/src/modules/get-config.ts

@@ -1,8 +1,11 @@
 import { defineViteServerAction } from '@vue/devtools-core'
 import type { ResolvedConfig } from 'vite'
 
-export function getViteConfig(config: ResolvedConfig) {
+export function getViteConfig(config: ResolvedConfig, pluginOptions) {
   defineViteServerAction('get-vite-root', () => {
     return config.root
   })
+  defineViteServerAction('get-open-in-editor-host', () => {
+    return pluginOptions.openInEditorHost
+  })
 }

packages/vite/src/vite.ts

@@ -92,7 +92,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
 
     // vite client <-> server messaging
     initViteServerContext(server)
-    getViteConfig(config)
+    getViteConfig(config, pluginOptions)
     setupGraphModule({
       rpc: inspect.api.rpc,
       server,