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

vuejs · Jan 9, 2024 · 80ae1dc · 80ae1dc
1 parent f96ec04
commit 80ae1dc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/client/src/components/inspector/InspectorDataField/Actions.vue b/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>

diff --git a/packages/devtools-kit/src/core/component/state/editor.ts b/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)
  }