feat: migrate to rpc package

eslint.config.js

@@ -12,39 +12,3 @@ export default antfu({
       'no-console': 'off',
     },
   })
-  .append({
-    files: ['pnpm-workspace.yaml'],
-    name: 'antfu/yaml/pnpm-workspace',
-    rules: {
-      'yaml/sort-keys': [
-        'error',
-        {
-          order: [
-            'packages',
-            'overrides',
-            'patchedDependencies',
-            'hoistPattern',
-            'catalog',
-            'catalogs',
-
-            'allowedDeprecatedVersions',
-            'allowNonAppliedPatches',
-            'configDependencies',
-            'ignoredBuiltDependencies',
-            'ignoredOptionalDependencies',
-            'neverBuiltDependencies',
-            'onlyBuiltDependencies',
-            'onlyBuiltDependenciesFile',
-            'packageExtensions',
-            'peerDependencyRules',
-            'supportedArchitectures',
-          ],
-          pathPattern: '^$',
-        },
-        {
-          order: { type: 'asc' },
-          pathPattern: '.*',
-        },
-      ],
-    },
-  })

package.json

@@ -52,6 +52,7 @@
   },
   "resolutions": {
     "@nuxt/devtools": "catalog:devtools",
+    "@nuxt/kit": "catalog:build",
     "@rolldown/debug": "catalog:deps",
     "esbuild": "catalog:build",
     "nitropack": "catalog:build",

packages/devtools-rpc/package.json

@@ -18,7 +18,10 @@
   ],
   "sideEffects": false,
   "exports": {
-    ".": "./dist/index.mjs"
+    ".": "./dist/index.mjs",
+    "./presets/ws/server": "./dist/presets/ws/server.mjs",
+    "./presets/ws/client": "./dist/presets/ws/client.mjs",
+    "./presets": "./dist/presets/index.mjs"
   },
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -30,6 +33,11 @@
     "dev": "tsdown --watch",
     "prepack": "pnpm build"
   },
