fix(ssr): avoid merging style generated by vShow into $attrs

packages/compiler-ssr/__tests__/ssrVShow.spec.ts

@@ -33,6 +33,44 @@ describe('ssr: v-show', () => {
       `)
   })
 
+  test('with component', () => {
+    expect(
+      compileWithWrapper(`<Foo :style="{color:'red'}" v-show="foo"/>`).code,
+    ).toMatchInlineSnapshot(`
+      "const { resolveComponent: _resolveComponent } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _component_Foo = _resolveComponent("Foo")
+
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
+        _push(_ssrRenderComponent(_component_Foo, { style: {color:'red'} }, null, _parent, undefined, {
+          style: (_ctx.foo) ? null : { display: "none" }
+        }))
+        _push(\`</div>\`)
+      }"
+    `)
+  })
+
+  test('with dynamic component', () => {
+    expect(
+      compileWithWrapper(
+        `<component is="Foo" :style="{color:'red'}" v-show="foo"/>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { resolveDynamicComponent: _resolveDynamicComponent, createVNode: _createVNode } = require("vue")
+      const { ssrRenderVNode: _ssrRenderVNode, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
+        _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent("Foo"), { style: {color:'red'} }, null), _parent, undefined, {
+          style: (_ctx.foo) ? null : { display: "none" }
+        })
+        _push(\`</div>\`)
+      }"
+    `)
+  })
+
   test('with static style', () => {
     expect(compileWithWrapper(`<div style="color:red" v-show="foo"/>`).code)
       .toMatchInlineSnapshot(`

packages/compiler-ssr/src/transforms/ssrTransformComponent.ts

@@ -30,6 +30,7 @@ import {
   createCallExpression,
   createFunctionExpression,
   createIfStatement,
+  createObjectExpression,
   createReturnStatement,
   createRoot,
   createSimpleExpression,
@@ -134,6 +135,17 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
       })
     }
 
+    let vShowExp
+    const vShowDir = node.props.find(
+      p => p.type === NodeTypes.DIRECTIVE && p.name === 'show',
+    ) as DirectiveNode | undefined
+    if (vShowDir) {
+      node.props = node.props.filter(p => p !== vShowDir)
+      const directiveTransform = context.directiveTransforms['show']
+      const { props } = directiveTransform!(vShowDir, node, context)
+      vShowExp = createObjectExpression(props)
+    }
+
     let propsExp: string | JSChildNode = `null`
     if (node.props.length) {
       // note we are not passing ssr: true here because for components, v-on
@@ -180,22 +192,31 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
       // dynamic component that resolved to a `resolveDynamicComponent` call
       // expression - since the resolved result may be a plain element (string)
       // or a VNode, handle it with `renderVNode`.
+      const args: (string | JSChildNode)[] = [
+        `_push`,
+        createCallExpression(context.helper(CREATE_VNODE), [
+          component,
+          propsExp,
+          slots,
+        ]),
+        `_parent`,
+      ]
+      if (vShowExp) args.push(`undefined`, vShowExp)
       node.ssrCodegenNode = createCallExpression(
         context.helper(SSR_RENDER_VNODE),
-        [
-          `_push`,
-          createCallExpression(context.helper(CREATE_VNODE), [
-            component,
-            propsExp,
-            slots,
-          ]),
-          `_parent`,
-        ],
+        args,
       )
     } else {
+      const args: (string | JSChildNode)[] = [
+        component,
+        propsExp,
+        slots,
+        `_parent`,
+      ]
+      if (vShowExp) args.push(`undefined`, vShowExp)
       node.ssrCodegenNode = createCallExpression(
         context.helper(SSR_RENDER_COMPONENT),
-        [component, propsExp, slots, `_parent`],
+        args,
       )
     }
   }

packages/server-renderer/__tests__/ssrDirectives.spec.ts

@@ -66,6 +66,38 @@ describe('ssr: directives', () => {
         ),
       ).toBe(`<div style="color:red;font-size:12;display:none;"></div>`)
     })
+
+    test('with component', async () => {
+      expect(
+        await renderToString(
+          createApp({
+            components: {
+              Foo: {
+                template: `<div><span v-bind="$attrs"></span></div>`,
+              },
+            },
+            data: () => ({ show: false }),
+            template: `<Foo v-show="show"/>`,
+          }),
+        ),
+      ).toBe(`<div style="display:none;"><span></span></div>`)
+    })
+
+    test('with dynamic component', async () => {
+      expect(
+        await renderToString(
+          createApp({
+            components: {
+              Foo: {
+                template: `<div><span v-bind="$attrs"></span></div>`,
+              },
+            },
+            data: () => ({ show: false }),
+            template: `<component is="Foo" v-show="show"/>`,
+          }),
+        ),
+      ).toBe(`<div style="display:none;"><span></span></div>`)
+    })
   })
 
   describe('template v-model', () => {

packages/server-renderer/src/helpers/ssrRenderComponent.ts

@@ -13,10 +13,12 @@ export function ssrRenderComponent(
   children: Slots | SSRSlots | null = null,
   parentComponent: ComponentInternalInstance | null = null,
   slotScopeId?: string,
+  vShowValue?: Props,
 ): SSRBuffer | Promise<SSRBuffer> {
   return renderComponentVNode(
     createVNode(comp, props, children),
     parentComponent,
     slotScopeId,
+    vShowValue,
   )
 }

packages/server-renderer/src/render.ts

@@ -92,6 +92,7 @@ export function renderComponentVNode(
   vnode: VNode,
   parentComponent: ComponentInternalInstance | null = null,
   slotScopeId?: string,
+  vShowValue?: Props,
 ): SSRBuffer | Promise<SSRBuffer> {
   const instance = (vnode.component = createComponentInstance(
     vnode,
@@ -116,15 +117,18 @@ export function renderComponentVNode(
       })
       // Note: error display is already done by the wrapped lifecycle hook function.
       .catch(NOOP)
-    return p.then(() => renderComponentSubTree(instance, slotScopeId))
+    return p.then(() =>
+      renderComponentSubTree(instance, slotScopeId, vShowValue),
+    )
   } else {
-    return renderComponentSubTree(instance, slotScopeId)
+    return renderComponentSubTree(instance, slotScopeId, vShowValue)
   }
 }
 
 function renderComponentSubTree(
   instance: ComponentInternalInstance,
   slotScopeId?: string,
+  vShowValue?: Props,
 ): SSRBuffer | Promise<SSRBuffer> {
   if (__DEV__) pushWarningContext(instance.vnode)
   const comp = instance.type as Component
@@ -186,6 +190,12 @@ function renderComponentSubTree(
         }
       }
 
+      if (vShowValue) {
+        // v-show has higher priority
+        if (attrs) attrs = mergeProps(attrs, vShowValue)
+        else attrs = vShowValue
+      }
+
       // set current rendering instance for asset resolution
       const prev = setCurrentRenderingInstance(instance)
       try {
@@ -225,6 +235,7 @@ export function renderVNode(
   vnode: VNode,
   parentComponent: ComponentInternalInstance,
   slotScopeId?: string,
+  vShowValue?: Props,
 ): void {
   const { type, shapeFlag, children, dirs, props } = vnode
   if (dirs) {
@@ -263,7 +274,9 @@ export function renderVNode(
       if (shapeFlag & ShapeFlags.ELEMENT) {
         renderElementVNode(push, vnode, parentComponent, slotScopeId)
       } else if (shapeFlag & ShapeFlags.COMPONENT) {
-        push(renderComponentVNode(vnode, parentComponent, slotScopeId))
+        push(
+          renderComponentVNode(vnode, parentComponent, slotScopeId, vShowValue),
+        )
       } else if (shapeFlag & ShapeFlags.TELEPORT) {
         renderTeleportVNode(push, vnode, parentComponent, slotScopeId)
       } else if (shapeFlag & ShapeFlags.SUSPENSE) {