question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItĀ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug]: JSX pragma can happen anywhere in a comment

See original GitHub issue

šŸ’»

  • Would you like to work on a fix?

How are you using Babel?

Programmatic API (babel.transform, babel.parse)

Input code

// Make sure not to use a jsx pragma here (like "@jsx Something"), we need this to be React.createElement!
<blah/>

Configuration file name

No response

Configuration

N/A

Current and expected behavior

Currently, the above will actually generate this code:

Something"),("blah", null);

But, even if ignore the syntax error, it seems to me that JSX pragmas should be a bit stricter as to what they match.For example, if we just add the ^ and $ operators to the current RegExp:

/\*?\s*@jsx\s+([^\s]+)/

becomes:

/\^*?\s*@jsx\s+([^\s]+)$/

Then this would lead to jsx pragmas only being allowed if they are the only content in the comment. This seems to me to be more in the spirit of the intent.

In many ways, the current RegExp is a bit nonsensical just in its construction: *?\s* with no ^ is a completely useless pattern, since the entire sequence is optional and there’s nothing preceding it. That’s why something like "francisco@jsx hi’’ is matched.

BTW, I actually ran into this myself, which is why I am filing this. It’s annoying that one’s first inclination to ā€œescapeā€ the jsx pragma (by doing something like \@jsx blah) doesn’t work either, for the same reason ā€œfrancisco@jsx hiā€ is matched.

Environment

N/A

Possible solution

Changing

/\*?\s*@jsx\s+([^\s]+)/

to

/\^*?\s*@jsx\s+([^\s]+)$/

And making the equivalent change for JSX fragments.

Additional context

No response

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:10 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
The-x-Theoristcommented, Nov 26, 2021

@JLHwung Could you please assign this issue to me so that I can work on it?

0reactions
The-x-Theoristcommented, Dec 1, 2021

Yes we should allow this pattern for JSX docs or copyright headers, I will change the regex pattern accordingly.

Read more comments on GitHub >

github_iconTop Results From Across the Web

What does the comment /** @jsx jsx */ do in the Emotion CSS ...
I did find a comment in the docs that said: "This comment tells babel to convert jsx to calls to a function called...
Read more >
swc v1.2.23 is out! Much better performance, jsx pragma, etc...
I'm looking forward to SWC maturing/stabilising. It looks like an excellent project (I'd love to bring my JS/TS compile times down to theseĀ ......
Read more >
New JSX Transform - Hacker News
You can use JSX now without React, either via Typescript (built-in support) or via the custom `pragma` config key in babel's JSX plugin....
Read more >
Documentation - TypeScript 4.0
The second change is that rest elements can occur anywhere in a tuple - not just at the end! ts. type Strings =...
Read more >
How to replace Prettier by ESLint rules ? | by Florian Briand
max-len: ["error", { "code": 80 }]. And the ESLint rule can be tuned in various ways, for example to allow different length for...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found