Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitc5325b6

Browse files
committed
Update project to support React 19.x with new preset, enhance configuration files, and improve documentation. Added TypeScript definitions, updated dependencies, and modified linter rules. Changed package name to @winner-fed/preset-react and updated license information.
1 parent4589744 commitc5325b6

31 files changed

+10123
-176
lines changed

‎.github/workflows/release.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,4 +127,4 @@ jobs:
127127
echo "🎉 发布成功!"
128128
echo "📦 版本: ${{ steps.get_version.outputs.version }}"
129129
echo "🏷️ 标签: ${{ steps.get_version.outputs.tag_name }}"
130-
echo "📝 npm: https://www.npmjs.com/package/winjs-plugin-template"
130+
echo "📝 npm: https://www.npmjs.com/@winner-fed/preset-react"

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c)2025 winjs-dev
3+
Copyright (c)2024 Winjsdev Contrib
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md‎

Lines changed: 278 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,278 @@
1-
#winjs-preset-react
1+
#@winner-fed/preset-react
2+
3+
WinJS 框架的 React 预设，提供 React 19.x 的完整支持和现代工具链。
4+
5+
##特性
6+
7+
- ✅**React 19.x 支持** - 支持 React 19 的最新特性和并发渲染
8+
- 🚀**现代 JSX 转换** - 默认使用自动 JSX runtime（React 17+）
9+
- ⚡**Fast Refresh** - 开发环境下的 React 组件热重载
10+
- 🛠️**多打包器支持** - 支持 Webpack、Vite 和 Rsbuild
11+
- 📦**自动导入** - React hooks 和 React Router 自动导入
12+
- 🎨**TypeScript 支持** - 完整的 JSX/TSX TypeScript 支持
13+
- 🔗**React Router v7** - 最新的路由管理和数据加载能力
14+
- 🎯**SVG 组件化** - 将 SVG 文件作为 React 组件导入
15+
- 🧠**React Compiler** - 可选的 React Compiler（前称 React Forget）支持
16+
- 🎨**图标按需加载** - 基于 Iconify 的图标按需加载方案
17+
18+
##安装
19+
20+
```bash
21+
npm install @winner-fed/preset-react
22+
```
23+
24+
##基础用法
25+
26+
在`win.config.ts` 中添加：
27+
28+
```ts
29+
import {defineConfig }from'win';
30+
31+
exportdefaultdefineConfig({
32+
presets: ['@winner-fed/preset-react'],
33+
react: {
34+
fastRefresh:true,// 启用 Fast Refresh
35+
},
36+
});
37+
```
38+
39+
##配置选项
40+
41+
###`react.fastRefresh`
42+
43+
-**类型**:`boolean`
44+
-**默认值**:`true`
45+
-**说明**: 是否启用 Fast Refresh。开发环境下推荐启用，可实现组件级热更新。
46+
47+
###`react.forget`
48+
49+
启用 React Compiler（前称 React Forget），用于自动优化 React 组件性能。
50+
51+
-**类型**:`{ ReactCompilerConfig?: object }`
52+
-**默认值**:`undefined`
53+
-**说明**: React Compiler 配置。仅在 React 19+ 版本可用。
54+
55+
**使用示例：**
56+
57+
```ts
58+
exportdefaultdefineConfig({
59+
react: {
60+
forget: {
61+
ReactCompilerConfig: {
62+
// React Compiler 自定义配置
63+
},
64+
},
65+
},
66+
});
67+
```
68+
69+
**限制条件：**
70+
71+
- 仅支持 React 19 及以上版本
72+
- 不能与`mfsu` 同时使用
73+
74+
##自动导入
75+
76+
预设会自动导入常用的 React hooks 和 React Router 组件，无需手动 import：
77+
78+
###React Hooks
79+
80+
```tsx
81+
// 无需手动导入这些 API
82+
const [state, setState]=useState(0);
83+
const ref=useRef();
84+
const navigate=useNavigate();
85+
```
86+
87+
###可用的自动导入
88+
89+
**React：**
90+
91+
-`useState`,`useEffect`,`useCallback`,`useMemo`
92+
-`useRef`,`useContext`,`useReducer`
93+
-`useLayoutEffect`,`useImperativeHandle`
94+
-`useDeferredValue`,`useId`,`useTransition`
95+
-`createElement`,`Fragment`,`Suspense`,`lazy`
96+
-`forwardRef`,`memo`,`createContext`
97+
98+
**React Router：**
99+
100+
-`BrowserRouter`,`Routes`,`Route`,`Link`,`NavLink`
101+
-`useNavigate`,`useLocation`,`useParams`
102+
-`useSearchParams`,`useRoutes`,`Outlet`
103+
104+
##SVG 支持
105+
106+
将 SVG 文件作为 React 组件导入：
107+
108+
```tsx
109+
importLogofrom'./logo.svg?react';
110+
111+
function Header() {
112+
return <Logowidth={100}height={50} />;
113+
}
114+
```
115+
116+
##图标按需加载
117+
118+
基于 Iconify 的图标按需加载方案，支持数万个图标库：
119+
120+
```tsx
121+
// 配置图标按需加载
122+
exportdefaultdefineConfig({
123+
icons: {
124+
// 自动扫描项目中使用的图标
125+
autoInstall:true,
126+
},
127+
});
128+
129+
// 在代码中使用图标
130+
importIconSearchfrom'~icons/carbon/search';
131+
132+
function SearchButton() {
133+
return <IconSearchstyle={{ fontSize:'20px' }} />;
134+
}
135+
```
136+
137+
##TypeScript 支持
138+
139+
预设包含以下 TypeScript 类型定义：
140+
141+
- CSS Modules（`.module.css`,`.module.scss` 等）
142+
- SVG React 组件（`*.svg?react`）
143+
- React 和 React Router 类型
144+
- Iconify 图标类型（`~icons/*`）
145+
146+
##打包器集成
147+
148+
###Webpack
149+
150+
- 自动处理 JSX/TSX
151+
- 开发环境 React Fast Refresh
152+
- SVG 组件支持
153+
- React Compiler 支持
154+
155+
###Vite
156+
157+
- 使用`@vitejs/plugin-react` 实现最佳性能
158+
- 内置 Fast Refresh 支持
159+
- SVG 组件支持
160+
161+
###Rsbuild
162+
163+
- 使用`@rsbuild/plugin-react` 实现现代 React 支持
164+
- 使用`@rsbuild/plugin-svgr` 实现 SVG 支持
165+
- 优化的构建性能
166+
167+
##使用示例
168+
169+
###基础组件
170+
171+
```tsx
172+
exportdefaultfunction Counter() {
173+
const [count, setCount]=useState(0);
174+
175+
return (
176+
<div>
177+
<p>计数:{count}</p>
178+
<buttononClick={()=>setCount(count+1)}>
179+
增加
180+
</button>
181+
</div>
182+
);
183+
}
184+
```
185+
186+
###使用 React Router
187+
188+
```tsx
189+
function App() {
190+
return (
191+
<div>
192+
<nav>
193+
<Linkto="/">首页</Link>
194+
<Linkto="/about">关于</Link>
195+
</nav>
196+
197+
<Routes>
198+
<Routepath="/"element={<Home />} />
199+
<Routepath="/about"element={<About />} />
200+
</Routes>
201+
</div>
202+
);
203+
}
204+
```
205+
206+
###使用 React Compiler
207+
208+
```tsx
209+
exportdefaultdefineConfig({
210+
react: {
211+
forget: {
212+
ReactCompilerConfig: {
213+
// 可选配置
214+
},
215+
},
216+
},
217+
});
218+
```
219+
220+
启用后，React Compiler 会自动优化你的组件，无需手动使用`useMemo` 和`useCallback`。
221+
222+
###使用图标
223+
224+
```tsx
225+
importIconLogofrom'~icons/mdi/react';
226+
importIconSearchfrom'~icons/carbon/search';
227+
importIconUserfrom'~icons/heroicons/user-solid';
228+
229+
function Toolbar() {
230+
return (
231+
<div>
232+
<IconLogo />
233+
<IconSearch />
234+
<IconUser />
235+
</div>
236+
);
237+
}
238+
```
239+
240+
##版本兼容性
241+
242+
-**React**: 19.x
243+
-**React Router**: 7.x
244+
-**TypeScript**: 5.x
245+
-**Node.js**: >=18
246+
247+
##依赖包
248+
249+
###核心依赖
250+
251+
-`react` ^19.2.0
252+
-`react-dom` ^19.2.0
253+
-`@winner-fed/renderer-react` - React 渲染器
254+
-`unplugin-auto-import` - 自动导入支持
255+
256+
###Babel 相关
257+
258+
-`@babel/preset-react` - React 预设
259+
-`@babel/plugin-transform-react-jsx` - JSX 转换
260+
-`babel-plugin-react-compiler` - React Compiler
261+
262+
###打包器插件
263+
264+
-`@vitejs/plugin-react` - Vite React 插件
265+
-`@rsbuild/plugin-react` - Rsbuild React 插件
266+
-`@rsbuild/plugin-svgr` - Rsbuild SVGR 插件
267+
-`@pmmmwh/react-refresh-webpack-plugin` - Webpack Fast Refresh
268+
269+
###图标相关
270+
271+
-`@iconify/utils` - Iconify 工具
272+
-`@svgr/core` - SVGR 核心
273+
-`@svgr/plugin-jsx` - SVGR JSX 插件
274+
-`@svgr/plugin-svgo` - SVGR SVGO 插件
275+
276+
##许可证
277+
278+
MIT

