I'm active in the reactjs tag and really like the ability to create runnable React snippets with the Use BabelJS/ES2015
option.
However, when tidy is run on a snippet containing JSX code it produces incorrectly-formatted output. Here's an example:
Valid, un-formatted code
class MyComponent extends React.Component {
render() {
return (
<div>
<h1>Title</h1>
</div>
);
}
}
ReactDOM.render(<MyComponent />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Incorrectly-formatted, 'Tidy' code
class MyComponent extends React.Component {
render() {
return ( <
div >
<
h1 > Title < /h1> <
/div>
);
}
}
ReactDOM.render( < MyComponent / > , document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Expected Result
class MyComponent extends React.Component {
render() {
return (
<div>
<h1>Title</h1>
</div>
);
}
}
ReactDOM.render(<MyComponent />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
When the Use BabelJS/ES2015
option is selected, the JSX code should be interpreted as HTML and properly formatted. But as is tidy cannot be used on snippets containing JSX.
Is there any plan to add support for JSX so it can be used with tidy?