@rsbuild/plugin-react 1.0.7 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -11
- package/dist/index.cjs +127 -232
- package/dist/index.js +43 -76
- package/package.json +8 -7
package/README.md
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
<a href="https://rsbuild.dev" target="blank"><img src="https://github.com/web-infra-dev/rsbuild/assets/7237365/84abc13e-b620-468f-a90b-dbf28e7e9427" alt="Rsbuild Logo" /></a>
|
|
3
|
-
</p>
|
|
1
|
+
# @rsbuild/plugin-react
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
An Rsbuild plugin to provide support for React, integrating features such as JSX compilation and React Refresh.
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
<p>
|
|
6
|
+
<a href="https://npmjs.com/package/@rsbuild/plugin-react">
|
|
7
|
+
<img src="https://img.shields.io/npm/v/@rsbuild/plugin-react?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
|
|
8
|
+
</a>
|
|
9
|
+
<img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
|
|
10
|
+
<a href="https://npmcharts.com/compare/@rsbuild/plugin-react?minimal=true"><img src="https://img.shields.io/npm/dm/@rsbuild/plugin-react.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
|
|
11
|
+
</p>
|
|
8
12
|
|
|
9
13
|
## Documentation
|
|
10
14
|
|
|
11
|
-
https://rsbuild.dev/
|
|
12
|
-
|
|
13
|
-
## Contributing
|
|
14
|
-
|
|
15
|
-
Please read the [Contributing Guide](https://github.com/web-infra-dev/rsbuild/blob/main/CONTRIBUTING.md).
|
|
15
|
+
See [Documentation](https://rsbuild.dev/plugins/list/plugin-react).
|
|
16
16
|
|
|
17
17
|
## License
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
[MIT](https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE).
|
package/dist/index.cjs
CHANGED
|
@@ -1,254 +1,149 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
let __rslib_import_meta_url__ = 'undefined' == typeof document ? new (require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
|
|
2
3
|
var __webpack_modules__ = {
|
|
3
|
-
"@rspack/plugin-react-refresh": function(
|
|
4
|
-
|
|
4
|
+
"@rspack/plugin-react-refresh": function(module) {
|
|
5
|
+
module.exports = import("@rspack/plugin-react-refresh");
|
|
5
6
|
}
|
|
6
|
-
};
|
|
7
|
-
/************************************************************************/ // The module cache
|
|
8
|
-
var __webpack_module_cache__ = {};
|
|
9
|
-
// The require function
|
|
7
|
+
}, __webpack_module_cache__ = {};
|
|
10
8
|
function __webpack_require__(moduleId) {
|
|
11
|
-
// Check if module is in cache
|
|
12
9
|
var cachedModule = __webpack_module_cache__[moduleId];
|
|
13
10
|
if (void 0 !== cachedModule) return cachedModule.exports;
|
|
14
|
-
|
|
15
|
-
var module1 = __webpack_module_cache__[moduleId] = {
|
|
11
|
+
var module = __webpack_module_cache__[moduleId] = {
|
|
16
12
|
exports: {}
|
|
17
13
|
};
|
|
18
|
-
|
|
19
|
-
__webpack_modules__[moduleId](module1, module1.exports, __webpack_require__);
|
|
20
|
-
// Return the exports of the module
|
|
21
|
-
return module1.exports;
|
|
14
|
+
return __webpack_modules__[moduleId](module, module.exports, __webpack_require__), module.exports;
|
|
22
15
|
}
|
|
23
|
-
|
|
24
|
-
(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
return module1['default'];
|
|
29
|
-
} : function() {
|
|
30
|
-
return module1;
|
|
31
|
-
};
|
|
32
|
-
__webpack_require__.d(getter, {
|
|
33
|
-
a: getter
|
|
34
|
-
});
|
|
35
|
-
return getter;
|
|
36
|
-
};
|
|
37
|
-
})();
|
|
38
|
-
// webpack/runtime/create_fake_namespace_object
|
|
39
|
-
(()=>{
|
|
40
|
-
var getProto = Object.getPrototypeOf ? function(obj) {
|
|
41
|
-
return Object.getPrototypeOf(obj);
|
|
42
|
-
} : function(obj) {
|
|
43
|
-
return obj.__proto__;
|
|
44
|
-
};
|
|
45
|
-
var leafPrototypes;
|
|
46
|
-
// create a fake namespace object
|
|
47
|
-
// mode & 1: value is a module id, require it
|
|
48
|
-
// mode & 2: merge all properties of value into the ns
|
|
49
|
-
// mode & 4: return value when already ns object
|
|
50
|
-
// mode & 16: return value when it's Promise-like
|
|
51
|
-
// mode & 8|1: behave like require
|
|
52
|
-
__webpack_require__.t = function(value, mode) {
|
|
53
|
-
if (1 & mode) value = this(value);
|
|
54
|
-
if (8 & mode) return value;
|
|
55
|
-
if ('object' == typeof value && value) {
|
|
56
|
-
if (4 & mode && value.__esModule) return value;
|
|
57
|
-
if (16 & mode && 'function' == typeof value.then) return value;
|
|
58
|
-
}
|
|
59
|
-
var ns = Object.create(null);
|
|
60
|
-
__webpack_require__.r(ns);
|
|
61
|
-
var def = {};
|
|
62
|
-
leafPrototypes = leafPrototypes || [
|
|
63
|
-
null,
|
|
64
|
-
getProto({}),
|
|
65
|
-
getProto([]),
|
|
66
|
-
getProto(getProto)
|
|
67
|
-
];
|
|
68
|
-
for(var current = 2 & mode && value; 'object' == typeof current && !~leafPrototypes.indexOf(current); current = getProto(current))Object.getOwnPropertyNames(current).forEach(function(key) {
|
|
69
|
-
def[key] = function() {
|
|
70
|
-
return value[key];
|
|
71
|
-
};
|
|
72
|
-
});
|
|
73
|
-
def['default'] = function() {
|
|
74
|
-
return value;
|
|
75
|
-
};
|
|
76
|
-
__webpack_require__.d(ns, def);
|
|
77
|
-
return ns;
|
|
78
|
-
};
|
|
79
|
-
})();
|
|
80
|
-
// webpack/runtime/define_property_getters
|
|
81
|
-
(()=>{
|
|
82
|
-
__webpack_require__.d = function(exports1, definition) {
|
|
83
|
-
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
84
|
-
enumerable: true,
|
|
85
|
-
get: definition[key]
|
|
86
|
-
});
|
|
16
|
+
__webpack_require__.n = function(module) {
|
|
17
|
+
var getter = module && module.__esModule ? function() {
|
|
18
|
+
return module.default;
|
|
19
|
+
} : function() {
|
|
20
|
+
return module;
|
|
87
21
|
};
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
22
|
+
return __webpack_require__.d(getter, {
|
|
23
|
+
a: getter
|
|
24
|
+
}), getter;
|
|
25
|
+
}, __webpack_require__.d = function(exports1, definition) {
|
|
26
|
+
for(var key in definition)__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key) && Object.defineProperty(exports1, key, {
|
|
27
|
+
enumerable: !0,
|
|
28
|
+
get: definition[key]
|
|
29
|
+
});
|
|
30
|
+
}, __webpack_require__.o = function(obj, prop) {
|
|
31
|
+
return Object.prototype.hasOwnProperty.call(obj, prop);
|
|
32
|
+
}, __webpack_require__.r = function(exports1) {
|
|
33
|
+
'undefined' != typeof Symbol && Symbol.toStringTag && Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
34
|
+
value: 'Module'
|
|
35
|
+
}), Object.defineProperty(exports1, '__esModule', {
|
|
36
|
+
value: !0
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
var __webpack_exports__ = {};
|
|
96
40
|
(()=>{
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig })=>{
|
|
124
|
-
const isDev = 'development' === config.mode;
|
|
125
|
-
const usingHMR = isDev && config.dev.hmr && 'web' === config.output.target;
|
|
126
|
-
const reactOptions = {
|
|
127
|
-
development: isDev,
|
|
128
|
-
refresh: usingHMR && options.fastRefresh,
|
|
129
|
-
runtime: 'automatic',
|
|
130
|
-
...options.swcReactOptions
|
|
131
|
-
};
|
|
132
|
-
const extraConfig = {
|
|
133
|
-
tools: {
|
|
134
|
-
swc: {
|
|
135
|
-
jsc: {
|
|
136
|
-
parser: {
|
|
137
|
-
syntax: 'typescript',
|
|
138
|
-
// enable supports for JSX/TSX compilation
|
|
139
|
-
tsx: true
|
|
140
|
-
},
|
|
141
|
-
transform: {
|
|
142
|
-
react: reactOptions
|
|
41
|
+
__webpack_require__.r(__webpack_exports__), __webpack_require__.d(__webpack_exports__, {
|
|
42
|
+
pluginReact: ()=>pluginReact,
|
|
43
|
+
PLUGIN_REACT_NAME: ()=>PLUGIN_REACT_NAME
|
|
44
|
+
});
|
|
45
|
+
let external_node_module_namespaceObject = require("node:module"), external_node_path_namespaceObject = require("node:path");
|
|
46
|
+
var external_node_path_default = __webpack_require__.n(external_node_path_namespaceObject);
|
|
47
|
+
let react_require = (0, external_node_module_namespaceObject.createRequire)(__rslib_import_meta_url__), applyBasicReactSupport = (api, options)=>{
|
|
48
|
+
let REACT_REFRESH_PATH = options.fastRefresh ? react_require.resolve('react-refresh') : '';
|
|
49
|
+
api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig })=>{
|
|
50
|
+
let isDev = 'development' === config.mode, usingHMR = isDev && config.dev.hmr && 'web' === config.output.target;
|
|
51
|
+
return mergeEnvironmentConfig({
|
|
52
|
+
tools: {
|
|
53
|
+
swc: {
|
|
54
|
+
jsc: {
|
|
55
|
+
parser: {
|
|
56
|
+
syntax: "typescript",
|
|
57
|
+
tsx: !0
|
|
58
|
+
},
|
|
59
|
+
transform: {
|
|
60
|
+
react: {
|
|
61
|
+
development: isDev,
|
|
62
|
+
refresh: usingHMR && options.fastRefresh,
|
|
63
|
+
runtime: 'automatic',
|
|
64
|
+
...options.swcReactOptions
|
|
65
|
+
}
|
|
66
|
+
}
|
|
143
67
|
}
|
|
144
68
|
}
|
|
145
69
|
}
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
output: {
|
|
176
|
-
minify: {
|
|
177
|
-
jsOptions: {
|
|
178
|
-
minimizerOptions: {
|
|
179
|
-
// Need to keep classnames and function names like Components for debugging purposes.
|
|
180
|
-
mangle: {
|
|
181
|
-
keep_classnames: true,
|
|
182
|
-
keep_fnames: true
|
|
70
|
+
}, config);
|
|
71
|
+
}), api.modifyBundlerChain(async (chain, { CHAIN_ID, environment, isDev, target })=>{
|
|
72
|
+
let { config } = environment;
|
|
73
|
+
if (!(isDev && config.dev.hmr && 'web' === target) || !options.fastRefresh) return;
|
|
74
|
+
chain.resolve.alias.set('react-refresh', external_node_path_default().dirname(REACT_REFRESH_PATH));
|
|
75
|
+
let { default: ReactRefreshRspackPlugin } = await Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "@rspack/plugin-react-refresh"));
|
|
76
|
+
chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
|
|
77
|
+
{
|
|
78
|
+
include: [
|
|
79
|
+
/\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/
|
|
80
|
+
],
|
|
81
|
+
exclude: [
|
|
82
|
+
/[\\/]node_modules[\\/]/
|
|
83
|
+
],
|
|
84
|
+
...options.reactRefreshOptions
|
|
85
|
+
}
|
|
86
|
+
]);
|
|
87
|
+
});
|
|
88
|
+
}, applyReactProfiler = (api)=>{
|
|
89
|
+
api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig })=>{
|
|
90
|
+
if ('production' === config.mode) return mergeEnvironmentConfig(config, {
|
|
91
|
+
output: {
|
|
92
|
+
minify: {
|
|
93
|
+
jsOptions: {
|
|
94
|
+
minimizerOptions: {
|
|
95
|
+
mangle: {
|
|
96
|
+
keep_classnames: !0,
|
|
97
|
+
keep_fnames: !0
|
|
98
|
+
}
|
|
183
99
|
}
|
|
184
100
|
}
|
|
185
101
|
}
|
|
186
102
|
}
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
});
|
|
191
|
-
api.modifyBundlerChain((chain, { isProd })=>{
|
|
192
|
-
if (!isProd) return;
|
|
193
|
-
// Replace react-dom with the profiling version.
|
|
194
|
-
// Reference: https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977
|
|
195
|
-
chain.resolve.alias.set('react-dom$', 'react-dom/profiling');
|
|
196
|
-
chain.resolve.alias.set('scheduler/tracing', 'scheduler/tracing-profiling');
|
|
197
|
-
});
|
|
198
|
-
};
|
|
199
|
-
const isPlainObject = (obj)=>null !== obj && 'object' == typeof obj && '[object Object]' === Object.prototype.toString.call(obj);
|
|
200
|
-
const applySplitChunksRule = (api, options = {
|
|
201
|
-
react: true,
|
|
202
|
-
router: true
|
|
203
|
-
})=>{
|
|
204
|
-
api.modifyBundlerChain((chain, { environment, isProd })=>{
|
|
205
|
-
const { config } = environment;
|
|
206
|
-
if ('split-by-experience' !== config.performance.chunkSplit.strategy) return;
|
|
207
|
-
const currentConfig = chain.optimization.splitChunks.values();
|
|
208
|
-
if (!isPlainObject(currentConfig)) return;
|
|
209
|
-
const extraGroups = {};
|
|
210
|
-
if (options.react) extraGroups.react = {
|
|
211
|
-
name: 'lib-react',
|
|
212
|
-
test: isProd ? /node_modules[\\/](?:react|react-dom|scheduler)[\\/]/ : /node_modules[\\/](?:react|react-dom|scheduler|react-refresh|@rspack[\\/]plugin-react-refresh)[\\/]/,
|
|
213
|
-
priority: 0
|
|
214
|
-
};
|
|
215
|
-
if (options.router) extraGroups.router = {
|
|
216
|
-
name: 'lib-router',
|
|
217
|
-
test: /node_modules[\\/](?:react-router|react-router-dom|history|@remix-run[\\/]router)[\\/]/,
|
|
218
|
-
priority: 0
|
|
219
|
-
};
|
|
220
|
-
if (!Object.keys(extraGroups).length) return;
|
|
221
|
-
chain.optimization.splitChunks({
|
|
222
|
-
...currentConfig,
|
|
223
|
-
cacheGroups: {
|
|
224
|
-
// user defined cache groups take precedence
|
|
225
|
-
...extraGroups,
|
|
226
|
-
...currentConfig.cacheGroups
|
|
227
|
-
}
|
|
103
|
+
});
|
|
104
|
+
}), api.modifyBundlerChain((chain, { isProd })=>{
|
|
105
|
+
isProd && (chain.resolve.alias.set('react-dom$', 'react-dom/profiling'), chain.resolve.alias.set('scheduler/tracing', 'scheduler/tracing-profiling'));
|
|
228
106
|
});
|
|
229
|
-
})
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
};
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
107
|
+
}, isPlainObject = (obj)=>null !== obj && 'object' == typeof obj && '[object Object]' === Object.prototype.toString.call(obj), applySplitChunksRule = (api, options = {
|
|
108
|
+
react: !0,
|
|
109
|
+
router: !0
|
|
110
|
+
})=>{
|
|
111
|
+
api.modifyBundlerChain((chain, { environment, isProd })=>{
|
|
112
|
+
let { config } = environment;
|
|
113
|
+
if ('split-by-experience' !== config.performance.chunkSplit.strategy) return;
|
|
114
|
+
let currentConfig = chain.optimization.splitChunks.values();
|
|
115
|
+
if (!isPlainObject(currentConfig)) return;
|
|
116
|
+
let extraGroups = {};
|
|
117
|
+
options.react && (extraGroups.react = {
|
|
118
|
+
name: 'lib-react',
|
|
119
|
+
test: isProd ? /node_modules[\\/](?:react|react-dom|scheduler)[\\/]/ : /node_modules[\\/](?:react|react-dom|scheduler|react-refresh|@rspack[\\/]plugin-react-refresh)[\\/]/,
|
|
120
|
+
priority: 0
|
|
121
|
+
}), options.router && (extraGroups.router = {
|
|
122
|
+
name: 'lib-router',
|
|
123
|
+
test: /node_modules[\\/](?:react-router|react-router-dom|history|@remix-run[\\/]router)[\\/]/,
|
|
124
|
+
priority: 0
|
|
125
|
+
}), Object.keys(extraGroups).length && chain.optimization.splitChunks({
|
|
126
|
+
...currentConfig,
|
|
127
|
+
cacheGroups: {
|
|
128
|
+
...extraGroups,
|
|
129
|
+
...currentConfig.cacheGroups
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
});
|
|
133
|
+
}, PLUGIN_REACT_NAME = 'rsbuild:react', pluginReact = (options = {})=>({
|
|
134
|
+
name: PLUGIN_REACT_NAME,
|
|
135
|
+
setup (api) {
|
|
136
|
+
let finalOptions = {
|
|
137
|
+
fastRefresh: !0,
|
|
138
|
+
enableProfiler: !1,
|
|
139
|
+
...options
|
|
140
|
+
};
|
|
141
|
+
'rspack' === api.context.bundlerType && (applyBasicReactSupport(api, finalOptions), finalOptions.enableProfiler && applyReactProfiler(api)), applySplitChunksRule(api, null == finalOptions ? void 0 : finalOptions.splitChunks);
|
|
246
142
|
}
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
});
|
|
143
|
+
});
|
|
144
|
+
})();
|
|
250
145
|
var __webpack_export_target__ = exports;
|
|
251
|
-
for(var
|
|
252
|
-
|
|
253
|
-
value:
|
|
146
|
+
for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
|
|
147
|
+
__webpack_exports__.__esModule && Object.defineProperty(__webpack_export_target__, '__esModule', {
|
|
148
|
+
value: !0
|
|
254
149
|
});
|
package/dist/index.js
CHANGED
|
@@ -1,133 +1,100 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const REACT_REFRESH_PATH = options.fastRefresh ? react_require.resolve('react-refresh') : '';
|
|
1
|
+
import * as __WEBPACK_EXTERNAL_MODULE_node_module_ab9f2194__ from "node:module";
|
|
2
|
+
import * as __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__ from "node:path";
|
|
3
|
+
let react_require = (0, __WEBPACK_EXTERNAL_MODULE_node_module_ab9f2194__.createRequire)(import.meta.url), applyBasicReactSupport = (api, options)=>{
|
|
4
|
+
let REACT_REFRESH_PATH = options.fastRefresh ? react_require.resolve('react-refresh') : '';
|
|
6
5
|
api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig })=>{
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const reactOptions = {
|
|
10
|
-
development: isDev,
|
|
11
|
-
refresh: usingHMR && options.fastRefresh,
|
|
12
|
-
runtime: 'automatic',
|
|
13
|
-
...options.swcReactOptions
|
|
14
|
-
};
|
|
15
|
-
const extraConfig = {
|
|
6
|
+
let isDev = 'development' === config.mode, usingHMR = isDev && config.dev.hmr && 'web' === config.output.target;
|
|
7
|
+
return mergeEnvironmentConfig({
|
|
16
8
|
tools: {
|
|
17
9
|
swc: {
|
|
18
10
|
jsc: {
|
|
19
11
|
parser: {
|
|
20
|
-
syntax:
|
|
21
|
-
|
|
22
|
-
tsx: true
|
|
12
|
+
syntax: "typescript",
|
|
13
|
+
tsx: !0
|
|
23
14
|
},
|
|
24
15
|
transform: {
|
|
25
|
-
react:
|
|
16
|
+
react: {
|
|
17
|
+
development: isDev,
|
|
18
|
+
refresh: usingHMR && options.fastRefresh,
|
|
19
|
+
runtime: 'automatic',
|
|
20
|
+
...options.swcReactOptions
|
|
21
|
+
}
|
|
26
22
|
}
|
|
27
23
|
}
|
|
28
24
|
}
|
|
29
25
|
}
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
if (!usingHMR || !options.fastRefresh) return;
|
|
37
|
-
chain.resolve.alias.set('react-refresh', __WEBPACK_EXTERNAL_MODULE_node_path__["default"].dirname(REACT_REFRESH_PATH));
|
|
38
|
-
const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
|
|
39
|
-
const SCRIPT_REGEX = /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/;
|
|
40
|
-
const NODE_MODULES_REGEX = /[\\/]node_modules[\\/]/;
|
|
26
|
+
}, config);
|
|
27
|
+
}), api.modifyBundlerChain(async (chain, { CHAIN_ID, environment, isDev, target })=>{
|
|
28
|
+
let { config } = environment;
|
|
29
|
+
if (!(isDev && config.dev.hmr && 'web' === target) || !options.fastRefresh) return;
|
|
30
|
+
chain.resolve.alias.set('react-refresh', __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.default.dirname(REACT_REFRESH_PATH));
|
|
31
|
+
let { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
|
|
41
32
|
chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
|
|
42
33
|
{
|
|
43
34
|
include: [
|
|
44
|
-
|
|
35
|
+
/\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/
|
|
45
36
|
],
|
|
46
37
|
exclude: [
|
|
47
|
-
|
|
38
|
+
/[\\/]node_modules[\\/]/
|
|
48
39
|
],
|
|
49
40
|
...options.reactRefreshOptions
|
|
50
41
|
}
|
|
51
42
|
]);
|
|
52
43
|
});
|
|
53
|
-
}
|
|
54
|
-
const applyReactProfiler = (api)=>{
|
|
44
|
+
}, applyReactProfiler = (api)=>{
|
|
55
45
|
api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig })=>{
|
|
56
|
-
if ('production'
|
|
57
|
-
const enableProfilerConfig = {
|
|
46
|
+
if ('production' === config.mode) return mergeEnvironmentConfig(config, {
|
|
58
47
|
output: {
|
|
59
48
|
minify: {
|
|
60
49
|
jsOptions: {
|
|
61
50
|
minimizerOptions: {
|
|
62
|
-
// Need to keep classnames and function names like Components for debugging purposes.
|
|
63
51
|
mangle: {
|
|
64
|
-
keep_classnames:
|
|
65
|
-
keep_fnames:
|
|
52
|
+
keep_classnames: !0,
|
|
53
|
+
keep_fnames: !0
|
|
66
54
|
}
|
|
67
55
|
}
|
|
68
56
|
}
|
|
69
57
|
}
|
|
70
58
|
}
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
api.modifyBundlerChain((chain, { isProd })=>{
|
|
75
|
-
if (!isProd) return;
|
|
76
|
-
// Replace react-dom with the profiling version.
|
|
77
|
-
// Reference: https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977
|
|
78
|
-
chain.resolve.alias.set('react-dom$', 'react-dom/profiling');
|
|
79
|
-
chain.resolve.alias.set('scheduler/tracing', 'scheduler/tracing-profiling');
|
|
59
|
+
});
|
|
60
|
+
}), api.modifyBundlerChain((chain, { isProd })=>{
|
|
61
|
+
isProd && (chain.resolve.alias.set('react-dom$', 'react-dom/profiling'), chain.resolve.alias.set('scheduler/tracing', 'scheduler/tracing-profiling'));
|
|
80
62
|
});
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
react: true,
|
|
85
|
-
router: true
|
|
63
|
+
}, isPlainObject = (obj)=>null !== obj && 'object' == typeof obj && '[object Object]' === Object.prototype.toString.call(obj), applySplitChunksRule = (api, options = {
|
|
64
|
+
react: !0,
|
|
65
|
+
router: !0
|
|
86
66
|
})=>{
|
|
87
67
|
api.modifyBundlerChain((chain, { environment, isProd })=>{
|
|
88
|
-
|
|
68
|
+
let { config } = environment;
|
|
89
69
|
if ('split-by-experience' !== config.performance.chunkSplit.strategy) return;
|
|
90
|
-
|
|
70
|
+
let currentConfig = chain.optimization.splitChunks.values();
|
|
91
71
|
if (!isPlainObject(currentConfig)) return;
|
|
92
|
-
|
|
93
|
-
|
|
72
|
+
let extraGroups = {};
|
|
73
|
+
options.react && (extraGroups.react = {
|
|
94
74
|
name: 'lib-react',
|
|
95
75
|
test: isProd ? /node_modules[\\/](?:react|react-dom|scheduler)[\\/]/ : /node_modules[\\/](?:react|react-dom|scheduler|react-refresh|@rspack[\\/]plugin-react-refresh)[\\/]/,
|
|
96
76
|
priority: 0
|
|
97
|
-
}
|
|
98
|
-
if (options.router) extraGroups.router = {
|
|
77
|
+
}), options.router && (extraGroups.router = {
|
|
99
78
|
name: 'lib-router',
|
|
100
79
|
test: /node_modules[\\/](?:react-router|react-router-dom|history|@remix-run[\\/]router)[\\/]/,
|
|
101
80
|
priority: 0
|
|
102
|
-
}
|
|
103
|
-
if (!Object.keys(extraGroups).length) return;
|
|
104
|
-
chain.optimization.splitChunks({
|
|
81
|
+
}), Object.keys(extraGroups).length && chain.optimization.splitChunks({
|
|
105
82
|
...currentConfig,
|
|
106
83
|
cacheGroups: {
|
|
107
|
-
// user defined cache groups take precedence
|
|
108
84
|
...extraGroups,
|
|
109
85
|
...currentConfig.cacheGroups
|
|
110
86
|
}
|
|
111
87
|
});
|
|
112
88
|
});
|
|
113
|
-
}
|
|
114
|
-
const PLUGIN_REACT_NAME = 'rsbuild:react';
|
|
115
|
-
const pluginReact = (options = {})=>({
|
|
89
|
+
}, PLUGIN_REACT_NAME = 'rsbuild:react', pluginReact = (options = {})=>({
|
|
116
90
|
name: PLUGIN_REACT_NAME,
|
|
117
91
|
setup (api) {
|
|
118
|
-
|
|
119
|
-
fastRefresh:
|
|
120
|
-
enableProfiler:
|
|
121
|
-
};
|
|
122
|
-
const finalOptions = {
|
|
123
|
-
...defaultOptions,
|
|
92
|
+
let finalOptions = {
|
|
93
|
+
fastRefresh: !0,
|
|
94
|
+
enableProfiler: !1,
|
|
124
95
|
...options
|
|
125
96
|
};
|
|
126
|
-
|
|
127
|
-
applyBasicReactSupport(api, finalOptions);
|
|
128
|
-
if (finalOptions.enableProfiler) applyReactProfiler(api);
|
|
129
|
-
}
|
|
130
|
-
applySplitChunksRule(api, null == finalOptions ? void 0 : finalOptions.splitChunks);
|
|
97
|
+
'rspack' === api.context.bundlerType && (applyBasicReactSupport(api, finalOptions), finalOptions.enableProfiler && applyReactProfiler(api)), applySplitChunksRule(api, null == finalOptions ? void 0 : finalOptions.splitChunks);
|
|
131
98
|
}
|
|
132
99
|
});
|
|
133
100
|
export { PLUGIN_REACT_NAME, pluginReact };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsbuild/plugin-react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "React plugin for Rsbuild",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -22,14 +22,15 @@
|
|
|
22
22
|
"dist"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@rspack/plugin-react-refresh": "~1.0.
|
|
26
|
-
"react-refresh": "^0.
|
|
25
|
+
"@rspack/plugin-react-refresh": "~1.0.1",
|
|
26
|
+
"react-refresh": "^0.16.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"@scripts/test-helper": "1.0.1"
|
|
29
|
+
"@rslib/core": "0.4.1",
|
|
30
|
+
"@types/node": "^22.13.4",
|
|
31
|
+
"typescript": "^5.7.3",
|
|
32
|
+
"@scripts/test-helper": "1.0.1",
|
|
33
|
+
"@rsbuild/core": "1.2.9"
|
|
33
34
|
},
|
|
34
35
|
"peerDependencies": {
|
|
35
36
|
"@rsbuild/core": "1.x"
|