feat(compiler-vapor): add jsx support for setText and createTextNode (#12893)

Author: zhiyuanzmj

packages/compiler-vapor/src/generators/text.ts

@@ -14,8 +14,8 @@ export function genSetText(
   context: CodegenContext,
 ): CodeFragment[] {
   const { helper } = context
-  const { element, values, generated } = oper
-  const texts = combineValues(values, context)
+  const { element, values, generated, jsx } = oper
+  const texts = combineValues(values, context, jsx)
   return [
     NEWLINE,
     ...genCall(helper('setText'), `${generated ? 'x' : 'n'}${element}`, texts),
@@ -27,29 +27,30 @@ export function genCreateTextNode(
   context: CodegenContext,
 ): CodeFragment[] {
   const { helper } = context
-  const { id, values } = oper
+  const { id, values, jsx } = oper
   return [
     NEWLINE,
     `const n${id} = `,
     ...genCall(
       helper('createTextNode'),
-      values && combineValues(values, context),
+      values && combineValues(values, context, jsx),
     ),
   ]
 }
 
 function combineValues(
   values: SimpleExpressionNode[],
   context: CodegenContext,
+  jsx?: boolean,
 ): CodeFragment[] {
   return values.flatMap((value, i) => {
     let exp = genExpression(value, context)
-    if (getLiteralExpressionValue(value) == null) {
+    if (!jsx && getLiteralExpressionValue(value) == null) {
       // dynamic, wrap with toDisplayString
       exp = genCall(context.helper('toDisplayString'), exp)
     }
     if (i > 0) {
-      exp.unshift(' + ')
+      exp.unshift(jsx ? ', ' : ' + ')
     }
     return exp
   })

packages/compiler-vapor/src/ir/index.ts

@@ -121,6 +121,7 @@ export interface SetTextIRNode extends BaseIRNode {
   element: number
   values: SimpleExpressionNode[]
   generated?: boolean // whether this is a generated empty text node by `processTextLikeContainer`
+  jsx?: boolean
 }
 
 export type KeyOverride = [find: string, replacement: string]
@@ -161,6 +162,7 @@ export interface CreateTextNodeIRNode extends BaseIRNode {
   type: IRNodeTypes.CREATE_TEXT_NODE
   id: number
   values?: SimpleExpressionNode[]
+  jsx?: boolean
 }
 
 export interface InsertNodeIRNode extends BaseIRNode {