From 8f4c5450fe5c2129969fa1a94bf7fa9a596abfcb Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Sat, 3 Feb 2024 22:48:35 +0900
Subject: [PATCH 1/3] feat: Use Object UI to display native Map

---
 packages/devtools-kit/src/core/component/state/custom.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/devtools-kit/src/core/component/state/custom.ts b/packages/devtools-kit/src/core/component/state/custom.ts
index 5ba7ab86..677e4059 100644
--- a/packages/devtools-kit/src/core/component/state/custom.ts
+++ b/packages/devtools-kit/src/core/component/state/custom.ts
@@ -40,12 +40,11 @@ export function getBigIntDetails(val: bigint | bigint) {
 }
 
 export function getMapDetails(val: Map<string, unknown>) {
-  const list: Array<Record<string, unknown>> = []
+  const list: Record<string, unknown> = {}
   val.forEach(
-    (value, key) => list.push({
-      key,
-      value,
-    }),
+    (value, key) => {
+      list[key] = value
+    },
   )
   return {
     _custom: {

From 61d03a887238d86124ad6ec31b0f206d18251492 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Sat, 3 Feb 2024 22:51:11 +0900
Subject: [PATCH 2/3] fix: Fix edit on native Map

---
 .../src/core/component/state/editor.ts        | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/devtools-kit/src/core/component/state/editor.ts b/packages/devtools-kit/src/core/component/state/editor.ts
index 5dd209cb..4caea901 100644
--- a/packages/devtools-kit/src/core/component/state/editor.ts
+++ b/packages/devtools-kit/src/core/component/state/editor.ts
@@ -20,7 +20,10 @@ export class StateEditor {
     const markRef = false
     while (sections.length > 1) {
       const section = sections.shift()!
-      object = object[section] as Recordable
+      if (object instanceof Map)
+        object = object.get(section) as Recordable
+      else
+        object = object[section] as Recordable
       if (this.refEditor.isRef(object))
         object = this.refEditor.get(object)
     }
@@ -42,7 +45,10 @@ export class StateEditor {
   get(object: Recordable, path: PropPath) {
     const sections = Array.isArray(path) ? path : path.split('.')
     for (let i = 0; i < sections.length; i++) {
-      object = object[sections[i]] as Recordable
+      if (object instanceof Map)
+        object = object.get(sections[i]) as Recordable
+      else
+        object = object[sections[i]] as Recordable
       if (this.refEditor.isRef(object))
         object = this.refEditor.get(object)
       if (!object)
@@ -70,17 +76,18 @@ 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 Map)
+          object.delete(field)
         else if (toRaw(object) instanceof Set)
           object.delete(value)
-        else
-          Reflect.deleteProperty(object, field)
+        else Reflect.deleteProperty(object, field)
       }
       if (!state.remove) {
         const target = object[state.newKey || field]
         if (this.refEditor.isRef(target))
           this.refEditor.set(target, value)
+        else if (toRaw(object) instanceof Map)
+          object.set(state.newKey || field, value)
         else
           object[state.newKey || field] = value
       }

From eedc8fc69cbdf5efb56c581bf3abb0720f1214b8 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Sun, 4 Feb 2024 00:22:50 +0900
Subject: [PATCH 3/3] feat: Use fromEntries to convert Map to object

---
 packages/devtools-kit/src/core/component/state/custom.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/devtools-kit/src/core/component/state/custom.ts b/packages/devtools-kit/src/core/component/state/custom.ts
index 677e4059..a3a64a5f 100644
--- a/packages/devtools-kit/src/core/component/state/custom.ts
+++ b/packages/devtools-kit/src/core/component/state/custom.ts
@@ -40,12 +40,7 @@ export function getBigIntDetails(val: bigint | bigint) {
 }
 
 export function getMapDetails(val: Map<string, unknown>) {
-  const list: Record<string, unknown> = {}
-  val.forEach(
-    (value, key) => {
-      list[key] = value
-    },
-  )
+  const list: Record<string, unknown> = Object.fromEntries(val)
   return {
     _custom: {
       type: 'map',