custom rendering of MDX

Author: jderochervlk

app/routes/BlogArticleRoute.res

@@ -1,5 +1,5 @@
 type loaderData = {
-  content: string,
+  compiledMdx: CompiledMdx.t,
   blogPost: BlogApi.post,
   title: string,
 }
@@ -11,13 +11,17 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
     ~dir="markdown-pages/blog",
     ~alias="blog",
   )
-  let {content, frontmatter} = await MdxFile.loadFile(filePath)
+
+  let raw = await Node.Fs.readFile(filePath, "utf-8")
+  let {frontmatter}: MarkdownParser.result = MarkdownParser.parseSync(raw)
 
   let frontmatter = switch BlogFrontmatter.decode(frontmatter) {
   | Ok(fm) => fm
   | Error(msg) => JsError.throwWithMessage(msg)
   }
 
+  let compiledMdx = await MdxFile.compileMdx(raw, ~filePath, ~remarkPlugins=Mdx.plugins)
+
   let archived = filePath->String.includes("/archived/")
 
   let slug =
@@ -35,18 +39,16 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
   }
 
   {
-    content,
+    compiledMdx,
     blogPost,
     title: `${frontmatter.title} | ReScript Blog`,
   }
 }
 
 let default = () => {
-  let {content, blogPost: {frontmatter, archived, path}} = ReactRouter.useLoaderData()
+  let {compiledMdx, blogPost: {frontmatter, archived, path}} = ReactRouter.useLoaderData()
 
   <BlogArticle frontmatter isArchived=archived path>
-    <ReactMarkdown components=MarkdownComponents.default rehypePlugins=[Rehype.Plugin(Rehype.raw)]>
-      content
-    </ReactMarkdown>
+    <MdxContent compiledMdx />
   </BlogArticle>
 }

app/routes/BlogArticleRoute.resi

@@ -1,5 +1,5 @@
 type loaderData = {
-  content: string,
+  compiledMdx: CompiledMdx.t,
   blogPost: BlogApi.post,
   title: string,
 }

src/MdxFile.res

@@ -3,6 +3,27 @@ type fileData = {
   frontmatter: JSON.t,
 }
 
