mdxJsxFlowElement vs element

[glitteringkatie]

I am nearly done with an upgrade to MDX v2, congrats on the release and thanks for the great docs to guide me through 🎉

While working through this, there was one thing that caught me enough by surprise that I wanted to check in if it is expected behavior.

https://mdxjs.com/playground/ in the MDX playground, insert the following:

<hr />

---

Previously, both of these ended up as hast type element with tag hr. Which meant both were caught in my provider components when I targeted hr and translated it into my company's UI library component for horizontal rule. But now, the explicit use of <hr /> is no longer an element hast type but a mdxJsxFlowElement type, causing it to no longer be caught by the components I provide to MDXProvider!

This is an easy fix: just use --- or write my own hast plugin as a bandaid. But I wanted to ask--is this intended? Are there other explicit HTML tags that had previously turned into elements in hast but now if we use the HTML, they'll be interpreted as jsx?

[wooorm]

Hey Katie!

It’s intended that explicit JSX tags can’t be changed but things from markdown can.
To illustrate why, take this:

<p className="special-paragraph">Special.</p>

Normal.

Both are paragraphs. But what should happen when a component for p is passed to add a class of normal-paragraph?
Chances are that the first one shouldn’t be changed, only the second. This shows that the previous behavior sometimes yielded unexpected results.

Your question shows that there’s something to be said for both explicit JSX and normal markdown to use the same component.
You can be explicit there though:

<Hr />

---

…assuming you change what components you pass and also pass your custom thematic break as Hr (so {hr: Hr, Hr}) to both overwrite the markdown thing and pass a custom component, that’ll work!

---

causing it to no longer be caught by the components I provide to MDXProvider

Note: the reason both are treated the same is not that they’re different nodes in mdast/hast.
It’s instead due to the data._mdxExplicitJsx: true field on the explicit JSX. If you remove those in a plugin, they won’t be differentiated.

Are there other explicit HTML tags that had previously turned into elements in hast but now if we use the HTML, they'll be interpreted as jsx?

In short, all of the lowercase things can’t be overwritten.
But I think it’s easier to reason about it the same as when writing JSX normally: <X>, does X reference a component (in scope)? Or is it just a tag name? Same for MDX 2.

[glitteringkatie]

Thanks, Titus--this makes a lot of sense! And thanks for the added note re data._mdxExplicitJsx: true. Since our mdx files are docs that are written by many people, Hr and --- working but hr not working will more than likely be surprising. I'll probably go the heavy-handed route and make it ALL work with the plugin you suggested!