Update README to reflect configuration file change from win.config.ts to .winrc.ts and add autoImport feature to index.ts

Author: cklwblove

README.md

@@ -23,7 +23,7 @@ npm install @winner-fed/preset-react
 
 ## 基础用法
 
-在 `win.config.ts` 中添加：
+在 `.winrc.ts` 中添加：
 
 ```ts
 import { defineConfig } from 'win';

src/features/autoImport/README.md

@@ -0,0 +1,77 @@
+# React 自动导入功能
+
+本模块实现了基于 `unplugin-auto-import` 的 React hooks 和 React Router 组件的自动导入。
+
+## 功能特性
+
+### 自动导入的 API
+
+#### React Hooks 和组件
+- `useState`, `useEffect`, `useCallback`, `useMemo`
+- `useRef`, `useContext`, `useReducer`
+- `useLayoutEffect`, `useImperativeHandle`
+- `useDeferredValue`, `useId`, `useTransition`
+- `createElement`, `Fragment`, `Suspense`, `lazy`
+- `forwardRef`, `memo`, `createContext`
+
+#### React Router（仅在非 MPA 模式下）
+- `BrowserRouter`, `Routes`, `Route`, `Link`, `NavLink`
+- `useNavigate`, `useLocation`, `useParams`
+- `useSearchParams`, `useRoutes`, `Outlet`
+
+## 打包器支持
+
+- ✅ Webpack
+- ✅ Vite
+- ✅ Rsbuild (基于 Rspack)
+
+## 配置说明
+
+### MPA 模式处理
+
+在 MPA（多页应用）模式下，React Router 相关的自动导入会被自动禁用，因为 MPA 不需要客户端路由。
+
+### 类型定义
+
+`dts` 设置为 `false`，因为 WinJS 框架会统一处理 TypeScript 类型定义。
+
+### ESLint 集成
+
+`eslintrc.enabled` 设置为 `false`，避免生成额外的 ESLint 配置文件。
+
+## 使用示例
+
+```tsx
+// 无需手动导入 React hooks
+export default function Counter() {
+  const [count, setCount] = useState(0);
+  
+  useEffect(() => {
+    console.log('Count changed:', count);
+  }, [count]);
+  
+  const doubleCount = useMemo(() => count * 2, [count]);
+  
+  return (
+    <div>
+      <p>计数: {count}</p>
+      <p>双倍: {doubleCount}</p>
+      <button onClick={() => setCount(count + 1)}>增加</button>
+    </div>
+  );
+}
+```
+
+## 实现细节
+
+模块通过拦截不同打包器的配置钩子，注入 `unplugin-auto-import` 插件：
+
+- **Webpack**: 通过 `api.modifyWebpackConfig` 注入
+- **Vite**: 通过 `api.modifyViteConfig` 注入
+- **Rsbuild**: 通过 `api.modifyRsbuildConfig` 修改 `tools.rspack` 配置注入
+
+每个打包器使用对应的 unplugin 入口点：
+- `unplugin-auto-import/webpack`
+- `unplugin-auto-import/vite`
+- `unplugin-auto-import/rspack`
+

src/features/autoImport/autoImport.ts

@@ -0,0 +1,98 @@
+import type { IApi } from '@winner-fed/winjs';
+import AutoImportRspack from 'unplugin-auto-import/rspack';
+import AutoImportVite from 'unplugin-auto-import/vite';
+import AutoImportWebpack from 'unplugin-auto-import/webpack';
+
+export default (api: IApi) => {
+  api.describe({
+    key: 'preset-react:autoImport',
+  });
+
+  // 根据是否为 MPA 模式动态生成配置
+  const getAutoImportConfig = () => {
+    const imports: any[] = [
+      // React hooks 和 API
+      {
+        react: [
+          'useState',
+          'useEffect',
+          'useCallback',
+          'useMemo',
+          'useRef',
+          'useContext',
+          'useReducer',
+          'useLayoutEffect',
+          'useImperativeHandle',
+          'useDeferredValue',
+          'useId',
+          'useTransition',
+          'createElement',
+          'Fragment',
+          'Suspense',
+          'lazy',
+          'forwardRef',
+          'memo',
+          'createContext',
+        ],
+      },
+    ];
+
+    // MPA 模式不需要 React Router
+    if (!api.userConfig.mpa) {
+      imports.push({
+        'react-router': [
+          'BrowserRouter',
+          'Routes',
+          'Route',
+          'Link',
+          'NavLink',
+          'useNavigate',
+          'useLocation',
+          'useParams',
+          'useSearchParams',
+          'useRoutes',
+          'Outlet',
+        ],
+      });
+    }
+
+    return {
+      imports,
+      dts: false, // WinJS 会处理类型定义
+      eslintrc: {
+        enabled: false,
+      },
+    };
+  };
+
+  // Webpack 集成
+  api.modifyWebpackConfig((config) => {
+    config.plugins = config.plugins || [];
+    config.plugins.push(AutoImportWebpack(getAutoImportConfig()));
+    return config;
+  });
+
+  // Vite 集成
+  api.modifyViteConfig((config: any) => {
+    config.plugins = config.plugins || [];
+    config.plugins.push(AutoImportVite(getAutoImportConfig()));
+    return config;
+  });
+
+  // Rsbuild 集成 (基于 Rspack)
+  api.modifyRsbuildConfig((config: any) => {
+    config.tools = config.tools || {};
+    const originalRspack = config.tools.rspack;
+
+    config.tools.rspack = (rspackCfg: any) => {
+      const cfg =
+        typeof originalRspack === 'function'
+          ? originalRspack(rspackCfg)
+          : originalRspack || rspackCfg;
+      cfg.plugins = cfg.plugins || [];
+      cfg.plugins.push(AutoImportRspack(getAutoImportConfig()));
+      return cfg;
+    };
+    return config;
+  });
+};

src/index.ts

@@ -32,6 +32,7 @@ export default (api: IApi) => {
       // React特有功能
       require.resolve('./features/forget/forget'),
       require.resolve('./features/icons/icons'),
+      require.resolve('./features/autoImport/autoImport'),
     ],
   };
 };