diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts index acfd8b0ff8b..5b5e9e83ef4 100644 --- a/packages/compiler-core/src/ast.ts +++ b/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 { diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts index de697a20122..e4076bd57da 100644 --- a/packages/compiler-core/src/codegen.ts +++ b/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 diff --git a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts index f82df8c1001..151eaa79da8 100644 --- a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts @@ -118,7 +118,7 @@ describe('ssr: v-model', () => { return function ssrRender(_ctx, _push, _parent) { let _temp0 - _push(\`\`) + _push(\`\`) }" `) @@ -130,7 +130,7 @@ describe('ssr: v-model', () => { return function ssrRender(_ctx, _push, _parent) { let _temp0 - _push(\`\`) + _push(\`\`) }" `) }) diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts index 2b9b218044a..a23748a370a 100644 --- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts +++ b/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 + ] + ) + ]) ]) ] }