$ show kentcdodds/mdx-bundler
mdx-bundler is a JavaScript/TypeScript library that compiles and bundles MDX (Markdown + JSX) content into a single evaluable JavaScript string. It uses esbuild for fast bundling and MDX v3 for compilation. The library allows users to provide MDX source code along with any dependency files (local, remote, or in-memory) and returns a bundled code string, parsed frontmatter, and errors. The bundled code can then be rendered in the browser using a client-side helper (`getMDXComponent`) that supports multiple JSX runtimes (React, Preact, Vue, Hono, etc.). It supports custom remark/rehype plugins, image bundling, global externals for dependency sharing, and flexible esbuild configuration. The architecture is centered around a single async function `bundleMDX` that orchestrates gray-matter parsing, esbuild with an in-memory file plugin, and MDX compilation. The client-side functions are minimal wrappers around `new Function` evaluation. The repository includes comprehensive tests for React, Preact, Vue, and Hono runtimes, and follows semantic release practices.
The LLM identified 1 files worth highlighting for reuse:
The `inMemoryPlugin` defined inside the `bundleMDX` function is an esbuild plugin that resolves and loads files from an in-memory dictionary (the `files` option). It implements `onResolve` to match file paths against the provided dictionary (including automatic extension resolution) and `onLoad` to return the file contents with the appropriate loader. This pattern is isolated, requires only esbuild and Node.js path utilities, and can be extracted and reused in any esbuild project that needs to provide virtual files without a real filesystem. It demonstrates deep understanding of esbuild's plugin API and the virtual file concept.