‎biome.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,10 @@
3232
"linter": {
3333
"enabled":true,
3434
"rules": {
35-
"recommended":true
35+
"recommended":true,
36+
"suspicious": {
37+
"noExplicitAny":"off"
38+
}
3639
}
3740
}
3841
}

‎package.json‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
2-
"name":"winjs-plugin-template",
2+
"name":"@winner-fed/preset-react",
3+
"description":"React support for WinJS framework",
34
"keywords": [
45
"winjs",
56
"plugin",
@@ -14,22 +15,14 @@
1415
"version":"0.0.0",
1516
"repository": {
1617
"type":"git",
17-
"url":"git+https://github.com/winjs-dev/winjs-plugin-template.git"
18+
"url":"git+https://github.com/winjs-dev/winjs-preset-react.git"
1819
},
1920
"license":"MIT",
20-
"type":"module",
21-
"exports": {
22-
".": {
23-
"types":"./dist/index.d.ts",
24-
"import":"./dist/index.js",
25-
"require":"./dist/index.cjs"
26-
}
27-
},
28-
"main":"./dist/index.cjs",
29-
"module":"./dist/index.js",
21+
"main":"./dist/index.js",
3022
"types":"./dist/index.d.ts",
3123
"files": [
32-
"dist"
24+
"dist",
25+
"templates"
3326
],
3427
"scripts": {
3528
"build":"rslib build",
@@ -49,11 +42,35 @@
4942
"@rsbuild/core":"^1.4.2",
5043
"@rslib/core":"^0.10.4",
5144
"@types/node":"^22.15.34",
45+
"@types/react":"19.2.2",
46+
"@types/react-dom":"19.2.2",
5247
"@winner-fed/winjs":"*",
5348
"bumpp":"10.2.3",
5449
"simple-git-hooks":"^2.13.0",
5550
"typescript":"^5.8.3"
5651
},
52+
"dependencies": {
53+
"@iconify/utils":"2.1.1",
54+
"@svgr/core":"6.5.1",
55+
"@svgr/plugin-jsx":"6.5.1",
56+
"@svgr/plugin-svgo":"6.5.1",
57+
"@umijs/history":"5.3.1",
58+
"@winner-fed/core":"*",
59+
"@winner-fed/bundler-utils":"*",
60+
"@winner-fed/bundler-webpack":"*",
61+
"@winner-fed/bundler-vite":"*",
62+
"@babel/plugin-transform-react-jsx":"7.27.1",
63+
"@babel/preset-react":"7.27.1",
64+
"@rsbuild/plugin-react":"1.4.1",
65+
"@rsbuild/plugin-svgr":"1.2.2",
66+
"@vitejs/plugin-react":"^4.3.4",
67+
"@winner-fed/renderer-react":"*",
68+
"babel-plugin-react-compiler":"19.1.0-rc.3",
69+
"@pmmmwh/react-refresh-webpack-plugin":"0.6.1",
70+
"react":"^19.2.0",
71+
"react-dom":"^19.2.0",
72+
"unplugin-auto-import":"19.1.1"
73+
},
5774
"peerDevDependencies": {
5875
"@winner-fed/winjs":"*"
5976
},

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp