feat: navigation on resolveId

Author: antfu

packages/devtools/src/app/components/display/ModuleId.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { SessionContext } from '../../types/data'
+import { NuxtLink } from '#components'
 import { Tooltip } from 'floating-vue'
 import { relative } from 'pathe'
 import { computed } from 'vue'
@@ -8,6 +10,8 @@ const props = withDefaults(
     id?: string
     badges?: boolean
     icon?: boolean
+    link?: boolean
+    session?: SessionContext
   }>(),
   {
     icon: true,
@@ -37,32 +41,37 @@ const containerClass = computed(() => {
 </script>
 
 <template>
-  <Tooltip
-    my-auto text-sm font-mono block w-full
-    :triggers="['hover']"
-    :delay="1200"
-    :disabled="(props.id?.length || 0) < 30"
-    placement="bottom-start"
+  <component
+    :is="link ? NuxtLink : 'div'"
+    :to="link ? { path: `/session/${session?.id}/flow`, query: { module: id } } : undefined"
   >
-    <div
-      v-if="id"
-      :class="containerClass"
+    <Tooltip
+      my-auto text-sm font-mono block w-full
+      :triggers="['hover']"
+      :delay="1200"
+      :disabled="(props.id?.length || 0) < 30"
+      placement="bottom-start"
     >
-      <DisplayFileIcon v-if="icon" :filename="id" mr1.5 />
-      <span>
-        <DisplayHighlightedPath :path="relativePath" />
-      </span>
-      <slot />
-    <!-- <DisplayBadge
-      v-if="isVirtual"
-      class="ml1"
-      text="virtual"
-    /> -->
-    </div>
-    <template #popper>
-      <span font-mono text-sm>
-        {{ props.id }}
-      </span>
-    </template>
-  </Tooltip>
+      <div
+        v-if="id"
+        :class="containerClass"
+      >
+        <DisplayFileIcon v-if="icon" :filename="id" mr1.5 />
+        <span>
+          <DisplayHighlightedPath :path="relativePath" />
+        </span>
+        <slot />
+        <!-- <DisplayBadge
+          v-if="isVirtual"
+          class="ml1"
+          text="virtual"
+        /> -->
+      </div>
+      <template #popper>
+        <span font-mono text-sm>
+          {{ props.id }}
+        </span>
+      </template>
+    </Tooltip>
+  </component>
 </template>

packages/devtools/src/app/components/flowmap/ModuleFlow.vue

@@ -134,6 +134,7 @@ const codeDisplay = computed(() => {
                 v-for="(item, index) of resolveIds"
                 :key="item.id"
                 :item="item"
+                :session="session"
                 :active="isSelectedAncestor(item)"
                 :class="index > 0 ? 'pt-2' : ''"
                 @select="select"
@@ -160,6 +161,7 @@ const codeDisplay = computed(() => {
                 v-for="(item, index) of loads"
                 :key="item.id"
                 :item="item"
+                :session="session"
                 :active="isSelectedAncestor(item)"
                 :class="index > 0 ? 'pt-2' : ''"
                 @select="select"
@@ -185,6 +187,7 @@ const codeDisplay = computed(() => {
                 v-for="(item, index) of transforms"
                 :key="item.id"
                 :item="item"
+                :session="session"
                 :active="isSelectedAncestor(item)"
                 :class="index > 0 ? 'pt-2' : ''"
                 @select="select"

packages/devtools/src/app/components/flowmap/NodeModuleInfo.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import type { SessionContext } from '@/types/data'
 import type { RolldownModuleFlowNode } from '../../../node/rpc/functions/rolldown-get-module-info'
 import { computed } from 'vue'
 import { isFlowmapSwapping } from '../../state/flowmap'
 
 const props = defineProps<{
   item: RolldownModuleFlowNode
+  session: SessionContext
   active?: boolean
 }>()
 
@@ -33,6 +35,13 @@ function down() {
   emit('select', props.item)
   isFlowmapSwapping.value = true
 }
+
+const importterModule = computed(() => {
+  if (props.item.type !== 'resolve')
+    return undefined
+  const id = props.item.importer
+  return props.session.modulesList.find(m => m.id === id)
+})
 </script>
 
 <template>
@@ -100,16 +109,20 @@ function down() {
       #after
     >
       <div
-        p3 ml4 border="l" flex="~ col gap-2"
+        p3 ml4 border="l" flex="~ col gap-1"
         :class="active ? 'border-flow-line-active' : 'border-flow-line'"
       >
-        <DisplayModuleId :id="item.importer" />
-        <div flex="~ gap-1 items-center" pl1>
-          <div i-ph-arrow-bend-down-right text-sm op50 />
-          <DisplayModuleId :id="item.module_request" />
+        <div flex="~ gap-2 items-center">
+          <div i-ph-arrow-elbow-left-down text-base op50 flex-none ml0.8 />
+          <DisplayModuleId
+            :id="item.importer"
+            :session="session"
+            :link="importterModule ? true : false"
+            :class="importterModule ? 'hover:bg-active' : ''"
+            px2 py1 rounded
+          />
         </div>
-        <div i-ph-arrow-down ml6 text-sm op50 />
-        <DisplayModuleId :id="item.resolved_id" ml6 />
+        <DisplayModuleId :id="item.module_request" />
       </div>
     </template>
   </FlowmapNode>

packages/devtools/src/app/pages/session/[session]/flow.vue

@@ -1,24 +1,22 @@
 <script setup lang="ts">
 import type { SessionContext } from '../../../types/data'
 import { useRoute } from '#app/composables/router'
-import { useAsyncState } from '@vueuse/core'
+import { computedAsync } from '@vueuse/core'
 import { backend } from '../../../state/backend'
 
 const props = defineProps<{
   session: SessionContext
 }>()
 
-const query = useRoute().query
+const route = useRoute()
 
-const { state: info } = useAsyncState(
-  async () => {
-    return await backend.value!.functions['vite:rolldown:get-module-info']?.({
-      session: props.session.id,
-      module: query.module as string,
-    })
-  },
-  null,
-)
+const info = computedAsync(async () => {
+  const arg = {
+    session: props.session.id,
+    module: route.query.module as string,
+  }
+  return await backend.value!.functions['vite:rolldown:get-module-info']?.(arg)
+})
 </script>
 
 <template>

packages/devtools/src/app/pages/session/[session]/index.vue

@@ -41,13 +41,13 @@ const filtered = computed(() => {
       >
     </div>
     <template v-for="mod of filtered" :key="mod">
-      <NuxtLink
-        :to="{ path: `/session/${session.id}/flow`, query: { module: mod.id } }"
+      <DisplayModuleId
+        :id="mod.id"
+        :session
         hover="bg-active" block px2 p1
         border="~ base rounded"
-      >
-        <DisplayModuleId :id="mod.id" />
-      </NuxtLink>
+        :link="true"
+      />
     </template>
     <div text-center text-xs op50 m4>
       {{ filtered.length }} of {{ session.modulesList.length }}