Inconsistent JSX whitespace handling

[mindplay-dk]

This is cross-post of babel#7360, which the maintainers of the JSX babel transform haven't commented on yet - I'm cross-posting the issue here, because the Typescript implementation is consistent with the Babel JSX transform, likely because it (or it's test suite) was referenced by the Typescript team (?)

I'm hoping that the Typescript team will be more attentive and perhaps we can push for this issue to get resolved, so that the behavior is consistent between Babel and Typescript.

---

It appears the whitespace handling of the JSX transform is inconsistent.

For example:

let content = <div>
  Some inline <code>code</code> and some other
  <code>inline code</code> right here.
</div>

The two <code> tags in this example end up rendering differently - it appears the line-break before the word "other" on the first line gets discarded, while the actual spaces before/after the first code-tag, and after the second one, do get rendered.

This currently forces me to make sure I never start an inline tag at the beginning of a line of text.

Here's the output of a fiddle to illustrate why whitespace is important to HTML rendering in this case:

Here's a fiddle demonstrating the transform problem.

And here's console.log() output from that fiddle illustrating the problem:

While this behavior may be consistent with XML whitespace handling, it's a real problem when you're trying to render HTML where inline whitespace means something.

HTML, as far as I know, collapses whitespace-only sequences, and collapses leading/trailing serial whitespace to a single whitespace.

I also tested this with Typescript, and it does look like it's transform is identical to babel's:

{
	"type": "div",
	"props": null,
	"children": [
		"Some inline ",
		{
			"type": "code",
			"props": null,
			"children": [
				"code"
			]
		},
		" and some other",
		{
			"type": "code",
			"props": null,
			"children": [
				"inline code"
			]
		},
		" right here."
	]
}

Since the 99% use-case for JSX is rendering HTML, I'd like to suggest that both babel and Typescript ought to be consistent with HTML on this point.

[LucaColonnello]

Hello!

Just to share what the status of the Babel issue is, we are waiting from some input from React maintainers to check if there's any problem with the JSX spec and how to solve this problem on the spec side, so that every other implementation (i.e. the TypeScript one) is aligned to it and not to Babel specific implementation.

[DanielRosenwasser]

Hi @LucaColonnello, is there an issue we can track on https://github.com/facebook/jsx/? That's probably the most appropriate venue for all JSX implementers/targets.

[LucaColonnello]

Hey @DanielRosenwasser
Thanks for the reply!

I didn’t open an issue yet.
I’ll do ASAP and link it here!

Thanks! :)

[LucaColonnello]

This should be handled here
https://github.com/Microsoft/TypeScript/blob/c1128d6957c7e60f54ef6b7c5cd7e1308fa2bb69/src/compiler/transformers/jsx.ts#L194-L209

Looking at the HTML spec, this is not entirely right https://www.w3.org/TR/html4/appendix/notes.html#notes-line-breaks

[RyanCavanaugh]

I've read the Babel and JSX issues on this and the JSX authors are clear that this is the intended behavior.

[RyanCavanaugh]

facebook/jsx#19