include compiler in vue-server-renderer

Author: yyx990803

benchmarks/ssr/common.js

@@ -1,6 +1,5 @@
 'use strict'
 
-const compiler = require('../../packages/vue-template-compiler')
 const self = (global || root)
 
 self.performance = {
@@ -26,7 +25,7 @@ function generateGrid (rowCount, columnCount) {
 
 const gridData = generateGrid(1000, 10)
 
-var gridComponent = {
+module.exports = {
   template: '<div><h1>{{ Math.random() }}</h1><my-table></my-table></div>',
   components: {
     myTable: {
@@ -58,23 +57,3 @@ var gridComponent = {
     }
   }
 }
-
-function createCompiledOptions (options) {
-  const res = compiler.compileToFunctions(options.template, {
-    preserveWhitespace: false
-  })
-  Object.assign(options, res)
-  delete options.template
-  if (options.components) {
-    const keys = Object.keys(options.components)
-    let total = keys.length
-    while (total) {
-      const name = keys[total - 1]
-      options.components[name] = createCompiledOptions(options.components[name])
-      total--
-    }
-  }
-  return options
-}
-
-module.exports = createCompiledOptions(gridComponent)

build/build.js

@@ -72,7 +72,7 @@ var builds = [
   {
     entry: 'src/entries/web-server-renderer.js',
     format: 'cjs',
-    external: ['stream', 'module', 'vm', 'entities'],
+    external: ['stream', 'module', 'vm', 'entities', 'de-indent'],
     out: 'packages/vue-server-renderer/index.js'
   }
 ]

build/webpack.ssr.dev.config.js

@@ -13,7 +13,8 @@ module.exports = {
     alias: alias
   },
   externals: {
-    'entities': true
+    'entities': true,
+    'de-indent': true
   },
   module: {
     noParse: /run-in-vm/,

package.json

@@ -15,7 +15,7 @@
     "dev:ssr": "webpack --watch --config build/webpack.ssr.dev.config.js",
     "dev:compiler": "webpack --watch --config build/webpack.compiler.dev.config.js",
     "build": "NODE_ENV=production node build/build.js",
-    "build:ssr": "npm run build -- vue.common.js,vue-template-compiler,vue-server-renderer",
+    "build:ssr": "npm run build -- vue.common.js,vue-server-renderer",
     "test": "npm run lint && flow check && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr",
     "test:unit": "NODE_ENV=development karma start build/karma.unit.config.js",
     "test:cover": "NODE_ENV=development karma start build/karma.cover.config.js",

packages/vue-server-renderer/package.json

@@ -18,7 +18,8 @@
     "url": "https://github.com/vuejs/vue/issues"
   },
   "dependencies": {
-    "entities": "^1.1.1"
+    "entities": "^1.1.1",
+    "de-indent": "^1.0.2"
   },
   "homepage": "https://github.com/vuejs/vue#readme"
 }

src/server/render.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import { encodeHTML } from 'entities'
+import { compileToFunctions } from 'web/compiler/index'
 import { createComponentInstanceForVnode } from 'core/vdom/create-component'
 
 const normalizeAsync = (cache, method) => {
@@ -14,6 +15,18 @@ const normalizeAsync = (cache, method) => {
   }
 }
 
+const compilationCache = Object.create(null)
+const normalizeRender = vm => {
+  const { render, template } = vm.$options
+  if (!render && template) {
+    const renderFns = (
+      compilationCache[template] ||
+      (compilationCache[template] = compileToFunctions(template))
+    )
+    Object.assign(vm.$options, renderFns)
+  }
+}
+
 export function createRenderFunction (
   modules: Array<Function>,
   directives: Object,
@@ -77,9 +90,11 @@ export function createRenderFunction (
   }
 
   function renderComponent (node, write, next, isRoot) {
-    const child = createComponentInstanceForVnode(node)._render()
-    child.parent = node
-    renderNode(child, write, next, isRoot)
+    const child = createComponentInstanceForVnode(node)
+    normalizeRender(child)
+    const childNode = child._render()
+    childNode.parent = node
+    renderNode(childNode, write, next, isRoot)
   }
 
   function renderComponentWithCache (node, write, next, isRoot, cache, key) {
@@ -179,6 +194,7 @@ export function createRenderFunction (
     write: (text: string, next: Function) => void,
     done: Function
   ) {
+    normalizeRender(component)
     renderNode(component._render(), write, done, true)
   }
 }

test/ssr/ssr-stream.spec.js

@@ -1,11 +1,10 @@
 import Vue from '../../dist/vue.common.js'
-import { compileToFunctions } from '../../packages/vue-template-compiler'
 import { createRenderer } from '../../packages/vue-server-renderer'
 const { renderToStream } = createRenderer()
 
 describe('SSR: renderToStream', () => {
   it('should render to a stream', done => {
-    const stream = renderVmWithOptions({
+    const stream = renderToStream(new Vue({
       template: `
         <div>
           <p class="hi">yoyo</p>
@@ -45,7 +44,7 @@ describe('SSR: renderToStream', () => {
           }
         }
       }
-    })
+    }))
     let res = ''
     stream.on('data', chunk => {
       res += chunk
@@ -78,10 +77,3 @@ describe('SSR: renderToStream', () => {
     stream.on('data', _ => _)
   })
 })
-
-function renderVmWithOptions (options) {
-  const res = compileToFunctions(options.template)
-  Object.assign(options, res)
-  delete options.template
-  return renderToStream(new Vue(options))
-}

test/ssr/ssr-string.spec.js

@@ -1,5 +1,4 @@
 import Vue from '../../dist/vue.common.js'
-import { compileToFunctions } from '../../packages/vue-template-compiler'
 import { createRenderer } from '../../packages/vue-server-renderer'
 const { renderToString } = createRenderer()
 
@@ -223,11 +222,13 @@ describe('SSR: renderToString', () => {
       `,
       components: {
         testAsync (resolve) {
-          const options = compileToFunctions(`
-            <span class="b">
-              <test-sub-async></test-sub-async>
-            </span>
-          `, { preserveWhitespace: false })
+          const options = {
+            template: `
+              <span class="b">
+                <test-sub-async></test-sub-async>
+              </span>
+            `
+          }
 
           options.components = {
             testSubAsync (resolve) {
@@ -475,9 +476,6 @@ describe('SSR: renderToString', () => {
 })
 
 function renderVmWithOptions (options, cb) {
-  const res = compileToFunctions(options.template)
-  Object.assign(options, res)
-  delete options.template
   renderToString(new Vue(options), (err, res) => {
     expect(err).toBeNull()
     cb(res)