use lodash.template for ssr templates by default

yyx990803 · yyx990803 · commit 94d5e332d1ea · 2017-04-19T11:43:53.000+08:00
diff --git a/flow/modules.js b/flow/modules.js
@@ -35,3 +35,9 @@ declare module 'serialize-javascript' {
     (input: string, options: { isJSON: boolean }): string
   }
 }
+
+declare module 'lodash.template' {
+  declare var exports: {
+    (input: string, options: { interpolate: RegExp, escape: RegExp }): Function
+  }
+}
diff --git a/package.json b/package.json
@@ -95,6 +95,7 @@
     "karma-sourcemap-loader": "^0.3.0",
     "karma-webpack": "^2.0.1",
     "lodash": "^4.17.1",
+    "lodash.template": "^4.4.0",
     "lru-cache": "^4.0.2",
     "nightwatch": "^0.9.9",
     "nightwatch-helpers": "^1.2.0",
diff --git a/packages/vue-server-renderer/package.json b/packages/vue-server-renderer/package.json
@@ -21,6 +21,7 @@
     "chalk": "^1.1.3",
     "hash-sum": "^1.0.2",
     "he": "^1.1.0",
+    "lodash.template": "^4.4.0",
     "resolve": "^1.2.0",
     "source-map": "0.5.6",
     "serialize-javascript": "^1.3.0"
