How to use precomputed mdast in react

[ExpHP]

Updating my website to use React and react-markdown has caused the total page load time to increase from about 1s to around 3s. The website uses a lot of markdown snippets, and running the profiler in Chrome devtools, it seems that a decent portion of time (at least 1s) is spent inside micromark.

I was considering a solution where I could possibly precompile these snippets into mdast (e.g. build MD -> mdast using node.js in the development environment, and deploy JSON files containing the mdast), but then it occurred to me that ReactMarkdown only takes a markdown string!

Is there a feasable way to convert mdast trees into React elements?

[ChristianMurphy]

Check out XDM https://github.com/wooorm/xdm#xdm (built on remark and mdast)
And in particular the integrations with build tools and bundlers https://github.com/wooorm/xdm#integrations many of which build documents into static react components at build time.
That could be used directly or the approach could be reapplied to plain remark.

[ExpHP]

Hmmmm. I certainly could use this, and integration into parcel seems simple enough, but I am trying to wrap my head around how I would be able to define the hundreds of snippets I have (some of which are even programmatically generated) without also creating hundreds of input files.

It looks mighty powerful though, and there probably is a way....? (maybe if the entire document was a function component that returned something different based on one of its props...?)

---

Edit: ....ummm actually I guess that might not work judging from this quote

We support anything in braces. Because JSX parses JavaScript, it knows when it sees a U+007D RIGHT CURLY BRACE (}) whether it means the end of the expression, or if there is more JavaScript after it. As we don’t parse JavaScript, but do want to allow further braces in expressions, we count opening braces (U+007B LEFT CURLY BRACE ({)) and expect just as many closing braces (U+007D RIGHT CURLY BRACE (})) in expressions.

so clearly a Javascript block in an MDX file cannot possibly contain more MDX anywhere inside of it, only JSX...

[ChristianMurphy]

but I am trying to wrap my head around how I would be able to define the hundreds of snippets I have (some of which are even programmatically generated) without also creating hundreds of input files.

It can also be called programatically to generate JS files, which you can handle as you please https://github.com/wooorm/xdm#compilefile-options
However, choosing to side step a build tool creates a new problem, how do you load a bunch of dynamically generated JavaScript?
If ESM with dynamic imports is in your browser support matrix, great! If it isn't things can get... interesting (back to eval or script hacks of the olden days). 😅

so clearly a Javascript block in an MDX file cannot possibly contain more MDX anywhere inside of it, only JSX

MDX 2 and XDM do allow mixing Markdown inside JSX blocks.
So depending on what you specifically want to support, it very well may be possible.

It's also worth noting that MDX is Remark/MDAST with some extra plugins, if you don't want/need JSX and import support in the document.
https://github.com/wooorm/xdm/blob/b4b734209111c92bafffb524126a12c57f08628c/lib/core.js#L66-L81 can be replaced with something more like https://github.com/remarkjs/react-remark/blob/e9a248b672a69cec4deef4c8235b40d53ac52970/src/index.ts#L41-L53 to support plain markdown.

[ExpHP]

Wait, there's a react-remark as well? And it uses rehype-react, which seems to be the missing piece of the puzzle to when I was looking at the source of react-markdown.

(In fact, now that I look even further there's a remark-react as well, and not one of these three projects mentions any of the others in its readme despite being under the same organization...)

....well. In any case, I think https://github.com/remarkjs/react-remark/blob/e9a248b672a69cec4deef4c8235b40d53ac52970/src/index.ts#L41-L53 makes it very clear how to turn mdast into react components, so I guess that answers the original question. (even if it might not be my final solution...)

[wooorm]

This seems quite the XY problem. As you found out, there are tons of options.
Sure, you can use mdast as the middle layer, but indeed, xdm compiles MDX (or normal markdown) to JS. Either as files, or as function bodies.
The limitation on braces you found is not a limitation for xdm, it’s a possible limitation in one of its tools.
I suggest writing down what you want to do and talking to a rubber duck for a bit, to figure out what makes the most sense in your case.