feat: plugins page

Author: webfansplz

packages/vite/src/app/app.vue

@@ -27,6 +27,11 @@ useSideNav(() => {
       icon: 'i-ph-graph-duotone',
       to: '/graph',
     },
+    {
+      title: 'Plugins',
+      icon: 'i-ph-plugs-duotone',
+      to: '/plugins',
+    },
   ]
 })
 </script>

packages/vite/src/app/components/chart/NavBreadcrumb.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts" generic="T extends { id: string; text?: string; parent?: T }">
+import type { GraphBaseOptions } from 'nanovis'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  selected?: T
+  options: GraphBaseOptions<any>
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', node: T | null): void
+}>()
+
+const parentStack = computed(() => {
+  const stack: T[] = []
+  let current = props.selected
+  while (current) {
+    stack.unshift(current)
+    current = current.parent
+  }
+  return stack
+})
+</script>
+
+<template>
+  <div flex="~ gap-1 items-center wrap">
+    <template v-for="node, idx of parentStack" :key="node.id">
+      <div v-if="idx > 0" i-ph-arrow-right-bold text-sm op-fade />
+      <button
+        hover="bg-active" rounded px1
+        @click="emit('select', node)"
+      >
+        <span>{{ node.text || node.id }}</span>
+      </button>
+    </template>
+  </div>
+</template>

packages/vite/src/app/components/data/ModuleDetailsLoader.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import type { DevToolsRpcServerFunctions } from '@vitejs/devtools-kit'
+import type { InspectModuleUpdatedPayload } from '~/composables/rpc'
 import type { ViteModuleListItem } from '~/types/modules'
 import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
-import { computed, nextTick, ref, watchEffect } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 import { useRpc } from '#imports'
+import { onInspectModuleUpdated } from '~/composables/rpc'
 import { settings } from '~/state/settings'
 
 type InspectQuery = Parameters<DevToolsRpcServerFunctions['vite:inspect:get-module-transform-info']>[0]
@@ -27,14 +30,40 @@ const flowNodeSelected = ref(false)
 
 const info = computed(() => props.modules.find(item => item.id === props.module))
 
-watchEffect(async () => {
+let transformRequestVersion = 0
+
+async function loadTransformInfo() {
   const query = props.query
   const moduleId = props.module
-  nextTick(async () => {
-    transformsLoading.value = true
-    transformInfo.value = await rpc.value.call('vite:inspect:get-module-transform-info', query, moduleId)
-    transformsLoading.value = false
-  })
+
+  const requestVersion = ++transformRequestVersion
+  transformsLoading.value = true
+  try {
+    const result = await rpc.value.call('vite:inspect:get-module-transform-info', query, moduleId)
+    if (requestVersion === transformRequestVersion)
+      transformInfo.value = result
+  }
+  finally {
+    if (requestVersion === transformRequestVersion)
+      transformsLoading.value = false
+  }
+}
+
+const reloadTransformInfo = useDebounceFn((payload: InspectModuleUpdatedPayload = {}) => {
+  if (!payload.ids || payload.ids.includes(props.module))
+    loadTransformInfo()
+}, 100)
+
+watch(
+  () => [props.query.vite, props.query.env, props.module],
+  () => {
+    loadTransformInfo()
+  },
+  { immediate: true },
+)
+
+onInspectModuleUpdated((payload) => {
+  reloadTransformInfo(payload)
 })
 
 function selectFlowNode(v: boolean) {