+  "peerDependenciesMeta": {
+    "ws": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "birpc": "catalog:deps",
     "structured-clone-es": "catalog:deps"

packages/devtools-rpc/src/client.ts

@@ -8,7 +8,7 @@ export function createRpcClient<
   functions: ClientFunctions,
   options: {
     preset: BirpcOptions<ServerFunctions>
-    rpcOptions?: BirpcOptions<ServerFunctions>
+    rpcOptions?: Partial<BirpcOptions<ServerFunctions>>
   },
 ) {
   const { preset, rpcOptions = {} } = options

packages/devtools-rpc/src/presets/index.ts

@@ -0,0 +1,17 @@
+import type { BirpcGroup, BirpcOptions, ChannelOptions } from 'birpc'
+
+export type RpcServerPresetReturnType = <ClientFunctions, ServerFunctions>(rpc: BirpcGroup<ClientFunctions, ServerFunctions>, options?: Pick<BirpcOptions<ClientFunctions>, 'serialize' | 'deserialize'>) => void
+export type RpcServerPresetBasicType = (...args: any[]) => RpcServerPresetReturnType
+export type RpcServerPreset<T extends RpcServerPresetBasicType> = (...args: Parameters<T>) => RpcServerPresetReturnType
+
+export function defineRpcServerPreset<T extends RpcServerPresetBasicType>(preset: T): RpcServerPreset<T> {
+  return preset
+}
+
+export type RpcClientPresetReturnType = Omit<ChannelOptions, 'bind'>
+export type RpcClientPresetBasicType = (...args: any[]) => RpcClientPresetReturnType
+export type RpcClientPreset<T extends RpcClientPresetBasicType> = (...args: Parameters<T>) => RpcClientPresetReturnType
+
+export function defineRpcClientPreset<T extends RpcClientPresetBasicType>(preset: T): RpcClientPreset<T> {
+  return preset
+}

packages/devtools-rpc/src/presets/ws/client.ts

@@ -1,11 +1,36 @@
 import { parse, stringify } from 'structured-clone-es'
+import { defineRpcClientPreset } from '..'
 
 export interface WebSocketRpcClientOptions {
   url: string
+  onConnected?: (e: Event) => void
+  onError?: (e: Error) => void
+  onDisconnected?: (e: CloseEvent) => void
 }
 
-export function createWsRpcPreset(options: WebSocketRpcClientOptions) {
+function NOOP() {}
+
+export const createWsRpcPreset = defineRpcClientPreset((options: WebSocketRpcClientOptions) => {
   const ws = new WebSocket(options.url)
+  const {
+    onConnected = NOOP,
+    onError = NOOP,
+    onDisconnected = NOOP,
+  } = options
+
+  ws.addEventListener('open', (e) => {
+    onConnected(e)
+  })
+
+  ws.addEventListener('error', (e) => {
+    const _e = e instanceof Error ? e : new Error(e.type)
+    onError(_e)
+  })
+
+  ws.addEventListener('close', (e) => {
+    onDisconnected(e)
+  })
+
   return {
     on: (handler: (data: string) => void) => {
       ws.addEventListener('message', (e) => {
@@ -27,4 +52,4 @@ export function createWsRpcPreset(options: WebSocketRpcClientOptions) {
     serialize: stringify,
     deserialize: parse,
   }
-}
+})

packages/devtools-rpc/src/presets/ws/server.ts

@@ -1,14 +1,22 @@
 import type { BirpcGroup, BirpcOptions, ChannelOptions } from 'birpc'
+import type { WebSocket } from 'ws'
 import { parse, stringify } from 'structured-clone-es'
 import { WebSocketServer } from 'ws'
+import { defineRpcServerPreset } from '..'
 
 export interface WebSocketRpcServerOptions {
   port: number
+  onConnected?: (ws: WebSocket) => void
+  onDisconnected?: (ws: WebSocket) => void
 }
 
-export function createWsRpcPreset(options: WebSocketRpcServerOptions) {
+function NOOP() {}
+
+export const createWsRpcPreset = defineRpcServerPreset((options: WebSocketRpcServerOptions) => {
   const {
     port,
+    onConnected = NOOP,
+    onDisconnected = NOOP,
   } = options
   const wss = new WebSocketServer({
     port,
@@ -44,7 +52,9 @@ export function createWsRpcPreset(options: WebSocketRpcServerOptions) {
           if (index >= 0)
             channels.splice(index, 1)
         })
+        onDisconnected(ws)
       })
+      onConnected(ws)
     })
   }
-}
+})

packages/devtools-rpc/src/server.ts

@@ -1,4 +1,4 @@
-import type { BirpcGroup, BirpcOptions } from 'birpc'
+import type { BirpcGroup, EventOptions } from 'birpc'
 import { createBirpcGroup } from 'birpc'
 
 export function createRpcServer<
@@ -8,7 +8,7 @@ export function createRpcServer<
   functions: ServerFunctions,
   options: {
     preset: (rpc: BirpcGroup<ClientFunctions, ServerFunctions>) => void
-    rpcOptions?: BirpcOptions<ClientFunctions>
+    rpcOptions?: EventOptions<ClientFunctions>
   },
 ) {
   const rpc = createBirpcGroup<ClientFunctions, ServerFunctions>(functions, [], options?.rpcOptions ?? {})

packages/devtools-rpc/tsdown.config.ts

@@ -1,9 +1,14 @@
 import { defineConfig } from 'tsdown'
 
-export default defineConfig({
+export default defineConfig([{
   entry: [
     'src/index.ts',
   ],
   clean: true,
   fixedExtension: true,
-})
+}, {
+  entry: ['src/presets/ws/client.ts', 'src/presets/ws/server.ts', 'src/presets/index.ts'],
+  clean: true,
+  fixedExtension: true,
+  outDir: 'dist/presets',
+}])

packages/devtools/package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@rolldown/debug": "catalog:deps",
+    "@vitejs/devtools-rpc": "workspace:*",
     "ansis": "catalog:deps",
     "birpc": "catalog:deps",
     "cac": "catalog:deps",

packages/devtools/src/app/app.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { useHead } from '#app/composables/head'
-import { shallowRef } from 'vue'
-import { createDevBackend } from './backends/dev'
-import { backend } from './state/backend'
-import { fetchData } from './state/data'
+import { useNuxtApp } from '#app/nuxt'
+import { useServerConnectionInfo } from './modules/rpc/runtime/composables/rpc'
 
 import 'floating-vue/dist/style.css'
 import './styles/cm.css'
@@ -15,26 +13,16 @@ useHead({
   title: 'Vite DevTools',
 })
 
-const error = shallowRef()
-
-createDevBackend()
-  .then(async (b) => {
-    backend.value = b
-    await b.connect()
-    await fetchData(b)
-    return b
-  })
-  .catch((e) => {
-    console.error(e)
-    error.value = e
-  })
+const connectionInfo = useServerConnectionInfo()
+const { $connectToServer } = useNuxtApp()
+$connectToServer()
 </script>
 
 <template>
-  <div v-if="error" text-red>
-    {{ error }}
+  <div v-if="connectionInfo.error" text-red>
+    {{ connectionInfo.error }}
   </div>
-  <div v-else-if="!backend">
+  <div v-else-if="!connectionInfo.connected">
     Connecting...
   </div>
   <div v-else>

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

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import type { ModuleInfo, RolldownModuleTransformInfo, SessionContext } from '~~/shared/types'
+import { useRpc } from '#imports'
 import { computedAsync } from '@vueuse/core'
 import { nextTick, ref, watchEffect } from 'vue'
-import { backend } from '~/state/backend'
 
 const props = defineProps<{
   session: SessionContext
   module: string
 }>()
 
+const rpc = useRpc()
 const transforms = ref<RolldownModuleTransformInfo[]>([])
 watchEffect(async () => {
   const arg = {
@@ -17,7 +18,7 @@ watchEffect(async () => {
   }
   // fetch transforms in the next tick to avoid race conditions with module info
   nextTick(async () => {
-    transforms.value = await backend.value!.functions['vite:rolldown:get-module-transforms']?.(arg)
+    transforms.value = await rpc.value!['vite:rolldown:get-module-transforms']?.(arg)
   })
 })
 
@@ -27,7 +28,7 @@ const info = computedAsync(async () => {
     module: props.module,
   }
   return {
-    ...(await backend.value!.functions['vite:rolldown:get-module-info']?.(arg)),
+    ...(await rpc.value!['vite:rolldown:get-module-info']?.(arg)),
     transforms: transforms.value,
   } as ModuleInfo
 })

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { backend } from '../../state/backend'
+import { useRpc } from '#imports'
 
-const sessions = await backend.value!.functions['vite:rolldown:list-sessions']()
+const rpc = useRpc()
+const sessions = await rpc.value!['vite:rolldown:list-sessions']()
 </script>
 
 <template>

packages/devtools/src/app/modules/rpc/index.ts

@@ -0,0 +1,26 @@
+import { addPlugin, addServerHandler, createResolver, defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'devtools-rpc',
+    configKey: 'devtoolsRpc',
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url)
+    addServerHandler({
+      route: '/api/metadata.json',
+      method: 'get',
+      handler: resolver.resolve('./runtime/server/metadata.ts'),
+      env: 'dev',
+    })
+
+    addPlugin({
+      src: resolver.resolve('./runtime/plugin.ts'),
+      mode: 'client',
+    })
+
+    nuxt.hook('imports:dirs', (dirs) => {
+      dirs.push(resolver.resolve('./runtime/composables'))
+    })
+  },
+})

packages/devtools/src/app/modules/rpc/runtime/composables/rpc.ts

@@ -0,0 +1,17 @@
+import { useNuxtApp } from '#app/nuxt'
+import { until } from '@vueuse/core'
+
+export function useRpc() {
+  const { $rpc } = useNuxtApp()
+  return $rpc
+}
+
+export function useServerConnectionInfo() {
+  const { $serverConnectionInfo } = useNuxtApp()
+  return $serverConnectionInfo
+}
+
+export function onRpcConnected(callback: () => void) {
+  const { $serverConnectionInfo } = useNuxtApp()
+  until(() => $serverConnectionInfo.value.connected).toBe(true).then(callback)
+}