feat: get root dir from server

Author: antfu

packages/devtools/src/app/components/data/RawEventsTable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownEvent } from '../../../node/rolldown/events-manager'
+import type { SessionContext } from '../../types/data'
 import { Dropdown as VDropdown } from 'floating-vue'
 import { defineProps, withDefaults } from 'vue'
 
@@ -9,6 +10,7 @@ const props = withDefaults(
   defineProps<{
     events: RolldownEvent[]
     fields?: FIELDS[]
+    session: SessionContext
   }>(),
   {
     fields: () => [
@@ -57,7 +59,11 @@ function getSource(event: RolldownEvent) {
       <tr v-for="event of props.events" :key="event.event_id">
         <template v-for="field of props.fields" :key="field">
           <td px2>
-            <DisplayModuleId v-if="field === 'module_id'" :id="'module_id' in event ? event.module_id : ''" />
+            <DisplayModuleId
+              v-if="field === 'module_id'"
+              :id="'module_id' in event ? event.module_id : ''"
+              :session="session"
+            />
             <DisplayBadge v-else-if="field === 'action'" :text="event.action" />
             <div v-else-if="field === 'plugin_name' && 'plugin_name' in event">
               <DisplayPluginName font-mono :name="event.plugin_name" />

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

@@ -7,25 +7,22 @@ import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    id?: string
+    id: string
     badges?: boolean
     icon?: boolean
     link?: boolean
-    session?: SessionContext
+    session: SessionContext
   }>(),
   {
     icon: true,
   },
 )
 
-// const mod = computed(() => payload.modules.find(i => i.id === props.id))
-const root = '/Users/antfu/i/vite-devtools/' // TODO: get from cwd
-// const isVirtual = computed(() => mod.value?.virtual)
 const relativePath = computed(() => {
   if (!props.id)
     return ''
   const id = props.id.replace(/%2F/g, '/')
-  let relate = relative(root, id)
+  let relate = relative(props.session!.rootDir, id)
   if (!relate.startsWith('.'))
     relate = `./${relate}`
   if (relate.startsWith('./'))

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

@@ -139,7 +139,10 @@ const codeDisplay = computed(() => {
       >
         <template #content>
           <div p2>
-            <DisplayModuleId :id="info.id" />
+            <DisplayModuleId
+              :id="info.id"
+              :session="session"
+            />
           </div>
         </template>
       </FlowmapNode>

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

@@ -122,7 +122,10 @@ const importterModule = computed(() => {
             px2 py1 rounded
           />
         </div>
-        <DisplayModuleId :id="item.module_request" />
+        <DisplayModuleId
+          :id="item.module_request"
+          :session="session"
+        />
       </div>
     </template>
   </FlowmapNode>

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

@@ -11,14 +11,16 @@ const params = useRoute().params as {
 
 const session = reactive({
   id: computed(() => params.session),
+  rootDir: '',
   modulesList: shallowRef<ModuleListItem[]>([]),
 }) as SessionContext
 
 onMounted(async () => {
-  const modules = await backend.value!.functions['vite:rolldown:get-module-list']!({
+  const summary = await backend.value!.functions['vite:rolldown:get-session-summary']!({
     session: params.session,
   })
-  session.modulesList = modules.map(mod => ({
+  session.rootDir = summary.rootDir
+  session.modulesList = summary.modules.map(mod => ({
     id: mod.id,
     fileType: getFileTypeFromName(mod.id).name,
   }))

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

@@ -24,6 +24,10 @@ const events = useAsyncState(
 
 <template>
   <div>
-    <DataRawEventsTable v-if="events.state.value" :events="events.state.value.events" />
+    <DataRawEventsTable
+      v-if="events.state.value"
+      :events="events.state.value.events"
+      :session="session"
+    />
   </div>
 </template>

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

@@ -5,5 +5,6 @@ export interface ModuleListItem {
 
 export interface SessionContext {
   id: string
+  rootDir: string
   modulesList: ModuleListItem[]
 }

packages/devtools/src/app/types/data.ts

@@ -2,16 +2,20 @@ import { join } from 'pathe'
 import { RolldownEventsReader } from '../../rolldown/events-reader'
 import { defineRpcFunction } from '../utils'
 
-export const rolldownGetModuleList = defineRpcFunction({
-  name: 'vite:rolldown:get-module-list',
+export const rolldownGetSessionSummary = defineRpcFunction({
+  name: 'vite:rolldown:get-session-summary',
   type: 'query',
   setup: async ({ cwd }) => {
     return {
       handler: async ({ session }: { session: string }) => {
         const reader = RolldownEventsReader.get(join(cwd, '.rolldown', session, 'logs.json'))
         await reader.read()
-        return Array.from(reader.manager.modules.values())
-          .sort((a, b) => a.id.localeCompare(b.id))
+        return {
+          id: session,
+          rootDir: cwd,
+          modules: Array.from(reader.manager.modules.values())
+            .sort((a, b) => a.id.localeCompare(b.id)),
+        }
       },
     }
   },

…pc/functions/rolldown-get-module-list.ts …unctions/rolldown-get-session-summary.tspackages/devtools/src/node/rpc/functions/rolldown-get-module-list.ts renamed to packages/devtools/src/node/rpc/functions/rolldown-get-session-summary.ts packages/devtools/src/node/rpc/functions/rolldown-get-module-list.ts renamed to packages/devtools/src/node/rpc/functions/rolldown-get-session-summary.ts

@@ -3,9 +3,9 @@ import { getPayload } from './functions/get-payload'
 import { openInEditor } from './functions/open-in-editor'
 import { openInFinder } from './functions/open-in-finder'
 import { rolldownGetModuleInfo } from './functions/rolldown-get-module-info'
-import { rolldownGetModuleList } from './functions/rolldown-get-module-list'
 import { rolldownGetModuleRawEvents } from './functions/rolldown-get-module-raw-events'
 import { rolldownGetRawEvents } from './functions/rolldown-get-raw-events'
+import { rolldownGetSessionSummary } from './functions/rolldown-get-session-summary'
 import { rolldownListSessions } from './functions/rolldown-list-sessions'
 
 export const rpcFunctions = [
@@ -14,7 +14,7 @@ export const rpcFunctions = [
   getPayload,
   rolldownListSessions,
   rolldownGetRawEvents,
-  rolldownGetModuleList,
+  rolldownGetSessionSummary,
   rolldownGetModuleInfo,
   rolldownGetModuleRawEvents,
 ] as const