feat: vuex panel

packages/applet/src/components/timeline/index.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { Pane, Splitpanes } from 'splitpanes'
+import { onAddTimelineEvent } from '@vue/devtools-core'
+import { computed, ref } from 'vue'
+
+import type { InspectorState, TimelineEvent } from '@vue/devtools-kit'
+import EventList from './EventList.vue'
+import Navbar from '~/components/basic/Navbar.vue'
+import Empty from '~/components/basic/Empty.vue'
+import RootStateViewer from '~/components/state/RootStateViewer.vue'
+import { createExpandedContext } from '~/composables/toggle-expanded'
+import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
+
+const props = defineProps<{
+  layerIds: string[]
+  docLink: string
+  githubRepoLink: string
+}>()
+
+const { expanded: expandedStateNodes } = createExpandedContext('timeline-state')
+
+// event info + group info = [0, 1]
+expandedStateNodes.value = ['0', '1']
+
+const eventList = ref<TimelineEvent['event'][]>([])
+const groupList = ref<Map<number, TimelineEvent['event'][]>>(new Map())
+const selectedEventIndex = ref(0)
+const selectedEventInfo = computed(() => eventList.value[selectedEventIndex.value] ?? null)
+// event info
+const normalizedEventInfo = computed(() => {
+  const info: InspectorState[] = []
+  for (const key in selectedEventInfo.value?.data) {
+    info.push({
+      key,
+      type: key,
+      editable: false,
+      value: selectedEventInfo.value.data[key]!,
+    })
+  }
+  return info
+})
+// group info
+const normalizedGroupInfo = computed(() => {
+  const groupId = selectedEventInfo.value?.groupId
+  const groupInfo = groupList.value.get(groupId)!
+  if (groupInfo) {
+    const duration = groupInfo[groupInfo.length - 1]?.time - (groupInfo[0]?.time ?? 0)
+    return [{
+      key: 'events',
+      type: 'events',
+      editable: false,
+      value: groupInfo.length,
+    }, duration && {
+      key: 'duration',
+      type: 'duration',
+      editable: false,
+      value: `${duration}ms`,
+    }].filter(Boolean)
+  }
+  return undefined
+})
+
+// normalize display info
+const displayedInfo = computed(() => {
+  return { 'Event Info': normalizedEventInfo.value, ...(normalizedGroupInfo.value && { 'Group Info': normalizedGroupInfo.value }) } as unknown as Record<string, InspectorState[]>
+})
+
+function normalizeGroupList(event: TimelineEvent['event']) {
+  const groupId = event.groupId
+  if (groupId !== undefined) {
+    groupList.value.set(groupId, groupList.value.get(groupId) ?? [])
+    groupList.value.get(groupId)?.push(event)
+  }
+}
+
+onAddTimelineEvent((payload) => {
+  if (!payload)
+    return
+
+  const { layerId, event } = payload
+  if (!props.layerIds.includes(layerId))
+    return
+
+  eventList.value.push(event)
+  normalizeGroupList(event)
+})
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <DevToolsHeader :doc-link="docLink" :github-repo-link="githubRepoLink">
+      <Navbar />
+    </DevToolsHeader>
+    <template v-if="eventList.length">
+      <div class="flex-1 overflow-hidden">
+        <Splitpanes class="h-full">
+          <Pane border="r base" size="40" h-full>
+            <div h-full select-none overflow-scroll class="no-scrollbar">
+              <EventList v-model="selectedEventIndex" :data="eventList" />
+            </div>
+          </Pane>
+          <Pane size="60">
+            <div h-full select-none overflow-scroll class="no-scrollbar">
+              <RootStateViewer class="p3" :data="displayedInfo" node-id="" inspector-id="" :disable-edit="true" expanded-state-id="timeline-state" />
+            </div>
+          </Pane>
+        </Splitpanes>
+      </div>
+    </template>
+    <Empty v-else class="flex-1">
+      No events
+    </Empty>
+  </div>
+</template>

packages/applet/src/components/tree/TreeViewer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ComponentTreeNode } from '@vue/devtools-kit'
+import type { ComponentTreeNode, InspectorTree } from '@vue/devtools-kit'
 import ToggleExpanded from '~/components/basic/ToggleExpanded.vue'
 import ComponentTreeViewer from '~/components/tree/TreeViewer.vue'
 import NodeTag from '~/components/basic/NodeTag.vue'
