mdx-bundler

import { bundleMDX, getMDXComponent } from 'mdx-bundler'; import * as React from 'react'; import { renderToString } from 'react-dom/server'; // Example MDX content with an import const mdxSource = ` --- title: My Awesome Post published: 2023-10-26 --- # Hello from MDX! import CustomComponent from './my-component'; This is some content. <CustomComponent text="World" /> Here's a list: - Item 1 - Item 2 `; // Example dependency file for the MDX const myComponentSource = ` import * as React from 'react'; export default function CustomComponent({ text }) { return <p>Hello, {text}!</p>; } `; async function processAndRenderMdx() { // Required for esbuild to find its binary in some environments, especially Windows if (process.platform === 'win32') { process.env.ESBUILD_BINARY_PATH = './node_modules/esbuild/esbuild.exe'; } else { process.env.ESBUILD_BINARY_PATH = './node_modules/esbuild/bin/esbuild'; } const { code, frontmatter } = await bundleMDX({ source: mdxSource, files: { './my-component.tsx': myComponentSource, }, // You can customize MDX options (remark/rehype plugins) here mdxOptions(options) { options.remarkPlugins = [...(options.remarkPlugins ?? [])]; options.rehypePlugins = [...(options.rehypePlugins ?? [])]; return options; }, }); // Dynamically import and execute the bundled code // This is typically done in a React component or server-side rendering setup const Component = getMDXComponent(code); // Example of server-side rendering using react-dom/server const html = renderToString( <Component components={{ // You can pass components here if they are not imported in MDX or for custom rendering // e.g., p: (props) => <p style={{ color: 'blue' }} {...props} /> }} /> ); console.log('Frontmatter:', frontmatter); console.log('Rendered HTML (first 200 chars):', html.substring(0, 200) + '...'); } processAndRenderMdx().catch(console.error);