Markdownコンポーネントを実装

[qrac]

ministaのMDXコンフィグを反映できるコンパイラーコンポーネント。 node.jsで処理してレンダリング前にHTMLを渡す仕様を検討。node.jsなので @leafac/rehype-shiki とかも動くのではないかと。

[qrac]

MDXのcompileとrunをそのまま使っても上手くいかない。Automatic JSX Runtimeを解決するはずだが _jsx is not a function になってしまうので置換してimportしてみるが、それでも動かない。

const content = await compileMdx(childsStr, {
  outputFormat: "function-body",
})

const replacedContent = content.toString().replace("arguments[0]", `await import("react/jsx-runtime")`)

const contentReact = createElement(await runMdx(replacedContent, {}))

[qrac]

独自に処理した。MDXのcompile内容が変わった場合に動かなくなる可能性はある。

const content = await compileMdx(childsStr, config)

let contentStr = content.value.toString()

contentStr = contentStr.replace(
  /import {(.+?)} from "react\/jsx-runtime"/,
  'const {$1} = await import("react/jsx-runtime")'
)
contentStr = contentStr.replace(/\sas[(^const.*await import.*?)]/g, ": ")
contentStr = contentStr.replace(
  /export default MDXContent/g,
  "return MDXContent"
)
contentStr = contentStr.replace(/\nexport.*;/g, "\n")

const contentReact = createElement(await runMdx(contentStr, {}))

[qrac]

• プロバイダーを組み込んだがexportの処理をcompleでうまく行えず、componentsをcompileやrunに渡すこともできなかったため、imgをImageコンポーネントに差し替えるなどの拡張ができなかった。
• 内部で非同期処理があるので、React側で全てを行うこともできない。
• MdxConfigにrehype-reactプラグインを持たせてみたが、そちらも反映されず。

結局のところMarkdownコンポーネント内のタグを差し替える処理がどうやっても行えなかった。同様のことを行う場合は .mdx ファイルを使うかunifiedでパース処理から全部書くかのどちらかとなる。

[qrac]

MDXをやめて、こちらはunifiedベースの処理に変更してすべて作り直し。コンフィグをMDXと共有できない点は申し訳ないが、imgをImageコンポーネントに差し替えるなどが簡単に行える。