feat(devtools): show cache writes

Author: Akryum

packages/nuxt/client/components/devtools/Devtools.vue

@@ -26,6 +26,8 @@ const tab = useLocalStorage('rstore-devtools-tab', '0')
 const currentTab = computed(() => tabs[Number.parseInt(tab.value)]!)
 
 const cache = useStoreCache()
+
+const showCacheOps = useLocalStorage('rstore-devtools-show-cache-ops', false)
 </script>
 
 <template>
@@ -44,8 +46,15 @@ const cache = useStoreCache()
         }"
       />
 
-      <div class="flex-1 flex justify-end items-center gap-1">
+      <div class="flex-1 flex justify-end items-center gap-2">
         <template v-if="currentTab.slot === 'history'">
+          <USwitch
+            v-model="showCacheOps"
+            size="xs"
+            label="Cache"
+            class="text-xs"
+          />
+
           <UTooltip text="Clear history">
             <UButton
               icon="lucide:trash"
@@ -70,7 +79,7 @@ const cache = useStoreCache()
       <template v-if="currentTab.slot === 'history'">
         <div class="flex flex-col-reverse p-1 gap-1">
           <DevtoolsHistoryItem
-            v-for="(item, index) in stats.store"
+            v-for="(item, index) in showCacheOps ? stats.store : stats.store.filter((item) => !item.operation.startsWith('cache'))"
             :key="index"
             :item
           />

packages/nuxt/client/components/devtools/HistoryItem.vue

@@ -3,8 +3,11 @@ const props = defineProps<{
   item: StoreHistoryItem
 }>()
 
-const startedAgo = useTimeAgo(() => props.item.started)
+const startedAgo = useTimeAgo(() => props.item.started ?? props.item.ended)
 const duration = computed(() => {
+  if (!props.item.started) {
+    return null
+  }
   const diff = props.item.ended.getTime() - props.item.started.getTime()
   return diff < 1000 ? `${diff}ms` : `${(diff / 1000).toFixed(2)}s`
 })
@@ -15,6 +18,7 @@ const icons = {
   create: 'lucide:plus',
   update: 'lucide:pen',
   delete: 'lucide:trash',
+  cacheWrite: 'lucide:database',
 }
 </script>
 
@@ -95,7 +99,7 @@ const icons = {
       </div>
       <div class="flex items-baseline gap-2 pt-0.5 pr-0.5">
         <span class="opacity-50 font-sans">{{ startedAgo }}</span>
-        <span>{{ duration }}</span>
+        <span v-if="duration">{{ duration }}</span>
       </div>
     </div>
   </div>

packages/nuxt/client/utils/stats.ts

@@ -3,7 +3,7 @@ import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
 export function useStoreStats() {
   const client = useDevtoolsClient()
 
-  const stats = computed(() => client.value?.host.nuxt.$rstoreDevtoolsStats())
+  const stats = computed(() => client.value?.host.nuxt.$rstoreDevtoolsStats() as { store: StoreHistoryItem[] })
 
   client.value?.host.nuxt.$rstoreHistoryUpdated?.on(() => {
     triggerRef(stats)

packages/nuxt/client/utils/types.ts

@@ -1,13 +1,13 @@
 import type { FindOptions } from '@rstore/shared'
 
 export interface StoreHistoryItem {
-  operation: 'fetchFirst' | 'fetchMany' | 'create' | 'update' | 'delete'
+  operation: 'fetchFirst' | 'fetchMany' | 'create' | 'update' | 'delete' | 'cacheWrite'
   model: string
   key?: string
   findOptions?: FindOptions<any, any, any>
   item?: any
   result: any
-  started: Date
+  started?: Date | undefined
   ended: Date
   server?: boolean
 }

packages/nuxt/src/runtime/devtools.ts

@@ -99,6 +99,18 @@ export const devtoolsPlugin = definePlugin({
         historyUpdated.trigger()
       }
     })
+
+    hook('afterCacheWrite', (payload) => {
+      storeStats.value.store.push({
+        operation: 'cacheWrite',
+        model: payload.model.name,
+        ended: new Date(),
+        result: payload.result,
+        key: payload.key,
+        server: import.meta.server,
+      })
+      historyUpdated.trigger()
+    })
   },
 })