+type compileInput = {value: string, path: string}
+type compileOptions = {
+  outputFormat: string,
+  remarkPlugins: array<Mdx.remarkPlugin>,
+}
+@module("@mdx-js/mdx")
+external compile: (compileInput, compileOptions) => promise<CompiledMdx.compileResult> = "compile"
+
+@module("remark-frontmatter") external remarkFrontmatter: Mdx.remarkPlugin = "default"
+
+let compileMdx = async (content, ~filePath, ~remarkPlugins=[]) => {
+  let compiled = await compile(
+    {value: content, path: filePath},
+    {
+      outputFormat: "function-body",
+      remarkPlugins: [remarkFrontmatter, ...remarkPlugins],
+    },
+  )
+  compiled->CompiledMdx.fromCompileResult
+}
+
 let resolveFilePath = (pathname, ~dir, ~alias) => {
   let path = if pathname->String.startsWith("/") {
     pathname->String.slice(~start=1, ~end=String.length(pathname))

src/MdxFile.resi

@@ -17,3 +17,10 @@ let loadFile: string => promise<fileData>
  * → ["blog/release-12-0-0", "blog/archived/some-post", ...]
  */
 let scanPaths: (~dir: string, ~alias: string) => array<string>
+
+/** Compile raw MDX content into a function-body string using @mdx-js/mdx. */
+let compileMdx: (
+  string,
+  ~filePath: string,
+  ~remarkPlugins: array<Mdx.remarkPlugin>=?,
+) => promise<CompiledMdx.t>

src/bindings/Rehype.res

@@ -13,4 +13,3 @@ type rec rehypePlugin =
   | WithOptions(array<pluginOrOption>)
 
 @module("rehype-slug") external slug: plugin = "default"
-@module("rehype-raw") external raw: plugin = "default"

src/common/CompiledMdx.res

@@ -0,0 +1,5 @@
+type t = string
+
+type compileResult
+
+@send external fromCompileResult: compileResult => t = "toString"

src/common/CompiledMdx.resi

@@ -0,0 +1,5 @@
+type t
+
+type compileResult
+
+@send external fromCompileResult: compileResult => t = "toString"

src/components/MdxContent.res

@@ -0,0 +1,100 @@
+// ---------------------------------------------------------------------------
+// JSX runtime values needed by runSync
+// ---------------------------------------------------------------------------
+
+// We re-import the jsx-runtime exports as opaque values so we can pass them
+// through to runSync without running into ReScript's monomorphisation of
+// the polymorphic `React.jsx` / `React.jsxs` signatures.
+/**
+ * MdxContent — renders compiled MDX content as a React component.
+ *
+ * Uses `runSync` from `@mdx-js/mdx` to evaluate compiled MDX (produced by
+ * `MdxFile.compileMdx`) and renders the result with a shared component map.
+ */
+type jsxRuntimeValue
+
+@module("react/jsx-runtime") external fragment: jsxRuntimeValue = "Fragment"
+@module("react/jsx-runtime") external jsx: jsxRuntimeValue = "jsx"
+@module("react/jsx-runtime") external jsxs: jsxRuntimeValue = "jsxs"
+
+@val @scope(("import", "meta")) external importMetaUrl: string = "url"
+
+// ---------------------------------------------------------------------------
+// @mdx-js/mdx runSync binding
+// ---------------------------------------------------------------------------
+
+type runOptions = {
+  @as("Fragment") fragment: jsxRuntimeValue,
+  jsx: jsxRuntimeValue,
+  jsxs: jsxRuntimeValue,
+  baseUrl: string,
+}
+
+type mdxModule
+
+@module("@mdx-js/mdx")
+external runSync: (CompiledMdx.t, runOptions) => mdxModule = "runSync"
+
+@get external getDefault: mdxModule => React.component<{..}> = "default"
+
+let runOptions = {
+  fragment,
+  jsx,
+  jsxs,
+  baseUrl: importMetaUrl,
+}
+
+// ---------------------------------------------------------------------------
+// Shared MDX component map
+// ---------------------------------------------------------------------------
+
+let components = {
+  // Standard HTML element overrides
+  "a": Markdown.A.make,
+  "blockquote": Markdown.Blockquote.make,
+  "code": Markdown.Code.make,
+  "h1": Markdown.H1.make,
+  "h2": Markdown.H2.make,
+  "h3": Markdown.H3.make,
+  "h4": Markdown.H4.make,
+  "h5": Markdown.H5.make,
+  "hr": Markdown.Hr.make,
+  "li": Markdown.Li.make,
+  "ol": Markdown.Ol.make,
+  "p": Markdown.P.make,
+  "pre": Markdown.Pre.make,
+  "strong": Markdown.Strong.make,
+  "table": Markdown.Table.make,
+  "th": Markdown.Th.make,
+  "thead": Markdown.Thead.make,
+  "td": Markdown.Td.make,
+  "ul": Markdown.Ul.make,
+  // Custom MDX components
+  "Cite": Markdown.Cite.make,
+  "CodeTab": Markdown.CodeTab.make,
+  "Image": Markdown.Image.make,
+  "Info": Markdown.Info.make,
+  "Intro": Markdown.Intro.make,
+  "UrlBox": Markdown.UrlBox.make,
+  "Video": Markdown.Video.make,
+  "Warn": Markdown.Warn.make,
+  "CommunityContent": CommunityContent.make,
+  "WarningTable": WarningTable.make,
+  "Docson": DocsonLazy.make,
+  "Suspense": React.Suspense.make,
+}
+
+// ---------------------------------------------------------------------------
+// React component
+// ---------------------------------------------------------------------------
+
+@react.component
+let make = (~compiledMdx: CompiledMdx.t) => {
+  let element = React.useMemo(() => {
+    let mdxModule = runSync(compiledMdx, runOptions)
+    let content = getDefault(mdxModule)
+    React.jsx(content, {"components": components})
+  }, [compiledMdx])
+
+  element
+}

src/components/MdxContent.resi

@@ -0,0 +1,2 @@
+@react.component
+let make: (~compiledMdx: CompiledMdx.t) => React.element