fix(compiler-core): remove types for expressions

[zhiyuanzmj]

similar to #13395

Summary by CodeRabbit

• Bug Fixes

  • Fix handling of expressions with TypeScript type constructs so generated code no longer includes extraneous surrounding text.

• Tests

  • Added a test to verify expressions containing TypeScript type syntax are processed and emitted correctly.

[coderabbitai]

Walkthrough

Updated the expression transform to omit leading/trailing raw text slices when processing TypeScript AST nodes, and added a unit test verifying a template expression containing a TypeScript type assertion is preserved in generated code.

Changes

Cohort / File(s)	Change Summary
Test — expression handling packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts	Added a test "expression with type" that compiles a template with a TypeScript type assertion and checks the generated output and snapshot.
Transform — expression builder packages/compiler-core/src/transforms/transformExpression.ts	Adjusted compound-expression child construction: detect TS node types (TS_NODE_TYPES) and skip pushing the leading slice before the first identifier and the trailing slice after the last identifier for those nodes. No exported signatures changed.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    participant Parser
    participant Transform as transformExpression
    participant Builder as compoundChildren
    Note over Parser: parse expression -> AST (may include TS nodes)
    Parser->>Transform: provide AST node
    alt AST node is TS_NODE_TYPES
        Transform->>Builder: iterate identifiers (isTSNode=true)
        Builder-->>Transform: push identifier tokens only (skip leading/trailing raw slices)
    else AST node is non-TS
        Transform->>Builder: iterate identifiers (isTSNode=false)
        Builder-->>Transform: push leading raw slice, identifiers, trailing raw slice
    end
    Transform->>Transform: produce transformed expression node

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Pay attention to:
  • Correct detection of TS_NODE_TYPES import and any tree-shaking/side-effect issues.
  • Edge cases around indexing when skipping leading/trailing slices (first/last identifier).
  • The newly added test to ensure snapshot stability and that the intended slices are omitted only for TS nodes.

Poem

A rabbit hops through code tonight,
Snipping slices left and right.
Types stay tidy, tokens bright,
Tests nod softly — all is right.
🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(compiler-core): remove types for expressions' directly aligns with the main changes made in the PR—handling TypeScript type assertions in expressions and adjusting how compiler-core processes them.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6640358 and 7a25d16.

📒 Files selected for processing (1)

• packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/compiler-core/tests/transforms/transformExpressions.spec.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: test / e2e-test

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	102 kB	38.7 kB	34.8 kB
vue.global.prod.js	160 kB	58.6 kB	52.2 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.8 kB	18.3 kB	16.8 kB
createApp	54.9 kB	21.3 kB	19.5 kB
createSSRApp	59.1 kB	23.1 kB	21 kB
defineCustomElement	60.3 kB	23 kB	21 kB
overall	69.1 kB	26.5 kB	24.2 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@13397

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@13397

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@13397

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@13397

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@13397

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@13397

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@13397

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@13397

@vue/shared

npm i https://pkg.pr.new/@vue/shared@13397

vue

npm i https://pkg.pr.new/vue@13397

@vue/compat

npm i https://pkg.pr.new/@vue/compat@13397

commit: 7a25d16

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts (1)

720-724: Good test coverage for TypeScript type assertions.

The test correctly validates that TypeScript type assertions are preserved in the generated code with proper parentheses wrapping. The assertion checks for the expected output and includes snapshot testing for regression prevention.

Consider adding test cases for other TypeScript node types from TS_NODE_TYPES to ensure comprehensive coverage:

test('expression with various TypeScript types', () => {
  // Test TSNonNullExpression
  const { code: code1 } = compile(`<div @click="value!"></div>`)
  expect(code1).toMatch(`onClick: (_ctx.value!)`)
  
  // Test TSInstantiationExpression  
  const { code: code2 } = compile(`<div @click="fn<string>"></div>`)
  expect(code2).toMatch(`onClick: (_ctx.fn<string>)`)
  
  // Test TSSatisfiesExpression
  const { code: code3 } = compile(`<div @click="obj satisfies Type"></div>`)
  expect(code3).toMatch(`onClick: (_ctx.obj satisfies Type)`)
})

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d9bd436 and 575fc50.

⛔ Files ignored due to path filters (1)

• packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

• packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts (1 hunks)
• packages/compiler-core/src/transforms/transformExpression.ts (3 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

packages/compiler-core/src/transforms/transformExpression.ts (1)

packages/compiler-core/src/babelUtils.ts (1)

• TS_NODE_TYPES (498-504)

⏰ Context from checks skipped due to timeout of 90000ms (3)

• GitHub Check: Redirect rules
• GitHub Check: Header rules
• GitHub Check: Pages changed

🔇 Additional comments (3)

packages/compiler-core/src/transforms/transformExpression.ts (3)

21-21: LGTM! Import aligns with the TypeScript handling requirement.

The import of TS_NODE_TYPES is correctly placed and necessary for the TypeScript expression wrapping logic.

---

351-352: LGTM! Conditional wrapping logic is correctly implemented.

The logic properly checks if the AST node type requires wrapping (TypeScript expressions) and conditionally adds the opening parenthesis before processing identifiers. This ensures TypeScript syntax like type assertions are preserved in the generated code.

---

382-382: LGTM! Closing parenthesis correctly balances the opening one.

The conditional closing parenthesis properly balances the opening parenthesis added earlier, ensuring well-formed expressions in the generated code.