diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap index ea009cd8e..951a534ec 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`compiler: children transform > children & sibling references 1`] = ` -"import { next as _next, setText as _setText, createTextNode as _createTextNode, insert as _insert, template as _template } from 'vue/vapor'; +"import { next as _next, createTextNode as _createTextNode, insert as _insert, renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue/vapor'; const t0 = _template("

") export function render(_ctx) { @@ -9,10 +9,10 @@ export function render(_ctx) { const n0 = n4.firstChild const n3 = _next(n0, 2) const n2 = n3.nextSibling - _setText(n0, 'first') - const n1 = _createTextNode(['second', " ", 'third', " "]) - _setText(n2, 'forth') + const n1 = _createTextNode(() => [_ctx.second, " ", _ctx.third, " "]) _insert(n1, n4, n3) + _renderEffect(() => _setText(n0, _ctx.first)) + _renderEffect(() => _setText(n2, _ctx.forth)) return n4 }" `; diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap index a973e0e34..768196832 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap @@ -23,12 +23,11 @@ export function render(_ctx) { `; exports[`v-text > should raise error if has no expression 1`] = ` -"import { setText as _setText, template as _template } from 'vue/vapor'; +"import { template as _template } from 'vue/vapor'; const t0 = _template("
") export function render(_ctx) { const n0 = t0() - _setText(n0, "") return n0 }" `; diff --git a/packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts index 44c1f14c0..45c1c3d49 100644 --- a/packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts +++ b/packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts @@ -21,10 +21,10 @@ describe('compiler: children transform', () => { test('children & sibling references', () => { const { code, vaporHelpers } = compileWithElementTransform( `
-

{{'first'}}

- {{'second'}} - {{'third'}} -

{{'forth'}}

+

{{ first }}

+ {{ second }} + {{ third }} +

{{ forth }}

`, ) expect(code).toMatchSnapshot() diff --git a/packages/compiler-vapor/src/transforms/transformText.ts b/packages/compiler-vapor/src/transforms/transformText.ts index 71110cce2..37da24453 100644 --- a/packages/compiler-vapor/src/transforms/transformText.ts +++ b/packages/compiler-vapor/src/transforms/transformText.ts @@ -11,7 +11,7 @@ import { } from '@vue/compiler-dom' import type { NodeTransform, TransformContext } from '../transform' import { DynamicFlag, IRNodeTypes } from '../ir' -import { isConstantExpression } from '../utils' +import { getLiteralExpressionValue, isConstantExpression } from '../utils' type TextLike = TextNode | InterpolationNode const seen = new WeakMap< @@ -65,11 +65,16 @@ function processTextLikeContainer( context: TransformContext, ) { const values = children.map(child => createTextLikeExpression(child, context)) - context.registerEffect(values, { - type: IRNodeTypes.SET_TEXT, - element: context.reference(), - values, - }) + const literals = values.map(getLiteralExpressionValue) + if (literals.every(l => l != null)) { + context.childrenTemplate = literals.map(l => String(l)) + } else { + context.registerEffect(values, { + type: IRNodeTypes.SET_TEXT, + element: context.reference(), + values, + }) + } } function createTextLikeExpression(node: TextLike, context: TransformContext) { diff --git a/packages/compiler-vapor/src/transforms/vText.ts b/packages/compiler-vapor/src/transforms/vText.ts index c4f4ff0ab..cb894b0cd 100644 --- a/packages/compiler-vapor/src/transforms/vText.ts +++ b/packages/compiler-vapor/src/transforms/vText.ts @@ -2,6 +2,7 @@ import { DOMErrorCodes, createDOMCompilerError } from '@vue/compiler-dom' import { IRNodeTypes } from '../ir' import { EMPTY_EXPRESSION } from './utils' import type { DirectiveTransform } from '../transform' +import { getLiteralExpressionValue } from '../utils' export const transformVText: DirectiveTransform = (dir, node, context) => { let { exp, loc } = dir @@ -18,9 +19,14 @@ export const transformVText: DirectiveTransform = (dir, node, context) => { context.childrenTemplate.length = 0 } - context.registerEffect([exp], { - type: IRNodeTypes.SET_TEXT, - element: context.reference(), - values: [exp], - }) + const literal = getLiteralExpressionValue(exp) + if (literal != null) { + context.childrenTemplate = [String(literal)] + } else { + context.registerEffect([exp], { + type: IRNodeTypes.SET_TEXT, + element: context.reference(), + values: [exp], + }) + } } diff --git a/packages/compiler-vapor/src/utils.ts b/packages/compiler-vapor/src/utils.ts index fdbd101a0..ce4ef7365 100644 --- a/packages/compiler-vapor/src/utils.ts +++ b/packages/compiler-vapor/src/utils.ts @@ -1,4 +1,4 @@ -import type { NumericLiteral, StringLiteral } from '@babel/types' +import type { BigIntLiteral, NumericLiteral, StringLiteral } from '@babel/types' import { isGloballyAllowed } from '@vue/shared' import { type AttributeNode, @@ -55,13 +55,20 @@ export function resolveExpression(exp: SimpleExpressionNode) { export function getLiteralExpressionValue( exp: SimpleExpressionNode, -): number | string | null { - if ( - !__BROWSER__ && - exp.ast && - ['StringLiteral', 'NumericLiteral'].includes(exp.ast.type) - ) { - return (exp.ast as StringLiteral | NumericLiteral).value +): number | string | boolean | null { + if (!__BROWSER__ && exp.ast) { + if ( + ['StringLiteral', 'NumericLiteral', 'BigIntLiteral'].includes( + exp.ast.type, + ) + ) { + return (exp.ast as StringLiteral | NumericLiteral | BigIntLiteral).value + } else if ( + exp.ast.type === 'TemplateLiteral' && + exp.ast.expressions.length === 0 + ) { + return exp.ast.quasis[0].value.cooked! + } } return exp.isStatic ? exp.content : null }