fix(client/bridge): enable deletion of property on Map/Set (#163)

Author: Azurewarth0920

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { toRaw } from 'vue'
 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'
@@ -49,7 +50,7 @@ function quickEdit(v: unknown, remove: boolean = false) {
     nodeId: state.value.nodeId,
     state: {
       newKey: null!,
-      value: v,
+      value: toRaw(v),
       type: dataType.value,
       remove,
     },
@@ -95,20 +96,20 @@ function quickEdit(v: unknown, remove: boolean = false) {
       </VueButton>
       <!-- increment/decrement button, numeric value only -->
       <template v-else-if="dataType === 'number'">
-        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click="quickEdit((rawValue as number) + 1)">
+        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEdit((rawValue as number) + 1)">
           <template #icon>
             <VueIcon icon="i-carbon-add" />
           </template>
         </VueButton>
-        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click="quickEdit((rawValue as number) - 1)">
+        <VueButton v-bind="iconButtonProps" :class="buttonClass" @click.stop="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(rawValue, true)">
+    <VueButton v-if="!props.disableEdit && depth > 0" v-bind="iconButtonProps" :class="buttonClass" @click.stop="quickEdit(rawValue, true)">
       <template #icon>
         <VueIcon icon="i-material-symbols-delete-rounded" />
       </template>

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

@@ -1,5 +1,5 @@
 import type { MaybeRef, Ref } from 'vue'
-import { isReactive, isRef } from 'vue'
+import { isReactive, isRef, toRaw } from 'vue'
 import { getComponentInstance } from '../general'
 import { devtoolsContext } from '../../general'
 
@@ -70,6 +70,10 @@ export class StateEditor {
       if (state.remove || state.newKey) {
         if (Array.isArray(object))
           object.splice(field as number, 1)
+        else if (toRaw(object) instanceof Map && typeof value === 'object' && value && 'key' in value)
+          object.delete(value.key)
+        else if (toRaw(object) instanceof Set)
+          object.delete(value)
         else
           Reflect.deleteProperty(object, field)
       }