use mdx-bundler

packages/mdx-to-md/README.md

@@ -1,19 +1,21 @@
-<!--- This README was auto-generated from "packages/mdx-to-mdx/README.mdx" using "yarn build:readme" --> 
+<!--- This README was auto-generated from "packages/mdx-to-md/src/README.mdx" using "yarn build" -->
 
- # mdx-to-md
+# mdx-to-md
 
-Convert MDX to Markdown. 
+Convert MDX to Markdown.
+
+## Why?
+
+This library is most useful for generating README.md files [like the one you're reading](%28/packages/mdx-to-md%29).
 
 ## Install
 
 ```bash
 yarn add mdx-to-md
-
 ```
 
 ```bash
 npm install mdx-to-md
-
 ```
 
 ## Usage
@@ -26,7 +28,6 @@ import { Text } from "@chakra-ui/react"
 # Hello World
 
 <Text color="tomato">Compile static MDX content to Markdown 😎</Text>
-
 ```
 
 And convert it to Markdown:
@@ -42,5 +43,4 @@ const readme = `<!--- ${banner} --> \n\n ${markdown}`
 await writeFile("README.md", readme)
 
 console.log("📝 Converted README.mdx -> README.md")
-
-```
+```

packages/mdx-to-md/package.json

@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "@mdx-js/mdx": "^2.1.1",
-    "@swc/core": "^1.2.170",
     "node-html-markdown": "^1.2.0",
+    "mdx-bundler": "^9.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   }

packages/mdx-to-md/src/README.mdx

@@ -4,6 +4,10 @@ import { name, description } from "../package.json"
 
 {description}
 
+## Why?
+
+This library is most useful for generating README.md files [like the one you're reading](/packages/mdx-to-md/src/README.mdx).
+
 ## Install
 
 ```bash

packages/mdx-to-md/src/mdx-to-md.ts

@@ -1,10 +1,11 @@
-import type { CompileOptions } from "@mdx-js/mdx"
 import { NodeHtmlMarkdown } from "node-html-markdown"
-import { renderToString } from "react-dom/server"
+import { bundleMDX } from "mdx-bundler"
+import type { BundleMDX } from "mdx-bundler/dist/types"
+import { getMDXComponent } from "mdx-bundler/client"
 import { createElement } from "react"
+import { renderToString } from "react-dom/server"
 import { readFile } from "fs/promises"
-import { dirname, resolve } from "path"
-import { executeCode } from "./execute-code"
+import { dirname } from "path"
 
 const htmlToMarkdown = new NodeHtmlMarkdown()
 
@@ -18,25 +19,21 @@ const htmlToMarkdown = new NodeHtmlMarkdown()
  * const contents = await readFile('README.mdx', 'utf-8')
  * const markdown = await mdxToMd(contents)
  */
-export async function mdxToMd(
+export async function mdxToMd<
+  Frontmatter extends {
+    [key: string]: any
+  }
+>(
   /** The path to the MDX file. */
   path: string,
-  {
-    cwd,
-    compileOptions,
-  }: {
-    /** The current working directory. Defaults to process.cwd(). */
-    cwd?: string
 
-    /** MDX [compile options](https://mdxjs.com/packages/mdx/#compilefile-options) */
-    compileOptions?: CompileOptions
-  } = {}
+  /** Configure internal library options. */
+  options?: Pick<BundleMDX<Frontmatter>, "esbuildOptions" | "grayMatterOptions" | "mdxOptions">
 ) {
-  const contents = await readFile(resolve(cwd ?? process.cwd(), path), "utf-8")
-  const { compile } = await import("@mdx-js/mdx")
-  const compiledCode = await compile(contents, compileOptions)
-  const executedCode = await executeCode(compiledCode.value.toString(), dirname(path))
-  const element = createElement(executedCode as any)
+  const contents = await readFile(path, "utf-8")
+  const { code } = await bundleMDX({ source: contents, cwd: dirname(path), ...options })
+  const component = getMDXComponent(code)
+  const element = createElement(component)
   const html = renderToString(element)
   const markdown = htmlToMarkdown.translate(html)
 

packages/mdx-to-md/tests/lead.mdx

@@ -1,15 +1,15 @@
-import { name, description } from "../../package.json"
+import { name, description } from "../package.json"
 
 # {name}
 
 {description}
 
 # Install
 
-```tsx
-yarn add {name}
-```
+<pre>
+  <code className="language-bash">yarn add {name}</code>
+</pre>
 
-```tsx
-npm install {name}
-```
+<pre>
+  <code className="language-bash">npm install {name}</code>
+</pre>

packages/mdx-to-md/tests/mdx-to-md.test.ts

@@ -1,10 +1,29 @@
 import { test } from "uvu"
+import { resolve } from "path"
 import * as assert from "uvu/assert"
 import { mdxToMd } from "../src"
 
+const snapshot = `
+# mdx-to-md
+
+Convert MDX to Markdown. 
+
+# Install
+
+\`\`\`bash
+yarn add mdx-to-md
+\`\`\`
+
+\`\`\`bash
+npm install mdx-to-md
+\`\`\`
+`.trim()
+
 test("Converts MDX to Markdown", async () => {
-  const markdown = await mdxToMd("./test.mdx", { cwd: __dirname })
-  console.log(markdown)
+  const path = resolve(__dirname, "test.mdx")
+  const markdown = await mdxToMd(path)
+
+  assert.equal(markdown, snapshot)
 })
 
 test.run()

packages/mdx-to-md/tests/test.mdx

@@ -1,4 +1,3 @@
-import { name, description } from "../../package.json"
-import Lead from "./lead"
+import Lead from "./lead.mdx"
 
-<Lead name={name} description={description} />
+<Lead />

packages/readme/src/index.ts

@@ -1,12 +1,13 @@
+import { resolve } from "path"
 import { writeFile } from "fs/promises"
 import { mdxToMd } from "mdx-to-md"
 import { watch } from "chokidar"
 
-const sourceReadme = "../mdx-to-md/src/README.mdx"
+const sourceReadme = resolve(process.cwd(), "../mdx-to-md/src/README.mdx")
 
 async function build() {
   const markdown = await mdxToMd(sourceReadme)
-  const banner = `This README was auto-generated from "packages/mdx-to-mdx/README.mdx" using "yarn build:readme"`
+  const banner = `This README was auto-generated from "packages/mdx-to-md/src/README.mdx" using "yarn build"`
   const readme = `<!--- ${banner} --> \n\n ${markdown}`
 
   await writeFile("../mdx-to-md/README.md", readme)