handle new component-lifecycle-based style injection strategy

yyx990803 · yyx990803 · commit 5ec2a7b82cf1 · 2017-04-14T13:48:42.000+08:00
diff --git a/src/server/bundle-renderer/create-bundle-runner.js b/src/server/bundle-renderer/create-bundle-runner.js
@@ -1,3 +1,5 @@
+import { isObject } from 'shared/util'
+
 const vm = require('vm')
 const path = require('path')
 const resolve = require('resolve')
@@ -70,6 +72,20 @@ function compileModule (files, basedir) {
   return evaluateModule
 }
 
+function deepClone (val) {
+  if (isObject(val)) {
+    const res = {}
+    for (const key in val) {
+      res[key] = deepClone(val[key])
+    }
+    return res
+  } else if (Array.isArray(val)) {
+    return val.slice()
+  } else {
+    return val
+  }
+}
+
 export function createBundleRunner (entry, files, basedir, direct) {
   const evaluate = compileModule(files, basedir)
   if (!direct) {
@@ -87,13 +103,18 @@ export function createBundleRunner (entry, files, basedir, direct) {
     // each render, it simply calls the exported function. This avoids the
     // module evaluation costs but requires the source code to be structured
     // slightly differently.
-    const context = createContext()
+    const initialExposedContext = {}
+    const context = createContext(initialExposedContext)
     const runner = evaluate(entry, context, {})
     if (typeof runner !== 'function') {
       throw new Error('direct mode expects bundle export to be a function.')
     }
     return (_context = {}) => {
       context.__VUE_SSR_CONTEXT__ = _context
+      // vue-style-loader styles imported outside of component lifecycle hooks
+      if (initialExposedContext._styles) {
+        _context._styles = deepClone(initialExposedContext._styles)
+      }
       return runner(_context)
     }
   }
diff --git a/src/server/render.js b/src/server/render.js
@@ -43,21 +43,26 @@ function renderNode (node, isRoot, context) {
     const Ctor = node.componentOptions.Ctor
     const getKey = Ctor.options.serverCacheKey
     const name = Ctor.options.name
+    const injectStyles = Ctor.options._injectStyles
     const cache = context.cache
     if (isDef(getKey) && isDef(cache) && isDef(name)) {
       const key = name + '::' + getKey(node.componentOptions.propsData)
       const { has, get } = context
       if (isDef(has)) {
         (has: any)(key, hit => {
           if (hit === true && isDef(get)) {
-            (get: any)(key, res => write(res, next))
+            (get: any)(key, res => {
+              injectStyles && injectStyles.call({})
+              write(res, next)
+            })
           } else {
             renderComponentWithCache(node, isRoot, key, context)
           }
         })
       } else if (isDef(get)) {
         (get: any)(key, res => {
           if (isDef(res)) {
+            injectStyles && injectStyles.call({})
             write(res, next)
           } else {
             renderComponentWithCache(node, isRoot, key, context)
