feat: support react scan by config

.changeset/sharp-camels-ring.md

@@ -0,0 +1,5 @@
+---
+'@umijs/tnf': patch
+---
+
+feat: support react scan

README.md

@@ -145,6 +145,13 @@ The plugins configuration. Checkout [plugin.md](./docs/plugin.md) for more detai
 
 The publicPath configuration.
 
+### reactScan
+
+- Type: `{}`
+- Default: `false`
+
+Enable [react scan](https://react-scan.com/) to detects performance issues in your React code.
+
 ### router
 
 - Type: `{ defaultPreload?: 'intent' | 'render' | 'viewport'; defaultPreloadDelay?: number; devtool?: { options?: { initialIsOpen?: boolean; position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' }; } | false; convention?: any }`

examples/normal/.tnfrc.ts

@@ -27,4 +27,5 @@ export default defineConfig({
     },
   ],
   mock: { delay: '500-1000' },
+  reactScan: {},
 });

src/cli.ts

@@ -9,6 +9,7 @@ import { debug, error, info, warn } from './fishkit/logger';
 import * as logger from './fishkit/logger';
 import { checkVersion, setNoDeprecation, setNodeTitle } from './fishkit/node';
 import { mock } from './funplugins/mock/mock';
+import { reactScan } from './funplugins/react-scan/react-scan';
 import { PluginHookType, PluginManager } from './plugin/plugin_manager';
 import { type Context, Mode } from './types';
 
@@ -17,7 +18,11 @@ async function buildContext(cwd: string): Promise<Context> {
   const command = argv._[0];
   const isDev = command === 'dev';
   const config = await loadConfig({ cwd });
-  const plugins = [...(config.plugins || []), mock({ paths: ['mock'], cwd })];
+  const plugins = [
+    ...(config.plugins || []),
+    mock({ paths: ['mock'], cwd }),
+    ...(config.reactScan && isDev ? [reactScan()] : []),
+  ];
   const pluginManager = new PluginManager(plugins);
 
   // hook: config

src/config/types.ts

@@ -63,6 +63,7 @@ export const ConfigSchema = z
       })
       .optional(),
     plugins: z.array(PluginSchema).optional(),
+    reactScan: z.object({}).optional(),
     publicPath: z.string().optional(),
     router: z
       .object({

src/funplugins/react-scan/react-scan.ts

@@ -0,0 +1,18 @@
+import assert from 'assert';
+import type { Plugin } from '../../plugin/types';
+
+export function reactScan(): Plugin {
+  return {
+    name: 'react-scan',
+    transformIndexHtml(html) {
+      assert(
+        html.includes('</body>'),
+        '[react-scan] html must contains </body>',
+      );
+      return html.replace(
+        '</body>',
+        '<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script></body>',
+      );
+    },
+  };
+}