feat(compiler): support JSXComponent in JSXExpressionContainer

Author: zhiyuanzmj

packages/compiler/src/generators/for.ts

@@ -7,12 +7,12 @@ import {
 } from '@babel/types'
 import {
   createSimpleExpression,
-  isStaticNode,
   walkIdentifiers,
   type SimpleExpressionNode,
 } from '@vue/compiler-dom'
 import { extend, isGloballyAllowed } from '@vue/shared'
 import { walkAST } from 'ast-kit'
+import { isConstant } from '../utils'
 import type { CodegenContext } from '../generate'
 import type { BlockIRNode, ForIRNode, IREffect } from '../ir'
 import { genBlockContent } from './block'
@@ -478,8 +478,8 @@ function matchSelectorPattern(
       ast.test.type === 'BinaryExpression' &&
       ast.test.operator === '===' &&
       ast.test.left.type !== 'PrivateName' &&
-      isStaticNode(ast.consequent) &&
-      isStaticNode(ast.alternate)
+      isConstant(ast.consequent) &&
+      isConstant(ast.alternate)
     ) {
       const left = ast.test.left
       const right = ast.test.right

packages/compiler/src/transform.ts

@@ -1,7 +1,6 @@
 import {
   defaultOnError,
   defaultOnWarn,
-  isConstantNode,
   type TransformOptions as BaseTransformOptions,
   type CommentNode,
   type CompilerCompatOptions,
@@ -21,7 +20,13 @@ import {
   type SetEventIRNode,
 } from './ir'
 import { newBlock, newDynamic } from './transforms/utils'
-import { findProp, getText, isConstantExpression, isTemplate } from './utils'
+import {
+  findProp,
+  getText,
+  isConstant,
+  isConstantExpression,
+  isTemplate,
+} from './utils'
 import type { JSXAttribute, JSXElement, JSXFragment } from '@babel/types'
 
 export type NodeTransform = (
@@ -177,7 +182,7 @@ export class TransformContext<
     if (
       this.inVOnce ||
       expressions.length === 0 ||
-      expressions.every((e) => e.ast && isConstantNode(e.ast, {}))
+      expressions.every((e) => e.ast && isConstant(e.ast))
     ) {
       return this.registerOperation(operations, getOperationIndex)
     }

packages/compiler/src/transforms/expression.ts

@@ -1,7 +1,6 @@
-import { isStaticNode } from '@vue/compiler-dom'
 import { DynamicFlag, IRNodeTypes, type OperationNode } from '../ir'
 import { transformNode, type TransformContext } from '../transform'
-import { resolveExpression } from '../utils'
+import { isConstant, resolveExpression } from '../utils'
 import { createBranch } from './utils'
 import type { ConditionalExpression, LogicalExpression } from '@babel/types'
 
@@ -20,7 +19,7 @@ export function processConditionalExpression(
     id,
     condition,
     positive: branch,
-    once: context.inVOnce || isStaticNode(test),
+    once: context.inVOnce || isConstant(test),
   }
 
   return [

packages/compiler/src/transforms/vFor.ts

@@ -1,7 +1,6 @@
 import {
   createCompilerError,
   ErrorCodes,
-  isConstantNode,
   type SimpleExpressionNode,
 } from '@vue/compiler-dom'
 import { DynamicFlag, IRNodeTypes } from '../ir'
@@ -12,6 +11,7 @@ import {
 } from '../transform'
 import {
   findProp,
+  isConstant,
   isJSXComponent,
   propToExpression,
   resolveExpression,
@@ -69,7 +69,7 @@ export function processFor(
       index,
       keyProp: keyProperty,
       render,
-      once: context.inVOnce || !!(source.ast && isConstantNode(source.ast, {})),
+      once: context.inVOnce || !!(source.ast && isConstant(source.ast)),
       component: isComponent,
       onlyChild: !!isOnlyChild,
     }

packages/compiler/src/transforms/vIf.ts

@@ -2,15 +2,19 @@ import {
   createCompilerError,
   createSimpleExpression,
   ErrorCodes,
-  isConstantNode,
 } from '@vue/compiler-dom'
 import { DynamicFlag, IRNodeTypes } from '../ir'
 import {
   createStructuralDirectiveTransform,
   type NodeTransform,
   type TransformContext,
 } from '../transform'
-import { isEmptyText, resolveDirective, resolveLocation } from '../utils'
+import {
+  isConstant,
+  isEmptyText,
+  resolveDirective,
+  resolveLocation,
+} from '../utils'
 import { createBranch } from './utils'
 import type { JSXAttribute, JSXElement } from '@babel/types'
 
@@ -49,7 +53,7 @@ export function processIf(
         id,
         condition: dir.exp!,
         positive: branch,
-        once: context.inVOnce || isConstantNode(attribute.value!, {}),
+        once: context.inVOnce || isConstant(attribute.value!),
       }
     }
   } else {

packages/compiler/src/utils.ts

@@ -1,19 +1,7 @@
 import { parseExpression } from '@babel/parser'
-import {
-  isLiteral,
-  type BigIntLiteral,
-  type Expression,
-  type JSXAttribute,
-  type JSXElement,
-  type JSXFragment,
-  type JSXText,
-  type Node,
-  type NumericLiteral,
-  type SourceLocation,
-  type StringLiteral,
-} from '@babel/types'
 import {
   createSimpleExpression,
+  isConstantNode,
   isLiteralWhitelisted,
   NodeTypes,
   unwrapTSNode,
@@ -24,6 +12,18 @@ import { isGloballyAllowed, isHTMLTag, isString, isSVGTag } from '@vue/shared'
 import { EMPTY_EXPRESSION } from './transforms/utils'
 import type { VaporDirectiveNode } from './ir'
 import type { TransformContext } from './transform'
+import type {
+  BigIntLiteral,
+  Expression,
+  JSXAttribute,
+  JSXElement,
+  JSXFragment,
+  JSXText,
+  Node,
+  NumericLiteral,
+  SourceLocation,
+  StringLiteral,
+} from '@babel/types'
 
 export function propToExpression(
   prop: JSXAttribute,
@@ -68,24 +68,7 @@ export const isConstant = (node: Node | null | undefined): boolean => {
   if (node.type === 'Identifier') {
     return node.name === 'undefined' || isGloballyAllowed(node.name)
   }
-  if (['JSXElement', 'JSXFragment', 'NullLiteral'].includes(node.type)) {
-    return true
-  }
-  if (node.type === 'ArrayExpression') {
-    const { elements } = node
-    return elements.every((element) => element && isConstant(element))
-  }
-  if (node.type === 'ObjectExpression') {
-    return node.properties.every((property) =>
-      isConstant((property as any).value),
-    )
-  }
-  if (
-    node.type === 'TemplateLiteral' ? !node.expressions.length : isLiteral(node)
-  ) {
-    return true
-  }
-  return false
+  return isConstantNode(node, {})
 }
 
 const EMPTY_TEXT_REGEX =

packages/compiler/test/transforms/__snapshots__/transformChildren.spec.ts.snap

@@ -1,5 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`compiler: children transform > JSXComponent in JSXExpressionContainer 1`] = `
+"
+  const n0 = t0()
+  const x0 = _child(n0)
+  _setNodes(x0, () => (<Comp />))
+  return n0
+"
+`;
+
 exports[`compiler: children transform > efficient find 1`] = `
 "
   const n1 = t0()

packages/compiler/test/transforms/transformChildren.spec.ts

@@ -150,4 +150,14 @@ describe('compiler: children transform', () => {
     expect(code).contains(`const n0 = _nthChild(n1, 2)`)
     expect(code).toMatchSnapshot()
   })
+
+  test('JSXComponent in JSXExpressionContainer', () => {
+    const { code } = compileWithElementTransform(
+      `<div>
+        {<Comp />}
+      </div>`,
+    )
+    expect(code).contains(`_setNodes(x0, () => (<Comp />))`)
+    expect(code).toMatchSnapshot()
+  })
 })