fix(observe): solve the Ref not unwrapping on the ssr side issue with recursive way. (#723)

Co-authored-by: Anthony Fu <[email protected]>

Author: ygj6

src/reactivity/reactive.ts

@@ -127,14 +127,32 @@ export function observe<T>(obj: T): T {
 
   // in SSR, there is no __ob__. Mock for reactivity check
   if (!hasOwn(observed, '__ob__')) {
-    def(observed, '__ob__', mockObserver(observed))
+    mockReactivityDeep(observed)
   }
 
   return observed
 }
 
-export function createObserver() {
-  return observe<any>({}).__ob__
+/**
+ * Mock __ob__ for object recursively
+ */
+function mockReactivityDeep(obj: any, seen = new WeakMap<any, boolean>()) {
+  if (seen.has(obj)) return
+
+  def(obj, '__ob__', mockObserver(obj))
+  seen.set(obj, true)
+
+  for (const key of Object.keys(obj)) {
+    const value = obj[key]
+    if (
+      !(isPlainObject(value) || isArray(value)) ||
+      isRaw(value) ||
+      !Object.isExtensible(value)
+    ) {
+      continue
+    }
+    mockReactivityDeep(value)
+  }
 }
 
 function mockObserver(value: any = {}): any {
@@ -149,6 +167,10 @@ function mockObserver(value: any = {}): any {
   }
 }
 
+export function createObserver() {
+  return observe<any>({}).__ob__
+}
+
 export function shallowReactive<T extends object = any>(obj: T): T
 export function shallowReactive(obj: any): any {
   if (!isObject(obj)) {

src/reactivity/set.ts

@@ -41,8 +41,7 @@ export function set<T>(target: AnyObject, key: any, val: T): T {
     return val
   }
   if (!ob) {
-    // If we are using `set` we can assume that the unwrapping is intended
-    defineAccessControl(target, key, val)
+    target[key] = val
     return val
   }
   defineReactive(ob.value, key, val)

test/ssr/ssrReactive.spec.ts

@@ -102,4 +102,20 @@ describe('SSR Reactive', () => {
       new: true,
     })
   })
+
+  // #721
+  it('should behave correctly for the nested ref in the object', () => {
+    const state = { old: ref(false) }
+    set(state, 'new', ref(true))
+    expect(JSON.stringify(state)).toBe(
+      '{"old":{"value":false},"new":{"value":true}}'
+    )
+  })
+
+  // #721
+  it('should behave correctly for ref of object', () => {
+    const state = ref({ old: ref(false) })
+    set(state.value, 'new', ref(true))
+    expect(JSON.stringify(state.value)).toBe('{"old":false,"new":true}')
+  })
 })