fix: missing plugin settings panel (#610)

Author: webfansplz

packages/applet/src/composables/custom-inspector-state.ts

@@ -4,6 +4,7 @@ import type { InjectionKey, Ref } from 'vue'
 type CustomInspectorState = Partial<{
   homepage: string
   id: string
+  pluginId: string
   label: string
   logo: string
   timelineLayerIds: string[]

packages/applet/src/composables/custom-inspector.ts

@@ -8,6 +8,7 @@ export interface CustomInspectorType {
   icon: string
   packageName: string | undefined
   homepage: string | undefined
+  pluginId: string
 }
 
 export function useCustomInspector() {

packages/applet/src/modules/custom-inspector/components/Settings.vue

@@ -24,6 +24,6 @@ function update(_settings) {
     <DevToolsHeader :doc-link="customInspectState.homepage!">
       <Navbar />
     </DevToolsHeader>
-    <Settings :plugin-id="customInspectState.id!" :options="options" :values="values" @update="update" />
+    <Settings :plugin-id="customInspectState.pluginId!" :options="options" :values="values" @update="update" />
   </div>
 </template>

packages/applet/src/modules/custom-inspector/index.vue

@@ -12,12 +12,12 @@ import Timeline from './components/timeline/Index.vue'
 
 const props = defineProps<{
   id: string
+  pluginId: string
 }>()
 
 const emit = defineEmits(['loadError'])
 const inspectorState = createCustomInspectorStateContext()
 const loading = ref(false)
-
 const pluginSettings = ref(null)
 provide('pluginSettings', pluginSettings)
 
@@ -67,14 +67,14 @@ function getInspectorInfo() {
         label: payload?.label,
         logo: payload?.logo,
         timelineLayerIds: payload?.timelineLayers.map(item => item.id),
+        pluginId: props.pluginId,
       }
       inspectorState.value = state
       restoreRouter()
       loading.value = false
     })
-    rpc.value.getPluginSettings(props.id).then((settings) => {
+    rpc.value.getPluginSettings(props.pluginId).then((settings) => {
       if (settings.options) {
-      // @ts-expect-error skip type check
         pluginSettings.value = settings
       }
       else {

packages/applet/src/modules/pinia/components/Settings.vue

@@ -23,6 +23,6 @@ function update(_settings) {
     <DevToolsHeader doc-link="https://pinia.vuejs.org/" github-repo-link="https://github.com/vuejs/pinia">
       <Navbar />
     </DevToolsHeader>
-    <Settings :plugin-id="inspectorId" :options="options" :values="values" @update="update" />
+    <Settings plugin-id="dev.esm.pinia" :options="options" :values="values" @update="update" />
   </div>
 </template>

packages/applet/src/modules/pinia/index.vue

@@ -44,9 +44,9 @@ const { VirtualRouterView, restoreRouter } = registerVirtualRouter(routes, {
 })
 
 onRpcConnected(() => {
-  rpc.value.getPluginSettings('pinia').then((settings) => {
+  const pluginDescriptorId = 'dev.esm.pinia'
+  rpc.value.getPluginSettings(pluginDescriptorId).then((settings) => {
     if (settings.options) {
-      // @ts-expect-error skip type check
       pluginSettings.value = settings
     }
     else {

packages/client/src/components/common/SplitScreen.vue

@@ -14,6 +14,7 @@ const router = useRouter()
 const route = useRoute()
 const PageComponent = shallowRef()
 const customTabName = ref<string | null>(null)
+const customPluginId = ref<string | null>(null)
 const customTabType = ref<'custom-tab' | 'custom-inspector' | null>(null)
 
 function isMatchedWithRoute(tab?: typeof flattenedTabs['value'][number]) {
@@ -58,6 +59,7 @@ watch(
     }
     if ((tab as ModuleBuiltinTab).path.startsWith(CUSTOM_INSPECTOR_TAB_VIEW)) {
       customTabName.value = tab.name
+      customPluginId.value = tab.pluginId
       customTabType.value = 'custom-inspector'
       return
     }
@@ -108,7 +110,7 @@ const showGridPanel = ref(false)
     </div>
     <template v-if="customTabName && currentTab">
       <CustomTabComponent v-if="customTabType === 'custom-tab'" :tab="currentTab as CustomTab" class="h-[calc(100%-50px)]" iframe-inline of-auto />
-      <CustomInspectorComponent v-else :id="customTabName" />
+      <CustomInspectorComponent v-else-if="customPluginId" :id="customTabName" :plugin-id="customPluginId!" />
     </template>
     <div v-else-if="PageComponent && currentTab" of-auto class="h-[calc(100%-50px)]">
       <component :is="PageComponent" :key="`tab-${currentTab.name}`" />

packages/client/src/composables/custom-inspector-tabs.ts

@@ -16,6 +16,7 @@ export function useCustomInspectorTabs() {
         title: inspector.label,
         path: `${CUSTOM_INSPECTOR_TAB_VIEW}/${inspector.id}`,
         category: 'modules',
+        pluginId: inspector.pluginId,
       }
     })
   })

packages/client/src/pages/custom-inspector-tab-view.vue

@@ -5,7 +5,9 @@ import '@vue/devtools-applet/style.css'
 const route = useRoute()
 const router = useRouter()
 const loadError = ref(false)
-
+const customInspectorTabs = useCustomInspectorTabs()
+// @ts-expect-error skip type check
+const pluginId = computed(() => customInspectorTabs.value.find(tab => tab.name === route.params.name)?.pluginId)
 function onLoadError() {
   loadError.value = true
   const timer = setTimeout(() => {
@@ -27,5 +29,5 @@ function onLoadError() {
       </p>
     </div>
   </div>
-  <CustomInspectorPanel v-else :id="route.params.name" @load-error="onLoadError" />
+  <CustomInspectorPanel v-else-if="!loadError && pluginId" :id="route.params.name as string" :plugin-id="pluginId" @load-error="onLoadError" />
 </template>

packages/devtools-kit/src/api/v6/index.ts

@@ -1,6 +1,7 @@
 import { getPluginSettings, initPluginSettings } from '../../core/plugin/plugin-settings'
 import { DevToolsContextHookKeys, DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHooks } from '../../ctx/hook'
 import { getActiveInspectors } from '../../ctx/inspector'
+
 import { devtoolsHooks } from '../../hook'
 import { DevToolsHooks } from '../../types'
 import type { DevtoolsContext } from '../../ctx'
@@ -110,9 +111,7 @@ export class DevToolsV6PluginAPI {
 
   // settings
   getSettings(pluginId?: string) {
-    const inspector = getActiveInspectors().find(i => i.packageName === this.plugin.descriptor.packageName)
-
-    return getPluginSettings((pluginId ?? inspector?.id)!, this.plugin.descriptor.settings)
+    return getPluginSettings((pluginId ?? this.plugin.descriptor.id)!, this.plugin.descriptor.settings)
   }
 
   // utilities

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

@@ -19,6 +19,7 @@ import { createDevToolsHook, hook, subscribeDevToolsHook } from '../hook'
 import { DevToolsHooks } from '../types'
 import { createAppRecord, removeAppRecordId } from './app'
 import { callDevToolsPluginSetupFn, createComponentsDevToolsPlugin, registerDevToolsPlugin, removeRegisteredPluginApp, setupDevToolsPlugin } from './plugin'
+import { initPluginSettings } from './plugin/plugin-settings'
 import { normalizeRouterInfo } from './router'
 
 export function initDevTools() {
@@ -61,7 +62,9 @@ export function initDevTools() {
   hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
     addDevToolsPluginToBuffer(pluginDescriptor, setupFn)
     const { app } = activeAppRecord ?? {}
-
+    if (pluginDescriptor.settings) {
+      initPluginSettings(pluginDescriptor.id, pluginDescriptor.settings)
+    }
     if (!app)
       return
 

packages/devtools-kit/src/core/plugin/index.ts

@@ -1,7 +1,6 @@
 import { target } from '@vue/devtools-shared'
 import { DevToolsPluginAPI } from '../../api'
-import { initPluginSettings } from '../../core/plugin/plugin-settings'
-import { devtoolsContext, devtoolsInspector, devtoolsPluginBuffer } from '../../ctx'
+import { devtoolsContext, devtoolsPluginBuffer } from '../../ctx'
 import { hook } from '../../hook'
 import { App, PluginDescriptor, PluginSetupFunction } from '../../types'
 
@@ -34,13 +33,6 @@ export function callDevToolsPluginSetupFn(plugin: [PluginDescriptor, PluginSetup
   }
 
   setupFn(api)
-  if (pluginDescriptor.settings) {
-    const inspector = devtoolsInspector.find(inspector => inspector.descriptor.id === pluginDescriptor.id)
-    if (inspector) {
-      inspector.descriptor.settings = pluginDescriptor.settings
-      initPluginSettings(inspector.options.id, pluginDescriptor.settings)
-    }
-  }
 }
 
 export function removeRegisteredPluginApp(app: App) {

packages/devtools-kit/src/core/plugin/plugin-settings.ts

@@ -1,4 +1,4 @@
-import { devtoolsContext, DevToolsV6PluginAPIHookKeys, getInspector } from '../../ctx'
+import { devtoolsContext, DevToolsV6PluginAPIHookKeys } from '../../ctx'
 import { devtoolsPluginBuffer } from '../../ctx/plugin'
 import { PluginDescriptor } from '../../types'
 
@@ -16,8 +16,7 @@ function getPluginLocalKey(pluginId: string) {
 }
 
 export function getPluginSettingsOptions(pluginId: string) {
-  const descriptor = getInspector(pluginId)?.descriptor
-  const item = devtoolsPluginBuffer.find(item => item[0].id === descriptor?.id)?.[0] ?? null
+  const item = devtoolsPluginBuffer.find(item => item[0].id === pluginId && !!(item[0]?.settings))?.[0] ?? null
   return item?.settings ?? null
 }
 

packages/devtools-kit/src/ctx/inspector.ts

@@ -53,6 +53,7 @@ export function getActiveInspectors() {
         icon: `custom-ic-baseline-${options?.icon?.replace(/_/g, '-')}`,
         packageName: descriptor.packageName,
         homepage: descriptor.homepage,
+        pluginId: descriptor.id,
       }
     })
 }