feat: compatible with v6 plugin API, refactor messaging system (#421)

Co-authored-by: Alex <alexzhang1030@foxmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

.vscode/settings.json

@@ -31,5 +31,8 @@
     "yaml"
   ],
   "scss.lint.unknownAtRules": "ignore",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "cSpell.words": [
+    "Mergeable"
+  ]
 }

packages/applet/src/components/basic/AppConnecting.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="h-screen w-screen $ui-fcc flex-col">
+    <div class="outer">
+      <div class="inner">
+        <i class="i-logos-vue inline-block h8! w8!" alt="Vue logo" />
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+@keyframes connecting {
+  0% {
+    --at-apply: opacity-60 scale-60;
+  }
+  50% {
+    --at-apply: opacity-80 scale-80;
+  }
+  100% {
+    --at-apply: opacity-100 scale-100;
+  }
+}
+
+.outer,
+.inner {
+  --at-apply: transform rounded-[50%] bg-primary-500 bg-opacity-10;
+}
+.outer {
+  --at-apply: p-6;
+  animation: connecting 1.2s linear infinite;
+}
+
+.inner {
+  --at-apply: pt-6 pr-5 pb-4 pl-5;
+  animation: connecting 1.2s 0.1s backwards linear infinite;
+}
+</style>

packages/applet/src/components/basic/DevToolsHeader.vue

@@ -3,7 +3,7 @@ import { defineProps } from 'vue'
 import { useVirtualRouter } from '~/composables/virtual-router'
 
 defineProps<{
-  githubRepoLink: string
+  githubRepoLink?: string
   docLink: string
 }>()
 const router = useVirtualRouter()
@@ -20,7 +20,7 @@ const router = useVirtualRouter()
       <a class="pr2" :href="docLink" target="_blank">
         <i class="i-clarity:document-line cursor-pointer op70 text-base hover:op100" />
       </a>
-      <a :href="githubRepoLink" target="_blank">
+      <a v-if="githubRepoLink" :href="githubRepoLink" target="_blank">
         <i class="i-mdi:github cursor-pointer op70 text-base hover:op100" />
       </a>
     </div>

packages/applet/src/components/basic/SelectiveList.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { defineModel } from 'vue'
-import type { InspectorNodeTag } from '@vue/devtools-kit'
+import type { CustomInspectorNode } from '@vue/devtools-kit'
 import NodeTag from '~/components/basic/NodeTag.vue'
 
-defineProps<{ data: { id: string, label: string, tags: InspectorNodeTag[] }[] }>()
+defineProps<{ data: CustomInspectorNode[] }>()
 
 const selected = defineModel()
 

