wip(compiler-ssr): v-show

packages/compiler-core/src/codegen.ts

@@ -699,10 +699,12 @@ function genConditionalExpression(
   }
   needNewline && indent()
   context.indentLevel++
+  needNewline || push(` `)
   push(`? `)
   genNode(consequent, context)
   context.indentLevel--
   needNewline && newline()
+  needNewline || push(` `)
   push(`: `)
   const isNested = alternate.type === NodeTypes.JS_CONDITIONAL_EXPRESSION
   if (!isNested) {

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

@@ -0,0 +1,84 @@
+import { compile } from '../src'
+
+describe('ssr: v-show', () => {
+  test('basic', () => {
+    expect(compile(`<div v-show="foo"/>`).code).toMatchInlineSnapshot(`
+      "const { _renderStyle } = require(\\"vue\\")
+
+      return function ssrRender(_ctx, _push, _parent) {
+        _push(\`<div\${_renderStyle((_ctx.foo) ? null : { display: \\"none\\" })}></div>\`)
+      }"
+    `)
+  })
+
+  test('with static style', () => {
+    expect(compile(`<div style="color:red" v-show="foo"/>`).code)
+      .toMatchInlineSnapshot(`
+      "const { _renderStyle } = require(\\"vue\\")
+
+      const _hoisted_1 = {\\"color\\":\\"red\\"}
+
+      return function ssrRender(_ctx, _push, _parent) {
+        _push(\`<div\${_renderStyle([
+          _hoisted_1,
+          (_ctx.foo) ? null : { display: \\"none\\" }
+        ])}></div>\`)
+      }"
+    `)
+  })
+
+  test('with dynamic style', () => {
+    expect(compile(`<div :style="{ color: 'red' }" v-show="foo"/>`).code)
+      .toMatchInlineSnapshot(`
+      "const { _renderStyle } = require(\\"vue\\")
+
+      return function ssrRender(_ctx, _push, _parent) {
+        _push(\`<div\${_renderStyle([
+          { color: 'red' },
+          (_ctx.foo) ? null : { display: \\"none\\" }
+        ])}></div>\`)
+      }"
+    `)
+  })
+
+  test('with static + dynamic style', () => {
+    expect(
+      compile(`<div style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`)
+        .code
+    ).toMatchInlineSnapshot(`
+      "const { _renderStyle } = require(\\"vue\\")
+
+      const _hoisted_1 = {\\"color\\":\\"red\\"}
+
+      return function ssrRender(_ctx, _push, _parent) {
+        _push(\`<div\${_renderStyle([
+          _hoisted_1,
+          { fontSize: 14 },
+          (_ctx.foo) ? null : { display: \\"none\\" }
+        ])}></div>\`)
+      }"
+    `)
+  })
+
+  test('with v-bind', () => {
+    expect(
+      compile(
+        `<div v-bind="baz" style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
+      ).code
+    ).toMatchInlineSnapshot(`
+      "const { mergeProps, _renderAttrs } = require(\\"vue\\")
+
+      const _hoisted_1 = {\\"color\\":\\"red\\"}
+
+      return function ssrRender(_ctx, _push, _parent) {
+        _push(\`<div\${_renderAttrs(mergeProps(_ctx.baz, {
+          style: [
+            _hoisted_1,
+            { fontSize: 14 },
+            (_ctx.foo) ? null : { display: \\"none\\" }
+          ]
+        }))}></div>\`)
+      }"
+    `)
+  })
+})

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

@@ -16,7 +16,8 @@ import {
   CallExpression,
   createArrayExpression,
   ExpressionNode,
-  JSChildNode
+  JSChildNode,
+  ArrayExpression
 } from '@vue/compiler-dom'
 import { escapeHtml, isBooleanAttr, isSSRSafeAttrName } from '@vue/shared'
 import { createSSRCompilerError, SSRErrorCodes } from '../errors'
@@ -210,8 +211,12 @@ function isTextareaWithValue(
 }
 
 function mergeCall(call: CallExpression, arg: string | JSChildNode) {
-  const existing = call.arguments[0] as ExpressionNode
-  call.arguments[0] = createArrayExpression([existing, arg])
+  const existing = call.arguments[0] as ExpressionNode | ArrayExpression
+  if (existing.type === NodeTypes.JS_ARRAY_EXPRESSION) {
+    existing.elements.push(arg)
+  } else {
+    call.arguments[0] = createArrayExpression([existing, arg])
+  }
 }
 
 function removeStaticBinding(

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

@@ -1,7 +1,33 @@
-import { DirectiveTransform } from '@vue/compiler-dom'
+import {
+  DirectiveTransform,
+  createCompilerError,
+  DOMErrorCodes,
+  createObjectProperty,
+  createSimpleExpression,
+  createConditionalExpression,
+  createObjectExpression
+} from '@vue/compiler-dom'
 
 export const ssrTransformShow: DirectiveTransform = (dir, node, context) => {
+  if (!dir.exp) {
+    context.onError(createCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION))
+  }
   return {
-    props: []
+    props: [
+      createObjectProperty(
+        createSimpleExpression(`style`, true),
+        createConditionalExpression(
+          dir.exp!,
+          createSimpleExpression(`null`, false),
+          createObjectExpression([
+            createObjectProperty(
+              createSimpleExpression(`display`, true),
+              createSimpleExpression(`none`, true)
+            )
+          ]),
+          false /* no newline */
+        )
+      )
+    ]
   }
 }