fix(ssr/watch) flush: sync watchers should work in ssr (#6139)

fix #6013

packages/runtime-core/src/apiWatch.ts

@@ -40,6 +40,8 @@ import { warn } from './warning'
 import { DeprecationTypes } from './compat/compatConfig'
 import { checkCompatEnabled, isCompatEnabled } from './compat/compatConfig'
 import { ObjectWatchOptionItem } from './componentOptions'
+import { useSSRContext } from '@vue/runtime-core'
+import { SSRContext } from '@vue/server-renderer'
 
 export type WatchEffect = (onCleanup: OnCleanup) => void
 
@@ -280,7 +282,8 @@ function doWatch(
  }
 
  // in SSR there is no need to setup an actual effect, and it should be noop
- // unless it's eager
+ // unless it's eager or sync flush
+ let ssrCleanup: (() => void)[] | undefined
  if (__SSR__ && isInSSRComponentSetup) {
  // we will also not call the invalidate callback (+ runner is not set up)
  onCleanup = NOOP
@@ -293,7 +296,12 @@ function doWatch(
  onCleanup
  ])
  }
- return NOOP
+ if (flush === 'sync') {
+ const ctx = useSSRContext() as SSRContext
+ ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = [])
+ } else {
+ return NOOP
+ }
  }
 
  let oldValue: any = isMultiSource
@@ -378,12 +386,15 @@ function doWatch(
  effect.run()
  }
 
- return () => {
+ const unwatch = () => {
  effect.stop()
  if (instance && instance.scope) {
  remove(instance.scope.effects!, effect)
  }
  }
+
+ if (__SSR__ && ssrCleanup) ssrCleanup.push(unwatch)
+ return unwatch
 }
 
 // this.$watch

packages/server-renderer/__tests__/ssrWatch.spec.ts

@@ -0,0 +1,30 @@
+import { createSSRApp, defineComponent, h, watch, ref } from 'vue'
+import { SSRContext, renderToString } from '../src'
+
+describe('ssr: watch', () => {
+ // #6013
+ test('should work w/ flush:sync', async () => {
+ const App = defineComponent(() => {
+ const count = ref(0)
+ let msg = ''
+ watch(
+ count,
+ () => {
+ msg = 'hello world'
+ },
+ { flush: 'sync' }
+ )
+ count.value = 1
+ expect(msg).toBe('hello world')
+ return () => h('div', null, msg)
+ })
+
+ const app = createSSRApp(App)
+ const ctx: SSRContext = {}
+ const html = await renderToString(app, ctx)
+
+ expect(ctx.__watcherHandles!.length).toBe(1)
+
+ expect(html).toMatch('hello world')
+ })
+})

packages/server-renderer/src/render.ts

@@ -45,7 +45,14 @@ export type Props = Record<string, unknown>
 export type SSRContext = {
  [key: string]: any
  teleports?: Record<string, string>
+ /**
+ * @internal
+ */
  __teleportBuffers?: Record<string, SSRBuffer>
+ /**
+ * @internal
+ */
+ __watcherHandles?: (() => void)[]
 }
 
 // Each component has a buffer array.

packages/server-renderer/src/renderToStream.ts

@@ -76,6 +76,13 @@ export function renderToSimpleStream<T extends SimpleReadable>(
  Promise.resolve(renderComponentVNode(vnode))
  .then(buffer => unrollBuffer(buffer, stream))
  .then(() => resolveTeleports(context))
+ .then(() => {
+ if (context.__watcherHandles) {
+ for (const unwatch of context.__watcherHandles) {
+ unwatch()
+ }
+ }
+ })
  .then(() => stream.push(null))
  .catch(error => {
  stream.destroy(error)

packages/server-renderer/src/renderToString.ts

@@ -67,6 +67,12 @@ export async function renderToString(
 
  await resolveTeleports(context)
 
+ if (context.__watcherHandles) {
+ for (const unwatch of context.__watcherHandles) {
+ unwatch()
+ }
+ }
+
  return result
 }