feat: basic data fetcher

Author: antfu

packages/devtools/package.json

@@ -47,13 +47,15 @@
     "p-limit": "catalog:deps",
     "pathe": "catalog:deps",
     "publint": "catalog:deps",
+    "stream-json": "catalog:deps",
     "structured-clone-es": "catalog:deps",
     "tinyglobby": "catalog:deps",
     "unconfig": "catalog:deps",
     "unstorage": "catalog:deps",
     "ws": "catalog:deps"
   },
   "devDependencies": {
+    "@types/stream-json": "catalog:types",
     "@unocss/nuxt": "catalog:build",
     "@vueuse/nuxt": "catalog:build",
     "d3": "catalog:frontend",

packages/devtools/src/app/app.vue

@@ -3,7 +3,7 @@ import { useHead } from '#app/composables/head'
 import { shallowRef } from 'vue'
 import { createDevBackend } from './backends/dev'
 import { backend } from './state/backend'
-import { fetchData, rawEvents } from './state/data'
+import { fetchData } from './state/data'
 
 import 'floating-vue/dist/style.css'
 import './styles/global.css'
@@ -29,7 +29,13 @@ createDevBackend()
 </script>
 
 <template>
-  <div>
-    {{ rawEvents }}
+  <div v-if="error" text-red>
+    {{ error }}
+  </div>
+  <div v-else-if="!backend">
+    Connecting...
+  </div>
+  <div v-else>
+    <NuxtPage />
   </div>
 </template>

packages/devtools/src/app/backends/websocket.ts

@@ -86,18 +86,6 @@ export function createWebSocketBackend(options: WebSocketBackendOptions): Backen
       await connectPromise
     },
     isDynamic: true,
-    functions: {
-      'vite:get-payload': async () => {
-        try {
-          return await rpc['vite:get-payload']()
-        }
-        catch (err) {
-          error.value = err
-          throw err
-        }
-      },
-      'vite:open-in-editor': async (filename: string) => rpc['vite:open-in-editor'].asEvent(filename),
-      'vite:open-in-finder': async (filename: string) => rpc['vite:open-in-finder'].asEvent(filename),
-    },
+    functions: rpc,
   }
 }

packages/devtools/src/app/components/panel/SelectBuild.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { backend } from '../../state/backend'
+
+const builds = await backend.value!.functions['vite:rolldown:list-builds']()
+</script>
+
+<template>
+  <div flex="~ col gap-2">
+    <NuxtLink
+      v-for="build of builds"
+      :key="build.id"
+      :to="`/build/${build.id}`"
+      hover="bg-active"
+      border="~ base rounded-md"
+      p="x-2 y-1"
+    >
+      {{ build.id }}
+    </NuxtLink>
+  </div>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { Event } from '@rolldown/debug'
+import { useRoute } from '#app/composables/router'
+import { onMounted, shallowRef } from 'vue'
+import { backend } from '~/state/backend'
+
+const params = useRoute().params
+
+const events = shallowRef<Event[]>([])
+
+onMounted(async () => {
+  events.value = await backend.value!.functions['vite:rolldown:get-raw-events']({
+    buildId: params.id,
+  })
+})
+</script>
+
+<template>
+  <div>
+    {{ params }}
+    {{ events }}
+  </div>
+</template>

packages/devtools/src/app/pages/index.vue

@@ -3,6 +3,6 @@
 
 <template>
   <div>
-    Redirecting...
+    <PanelSelectBuild />
   </div>
 </template>

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

@@ -3,9 +3,11 @@ import { defineRpcFunction } from '../types'
 export const getPayload = defineRpcFunction({
   name: 'vite:get-payload',
   type: 'static',
-  setup: () => ({
-    handler: async () => ({
-      timestamp: Date.now(),
-    }),
-  }),
+  setup: () => {
+    return {
+      handler: async () => ({
+        timestamp: Date.now(),
+      }),
+    }
+  },
 })

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

@@ -0,0 +1,20 @@
+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'
+
+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
+      },
+    }
+  },
+})

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

@@ -0,0 +1,33 @@
+import fs from 'node:fs/promises'
+import { join } from 'pathe'
+import { defineRpcFunction } from '../types'
+
+export interface BuildInfo {
+  id: string
+  createdAt: number
+}
+
+export const rolldownListBuilds = defineRpcFunction({
+  name: 'vite:rolldown:list-builds',
+  type: 'query',
+  setup: ({ cwd }) => {
+    return {
+      handler: async (): Promise<BuildInfo[]> => {
+        const builds = await fs.readdir(join(cwd, '.rolldown'), {
+          withFileTypes: true,
+        })
+        return await Promise.all(builds
+          .filter(d => d.isDirectory())
+          .map(async (d): Promise<BuildInfo> => {
+            // TODO: read from meta.json
+            const stats = await fs.stat(join(cwd, '.rolldown', d.name))
+            return {
+              id: d.name,
+              createdAt: stats.birthtime.getTime(),
+            }
+          }),
+        )
+      },
+    }
+  },
+})

packages/devtools/src/node/rpc/index.ts

@@ -2,11 +2,15 @@ import type { DefinitionsToFunctions, FilterDefinitions } from './types'
 import { getPayload } from './functions/get-payload'
 import { openInEditor } from './functions/open-in-editor'
 import { openInFinder } from './functions/open-in-finder'
+import { rolldownGetRawEvents } from './functions/rolldown-get-raw-events'
+import { rolldownListBuilds } from './functions/rolldown-list-builds'
 
 export const rpcFunctions = [
   openInEditor,
   openInFinder,
   getPayload,
+  rolldownListBuilds,
+  rolldownGetRawEvents,
 ] as const
 
 export type ServerFunctions = DefinitionsToFunctions<typeof rpcFunctions>