Evaluate React Markdown String with JSX Components?

[ScottPierce]

We are trying to allow using MDX with additional JSX components for Server Side Rendering of static HTML pages.

So I've surmised that the mdx runtime module is deprecated, and that the new MDX evaluate function is the way to go. We are aware that we will need to using something like VM2 with timeouts to do this securely.

I haven't really been able to find many examples of how to do this though. Here is one of the examples that I've found:
https://codesandbox.io/s/mdx-evaluate-create-react-app-g8862?file=/src/App.js

If I have a static string of markdown with JSX, is there an easier way for me to render the content inside of a react component?

[ChristianMurphy]

Welcome @ScottPierce! 👋

Evaluate React Markdown String with JSX Components?

Sure, you could wrap it as a component or any other abstraction you wanted to.
Why do you want to abstract it?

So I've surmised that the mdx runtime module is deprecated, and that the new MDX evaluate function is the way to go.

Correct

We are aware that we will need to using something like VM2 with timeouts to do this securely.

If you are interacting with untrusted content, yes.
You will want as many safe guards as possible.

If I have a static string of markdown with JSX, is there an easier way for me to render the content inside of a react component?

The simplest and least abstract way to to use the result of evaluateSync

import * as runtime from "react/jsx-runtime";
import { evaluateSync } from "@mdx-js/mdx";

const mdxContent = `
export const planet = 'World'

# Hello, {planet}!

* list
* item
`;

export default function App() {
  return evaluateSync(mdxContent, runtime).default();
}

https://codesandbox.io/s/strange-snow-ldpg58?file=/src/App.js:384-394

You are welcome to use more or different abstractions, the questions comes back to my initial one, "why do you want to abstract it?"

[ScottPierce]

I couldn't get your sample working.

Right, I explained why though. The same signature that's valid for JS, isn't valid for Typescript.

Correct, the TypeScript typings require additional attributes to be explicitly set, which JavaScript allows to be implicit.

Why not allow it to be implicit with typescript as well?

[ChristianMurphy]

The same signature that's valid for JS, isn't valid for Typescript.

JavaScript allows a lot of implicit type conversions, which could and arguable should be more explicit.
TypeScript enforces that the type is correct.

[wooorm]

I think it's just that react doesn't type /jsx-runtime? That's their problem.

[ScottPierce]

Why do I have to set development to false explicitly?

[wooorm]

Because your build tools are going to set it implicitly otherwise and break things