template-string-converter: Conversion of React JSX Props on newlines fails
JSX props (React) on their own lines do not convert correctly to template strings:
function Div(props) {
return (
<div
{...props}
prop-on-new-line="abc"
// comment
another-on-new-line="def"
/>
);
}
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 1
- Comments: 19 (10 by maintainers)
Commits related to this issue
- complete #20 — committed to meganrogge/template-string-converter by meganrogge 4 years ago
- handle all but one case of #20 — committed to meganrogge/template-string-converter by meganrogge 3 years ago
that’s a case I don’t have time for at the moment, but about to push a fix for the other cases you mention in this issue.
Done
In Template String Converter
0.5.8
it seems like there’s a new bug which is causing extra curly braces to appear outside of JSX code (in a file withTypeScript React
syntax):https://user-images.githubusercontent.com/1935696/147680948-b533aadd-acd7-41b5-8e99-cd4267df9297.mp4
Opened https://github.com/meganrogge/template-string-converter/issues/61 for this.
Hoping to get to this soon
Sorry, I have updated the examples above to include what happens now and what should happen.
The main takeaway here can be the following rules:
<\w+\s+
(approximate, incomplete regex) in a JavaScript file, you’re inside a JSX opening tag (and the special rules for props in JSX opening tags are activated){
inside that tag, you are in a JavaScript expression, with normal JavaScript rules (until you hit a<
again, recursively - which goes back to 1.)The 1st rule above is being applied correctly, but the 2nd - going back to JavaScript rules within that opening tag - is not.
In case you’re using regex, there are a couple of regular expression implementations for JSX opening tags and JavaScript expression in Prism.js and VS Code that may help:
pushing this change soon after doing some more testing @karlhorky