packages/applet/src/components/state/ChildStateViewer.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { InspectorState } from '@vue/devtools-kit'
+import type { CustomInspectorState } from '@vue/devtools-kit'
 import StateFieldViewer from './StateFieldViewer.vue'
 
 withDefaults(defineProps<{
-  data: InspectorState[]
+  data: CustomInspectorState[]
   depth: number
   index: string
 }>(), {

packages/applet/src/components/state/RootStateViewer.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { watchEffect } from 'vue'
-import type { InspectorState } from '@vue/devtools-kit'
+import type { CustomInspectorState } from '@vue/devtools-kit'
 import ChildStateViewer from './ChildStateViewer.vue'
 import ToggleExpanded from '~/components/basic/ToggleExpanded.vue'
 import { useToggleExpanded } from '~/composables/toggle-expanded'
 import { createStateEditorContext } from '~/composables/state-editor'
 
 const props = withDefaults(defineProps<{
-  data: Record<string, InspectorState[]>
+  data: Record<string, CustomInspectorState[]>
   nodeId: string
   inspectorId: string
   disableEdit?: boolean

packages/applet/src/components/state/StateFieldEditor.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed, ref, toRaw } from 'vue'
 import { VueButton, VueDropdown, VueDropdownButton, VueIcon, vTooltip } from '@vue/devtools-ui'
-import { getRaw } from '@vue/devtools-kit'
-import type { InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
+import { DevToolsV6PluginAPIHookKeys, getRaw } from '@vue/devtools-kit'
+import type { CustomInspectorState, DevToolsV6PluginAPIHookPayloads } from '@vue/devtools-kit'
 import type { ButtonProps } from '@vue/devtools-ui/dist/types/src/components/Button'
-import { editInspectorState } from '@vue/devtools-core'
+import { rpc } from '@vue/devtools-core'
 import { useClipboard } from '@vueuse/core'
 import { useStateEditorContext } from '~/composables/state-editor'
 import type { EditorAddNewPropType, EditorInputValidType } from '~/composables/state-editor'
 
 const props = withDefaults(defineProps<{
-  data: InspectorState
+  data: CustomInspectorState & { key?: string }
   hovering: boolean
   depth: number
   showAddIfNeeded?: boolean
@@ -45,7 +45,7 @@ const buttonClass = computed(() => ({
 }))
 
 function quickEdit(v: unknown, remove: boolean = false) {
-  editInspectorState({
+  rpc.value.editInspectorState({
     path: props.data.path || [props.data.key],
     inspectorId: state.value.inspectorId,
     type: props.data.stateType!,
@@ -56,7 +56,7 @@ function quickEdit(v: unknown, remove: boolean = false) {
       type: dataType.value,
       remove,
     },
-  } satisfies InspectorStateEditorPayload)
+  } as unknown as DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE])
 }
 
 function quickEditNum(v: number | string, offset: 1 | -1) {
@@ -147,7 +147,7 @@ function quickEditNum(v: number | string, offset: 1 | -1) {
           </VueDropdownButton>
           <VueDropdownButton
             @click="() => {
-              copy(data.key)
+              copy(data.key!)
             }"
           >
             <template #icon>

packages/applet/src/components/state/StateFieldViewer.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { InspectorCustomState, InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
-import { formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from '@vue/devtools-kit'
+import type { CustomInspectorState, InspectorCustomState } from '@vue/devtools-kit'
+import { DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHookPayloads, formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from '@vue/devtools-kit'
 import { computed, ref, watch } from 'vue'
-import { editInspectorState } from '@vue/devtools-core'
+import { rpc } from '@vue/devtools-core'
 import { isArray, isObject, sortByKey } from '@vue/devtools-shared'
 import { VueButton, VueIcon, vTooltip } from '@vue/devtools-ui'
 import ChildStateViewer from './ChildStateViewer.vue'
@@ -15,7 +15,7 @@ import type { EditorAddNewPropType } from '~/composables/state-editor'
 import { useHover } from '~/composables/hover'
 
 const props = defineProps<{
-  data: InspectorState
+  data: CustomInspectorState
   depth: number
   index: string
 }>()
@@ -57,7 +57,7 @@ const normalizedDisplayedKey = computed(() => normalizedPath.value[normalizedPat
 const normalizedDisplayedValue = computed(() => {
   const directlyDisplayedValueMap = ['Reactive']
   const extraDisplayedValue = (props.data as InspectorCustomState)?._custom?.stateTypeName || props.data?.stateTypeName
-  if (directlyDisplayedValueMap.includes(extraDisplayedValue!)) {
+  if (directlyDisplayedValueMap.includes(extraDisplayedValue as string)) {
     return extraDisplayedValue
   }
 
@@ -95,7 +95,7 @@ const normalizedDisplayedChildren = computed(() => {
       ...inherit,
       editable: props.data.editable && !isUneditableType,
       creating: false,
-    })) as unknown as InspectorState[]
+    })) as unknown as CustomInspectorState[]
   }
   else if (isObject(value)) {
     displayedChildren = Object.keys(value).slice(0, limit.value).map(key => ({
@@ -110,7 +110,7 @@ const normalizedDisplayedChildren = computed(() => {
       displayedChildren = sortByKey(displayedChildren)
   }
 
-  return (displayedChildren === props.data.value ? [] : displayedChildren) as InspectorState[]
+  return (displayedChildren === props.data.value ? [] : displayedChildren) as CustomInspectorState[]
 })
 
 // has children
@@ -137,7 +137,7 @@ watch(() => editing.value, (v) => {
 
 function submit() {
   const data = props.data
-  editInspectorState({
+  rpc.value.editInspectorState({
     path: normalizedPath.value,
     inspectorId: state.value.inspectorId,
     type: data.stateType!,
@@ -147,7 +147,7 @@ function submit() {
       type: editingType.value,
       value: toSubmit(editingText.value, raw.value.customType),
     },
-  } satisfies InspectorStateEditorPayload)
+  } as unknown as DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE])
   toggleEditing()
 }
 
@@ -164,7 +164,7 @@ function addNewProp(type: EditorAddNewPropType) {
 
 function submitDrafting() {
   const data = props.data
-  editInspectorState({
+  rpc.value.editInspectorState({
     path: [...normalizedPath.value, draftingNewProp.value.key],
     inspectorId: state.value.inspectorId,
     type: data.stateType!,
@@ -174,7 +174,7 @@ function submitDrafting() {
       type: typeof toSubmit(draftingNewProp.value.value),
       value: toSubmit(draftingNewProp.value.value),
     },
-  } satisfies InspectorStateEditorPayload)
+  } as unknown as DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE])
   resetDrafting()
 }
 

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { TimelineEvent } from '@vue/devtools-kit'
+import type { TimelineEventOptions } from '@vue/devtools-kit'
 import { computed } from 'vue'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import { formatTime } from '~/utils'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 const props = defineProps<{
-  data: Array<TimelineEvent['event'] & { color?: string, id?: number }>
+  data: Array<TimelineEventOptions['event'] & { color?: string, id?: number }>
 }>()
 
 const selected = defineModel()
@@ -19,7 +19,7 @@ const normalizedData = computed(() => {
     if (item.groupId !== currentGroupId || currentColorIndex === -1)
       currentColorIndex = (currentColorIndex + 1) % colors.length
 
-    currentGroupId = item.groupId ?? currentGroupId
+    currentGroupId = item.groupId as number ?? currentGroupId
 
     item.id = index
     item.color = colors[currentColorIndex]

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Pane, Splitpanes } from 'splitpanes'
-import { onAddTimelineEvent } from '@vue/devtools-core'
-import { computed, ref } from 'vue'
+import { DevToolsMessagingEvents, rpc } from '@vue/devtools-core'
+import { computed, onUnmounted, ref } from 'vue'
 
-import type { InspectorState, TimelineEvent } from '@vue/devtools-kit'
+import type { CustomInspectorState, TimelineEventOptions } from '@vue/devtools-kit'
 import EventList from './EventList.vue'
 import Navbar from '~/components/basic/Navbar.vue'
 import Empty from '~/components/basic/Empty.vue'
@@ -14,28 +14,28 @@ import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 const props = defineProps<{
   layerIds: string[]
   docLink: string
-  githubRepoLink: 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 eventList = ref<TimelineEventOptions['event'][]>([])
+const groupList = ref<Map<string | number | undefined, TimelineEventOptions['event'][]>>(new Map())
 const selectedEventIndex = ref(0)
 const selectedEventInfo = computed(() => eventList.value[selectedEventIndex.value] ?? null)
 // event info
 const normalizedEventInfo = computed(() => {
-  const info: InspectorState[] = []
+  const info: CustomInspectorState[] = []
   for (const key in selectedEventInfo.value?.data) {
     info.push({
       key,
       type: key,
       editable: false,
       value: selectedEventInfo.value.data[key]!,
-    })
+    } as unknown as CustomInspectorState)
   }
   return info
 })
@@ -62,18 +62,18 @@ const normalizedGroupInfo = computed(() => {
 
 // normalize display info
 const displayedInfo = computed(() => {
-  return { 'Event Info': normalizedEventInfo.value, ...(normalizedGroupInfo.value && { 'Group Info': normalizedGroupInfo.value }) } as unknown as Record<string, InspectorState[]>
+  return { 'Event Info': normalizedEventInfo.value, ...(normalizedGroupInfo.value && { 'Group Info': normalizedGroupInfo.value }) } as unknown as Record<string, CustomInspectorState[]>
 })
 
-function normalizeGroupList(event: TimelineEvent['event']) {
+function normalizeGroupList(event: TimelineEventOptions['event']) {
   const groupId = event.groupId
   if (groupId !== undefined) {
     groupList.value.set(groupId, groupList.value.get(groupId) ?? [])
     groupList.value.get(groupId)?.push(event)
   }
 }
 
-onAddTimelineEvent((payload) => {
+function onTimelineEventUpdated(payload) {
   if (!payload)
     return
 
@@ -83,6 +83,12 @@ onAddTimelineEvent((payload) => {
 
   eventList.value.push(event)
   normalizeGroupList(event)
+}
+
+rpc.functions.on(DevToolsMessagingEvents.TIMELINE_EVENT_UPDATED, onTimelineEventUpdated)
+
+onUnmounted(() => {
+  rpc.functions.off(DevToolsMessagingEvents.TIMELINE_EVENT_UPDATED, onTimelineEventUpdated)
 })
 </script>