chore: update

vuejs · Oct 1, 2024 · 9885469 · 9885469
1 parent 64990af
commit 9885469
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 16 deletions.
diff --git a/packages/applet/src/components/timeline/index.vue b/packages/applet/src/components/timeline/index.vue
@@ -12,11 +12,14 @@ import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import { createExpandedContext } from '~/composables/toggle-expanded'
 import EventList from './EventList.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   layerIds: string[]
   docLink: string
   githubRepoLink?: string
-}>()
+  headerVisible?: boolean
+}>(), {
+  headerVisible: true,
+})
 
 const { expanded: expandedStateNodes } = createExpandedContext('timeline-state')
 
@@ -96,7 +99,7 @@ onUnmounted(() => {
 
 <template>
   <div class="h-full flex flex-col">
-    <DevToolsHeader :doc-link="docLink" :github-repo-link="githubRepoLink">
+    <DevToolsHeader v-if="headerVisible" :doc-link="docLink" :github-repo-link="githubRepoLink">
       <Navbar />
     </DevToolsHeader>
     <template v-if="eventList.length">

diff --git a/packages/applet/src/index.ts b/packages/applet/src/index.ts
@@ -1,4 +1,5 @@
 import SelectiveList from './components/basic/SelectiveList.vue'
+import Timeline from './components/timeline/index.vue'
 import 'uno.css'
 import '@unocss/reset/tailwind.css'
 import './styles/base.css'
@@ -13,4 +14,5 @@ export * from './modules/router'
 
 export {
   SelectiveList,
+  Timeline,
 }
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectiveList } from '@vue/devtools-applet'
+import { SelectiveList, Timeline } from '@vue/devtools-applet'
 import {
   rpc,
   useDevToolsState,
@@ -36,6 +36,17 @@ function toggleApp(id: string) {
 }
 
 // #endregion
+
+const activeTimelineLayer = 'component-event'
+const timelineLayers = [
+  {
+    label: 'Component events',
+    id: 'component-event',
+  },
+]
+
+function toggleTimelineLayer(id: string) {
+}
 </script>
 
 <template>
@@ -47,20 +58,15 @@ function toggleApp(id: string) {
         </div>
       </Pane>
       <Pane border="base" h-full>
-        <div class="h-full flex flex-col p2">
-          <div class="flex py2">
-            3
-          </div>
-          <div class="no-scrollbar flex-1 select-none overflow-scroll">
-            2
+        <div class="h-full flex flex-col">
+          <div class="no-scrollbar h-full flex select-none gap-2 overflow-scroll">
+            <SelectiveList v-model="activeTimelineLayer" :data="timelineLayers" class="w-full" @select="toggleTimelineLayer" />
           </div>
         </div>
       </Pane>
-      <Pane relative h-full>
+      <Pane relative h-full size="65">
         <div class="h-full flex flex-col p2">
-          <div class="flex py2">
-            1
-          </div>
+          <Timeline :layer-ids="['component-event']" :header-visible="false" doc-link="" />
         </div>
       </Pane>
     </Splitpanes>

diff --git a/packages/devtools-kit/src/core/plugin/components.ts b/packages/devtools-kit/src/core/plugin/components.ts
@@ -9,6 +9,7 @@ import { hook } from '../../hook'
 import { exposeInstanceToWindow } from '../vm'
 
 const INSPECTOR_ID = 'components'
+const COMPONENT_EVENT_LAYER_ID = 'component-event'
 
 export function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, PluginSetupFunction] {
   const descriptor: PluginDescriptor = {
@@ -24,6 +25,12 @@ export function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, Plu
       treeFilterPlaceholder: 'Search components',
     })
 
+    api.addTimelineLayer({
+      id: COMPONENT_EVENT_LAYER_ID,
+      label: 'Component events',
+      color: 0x4FC08D,
+    })
+
     api.on.getInspectorTree(async (payload) => {
       if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
         // @ts-expect-error skip type @TODO
@@ -87,8 +94,31 @@ export function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, Plu
 
       if (!appRecord)
         return
-      const componentName = getInstanceName(instance)
-      console.log('component-emit', componentName, event, params)
+
+      const componentId = `${appRecord.id}:${instance.uid}`
+      const componentName = getInstanceName(instance) || 'Unknown Component'
+
+      api.addTimelineEvent({
+        layerId: COMPONENT_EVENT_LAYER_ID,
+        event: {
+          time: Date.now(),
+          data: {
+            component: {
+              _custom: {
+                type: 'component-definition',
+                display: componentName,
+              },
+            },
+            event,
+            params,
+          },
+          title: event,
+          subtitle: `by ${componentName}`,
+          meta: {
+            componentId,
+          },
+        },
+      })
     })
 
     const componentAddedCleanup = hook.on.componentAdded(async (app, uid, parentUid, component) => {