refactor: use $call style of birpc

Author: antfu

packages/core/src/client/inject/index.ts

@@ -15,7 +15,7 @@ export async function init(): Promise<void> {
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] RPC', rpc)
 
-  const rpcFunctions = await rpc['vite:core:list-rpc-functions']()
+  const rpcFunctions = await rpc.$call('vite:core:list-rpc-functions')
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] RPC Functions', rpcFunctions)
 

packages/core/src/client/webcomponents/state/dock.ts

@@ -58,7 +58,7 @@ export async function createDocksContext(
   panelStore?: Ref<DockPanelStorage>,
 ): Promise<DocksContext> {
   const selected = ref<DevToolsDockEntry | null>(null)
-  const dockEntries = shallowRef((await rpc['vite:core:list-dock-entries']()).map(entry => Object.freeze(entry)))
+  const dockEntries = shallowRef((await rpc.$call('vite:core:list-dock-entries')).map(entry => Object.freeze(entry)))
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] Docks Entries', [...dockEntries.value])
   // TODO: get board case from rpc when entries updates

packages/vite/src/app/components/data/AssetDetails.vue

@@ -27,10 +27,13 @@ const { state } = useAsyncState(
     if (!props.lazy)
       return
 
-    const res = await rpc.value!['vite:rolldown:get-asset-details']?.({
-      session: props.session.id,
-      id: props.asset.filename,
-    })
+    const res = await rpc.value.$call(
+      'vite:rolldown:get-asset-details',
+      {
+        session: props.session.id,
+        id: props.asset.filename,
+      },
+    )
     if ('chunk' in res) {
       return {
         chunks: [{ ...res?.chunk, type: 'chunk' }],
@@ -61,7 +64,10 @@ const _importers = computed(() => props.lazy ? state.value?.importers : props.im
 const _imports = computed(() => props.lazy ? state.value?.imports : props.imports)
 
 function openInEditor() {
-  rpc.value!['vite:core:open-in-editor'](`${props.session.meta.dir}/${props.asset.filename}`)
+  rpc.value.$call(
+    'vite:core:open-in-editor',
+    `${props.session.meta.dir}/${props.asset.filename}`,
+  )
 }
 </script>
 

packages/vite/src/app/components/data/AssetDetailsLoader.vue

@@ -16,10 +16,13 @@ const emit = defineEmits<{
 const rpc = useRpc()
 const { state } = useAsyncState(
   async () => {
-    const res = await rpc.value!['vite:rolldown:get-asset-details']?.({
-      session: props.session.id,
-      id: props.asset,
-    })
+    const res = await rpc.value.$call(
+      'vite:rolldown:get-asset-details',
+      {
+        session: props.session.id,
+        id: props.asset,
+      },
+    )
     if ('chunk' in res) {
       return {
         asset: { ...res?.asset, type: 'asset' },

packages/vite/src/app/components/data/ChunkDetails.vue

@@ -35,9 +35,10 @@ const { state, isLoading } = useAsyncState(
     if (props.chunks)
       return
 
-    return await rpc.value!['vite:rolldown:get-chunks-graph']?.({
-      session: props.session.id,
-    })
+    return await rpc.value.$call(
+      'vite:rolldown:get-chunks-graph',
+      { session: props.session.id },
+    )
   },
   null,
 )

packages/vite/src/app/components/data/ChunkDetailsLoader.vue

@@ -15,10 +15,13 @@ const emit = defineEmits<{
 const rpc = useRpc()
 const { state, isLoading } = useAsyncState(
   async () => {
-    return await rpc.value!['vite:rolldown:get-chunk-info']?.({
-      session: props.session.id,
-      id: props.chunk,
-    })
+    return await rpc.value.$call(
+      'vite:rolldown:get-chunk-info',
+      {
+        session: props.session.id,
+        id: props.chunk,
+      },
+    )
   },
   null,
 )

packages/vite/src/app/components/data/ModuleDetailsLoader.vue

@@ -28,7 +28,10 @@ watchEffect(async () => {
   nextTick(async () => {
     transforms.value = []
     transformsLoading.value = true
-    transforms.value = await rpc.value!['vite:rolldown:get-module-transforms']?.(arg)
+    transforms.value = await rpc.value.$call(
+      'vite:rolldown:get-module-transforms',
+      arg,
+    )
     transformsLoading.value = false
   })
 })
@@ -40,7 +43,10 @@ const info = computedAsync(async () => {
   }
   return {
     transforms: transforms.value,
-    ...(await rpc.value!['vite:rolldown:get-module-info']?.(arg)),
+    ...(await rpc.value.$call(
+      'vite:rolldown:get-module-info',
+      arg,
+    )),
   } as ModuleInfo
 })
 

packages/vite/src/app/components/data/PackageDetailsLoader.vue

@@ -19,10 +19,13 @@ const parsedPackage = computed(() => {
 const rpc = useRpc()
 const { state, isLoading } = useAsyncState(
   async () => {
-    return await rpc.value!['vite:rolldown:get-package-details']?.({
-      session: props.session.id,
-      id: props.package,
-    })
+    return await rpc.value.$call(
+      'vite:rolldown:get-package-details',
+      {
+        session: props.session.id,
+        id: props.package,
+      },
+    )
   },
   null,
 )

packages/vite/src/app/components/data/PluginDetailsLoader.vue

@@ -25,10 +25,13 @@ const route = useRoute()
 const rpc = useRpc()
 const { state, isLoading } = useAsyncState(
   async () => {
-    const res = await rpc.value!['vite:rolldown:get-plugin-details']?.({
-      session: props.session.id,
-      id: route.query.plugin as string,
-    })
+    const res = await rpc.value.$call(
+      'vite:rolldown:get-plugin-details',
+      {
+        session: props.session.id,
+        id: route.query.plugin as string,
+      },
+    )
     return res
   },
   null,

packages/vite/src/app/pages/compare/[sessions]/index.vue

@@ -15,9 +15,10 @@ const sessions = ref<SessionCompareContext[]>([])
 onMounted(async () => {
   isLoading.value = true
 
-  const summary = await rpc.value!['vite:rolldown:get-session-compare-summary']!({
-    sessions: params.sessions.split(','),
-  })
+  const summary = await rpc.value.$call(
+    'vite:rolldown:get-session-compare-summary',
+    { sessions: params.sessions.split(',') },
+  )
 
   sessions.value = summary