-
-
Notifications
You must be signed in to change notification settings - Fork 123
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
30 changed files
with
449 additions
and
293 deletions.
There are no files selected for viewing
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 3 additions & 103 deletions
106
packages/applet/src/modules/pinia/components/timeline/Index.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 0 additions & 57 deletions
57
packages/applet/src/modules/router/components/timeline/EventList.vue
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.