Repository files navigation

WinJS 框架的 React 预设，提供 React 19.x 的完整支持和现代工具链。

• ✅React 19.x 支持 - 支持 React 19 的最新特性和并发渲染
• 🚀现代 JSX 转换 - 默认使用自动 JSX runtime（React 17+）
• ⚡Fast Refresh - 开发环境下的 React 组件热重载
• 🛠️多打包器支持 - 支持 Webpack、Vite 和 Rsbuild
• 📦自动导入 - React hooks 和 React Router 自动导入
• 🎨TypeScript 支持 - 完整的 JSX/TSX TypeScript 支持
• 🔗React Router v7 - 最新的路由管理和数据加载能力
• 🎯SVG 组件化 - 将 SVG 文件作为 React 组件导入
• 🧠React Compiler - 可选的 React Compiler（前称 React Forget）支持
• 🎨图标按需加载 - 基于 Iconify 的图标按需加载方案

npm install @winner-fed/preset-react

在win.config.ts 中添加：

import{defineConfig}from'win';exportdefaultdefineConfig({presets:['@winner-fed/preset-react'],react:{fastRefresh:true,// 启用 Fast Refresh},});

• 类型:boolean
• 默认值:true
• 说明: 是否启用 Fast Refresh。开发环境下推荐启用，可实现组件级热更新。

启用 React Compiler（前称 React Forget），用于自动优化 React 组件性能。

• 类型:{ ReactCompilerConfig?: object }
• 默认值:undefined
• 说明: React Compiler 配置。仅在 React 19+ 版本可用。

使用示例：

exportdefaultdefineConfig({react:{forget:{ReactCompilerConfig:{// React Compiler 自定义配置},},},});

限制条件：

• 仅支持 React 19 及以上版本
• 不能与mfsu 同时使用

预设会自动导入常用的 React hooks 和 React Router 组件，无需手动 import：

// 无需手动导入这些 APIconst[state,setState]=useState(0);constref=useRef();constnavigate=useNavigate();

React：

• useState,useEffect,useCallback,useMemo
• useRef,useContext,useReducer
• useLayoutEffect,useImperativeHandle
• useDeferredValue,useId,useTransition
• createElement,Fragment,Suspense,lazy
• forwardRef,memo,createContext

React Router：

• BrowserRouter,Routes,Route,Link,NavLink
• useNavigate,useLocation,useParams
• useSearchParams,useRoutes,Outlet

将 SVG 文件作为 React 组件导入：

importLogofrom'./logo.svg?react';functionHeader(){return<Logowidth={100}height={50}/>;}

基于 Iconify 的图标按需加载方案，支持数万个图标库：

// 配置图标按需加载exportdefaultdefineConfig({icons:{// 自动扫描项目中使用的图标autoInstall:true,},});// 在代码中使用图标importIconSearchfrom'~icons/carbon/search';functionSearchButton(){return<IconSearchstyle={{fontSize:'20px'}}/>;}

预设包含以下 TypeScript 类型定义：

• CSS Modules（.module.css,.module.scss 等）
• SVG React 组件（*.svg?react）
• React 和 React Router 类型
• Iconify 图标类型（~icons/*）

• 自动处理 JSX/TSX
• 开发环境 React Fast Refresh
• SVG 组件支持
• React Compiler 支持

• 使用@vitejs/plugin-react 实现最佳性能
• 内置 Fast Refresh 支持
• SVG 组件支持

• 使用@rsbuild/plugin-react 实现现代 React 支持
• 使用@rsbuild/plugin-svgr 实现 SVG 支持
• 优化的构建性能

exportdefaultfunctionCounter(){const[count,setCount]=useState(0);return(<div><p>计数:{count}</p><buttononClick={()=>setCount(count+1)}>        增加</button></div>);}

functionApp(){return(<div><nav><Linkto="/">首页</Link><Linkto="/about">关于</Link></nav><Routes><Routepath="/"element={<Home/>}/><Routepath="/about"element={<About/>}/></Routes></div>);}

exportdefaultdefineConfig({react:{forget:{ReactCompilerConfig:{// 可选配置},},},});

启用后，React Compiler 会自动优化你的组件，无需手动使用useMemo 和useCallback。

importIconLogofrom'~icons/mdi/react';importIconSearchfrom'~icons/carbon/search';importIconUserfrom'~icons/heroicons/user-solid';functionToolbar(){return(<div><IconLogo/><IconSearch/><IconUser/></div>);}

• React: 19.x
• React Router: 7.x
• TypeScript: 5.x
• Node.js: >=18

• react ^19.2.0
• react-dom ^19.2.0
• @winner-fed/renderer-react - React 渲染器
• unplugin-auto-import - 自动导入支持

• @babel/preset-react - React 预设
• @babel/plugin-transform-react-jsx - JSX 转换
• babel-plugin-react-compiler - React Compiler

• @vitejs/plugin-react - Vite React 插件
• @rsbuild/plugin-react - Rsbuild React 插件
• @rsbuild/plugin-svgr - Rsbuild SVGR 插件
• @pmmmwh/react-refresh-webpack-plugin - Webpack Fast Refresh

• @iconify/utils - Iconify 工具
• @svgr/core - SVGR 核心
• @svgr/plugin-jsx - SVGR JSX 插件
• @svgr/plugin-svgo - SVGR SVGO 插件

MIT