feat(vite): init rpc

Author: webfansplz

packages/vite/src/app/composables/rpc.ts

@@ -0,0 +1,59 @@
+import type {} from '@vitejs/devtools'
+import type { DevToolsRpcClient } from '@vitejs/devtools-kit/client'
+import type {} from '../../node/rpc'
+import { useRuntimeConfig } from '#app/nuxt'
+import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
+import { reactive, shallowRef } from 'vue'
+
+export const rpcConnectionState = reactive<{
+  connected: boolean
+  error: Error | null
+}>({
+  connected: false,
+  error: null,
+})
+
+const rpc = shallowRef<DevToolsRpcClient>(undefined!)
+
+export async function connect() {
+  const runtimeConfig = useRuntimeConfig()
+  try {
+    rpc.value = await getDevToolsRpcClient({
+      baseURL: [
+        '/.devtools/',
+        runtimeConfig.app.baseURL,
+      ],
+      connectionMeta: runtimeConfig.app.connection,
+      wsOptions: {
+        onConnected: () => {
+          rpcConnectionState.connected = true
+        },
+        onError: (e) => {
+          rpcConnectionState.error = e
+        },
+        onDisconnected: () => {
+          rpcConnectionState.connected = false
+        },
+      },
+      rpcOptions: {
+        onGeneralError: (e, name) => {
+          rpcConnectionState.error = e
+          console.error(`[vite-devtools] RPC error on executing "${name}":`)
+        },
+        onFunctionError: (e, name) => {
+          rpcConnectionState.error = e
+          console.error(`[vite-devtools] RPC error on executing "${name}":`)
+        },
+      },
+    })
+
+    rpcConnectionState.connected = true
+  }
+  catch (e) {
+    rpcConnectionState.error = e as Error
+  }
+}
+
+export function useRpc() {
+  return rpc
+}

packages/vite/src/modules/rpc.ts

@@ -0,0 +1,24 @@
+import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
+import { DevToolsServer } from '../../../core/src/node/plugins/server'
+import { rpcFunctions } from '../node/rpc'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'devtools-rpc',
+    configKey: 'devtoolsRpc',
+  },
+  setup() {
+    addVitePlugin({
+      name: 'vite:devtools:vite',
+      devtools: {
+        setup(ctx) {
+          for (const fn of rpcFunctions) {
+            ctx.rpc.register(fn)
+          }
+        },
+      },
+    })
+
+    addVitePlugin(DevToolsServer())
+  },
+})

packages/vite/src/node/rpc/functions/hi.ts

@@ -0,0 +1,17 @@
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+
+export const viteHi = defineRpcFunction({
+  name: 'vite:hi',
+  type: 'query',
+  setup: (context) => {
+    return {
+      handler: async () => {
+        return {
+          message: 'Hi from server.',
+          cwd: context.cwd,
+          timestamp: Date.now(),
+        }
+      },
+    }
+  },
+})

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

@@ -0,0 +1,13 @@
+import type { RpcDefinitionsToFunctions } from '@vitejs/devtools-kit'
+import { viteHi } from './functions/hi'
+import '@vitejs/devtools-kit'
+
+export const rpcFunctions = [
+  viteHi,
+] as const
+
+export type ServerFunctions = RpcDefinitionsToFunctions<typeof rpcFunctions>
+
+declare module '@vitejs/devtools-kit' {
+  export interface DevToolsRpcServerFunctions extends ServerFunctions {}
+}

packages/vite/src/nuxt.config.ts

@@ -14,6 +14,7 @@ export default defineNuxtConfig({
     '@unocss/nuxt',
     '@nuxt/eslint',
     'nuxt-eslint-auto-explicit-import',
+    './modules/rpc',
   ],
 
   alias,