feat: unwrap refs in toDisplayString

Author: yyx990803

Diff for: packages/shared/__tests__/toDisplayString.spec.ts

@@ -1,3 +1,4 @@
+import { computed, ref } from '@vue/reactivity'
 import { toDisplayString } from '../src'
 
 describe('toDisplayString', () => {
@@ -20,6 +21,17 @@ describe('toDisplayString', () => {
     expect(toDisplayString(arr)).toBe(JSON.stringify(arr, null, 2))
   })
 
+  test('refs', () => {
+    const n = ref(1)
+    const np = computed(() => n.value + 1)
+    expect(
+      toDisplayString({
+        n,
+        np
+      })
+    ).toBe(JSON.stringify({ n: 1, np: 2 }, null, 2))
+  })
+
   test('native objects', () => {
     const div = document.createElement('div')
     expect(toDisplayString(div)).toBe(`"[object HTMLDivElement]"`)

Diff for: packages/shared/src/toDisplayString.ts

@@ -12,8 +12,11 @@ export const toDisplayString = (val: unknown): string => {
     : String(val)
 }
 
-const replacer = (_key: string, val: any) => {
-  if (isMap(val)) {
+const replacer = (_key: string, val: any): any => {
+  // can't use isRef here since @vue/shared has no deps
+  if (val && val.__v_isRef) {
+    return replacer(_key, val.value)
+  } else if (isMap(val)) {
     return {
       [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val]) => {
         ;(entries as any)[`${key} =>`] = val