Getting unexpected indentation errors while nesting tags and aligning tag attributes

[rmoorman]

Hi,

I just ran into unexpected indentation errors while aligning tag attributes vertically within a cjsx file.

React = require "react"

Example = React.createClass
  render: ->
    <div
      foo="bar"
      >
      <div
        bar="foo"
        >
      </div>
    </div>

React.render <Example />, document.getElementById "app"

gives me the following error:

unexpected indentation while parsing file: /path/to/js/app.cjsx

This is while using it through coffee-reactify. Using the cjsx command line tool, however, shows an error too:

/path/to/js/app.cjsx:11:7: error: unexpected indentation
      )
      ^

Trying a by-hand-conversion of the example online with the [https://facebook.github.io/react/jsx-compiler.html](live react compiler):

var React = require("react");

var Example = React.createClass({
  render: function () {
    <div
      foo="bar"
      >
      <div
        bar="foo"
        >
      </div>
    </div>
  }
});

React.render(<Example />, document.getElementById("app"));

does not reveal any errors so I guess it is not an error within jsx but within cjsx..

And given the fact that all the grunt work of coffee-react is done by coffee-react-transform I presume this belongs here.

Aligning tag attributes like this makes the whole thing easier to read if things get more complicated (extra callbacks, several custom props a.s.o) and it would be great if this could be fixed!

Best regards,
Rico Moorman

Version information:

coffee-react version 3.0.1
coffee-react-transform version 3.0.1
coffee-script version 1.9.1

[jsdf]

A short term solution is to do your indentation like this:

  render: ->
    <div
      foo="bar"
    >
      <div
        bar="foo"
      >
      </div>
    </div>

Note that the closing > of a tag lines up with the opening <.

Beyond that I might be able to add a fix to correct the indentation of the output, but it's not a high priority at the moment.

In the longer term I'm planning to change the output for tags to remove all newlines, but that requires other changes to be made to avoid breaking source maps.

[rmoorman]

Thank you for taking a look. The proposed short term workaround is not pretty but it does work.
I am looking forward to the longer term solution :-)

Keep up the good work.

Best regards,
Rico Moorman

[jsdf]

That's the style of indentation which React uses in their examples

[rmoorman]

Well, I can only see a few examples for self-closing tags (which makes sense, the end of the tag itself lines up with the beginning of the tag). Unfortunately there is no example of a tag with actual children.

Which kind of alignment is pretty and which is not is rather a matter of personal taste anyway. As for me it does not look that great, but it works. It is better than a compilation error as far as I am concerned :-)
But thank you for pointing that out.

On the other hand I think that it should work. But I can completely understand that it might not be top priority right now though.

[ezekg]

@jsdf, I'm hitting this issue as well. It seems to be a bit random, because all of my components are written this way, but only some of them fail because the transformed ouput isn't valid CoffeeScript. Here's an example; try to compile it, it'll fail, but if you adjust the output to be valid CoffeeScript, it will compile. Looks like the issue is in the escaped whitespace within the object parameter.

Can you just strip all of the indentation/newlines (instead of escaping it how it is now) when transforming the CJSX since it's all function calls using parentheses anyways, or act as if the CJSX closing angle bracket is on the next line so it generates correct CoffeeScript?

Could you give me a quick download on how the parser works and I can create a pull request? I saw that you're no longer actively maintaining this, but I'd love to help out because I'm actively using this library.

[ezekg]

Sorry, still testing the above. Didn't mean to create the pull request on upstream master. Also didn't mean to spam with the issue references, I didn't know it would show up before I create the PR. 😞

(I really wish you could clean up noise like that in issues. My bad.)