coffee-react-transform icon indicating copy to clipboard operation
coffee-react-transform copied to clipboard

Unexpected indentation with newline delimited attributes

Open rraval opened this issue 8 years ago • 5 comments

Try Coffee-React link

If I have JSX that looks like:

<Foo
  className="Foo">

  <Bar
    className="Bar">

    {expr}
  </Bar>
</Foo>

This gets compiled to:

React.createElement(Foo, { \
  "className": "Foo"},

  React.createElement(Bar, { \
    "className": "Bar"},

    (expr)
  )
)

CoffeeScript chokes on this input, claiming unexpected indentation. Strangely, if I remove either of the backslashes (or put the attributes on the same line, which makes the transform produce equivalent code), it works without a problem.

rraval avatar Aug 25 '15 18:08 rraval

Try to keep your closing brackets in line with your opening ones. I want to remove this limitation in future but it's a big piece of work

jsdf avatar Aug 25 '15 21:08 jsdf

Example

jsdf avatar Aug 25 '15 21:08 jsdf

Ah I see. Forgive my ignorance but is there a specific reason why the newlines aren't simply stripped? This was the implicit behaviour I was expecting before I actually looked into what the output looked like.

For example:

<Foo
  className="Foo">

  <Bar
    className="Bar">

    {expr}
  </Bar>
</Foo>

would be converted to

React.createElement(Foo, {"className": "Foo"},
  React.createElement(Bar, {"className": "Bar"},
    (expr)
  )
)

rraval avatar Aug 25 '15 22:08 rraval

As I haven't implemented source maps yet, the temporary (but long standing) solution was to make sure the input lines had 1 to 1 parity with output lines.

jsdf avatar Aug 25 '15 22:08 jsdf

Fair enough. I don't really use source maps since the transformation is pretty trivial to work backwards to the offending line, but I can see the reasoning.

Perhaps in the short term a --ugly could be introduced to explicitly opt into a more permissive parsing mode provided that the output doesn't need to match 1 to 1?

rraval avatar Aug 31 '15 23:08 rraval