fix(SSR): value set for props, fix #550 (#551)

Author: antfu

src/reactivity/reactive.ts

@@ -1,6 +1,6 @@
 import { AnyObject } from '../types/basic'
 import { getRegisteredVueOrDefault } from '../runtimeContext'
-import { isPlainObject, def, warn, isArray, hasOwn } from '../utils'
+import { isPlainObject, def, warn, isArray, hasOwn, noopFn } from '../utils'
 import { isComponentInstance, defineComponentInstance } from '../utils/helper'
 import { RefKey } from '../utils/symbols'
 import { isRef, UnwrapRef } from './ref'
@@ -113,14 +113,26 @@ function observe<T>(obj: T): T {
 
   // in SSR, there is no __ob__. Mock for reactivity check
   if (!hasOwn(observed, '__ob__')) {
-    def(observed, '__ob__', {})
+    def(observed, '__ob__', mockObserver(observed))
   }
 
   return observed
 }
 
 export function createObserver() {
-  return observe<any>({}).__ob__ || {}
+  return observe<any>({}).__ob__
+}
+
+function mockObserver(value: any = {}): any {
+  return {
+    value,
+    dep: {
+      notify: noopFn,
+      depend: noopFn,
+      addSub: noopFn,
+      removeSub: noopFn,
+    },
+  }
 }
 
 export function shallowReactive<T extends object = any>(obj: T): T

test/ssr/ssrReactive.spec.ts

@@ -3,7 +3,15 @@
  */
 
 import Vue from '../vue'
-import { isReactive, reactive, ref, isRaw, isRef, shallowRef } from '../../src'
+import {
+  isReactive,
+  reactive,
+  ref,
+  isRaw,
+  isRef,
+  set,
+  shallowRef,
+} from '../../src'
 import { createRenderer } from 'vue-server-renderer'
 
 describe('SSR Reactive', () => {
@@ -44,4 +52,42 @@ describe('SSR Reactive', () => {
     expect(isRef(state)).toBe(true)
     expect(isRaw(state)).toBe(false)
   })
+
+  // #550
+  it('props should work with set', async (done) => {
+    let props: any
+
+    const app = new Vue({
+      render(this: any, h) {
+        return h('child', { attrs: { msg: this.msg } })
+      },
+      setup() {
+        return { msg: ref('hello') }
+      },
+      components: {
+        child: {
+          render(this: any, h: any) {
+            return h('span', this.data.msg)
+          },
+          props: ['msg'],
+          setup(_props) {
+            props = _props
+
+            return { data: _props }
+          },
+        },
+      },
+    })
+
+    const serverRenderer = createRenderer()
+    const html = await serverRenderer.renderToString(app)
+
+    expect(html).toBe('<span data-server-rendered="true">hello</span>')
+
+    expect(props.bar).toBeUndefined()
+    set(props, 'bar', 'bar')
+    expect(props.bar).toBe('bar')
+
+    done()
+  })
 })