jsx output incorrect for text between tags on same line
buble doesn't handle inline jsx text correctly:
$ cat test.jsx
ReactDOM.render(
<Foo> <h1>Hello {name}!</h1> </Foo>,
document.querySelector( 'main' )
);
Correct:
$ cat test.jsx | babel
'use strict';
ReactDOM.render(React.createElement(
Foo,
null,
' ',
React.createElement(
'h1',
null,
'Hello ',
name,
'!'
),
' '
), document.querySelector('main'));
Incorrect:
$ node_modules/.bin/buble -v
Bublé version 0.10.6
$ cat test.jsx | node_modules/.bin/buble
ReactDOM.render(
React.createElement( Foo, null, React.createElement( 'h1', null, "Hello ", name, "!" ) ),
document.querySelector( 'main' )
);
Notice how the input source is treated differently by babel if each tag is on its own line:
$ cat test2.jsx
ReactDOM.render(
<Foo>
<h1>Hello {name}!</h1>
</Foo>,
document.querySelector( 'main' )
);
$ cat test2.jsx | babel
'use strict';
ReactDOM.render(React.createElement(
Foo,
null,
React.createElement(
'h1',
null,
'Hello ',
name,
'!'
)
), document.querySelector('main'));
I think only leading whitespace and trailing whitespace can be elided in JSX, not whitespace between tags on the same line.
Edit - babel version used:
$ babel -V
5.8.29 (babel-core 5.8.38)