fix(compiler): using guard instead of non-nullish assertion

[ShenQingchuan]

Description

core/packages/compiler-core/src/transforms/transformVBindShorthand.ts

Line 20 in 079010a

const arg = prop.arg!

This non-nullish assertion is harmful that it will be broken on language service when user has only typed : on an element, in that case we shouldn't treat the single : as a VBindShorthand

We got error thrown below

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
    at Array.yX (index-C2PqwR5h.js:108:3591)
    at bS (index-C2PqwR5h.js:91:9055)
    at iRe (index-C2PqwR5h.js:91:8941)
    at bS (index-C2PqwR5h.js:91:9320)

How to reproduce

https://play.vuejs.org/#eNp9UbFOwzAQ/ZXDS5cmGWCKIiRAHWAoCDp6CcnRpCS2ZV/SoCoDCz/Awsa/8QV8AudEbTqgDrZ8997zvWfvxJUxYdugiEXiMlsaAofUmEupogiWmopSrcMwhN/vr3epkmgkMcwFYW2qlJArgOQsCODn4xNWbwYhBcfCCmEWz+AZK72F1EFKZCEIJj6sClSgDW+ZVk6zwCECFX5ZvcUc0Fo9ifKyhRgiLpLoaLyYC3J8w0u5DjdOK46z83wpMl2bskJ7b6jkCVLEMCAeSyv2dTf0yDY43/ezArPXf/ob1/meFA8WHdoWpThglNo10ggvnpbY8fkA1jpvKmafAB+R0zfe40i7blTOto94g9vb2mhL/LQrt+gIlduH8kY9sx/4UvCf3pyIPtk9Dy8GnVS96P8Ayt+tIA==

Summary by CodeRabbit

• Bug Fixes

  • v-bind same-name shorthand now requires a non-empty argument, preventing accidental matches and reducing false positives.
  • Argument handling is guarded to avoid invalid processing and preserve consistent diagnostics for bad shorthand arguments.

• Developer Experience

  • More predictable template compilation and clearer, consistent error messages in edge cases involving v-bind shorthand.

[coderabbitai]

Walkthrough

Requires a non-empty directive argument when applying same-name v-bind shorthand in transformVBindShorthand; accesses prop.arg directly under this guard and preserves the existing error path for invalid argument types.

Changes

Cohort / File(s)	Summary of Edits
Compiler v-bind shorthand handling packages/compiler-core/src/transforms/transformVBindShorthand.ts	Add guard requiring prop.arg when !prop.exp for same-name shorthand; replace non-null assertion with direct prop.arg access; retain existing invalid-arg error handling path.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor Dev as Template Author
  participant Parser as Parser
  participant Transform as transformVBindShorthand
  participant Reporter as ErrorReporter

  Dev->>Parser: Provide v-bind shorthand (e.g., :foo or :)
  Parser->>Transform: Directive node with `arg` and `exp`
  Transform->>Transform: Check: `!prop.exp && prop.arg`
  alt arg present and exp missing
    Transform->>Transform: Use `arg` as same-name shorthand
  else arg missing or invalid
    Transform->>Reporter: Report X_V_BIND_INVALID_SAME_NAME_ARGUMENT
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review transformVBindShorthand.ts conditional change and direct arg usage.
• Verify error reporting for non-static/invalid arg remains unchanged.

Possibly related PRs

• fix(compiler-core): fix v-bind shorthand handling for in-DOM templates #13933 — Also modifies transformVBindShorthand.ts, addressing empty/missing expression handling for v-bind shorthand.

Suggested labels

:hammer: p3-minor-bug

Poem

I nibble at colons with a careful hop,
If exp is gone but arg stands on top.
I bind the name, or raise a small cry,
A rabbit's quick patch—swift blink of an eye. 🐇

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 clearly and concisely summarizes the main change: replacing a non-null assertion with a guard condition in the compiler.

✨ 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 e7781e2 and 7ca42c8.

📒 Files selected for processing (1)

• packages/compiler-core/src/transforms/transformVBindShorthand.ts (1 hunks)

⏰ 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). (3)

• GitHub Check: test / lint-and-test-dts
• GitHub Check: test / e2e-test
• GitHub Check: test / unit-test-windows

🔇 Additional comments (1)

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

15-25: Previous critical issue resolved; changes correctly address the PR objective.

The restructured condition properly fixes the type narrowing issue flagged in the previous review. By removing the redundant !prop.exp && check and adding the prop.arg guard on line 23, the code now:

1. Avoids TypeScript errors - the (!prop.exp || ...) structure allows safe access to prop.exp.type and prop.exp.content in the browser-specific branch without premature type narrowing
2. Prevents the TypeError when a user types only ":" - the prop.arg guard ensures we only enter the transformation block when an argument exists
3. Safely accesses prop.arg on line 25 without a non-null assertion, as the guard on line 23 ensures it's defined

The logic correctly handles all scenarios:

• ":" alone → no arg → condition false → no transformation ✓
• ":foo" → has arg, no exp → condition true → transform applied ✓
• ":foo=''" (browser) → has arg, empty exp → condition true → transform applied ✓

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{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.8 kB	35 kB
vue.global.prod.js	161 kB (+7 B)	58.8 kB (+4 B)	52.3 kB (-1 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47 kB	18.3 kB	16.8 kB
createApp	55 kB	21.4 kB	19.6 kB
createSSRApp	59.3 kB	23.1 kB	21.1 kB
defineCustomElement	60.6 kB	23.1 kB	21.1 kB
overall	69.2 kB	26.6 kB	24.3 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: 7ca42c8

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5f4825e and e7781e2.

📒 Files selected for processing (1)

• packages/compiler-core/src/transforms/transformVBindShorthand.ts (1 hunks)

🧰 Additional context used

🪛 GitHub Check: test / lint-and-test-dts

packages/compiler-core/src/transforms/transformVBindShorthand.ts

[failure] 24-24:
Property 'content' does not exist on type 'never'.

---

[failure] 23-23:
Property 'type' does not exist on type 'never'.

⏰ 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