feat: add timeline layer (#4)

Author: vinpogo

src/debug.ts

@@ -1,4 +1,10 @@
-import { getCurrentInstance, watch } from 'vue'
+import {
+  effectScope,
+  getCurrentInstance,
+  getCurrentScope,
+  onScopeDispose,
+  watch,
+} from 'vue'
 import { remove, upsert } from './registry'
 import type { VuebuggerEntry } from './types'
 
@@ -16,28 +22,33 @@ export function debug<T extends Record<string, any>>(
     'No component'
   const uid = `${componentName}/${groupId}-${Math.random().toString(36).slice(2, 9)}`
 
-  watch(
-    () => state,
-    (value, _, onCleanup) => {
-      upsert({
+  const scope = getCurrentScope() ?? effectScope()
+  scope.run(() => {
+    onScopeDispose(() =>
+      remove({
         groupId,
         uid,
         componentName,
         componentInstance: instance,
-        debugState: value,
-      })
-      onCleanup(() => {
-        remove({
+        debugState: state,
+      }),
+    )
+    watch(
+      () => state,
+      (value, _) => {
+        upsert({
           groupId,
           uid,
           componentName,
           componentInstance: instance,
           debugState: value,
         })
-      })
-    },
-    { deep: true },
-  )
-
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    )
+  })
   return state
 }

src/devtools.ts

@@ -8,7 +8,8 @@ import type {
   VuebuggerEntry,
 } from './types'
 
-const INSPECTOR_ID = 'composables'
+const INSPECTOR_ID = 'vuebugger-inspector'
+const TIMELINE_ID = 'vuebugger-timeline'
 
 export const handleGetInspectorTree: DevtoolsApiHandler<
   'getInspectorTree'
@@ -123,16 +124,26 @@ export function setupComposableDevtools<T>(app: App<T>) {
         treeFilterPlaceholder:
           'Search by composable or component name...',
       })
+      api.addTimelineLayer({
+        id: TIMELINE_ID,
+        label: 'Vuebugger',
+        color: 155,
+      })
 
-      onUpdate(
-        (
-          componentInstance: VuebuggerEntry['componentInstance'],
-        ) => {
-          api.sendInspectorTree(INSPECTOR_ID)
-          api.sendInspectorState(INSPECTOR_ID)
-          api.notifyComponentUpdate(componentInstance)
-        },
-      )
+      onUpdate((entry: VuebuggerEntry) => {
+        api.sendInspectorTree(INSPECTOR_ID)
+        api.sendInspectorState(INSPECTOR_ID)
+        api.notifyComponentUpdate(entry.componentInstance)
+        api.addTimelineEvent({
+          layerId: TIMELINE_ID,
+          event: {
+            time: api.now(),
+            data: entry,
+            title: `${entry.uid} state change`,
+            groupId: entry.uid,
+          },
+        })
+      })
 
       api.on.getInspectorTree(handleGetInspectorTree)
       api.on.getInspectorState(handleGetInspectorState(api))

src/registry.ts

@@ -10,17 +10,14 @@ export const byGroupId = new Map<
   Set<VuebuggerEntry['uid']>
 >()
 
-const callbacks: ((
-  componentInstance: VuebuggerEntry['componentInstance'],
-) => void)[] = []
-const runCallbacks = (
-  componentInstance: VuebuggerEntry['componentInstance'],
-) => callbacks.forEach((cb) => cb(componentInstance))
+const callbacks: ((entry: VuebuggerEntry) => void)[] = []
+const runCallbacks = (entry: VuebuggerEntry) =>
+  callbacks.forEach((cb) => cb(entry))
 const withCallbacks =
   (fn: (entry: VuebuggerEntry) => void) =>
   (entry: VuebuggerEntry) => {
     fn(entry)
-    runCallbacks(entry.componentInstance)
+    runCallbacks(entry)
   }
 
 export const upsert = withCallbacks(
@@ -44,9 +41,7 @@ export const remove = withCallbacks(
 )
 
 export const onUpdate = (
-  fn: (
-    componentInstance: VuebuggerEntry['componentInstance'],
-  ) => void,
+  fn: (entry: VuebuggerEntry) => void,
 ) => {
   callbacks.push(fn)
 }