diff --git a/src/server/create-renderer.js b/src/server/create-renderer.js
@@ -51,8 +51,8 @@ export function createRenderer ({
       done: (err: ?Error, res: ?string) => any,
       context?: ?Object
     ): void {
-      if (!template && context && clientManifest) {
-        exposeAssetRenderFns(context, templateRenderer)
+      if (context) {
+        templateRenderer.bindRenderFns(context)
       }
       let result = ''
       const write = createWriteFunction(text => {
@@ -75,13 +75,13 @@ export function createRenderer ({
       component: Component,
       context?: ?Object
     ): stream$Readable {
+      if (context) {
+        templateRenderer.bindRenderFns(context)
+      }
       const renderStream = new RenderStream((write, done) => {
         render(component, write, context, done)
       })
       if (!template) {
-        if (context && clientManifest) {
-          exposeAssetRenderFns(context, templateRenderer)
-        }
         return renderStream
       } else {
         const templateStream = templateRenderer.createStream(context)
@@ -94,11 +94,3 @@ export function createRenderer ({
     }
   }
 }
-
-// Expose preload/prefetch and script render fns when client manifest is
-// available.
-function exposeAssetRenderFns (context: Object, renderer: TemplateRenderer) {
-  context.renderPreloadLinks = renderer.renderPreloadLinks.bind(renderer, context)
-  context.renderPrefetchLinks = renderer.renderPrefetchLinks.bind(renderer, context)
-  context.renderScripts = renderer.renderScripts.bind(renderer, context)
-}
diff --git a/src/server/template-renderer/index.js b/src/server/template-renderer/index.js
@@ -60,6 +60,13 @@ export default class TemplateRenderer {
     }
   }
 
+  bindRenderFns (context: Object) {
+    const renderer: any = this
+    ;['Links', 'State', 'Scripts', 'Styles'].forEach(type => {
+      context[`render${type}`] = renderer[`render${type}`].bind(renderer, context)
+    })
+  }
+
   // render synchronously given rendered app content and render context
   renderSync (content: string, context: ?Object) {
     const template = this.parsedTemplate
@@ -68,19 +75,27 @@ export default class TemplateRenderer {
     }
     context = context || {}
     return (
-      template.head +
+      template.head(context) +
       (context.head || '') +
-      this.renderPreloadLinks(context) +
-      this.renderPrefetchLinks(context) +
-      (context.styles || '') +
-      template.neck +
+      this.renderLinks(context) +
+      this.renderStyles(context) +
+      template.neck(context) +
       content +
       this.renderState(context) +
       this.renderScripts(context) +
-      template.tail
+      template.tail(context)
     )
   }
 
+  renderStyles (context: Object): string {
+    // context.styles is a getter exposed by vue-style-loader
+    return context.styles || ''
+  }
+
+  renderLinks (context: Object): string {
+    return this.renderPreloadLinks(context) + this.renderPrefetchLinks(context)
+  }
+
   renderPreloadLinks (context: Object): string {
     const usedAsyncFiles = this.getUsedAsyncFiles(context)
     if (this.preloadFiles || usedAsyncFiles) {
diff --git a/src/server/template-renderer/parse-template.js b/src/server/template-renderer/parse-template.js
@@ -1,9 +1,15 @@
 /* @flow */
 
+const compile = require('lodash.template')
+const compileOptions = {
+  escape: /{{[^{]([\s\S]+?)[^}]}}/g,
+  interpolate: /{{{([\s\S]+?)}}}/g
+}
+
 export type ParsedTemplate = {
-  head: string;
-  neck: string;
-  tail: string;
+  head: (data: any) => string;
+  neck: (data: any) => string;
+  tail: (data: any) => string;
 };
 
 export function parseTemplate (
@@ -29,8 +35,8 @@ export function parseTemplate (
   }
 
   return {
-    head: template.slice(0, i),
-    neck: template.slice(i, j),
-    tail: template.slice(j + contentPlaceholder.length)
+    head: compile(template.slice(0, i), compileOptions),
+    neck: compile(template.slice(i, j), compileOptions),
+    tail: compile(template.slice(j + contentPlaceholder.length), compileOptions)
   }
 }
diff --git a/src/server/template-renderer/template-stream.js b/src/server/template-renderer/template-stream.js
@@ -33,7 +33,7 @@ export default class TemplateStream extends Transform {
 
   start () {
     this.started = true
-    this.push(this.template.head)
+    this.push(this.template.head(this.context))
 
     // inline server-rendered head meta information
     if (this.context.head) {
@@ -57,7 +57,7 @@ export default class TemplateStream extends Transform {
       this.push(this.context.styles)
     }
 
-    this.push(this.template.neck)
+    this.push(this.template.neck(this.context))
   }
 
   _flush (done: Function) {
@@ -75,7 +75,7 @@ export default class TemplateStream extends Transform {
       this.push(scripts)
     }
 
-    this.push(this.template.tail)
+    this.push(this.template.tail(this.context))
     done()
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3190,6 +3190,10 @@ lodash._isiterateecall@^3.0.0:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
 
+lodash._reinterpolate@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+
 lodash._stack@^4.0.0:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/lodash._stack/-/lodash._stack-4.1.3.tgz#751aa76c1b964b047e76d14fc72a093fcb5e2dd0"
@@ -3253,6 +3257,19 @@ lodash.rest@^4.0.0:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/lodash.rest/-/lodash.rest-4.0.5.tgz#954ef75049262038c96d1fc98b28fdaf9f0772aa"
 
+lodash.template@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+
 lodash@3.10.1, lodash@^3.8.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"

Original file line number	Diff line number	Diff line change
`@@ -35,3 +35,9 @@ declare module 'serialize-javascript' {`
`35`	`35`	`(input: string, options: { isJSON: boolean }): string`
`36`	`36`	`}`
`37`	`37`	`}`
	`38`	`+`
	`39`	`+declare module 'lodash.template' {`
	`40`	`+ declare var exports: {`
	`41`	`+ (input: string, options: { interpolate: RegExp, escape: RegExp }): Function`
	`42`	`+ }`
	`43`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ export default class TemplateStream extends Transform {`
`33`	`33`
`34`	`34`	`start () {`
`35`	`35`	`this.started = true`
`36`		`- this.push(this.template.head)`
	`36`	`+ this.push(this.template.head(this.context))`
`37`	`37`
`38`	`38`	`// inline server-rendered head meta information`
`39`	`39`	`if (this.context.head) {`
`@@ -57,7 +57,7 @@ export default class TemplateStream extends Transform {`
`57`	`57`	`this.push(this.context.styles)`
`58`	`58`	`}`
`59`	`59`
`60`		`- this.push(this.template.neck)`
	`60`	`+ this.push(this.template.neck(this.context))`
`61`	`61`	`}`
`62`	`62`
`63`	`63`	`_flush (done: Function) {`
`@@ -75,7 +75,7 @@ export default class TemplateStream extends Transform {`
`75`	`75`	`this.push(scripts)`
`76`	`76`	`}`
`77`	`77`
`78`		`- this.push(this.template.tail)`
	`78`	`+ this.push(this.template.tail(this.context))`
`79`	`79`	`done()`
`80`	`80`	`}`
`81`	`81`	`}`