vite-plugin-react18-pages/src/node/utils/mdx-plugin-file-text.ts

<p> <a href="https://www.npmjs.com/package/vite-plugin-react-pages" target="_blank" rel="noopener"><img src="https://img.shields.io/npm/v/vite-plugin-react-pages.svg" alt="npm package" /></a> </p>

import visit from 'unist-util-visit'
import type { Root } from 'mdast'

export function FileTextMdxPlugin() {
  return transformer

  function transformer(tree: Root, file: any) {
    const addImports: string[] = []

    visit(tree, 'jsx', (child: any, index, parent) => {
      const regexp = /<FileText\s+src=["'](.*?)["']\s+syntax=["'](.*?)["']/
      const match = (child.value as string).match(regexp)

      if (match) {
        const [, src, syntax] = match
        const nextIndex = addImports.length
        const varName = `_fileText${nextIndex}`
        addImports.push(`import ${varName} from "${src}?raw";`)
        child.value = `<FileText text={${varName}} syntax="${syntax}" />`
      } else {
        const basicRegexp = /<FileText\s+(?:.+?\s)?src=/
        const basicMatch = child.value.match(basicRegexp)
        if (basicMatch) {
          // detect invalid usage of FileText
          // for example: props.syntax missing
          throw new Error(
            `Invalid usage of <FileText />: ${child.value}.
            Correct Syntax: <FileText src="./path/to/file" syntax="ts|tsx|text" />`
          )
        }
      }
    })

    tree.children.unshift(
      ...addImports.map((importStr) => {
        return {
          type: 'import',
          value: importStr,
        } as any
      })
    )
  }
}