fix SSR v-show render. (vuejs#5224)

defcc · yyx990803 · commit e733e5cee858 · 2017-03-21T09:50:26.000+08:00
* fix SSR v-show bug. v-show info needs to be merged from parent to child component

* improve variable name

* update test case

* update test case
diff --git a/src/server/render.js b/src/server/render.js
@@ -144,6 +144,22 @@ function hasAncestorData (node: VNode) {
   return parentNode && (parentNode.data || hasAncestorData(parentNode))
 }
 
+function getVShowDirectiveInfo (node: VNode): ?VNodeDirective {
+  let dir: VNodeDirective
+  let tmp
+
+  while (node) {
+    if (node.data && node.data.directives) {
+      tmp = node.data.directives.find(dir => dir.name === 'show')
+      if (tmp) {
+        dir = tmp
+      }
+    }
+    node = node.parent
+  }
+  return dir
+}
+
 function renderStartingTag (node: VNode, context) {
   let markup = `<${node.tag}`
   const { directives, modules } = context
@@ -158,14 +174,22 @@ function renderStartingTag (node: VNode, context) {
     const dirs = node.data.directives
     if (dirs) {
       for (let i = 0; i < dirs.length; i++) {
-        const dirRenderer = directives[dirs[i].name]
-        if (dirRenderer) {
+        const name = dirs[i].name
+        const dirRenderer = directives[name]
+        if (dirRenderer && name !== 'show') {
           // directives mutate the node's data
           // which then gets rendered by modules
           dirRenderer(node, dirs[i])
         }
       }
     }
+
+    // v-show directive needs to be merged from parent to child
+    const vshowDirectiveInfo = getVShowDirectiveInfo(node)
+    if (vshowDirectiveInfo) {
+      directives.show(node, vshowDirectiveInfo)
+    }
+
     // apply other modules
     for (let i = 0; i < modules.length; i++) {
       const res = modules[i](node)
diff --git a/test/ssr/ssr-string.spec.js b/test/ssr/ssr-string.spec.js
@@ -240,6 +240,75 @@ describe('SSR: renderToString', () => {
     })
   })
 
+  it('v-show directive render', done => {
+    renderVmWithOptions({
+      template: '<div v-show="false"><span>inner</span></div>'
+    }, res => {
+      expect(res).toContain(
+        '<div server-rendered="true" style="display:none;"><span>inner</span></div>'
+      )
+      done()
+    })
+  })
+
+  it('v-show directive not passed to child', done => {
+    renderVmWithOptions({
+      template: '<foo v-show="false"></foo>',
+      components: {
+        foo: {
+          template: '<div><span>inner</span></div>'
+        }
+      }
+    }, res => {
+      expect(res).toContain(
+        '<div server-rendered="true" style="display:none;"><span>inner</span></div>'
+      )
+      done()
+    })
+  })
+
+  it('v-show directive not passed to slot', done => {
+    renderVmWithOptions({
+      template: '<foo v-show="false"><span>inner</span></foo>',
+      components: {
+        foo: {
+          template: '<div><slot></slot></div>'
+        }
+      }
+    }, res => {
+      expect(res).toContain(
+        '<div server-rendered="true" style="display:none;"><span>inner</span></div>'
+      )
+      done()
+    })
+  })
+
+  it('v-show directive merging on components', done => {
+    renderVmWithOptions({
+      template: '<foo v-show="false"></foo>',
+      components: {
+        foo: {
+          render: h => h('bar', {
+            directives: [{
+              name: 'show',
+              value: true
+            }]
+          }),
+          components: {
+            bar: {
+              render: h => h('div', 'inner')
+            }
+          }
+        }
+      }
+    }, res => {
+      expect(res).toContain(
+        '<div server-rendered="true" style="display:none;">inner</div>'
+      )
+      done()
+    })
+  })
+
   it('text interpolation', done => {
     renderVmWithOptions({
       template: '<div>{{ foo }} side {{ bar }}</div>',
