feat: basic events reader and manager

Author: antfu

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { parseReadablePath } from '~/utils/filepath'
+
+const props = defineProps<{
+  filepath?: string
+  lineBreak?: boolean
+  subpath?: boolean
+  override?: string
+}>()
+
+const root = '/'
+const parsed = computed(() => (props.filepath && root)
+  ? parseReadablePath(props.filepath, root)
+  : { path: props.filepath || '' })
+</script>
+
+<template>
+  <span flex="~ gap-2 items-center" class="group">
+    <span
+      :class="[
+        lineBreak ? '' : 'ws-nowrap of-hidden truncate',
+      ]"
+      font-mono
+      :title="override || filepath"
+    >
+      <template v-if="override">
+        {{ override }}
+      </template>
+      <template v-else-if="parsed.moduleName">
+        <span>{{ parsed.moduleName }}</span>
+        <span v-if="subpath" op50>
+          {{ parsed.path.slice(parsed.moduleName.length) }}
+        </span>
+      </template>
+      <template v-else>
+        {{ parsed.path }}
+      </template>
+    </span>
+    <slot />
+  </span>
+</template>

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

@@ -1,23 +1,40 @@
 <script setup lang="ts">
-import type { Event } from '@rolldown/debug'
+import type { RolldownEvent } from '~/node/rpc/functions/rolldown-get-raw-events'
 import { useRoute } from '#app/composables/router'
-import { onMounted, shallowRef } from 'vue'
+import { computed, onMounted, shallowRef } from 'vue'
 import { backend } from '~/state/backend'
 
 const params = useRoute().params
 
-const events = shallowRef<Event[]>([])
+const events = shallowRef<RolldownEvent[]>([])
 
 onMounted(async () => {
   events.value = await backend.value!.functions['vite:rolldown:get-raw-events']({
     buildId: params.id,
   })
 })
+
+const modules = computed(() => {
+  const map = new Map<string, RolldownEvent[]>()
+  for (const event of events.value) {
+    if (!map.has(event.module_id)) {
+      map.set(event.module_id, [])
+    }
+    map.get(event.module_id)!.push(event)
+  }
+  return map
+})
 </script>
 
 <template>
-  <div>
-    {{ params }}
-    {{ events }}
-  </div>
+  <table>
+    <tbody>
+      <tr v-for="[key, e] of modules.entries()" :key="key">
+        <td>
+          <UiFilepathItem :filepath="key" :subpath="true" />
+        </td>
+        <td>{{ e.length }}</td>
+      </tr>
+    </tbody>
+  </table>
 </template>

packages/devtools/src/app/utils/filepath.ts

@@ -0,0 +1,63 @@
+import { relative } from 'pathe'
+
+export function isNodeModulePath(path: string) {
+  return !!path.match(/[/\\]node_modules[/\\]/) || isPackageName(path)
+}
+
+export function isPackageName(name: string) {
+  return name[0] === '#' || !!name.match(/^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/)
+}
+
+export function getModuleNameFromPath(path: string) {
+  if (isPackageName(path))
+    return path
+  const match = path.replace(/\\/g, '/').match(/.*\/node_modules\/(.*)$/)?.[1]
+  if (!match)
+    return undefined
+  if (match.startsWith('@'))
+    return match.split('/').slice(0, 2).join('/')
+  return match.split('/')[0]
+}
+
+function getModuleSubpathFromPath(path: string) {
+  const match = path.match(/.*\/node_modules\/(.*)$/)?.[1]
+  if (!match)
+    return undefined
+  return match
+}
+
+export function isBuiltInModule(name: string | undefined) {
+  if (!name)
+    return
+  return ['nuxt', '#app', '#head', 'vue'].includes(name)
+}
+
+export function parseReadablePath(path: string, root: string) {
+  path = path.replace(/\\/g, '/')
+  if (isPackageName(path)) {
+    return {
+      moduleName: path,
+      path,
+    }
+  }
+  const moduleName = getModuleNameFromPath(path)
+  const subpath = getModuleSubpathFromPath(path)
+  if (moduleName && subpath) {
+    return {
+      moduleName,
+      path: subpath,
+    }
+  }
+  // Workaround https://github.com/unjs/pathe/issues/113
+  try {
+    let result = relative(root, path)
+    if (!result.startsWith('./') && !result.startsWith('../'))
+      result = `./${result}`
+    if (result.startsWith('./.nuxt/'))
+      result = `#build${result.slice(7)}`
+    return { path: result }
+  }
+  catch {
+    return { path }
+  }
+}

packages/devtools/src/node/rolldown/events-manager.ts

