fix: plugin-react 跳过node_modules下的编译导致未标识Island组件

package.json

@@ -87,6 +87,7 @@
     "@babel/core": "^7.23.2",
     "@babel/helper-plugin-utils": "^7.22.5",
     "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
     "@babel/traverse": "^7.23.2",
     "@mdx-js/rollup": "2.1.3",
     "@types/react": "^18.2.31",

src/node/plugin-island/transform.ts

@@ -0,0 +1,32 @@
+import { TransformOptions, transformAsync } from '@babel/core'
+import babelPluginIsland from '../babel-plugin-island'
+import type { Plugin } from 'vite'
+
+const ISLAND_FILE_REGEX = (name) => name.endsWith('x') // island组件可能存在的文件.jsx | .tsx | .mdx
+const ISLAND_CODE_REGEX = /(?<= )__island/
+
+export function pluginTransformIslands(): Plugin {
+  return {
+    name: 'vite-plugin-transform-islands',
+    apply: 'build',
+    enforce: 'pre', // 需要最先处理一次
+    async transform(code, id) {
+      if (ISLAND_FILE_REGEX(id) && ISLAND_CODE_REGEX.test(code)) {
+        const res = await transformIslands(code, id)
+        return res
+      }
+    },
+  }
+}
+
+async function transformIslands(
+  code: string,
+  filename: string
+): Promise<string> {
+  const babelOptions: TransformOptions = {
+    filename,
+    presets: ['@babel/preset-typescript'],
+    plugins: [babelPluginIsland],
+  }
+  return transformAsync(code, babelOptions)
+}

src/node/vitePlugins.ts

@@ -5,7 +5,7 @@ import { pluginIndexHtml } from './plugin-r-press/indexHtml'
 import { pluginConfig } from './plugin-r-press/config'
 import { pluginRoutes } from './plugin-routes'
 import { createPluginMdx } from './plugin-mdx'
-import babelPluginIsland from './babel-plugin-island'
+import { pluginTransformIslands } from './plugin-island/transform'
 import unocssOptions from './unocssOptions'
 import { ROOT } from './constant'
 
@@ -19,12 +19,13 @@ export async function createVitePlugins(
   return [
     pluginUnocss(unocssOptions),
     pluginIndexHtml(),
+    pluginTransformIslands(),
     pluginReact({
       jsxRuntime: 'automatic',
       jsxImportSource: isSSR ? path.join(ROOT, 'src', 'runtime') : 'react',
-      babel: {
-        plugins: [babelPluginIsland],
-      },
+      // babel: {
+      //   plugins: [babelPluginIsland],
+      // },
     }),
     pluginConfig(config, restartServer),
     pluginRoutes({