feat: format reactive/ref/computed in nested values

Author: Akryum

packages/api/src/api/component.ts

@@ -58,6 +58,7 @@ export interface ComponentCustomState extends ComponentStateBase {
 export type CustomState = {
   _custom: {
     type: ComponentBuiltinCustomStateTypes | string
+    objectType?: string
     display?: string
     tooltip?: string
     value?: any

packages/app-backend-vue2/src/index.ts

@@ -97,6 +97,7 @@ export const backend = defineBackend({
 // @TODO refactor
 function injectToUtils () {
   backendInjections.getCustomInstanceDetails = getCustomInstanceDetails
+  backendInjections.getCustomObjectDetails = () => undefined
   backendInjections.instanceMap = instanceMap
   backendInjections.isVueInstance = val => val._isVue
 }

packages/app-backend-vue3/src/components/data.ts

@@ -1,7 +1,7 @@
 import { BackendContext } from '@vue-devtools/app-backend-api'
 import { getInstanceName, getUniqueComponentId } from './util'
-import { camelize, StateEditor, SharedData } from '@vue-devtools/shared-utils'
-import { ComponentInstance, HookPayloads, Hooks, InspectedComponentData } from '@vue/devtools-api'
+import { camelize, StateEditor, SharedData, formattedValue } from '@vue-devtools/shared-utils'
+import { ComponentInstance, CustomState, HookPayloads, Hooks, InspectedComponentData } from '@vue/devtools-api'
 import { returnError } from '../util'
 
 /**
@@ -124,7 +124,7 @@ function processSetupState (instance) {
   const raw = instance.devtoolsRawSetupState || {}
   return Object.keys(instance.setupState)
     .map(key => {
-      const value = returnError(() => instance.setupState[key])
+      const value = returnError(() => toRaw(instance.setupState[key]))
 
       const rawData = raw[key]
 
@@ -174,6 +174,13 @@ function isReadOnly (raw: any): boolean {
   return !!raw.__v_isReadonly
 }
 
+function toRaw (value: any) {
+  if (value?.__v_raw) {
+    return value.__v_raw
+  }
+  return value
+}
+
 function getSetupStateInfo (raw: any) {
   return {
     ref: isRef(raw),
@@ -183,6 +190,26 @@ function getSetupStateInfo (raw: any) {
   }
 }
 
+export function getCustomObjectDetails (object: any, proto: string): CustomState | undefined {
+  const info = getSetupStateInfo(object)
+
+  const isState = info.ref || info.computed || info.reactive
+  if (isState) {
+    const objectType = info.computed ? 'Computed' : info.ref ? 'Ref' : info.reactive ? 'Reactive' : null
+    const value = toRaw(info.reactive ? object : object._value)
+    const raw = object.effect?.raw?.toString() || object.effect?.fn?.toString()
+    return {
+      _custom: {
+        type: objectType.toLowerCase(),
+        objectType,
+        readOnly: true,
+        value,
+        ...raw ? { tooltip: `<span class="font-mono">${raw}</span>` } : {},
+      },
+    }
+  }
+}
+
 /**
  * Process the computed properties of an instance.
  *

packages/app-backend-vue3/src/index.ts

@@ -1,6 +1,6 @@
 import { defineBackend } from '@vue-devtools/app-backend-api'
 import { ComponentWalker } from './components/tree'
-import { editState, getInstanceDetails, getCustomInstanceDetails } from './components/data'
+import { editState, getInstanceDetails, getCustomInstanceDetails, getCustomObjectDetails } from './components/data'
 import { getInstanceName, getComponentInstances } from './components/util'
 import { getComponentInstanceFromElement, getInstanceOrVnodeRect, getRootElementsFromComponentInstance } from './components/el'
 import { backendInjections, HookEvents } from '@vue-devtools/shared-utils'
@@ -38,6 +38,7 @@ export const backend = defineBackend({
     api.on.inspectComponent((payload, ctx) => {
       // @TODO refactor
       backendInjections.getCustomInstanceDetails = getCustomInstanceDetails
+      backendInjections.getCustomObjectDetails = getCustomObjectDetails
       backendInjections.instanceMap = ctx.currentAppRecord.instanceMap
       backendInjections.isVueInstance = val => val._ && Object.keys(val._).includes('vnode')
       payload.instanceData = getInstanceDetails(payload.componentInstance, ctx)

packages/app-frontend/src/features/inspector/DataField.vue

@@ -96,14 +96,15 @@ export default defineComponent({
 
     formattedValue (): string {
       const value = this.field.value
-      if (this.field.objectType === 'Reactive') {
+      const objectType = value?._custom?.objectType || this.field.objectType
+      if (objectType === 'Reactive') {
         return 'Reactive'
       } else if (this.fieldOptions.abstract) {
         return ''
       } else {
         let result = `<span class="value-formatted-ouput">${formattedValue(value)}</span>`
-        if (this.field.objectType) {
-          result += ` <span class="text-gray-500">(${this.field.objectType})</span>`
+        if (objectType) {
+          result += ` <span class="text-gray-500">(${objectType})</span>`
         }
         return result
       }

packages/app-frontend/src/util/format/value.ts

@@ -11,7 +11,7 @@ import {
 const rawTypeRE = /^\[object (\w+)]$/
 const specialTypeRE = /^\[native (\w+) (.*?)(<>((.|\s)*))?\]$/
 
-export function valueType (value) {
+export function valueType (value, raw = true) {
   const type = typeof value
   if (value == null || value === UNDEFINED) {
     return 'null'
@@ -23,8 +23,12 @@ export function valueType (value) {
     value === NAN
   ) {
     return 'literal'
-  } else if (value && value._custom) {
-    return 'custom'
+  } else if (value?._custom) {
+    if ((raw || value._custom.display != null)) {
+      return 'custom'
+    } else {
+      return valueType(value._custom.value)
+    }
   } else if (type === 'string') {
     const typeMatch = specialTypeRE.exec(value)
     if (typeMatch) {
@@ -33,7 +37,7 @@ export function valueType (value) {
     } else {
       return 'string'
     }
-  } else if (Array.isArray(value) || (value && value._isArray)) {
+  } else if (Array.isArray(value) || (value?._isArray)) {
     return 'array'
   } else if (isPlainObject(value)) {
     return 'plain-object'
@@ -44,7 +48,10 @@ export function valueType (value) {
 
 export function formattedValue (value, quotes = true) {
   let result
-  const type = valueType(value)
+  const type = valueType(value, false)
+  if (type !== 'custom' && value?._custom) {
+    value = value._custom.value
+  }
   if ((result = specialTokenToString(value))) {
     return result
   } else if (type === 'custom') {

packages/shared-utils/src/backend.ts

@@ -2,6 +2,7 @@ export const backendInjections = {
   instanceMap: new Map(),
   isVueInstance: (() => false) as ((value: any) => boolean),
   getCustomInstanceDetails: (() => ({})) as ((instance: any) => any),
+  getCustomObjectDetails: (() => undefined) as (value: any, proto: string) => any,
 }
 
 export function getInstanceMap () {
@@ -12,6 +13,10 @@ export function getCustomInstanceDetails (instance) {
   return backendInjections.getCustomInstanceDetails(instance)
 }
 
+export function getCustomObjectDetails (value, proto: string) {
+  return backendInjections.getCustomObjectDetails(value, proto)
+}
+
 export function isVueInstance (value) {
   return backendInjections.isVueInstance(value)
 }

packages/shared-utils/src/util.ts

@@ -7,6 +7,7 @@ import {
   getCustomRouterDetails,
   getCustomStoreDetails,
   isVueInstance,
+  getCustomObjectDetails,
 } from './backend'
 import { SharedData } from './shared-data'
 import { isChrome, target } from './env'
@@ -235,6 +236,8 @@ function replacer (key) {
     } else if (val instanceof HTMLElement) {
       return encodeCache.cache(val, () => getCustomHTMLElementDetails(val))
     }
+    const customDetails = getCustomObjectDetails(val, proto)
+    if (customDetails != null) return customDetails
   } else if (Number.isNaN(val)) {
     return NAN
   }

packages/shell-dev-vue3/src/Child.vue

@@ -15,8 +15,13 @@ export default {
         world: 1,
       },
       nil: undefined,
+      nestedRef: ref('meow'),
+      nestedComputed: computed(() => answer.value * 4),
+      map: new Map(),
     })
 
+    reactiveObject.map.set('foo', ref('bar'))
+
     function myMethodFromSetup () {
       console.log('foobar')
     }
@@ -68,7 +73,7 @@ export default {
 
 <template>
   <div>
-    Child: {{ answer }} x2: {{ doubleAnswer }}
+    Child: {{ answer }} x2: {{ doubleAnswer }} x4: {{ reactiveObject.nestedComputed }}
     <button @click="answer *= 2">
       double it
     </button>