@@ -8,7 +8,7 @@ import { useToggleExpanded } from '~/composables/toggle-expanded'
 import { useSelect } from '~/composables/select'
 
 withDefaults(defineProps<{
-  data: ComponentTreeNode[]
+  data: ComponentTreeNode[] | InspectorTree[]
   depth: number
 }>(), {
   depth: 0,
@@ -17,6 +17,10 @@ const selectedNodeId = defineModel()
 const { expanded, toggleExpanded } = useToggleExpanded()
 const { select: _select } = useSelect()
 
+function normalizeLabel(item: ComponentTreeNode | InspectorTree) {
+  return ('name' in item && item?.name) || ('label' in item && item.label)
+}
+
 function select(id: string) {
   selectedNodeId.value = id
 }
@@ -46,7 +50,7 @@ function select(id: string) {
       <span v-else pl5 />
       <span font-state-field text-4>
         <span class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&lt;</span>
-        <span group-hover:text-white class="ws-nowrap [.active_&]:(text-white)">{{ item.name }}</span>
+        <span group-hover:text-white class="ws-nowrap [.active_&]:(text-white)">{{ normalizeLabel(item) }}</span>
         <span class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&gt;</span>
       </span>
       <NodeTag v-for="(_item, _index) in item.tags" :key="_index" :tag="_item" />

packages/applet/src/index.ts

@@ -6,3 +6,4 @@ import 'floating-vue/dist/style.css'
 export * from './modules/pinia'
 export * from './modules/components'
 export * from './modules/router'
+export * from './modules/vuex'

packages/applet/src/modules/pinia/components/store/Index.vue

@@ -4,7 +4,7 @@ import { Pane, Splitpanes } from 'splitpanes'
 import { getInspectorState, getInspectorTree, onInspectorStateUpdated, onInspectorTreeUpdated } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
 import type { InspectorNodeTag, InspectorState } from '@vue/devtools-kit'
-import Navbar from '../Navbar.vue'
+import Navbar from '~/components/basic/Navbar.vue'
 import SelectiveList from '~/components/basic/SelectiveList.vue'
 import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 import Empty from '~/components/basic/Empty.vue'

packages/applet/src/modules/pinia/components/timeline/Index.vue

@@ -1,109 +1,9 @@
 <script setup lang="ts">
-import { Pane, Splitpanes } from 'splitpanes'
-import { onAddTimelineEvent } from '@vue/devtools-core'
-import { computed, ref } from 'vue'
+import Timeline from '~/components/timeline/index.vue'
 
-import type { InspectorState, TimelineEvent } from '@vue/devtools-kit'
-import Navbar from '../Navbar.vue'
-import EventList from './EventList.vue'
-import Empty from '~/components/basic/Empty.vue'
-import RootStateViewer from '~/components/state/RootStateViewer.vue'
-import { createExpandedContext } from '~/composables/toggle-expanded'
-import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
-
-const { expanded: expandedStateNodes } = createExpandedContext('timeline-state')
-
-// event info + group info = [0, 1]
-expandedStateNodes.value = ['0', '1']
-
-const LAYER_ID = 'pinia:mutations'
-const eventList = ref<TimelineEvent['event'][]>([])
-const groupList = ref<Map<number, TimelineEvent['event'][]>>(new Map())
-const selectedEventIndex = ref(0)
-const selectedEventInfo = computed(() => eventList.value[selectedEventIndex.value] ?? null)
-// event info
-const normalizedEventInfo = computed(() => {
-  const info: InspectorState[] = []
-  for (const key in selectedEventInfo.value?.data) {
-    info.push({
-      key,
-      type: key,
-      editable: false,
-      value: selectedEventInfo.value.data[key]!,
-    })
-  }
-  return info
-})
-// group info
-const normalizedGroupInfo = computed(() => {
-  const groupId = selectedEventInfo.value?.groupId
-  const groupInfo = groupList.value.get(groupId)!
-  if (groupInfo) {
-    const duration = groupInfo[groupInfo.length - 1]?.time - (groupInfo[0]?.time ?? 0)
-    return [{
-      key: 'events',
-      type: 'events',
-      editable: false,
-      value: groupInfo.length,
-    }, duration && {
-      key: 'duration',
-      type: 'duration',
-      editable: false,
-      value: `${duration}ms`,
-    }].filter(Boolean)
-  }
-  return undefined
-})
-
-// normalize display info
-const displayedInfo = computed(() => {
-  return { 'Event Info': normalizedEventInfo.value, ...(normalizedGroupInfo.value && { 'Group Info': normalizedGroupInfo.value }) } as unknown as Record<string, InspectorState[]>
-})
-
-function normalizeGroupList(event: TimelineEvent['event']) {
-  const groupId = event.groupId
-  if (groupId !== undefined) {
-    groupList.value.set(groupId, groupList.value.get(groupId) ?? [])
-    groupList.value.get(groupId)?.push(event)
-  }
-}
-
-onAddTimelineEvent((payload) => {
-  if (!payload)
-    return
-
-  const { layerId, event } = payload
-  if (layerId !== LAYER_ID)
-    return
-
-  eventList.value.push(event)
-  normalizeGroupList(event)
-})
+const LAYER_IDS = ['pinia:mutations']
 </script>
 
 <template>
-  <div class="h-full flex flex-col">
-    <DevToolsHeader doc-link="https://pinia.vuejs.org/" github-repo-link="https://github.com/vuejs/pinia">
-      <Navbar />
-    </DevToolsHeader>
-    <template v-if="eventList.length">
-      <div class="flex-1 overflow-hidden">
-        <Splitpanes class="h-full">
-          <Pane border="r base" size="40" h-full>
-            <div h-full select-none overflow-scroll class="no-scrollbar">
-              <EventList v-model="selectedEventIndex" :data="eventList" />
-            </div>
-          </Pane>
-          <Pane size="60">
-            <div h-full select-none overflow-scroll class="no-scrollbar">
-              <RootStateViewer class="p3" :data="displayedInfo" node-id="" inspector-id="" :disable-edit="true" expanded-state-id="timeline-state" />
-            </div>
-          </Pane>
-        </Splitpanes>
-      </div>
-    </template>
-    <Empty v-else class="flex-1">
-      No events
-    </Empty>
-  </div>
+  <Timeline :layer-ids="LAYER_IDS" doc-link="https://pinia.vuejs.org/" github-repo-link="https://github.com/vuejs/pinia" />
 </template>

packages/applet/src/modules/router/components/routes/Index.vue

@@ -4,7 +4,7 @@ import { Pane, Splitpanes } from 'splitpanes'
 import { getInspectorState, getInspectorTree, onInspectorStateUpdated, onInspectorTreeUpdated } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
 import type { InspectorNodeTag, InspectorState } from '@vue/devtools-kit'
-import Navbar from '../Navbar.vue'
+import Navbar from '~/components/basic/Navbar.vue'
 import SelectiveList from '~/components/basic/SelectiveList.vue'
 import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 import Empty from '~/components/basic/Empty.vue'