fix(client): deserialize issue on editing custom property (#144)

Author: Azurewarth0920

packages/client/src/components/inspector/InspectorDataField/Actions.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { VueButton, VueDropdown, VueDropdownButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
+import { getRawValue } from '@vue/devtools-kit'
 import type { InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
 import type { ButtonProps } from '@vue/devtools-ui/dist/types/src/components/Button'
 import { useDevToolsBridgeRpc } from '@vue/devtools-core'
@@ -28,9 +29,8 @@ const { copy, isSupported } = useClipboard()
 
 const popupVisible = ref(false)
 
-const dataType = computed(() => {
-  return typeof props.data.value
-})
+const rawValue = computed(() => getRawValue(props.data.value).value)
+const dataType = computed(() => typeof rawValue.value)
 
 const iconButtonProps = {
   flat: true,
@@ -77,7 +77,7 @@ function quickEdit(v: unknown, remove: boolean = false) {
           v-tooltip="{
             content: 'Add new value',
           }" v-bind="iconButtonProps" :class="buttonClass" @click.stop="
-            $emit('addNewProp', Array.isArray(data.value) ? 'array' : 'object')"
+            $emit('addNewProp', Array.isArray(rawValue) ? 'array' : 'object')"
         >
           <template #icon>
             <VueIcon icon="i-material-symbols-add-circle-rounded" />
@@ -87,28 +87,28 @@ function quickEdit(v: unknown, remove: boolean = false) {
       <!-- checkbox, button value only -->
       <VueButton
         v-if="dataType === 'boolean'" v-bind="iconButtonProps" :class="buttonClass"
-        @click="quickEdit(!data.value)"
+        @click="quickEdit(!rawValue)"
       >
         <template #icon>
-          <VueIcon :icon="data.value ? 'i-material-symbols-check-box-sharp' : 'i-material-symbols-check-box-outline-blank-sharp'" />
+          <VueIcon :icon="rawValue ? 'i-material-symbols-check-box-sharp' : 'i-material-symbols-check-box-outline-blank-sharp'" />
         </template>
       </VueButton>
       <!-- increment/decrement button, numeric value only -->
       <template v-else-if="dataType === 'number'">
-        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click="quickEdit((data.value as number) + 1)">
+        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click="quickEdit((rawValue as number) + 1)">
           <template #icon>
             <VueIcon icon="i-carbon-add" />
           </template>
         </VueButton>
-        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click="quickEdit((data.value as number) - 1)">
+        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click="quickEdit((rawValue as number) - 1)">
           <template #icon>
             <VueIcon icon="i-carbon-subtract" />
           </template>
         </VueButton>
       </template>
     </template>
     <!-- delete prop, only appear if depth > 0 -->
-    <VueButton v-if="!props.disableEdit && depth > 0" v-bind="iconButtonProps" :class="buttonClass" @click="quickEdit(data.value, true)">
+    <VueButton v-if="!props.disableEdit && depth > 0" v-bind="iconButtonProps" :class="buttonClass" @click="quickEdit(rawValue, true)">
       <template #icon>
         <VueIcon icon="i-material-symbols-delete-rounded" />
       </template>
@@ -128,7 +128,7 @@ function quickEdit(v: unknown, remove: boolean = false) {
       <template #popper>
         <div class="w160px py5px">
           <VueDropdownButton
-            @click="copy(dataType === 'object' ? JSON.stringify(data.value) : data.value.toString())"
+            @click="copy(dataType === 'object' ? JSON.stringify(rawValue) : rawValue.toString())"
           >
             <template #icon>
               <VueIcon icon="i-material-symbols-copy-all-rounded" class="mt4px" />

packages/client/src/components/inspector/InspectorStateField.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { InspectorCustomState, InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
 import { sortByKey } from '@vue/devtools-shared'
-import { formatInspectorStateValue, getInspectorStateValueType } from '@vue/devtools-kit'
+import { formatInspectorStateValue, getInspectorStateValueType, getRawValue } from '@vue/devtools-kit'
 import { useDevToolsBridgeRpc } from '@vue/devtools-core'
 import Actions from './InspectorDataField/Actions.vue'
 import type { EditorAddNewPropType } from '~/composables/inspector'
@@ -47,22 +47,7 @@ const normalizedValue = computed(() => {
   }
 })
 
-const rawValue = computed(() => {
-  let value = props.data.value
-  const isCustom = type.value === 'custom'
-  let inherit = {}
-  if (isCustom) {
-    const data = props.data.value as InspectorCustomState
-    inherit = data._custom?.fields || {}
-    value = data._custom?.value as string
-  }
-  // @ts-expect-error @TODO: type
-  if (value && value._isArray)
-    // @ts-expect-error @TODO: type
-    value = value.items
-
-  return { value, inherit }
-})
+const rawValue = computed(() => getRawValue(props.data.value))
 
 const normalizedChildField = computed(() => {
   let { value, inherit } = rawValue.value
@@ -112,12 +97,10 @@ const { editingType, editing, editingText, toggleEditing, nodeId } = useStateEdi
 
 watch(() => editing.value, (v) => {
   if (v) {
-    const value = props.data.value
-    if (typeof value === 'object') {
-      editingText.value = JSON.stringify(value)
-      return
-    }
-    editingText.value = value.toString()
+    const { value } = rawValue.value
+    editingText.value = typeof value === 'object'
+      ? JSON.stringify(value)
+      : value.toString()
   }
   else {
     editingText.value = ''
@@ -146,7 +129,7 @@ const { addNewProp: addNewPropApi, draftingNewProp, resetDrafting } = useStateEd
 function addNewProp(type: EditorAddNewPropType) {
   if (!isExpanded.value)
     toggleCollapse()
-  addNewPropApi(type, props.data.value)
+  addNewPropApi(type, rawValue.value.value)
 }
 
 function submitDrafting() {

packages/devtools-kit/src/core/component/state/format.ts

@@ -1,3 +1,4 @@
+import { InspectorCustomState, InspectorState } from '../types'
 import { INFINITY, NAN, NEGATIVE_INFINITY, UNDEFINED, rawTypeRE, specialTypeRE } from './constants'
 import { isPlainObject } from './is'
 import { escape, internalStateTokenToString } from './util'
@@ -82,3 +83,19 @@ export function formatInspectorStateValue(value, quotes = false) {
   }
   return value
 }
+
+export function getRawValue(value: InspectorState['value']) {
+  const isCustom = getInspectorStateValueType(value) === 'custom'
+  let inherit = {}
+  if (isCustom) {
+    const data = value as InspectorCustomState
+    inherit = data._custom?.fields || {}
+    value = data._custom?.value as string
+  }
+  // @ts-expect-error @TODO: type
+  if (value && value._isArray)
+    // @ts-expect-error @TODO: type
+    value = value.items
+
+  return { value, inherit }
+}

packages/devtools-kit/src/shared/util.ts

@@ -1,4 +1,4 @@
-import { formatInspectorStateValue, getInspectorStateValueType } from '../core/component/state/format'
+import { formatInspectorStateValue, getInspectorStateValueType, getRawValue } from '../core/component/state/format'
 import { stringifyReplacer } from '../core/component/state/replacer'
 import { reviver } from '../core/component/state/reviver'
 import { parseCircularAutoChunks, stringifyCircularAutoChunks } from './transfer'
@@ -19,4 +19,5 @@ export function parse(data: string, revive = false) {
 export {
   formatInspectorStateValue,
   getInspectorStateValueType,
+  getRawValue,
 }