fix(compiler-ssr): fix input w/ v-bind="obj" codegen

Author: yyx990803

packages/compiler-core/src/ast.ts

@@ -52,6 +52,7 @@ export const enum NodeTypes {
   JS_TEMPLATE_LITERAL,
   JS_IF_STATEMENT,
   JS_ASSIGNMENT_EXPRESSION,
+  JS_SEQUENCE_EXPRESSION,
   JS_RETURN_STATEMENT
 }
 
@@ -282,6 +283,7 @@ export type JSChildNode =
   | ConditionalExpression
   | CacheExpression
   | AssignmentExpression
+  | SequenceExpression
 
 export interface CallExpression extends Node {
   type: NodeTypes.JS_CALL_EXPRESSION
@@ -344,6 +346,7 @@ export type SSRCodegenNode =
   | IfStatement
   | AssignmentExpression
   | ReturnStatement
+  | SequenceExpression
 
 export interface BlockStatement extends Node {
   type: NodeTypes.JS_BLOCK_STATEMENT
@@ -368,6 +371,11 @@ export interface AssignmentExpression extends Node {
   right: JSChildNode
 }
 
+export interface SequenceExpression extends Node {
+  type: NodeTypes.JS_SEQUENCE_EXPRESSION
+  expressions: JSChildNode[]
+}
+
 export interface ReturnStatement extends Node {
   type: NodeTypes.JS_RETURN_STATEMENT
   returns: TemplateChildNode | TemplateChildNode[] | JSChildNode
@@ -727,6 +735,16 @@ export function createAssignmentExpression(
   }
 }
 
+export function createSequenceExpression(
+  expressions: SequenceExpression['expressions']
+): SequenceExpression {
+  return {
+    type: NodeTypes.JS_SEQUENCE_EXPRESSION,
+    expressions,
+    loc: locStub
+  }
+}
+
 export function createReturnStatement(
   returns: ReturnStatement['returns']
 ): ReturnStatement {

packages/compiler-core/src/codegen.ts

@@ -23,7 +23,8 @@ import {
   IfStatement,
   AssignmentExpression,
   ReturnStatement,
-  VNodeCall
+  VNodeCall,
+  SequenceExpression
 } from './ast'
 import { SourceMapGenerator, RawSourceMap } from 'source-map'
 import {
@@ -593,6 +594,9 @@ function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
     case NodeTypes.JS_ASSIGNMENT_EXPRESSION:
       !__BROWSER__ && genAssignmentExpression(node, context)
       break
+    case NodeTypes.JS_SEQUENCE_EXPRESSION:
+      !__BROWSER__ && genSequenceExpression(node, context)
+      break
     case NodeTypes.JS_RETURN_STATEMENT:
       !__BROWSER__ && genReturnStatement(node, context)
       break
@@ -914,6 +918,15 @@ function genAssignmentExpression(
   genNode(node.right, context)
 }
 
+function genSequenceExpression(
+  node: SequenceExpression,
+  context: CodegenContext
+) {
+  context.push(`(`)
+  genNodeList(node.expressions, context)
+  context.push(`)`)
+}
+
 function genReturnStatement(
   { returns }: ReturnStatement,
   context: CodegenContext

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

@@ -118,7 +118,7 @@ describe('ssr: v-model', () => {
       return function ssrRender(_ctx, _push, _parent) {
         let _temp0
 
-        _push(\`<input\${_ssrRenderAttrs(_temp0 = _ctx.obj, _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo)))}>\`)
+        _push(\`<input\${_ssrRenderAttrs((_temp0 = _ctx.obj, _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))}>\`)
       }"
     `)
 
@@ -130,7 +130,7 @@ describe('ssr: v-model', () => {
       return function ssrRender(_ctx, _push, _parent) {
         let _temp0
 
-        _push(\`<input\${_ssrRenderAttrs(_temp0 = _mergeProps({ id: \\"x\\" }, _ctx.obj, { class: \\"y\\" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo)))}>\`)
+        _push(\`<input\${_ssrRenderAttrs((_temp0 = _mergeProps({ id: \\"x\\" }, _ctx.obj, { class: \\"y\\" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))}>\`)
       }"
     `)
   })

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

@@ -22,7 +22,8 @@ import {
   TextNode,
   hasDynamicKeyVBind,
   MERGE_PROPS,
-  isBindKey
+  isBindKey,
+  createSequenceExpression
 } from '@vue/compiler-dom'
 import {
   escapeHtml,
@@ -107,16 +108,18 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
               const tempId = `_temp${context.temps++}`
               const tempExp = createSimpleExpression(tempId, false)
               propsExp.arguments = [
-                createAssignmentExpression(tempExp, props),
-                createCallExpression(context.helper(MERGE_PROPS), [
-                  tempExp,
-                  createCallExpression(
-                    context.helper(SSR_GET_DYNAMIC_MODEL_PROPS),
-                    [
-                      tempExp, // existing props
-                      vModel.exp! // model
-                    ]
-                  )
+                createSequenceExpression([
+                  createAssignmentExpression(tempExp, props),
+                  createCallExpression(context.helper(MERGE_PROPS), [
+                    tempExp,
+                    createCallExpression(
+                      context.helper(SSR_GET_DYNAMIC_MODEL_PROPS),
+                      [
+                        tempExp, // existing props
+                        vModel.exp! // model
+                      ]
+                    )
+                  ])
                 ])
               ]
             }