chore: setup rpc

Author: antfu

packages/devtools/src/app/app.vue

@@ -1,5 +1,9 @@
 <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, rawEvents } from './state/data'
 
 import 'floating-vue/dist/style.css'
 import './styles/global.css'
@@ -8,10 +12,24 @@ import './composables/dark'
 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
+  })
 </script>
 
 <template>
   <div>
-    Hello
+    {{ rawEvents }}
   </div>
 </template>

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

@@ -0,0 +1,23 @@
+import type { ConnectionMeta } from '../../shared/types'
+import { useRuntimeConfig } from '#app/nuxt'
+import { createStaticBackend } from './static'
+import { createWebSocketBackend } from './websocket'
+
+export async function createDevBackend() {
+  const config = useRuntimeConfig()
+  const baseURL = config.app.baseURL
+  const metadata: ConnectionMeta = await fetch(`${baseURL}api/metadata.json`)
+    .then(r => r.json())
+
+  if (metadata.backend === 'static') {
+    return createStaticBackend()
+  }
+  else {
+    const url = `${location.protocol.replace('http', 'ws')}//${location.hostname}:${metadata.websocket}`
+
+    return createWebSocketBackend({
+      name: 'dev',
+      websocketUrl: url,
+    })
+  }
+}

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

@@ -0,0 +1,8 @@
+import type { Backend } from '../types/backend'
+import { shallowRef } from 'vue'
+
+export const backend = shallowRef<Backend>()
+
+export function getBackend() {
+  return backend.value!
+}

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

@@ -0,0 +1,37 @@
+import type { ServerFunctionsDump } from '../../shared/types'
+import type { Backend } from '../types/backend'
+import { useRuntimeConfig } from '#app/nuxt'
+import { parse } from 'structured-clone-es'
+import { ref } from 'vue'
+
+export function createStaticBackend(): Backend {
+  const config = useRuntimeConfig()
+  const baseURL = config.app.baseURL
+  const status: Backend['status'] = ref('connecting')
+  const error = ref<Error | undefined>(undefined)
+  const getDump = fetch(`${baseURL}api/rpc-dump.json`)
+    .then(res => res.text())
+    .then(text => parse(text) as ServerFunctionsDump)
+    .then((dump) => {
+      status.value = 'connected'
+      return dump
+    })
+    .catch((e) => {
+      status.value = 'error'
+      console.error('Failed to fetch RPC dump:', e)
+      error.value = e
+      throw e
+    })
+
+  return {
+    name: 'static',
+    status,
+    connectionError: error,
+    connect() {},
+    functions: {
+      getPayload: () => {
+        return getDump.then(dump => dump.getPayload)
+      },
+    },
+  }
+}

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

@@ -0,0 +1,102 @@
+import type { ClientFunctions, ServerFunctions } from '../../shared/types'
+import type { Backend } from '../types/backend'
+import { createBirpc } from 'birpc'
+import { parse, stringify } from 'structured-clone-es'
+import { ref, shallowRef } from 'vue'
+
+export interface WebSocketBackendOptions {
+  name: string
+  websocketUrl: string
+}
+
+export function createWebSocketBackend(options: WebSocketBackendOptions): Backend {
+  const status: Backend['status'] = ref('idle')
+  const error: Backend['connectionError'] = shallowRef(undefined)
+
+  let connectPromise: Promise<WebSocket> | undefined
+  let onMessage: any = () => {}
+
+  const clientFunctions = {} as ClientFunctions
+
+  const rpc = createBirpc<ServerFunctions, ClientFunctions>(clientFunctions, {
+    post: async (d) => {
+      if (!connectPromise)
+        connectPromise = connect()
+      const ws = await connectPromise
+      while (ws.readyState === ws.CONNECTING) {
+        await new Promise<void>(resolve => setTimeout(resolve, 100))
+      }
+      if (ws.readyState !== ws.OPEN) {
+        error.value ||= new Error('WebSocket not open, message sending dismissed')
+        throw error.value
+      }
+      ws.send(d)
+    },
+    on: (fn) => {
+      onMessage = fn
+    },
+    serialize: stringify,
+    deserialize: parse,
+    onError(err, name) {
+      error.value = err
+      console.error(`[vite-devtools] RPC error on executing "${name}":`)
+      console.error(err)
+    },
+    timeout: 120_000,
+  })
+
+  async function connect() {
+    try {
+      const ws = new WebSocket(options.websocketUrl)
+
+      ws.addEventListener('close', () => {
+        status.value = 'idle'
+      })
+      ws.addEventListener('open', () => {
+        status.value = 'connected'
+        error.value = undefined
+      })
+      ws.addEventListener('error', (e) => {
+        status.value = 'error'
+        error.value = e
+      })
+      ws.addEventListener('message', (e) => {
+        status.value = 'connected'
+        error.value = undefined
+        onMessage(e.data)
+      })
+
+      return ws
+    }
+    catch (e) {
+      status.value = 'error'
+      error.value = e
+      throw e
+    }
+  }
+
+  return {
+    name: options.name,
+    status,
+    connectionError: error,
+    async connect() {
+      if (!connectPromise)
+        connectPromise = connect()
+      await connectPromise
+    },
+    isDynamic: true,
+    functions: {
+      getPayload: async () => {
+        try {
+          return await rpc.getPayload()
+        }
+        catch (err) {
+          error.value = err
+          throw err
+        }
+      },
+      openInEditor: (filename: string) => rpc.openInEditor.asEvent(filename),
+      openInFinder: (filename: string) => rpc.openInFinder.asEvent(filename),
+    },
+  }
+}

packages/devtools/src/app/state/backend.ts

@@ -0,0 +1,4 @@
+import type { Backend } from '../types/backend'
+import { shallowRef } from 'vue'
+
+export const backend = shallowRef<Backend | null>(null)

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

@@ -0,0 +1,8 @@
+import type { Backend } from '../types/backend'
+import { ref } from 'vue'
+
+export const rawEvents = ref<any>([])
+
+export async function fetchData(backend: Backend) {
+  rawEvents.value = await backend.functions.getPayload()
+}

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

@@ -0,0 +1,15 @@
+import type { Ref } from 'vue'
+import type { ServerFunctions } from '../../shared/types'
+
+export type Functions =
+  & Partial<ServerFunctions>
+  & Pick<ServerFunctions, 'getPayload'>
+
+export interface Backend {
+  name: string
+  status: Ref<'idle' | 'connecting' | 'connected' | 'error'>
+  connectionError: Ref<unknown | undefined>
+  connect: () => Promise<void> | void
+  isDynamic?: boolean
+  functions: Functions
+}