MDX evaluate with react and renderToStaticMarkup: working versions (tested 2026-10-17)

{
  "name": "mdx-compile-evaluate",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "node --import tsx --test test/*.test.ts"
  },
  "dependencies": {
    "@mdx-js/mdx": "3.1.1",
    "react": "19.3.1",
    "react-dom": "19.3.1"
  },
  "devDependencies": {
    "@types/react": "19.3.0",
    "@types/react-dom": "19.3.0",
    "@types/node": "26.6.5",
    "tsx": "4.23.15"
  }
}

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

export type MdxComponent = ComponentType<Record<string, unknown>>;

export type MdxComponentMap = Record<string, MdxComponent>;

export type MdxResult = {
  Content: ComponentType<{ components?: MdxComponentMap }>;
  exports: Record<string, unknown>;
};

export async function evaluateMdx(source: string): Promise<MdxResult> {
  const mod = await evaluate(source, {
    ...runtime,
    baseUrl: import.meta.url,
  });

  const { default: Content, ...exports } = mod;

  return {
    Content: Content as unknown as MdxResult["Content"],
    exports: exports as Record<string, unknown>,
  };
}

import { test } from "node:test";
import assert from "node:assert/strict";
import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { evaluateMdx, type MdxComponent } from "../src/render.ts";

function Greeting({ name }: { name: string }) {
  return createElement("p", { className: "greeting" }, `Hello, ${name}!`);
}

const mdx = [
  "# Hello MDX",
  "",
  "export const answer = 42;",
  "",
  '<Greeting name="World" />',
  "",
  "The answer is {answer}.",
].join("\n");

test("evaluates frontmatter-free MDX and renders static HTML", async () => {
  const { Content, exports } = await evaluateMdx(mdx);

  const html = renderToStaticMarkup(
    createElement(Content, { components: { Greeting: Greeting as MdxComponent } }),
  );

  assert.match(html, /<h1>Hello MDX<\/h1>/);
  assert.match(html, /<p class="greeting">Hello, World!<\/p>/);
  assert.match(html, /<p>The answer is 42\.<\/p>/);
  assert.equal(exports.answer, 42);
});