make hmr works with mdx files

workaround this issue: vitejs/vite-plugin-react#38
vitejs · Dec 4, 2022 · 3ab1db3 · 3ab1db3
1 parent 6dd183f
commit 3ab1db3
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 4 deletions.
diff --git a/packages/react-pages/src/node/index.ts b/packages/react-pages/src/node/index.ts
@@ -26,7 +26,10 @@ import { injectHTMLTag } from './utils/injectHTMLTag'
 import { VirtualModulesManager } from './utils/virtual-module'
 import { FileTextMdxPlugin } from './utils/mdx-plugin-file-text'
 import { AnalyzeHeadingsMdxPlugin } from './utils/mdx-plugin-analyze-headings'
-import { OutlineInfoModuleManager } from './virtual-module-plugins/outline-info-module'
+import {
+  OutlineInfoModuleManager,
+  OUTLINE_INFO_MODULE_ID_PREFIX,
+} from './virtual-module-plugins/outline-info-module'
 
 /**
  * This is a public API that users use in their index.html.
@@ -258,9 +261,12 @@ export async function setupPlugins(vpConfig: PluginConfig) {
       mdExtensions: [],
       mdxExtensions: ['.md', '.mdx'],
       providerImportSource: '@mdx-js/react',
+      // jsx syntax is handled by the plugin vite-pages:mdx-transform
+      jsx: true,
     }),
+    createMdxTransformPlugin(),
     pluginFactory(vpConfig),
-  ]
+  ] as Plugin[]
 }
 
 function getRemarkPlugins(): Promise<PluggableList> {
@@ -283,3 +289,44 @@ function getRehypePlugins(): Promise<PluggableList> {
     import('rehype-slug').then((m) => m.default),
   ])
 }
+
+/**
+ * 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)
+      }
+    },
+  }
+}
diff --git a/packages/react-pages/src/node/virtual-module-plugins/outline-info-module/index.tsx b/packages/react-pages/src/node/virtual-module-plugins/outline-info-module/index.tsx
@@ -7,10 +7,10 @@ import { extractOutlineInfo } from './extractOutlineInfo'
 // mark demo proxy files as virtual files to avoid vite warning "missing source files"
 // https://github.com/vitejs/vite/blob/60721ac53a1bf326d1cac097f23642faede234ff/packages/vite/src/node/server/sourcemap.ts#L39
 // https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
-const PROXY_MODULE_ID_PREFIX = '\0/@react-pages/outline-info'
+export const OUTLINE_INFO_MODULE_ID_PREFIX = '\0/@react-pages/outline-info'
 
 export class OutlineInfoModuleManager {
-  private pmm = new ProxyModulesManager(PROXY_MODULE_ID_PREFIX)
+  private pmm = new ProxyModulesManager(OUTLINE_INFO_MODULE_ID_PREFIX)
 
   registerProxyModule(datasourceFilePath: string) {
     return this.pmm.registerProxyModule(datasourceFilePath, async (file) => {