jsx
jsx copied to clipboard
Theoretical: Drop JSXText
Bear with me here :) JSX currently looks like this:
<div>
{'Name of things:' + name} -- no one really does this
Number of things: {count}
<span>
Some {cond ? children : null}
{'Some newline\n'}
</span>
</div>
What if it looked like:
<div>
'Name of things: ' + name, -- it's now intuitive to concatenate
'Number of things: ', count
<span>
'Some ', (cond ? children : null),
'Some newline\n'
</span>
</div>
- "Arbitrary" JSX white-space rules can be chucked out the window, it's JS-strings plain and simple.
- It's super easy to add and see explicit leading/tailing white-space, no weird encoded values or lazy hacks.
- It's super easy/intuitive to concatenate stringy content instead of lazily creating more children.
- It's JS through-and-through + JSX-elements, comments behave as you would expect.
I imagine that it would be possible to omit ,, if you would really want to.
I realize this would be a ginormous departure from the heavily HTML-based syntax we have currently. From a purely theoretical/technical perspective it makes perfect sense in my opinion, but the practical aspects are obviously very questionable. I don't expect anyone to embrace this, but I think it's an interesting thought.
Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.
The equivalent (ignoring whitespace and newline) using template strings:
<div>
`Name of things: ${name},
Number of things: ${count}`
<span>
`Some ${cond ? children : null}`
</span>
</div>
@gajus It's not equivalent though, you're including indentation and newlines.
@syranide You are correct. :+1: Nevertheless, I wanted to include a template string example for visual reference only.
Does indentation and newline matter here?
@gajus It ends up in the source code and also affects white-space: pre. I would also expect many to prefer
<span>`
Foo
Bar
`</span>
...over...
<span>
`Foo
Bar`
</span>
so those would also be affected by the leading and trailing whitespace.
The only case it would matter is white-space: pre. In that particular case you can just make an exception and use regular quotes.