feat(devtools): show hot update in timeline

diff --git a/src/devtools/plugin.ts b/src/devtools/plugin.ts
index 2bf932d9d25e740e4792349c4379527b59376167..eda839a11906d19a576cd7e9e0fd61358d52fd62 100644 (file)
--- a/src/devtools/plugin.ts
+++ b/src/devtools/plugin.ts
@@ -1,5 +1,5 @@
 import { setupDevtoolsPlugin, TimelineEvent } from '@vue/devtools-api'
-import { App, ComponentPublicInstance, toRaw } from 'vue'
+import { App, ComponentPublicInstance, markRaw, toRaw } from 'vue'
 import { Pinia, PiniaPluginContext } from '../rootStore'
 import {
   GettersTree,
@@ -351,6 +351,23 @@ function addStoreToDevtools(app: App, store: StoreGeneric) {
         })
       }, true)
 
+      const hotUpdate = store._hotUpdate
+      store._hotUpdate = markRaw((newStore) => {
+        hotUpdate(newStore)
+        api.addTimelineEvent({
+          layerId: MUTATIONS_LAYER_ID,
+          event: {
+            time: Date.now(),
+            title: '🔥 ' + store.$id,
+            subtitle: 'HMR update',
+            data: {
+              id: formatDisplay(store.$id),
+              info: formatDisplay(`HMR update`),
+            },
+          },
+        })
+      })
+
       // trigger an update so it can display new registered stores
       api.notifyComponentUpdate()
       api.sendInspectorTree(INSPECTOR_ID)