fix(kit): should access value on ObjectRefImpl and GetterRefImpl (#563)

Author: alexzhang1030

packages/devtools-kit/__tests__/component/decode-state.test.ts

@@ -0,0 +1,115 @@
+import { getObjectDetails } from '../../src/core/component/state/custom'
+
+function omitKeysOnCustom(obj: { _custom: { [key: string]: unknown } } | undefined, keys: string[]) {
+  return obj == null ? obj : { _custom: Object.fromEntries(Object.entries(obj._custom).filter(([key]) => !keys.includes(key))) }
+}
+
+it.each([
+  [
+    'computed',
+    () => {
+      const a = computed(() => 'foo')
+      a.value
+      return a
+    },
+    {
+      _custom: {
+        stateTypeName: 'Computed',
+        type: 'computed',
+        value: 'foo',
+      },
+    },
+  ],
+  [
+    'ref',
+    () => {
+      const a = ref('foo')
+      return a
+    },
+    {
+      _custom: {
+        stateTypeName: 'Ref',
+        type: 'ref',
+        value: 'foo',
+      },
+    },
+  ],
+  [
+    'reactive',
+    () => {
+      const a = reactive({ foo: 'foo' })
+      return a
+    },
+    {
+      _custom: {
+        stateTypeName: 'Reactive',
+        type: 'reactive',
+        value: {
+          foo: 'foo',
+        },
+      },
+    },
+  ],
+  [
+    'toRef w/ ref',
+    () => {
+      const foo = ref('1')
+      const a = toRef(foo)
+      return a
+    },
+    {
+      _custom: {
+        stateTypeName: 'Ref',
+        type: 'ref',
+        value: '1',
+      },
+    },
+  ],
+  [
+    'toRef w/ getter',
+    () => {
+      const bar = computed(() => '1')
+      const a = toRef(() => bar.value)
+      return a
+    },
+    {
+      _custom: {
+        stateTypeName: 'Ref',
+        type: 'ref',
+        value: '1',
+      },
+    },
+  ],
+  [
+    'toRef w/ object',
+    () => {
+      const bar = reactive({ value: '1' })
+      const a = toRef(bar, 'value')
+      return a
+    },
+    {
+      _custom: {
+        stateTypeName: 'Ref',
+        type: 'ref',
+        value: '1',
+      },
+    },
+  ],
+  [
+    'toRefs',
+    () => {
+      const bar = reactive({ value: '1', value2: '2' })
+      const a = toRefs(bar)
+      return a.value
+    },
+    {
+      _custom: {
+        stateTypeName: 'Ref',
+        type: 'ref',
+        value: '1',
+      },
+    },
+  ],
+])('should getObjectDetail by passing %s state', (_, state, expected) => {
+  expect(omitKeysOnCustom(getObjectDetails(state()), ['tooltipText'])).toEqual(expected)
+})

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

@@ -218,13 +218,27 @@ export function getHTMLElementDetails(value: HTMLElement) {
   }
 }
 
+/**
+ * - ObjectRefImpl, toRef({ foo: 'foo' }, 'foo'), `value` is the actual value
+ * - GetterRefImpl, toRef(() => state.foo), `value` is the actual value
+ * - RefImpl, ref('foo') / computed(() => 'foo'), `_value` is the actual value
+ */
+function tryGetRefValue(ref: { _value?: unknown } | { value?: unknown }) {
+  if (ensurePropertyExists<{ _value?: unknown }>(ref, '_value', true)) {
+    return ref._value
+  }
+  if (ensurePropertyExists(ref, 'value', true)) {
+    return ref.value
+  }
+}
+
 export function getObjectDetails(object: Record<string, any>) {
   const info = getSetupStateType(object)
 
   const isState = info.ref || info.computed || info.reactive
   if (isState) {
     const stateTypeName = info.computed ? 'Computed' : info.ref ? 'Ref' : info.reactive ? 'Reactive' : null
-    const value = toRaw(info.reactive ? object : object._value)
+    const value = toRaw(info.reactive ? object : tryGetRefValue(object))
 
     const raw = ensurePropertyExists(object, 'effect')
       ? object.effect?.raw?.toString() || object.effect?.fn?.toString()

packages/playground/basic/src/pages/Home.vue

@@ -2,6 +2,21 @@
 import Foo from '../components/Foo.vue'
 
 const visible = ref(false)
+
+const obj = reactive<{
+  count: number
+  foo?: number
+  bar?: string
+}>({
+  count: 0,
+})
+
+// @ts-expect-error type guard
+obj.foo = toRef(obj, 'count')
+// @ts-expect-error type guard
+obj.bar = ref('bar')
+
+const toRefObj = toRefs(obj)
 </script>
 
 <template>