ssr: inject userContext into vnode to ensure correctness

Author: yyx990803

src/core/instance/render.js

@@ -27,10 +27,9 @@ import { renderStatic, markOnce } from './render-helpers/render-static'
 import { resolveSlots, resolveScopedSlots } from './render-helpers/resolve-slots'
 
 export function initRender (vm: Component) {
-  vm.$vnode = null // the placeholder node in parent tree
   vm._vnode = null // the root of the child tree
   vm._staticTrees = null
-  const parentVnode = vm.$options._parentVnode
+  const parentVnode = vm.$vnode = vm.$options._parentVnode // the placeholder node in parent tree
   const renderContext = parentVnode && parentVnode.context
   vm.$slots = resolveSlots(vm.$options._renderChildren, renderContext)
   vm.$scopedSlots = emptyObject

src/server/bundle-renderer/create-bundle-runner.js

@@ -104,6 +104,7 @@ export function createBundleRunner (entry, files, basedir, runInNewContext) {
     // slightly differently.
     const initialContext = {}
     const sharedContext = createContext(initialContext)
+    delete sharedContext.__VUE_SSR_CONTEXT__
     let runner // lazy creation so that errors can be caught by user
     return (userContext = {}) => new Promise(resolve => {
       if (!runner) {
@@ -115,7 +116,6 @@ export function createBundleRunner (entry, files, basedir, runInNewContext) {
           )
         }
       }
-      sharedContext.__VUE_SSR_CONTEXT__ = userContext
       userContext._registeredComponents = new Set()
       // vue-style-loader styles imported outside of component lifecycle hooks
       if (initialContext._styles) {

src/server/render.js

@@ -141,10 +141,13 @@ function renderComponentWithCache (node, isRoot, key, context) {
 
 function renderComponentInner (node, isRoot, context) {
   const prevActive = context.activeInstance
+  // expose userContext on vnode
+  node.ssrContext = context.userContext
   const child = context.activeInstance = createComponentInstanceForVnode(
     node,
     context.activeInstance
   )
+  node.ssrContext = null
   normalizeRender(child)
   const childNode = child._render()
   childNode.parent = node

test/ssr/fixtures/async-bar.js

@@ -1,8 +1,6 @@
-/* globals __VUE_SSR_CONTEXT__ */
-
 module.exports = {
   beforeCreate () {
-    __VUE_SSR_CONTEXT__._registeredComponents.add('__MODULE_ID__')
+    this.$vnode.ssrContext._registeredComponents.add('__MODULE_ID__')
   },
   render (h) {
     return h('div', 'async bar')

test/ssr/fixtures/async-foo.js

@@ -1,12 +1,10 @@
-/* globals __VUE_SSR_CONTEXT__ */
-
 // import image and font
 import font from './test.woff2'
 import image from './test.png'
 
 module.exports = {
   beforeCreate () {
-    __VUE_SSR_CONTEXT__._registeredComponents.add('__MODULE_ID__')
+    this.$vnode.ssrContext._registeredComponents.add('__MODULE_ID__')
   },
   render (h) {
     return h('div', `async ${font} ${image}`)

test/ssr/fixtures/nested-cache.js

@@ -1,56 +1,46 @@
-/* globals __VUE_SSR_CONTEXT__ */
-
 import Vue from '../../../dist/vue.runtime.common.js'
 
-function register (id, context) {
-  context = context || __VUE_SSR_CONTEXT__
-  context.registered.push(id)
+function createRegisterFn (id) {
+  return function (context) {
+    context = context || this.$vnode.ssrContext
+    context.registered.push(id)
+  }
+}
+
+function addHooks (comp) {
+  const hook = createRegisterFn(comp.name)
+  return Object.assign(comp, {
+    _ssrRegister: hook,
+    beforeCreate: hook
+  })
 }
 
-const grandchild = {
+const grandchild = addHooks({
   name: 'grandchild',
   props: ['id'],
-  _ssrRegister: context => {
-    register('grandchild', context)
-  },
-  beforeCreate () {
-    register('grandchild')
-  },
   serverCacheKey: props => props.id,
   render (h) {
     return h('div', '/test')
   }
-}
+})
 
-const child = {
+const child = addHooks({
   name: 'child',
   props: ['id'],
-  _ssrRegister: context => {
-    register('child', context)
-  },
-  beforeCreate () {
-    register('child')
-  },
   serverCacheKey: props => props.id,
   render (h) {
     return h(grandchild, { props: { id: this.id }})
   }
-}
+})
 
-const app = {
+const app = addHooks({
   name: 'app',
   props: ['id'],
-  _ssrRegister: context => {
-    register('app', context)
-  },
-  beforeCreate () {
-    register('app')
-  },
   serverCacheKey: props => props.id,
   render (h) {
     return h(child, { props: { id: this.id }})
   }
-}
+})
 
 export default () => {
   return Promise.resolve(new Vue({