fix: island collection not work in mdx file

src/node/build.ts

@@ -142,7 +142,9 @@ class SSGBuilder {
   }
 
   async end() {
-    await remove(join(this.#root, TEMP_PATH));
+    if (!process.env.DEBUG) {
+      await remove(join(this.#root, TEMP_PATH));
+    }
   }
 
   async islandsBuild(injectCode: string) {

src/node/constants/index.ts

@@ -4,6 +4,8 @@ export const isProduction = () => process.env.NODE_ENV === 'production';
 
 export const TS_REGEX = /(c|m)?tsx?$/;
 
+export const MD_REGEX = /\.mdx?$/;
+
 export const PACKAGE_ROOT_PATH = join(
   fileURLToPath(import.meta.url),
   '../../..'

src/node/plugin-island/config.ts

@@ -35,6 +35,9 @@ export function pluginConfig(
     config(c) {
       return mergeConfig(
         {
+          esbuild: {
+            jsx: 'preserve'
+          },
           optimizeDeps: {
             include: [
               'react',

src/node/plugin-island/islandTransform.ts

@@ -7,26 +7,27 @@ import { Plugin, transformWithEsbuild } from 'vite';
 import { transformAsync } from '@babel/core';
 import babelPluginIsland from '../babel-plugin-island';
 import { SiteConfig } from 'shared/types/index';
+import { MD_REGEX } from '../constants/index';
 
 export function pluginIslandTransform(
   config: SiteConfig,
   isServer: boolean
 ): Plugin {
   return {
     name: 'island:vite-plugin-internal',
-    enforce: 'pre',
     async transform(code, id, options) {
       // Note: @vitejs/plugin-react cannot compile files in node_modules, so we need to compile them manually.
       // In production, we should transform the __island props for collecting island components
       if (
         options?.ssr &&
-        TS_REGEX.test(id) &&
-        id.includes(DEFAULT_THEME_PATH) &&
+        (TS_REGEX.test(id) || MD_REGEX.test(id)) &&
         !config.enableSpa
       ) {
         const strippedTypes = await transformWithEsbuild(code, id, {
-          jsx: 'preserve'
+          jsx: 'preserve',
+          loader: 'tsx'
         });
+
         const result = await transformAsync((await strippedTypes).code, {
           filename: id,
           presets: [

src/node/plugin-mdx/index.ts

@@ -3,6 +3,9 @@ import { pluginMdxRollup } from './pluginMdxRollup';
 import { pluginMdxHMR } from './pluginMdxHmr';
 import { SiteConfig } from 'shared/types/index';
 
-export async function pluginMdx(config: SiteConfig): Promise<Plugin[]> {
-  return [await pluginMdxRollup(config), pluginMdxHMR()];
+export async function pluginMdx(
+  config: SiteConfig,
+  isServer: boolean
+): Promise<Plugin[]> {
+  return [await pluginMdxRollup(config, isServer), pluginMdxHMR()];
 }

src/node/plugin-mdx/pluginMdxHmr.ts

@@ -1,3 +1,4 @@
+import { MD_REGEX } from '../../node/constants';
 import { Plugin } from 'vite';
 
 export function pluginMdxHMR(): Plugin {
@@ -11,7 +12,7 @@ export function pluginMdxHMR(): Plugin {
       ) as Plugin;
     },
     async transform(code, id, opts) {
-      if (/\.mdx?/.test(id)) {
+      if (MD_REGEX.test(id)) {
         // Inject babel refresh template code by @vitejs/plugin-react
         const result = await viteReactPlugin.transform?.call(
           this,

src/node/plugin-mdx/pluginMdxRollup.ts

@@ -12,8 +12,14 @@ import { rehypePluginShiki } from './rehypePlugins/shiki';
 import { SiteConfig } from 'shared/types/index';
 import { Plugin } from 'vite';
 
-export async function pluginMdxRollup(_config: SiteConfig): Promise<Plugin> {
+export async function pluginMdxRollup(
+  _config: SiteConfig,
+  isServer: boolean
+): Promise<Plugin> {
   return pluginMdx({
+    // We should reserve the jsx in ssr build
+    // to ensure the island components can be collected by `babel-plugin-island`
+    jsx: isServer,
     remarkPlugins: [
       remarkPluginGFM,
       // The following two plugin for frontmatter

src/node/plugin.ts

@@ -16,23 +16,26 @@ export async function createIslandPlugins(
 ): Promise<PluginOption[]> {
   return [
     // pluginInspect({}),
-
+    // Md(x) compile
+    await pluginMdx(config, isServer),
     // For island internal use
     pluginIsland(config, isServer, restartServer),
+
     // React hmr support
-    pluginReact({
-      jsxRuntime: 'automatic',
-      jsxImportSource:
-        isServer && !config.enableSpa ? ISLAND_JSX_RUNTIME_PATH : 'react',
-      babel: {
-        // Babel plugin for island(mpa) mode
-        plugins: [...(config.enableSpa ? [] : [babelPluginIsland])]
-      }
-    }),
+    // In ssr, we will compile .tsx in islandTransform plugin
+    isServer
+      ? []
+      : pluginReact({
+          jsxRuntime: 'automatic',
+          jsxImportSource:
+            isServer && !config.enableSpa ? ISLAND_JSX_RUNTIME_PATH : 'react',
+          babel: {
+            // Babel plugin for island(mpa) mode
+            plugins: [...(config.enableSpa ? [] : [babelPluginIsland])]
+          }
+        }),
     // Svg component support
     pluginSvgr(),
-    // Md(x) compile
-    await pluginMdx(config),
     // Conventional Route
     pluginRoutes({ prefix: '', root: config.root })
   ];

tsconfig.json

@@ -14,7 +14,7 @@
     "noUnusedLocals": true,
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "lib": ["ESNext", "DOM"]
   },
   "exclude": [