@@ -0,0 +1,28 @@
+import type { Action, Event } from '@rolldown/debug'
+
+export type RolldownEvent = Action & {
+  event_id: string
+  timestamp: string
+}
+
+export class RolldownEventsManager {
+  events: RolldownEvent[] = []
+
+  handleEvent(raw: Event) {
+    const event = {
+      ...raw.fields.action,
+      event_id: `${raw.timestamp}#${this.events.length}`,
+      timestamp: raw.timestamp,
+    }
+    this.events.push(event)
+    return event
+  }
+
+  dispose() {
+    this.events = []
+  }
+
+  [Symbol.dispose]() {
+    this.dispose()
+  }
+}

packages/devtools/src/node/rolldown/events-reader.ts

@@ -0,0 +1,54 @@
+import type { Event } from '@rolldown/debug'
+import fs from 'node:fs'
+import { parseJsonStreamWithConcatArrays } from '../utils/json-parse-stream'
+import { RolldownEventsManager } from './events-manager'
+
+const readers: Map<string, RolldownEventsReader> = new Map()
+
+export class RolldownEventsReader {
+  lastBytes: number = 0
+  lastTimestamp: number = 0
+  manager = new RolldownEventsManager()
+
+  private constructor(
+    readonly filepath: string,
+  ) {
+  }
+
+  static get(filepath: string) {
+    if (readers.has(filepath)) {
+      return readers.get(filepath)!
+    }
+    const reader = new RolldownEventsReader(filepath)
+    readers.set(filepath, reader)
+    return reader
+  }
+
+  async read() {
+    const { mtime, size } = await fs.promises.stat(this.filepath)
+    if (mtime.getTime() <= this.lastTimestamp) {
+      return
+    }
+    const stream = fs.createReadStream(this.filepath, {
+      start: this.lastBytes,
+    })
+    this.lastTimestamp = mtime.getTime()
+    this.lastBytes = size
+    await parseJsonStreamWithConcatArrays<Event>(
+      stream,
+      (event) => {
+        this.manager.handleEvent(event)
+        return event
+      },
+    )
+  }
+
+  dispose() {
+    readers.delete(this.filepath)
+    this.manager.dispose()
+  }
+
+  [Symbol.dispose]() {
+    this.dispose()
+  }
+}

packages/devtools/src/node/rpc/functions/get-payload.ts

@@ -1,4 +1,4 @@
-import { defineRpcFunction } from '../types'
+import { defineRpcFunction } from '../utils'
 
 export const getPayload = defineRpcFunction({
   name: 'vite:get-payload',

packages/devtools/src/node/rpc/functions/open-in-editor.ts

@@ -1,4 +1,4 @@
-import { defineRpcFunction } from '../types'
+import { defineRpcFunction } from '../utils'
 
 export const openInEditor = defineRpcFunction({
   name: 'vite:open-in-editor',

packages/devtools/src/node/rpc/functions/open-in-finder.ts

@@ -1,4 +1,4 @@
-import { defineRpcFunction } from '../types'
+import { defineRpcFunction } from '../utils'
 
 export const openInFinder = defineRpcFunction({
   name: 'vite:open-in-finder',

packages/devtools/src/node/rpc/functions/rolldown-get-module-list.ts

@@ -0,0 +1,26 @@
+import type { Event } from '@rolldown/debug'
+import { join } from 'pathe'
+import { RolldownEventsReader } from '../../rolldown/events-reader'
+import { defineRpcFunction } from '../utils'
+
+export type RolldownEvent = Event['fields']['action'] & {
+  timestamp: string
+}
+
+export const rolldownGetModuleList = defineRpcFunction({
+  name: 'vite:rolldown:get-module-list',
+  type: 'query',
+  setup: async ({ cwd }) => {
+    return {
+      handler: async ({ buildId }) => {
+        const reader = RolldownEventsReader.get(join(cwd, '.rolldown', buildId, 'log.json'))
+        await reader.read()
+        const modules = new Set<string>()
+        for (const event of reader.manager.events) {
+          modules.add(event.module_id)
+        }
+        return Array.from(modules)
+      },
+    }
+  },
+})

packages/devtools/src/node/rpc/functions/rolldown-get-raw-events.ts

@@ -1,19 +1,16 @@
-import type { Event } from '@rolldown/debug'
-import fs from 'node:fs/promises'
 import { join } from 'pathe'
-import { parseJsonStreamWithConcatArrays } from '../../utils/json-parse-stream'
-import { defineRpcFunction } from '../types'
+import { RolldownEventsReader } from '../../rolldown/events-reader'
+import { defineRpcFunction } from '../utils'
 
 export const rolldownGetRawEvents = defineRpcFunction({
   name: 'vite:rolldown:get-raw-events',
   type: 'query',
   setup: ({ cwd }) => {
     return {
       handler: async ({ buildId }) => {
-        const raw = await fs.open(join(cwd, '.rolldown', buildId, 'log.json'), 'r')
-        const stream = raw.createReadStream()
-        const events = await parseJsonStreamWithConcatArrays(stream) as Event[]
-        return events
+        const reader = RolldownEventsReader.get(join(cwd, '.rolldown', buildId, 'log.json'))
+        await reader.read()
+        return reader.manager.events
       },
     }
   },