From 3b9ed1777621b1c8c0f781f5c974357da042c6e7 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 28 Jul 2021 12:03:43 +0200
Subject: [PATCH] feat(devtools): show hot update in timeline

---
 src/devtools/plugin.ts | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/devtools/plugin.ts b/src/devtools/plugin.ts
index 2bf932d9..eda839a1 100644
--- 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)
-- 
2.47.2