feat(devtools-kit): enable editing native Map/Set in input field (#253)

Author: Azurewarth0920

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

@@ -101,10 +101,30 @@ export class RefStateEditor {
       ref.value = value
     }
     else {
+      // Edit on native type Set
+      if (ref instanceof Set && Array.isArray(value)) {
+        ref.clear()
+        value.forEach((v: unknown) => ref.add(v))
+        return
+      }
+
+      const currentKeys = Object.keys(value)
+
+      // Edit on native type Map
+      if (ref instanceof Map) {
+        const previousKeysSet = new Set(ref.keys())
+        currentKeys.forEach((key) => {
+          ref.set(key, Reflect.get(value, key))
+          previousKeysSet.delete(key)
+        })
+        previousKeysSet.forEach(key => ref.delete(key))
+        return
+      }
+
       // if is reactive, then it must be object
       // to prevent loss reactivity, we should assign key by key
       const previousKeysSet = new Set(Object.keys(ref))
-      const currentKeys = Object.keys(value)
+
       // we should check the key diffs, if previous key is the longer
       // then remove the needless keys
       currentKeys.forEach((key) => {

packages/playground/basic/src/stores/index.ts

@@ -3,12 +3,14 @@ import { computed, ref } from 'vue'
 
 export const useAppStore = defineStore('app', () => {
   const count = ref(120)
+  const map = ref(new Map([['a', 1], ['b', 2]]))
+  const set = ref(new Set([1, 2, 3]))
   function increment() {
     count.value++
   }
   const doubledCount = computed(() => count.value * 2)
 
-  return { count, doubledCount, increment }
+  return { count, doubledCount, increment, map, set }
 })
 
 export const useCounterStore = defineStore('counter', () => {