Skip to content

fix: Keep jsx comments#17538

Merged
nicolo-ribaudo merged 3 commits intobabel:mainfrom
liuxingbaoyu:keep-jsx-comments
Oct 29, 2025
Merged

fix: Keep jsx comments#17538
nicolo-ribaudo merged 3 commits intobabel:mainfrom
liuxingbaoyu:keep-jsx-comments

Conversation

@liuxingbaoyu
Copy link
Member

Q                       A
Fixed Issues? Fixes #17537
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?
Documentation PR Link
Any Dependency Changes?
License MIT

@liuxingbaoyu liuxingbaoyu added area: jsx PR: Bug Fix 🐛 A type of pull request used for our changelog categories area: comments labels Oct 3, 2025
@babel-bot
Copy link
Collaborator

babel-bot commented Oct 3, 2025

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/60136

@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 3, 2025

Open in StackBlitz

commit: fae117b

@karmeleon
Copy link

Thanks for jumping on this so quickly! I noticed there's a slight error when a JSX element with a comment inside it is nested in another JSX element, looks like it gets hoisted a bit too far:

<div><Trans {.../*i18n*/{a:1}}/></div>

becomes

import { jsx as _jsx } from "react/jsx-runtime";
/*#__PURE__*/_jsx("div",
/*i18n*/
{
  children: /*#__PURE__*/_jsx(Trans, {
    a: 1
  })
});

REPL

i?: number,
) {
if (i === 0) {
leadingComments = undefined;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also reset leadingComments when i is undefined?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We manually reset i when it is undefined.

},
};

let leadingComments: t.Comment[] | undefined;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally, I think it’s a bit hacky to intertwine the leadingComments logic with the attribute accumulator. This approach doesn’t address how we should handle the trailingComments of a JSXSpreadAttribute, such as in <div {...{ id: 'hello' }/*i18n*/} />.

Could we record the source node where the comments originate and the target node to which they will be attached? Then we could call the t.inheritsComments API, which was designed for comment adjustment.

@liuxingbaoyu liuxingbaoyu changed the title fix: Keep jsx leading comments fix: Keep jsx comments Oct 22, 2025
Copy link
Member

@nicolo-ribaudo nicolo-ribaudo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you rebase? :)

}
if (t.isJSXSpreadAttribute(attribute.node)) {
const arg = attribute.node.argument;
leadingComments ||= arg.leadingComments;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should merge the arrays if both are defined. Can you also add tests with multiple attributes?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit is old. :)
However, the new logic is similar.
We only handled JSXSpreadAttribute, and JSX seems to only allow one JSXSpreadAttribute per element.
So it seems there's no problem.

I added a few tests, not sure if this is what you mean.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh sorry I didn't notice I had a stale comment.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't matter!

@nicolo-ribaudo nicolo-ribaudo merged commit fc11396 into babel:main Oct 29, 2025
74 checks passed
@github-actions github-actions bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Jan 29, 2026
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 29, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area: comments area: jsx outdated A closed issue/PR that is archived due to age. Recommended to make a new issue PR: Bug Fix 🐛 A type of pull request used for our changelog categories

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Comments in spead JSX props not preserved after transformation to plain JS

5 participants