fix(compiler-ssr): ensure v-show has a higher priority in SSR (#12171)

close #12162

diff --git a/packages/compiler-ssr/__tests__/ssrVShow.spec.ts b/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
index d0f3ec93036add68c9acd7181c1944407d3a5e75..d06e2c9d7ca96f895e08fa9933be83ad39b38978 100644 (file)
--- a/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
@@ -11,9 +11,9 @@ describe('ssr: v-show', () => {
       const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${_ssrRenderAttrs(_mergeProps({
+        _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, {
           style: (_ctx.foo) ? null : { display: "none" }
-        }, _attrs))}></div>\`)
+        }))}></div>\`)
       }"
     `)
   })
@@ -92,6 +92,24 @@ describe('ssr: v-show', () => {
     `)
   })
 
+  test('with style + display', () => {
+    expect(compileWithWrapper(`<div v-show="foo" style="display:flex" />`).code)
+      .toMatchInlineSnapshot(`
+        "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<div\${
+            _ssrRenderAttrs(_attrs)
+          }><div style="\${
+            _ssrRenderStyle([
+              {"display":"flex"},
+              (_ctx.foo) ? null : { display: "none" }
+            ])
+          }"></div></div>\`)
+        }"
+      `)
+  })
+
   test('with v-bind', () => {
     expect(
       compileWithWrapper(

diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index 4a12b0f7ba78c790eea4316e7d7e4a9e3fc988d5..ee46894f9fcefb80e3180788f94c7e39c2df16d2 100644 (file)
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -88,6 +88,17 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
     const hasCustomDir = node.props.some(
       p => p.type === NodeTypes.DIRECTIVE && !isBuiltInDirective(p.name),
     )
+
+    // v-show has a higher priority in ssr
+    const vShowPropIndex = node.props.findIndex(
+      i => i.type === NodeTypes.DIRECTIVE && i.name === 'show',
+    )
+    if (vShowPropIndex !== -1) {
+      const vShowProp = node.props[vShowPropIndex]
+      node.props.splice(vShowPropIndex, 1)
+      node.props.push(vShowProp)
+    }
+
     const needMergeProps = hasDynamicVBind || hasCustomDir
     if (needMergeProps) {
       const { props, directives } = buildProps(