ericclemmons/grunt-react

File concatenation not idempotent (i.e. different results after multiple times with same input)

MPV opened this issue · 4 comments

MPV commented

Hi,
We're a development team using grunt-react (which is awesome!) for compiling JSX to JS. We've recently enabled the file concatenation/combination feature and it works good, but we've got some problems that it seems to combine the files differently for different developers? We're all using version ~0.9.0, and for technical reasons we're still bound to checking in both our JSX and JS files into version control.

After someone has made a change in the JSX file, compiled it into JS, committed and pushed — then someone else pulls down the code, grunt watch detects and recompiles the JS files again — now with different output. Why?

Here's an example from what "git diff" says has changed:

@@ -1134,7 +1134,7 @@ define('components/header__menu', ['react', 'utils', 'components/header__languag
     });

     return MobileMenu;
-});
+});
 /**
  * @jsx React.DOM
  */

As you might've guessed, that place is the end+beginning of 2 different files that are concatenated.

I know one thing I've encountered is different filesystems returning files in different orders. It's not always based on alphabetical name or datemodified, apparently.

In your example, the only thing I can imagine is that the line endings are different between systems (e.g. \n, \r, \n\r).

I'm not sure which issue it is. What do you think?

MPV commented

Could it be something else? Today I just got this result:

-React.DOM.button({className: "languagepanel__link", type: "submit"}, this.state.translations.searchSubmit), 
-React.DOM.button({className: "searchpanel__clearbtn", type: "reset"}, this.state.translations.searchReset)
+React.DOM.button({className: "searchpanel__clearbtn", type: "reset"}, this.state.translations.searchReset), 
+React.DOM.button({className: "languagepanel__link", type: "submit"}, this.state.translations.searchSubmit)

And this is an excerpt of the input that was used:

<button className="searchpanel__clearbtn" type="reset">{this.state.translations.searchReset}</button>
<button className="languagepanel__link" type="submit">{this.state.translations.searchSubmit}</button>

Note: This is not the text inbetween two files.
What seems to have happened is that it switched the order of the "reset" and the "submit" button when compiling the JS.

What do you think?

MPV commented

Update:
I think we are having 2 different problems here. One with the file endings and another with the switched order of compiled lines.

I have been able to reproduce the "file endings" problem: it happens when going between compilation on Windows and other (at least Mac OS). We've double-checked the input files, they are all LF (no CRLF) both machines — hence I think the input should be fine.

Could there be something different happening in grunt-react when it runs on Windows?

Upon re-reading this, this appears to be a platform issue. Otherwise, a test would be greatly appreciated, since I have no way of confirming the behavior on my end =/