acornjs/acorn-jsx

Multiline jsx string attributes throw a parser error

Closed this issue · 8 comments

vanwagonet commented

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 commented

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 commented

Originally reported at babel/babel/issues/747

vanwagonet commented

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.

RReverser commented

@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 commented

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

vanwagonet commented

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

rooch84 commented

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