mdx output should be transformed by vite-plugin-react

TODO: wait for vitejs/vite-plugin-react#188 to be published and bump the dep version
vitejs · Jul 2, 2023 · 30b6fc2 · 30b6fc2
1 parent 1f1802f
commit 30b6fc2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 132 deletions.
diff --git a/packages/react-pages/package.json b/packages/react-pages/package.json
@@ -67,6 +67,7 @@
   },
   "dependencies": {
     "@mdx-js/rollup": "^2.3.0",
+    "@vitejs/plugin-react": "4.0.1",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.1",
     "dequal": "^2.0.3",

diff --git a/packages/react-pages/src/node/index.ts b/packages/react-pages/src/node/index.ts
@@ -1,6 +1,6 @@
 import * as path from 'path'
 import type { PluggableList } from 'unified'
-import type { Plugin, IndexHtmlTransformContext } from 'vite'
+import type { Plugin, IndexHtmlTransformContext, PluginOption } from 'vite'
 import type { OutputPlugin } from 'rollup'
 import type { staticSiteGenerationConfig } from './types'
 
@@ -269,21 +269,36 @@ function moveScriptTagToBodyEnd(
 
 export default async function setupPlugins(
   vpConfig: PluginConfig = {}
-): Promise<Plugin[]> {
+): Promise<PluginOption[]> {
   // use dynamic import so that it supports node commonjs
   const mdx = await import('@mdx-js/rollup')
+  const mdxPlugin = mdx.default({
+    remarkPlugins: await getRemarkPlugins(),
+    rehypePlugins: await getRehypePlugins(),
+    // treat .md as mdx
+    mdExtensions: [],
+    mdxExtensions: ['.md', '.mdx'],
+    providerImportSource: '@mdx-js/react',
+  })
+  const { default: pluginReactForMdx } = await import('@vitejs/plugin-react')
   return [
-    mdx.default({
-      remarkPlugins: await getRemarkPlugins(),
-      rehypePlugins: await getRehypePlugins(),
-      // treat .md as mdx
-      mdExtensions: [],
-      mdxExtensions: ['.md', '.mdx'],
-      providerImportSource: '@mdx-js/react',
+    {
+      ...mdxPlugin,
+      enforce: 'pre',
+    },
+    // add hmr ability to .md and .mdx files
+    // https://github.com/vitejs/vite-plugin-react/issues/38
+    // https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/CHANGELOG.md#400-2023-04-20
+    // this react plugin is only used to handle mdx output
+    // users can aplly another @vitejs/plugin-react or @vitejs/plugin-react-swc on their side (to transform normal .jsx files)
+    pluginReactForMdx({
+      include: /\.mdx?$/,
+      // TODO: after https://github.com/vitejs/vite-plugin-react/pull/188 is published
+      // the next line will not be needed
+      jsxRuntime: 'classic',
     }),
-    createMdxTransformPlugin(),
     pluginFactory(vpConfig),
-  ] as Plugin[]
+  ]
 }
 
 function getRemarkPlugins(): Promise<PluggableList> {
@@ -307,47 +322,6 @@ function getRehypePlugins(): Promise<PluggableList> {
   ])
 }
 
-/**
- * use @vitejs/plugin-react to handle the output of @mdx-js/rollup
- * workaround this issue: https://github.com/vitejs/vite-plugin-react/issues/38
- */
-function createMdxTransformPlugin(): Plugin {
-  let vitePluginReactTrasnform: Plugin['transform'] | undefined
-  return {
-    name: 'vite-pages:mdx-transform',
-    configResolved: ({ plugins }) => {
-      // find this plugin to call it's transform function:
-      // https://github.com/vitejs/vite-plugin-react/blob/b647e74c38565696bd6fb931b8bd9ac7f3bebe88/packages/plugin-react/src/index.ts#L206
-      vitePluginReactTrasnform = plugins.find(
-        (p) =>
-          p.name === 'vite:react-babel' && typeof p.transform === 'function'
-      )?.transform
-      if (!vitePluginReactTrasnform) {
-        throw new Error(
-          `Can't find an instance of @vitejs/plugin-react. You should apply this plugin to make mdx work.`
-        )
-      }
-    },
-    transform: (code, id, options) => {
-      const [filepath, querystring = ''] = id.split('?')
-      if (
-        filepath.match(/\.mdx?$/) &&
-        !id.startsWith(OUTLINE_INFO_MODULE_ID_PREFIX)
-      ) {
-        // make @vitejs/plugin-react treat the "output of @mdx-js/rollup transform" like a jsx file
-        // https://github.com/vitejs/vite-plugin-react/blob/b647e74c38565696bd6fb931b8bd9ac7f3bebe88/packages/plugin-react/src/index.ts#L215
-        let newId
-        if (querystring) {
-          newId = id + '&ext=.jsx'
-        } else {
-          newId = id + '?ext=.jsx'
-        }
-        return (vitePluginReactTrasnform as any)(code, newId, options)
-      }
-    },
-  }
-}
-
 /**
  * Some chunk filenames may start with `_`, which will be treated as special resource by github pages. So we need to disable jekyll of github pages.
  * https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/