feat: version 1.0.0 (#21)

client/composables/rpc.ts

@@ -1,59 +1,18 @@
-import { createBirpc } from 'birpc'
-import { parse, stringify } from 'flatted'
-import { createHotContext } from 'vite-hot-client'
+import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
+import type { BirpcReturn } from 'birpc'
+import { ref } from 'vue'
+import type { NuxtDevtoolsClient } from '@nuxt/devtools-kit/dist/types'
 import type { ClientFunctions, ServerFunctions } from '../../src/types'
-import { WS_EVENT_NAME } from '../../src/constants'
+import { RPC_NAMESPACE } from '../../src/constants'
 
-export const wsConnecting = ref(true)
-export const wsError = ref<any>()
-export const wsConnectingDebounced = useDebounce(wsConnecting, 2000)
+export const devtools = ref<NuxtDevtoolsClient>()
+export const devtoolsRpc = ref<NuxtDevtoolsClient['rpc']>()
+export const rpc = ref<BirpcReturn<ServerFunctions, ClientFunctions>>()
 
-const connectPromise = connectVite()
-// eslint-disable-next-line @typescript-eslint/ban-types
-let onMessage: Function = () => {}
+onDevtoolsClientConnected(async (client) => {
+  devtoolsRpc.value = client.devtools.rpc
+  devtools.value = client.devtools
 
-export const clientFunctions = {
-  // will be added in app.vue
-} as ClientFunctions
-
-export const extendedRpcMap = new Map<string, any>()
-
-export const rpc = createBirpc<ServerFunctions>(clientFunctions, {
-  post: async (d) => {
-    (await connectPromise).send(WS_EVENT_NAME, d)
-  },
-  on: (fn) => {
-    onMessage = fn
-  },
-  serialize: stringify,
-  deserialize: parse,
-  resolver(name, fn) {
-    if (fn)
-      return fn
-    if (!name.includes(':'))
-      return
-    const [namespace, fnName] = name.split(':')
-    return extendedRpcMap.get(namespace)?.[fnName]
-  },
-  onError(error, name) {
-    console.error(`[nuxt-devtools] RPC error on executing "${name}":`, error)
-  },
-  timeout: 120_000,
-})
-
-async function connectVite() {
-  const hot = await createHotContext()
-
-  if (!hot)
-    throw new Error('Unable to connect to devtools')
-
-  hot.on(WS_EVENT_NAME, (data) => {
-    onMessage(data)
+  rpc.value = client.devtools.extendClientRpc<ServerFunctions, ClientFunctions>(RPC_NAMESPACE, {
   })
-
-  // TODO:
-  // hot.on('vite:connect', (data) => {})
-  // hot.on('vite:disconnect', (data) => {})
-
-  return hot
-}
+})