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"
    />
  );
}

Kapture 2020-10-22 at 10 55 51

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

Most upvoted comments

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

meganrogge on Dec 31, 2021

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 with TypeScript 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.

karlhorky on Dec 29, 2021

Hoping to get to this soon

meganrogge on May 25, 2021

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:

as soon as you hit <\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)
as soon as you hit { 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:

karlhorky on Dec 28, 2020

recording (78)

pushing this change soon after doing some more testing @karlhorky

meganrogge on Dec 14, 2020