feat(vite): introducing component inspector option (#214)

packages/client/src/App.vue

@@ -74,6 +74,7 @@ const eyeDropper = useEyeDropper({})
 
 bridgeRpc?.isVueInspectorDetected?.()?.then(({ data }) => {
   if (data) {
+    vueInspectorDetected.value = true
     registerCommands(() =>
       [{
         id: 'action:vue-inspector',

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

@@ -16,7 +16,7 @@ const state = useDevToolsState()
 const asset = useVModel(props, 'modelValue', emit, { passive: true })
 
 const _openInEditor = openInEditor
-
+const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
 const imageMeta = computedAsync(() => {
   if (asset.value.type !== 'image')
     return undefined
@@ -132,7 +132,7 @@ const supportsPreview = computed(() => {
             <div flex="~ gap-1" w-full items-center>
               <FilepathItem :filepath="asset.filePath" text-left />
               <VueIcon
-                v-if="state.vitePluginDetected.value"
+                v-if="state.vitePluginDetected.value && _vueInspectorDetected"
                 v-tooltip="'Open in Editor'"
                 title="Open in Editor"
                 icon="i-carbon-launch"

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

@@ -12,7 +12,7 @@ const filterId = graphFilterNodeId
 const state = useDevToolsState()
 
 const _openInEditor = (path: string) => {
-  if (state.vitePluginDetected.value) {
+  if (state.vitePluginDetected.value && vueInspectorDetected.value) {
     openInEditor(path)
     return
   }

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

@@ -18,6 +18,7 @@ const sorted = computed(() => {
 })
 
 const _openInEditor = openInEditor
+const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
 const state = useDevToolsState()
 </script>
 
@@ -63,7 +64,7 @@ const state = useDevToolsState()
               />
               <div op0 group-hover:op100 flex="~ gap1">
                 <button
-                  v-if="(item.file || item.meta?.file) && state.vitePluginDetected.value"
+                  v-if="(item.file || item.meta?.file) && state.vitePluginDetected.value && _vueInspectorDetected"
                   text-sm op40 hover="op100 text-primary-400"
                   title="Open in editor"
                   @click="_openInEditor((item.file || item.meta?.file) as string)"

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

@@ -1,5 +1,6 @@
 import { useDevToolsBridgeRpc } from '@vue/devtools-core'
 
+export const vueInspectorDetected = ref(false)
 export function openInEditor(file: string) {
   const bridgeRpc = useDevToolsBridgeRpc()
   return bridgeRpc.openInEditor({

packages/client/src/pages/components.vue

@@ -11,6 +11,7 @@ const treeNode = ref<ComponentTreeNode[]>([])
 const activeComponentId = ref('')
 
 const _openInEditor = openInEditor
+const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
 
 // UX related state
 const loaded = ref(false)
@@ -281,7 +282,7 @@ const devtoolsState = useDevToolsState()
             />
 
             <VueIcon
-              v-if="selectedComponentFilePath && devtoolsState.vitePluginDetected.value"
+              v-if="selectedComponentFilePath && devtoolsState.vitePluginDetected.value && _vueInspectorDetected"
               v-tooltip="'Open in Editor'"
               title="Open in Editor"
               icon="i-carbon-launch"

packages/devtools-kit/src/core/vue-inspector/index.ts

@@ -19,6 +19,11 @@ export interface VueInspector {
   onUpdated: () => void
 }
 
+target.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ ??= true
+export function toggleComponentInspectorEnabled(enabled: boolean) {
+  target.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = enabled
+}
+
 function waitForInspectorInit(cb: () => void) {
   let total = 0
   const timer = setInterval(() => {
@@ -41,8 +46,11 @@ function setupInspector() {
   }
 }
 
-export function getVueInspector(): Promise<VueInspector> {
+export function getVueInspector(): Promise<VueInspector | null> {
   return new Promise((resolve) => {
+    if (!target.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__)
+      resolve(null)
+
     function setup() {
       setupInspector()
       resolve(target.__VUE_INSPECTOR__)

packages/devtools-kit/src/index.ts

@@ -2,6 +2,7 @@ import { devtoolsContext, devtoolsState, hook, initDevTools, onDevToolsClientCon
 import { addCustomTab } from './core/custom-tab'
 import { addCustomCommand, removeCustomCommand } from './core/custom-command'
 import { setupDevToolsPlugin } from './api/plugin'
+import { toggleComponentInspectorEnabled } from './core/vue-inspector'
 
 export type * from './core/component/types'
 export type * from './core/timeline/types'
@@ -31,4 +32,5 @@ export {
   addCustomCommand,
   removeCustomCommand,
   setupDevToolsPlugin,
+  toggleComponentInspectorEnabled,
 }

packages/devtools-kit/src/shared/util.ts

@@ -7,7 +7,8 @@ export function stringify<T extends object = Record<string, unknown>>(data: T) {
 }
 
 export function parse(data: string, revive = false) {
-  if (!data)
+  // eslint-disable-next-line eqeqeq
+  if (data == undefined)
     return {}
 
   return revive

packages/overlay/src/App.vue

@@ -121,7 +121,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
           <path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z" />
         </svg>
       </div>
-      <template v-if="devtools.state.vitePluginDetected">
+      <template v-if="devtools.state.vitePluginDetected && vueInspectorEnabled">
         <div class="vue-devtools__panel-content vue-devtools__panel-divider" />
         <div
           class="vue-devtools__anchor-btn vue-devtools__panel-content vue-devtools__inspector-button"

packages/playground/vite.config.ts

@@ -9,7 +9,9 @@ import VueI18n from '@intlify/unplugin-vue-i18n/vite'
 export default defineConfig({
   plugins: [
     vue(),
-    VueDevtools(),
+    VueDevtools({
+      // componentInspector: false,
+    }),
     // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
     VueI18n({
       runtimeOnly: true,

packages/vite/src/overlay.js

@@ -1,7 +1,7 @@
 import vueDevToolsOptions from 'virtual:vue-devtools-options'
 import { Bridge, prepareInjection, setDevToolsClientUrl } from '@vue/devtools-core'
 import { BROADCAST_CHANNEL_NAME } from '@vue/devtools-shared'
-import { addCustomTab, devtools } from '@vue/devtools-kit'
+import { addCustomTab, devtools, toggleComponentInspectorEnabled } from '@vue/devtools-kit'
 
 const overlayDir = `${vueDevToolsOptions.base || '/'}@id/virtual:vue-devtools-path:overlay`
 const body = document.getElementsByTagName('body')[0]
@@ -11,6 +11,8 @@ window.__VUE_DEVTOOLS_VITE_PLUGIN_DETECTED__ = true
 const devtoolsClientUrl = `${vueDevToolsOptions.clientHost || ''}${vueDevToolsOptions.base || '/'}__devtools__/`
 setDevToolsClientUrl(devtoolsClientUrl)
 
+toggleComponentInspectorEnabled(!!vueDevToolsOptions.componentInspector)
+
 devtools.init()
 
 // create vite inspect tab

packages/vite/src/vite.ts

@@ -8,6 +8,7 @@ import VueInspector from 'vite-plugin-vue-inspector'
 import { setupViteRPCServer } from '@vue/devtools-core'
 import { setupAssetsRPC, setupGraphRPC } from '@vue/devtools-core/server'
 import { bold, cyan, dim, green, yellow } from 'kolorist'
+import type { VitePluginInspectorOptions } from 'vite-plugin-vue-inspector'
 import { DIR_CLIENT } from './dir'
 
 type DeepRequired<T> = {
@@ -50,12 +51,20 @@ export interface VitePluginVueDevToolsOptions {
    * @default false
    */
   clientHost?: string | false
+
+  /**
+   * Enable Vue Component Inspector
+   *
+   * @default true
+   */
+  componentInspector?: boolean | VitePluginInspectorOptions
 }
 
 const defaultOptions: DeepRequired<VitePluginVueDevToolsOptions> = {
   appendTo: '',
   openInEditorHost: false,
   clientHost: false,
+  componentInspector: true,
 }
 
 function mergeOptions(options: VitePluginVueDevToolsOptions): DeepRequired<VitePluginVueDevToolsOptions> {
@@ -131,7 +140,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
     },
     async load(id) {
       if (id === 'virtual:vue-devtools-options')
-        return `export default ${JSON.stringify({ base: config.base, clientHost: pluginOptions.clientHost })}`
+        return `export default ${JSON.stringify({ base: config.base, clientHost: pluginOptions.clientHost, componentInspector: pluginOptions.componentInspector })}`
     },
     transform(code, id) {
       const { root, base } = config
@@ -168,15 +177,15 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
             },
           },
           // inject inspector script manually to ensure it's loaded after vue-devtools
-          {
+          pluginOptions.componentInspector && {
             tag: 'script',
             injectTo: 'head-prepend',
             attrs: {
               type: 'module',
               src: `${config.base || '/'}@id/virtual:vue-inspector-path:load.js`,
             },
           },
-        ],
+        ].filter(Boolean),
       }
     },
     async buildEnd() {
@@ -185,12 +194,15 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
 
   return [
     inspect as PluginOption,
-    VueInspector({
+    pluginOptions.componentInspector && VueInspector({
       toggleComboKey: '',
       toggleButtonVisibility: 'never',
+      ...typeof pluginOptions.componentInspector === 'boolean'
+        ? {}
+        : pluginOptions.componentInspector,
       openInEditorHost: pluginOptions.openInEditorHost,
       appendTo: pluginOptions.appendTo || 'manually',
     }) as PluginOption,
     plugin,
-  ]
+  ].filter(Boolean)
 }