Multiline jsx string attributes throw a parser error

[vanwagonet]

jsx of this form:

<path d="M94.4,42.1L74.1,61.8l4.8,27.9c0.1,0.4,0.1,0.7,0.1,1.1c0,1.5-0.7,2.8-2.3,2.8c-0.8,0-1.6-0.3-2.2-0.7
      L49.4,79.8L24.4,93c-0.7,0.4-1.5,0.7-2.2,0.7c-1.6,0-2.3-1.3-2.3-2.8c0-0.4,0.1-0.7,0.1-1.1l4.8-27.9L4.4,42.1
      C3.7,41.3,3,40.4,3,39.4c0-1.7,1.7-2.3,3.1-2.6l28-4.1L46.7,7.4c0.5-1.1,1.5-2.3,2.7-2.3s2.2,1.2,2.7,2.3l12.6,25.4l28,4.1
      c1.3,0.2,3.1,0.9,3.1,2.6C95.9,40.4,95.1,41.3,94.4,42.1z" />

Throws a SyntaxError Unterminated string constant (1:8)

This pattern of multiline string attributes is common in svg. It would be nice to use this syntax.

For now, you can workaround the issue by using a template string instead:

<path d={`M94.4,42.1L74.1,61.8l4.8,27.9c0.1,0.4,0.1,0.7,0.1,1.1c0,1.5-0.7,2.8-2.3,2.8c-0.8,0-1.6-0.3-2.2-0.7
      L49.4,79.8L24.4,93c-0.7,0.4-1.5,0.7-2.2,0.7c-1.6,0-2.3-1.3-2.3-2.8c0-0.4,0.1-0.7,0.1-1.1l4.8-27.9L4.4,42.1
      C3.7,41.3,3,40.4,3,39.4c0-1.7,1.7-2.3,3.1-2.6l28-4.1L46.7,7.4c0.5-1.1,1.5-2.3,2.7-2.3s2.2,1.2,2.7,2.3l12.6,25.4l28,4.1
      c1.3,0.2,3.1,0.9,3.1,2.6C95.9,40.4,95.1,41.3,94.4,42.1z`} />

[vanwagonet]

Facebook's jsx transformer produces:

React.createElement("path", {d: "M94.4,42.1L74.1,61.8l4.8,27.9c0.1,0.4,0.1,0.7,0.1,1.1c0,1.5-0.7,2.8-2.3,2.8c-0.8,0-1.6-0.3-2.2-0.7" + ' ' +
      "L49.4,79.8L24.4,93c-0.7,0.4-1.5,0.7-2.2,0.7c-1.6,0-2.3-1.3-2.3-2.8c0-0.4,0.1-0.7,0.1-1.1l4.8-27.9L4.4,42.1" + ' ' +
      "C3.7,41.3,3,40.4,3,39.4c0-1.7,1.7-2.3,3.1-2.6l28-4.1L46.7,7.4c0.5-1.1,1.5-2.3,2.7-2.3s2.2,1.2,2.7,2.3l12.6,25.4l28,4.1" + ' ' +
      "c1.3,0.2,3.1,0.9,3.1,2.6C95.9,40.4,95.1,41.3,94.4,42.1z"})

[vanwagonet]

Originally reported at 6to5/6to5/issues/747

[vanwagonet]

Admittedly the mixing of single and double quotes in Facebook's output is unfortunate. Normalizing the newline and tab as just a space is nice though.

[sebmck]

Ping @RReverser

[RReverser]

@sebmck I see all the issues, just not having time to get to all of them and, unfortunately, pings don't magically increase amount of time :)

This one was kind of intentional deviation, as 1) I really don't imagine any HTML-based examples where such a long attribute value would be something useful instead of sign of a bad code, 2) word wrap does the job quite well in any editor and 3) having at least attribute values limited to one line gives loose parser ability to guess the context and treat following line as separate attribute, so that, for example, autocompletion can be done better (this is not a case for Esprima, as they don't do error-tolerance).

However, I do agree that SVG is a good counter-example for (1) and it might be worth following esprima-fb's approach with parsing any amount of whitespaces with newline in the middle as single space.

So PR would be welcome, or just please wait for me to get to this one.

[sebmck]

@RReverser Didn't mean to imply that, happy for you to delegate this to me and I can take a look.

[vanwagonet]

I can take a look. @sebmck @RReverser I should have a little time tonight.

[rooch84]

Thanks for the tip. No compile issues, but Atom's parser wasn't happy.