Evaluate react nodes to mdx content

[otakustay]

In my case, developers write tsx files and "yield" react elements or string into an array, to simplify, the code can look like:

const elements = [];
elements.push(<p>Hello</p>);
elements.push(user.name);
elements.push('Today is **sunny**');
elements.push(<pre>This is some code</pre>);

The elements array is finally a mix of strings and react nodes after tsc compilation, now I'd like to render it in React runtime and make it behave very like MDX, e.g. the "sunny" word is bolded.

The key difference from what MDX provides now is that we don't have a standalone .mdx file or a VFile object with string content, we already have react node objects, so mdx.evaluate seems not suitable for me.

[wooorm]

Depends on what you want in those strings. Markdown or MDX.
This project is about MDX, which is a language, that combines markdown with programming code. If you want JavaScript in those strings, you need MDX.
If you want markdown in those strings, you don’t need MDX. You can instead use the projects that MDX is built on. It’s a good idea to read up on how all this code works. There’s an architecture section on the website. Or you can read through the GitHub orgs.
Practically, at a low level, you could use https://github.com/syntax-tree/mdast-util-from-markdown, https://github.com/syntax-tree/mdast-util-to-hast, https://github.com/syntax-tree/hast-util-to-jsx-runtime

[wooorm]

This might also very well be an XY question. You are actually building something particular. And think this is the solution to go with. And asking about that solution. If folks are yielding a *b* c, why don’t they yield 'a ', <em>b</em>, c instead?