Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Ignores comment after generic JsxOpeningElement #583

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
duailibe opened this issue Jun 3, 2019 · 4 comments · Fixed by #596
Closed

Ignores comment after generic JsxOpeningElement #583

duailibe opened this issue Jun 3, 2019 · 4 comments · Fixed by #596
Labels
bug Something isn't working package: typescript-estree Issues related to @typescript-eslint/typescript-estree

Comments

@duailibe
Copy link
Contributor

duailibe commented Jun 3, 2019 •
edited
Loading

What code were you trying to parse?

const comp = (
  <Component<number> /* Foo */></Component>
);

What did you expect to happen?

A comment node "Foo" should be included somewhere

What actually happened?

Comment "Foo" is ignored and this affects Prettier making we drop comments (see: prettier/prettier#6012).

I'm not familiar with TypeScript parser API, but I tested a few things and if I comment the following case condition, it works:

typescript-eslint/packages/typescript-estree/src/convert-comments.ts

Lines 118 to 130 in 50a493e

case ts.SyntaxKind.GreaterThanToken:
container = getNodeContainer(ast, start, end);
if (
container &&
container.parent &&
container.parent.kind === ts.SyntaxKind.JsxOpeningElement &&
container.parent.parent &&
container.parent.parent.kind === ts.SyntaxKind.JsxElement
) {
kind = triviaScanner.reScanJsxToken();
continue;
}
break;

Maybe that helps to identify the problem.

I'm willing to contribute with a fix if you have your hands full, but I need to learn what that code does. Let me know if you need help.

Versions

Tested in master.

Pinging @JamesHenry
@duailibe duailibe added package: typescript-estree Issues related to @typescript-eslint/typescript-estree triage Waiting for team members to take a look labels Jun 3, 2019
@duailibe duailibe mentioned this issue Jun 3, 2019
Closed
@bradzacher bradzacher added bug Something isn't working and removed triage Waiting for team members to take a look labels Jun 3, 2019
@bradzacher
Copy link
Member

bradzacher commented Jun 3, 2019 •
edited
Loading

Feel free to submit a PR if you would like.
We have good test coverage so it makes it easy to make changes without full knowledge of the codebase.

@kaicataldo
Copy link
Member

Is this actually valid JSX? I thought JS comments had to be inside curly braces in JSX.

@bradzacher
Copy link
Member

Having a look at the react docs, they don't say anything specifically about comments within a JSX tag.
Reading the spec (https://facebook.github.io/jsx/) it says (very vaguely):

JSX uses the same punctuators and braces as ECMAScript. WhiteSpace, LineTerminators and Comments are generally allowed between any punctuators.

Looking in astexplorer, all of the babel parsers seem to handle it.

We should probably look for parity with babel in this regard, if only because I assume the react team contributes to that portion of the parser and so is a defacto standard.

@kaicataldo
Copy link
Member

In the examples given here, it does look like comments can exist within a tag. The curly braces are only needed to ensure it doesn’t get rendered as a text node. TIL!

@duailibe duailibe mentioned this issue Jun 6, 2019
Merged
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 21, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Something isn't working package: typescript-estree Issues related to @typescript-eslint/typescript-estree
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(typescript-estree): stop ignoring comments in JSX with generic duailibe/typescript-eslint
3 participants
@duailibe @kaicataldo @bradzacher