@rsbuild/plugin-react 1.0.2 → 1.0.4
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/dist/index.cjs +242 -174
- package/dist/index.js +125 -155
- package/{dist-types → dist}/react.d.ts +1 -1
- package/{dist-types → dist}/splitChunks.d.ts +1 -1
- package/package.json +9 -10
- package/dist-types/package.json +0 -1
- /package/{dist-types → dist}/index.d.ts +0 -0
package/dist/index.cjs
CHANGED
|
@@ -1,185 +1,253 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
2
|
+
var __webpack_modules__ = {
|
|
3
|
+
"@rspack/plugin-react-refresh": function(module1) {
|
|
4
|
+
module1.exports = require("@rspack/plugin-react-refresh");
|
|
5
|
+
}
|
|
19
6
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
)
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
// src/index.ts
|
|
31
|
-
var src_exports = {};
|
|
32
|
-
__export(src_exports, {
|
|
33
|
-
PLUGIN_REACT_NAME: () => PLUGIN_REACT_NAME,
|
|
34
|
-
pluginReact: () => pluginReact
|
|
35
|
-
});
|
|
36
|
-
module.exports = __toCommonJS(src_exports);
|
|
37
|
-
|
|
38
|
-
// src/react.ts
|
|
39
|
-
var import_node_path = __toESM(require("path"));
|
|
40
|
-
var applyBasicReactSupport = (api, options) => {
|
|
41
|
-
const REACT_REFRESH_PATH = require.resolve("react-refresh");
|
|
42
|
-
api.modifyEnvironmentConfig((userConfig, { mergeEnvironmentConfig }) => {
|
|
43
|
-
const isDev = userConfig.mode === "development";
|
|
44
|
-
const reactOptions = {
|
|
45
|
-
development: isDev,
|
|
46
|
-
refresh: isDev && userConfig.dev.hmr && userConfig.output.target === "web",
|
|
47
|
-
runtime: "automatic",
|
|
48
|
-
...options.swcReactOptions
|
|
7
|
+
/************************************************************************/ // The module cache
|
|
8
|
+
var __webpack_module_cache__ = {};
|
|
9
|
+
// The require function
|
|
10
|
+
function __webpack_require__(moduleId) {
|
|
11
|
+
// Check if module is in cache
|
|
12
|
+
var cachedModule = __webpack_module_cache__[moduleId];
|
|
13
|
+
if (void 0 !== cachedModule) return cachedModule.exports;
|
|
14
|
+
// Create a new module (and put it into the cache)
|
|
15
|
+
var module1 = __webpack_module_cache__[moduleId] = {
|
|
16
|
+
exports: {}
|
|
49
17
|
};
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}
|
|
64
|
-
|
|
18
|
+
// Execute the module function
|
|
19
|
+
__webpack_modules__[moduleId](module1, module1.exports, __webpack_require__);
|
|
20
|
+
// Return the exports of the module
|
|
21
|
+
return module1.exports;
|
|
22
|
+
}
|
|
23
|
+
/************************************************************************/ // webpack/runtime/compat_get_default_export
|
|
24
|
+
(()=>{
|
|
25
|
+
// getDefaultExport function for compatibility with non-harmony modules
|
|
26
|
+
__webpack_require__.n = function(module1) {
|
|
27
|
+
var getter = module1 && module1.__esModule ? function() {
|
|
28
|
+
return module1['default'];
|
|
29
|
+
} : function() {
|
|
30
|
+
return module1;
|
|
31
|
+
};
|
|
32
|
+
__webpack_require__.d(getter, {
|
|
33
|
+
a: getter
|
|
34
|
+
});
|
|
35
|
+
return getter;
|
|
65
36
|
};
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
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;
|
|
85
58
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
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
|
+
});
|
|
87
|
+
};
|
|
88
|
+
})();
|
|
89
|
+
// webpack/runtime/has_own_property
|
|
90
|
+
(()=>{
|
|
91
|
+
__webpack_require__.o = function(obj, prop) {
|
|
92
|
+
return Object.prototype.hasOwnProperty.call(obj, prop);
|
|
93
|
+
};
|
|
94
|
+
})();
|
|
95
|
+
// webpack/runtime/make_namespace_object
|
|
96
|
+
(()=>{
|
|
97
|
+
// define __esModule on exports
|
|
98
|
+
__webpack_require__.r = function(exports1) {
|
|
99
|
+
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
100
|
+
value: 'Module'
|
|
101
|
+
});
|
|
102
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
103
|
+
value: true
|
|
104
|
+
});
|
|
105
|
+
};
|
|
106
|
+
})();
|
|
107
|
+
/************************************************************************/ var __webpack_exports__ = {};
|
|
108
|
+
// ESM COMPAT FLAG
|
|
109
|
+
__webpack_require__.r(__webpack_exports__);
|
|
110
|
+
// EXPORTS
|
|
111
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
112
|
+
PLUGIN_REACT_NAME: ()=>/* binding */ PLUGIN_REACT_NAME,
|
|
113
|
+
pluginReact: ()=>/* binding */ pluginReact
|
|
114
|
+
});
|
|
115
|
+
const external_node_module_namespaceObject = require("node:module");
|
|
116
|
+
const external_node_path_namespaceObject = require("node:path");
|
|
117
|
+
var external_node_path_default = /*#__PURE__*/ __webpack_require__.n(external_node_path_namespaceObject);
|
|
118
|
+
const react_require = (0, external_node_module_namespaceObject.createRequire)(/*#__PURE__*/ function() {
|
|
119
|
+
return 'undefined' == typeof document ? new (module.require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
|
|
120
|
+
}());
|
|
121
|
+
const applyBasicReactSupport = (api, options)=>{
|
|
122
|
+
const REACT_REFRESH_PATH = react_require.resolve('react-refresh');
|
|
123
|
+
api.modifyEnvironmentConfig((userConfig, param)=>{
|
|
124
|
+
let { mergeEnvironmentConfig } = param;
|
|
125
|
+
const isDev = 'development' === userConfig.mode;
|
|
126
|
+
const reactOptions = {
|
|
127
|
+
development: isDev,
|
|
128
|
+
refresh: isDev && userConfig.dev.hmr && 'web' === userConfig.output.target,
|
|
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
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
return mergeEnvironmentConfig(extraConfig, userConfig);
|
|
149
|
+
});
|
|
150
|
+
api.modifyBundlerChain(async (chain, param)=>{
|
|
151
|
+
let { CHAIN_ID, environment, isDev, target } = param;
|
|
152
|
+
const { config } = environment;
|
|
153
|
+
const usingHMR = isDev && config.dev.hmr && 'web' === target;
|
|
154
|
+
if (!usingHMR) return;
|
|
155
|
+
chain.resolve.alias.set('react-refresh', external_node_path_default().dirname(REACT_REFRESH_PATH));
|
|
156
|
+
const { default: ReactRefreshRspackPlugin } = await Promise.resolve().then(__webpack_require__.t.bind(__webpack_require__, "@rspack/plugin-react-refresh", 23));
|
|
157
|
+
const SCRIPT_REGEX = /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/;
|
|
158
|
+
const NODE_MODULES_REGEX = /[\\/]node_modules[\\/]/;
|
|
159
|
+
chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
|
|
160
|
+
{
|
|
161
|
+
include: [
|
|
162
|
+
SCRIPT_REGEX
|
|
163
|
+
],
|
|
164
|
+
exclude: [
|
|
165
|
+
NODE_MODULES_REGEX
|
|
166
|
+
],
|
|
167
|
+
...options.reactRefreshOptions
|
|
168
|
+
}
|
|
169
|
+
]);
|
|
170
|
+
});
|
|
89
171
|
};
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
172
|
+
const applyReactProfiler = (api)=>{
|
|
173
|
+
api.modifyEnvironmentConfig((config, param)=>{
|
|
174
|
+
let { mergeEnvironmentConfig } = param;
|
|
175
|
+
if ('production' !== config.mode) return;
|
|
176
|
+
const enableProfilerConfig = {
|
|
177
|
+
output: {
|
|
178
|
+
minify: {
|
|
179
|
+
jsOptions: {
|
|
180
|
+
minimizerOptions: {
|
|
181
|
+
// Need to keep classnames and function names like Components for debugging purposes.
|
|
182
|
+
mangle: {
|
|
183
|
+
keep_classnames: true,
|
|
184
|
+
keep_fnames: true
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
105
189
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
chain.resolve.alias.set("scheduler/tracing", "scheduler/tracing-profiling");
|
|
118
|
-
});
|
|
190
|
+
};
|
|
191
|
+
return mergeEnvironmentConfig(config, enableProfilerConfig);
|
|
192
|
+
});
|
|
193
|
+
api.modifyBundlerChain((chain, param)=>{
|
|
194
|
+
let { isProd } = param;
|
|
195
|
+
if (!isProd) return;
|
|
196
|
+
// Replace react-dom with the profiling version.
|
|
197
|
+
// Reference: https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977
|
|
198
|
+
chain.resolve.alias.set('react-dom$', 'react-dom/profiling');
|
|
199
|
+
chain.resolve.alias.set('scheduler/tracing', 'scheduler/tracing-profiling');
|
|
200
|
+
});
|
|
119
201
|
};
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
if (!Object.keys(extraGroups).length) {
|
|
152
|
-
return;
|
|
153
|
-
}
|
|
154
|
-
chain.optimization.splitChunks({
|
|
155
|
-
...currentConfig,
|
|
156
|
-
cacheGroups: {
|
|
157
|
-
...currentConfig.cacheGroups,
|
|
158
|
-
...extraGroups
|
|
159
|
-
}
|
|
202
|
+
const isPlainObject = (obj)=>null !== obj && 'object' == typeof obj && '[object Object]' === Object.prototype.toString.call(obj);
|
|
203
|
+
const applySplitChunksRule = function(api) {
|
|
204
|
+
let options = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {
|
|
205
|
+
react: true,
|
|
206
|
+
router: true
|
|
207
|
+
};
|
|
208
|
+
api.modifyBundlerChain((chain, param)=>{
|
|
209
|
+
let { environment, isProd } = param;
|
|
210
|
+
const { config } = environment;
|
|
211
|
+
if ('split-by-experience' !== config.performance.chunkSplit.strategy) return;
|
|
212
|
+
const currentConfig = chain.optimization.splitChunks.values();
|
|
213
|
+
if (!isPlainObject(currentConfig)) return;
|
|
214
|
+
const extraGroups = {};
|
|
215
|
+
if (options.react) extraGroups.react = {
|
|
216
|
+
name: 'lib-react',
|
|
217
|
+
test: isProd ? /node_modules[\\/](?:react|react-dom|scheduler)[\\/]/ : /node_modules[\\/](?:react|react-dom|scheduler|react-refresh|@rspack[\\/]plugin-react-refresh)[\\/]/,
|
|
218
|
+
priority: 0
|
|
219
|
+
};
|
|
220
|
+
if (options.router) extraGroups.router = {
|
|
221
|
+
name: 'lib-router',
|
|
222
|
+
test: /node_modules[\\/](?:react-router|react-router-dom|history|@remix-run[\\/]router)[\\/]/,
|
|
223
|
+
priority: 0
|
|
224
|
+
};
|
|
225
|
+
if (!Object.keys(extraGroups).length) return;
|
|
226
|
+
chain.optimization.splitChunks({
|
|
227
|
+
...currentConfig,
|
|
228
|
+
cacheGroups: {
|
|
229
|
+
...currentConfig.cacheGroups,
|
|
230
|
+
...extraGroups
|
|
231
|
+
}
|
|
232
|
+
});
|
|
160
233
|
});
|
|
161
|
-
});
|
|
162
234
|
};
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
182
|
-
0 && (module.exports = {
|
|
183
|
-
PLUGIN_REACT_NAME,
|
|
184
|
-
pluginReact
|
|
235
|
+
const PLUGIN_REACT_NAME = 'rsbuild:react';
|
|
236
|
+
const pluginReact = function() {
|
|
237
|
+
let { enableProfiler = false, ...options } = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
|
|
238
|
+
return {
|
|
239
|
+
name: PLUGIN_REACT_NAME,
|
|
240
|
+
setup (api) {
|
|
241
|
+
if ('rspack' === api.context.bundlerType) {
|
|
242
|
+
applyBasicReactSupport(api, options);
|
|
243
|
+
if (enableProfiler) applyReactProfiler(api);
|
|
244
|
+
}
|
|
245
|
+
applySplitChunksRule(api, null == options ? void 0 : options.splitChunks);
|
|
246
|
+
}
|
|
247
|
+
};
|
|
248
|
+
};
|
|
249
|
+
var __webpack_export_target__ = exports;
|
|
250
|
+
for(var i in __webpack_exports__)__webpack_export_target__[i] = __webpack_exports__[i];
|
|
251
|
+
if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
|
|
252
|
+
value: true
|
|
185
253
|
});
|
package/dist/index.js
CHANGED
|
@@ -1,162 +1,132 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
tools: {
|
|
30
|
-
swc: {
|
|
31
|
-
jsc: {
|
|
32
|
-
parser: {
|
|
33
|
-
syntax: "typescript",
|
|
34
|
-
// enable supports for JSX/TSX compilation
|
|
35
|
-
tsx: true
|
|
36
|
-
},
|
|
37
|
-
transform: {
|
|
38
|
-
react: reactOptions
|
|
1
|
+
import * as __WEBPACK_EXTERNAL_MODULE_node_module__ from "node:module";
|
|
2
|
+
import * as __WEBPACK_EXTERNAL_MODULE_node_path__ from "node:path";
|
|
3
|
+
const react_require = (0, __WEBPACK_EXTERNAL_MODULE_node_module__.createRequire)(import.meta.url);
|
|
4
|
+
const applyBasicReactSupport = (api, options)=>{
|
|
5
|
+
const REACT_REFRESH_PATH = react_require.resolve('react-refresh');
|
|
6
|
+
api.modifyEnvironmentConfig((userConfig, param)=>{
|
|
7
|
+
let { mergeEnvironmentConfig } = param;
|
|
8
|
+
const isDev = 'development' === userConfig.mode;
|
|
9
|
+
const reactOptions = {
|
|
10
|
+
development: isDev,
|
|
11
|
+
refresh: isDev && userConfig.dev.hmr && 'web' === userConfig.output.target,
|
|
12
|
+
runtime: 'automatic',
|
|
13
|
+
...options.swcReactOptions
|
|
14
|
+
};
|
|
15
|
+
const extraConfig = {
|
|
16
|
+
tools: {
|
|
17
|
+
swc: {
|
|
18
|
+
jsc: {
|
|
19
|
+
parser: {
|
|
20
|
+
syntax: 'typescript',
|
|
21
|
+
// enable supports for JSX/TSX compilation
|
|
22
|
+
tsx: true
|
|
23
|
+
},
|
|
24
|
+
transform: {
|
|
25
|
+
react: reactOptions
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
39
29
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
]);
|
|
65
|
-
}
|
|
66
|
-
);
|
|
30
|
+
};
|
|
31
|
+
return mergeEnvironmentConfig(extraConfig, userConfig);
|
|
32
|
+
});
|
|
33
|
+
api.modifyBundlerChain(async (chain, param)=>{
|
|
34
|
+
let { CHAIN_ID, environment, isDev, target } = param;
|
|
35
|
+
const { config } = environment;
|
|
36
|
+
const usingHMR = isDev && config.dev.hmr && 'web' === target;
|
|
37
|
+
if (!usingHMR) return;
|
|
38
|
+
chain.resolve.alias.set('react-refresh', __WEBPACK_EXTERNAL_MODULE_node_path__["default"].dirname(REACT_REFRESH_PATH));
|
|
39
|
+
const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
|
|
40
|
+
const SCRIPT_REGEX = /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/;
|
|
41
|
+
const NODE_MODULES_REGEX = /[\\/]node_modules[\\/]/;
|
|
42
|
+
chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
|
|
43
|
+
{
|
|
44
|
+
include: [
|
|
45
|
+
SCRIPT_REGEX
|
|
46
|
+
],
|
|
47
|
+
exclude: [
|
|
48
|
+
NODE_MODULES_REGEX
|
|
49
|
+
],
|
|
50
|
+
...options.reactRefreshOptions
|
|
51
|
+
}
|
|
52
|
+
]);
|
|
53
|
+
});
|
|
67
54
|
};
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
55
|
+
const applyReactProfiler = (api)=>{
|
|
56
|
+
api.modifyEnvironmentConfig((config, param)=>{
|
|
57
|
+
let { mergeEnvironmentConfig } = param;
|
|
58
|
+
if ('production' !== config.mode) return;
|
|
59
|
+
const enableProfilerConfig = {
|
|
60
|
+
output: {
|
|
61
|
+
minify: {
|
|
62
|
+
jsOptions: {
|
|
63
|
+
minimizerOptions: {
|
|
64
|
+
// Need to keep classnames and function names like Components for debugging purposes.
|
|
65
|
+
mangle: {
|
|
66
|
+
keep_classnames: true,
|
|
67
|
+
keep_fnames: true
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
83
72
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
chain.resolve.alias.set("scheduler/tracing", "scheduler/tracing-profiling");
|
|
96
|
-
});
|
|
73
|
+
};
|
|
74
|
+
return mergeEnvironmentConfig(config, enableProfilerConfig);
|
|
75
|
+
});
|
|
76
|
+
api.modifyBundlerChain((chain, param)=>{
|
|
77
|
+
let { isProd } = param;
|
|
78
|
+
if (!isProd) return;
|
|
79
|
+
// Replace react-dom with the profiling version.
|
|
80
|
+
// Reference: https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977
|
|
81
|
+
chain.resolve.alias.set('react-dom$', 'react-dom/profiling');
|
|
82
|
+
chain.resolve.alias.set('scheduler/tracing', 'scheduler/tracing-profiling');
|
|
83
|
+
});
|
|
97
84
|
};
|
|
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
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
if (!Object.keys(extraGroups).length) {
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
132
|
-
chain.optimization.splitChunks({
|
|
133
|
-
...currentConfig,
|
|
134
|
-
cacheGroups: {
|
|
135
|
-
...currentConfig.cacheGroups,
|
|
136
|
-
...extraGroups
|
|
137
|
-
}
|
|
85
|
+
const isPlainObject = (obj)=>null !== obj && 'object' == typeof obj && '[object Object]' === Object.prototype.toString.call(obj);
|
|
86
|
+
const applySplitChunksRule = function(api) {
|
|
87
|
+
let options = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {
|
|
88
|
+
react: true,
|
|
89
|
+
router: true
|
|
90
|
+
};
|
|
91
|
+
api.modifyBundlerChain((chain, param)=>{
|
|
92
|
+
let { environment, isProd } = param;
|
|
93
|
+
const { config } = environment;
|
|
94
|
+
if ('split-by-experience' !== config.performance.chunkSplit.strategy) return;
|
|
95
|
+
const currentConfig = chain.optimization.splitChunks.values();
|
|
96
|
+
if (!isPlainObject(currentConfig)) return;
|
|
97
|
+
const extraGroups = {};
|
|
98
|
+
if (options.react) extraGroups.react = {
|
|
99
|
+
name: 'lib-react',
|
|
100
|
+
test: isProd ? /node_modules[\\/](?:react|react-dom|scheduler)[\\/]/ : /node_modules[\\/](?:react|react-dom|scheduler|react-refresh|@rspack[\\/]plugin-react-refresh)[\\/]/,
|
|
101
|
+
priority: 0
|
|
102
|
+
};
|
|
103
|
+
if (options.router) extraGroups.router = {
|
|
104
|
+
name: 'lib-router',
|
|
105
|
+
test: /node_modules[\\/](?:react-router|react-router-dom|history|@remix-run[\\/]router)[\\/]/,
|
|
106
|
+
priority: 0
|
|
107
|
+
};
|
|
108
|
+
if (!Object.keys(extraGroups).length) return;
|
|
109
|
+
chain.optimization.splitChunks({
|
|
110
|
+
...currentConfig,
|
|
111
|
+
cacheGroups: {
|
|
112
|
+
...currentConfig.cacheGroups,
|
|
113
|
+
...extraGroups
|
|
114
|
+
}
|
|
115
|
+
});
|
|
138
116
|
});
|
|
139
|
-
});
|
|
140
117
|
};
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
applySplitChunksRule(api, options?.splitChunks);
|
|
157
|
-
}
|
|
158
|
-
});
|
|
159
|
-
export {
|
|
160
|
-
PLUGIN_REACT_NAME,
|
|
161
|
-
pluginReact
|
|
118
|
+
const PLUGIN_REACT_NAME = 'rsbuild:react';
|
|
119
|
+
const pluginReact = function() {
|
|
120
|
+
let { enableProfiler = false, ...options } = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
|
|
121
|
+
return {
|
|
122
|
+
name: PLUGIN_REACT_NAME,
|
|
123
|
+
setup (api) {
|
|
124
|
+
if ('rspack' === api.context.bundlerType) {
|
|
125
|
+
applyBasicReactSupport(api, options);
|
|
126
|
+
if (enableProfiler) applyReactProfiler(api);
|
|
127
|
+
}
|
|
128
|
+
applySplitChunksRule(api, null == options ? void 0 : options.splitChunks);
|
|
129
|
+
}
|
|
130
|
+
};
|
|
162
131
|
};
|
|
132
|
+
export { PLUGIN_REACT_NAME, pluginReact };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { RsbuildPluginAPI } from '@rsbuild/core';
|
|
2
|
-
import type { PluginReactOptions } from '.';
|
|
2
|
+
import type { PluginReactOptions } from './index.js';
|
|
3
3
|
export declare const applyBasicReactSupport: (api: RsbuildPluginAPI, options: PluginReactOptions) => void;
|
|
4
4
|
export declare const applyReactProfiler: (api: RsbuildPluginAPI) => void;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { RsbuildPluginAPI } from '@rsbuild/core';
|
|
2
|
-
import type { SplitReactChunkOptions } from '.';
|
|
2
|
+
import type { SplitReactChunkOptions } from './index.js';
|
|
3
3
|
export declare const applySplitChunksRule: (api: RsbuildPluginAPI, options?: SplitReactChunkOptions) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsbuild/plugin-react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "React plugin for Rsbuild",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -11,25 +11,24 @@
|
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
|
13
13
|
".": {
|
|
14
|
-
"types": "./dist
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
15
|
"import": "./dist/index.js",
|
|
16
16
|
"require": "./dist/index.cjs"
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
"main": "./dist/index.cjs",
|
|
20
|
-
"types": "./dist
|
|
20
|
+
"types": "./dist/index.d.ts",
|
|
21
21
|
"files": [
|
|
22
|
-
"dist"
|
|
23
|
-
"dist-types"
|
|
22
|
+
"dist"
|
|
24
23
|
],
|
|
25
24
|
"dependencies": {
|
|
26
|
-
"@rspack/plugin-react-refresh": "1.0.0",
|
|
25
|
+
"@rspack/plugin-react-refresh": "~1.0.0",
|
|
27
26
|
"react-refresh": "^0.14.2"
|
|
28
27
|
},
|
|
29
28
|
"devDependencies": {
|
|
30
29
|
"@types/node": "18.x",
|
|
31
|
-
"typescript": "^5.
|
|
32
|
-
"@rsbuild/core": "1.0.
|
|
30
|
+
"typescript": "^5.6.3",
|
|
31
|
+
"@rsbuild/core": "1.0.14",
|
|
33
32
|
"@scripts/test-helper": "1.0.1"
|
|
34
33
|
},
|
|
35
34
|
"peerDependencies": {
|
|
@@ -41,7 +40,7 @@
|
|
|
41
40
|
"registry": "https://registry.npmjs.org/"
|
|
42
41
|
},
|
|
43
42
|
"scripts": {
|
|
44
|
-
"build": "
|
|
45
|
-
"dev": "
|
|
43
|
+
"build": "rslib build",
|
|
44
|
+
"dev": "rslib build --watch"
|
|
46
45
|
}
|
|
47
46
|
}
|
package/dist-types/package.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"//":"This file is for making TypeScript work with moduleResolution node16+.","version":"1.0.0"}
|
|
File without changes
|