Line break inside inline JSX tags is incompatible with HTML & XML. Is it intended?

[tats-u]

<Foo
  bar="bar"
  baz="baz"
>Lorem *ipsum*</Foo>

and

<Foo
  bar="bar"
  baz="baz"
>Lorem *ipsum*</
Foo>

and

<Foo
  bar="bar"
  baz="baz"
>
  Lorem *ipsum*
</
Foo
>

can be compiled into JSX codes in the playground.

However,

<Foo
  bar="bar"
  baz="baz"
>Lorem *ipsum*</Foo
>

vomits the following error:

4:20: Unexpected end of file in name, expected a name character such as letters, digits, `$`, or `_`; whitespace before attributes; or the end of the tag

Line break just before > of tags is valid in HTML & XML. (I've known JSX is not completely compatible with them)

https://html.spec.whatwg.org/multipage/syntax.html#end-tags
https://www.w3.org/TR/xml/#sec-starttags

Questio: is it intended that an end JSX tags allows whitespace only just after </, but not just before >?

Prettier, the gold standard JS & HTML formatter (has not supported MDX v2+ yet though), formats HTML like:

<a
  href="https://example.com"
  class="foo"
  >bar</a
>

https://prettier.io/blog/2018/11/07/1.15.0#whitespace-sensitive-formatting

I like this format result because it complies with a line length rule without adding extra spaces. I want inline JSX to be formatted like this too.

If MDX can parse the above "erroneous" input, inline JSX components with long names, attributes, or attribute values will be more likely to get opportunity to comply with a line length rule with keeping the compatibility with HTML.

<LongNameComponent
  longAttributeName="longAttributeValue"
  anotherAttribute={12345}
  >Long Child</LongNameComponent
>Some long text follows<AnotherComponent
  >Another Child</AnotherComponent
>Some long text follows<br
/>New line

[ChristianMurphy]

Hey @tats-u! 👋

Line break inside inline JSX tags is incompatible with HTML & XML. Is it intended?

To answer the broader question. MDX is Markdown + JSX.
There is no intention to be compatible with XML or HTML.

---

To your more specific question, should

<Foo
  bar="bar"
  baz="baz"
>Lorem *ipsum*</Foo
>

be considered valid?
I would lean, no.
<Foo> is being defined as an inline tag here.
With Lorem Ipsum on the same line as the > closing the opening tag.
Inline tags need to be all on a single line.

The newline after can be supported as a block tag:

<Foo
  bar="bar"
  baz="baz"
>
  Lorem *ipsum*
</Foo
>

sandbox: https://mdxjs.com/playground/

---

Prettier, the gold standard JS & HTML formatter, formats HTML like:

MDX does not contain HTML, and should not be formatted as HTML.

has not supported MDX v2+ yet though

Prettier is aware and is working towards support prettier/prettier#12209 (as you seem to already be aware, as you've commented on that thread as well).

[tats-u]

Inline tags need to be all on a single line.

I would like to ask you for another question for

<Foo
  bar="bar"
  baz="baz"
>Lorem *ipsum*</Foo>

and

<Foo
  bar="bar"
  baz="baz"
>Lorem *ipsum*</
Foo>

JSX elements in these MDXes look like valid as both plain (non-MDX) and MDX inline JSX (does not throw errors), despite the fact the latter it is invalid as HTML/XML.

• Do you permit line break around attributes designations in start tags (bar="bar" & baz="baz")?
• Do you allow word wrapping of text in inline JSX elements? (e.g. <Foo>bar\nbaz</Foo>)
• For the latter (</\nFoo>), as </Component\n> is not accepted as you say, people who want to comply to a line length limit may hack this syntax instead of my first suggestion (invalid as inline JSX).

I would like ask you if you have any reason to keep these hacked syntax allowed. Or are these unintentional ones? Do you have any plan to prohibit them in the future?

[wooorm]

Use the playground: https://mdxjs.com/playground/.
You can use it to find out whether your questions are correct (1: generally, sure, line breaks are allowed; 2: yes, generally line breaks are allowed, 3: both are allowed)

In markdown blocks are parsed first. If a valid block, all your examples work.
If it is not a valid block (because text and tags are on the same line), block quotes are found first, and later the inlines are missing.

All of this behavior is intentional, as it aligns with how markdown works.

[ChristianMurphy]

JSX elements in these MDXes look like valid as both plain (non-MDX) and MDX inline JSX (does not throw errors), despite the fact the latter it is invalid as HTML/XML.

Again, MDX is Markdown + JSX.
There is no intention to be compatible with XML or HTML.

Do you permit line break around attributes designations in start tags

Yes

Do you allow word wrapping of text in inline JSX elements?

yes, with:

<a>bar
baz</a>

For the latter (</\nFoo>), as </Component\n> is not accepted as you say, people who want to comply to a line length limit may hack this syntax instead of my first suggestion (invalid as inline JSX).

I don't understand your question here.
Broadly, I'd recommend not hacking the syntax, instead nudging prettier towards better defaults for MDX 2+.

I would like ask you if you have any reason to keep these hacked syntax allowed. Or are these unintentional ones? Do you have any plan to prohibit them in the future?

Again, I'd recommend having smarter linter rules over choosing hacked/difficult to read/reason about syntax.

There are no current plans to change what is supported in MDX syntax.
Any syntax changes would be discussed, and if considered breaking be added as part of a major version.

[wooorm]

This isn’t about JSX, HTML, or XML.
This is about markdown.

>

Is a block quote.

[tats-u]

This makes sense.