feat: enable editing of state

Author: vinpogo

demo/src/myComposable.ts

@@ -1,13 +1,22 @@
-import { ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { debug } from '../../src'
 
 export function useFoo() {
   const priv = ref(0)
 
+  const squared = computed(() => priv.value * priv.value)
+
+  const foo = reactive({
+    vin: 'was here',
+    one: 1,
+    bool: false,
+    nested: { vin: 'still here' },
+  })
+
   const inc = () => priv.value++
   const dec = () => priv.value--
 
-  debug('useFoo', { priv })
+  debug('useFoo', { value: priv, squared, foo })
 
   return { inc, dec }
 }

src/devtools.test.ts

@@ -1,7 +1,8 @@
 import { beforeEach, expect, test, vi } from 'vitest'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { INSPECTOR_ID } from './constants'
 import {
+  handleEditInspectorState,
   handleGetInspectorState,
   handleGetInspectorTree,
   handleInspectComponent,
@@ -169,7 +170,23 @@ test('getInspectorState for individual entry', () => {
         {
           "editable": true,
           "key": "foo",
-          "value": "bar",
+          "value": RefImpl {
+            "__v_isRef": true,
+            "__v_isShallow": false,
+            "_rawValue": "bar",
+            "_value": "bar",
+            "dep": Dep {
+              "__v_skip": true,
+              "activeLink": undefined,
+              "computed": undefined,
+              "key": undefined,
+              "map": undefined,
+              "sc": 0,
+              "subs": undefined,
+              "subsHead": undefined,
+              "version": 0,
+            },
+          },
         },
       ],
     }
@@ -264,3 +281,68 @@ test('inspectComponent adds state to payload', () => {
     ]
   `)
 })
+
+test('editInspectorState for existent entry', () => {
+  const debugState = { value: computed(() => 23) }
+  upsert({
+    groupId: 'groupid',
+    uid: 'uid',
+    componentName: 'Foo',
+    componentInstance: null,
+    debugState,
+  })
+
+  const setMock = vi.fn()
+
+  const payload: DevtoolsApiHandlerPayload<'editInspectorState'> =
+    {
+      app: {},
+      inspectorId: INSPECTOR_ID,
+      nodeId: 'uid',
+      path: [],
+      type: '',
+      state: {
+        value: 'yess',
+        newKey: undefined,
+        remove: undefined,
+      },
+      set: setMock,
+    }
+
+  handleEditInspectorState(payload)
+
+  expect(setMock).toHaveBeenCalledExactlyOnceWith(
+    debugState,
+  )
+})
+
+test('editInspectorState for non-existent entry', () => {
+  upsert({
+    groupId: 'groupid',
+    uid: 'uid',
+    componentName: 'Foo',
+    componentInstance: null,
+    debugState: { value: computed(() => 23) },
+  })
+
+  const setMock = vi.fn()
+
+  const payload: DevtoolsApiHandlerPayload<'editInspectorState'> =
+    {
+      app: {},
+      inspectorId: INSPECTOR_ID,
+      nodeId: 'rando',
+      path: [],
+      type: '',
+      state: {
+        value: 'yess',
+        newKey: undefined,
+        remove: undefined,
+      },
+      set: setMock,
+    }
+
+  handleEditInspectorState(payload)
+
+  expect(setMock).not.toHaveBeenCalled()
+})

src/devtools.ts

@@ -1,6 +1,6 @@
 import { setupDevToolsPlugin } from '@vue/devtools-api'
 import type { App } from 'vue'
-import { toValue } from 'vue'
+import { isReadonly, toValue } from 'vue'
 import { INSPECTOR_ID, TIMELINE_ID } from './constants'
 import { byGroupId, byUid, onUpdate } from './registry'
 import type {
@@ -71,8 +71,8 @@ export const handleGetInspectorState =
             entry.debugState,
           ).map(([key, value]) => ({
             key,
-            value: toValue(value),
-            editable: true,
+            value,
+            editable: !isReadonly(value),
           })),
         }
         if (entry.componentInstance)
@@ -96,15 +96,26 @@ export const handleInspectComponent: DevtoolsApiHandler<
         ([key, value]) => ({
           type: entry.uid,
           key,
-          value: toValue(value),
-          editable: true,
+          value,
+          editable: !isReadonly(value),
         }),
       )
     })
     .toArray()
   payload.instanceData.state.push(...entries)
 }
 
+export const handleEditInspectorState: DevtoolsApiHandler<
+  'editInspectorState'
+> = (payload) => {
+  if (payload.inspectorId === INSPECTOR_ID) {
+    const uid = payload.nodeId
+    const entry = byUid.get(uid)
+    if (!entry) return
+    payload.set(entry.debugState)
+  }
+}
+
 export function setupComposableDevtools<T>(app: App<T>) {
   console.log('🐞 Vuebugger ready to use')
   setupDevToolsPlugin(
@@ -146,6 +157,7 @@ export function setupComposableDevtools<T>(app: App<T>) {
       api.on.getInspectorTree(handleGetInspectorTree)
       api.on.getInspectorState(handleGetInspectorState(api))
       api.on.inspectComponent(handleInspectComponent)
+      api.on.editInspectorState(handleEditInspectorState)
     },
   )
 }