{"id":32512889,"url":"https://github.com/winjs-dev/winjs-preset-react","last_synced_at":"2025-10-27T22:47:32.135Z","repository":{"id":319462927,"uuid":"1078058933","full_name":"winjs-dev/winjs-preset-react","owner":"winjs-dev","description":"WinJS 框架的 React 预设，提供 React 19.x 的完整支持和现代工具链","archived":false,"fork":false,"pushed_at":"2025-10-27T04:40:21.000Z","size":1041,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-27T06:23:01.370Z","etag":null,"topics":["fast-refresh","react","svgr","winjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/winjs-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-17T06:33:39.000Z","updated_at":"2025-10-27T04:40:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"0376ea41-d913-4b15-99f5-2e733d7f7fae","html_url":"https://github.com/winjs-dev/winjs-preset-react","commit_stats":null,"previous_names":["winjs-dev/winjs-preset-react"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/winjs-dev/winjs-preset-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-preset-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-preset-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-preset-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-preset-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/winjs-dev","download_url":"https://codeload.github.com/winjs-dev/winjs-preset-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-preset-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281355369,"owners_count":26486896,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-27T02:00:05.855Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fast-refresh","react","svgr","winjs"],"created_at":"2025-10-27T22:47:26.340Z","updated_at":"2025-10-27T22:47:32.129Z","avatar_url":"https://github.com/winjs-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @winner-fed/preset-react\n\nWinJS 框架的 React 预设，提供 React 19.x 的完整支持和现代工具链。\n\n## 特性\n\n- ✅ **React 19.x 支持** - 支持 React 19 的最新特性和并发渲染\n- 🚀 **现代 JSX 转换** - 默认使用自动 JSX runtime（React 17+）\n- ⚡ **Fast Refresh** - 开发环境下的 React 组件热重载\n- 🛠️ **多打包器支持** - 支持 Webpack、Vite 和 Rsbuild\n- 📦 **自动导入** - React hooks 和 React Router 自动导入\n- 🎨 **TypeScript 支持** - 完整的 JSX/TSX TypeScript 支持\n- 🔗 **React Router v7** - 最新的路由管理和数据加载能力\n- 🎯 **SVG 组件化** - 将 SVG 文件作为 React 组件导入\n- 🧠 **React Compiler** - 可选的 React Compiler（前称 React Forget）支持\n- 🎨 **图标按需加载** - 基于 Iconify 的图标按需加载方案\n\n## 安装\n\n```bash\nnpm install @winner-fed/preset-react\n```\n\n## 基础用法\n\n在 `.winrc.ts` 中添加：\n\n```ts\nimport { defineConfig } from 'win';\n\nexport default defineConfig({\n  presets: ['@winner-fed/preset-react'],\n  react: {\n    fastRefresh: true, // 启用 Fast Refresh\n  },\n});\n```\n\n## 配置选项\n\n### `react.fastRefresh`\n\n- **类型**: `boolean`\n- **默认值**: `true`\n- **说明**: 是否启用 Fast Refresh。开发环境下推荐启用，可实现组件级热更新。\n\n### `react.forget`\n\n启用 React Compiler（前称 React Forget），用于自动优化 React 组件性能。\n\n- **类型**: `{ ReactCompilerConfig?: object }`\n- **默认值**: `undefined`\n- **说明**: React Compiler 配置。仅在 React 19+ 版本可用。\n\n**使用示例：**\n\n```ts\nexport default defineConfig({\n  react: {\n    forget: {\n      ReactCompilerConfig: {\n        // React Compiler 自定义配置\n      },\n    },\n  },\n});\n```\n\n**限制条件：**\n\n- 仅支持 React 19 及以上版本\n- 不能与 `mfsu` 同时使用\n\n## 自动导入\n\n预设会自动导入常用的 React hooks 和 React Router 组件，无需手动 import：\n\n### React Hooks\n\n```tsx\n// 无需手动导入这些 API\nconst [state, setState] = useState(0);\nconst ref = useRef();\nconst navigate = useNavigate();\n```\n\n### 可用的自动导入\n\n**React：**\n\n- `useState`, `useEffect`, `useCallback`, `useMemo`\n- `useRef`, `useContext`, `useReducer`\n- `useLayoutEffect`, `useImperativeHandle`\n- `useDeferredValue`, `useId`, `useTransition`\n- `createElement`, `Fragment`, `Suspense`, `lazy`\n- `forwardRef`, `memo`, `createContext`\n\n**React Router：**\n\n- `BrowserRouter`, `Routes`, `Route`, `Link`, `NavLink`\n- `useNavigate`, `useLocation`, `useParams`\n- `useSearchParams`, `useRoutes`, `Outlet`\n\n## SVG 支持\n\n将 SVG 文件作为 React 组件导入：\n\n```tsx\nimport Logo from './logo.svg?react';\n\nfunction Header() {\n  return \u003cLogo width={100} height={50} /\u003e;\n}\n```\n\n## 图标按需加载\n\n基于 Iconify 的图标按需加载方案，支持数万个图标库：\n\n```tsx\n// 配置图标按需加载\nexport default defineConfig({\n  icons: {\n    // 自动扫描项目中使用的图标\n    autoInstall: true,\n  },\n});\n\n// 在代码中使用图标\nimport IconSearch from '~icons/carbon/search';\n\nfunction SearchButton() {\n  return \u003cIconSearch style={{ fontSize: '20px' }} /\u003e;\n}\n```\n\n## TypeScript 支持\n\n预设包含以下 TypeScript 类型定义：\n\n- CSS Modules（`.module.css`, `.module.scss` 等）\n- SVG React 组件（`*.svg?react`）\n- React 和 React Router 类型\n- Iconify 图标类型（`~icons/*`）\n\n## 打包器集成\n\n### Webpack\n\n- 自动处理 JSX/TSX\n- 开发环境 React Fast Refresh\n- SVG 组件支持\n- React Compiler 支持\n\n### Vite\n\n- 使用 `@vitejs/plugin-react` 实现最佳性能\n- 内置 Fast Refresh 支持\n- SVG 组件支持\n\n### Rsbuild\n\n- 使用 `@rsbuild/plugin-react` 实现现代 React 支持\n- 使用 `@rsbuild/plugin-svgr` 实现 SVG 支持\n- 优化的构建性能\n\n## 使用示例\n\n### 基础组件\n\n```tsx\nexport default function Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003e计数: {count}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003e\n        增加\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### 使用 React Router\n\n```tsx\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cnav\u003e\n        \u003cLink to=\"/\"\u003e首页\u003c/Link\u003e\n        \u003cLink to=\"/about\"\u003e关于\u003c/Link\u003e\n      \u003c/nav\u003e\n      \n      \u003cRoutes\u003e\n        \u003cRoute path=\"/\" element={\u003cHome /\u003e} /\u003e\n        \u003cRoute path=\"/about\" element={\u003cAbout /\u003e} /\u003e\n      \u003c/Routes\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### 使用 React Compiler\n\n```tsx\nexport default defineConfig({\n  react: {\n    forget: {\n      ReactCompilerConfig: {\n        // 可选配置\n      },\n    },\n  },\n});\n```\n\n启用后，React Compiler 会自动优化你的组件，无需手动使用 `useMemo` 和 `useCallback`。\n\n### 使用图标\n\n```tsx\nimport IconLogo from '~icons/mdi/react';\nimport IconSearch from '~icons/carbon/search';\nimport IconUser from '~icons/heroicons/user-solid';\n\nfunction Toolbar() {\n  return (\n    \u003cdiv\u003e\n      \u003cIconLogo /\u003e\n      \u003cIconSearch /\u003e\n      \u003cIconUser /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## 版本兼容性\n\n- **React**: 19.x\n- **React Router**: 7.x\n- **TypeScript**: 5.x\n- **Node.js**: \u003e=18\n\n## 依赖包\n\n### 核心依赖\n\n- `react` ^19.2.0\n- `react-dom` ^19.2.0\n- `@winner-fed/renderer-react` - React 渲染器\n- `unplugin-auto-import` - 自动导入支持\n\n### Babel 相关\n\n- `@babel/preset-react` - React 预设\n- `@babel/plugin-transform-react-jsx` - JSX 转换\n- `babel-plugin-react-compiler` - React Compiler\n\n### 打包器插件\n\n- `@vitejs/plugin-react` - Vite React 插件\n- `@rsbuild/plugin-react` - Rsbuild React 插件\n- `@rsbuild/plugin-svgr` - Rsbuild SVGR 插件\n- `@pmmmwh/react-refresh-webpack-plugin` - Webpack Fast Refresh\n\n### 图标相关\n\n- `@iconify/utils` - Iconify 工具\n- `@svgr/core` - SVGR 核心\n- `@svgr/plugin-jsx` - SVGR JSX 插件\n- `@svgr/plugin-svgo` - SVGR SVGO 插件\n\n## 许可证\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-preset-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwinjs-dev%2Fwinjs-preset-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-preset-react/lists"}