fix: reactive in SSR (#546)

* chore: add failed tests

* fix: workaround

* chore: export toRaw

Author: antfu

src/apis/index.ts

@@ -1,4 +1,26 @@
-export * from './state'
+export {
+  isReactive,
+  isRef,
+  isRaw,
+  markRaw,
+  reactive,
+  ref,
+  customRef,
+  Ref,
+  set,
+  shallowReactive,
+  shallowRef,
+  toRaw,
+  toRef,
+  toRefs,
+  triggerRef,
+  unref,
+  UnwrapRef,
+  isReadonly,
+  shallowReadonly,
+  proxyRefs,
+  ShallowUnwrapRef,
+} from '../reactivity'
 export * from './lifecycle'
 export * from './watch'
 export * from './computed'

src/apis/state.ts

@@ -1,6 +1,6 @@
 import { AnyObject } from '../types/basic'
 import { getRegisteredVueOrDefault } from '../runtimeContext'
-import { isPlainObject, def, warn } from '../utils'
+import { isPlainObject, def, warn, hasOwn } from '../utils'
 import { isComponentInstance, defineComponentInstance } from '../utils/helper'
 import { RefKey } from '../utils/symbols'
 import { isRef, UnwrapRef } from './ref'
@@ -111,6 +111,11 @@ function observe<T>(obj: T): T {
     observed = vm._data.$$state
   }
 
+  // in SSR, there is no __ob__. Mock for reactivity check
+  if (!hasOwn(observed, '__ob__')) {
+    def(observed, '__ob__', {})
+  }
+
   return observed
 }
 
@@ -154,7 +159,7 @@ export function shallowReactive(obj: any): any {
       configurable: true,
       get: function getterHandler() {
         const value = getter ? getter.call(obj) : val
-        ob.dep.depend()
+        ob.dep?.depend()
         return value
       },
       set: function setterHandler(newVal) {
@@ -164,7 +169,7 @@ export function shallowReactive(obj: any): any {
         } else {
           val = newVal
         }
-        ob.dep.notify()
+        ob.dep?.notify()
       },
     })
   }

src/reactivity/reactive.ts

@@ -13,7 +13,7 @@ const Vue = require('vue')
 // })
 // .then(done)
 
-window.waitForUpdate = (initialCb) => {
+const waitForUpdate = (initialCb) => {
   let end
   const queue = initialCb ? [initialCb] : []
 
@@ -69,7 +69,11 @@ window.waitForUpdate = (initialCb) => {
   return chainer
 }
 
-exports.waitForUpdate = window.waitForUpdate
+if (typeof window !== 'undefined') {
+  window.waitForUpdate = waitForUpdate
+}
+
+exports.waitForUpdate = waitForUpdate
 
 function timeout(n) {
   return (next) => setTimeout(next, n)

test/helpers/wait-for-update.js

@@ -4,8 +4,8 @@ const {
   ref,
   onServerPrefetch,
   getCurrentInstance,
-  provide,
-  inject,
+  isReactive,
+  reactive,
 } = require('../../src')
 
 function fetch(result) {

test/ssr/serverPrefetch.spec.js

@@ -0,0 +1,47 @@
+/**
+ * @jest-environment node
+ */
+
+import Vue from '../vue'
+import { isReactive, reactive, ref, isRaw, isRef, shallowRef } from '../../src'
+import { createRenderer } from 'vue-server-renderer'
+
+describe('SSR Reactive', () => {
+  beforeEach(() => {
+    process.env.VUE_ENV = 'server'
+  })
+
+  it('should in SSR context', async () => {
+    expect(typeof window).toBe('undefined')
+    expect((Vue.observable({}) as any).__ob__).toBeUndefined()
+  })
+
+  it('should render', async () => {
+    const app = new Vue({
+      setup() {
+        return {
+          count: ref(42),
+        }
+      },
+      render(this: any, h) {
+        return h('div', this.count)
+      },
+    })
+
+    const serverRenderer = createRenderer()
+    const html = await serverRenderer.renderToString(app)
+    expect(html).toBe('<div data-server-rendered="true">42</div>')
+  })
+
+  it('reactive + isReactive', async () => {
+    const state = reactive({})
+    expect(isReactive(state)).toBe(true)
+    expect(isRaw(state)).toBe(false)
+  })
+
+  it('shallowRef + isRef', async () => {
+    const state = shallowRef({})
+    expect(isRef(state)).toBe(true)
+    expect(isRaw(state)).toBe(false)
+  })
+})