feat(mdx): Add script for React mdx conversion (#67)

* DO NOT MERGE: Test mdx conversion of the md files from react-core

* DO NOT MERGE: complete test conversion script for react

* Remove testing content

* fix(tsconfig): remove testing change from tsconfig

* Add to cli

Author: wise-king-sullyman

cli/cli.ts

@@ -11,6 +11,7 @@ import { getConfig } from './getConfig.js'
 import { symLinkConfig } from './symLinkConfig.js'
 import { buildPropsData } from './buildPropsData.js'
 import { hasFile } from './hasFile.js'
+import { convertToMDX } from './convertToMDX.js'
 
 function updateContent(program: Command) {
   const { verbose } = program.opts()
@@ -89,7 +90,7 @@ program.command('init').action(async () => {
 
 program.command('start').action(async () => {
   updateContent(program)
-  
+
   // if a props file hasn't been generated yet, but the consumer has propsData, it will cause a runtime error so to
   // prevent that we're just creating a props file regardless of what they say if one doesn't exist yet
   const hasPropsFile = await hasFile(join(astroRoot, 'dist', 'props.json'))
@@ -132,4 +133,11 @@ program.command('sync').action(async () => {
   sync({ root: astroRoot })
 })
 
+program
+  .command('convert-to-mdx')
+  .argument('<globPath>', 'The glob path to the files to convert')
+  .action(async (globPath: string) => {
+    await convertToMDX(globPath)
+  })
+
 program.parse(process.argv)

cli/convertToMDX.ts

@@ -0,0 +1,32 @@
+import { readFile, writeFile } from 'fs/promises'
+import { glob } from 'glob'
+
+export async function convertToMDX(globPath: string) {
+  const files = await glob(globPath)
+
+  files.forEach(async (file) => {
+    const fileContent = await readFile(file, 'utf-8')
+
+    //regex link: https://regexr.com/8f0er
+    const importRegex = /(?<!```no[lL]ive\n)import {?[\w\s,\n]*}?.*\n/g
+
+    //removes all top level imports from the md file that the old docs framework used to determine what imports are needed
+    const withoutImports = fileContent.replace(importRegex, '')
+
+    //regex link: https://regexr.com/8f0bu
+    const ExampleBlockRegex =
+      /```[tj]s file=['"]\.?\/?(\w*)\.(\w*)['"]\s*\n```/g
+
+    //the first capture group is the example file name without the extension or path, the second is the extension
+    const replacementString = `\nimport $1 from "./$1.$2?raw"\n\n<LiveExample src={$1} />`
+    const examplesConvertedToMDX = withoutImports.replace(
+      ExampleBlockRegex,
+      replacementString,
+    )
+
+    //we want to strip the nolive/noLive tags from codeblocks as that was custom to the old docs framework
+    const noLiveRemoved = examplesConvertedToMDX.replace(/```no[lL]ive/g, '```')
+
+    await writeFile(file + 'x', noLiveRemoved)
+  })
+}