feat(compiler-core): support in-tag comments

[KazariEX]

Summary

• support Vue-specific // line comments inside template opening tag attribute lists
• collect in-tag line comments in RootNode.comments with comment kind, content, loc, and contentLoc

RFC

• feat: in-tag comments rfcs#831

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1b40a182-2b20-4e49-b8c8-7865b92d2a72

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The PR adds support for HTML comments appearing inside open element tags (e.g., <Foo <!-- comment --> :bar="baz">). A new State.InTagComment tokenizer state and onintagcomment callback are introduced; the parser emits these as InTagCommentNode props on BaseElementNode. All existing prop-loop transforms are updated to skip or narrowly branch around the new node kind.

Changes

In-tag comment support

Layer / File(s)	Summary
AST types: IN_TAG_COMMENT node and ElementPropNode packages/compiler-core/src/ast.ts	Adds NodeTypes.IN_TAG_COMMENT, InTagCommentNode interface with content, and ElementPropNode union; widens BaseElementNode.props from Array<AttributeNode | DirectiveNode> to ElementPropNode[].
Tokenizer: InTagComment state machine packages/compiler-core/src/tokenizer.ts	Adds State.InTagComment and onintagcomment callback to Callbacks; implements isInTagCommentOpen(), startInTagComment(), and stateInTagComment(); wires entry from stateInTagName, stateBeforeAttrName, and stateAfterAttrName; adds parse-loop dispatch and EOF/trailing-data handling.
Parser: onintagcomment handler, EOF wiring, and prop-variable refactors packages/compiler-core/src/parser.ts	Implements onintagcomment to push IN_TAG_COMMENT nodes into currentOpenTag.props; adds State.InTagComment to the EOF error switch to emit EOF_IN_COMMENT; refactors duplicate-attribute detection with ternary-based predicate; updates isFragmentTemplate and isComponent to bind directive props to local variable before evaluation.
Transform and utility adaptations packages/compiler-core/src/transforms/transformElement.ts, packages/compiler-core/src/transforms/transformSlotOutlet.ts, packages/compiler-core/src/utils.ts, packages/compiler-core/src/compat/transformFilter.ts, packages/compiler-sfc/src/template/transformSrcset.ts, packages/compiler-ssr/src/transforms/ssrTransformElement.ts, packages/compiler-ssr/src/transforms/ssrVModel.ts	All prop-iterating transforms skip IN_TAG_COMMENT nodes or narrow their else branches to explicit NodeTypes.DIRECTIVE / NodeTypes.ATTRIBUTE guards; findProp return type is tightened to AttributeNode | DirectiveNode | undefined; transformFilter drops now-redundant explicit union type annotation.
Parse tests for in-tag comments packages/compiler-core/__tests__/parse.spec.ts	Three new test cases verify: IN_TAG_COMMENT appears alongside directives/attributes in props with empty children; a tag-name-adjacent comment produces a correctly located IN_TAG_COMMENT prop; an unterminated comment fires onError with EOF_IN_COMMENT.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested labels

scope: compiler

Suggested reviewers

• skirtles-code
• edison1105
• sxzz

Poem

🐰 Hops through the tags with a comment in tow,
<!-- hello --> now has a place it can go,
The tokenizer spins through each --> with care,
No stray AST nodes left floating in air.
New props hold the comment, transforms skip right past,
In-tag little remarks parsed and typed to the last! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title 'feat(compiler-core): support in-tag comments' directly and clearly describes the main change across all modified files—adding support for parsing and handling HTML comments embedded inside component tags as AST nodes.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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
compiler-dom.global.prod.js	87.6 kB (+941 B)	30.5 kB (+185 B)	26.8 kB (+74 B)
runtime-dom.global.prod.js	113 kB	42.7 kB	38.2 kB
vue.global.prod.js	174 kB (+888 B)	62.7 kB (+196 B)	55.9 kB (+132 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	51.6 kB	20.1 kB	18.4 kB
createApp	60.6 kB	23.5 kB	21.3 kB
createApp + vaporInteropPlugin	114 kB	40.9 kB	36.8 kB
createVaporApp	28.4 kB	11 kB	10.1 kB
createSSRApp	65.2 kB	25.3 kB	22.9 kB
createVaporSSRApp	33.5 kB	12.8 kB	11.8 kB
defineCustomElement	67.3 kB	25.5 kB	23.2 kB
defineVaporCustomElement	50.2 kB	17.8 kB	16.3 kB
overall	75.9 kB	28.9 kB	26.2 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

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

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

@vue/compiler-dom

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

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

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

@vue/compiler-sfc

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

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

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

@vue/compiler-ssr

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

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

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

@vue/compiler-vapor

pnpm add https://pkg.pr.new/@vue/compiler-vapor@14971

npm i https://pkg.pr.new/@vue/compiler-vapor@14971

yarn add https://pkg.pr.new/@vue/compiler-vapor@14971.tgz

@vue/reactivity

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

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

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

@vue/runtime-core

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

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

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

@vue/runtime-dom

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

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

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

@vue/runtime-vapor

pnpm add https://pkg.pr.new/@vue/runtime-vapor@14971

npm i https://pkg.pr.new/@vue/runtime-vapor@14971

yarn add https://pkg.pr.new/@vue/runtime-vapor@14971.tgz

@vue/server-renderer

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

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

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

@vue/shared

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

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

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

vue

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

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

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

@vue/compat

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

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

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

commit: 13bc63e