wip: resolve id

Author: antfu

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

@@ -3,7 +3,7 @@ import type { RolldownEvent } from '../../../node/rolldown/events-manager'
 import { Dropdown as VDropdown } from 'floating-vue'
 import { defineProps, withDefaults } from 'vue'
 
-type FIELDS = 'module_id' | 'kind' | 'source' | 'timestamp' | 'plugin_name'
+type FIELDS = 'module_id' | 'kind' | 'source' | 'timestamp' | 'event_id' | 'plugin_name' | '*'
 
 const props = withDefaults(
   defineProps<{
@@ -12,15 +12,31 @@ const props = withDefaults(
   }>(),
   {
     fields: () => [
+      'event_id',
       'kind',
       'module_id',
       'plugin_name',
       'timestamp',
       'source',
+      '*',
     ],
   },
 )
 
+function omit(obj: RolldownEvent, inputs: string[]) {
+  const fields = new Set(inputs)
+  if (fields.has('source')) {
+    fields.add('source')
+    fields.add('transformed_source')
+  }
+  if (fields.has('plugin_name')) {
+    fields.add('plugin_index')
+  }
+  return Object.fromEntries(
+    Object.entries(obj).filter(([key]) => !fields.has(key)),
+  )
+}
+
 function getSource(event: RolldownEvent) {
   if (event.kind === 'HookLoadCallEnd') {
     return event.source
@@ -41,16 +57,23 @@ 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="event.module_id" />
+            <DisplayModuleId v-if="field === 'module_id'" :id="'module_id' in event ? event.module_id : ''" />
             <DisplayBadge v-else-if="field === 'kind'" :text="event.kind" />
-            <DisplayPluginName v-else-if="field === 'plugin_name'" font-mono :name="event.plugin_name" />
+            <div v-else-if="field === 'plugin_name' && 'plugin_name' in event">
+              <DisplayPluginName font-mono :name="event.plugin_name" />
+              <code op50>#{{ event.plugin_index }}</code>
+            </div>
+            <div v-else-if="field === 'event_id'">
+              {{ event.event_id }}
+            </div>
             <VDropdown v-else-if="field === 'source' && getSource(event)">
               <div i-ph-code />
               <template #popper>
                 <pre p1 text-sm v-text="getSource(event)" />
               </template>
             </VDropdown>
             <DisplayTimestamp v-else-if="field === 'timestamp'" text-sm :timestamp="event.timestamp" />
+            <pre v-else-if="field === '*'" text-sm v-text="omit(event, fields)" />
           </td>
         </template>
       </tr>

packages/devtools/src/app/components/display/HighlightedPath.ts

@@ -1,6 +1,7 @@
 import { defineComponent, h } from 'vue'
 import { getPluginColor } from '../../utils/color'
 
+// @unocss-include
 export default defineComponent({
   name: 'HighlightedPath',
   props: {
@@ -11,8 +12,8 @@ export default defineComponent({
   },
   setup(props) {
     return () => {
-      const parts = props.path.split(/([/?&:=])/g)
-      let type: 'start' | 'path' | 'query' = 'start'
+      const parts = props.path.split(/([?/&:=])/g)
+      let type: 'path' | 'query' = 'path'
 
       const classes: string[][] = parts.map(() => [])
       const styles: string[][] = parts.map(() => [])
@@ -26,22 +27,13 @@ export default defineComponent({
         if (part === '?')
           type = 'query'
 
-        if (type === 'start') {
+        if (type === 'path') {
           if (part.match(/^\.+$/)) {
             classes[index].push('op50')
           }
           else if (part === '/') {
             classes[index].push('op50')
           }
-          else if (part !== '/') {
-            type = 'path'
-          }
-        }
-
-        if (type === 'path') {
-          if (part === '/') {
-            classes[index].push('op50')
-          }
           else if (part === 'node_modules' || part === 'dist' || part === 'lib' || part.match(/^\.\w/)) {
             classes[index].push('op60')
           }

…rc/app/pages/build/[build]/transform.vue …ols/src/app/pages/build/[build]/flow.vuepackages/devtools/src/app/pages/build/[build]/transform.vue renamed to packages/devtools/src/app/pages/build/[build]/flow.vue packages/devtools/src/app/pages/build/[build]/transform.vue renamed to packages/devtools/src/app/pages/build/[build]/flow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { RolldownModuleTransformInfo } from '@@/node/rpc/functions/rolldown-get-module-info'
+import type { RolldownModuleLoadInfo, RolldownModuleTransformInfo, RolldownResolveInfo } from '../../../../node/rpc/functions/rolldown-get-module-info'
 import { useRoute } from '#app/composables/router'
 import PluginName from '@/components/display/PluginName.vue'
 import { useAsyncState } from '@vueuse/core'
@@ -11,7 +11,12 @@ const params = useRoute().params as {
 }
 const query = useRoute().query
 
-const selected = ref<RolldownModuleTransformInfo | null>(null)
+const selected = ref<{
+  type: 'load' | 'transform'
+  plugin_name: string
+  from: string | null
+  to: string | null
+} | null>()
 
 const { state: info } = useAsyncState(
   async () => {
@@ -23,8 +28,26 @@ const { state: info } = useAsyncState(
   null,
 )
 
-function select(transform: RolldownModuleTransformInfo) {
-  selected.value = transform
+function select(transform: RolldownModuleTransformInfo | RolldownModuleLoadInfo | RolldownResolveInfo) {
+  if ('source_from' in transform) {
+    selected.value = {
+      type: 'transform',
+      plugin_name: transform.plugin_name,
+      from: transform.source_from,
+      to: transform.source_to,
+    }
+  }
+  else if ('source' in transform) {
+    selected.value = {
+      type: 'load',
+      plugin_name: transform.plugin_name,
+      from: transform.source,
+      to: transform.source,
+    }
+  }
+  else {
+    selected.value = null
+  }
 }
 </script>
 
@@ -44,6 +67,52 @@ function select(transform: RolldownModuleTransformInfo) {
       </template>
     </FlowmapNode>
 
+    <FlowmapNode
+      :lines="{ top: true, bottom: info.resolve_ids.length === 0 }" pl6 py2
+      :class-node-outer="info.resolve_ids.length === 0 ? 'border-dashed' : ''"
+    >
+      <template #content>
+        <div i-ph-magnifying-glass-duotone /> Resolve Id
+        <span op50 text-xs>({{ info.resolve_ids.length }})</span>
+      </template>
+      <template v-if="info.resolve_ids.length > 0" #inline-before>
+        <button w-6 h-6 mr1 ml--7 mya rounded-full hover="bg-active" flex="~ items-center justify-center">
+          <div i-ph-caret-down text-sm op50 />
+        </button>
+      </template>
+      <template v-if="info.resolve_ids.length > 0" #inline-after>
+        <div w-8 relative>
+          <div absolute top="1/2" left-0 bottom--4 right="1/2" border="t r base rounded-rt-2xl" z-flowmap-line />
+        </div>
+      </template>
+      <template #after>
+        <div pl-12 pt2>
+          <template v-for="(resolve_id, idx) of info.resolve_ids" :key="resolve_id.plugin_name">
+            <FlowmapNode
+              :lines="{ top: idx > 0, bottom: idx < info.resolve_ids.length - 1 }"
+              class-node-inline="gap-2 items-center"
+              pl6 py1
+            >
+              <template #inner>
+                <button
+                  px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
+                  @click="select(resolve_id)"
+                >
+                  <DisplayPluginName :name="resolve_id.plugin_name" class="font-mono text-sm" />
+                </button>
+              </template>
+              <template #inline-after>
+                <DisplayDuration :duration="resolve_id.duration" :color="true" :factor="5" text-xs />
+                <!-- <div v-if="resolve_id.source_from === resolve_id.source_to" text-xs op50>
+                  no changes
+                </div> -->
+              </template>
+            </FlowmapNode>
+          </template>
+        </div>
+      </template>
+    </FlowmapNode>
+
     <FlowmapNode
       :lines="{ top: true, bottom: info.loads.length === 0 }" pl6 py2
       :class-node-outer="info.loads.length === 0 ? 'border-dashed' : ''"
@@ -66,8 +135,14 @@ function select(transform: RolldownModuleTransformInfo) {
         <div pl-12 pt2>
           <template v-for="(load, idx) of info.loads" :key="load.plugin_name">
             <FlowmapNode :lines="{ top: idx > 0, bottom: idx < info.loads.length - 1 }" pl6 py1>
-              <template #content>
-                <DisplayPluginName :name="load.plugin_name" class="font-mono text-sm" />
+              <template #inner>
+                <button
+                  :class="load.source ? '' : 'op75'"
+                  px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
+                  @click="select(load)"
+                >
+                  <DisplayPluginName :name="load.plugin_name" class="font-mono text-sm" />
+                </button>
               </template>
             </FlowmapNode>
           </template>
@@ -144,16 +219,19 @@ function select(transform: RolldownModuleTransformInfo) {
     <div
       v-if="selected"
       absolute right-5 top-5 bottom-5 w-200
-      border="~ base rounded-lg" bg-base of-hidden
+      border="~ base rounded-lg" bg-glass of-hidden
       grid="~ rows-[max-content_1fr]"
     >
-      <div px2 p1 font-mono border="b base">
+      <div px2 p1 font-mono border="b base" flex="~ items-center gap-2">
         <PluginName :name="selected.plugin_name" />
+        <span text-xs op50>
+          {{ selected.type === 'load' ? 'Load' : 'Transform' }}
+        </span>
       </div>
       <CodeDiffEditor
         v-if="selected"
-        :from="selected.source_from ?? ''"
-        :to="selected.source_to ?? ''"
+        :from="selected.from ?? ''"
+        :to="selected.to ?? ''"
         :diff="true"
         :one-column="true"
       />

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

@@ -20,7 +20,7 @@ onMounted(async () => {
   <div flex="~ col gap-2" p4>
     <template v-for="mod of modules" :key="mod">
       <NuxtLink
-        :to="{ path: `/build/${params.build}/transform`, query: { module: mod.id } }"
+        :to="{ path: `/build/${params.build}/flow`, query: { module: mod.id } }"
         hover="bg-active" block px2 p1
         border="~ base rounded"
       >

…pp/pages/build/[build]/transform-raw.vue …ools/src/app/pages/build/[build]/raw.vuepackages/devtools/src/app/pages/build/[build]/transform-raw.vue renamed to packages/devtools/src/app/pages/build/[build]/raw.vue packages/devtools/src/app/pages/build/[build]/transform-raw.vue renamed to packages/devtools/src/app/pages/build/[build]/raw.vue

@@ -6,12 +6,22 @@ export interface ModuleInfo {
   id: string
   loads: RolldownModuleLoadInfo[]
   transforms: RolldownModuleTransformInfo[]
+  resolve_ids: RolldownResolveInfo[]
 
   // TODO: Awaits https://github.com/rolldown/rolldown/issues/4135
   deps: string[]
   importers: string[]
 }
 
+export interface RolldownResolveInfo {
+  id: string
+  plugin_name: string
+  resolved_id: string | null
+  timestamp_start: number
+  timestamp_end: number
+  duration: number
+}
+
 export interface RolldownModuleLoadInfo {
   id: string
   plugin_name: string
@@ -52,12 +62,13 @@ export const rolldownGetModuleInfo = defineRpcFunction({
           transforms: [],
           deps: [],
           importers: [],
+          resolve_ids: [],
         }
 
         for (const event of events) {
           if (event.kind === 'HookLoadCallEnd') {
             // TODO: use ID to pair start and end
-            const start = events.find(e => e.kind === 'HookLoadCallStart' && e.module_id === event.module_id && e.plugin_name === event.plugin_name)
+            const start = events.find(e => e.kind === 'HookLoadCallStart' && e.module_id === event.module_id && e.plugin_index === event.plugin_index)
             if (!start) {
               console.error(`[rolldown] Load call start not found for ${event.event_id}`)
               continue
@@ -79,7 +90,7 @@ export const rolldownGetModuleInfo = defineRpcFunction({
         for (const event of events) {
           if (event.kind === 'HookTransformCallEnd') {
             // TODO: use ID to pair start and end
-            const start = events.find(e => e.kind === 'HookTransformCallStart' && e.module_id === event.module_id && e.plugin_name === event.plugin_name)
+            const start = events.find(e => e.kind === 'HookTransformCallStart' && e.module_id === event.module_id && e.plugin_index === event.plugin_index)
             if (!start || start.kind !== 'HookTransformCallStart') {
               console.error(`[rolldown] Transform call start not found for ${event.event_id}`)
               continue
@@ -99,8 +110,29 @@ export const rolldownGetModuleInfo = defineRpcFunction({
           }
         }
 
-        info.loads.sort((a, b) => a.timestamp_start - b.timestamp_start)
-        info.transforms.sort((a, b) => a.timestamp_start - b.timestamp_start)
+        for (const event of events) {
+          if (event.kind === 'HookResolveIdCallEnd') {
+            // TODO: use ID to pair start and end
+            const start = events.find(e => e.kind === 'HookResolveIdCallStart' && e.module_id === event.module_id && e.plugin_index === event.plugin_index)
+            if (!start || start.kind !== 'HookResolveIdCallStart') {
+              console.error(`[rolldown] resolveId call start not found for ${event.event_id}`)
+              continue
+            }
+            const duration = +event.timestamp - +start.timestamp
+            info.resolve_ids.push({
+              id: event.event_id,
+              plugin_name: event.plugin_name,
+              resolved_id: event.resolved_id,
+              timestamp_start: +start.timestamp,
+              timestamp_end: +event.timestamp,
+              duration,
+            })
+          }
+        }
+
+        info.loads.sort((a, b) => a.plugin_index - b.plugin_index)
+        info.transforms.sort((a, b) => a.plugin_index - b.plugin_index)
+        info.resolve_ids.sort((a, b) => a.plugin_index - b.plugin_index)
 
         return info
       },