jbrantly/ts-jsx-loader

Regexp with backticks (template strings) not matching

bgrieder opened this issue · 3 comments

When using a React.jsx formatted like this

    return React.jsx( `
    <div style={{width: '100%',height: '100%'}}>
        ....
    </div>
    ` )

The regular expression is not matching (please note the spaces between the brackets and backticks as well as the carriage returns/line feeds)
I came up with this replacement

 new RegExp(identifier + '\\(\\s*`\\s*([^]*?)\\s*`\\s*\\)', 'gm')

However, i did not create a pull request because it seems that this expression is more loose than the current one and I cannot figure out the corner cases of the current one.

This regular expression "reads"

  • match the identifier
    • followed by an opening bracket, followed by some potential spaces, followed by a backtick, followed by some more potential spaces
    • capture in a greedy way everything until
    • there are some potential spaces, followed by a backtick, followed by some more potential spaces, followed by a closing bracket

spaces in this context match new lines and carriage returns too.

FYI, I plan on adding this I just haven't had the time to do so yet.

Does 9f2fa56 solve all of the cases you brought up? I was a little confused by:

as well as the carriage returns/line feeds

Basically this change allows whitespace between the parenthesis and the backticks.

Thanks. Works for us. Our classes compile fine with this RegExp.

You are right, the only issue was the space between the parenthesis and the backticks.