feat: button to reset all (#10)

client/pages/index.vue

@@ -13,14 +13,20 @@
     <p v-if="!devtools">
       awaiting devtools connection
     </p>
-    <div v-else>
+    <div v-else class="px-2">
+      <div class="flex">
+        <NButton @click="rpc.reset()">
+          Reset
+        </NButton>
+      </div>
       <RouteList :routes="serverData.routes" />
     </div>
   </NCard>
 </template>
 
 <script setup lang="ts">
 import { useDevtoolsClient, onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
+import { BirpcReturn } from 'birpc'
 import { ClientFunctions, ServerData, ServerFunctions } from '~/../src/types'
 import { RPC_NAMESPACE } from '~/../src/runtime/utils'
 import { ref } from '#imports'
@@ -29,15 +35,14 @@ const devtools = useDevtoolsClient()
 const serverData = ref<ServerData>({
   routes: {}
 })
-
+let rpc: BirpcReturn<ServerFunctions, ClientFunctions>
 onDevtoolsClientConnected(async (client) => {
-  const rpc = client.devtools.extendClientRpc<ServerFunctions, ClientFunctions>(RPC_NAMESPACE, {
+  rpc = client.devtools.extendClientRpc<ServerFunctions, ClientFunctions>(RPC_NAMESPACE, {
     updateData (data) {
       serverData.value = data
     }
   })
 
   serverData.value = await rpc.getStats()
 })
-
 </script>

src/runtime/devtools/init.ts

@@ -41,6 +41,14 @@ export default function initServer (nuxt: Nuxt) {
         return {
           routes: routesCount
         }
+      },
+      reset () {
+        for (const route in routesCount) {
+          routesCount[route] = 0
+        }
+        rpc.broadcast.updateData({
+          routes: routesCount
+        })
       }
     })
 

src/types.ts

@@ -19,6 +19,7 @@ export type ServerData = {
 export type ServerFunctions = {
     updateStats(route: string): void
     getStats(): ServerData
+    reset(): void
 }
 
 export type ClientFunctions = {