feat(compiler-core): support false prop shorthand

[KazariEX]

resolve vuejs/rfcs#777

Summary by CodeRabbit

• New Features

  • Added support for "!" shorthand syntax in v-bind directives, enabling more concise directive expressions in templates.

• Tests

  • Added test coverage for the new false shorthand binding syntax to ensure proper parsing and behavior.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

These changes introduce support for the "false shorthand" syntax in v-bind directives, enabling !id as shorthand for binding to false. The tokenizer is updated to recognize ! as a directive prefix, the parser is modified to interpret ! and set its expression to false, and a corresponding test case validates the new behavior.

Changes

Cohort / File(s)	Summary
Tokenizer updates packages/compiler-core/src/tokenizer.ts	Modified handleAttrStart to treat exclamation mark (!) as a directive name prefix, grouping it with existing directive markers (., :, @).
Parser updates packages/compiler-core/src/parser.ts	Enhanced directive name handling to recognize ! and set the expression to a simple false value when ! is encountered.
Test coverage packages/compiler-core/__tests__/transforms/vBind.spec.ts	Added test case validating the "false shorthand" syntax, confirming VNode props are created correctly with static key and false value.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

scope: compiler

Suggested reviewers

• sxzz
• baiwusanyu-c

Poem

🐰 A bang, a dash, a shorthand true,
No more words when false will do!
The tokenizer grins, the parser's game,
With !id syntax, never the same! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(compiler-core): support false prop shorthand' directly describes the main feature being added - support for a false property shorthand syntax in the compiler-core package.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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	103 kB	39.1 kB	35.2 kB
vue.global.prod.js	162 kB (+37 B)	59.1 kB (+14 B)	52.6 kB (+18 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47 kB	18.4 kB	16.8 kB
createApp	55.1 kB	21.4 kB	19.6 kB
createSSRApp	59.4 kB	23.2 kB	21.1 kB
defineCustomElement	60.8 kB	23.1 kB	21.1 kB
overall	69.5 kB	26.7 kB	24.3 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14110

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

yarn add https://pkg.pr.new/@vue/compiler-core@14110.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14110

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

yarn add https://pkg.pr.new/@vue/compiler-dom@14110.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14110

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

yarn add https://pkg.pr.new/@vue/compiler-sfc@14110.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14110

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

yarn add https://pkg.pr.new/@vue/compiler-ssr@14110.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14110

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

yarn add https://pkg.pr.new/@vue/reactivity@14110.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14110

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

yarn add https://pkg.pr.new/@vue/runtime-core@14110.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14110

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

yarn add https://pkg.pr.new/@vue/runtime-dom@14110.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14110

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

yarn add https://pkg.pr.new/@vue/server-renderer@14110.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14110

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

yarn add https://pkg.pr.new/@vue/shared@14110.tgz

vue

pnpm add https://pkg.pr.new/vue@14110

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

yarn add https://pkg.pr.new/vue@14110.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14110

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

yarn add https://pkg.pr.new/@vue/compat@14110.tgz

commit: c6eb4f1

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

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

200-233: ! → bind mapping and default false exp look correct; consider the <div !> edge case

Mapping raw === '!' to the bind directive and seeding exp with a false SimpleExpression gives <div !id /> the same internal shape as v-bind:id="false", and stays consistent with how ., :, @, and # are treated here. Using a synthetic expression (no real source span) also makes sense since false is implicit in the shorthand.

One behavioral edge case to be aware of: <div ! /> will now parse as a bind directive with no arg and exp = false (effectively v-bind="false"), rather than producing a missing-arg error. If RFC 777 expects that to be invalid, you might want to special‑case raw === '!' with an empty arg to emit an error instead; otherwise this behavior is consistent with the rest of the parser.

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

136-149: New false‑shorthand test is aligned with the intended semantics

This test cleanly validates that <div !id /> compiles to a prop id: false with a static key and non‑static value, matching the new parser behavior. For future hardening (not blocking here), you might also add variants with prefixIdentifiers: true and/or dynamic args (e.g. ![foo]) to lock in those combinations.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3942dbe and 555e626.

📒 Files selected for processing (3)

• packages/compiler-core/__tests__/transforms/vBind.spec.ts (1 hunks)
• packages/compiler-core/src/parser.ts (2 hunks)
• packages/compiler-core/src/tokenizer.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

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

packages/compiler-core/src/ast.ts (2)

• VNodeCall (323-341)
• ObjectExpression (374-377)

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

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

• createSimpleExpression (685-698)

⏰ 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

🔇 Additional comments (1)

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

664-681: Extending directive prefix detection to ! is consistent and localized

Routing ! through the directive path here (same bucket as ., :, @, #) correctly feeds ondirname a raw '!' and then parses the rest as the arg. This aligns tokenizer behavior with the parser’s new handling and keeps all existing attr/dir state transitions intact. The only functional change is that attrs starting with ! are no longer plain attributes but directives, which seems acceptable given HTML’s constraints and the RFC intent.

[landen-ccm]

Ship it

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

201-233: Provide a real loc for implicit false expressions to avoid invalid offsets.

createSimpleExpression('false') uses locStub. If this directive is later converted to an attribute (e.g., due to v-pre), dirToAttr adjusts loc and can produce negative offsets, corrupting source locations. Consider providing a concrete location.

🔧 Suggested fix

-        exp: raw === '!' ? createSimpleExpression('false') : undefined,
+        exp: raw === '!' ? createSimpleExpression('false', false, getLoc(start, end)) : undefined,