@rsbuild/plugin-react 0.3.11 → 0.4.0
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.d.ts +1 -3
- package/dist/index.js +19 -109
- package/dist/index.mjs +12 -105
- package/package.json +5 -5
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { RsbuildPlugin } from '@rsbuild/core';
|
|
2
2
|
import { SwcReactConfig } from '@rsbuild/shared';
|
|
3
3
|
|
|
4
|
-
declare const isBeyondReact17: (cwd: string) => Promise<any>;
|
|
5
|
-
|
|
6
4
|
type SplitReactChunkOptions = {
|
|
7
5
|
/**
|
|
8
6
|
* Whether to enable split chunking for React-related dependencies (e.g., react, react-dom, scheduler).
|
|
@@ -31,4 +29,4 @@ type PluginReactOptions = {
|
|
|
31
29
|
declare const PLUGIN_REACT_NAME = "rsbuild:react";
|
|
32
30
|
declare const pluginReact: (options?: PluginReactOptions) => RsbuildPlugin;
|
|
33
31
|
|
|
34
|
-
export { PLUGIN_REACT_NAME, type PluginReactOptions, type SplitReactChunkOptions,
|
|
32
|
+
export { PLUGIN_REACT_NAME, type PluginReactOptions, type SplitReactChunkOptions, pluginReact };
|
package/dist/index.js
CHANGED
|
@@ -31,80 +31,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
var src_exports = {};
|
|
32
32
|
__export(src_exports, {
|
|
33
33
|
PLUGIN_REACT_NAME: () => PLUGIN_REACT_NAME,
|
|
34
|
-
isBeyondReact17: () => isBeyondReact17,
|
|
35
34
|
pluginReact: () => pluginReact
|
|
36
35
|
});
|
|
37
36
|
module.exports = __toCommonJS(src_exports);
|
|
38
37
|
|
|
39
|
-
// src/antd.ts
|
|
40
|
-
var import_shared = require("@rsbuild/shared");
|
|
41
|
-
var getAntdMajorVersion = (appDirectory) => {
|
|
42
|
-
try {
|
|
43
|
-
const pkgJsonPath = require.resolve("antd/package.json", {
|
|
44
|
-
paths: [appDirectory]
|
|
45
|
-
});
|
|
46
|
-
const { version } = require(pkgJsonPath);
|
|
47
|
-
return Number(version.split(".")[0]);
|
|
48
|
-
} catch (err) {
|
|
49
|
-
return null;
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
var applyAntdSupport = (api) => {
|
|
53
|
-
api.modifyRsbuildConfig((rsbuildConfig) => {
|
|
54
|
-
rsbuildConfig.source ?? (rsbuildConfig.source = {});
|
|
55
|
-
if (rsbuildConfig.source.transformImport === false || rsbuildConfig.source.transformImport?.some(
|
|
56
|
-
(item) => item.libraryName === "antd"
|
|
57
|
-
)) {
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
const antdMajorVersion = getAntdMajorVersion(api.context.rootPath);
|
|
61
|
-
if (antdMajorVersion && antdMajorVersion < 5) {
|
|
62
|
-
rsbuildConfig.source ?? (rsbuildConfig.source = {});
|
|
63
|
-
rsbuildConfig.source.transformImport = [
|
|
64
|
-
...rsbuildConfig.source.transformImport || [],
|
|
65
|
-
{
|
|
66
|
-
libraryName: "antd",
|
|
67
|
-
libraryDirectory: (0, import_shared.isServerTarget)(api.context.targets) ? "lib" : "es",
|
|
68
|
-
style: true
|
|
69
|
-
}
|
|
70
|
-
];
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
// src/arco.ts
|
|
76
|
-
var import_shared2 = require("@rsbuild/shared");
|
|
77
|
-
var applyArcoSupport = (api) => {
|
|
78
|
-
const ARCO_NAME = "@arco-design/web-react";
|
|
79
|
-
const ARCO_ICON = `${ARCO_NAME}/icon`;
|
|
80
|
-
api.modifyRsbuildConfig((rsbuildConfig) => {
|
|
81
|
-
const { transformImport = [] } = rsbuildConfig.source || {};
|
|
82
|
-
if (transformImport === false || !(0, import_shared2.isPackageInstalled)(ARCO_NAME, api.context.rootPath)) {
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
const isUseSSR = (0, import_shared2.isServerTarget)(api.context.targets);
|
|
86
|
-
if (!transformImport?.some((item) => item.libraryName === ARCO_NAME)) {
|
|
87
|
-
transformImport.push({
|
|
88
|
-
libraryName: ARCO_NAME,
|
|
89
|
-
libraryDirectory: isUseSSR ? "lib" : "es",
|
|
90
|
-
camelToDashComponentName: false,
|
|
91
|
-
style: true
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
if (!transformImport?.some((item) => item.libraryName === ARCO_ICON)) {
|
|
95
|
-
transformImport.push({
|
|
96
|
-
libraryName: ARCO_ICON,
|
|
97
|
-
libraryDirectory: isUseSSR ? "react-icon-cjs" : "react-icon",
|
|
98
|
-
camelToDashComponentName: false
|
|
99
|
-
});
|
|
100
|
-
}
|
|
101
|
-
rsbuildConfig.source || (rsbuildConfig.source = {});
|
|
102
|
-
rsbuildConfig.source.transformImport = transformImport;
|
|
103
|
-
});
|
|
104
|
-
};
|
|
105
|
-
|
|
106
38
|
// src/splitChunks.ts
|
|
107
|
-
var
|
|
39
|
+
var import_shared = require("@rsbuild/shared");
|
|
108
40
|
var applySplitChunksRule = (api, options = {
|
|
109
41
|
react: true,
|
|
110
42
|
router: true
|
|
@@ -115,7 +47,7 @@ var applySplitChunksRule = (api, options = {
|
|
|
115
47
|
return;
|
|
116
48
|
}
|
|
117
49
|
const currentConfig = chain.optimization.splitChunks.values();
|
|
118
|
-
if (!(0,
|
|
50
|
+
if (!(0, import_shared.isPlainObject)(currentConfig)) {
|
|
119
51
|
return;
|
|
120
52
|
}
|
|
121
53
|
const extraGroups = {};
|
|
@@ -124,7 +56,7 @@ var applySplitChunksRule = (api, options = {
|
|
|
124
56
|
"react",
|
|
125
57
|
"react-dom",
|
|
126
58
|
"scheduler",
|
|
127
|
-
...(0,
|
|
59
|
+
...(0, import_shared.isProd)() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
|
|
128
60
|
];
|
|
129
61
|
}
|
|
130
62
|
if (options.router) {
|
|
@@ -140,9 +72,10 @@ var applySplitChunksRule = (api, options = {
|
|
|
140
72
|
}
|
|
141
73
|
chain.optimization.splitChunks({
|
|
142
74
|
...currentConfig,
|
|
75
|
+
// @ts-expect-error Rspack and Webpack uses different cacheGroups type
|
|
143
76
|
cacheGroups: {
|
|
144
77
|
...currentConfig.cacheGroups,
|
|
145
|
-
...(0,
|
|
78
|
+
...(0, import_shared.createCacheGroups)(extraGroups)
|
|
146
79
|
}
|
|
147
80
|
});
|
|
148
81
|
});
|
|
@@ -150,60 +83,40 @@ var applySplitChunksRule = (api, options = {
|
|
|
150
83
|
|
|
151
84
|
// src/react.ts
|
|
152
85
|
var import_node_path = __toESM(require("path"));
|
|
153
|
-
var
|
|
154
|
-
var REACT_REFRESH_PATH = require.resolve("react-refresh");
|
|
155
|
-
var REACT_REFRESH_DIR_PATH = import_node_path.default.dirname(REACT_REFRESH_PATH);
|
|
86
|
+
var import_shared2 = require("@rsbuild/shared");
|
|
156
87
|
var applyBasicReactSupport = (api, options) => {
|
|
88
|
+
const REACT_REFRESH_PATH = require.resolve("react-refresh");
|
|
157
89
|
api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
|
|
158
90
|
const config = api.getNormalizedConfig();
|
|
159
|
-
const usingHMR = (0,
|
|
91
|
+
const usingHMR = (0, import_shared2.isUsingHMR)(config, { isProd: isProd2, target });
|
|
160
92
|
const reactOptions = {
|
|
161
93
|
development: isDev,
|
|
162
94
|
refresh: usingHMR,
|
|
163
95
|
runtime: "automatic",
|
|
164
96
|
...options.swcReactOptions
|
|
165
97
|
};
|
|
166
|
-
(0,
|
|
98
|
+
(0, import_shared2.modifySwcLoaderOptions)({
|
|
167
99
|
chain,
|
|
168
|
-
modifier: (
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
}
|
|
100
|
+
modifier: (opts) => {
|
|
101
|
+
var _a;
|
|
102
|
+
opts.jsc ?? (opts.jsc = {});
|
|
103
|
+
(_a = opts.jsc).transform ?? (_a.transform = {});
|
|
104
|
+
opts.jsc.transform.react = {
|
|
105
|
+
...opts.jsc.transform.react,
|
|
106
|
+
...reactOptions
|
|
107
|
+
};
|
|
108
|
+
return opts;
|
|
176
109
|
}
|
|
177
110
|
});
|
|
178
111
|
if (!usingHMR) {
|
|
179
112
|
return;
|
|
180
113
|
}
|
|
181
|
-
chain.resolve.alias.set("react-refresh",
|
|
114
|
+
chain.resolve.alias.set("react-refresh", import_node_path.default.dirname(REACT_REFRESH_PATH));
|
|
182
115
|
const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
|
|
183
116
|
chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin);
|
|
184
117
|
});
|
|
185
118
|
};
|
|
186
119
|
|
|
187
|
-
// src/utils.ts
|
|
188
|
-
var import_node_fs = __toESM(require("fs"));
|
|
189
|
-
var import_semver = __toESM(require("@rsbuild/shared/semver"));
|
|
190
|
-
var import_shared5 = require("@rsbuild/shared");
|
|
191
|
-
var isBeyondReact17 = async (cwd) => {
|
|
192
|
-
const pkgPath = await (0, import_shared5.findUp)({ cwd, filename: "package.json" });
|
|
193
|
-
if (!pkgPath) {
|
|
194
|
-
return false;
|
|
195
|
-
}
|
|
196
|
-
const pkgInfo = JSON.parse(import_node_fs.default.readFileSync(pkgPath, "utf8"));
|
|
197
|
-
const deps = {
|
|
198
|
-
...pkgInfo.devDependencies,
|
|
199
|
-
...pkgInfo.dependencies
|
|
200
|
-
};
|
|
201
|
-
if (typeof deps.react !== "string") {
|
|
202
|
-
return false;
|
|
203
|
-
}
|
|
204
|
-
return import_semver.default.satisfies(import_semver.default.minVersion(deps.react), ">=17.0.0");
|
|
205
|
-
};
|
|
206
|
-
|
|
207
120
|
// src/index.ts
|
|
208
121
|
var PLUGIN_REACT_NAME = "rsbuild:react";
|
|
209
122
|
var pluginReact = (options = {}) => ({
|
|
@@ -212,14 +125,11 @@ var pluginReact = (options = {}) => ({
|
|
|
212
125
|
if (api.context.bundlerType === "rspack") {
|
|
213
126
|
applyBasicReactSupport(api, options);
|
|
214
127
|
}
|
|
215
|
-
applyAntdSupport(api);
|
|
216
|
-
applyArcoSupport(api);
|
|
217
128
|
applySplitChunksRule(api, options?.splitChunks);
|
|
218
129
|
}
|
|
219
130
|
});
|
|
220
131
|
// Annotate the CommonJS export names for ESM import in node:
|
|
221
132
|
0 && (module.exports = {
|
|
222
133
|
PLUGIN_REACT_NAME,
|
|
223
|
-
isBeyondReact17,
|
|
224
134
|
pluginReact
|
|
225
135
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -13,76 +13,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
13
13
|
import { fileURLToPath } from "url";
|
|
14
14
|
import path from "path";
|
|
15
15
|
|
|
16
|
-
// src/antd.ts
|
|
17
|
-
import { isServerTarget } from "@rsbuild/shared";
|
|
18
|
-
var getAntdMajorVersion = (appDirectory) => {
|
|
19
|
-
try {
|
|
20
|
-
const pkgJsonPath = __require.resolve("antd/package.json", {
|
|
21
|
-
paths: [appDirectory]
|
|
22
|
-
});
|
|
23
|
-
const { version } = __require(pkgJsonPath);
|
|
24
|
-
return Number(version.split(".")[0]);
|
|
25
|
-
} catch (err) {
|
|
26
|
-
return null;
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
var applyAntdSupport = (api) => {
|
|
30
|
-
api.modifyRsbuildConfig((rsbuildConfig) => {
|
|
31
|
-
rsbuildConfig.source ?? (rsbuildConfig.source = {});
|
|
32
|
-
if (rsbuildConfig.source.transformImport === false || rsbuildConfig.source.transformImport?.some(
|
|
33
|
-
(item) => item.libraryName === "antd"
|
|
34
|
-
)) {
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
const antdMajorVersion = getAntdMajorVersion(api.context.rootPath);
|
|
38
|
-
if (antdMajorVersion && antdMajorVersion < 5) {
|
|
39
|
-
rsbuildConfig.source ?? (rsbuildConfig.source = {});
|
|
40
|
-
rsbuildConfig.source.transformImport = [
|
|
41
|
-
...rsbuildConfig.source.transformImport || [],
|
|
42
|
-
{
|
|
43
|
-
libraryName: "antd",
|
|
44
|
-
libraryDirectory: isServerTarget(api.context.targets) ? "lib" : "es",
|
|
45
|
-
style: true
|
|
46
|
-
}
|
|
47
|
-
];
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
// src/arco.ts
|
|
53
|
-
import {
|
|
54
|
-
isServerTarget as isServerTarget2,
|
|
55
|
-
isPackageInstalled
|
|
56
|
-
} from "@rsbuild/shared";
|
|
57
|
-
var applyArcoSupport = (api) => {
|
|
58
|
-
const ARCO_NAME = "@arco-design/web-react";
|
|
59
|
-
const ARCO_ICON = `${ARCO_NAME}/icon`;
|
|
60
|
-
api.modifyRsbuildConfig((rsbuildConfig) => {
|
|
61
|
-
const { transformImport = [] } = rsbuildConfig.source || {};
|
|
62
|
-
if (transformImport === false || !isPackageInstalled(ARCO_NAME, api.context.rootPath)) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
const isUseSSR = isServerTarget2(api.context.targets);
|
|
66
|
-
if (!transformImport?.some((item) => item.libraryName === ARCO_NAME)) {
|
|
67
|
-
transformImport.push({
|
|
68
|
-
libraryName: ARCO_NAME,
|
|
69
|
-
libraryDirectory: isUseSSR ? "lib" : "es",
|
|
70
|
-
camelToDashComponentName: false,
|
|
71
|
-
style: true
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
if (!transformImport?.some((item) => item.libraryName === ARCO_ICON)) {
|
|
75
|
-
transformImport.push({
|
|
76
|
-
libraryName: ARCO_ICON,
|
|
77
|
-
libraryDirectory: isUseSSR ? "react-icon-cjs" : "react-icon",
|
|
78
|
-
camelToDashComponentName: false
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
rsbuildConfig.source || (rsbuildConfig.source = {});
|
|
82
|
-
rsbuildConfig.source.transformImport = transformImport;
|
|
83
|
-
});
|
|
84
|
-
};
|
|
85
|
-
|
|
86
16
|
// src/splitChunks.ts
|
|
87
17
|
import {
|
|
88
18
|
isProd,
|
|
@@ -124,6 +54,7 @@ var applySplitChunksRule = (api, options = {
|
|
|
124
54
|
}
|
|
125
55
|
chain.optimization.splitChunks({
|
|
126
56
|
...currentConfig,
|
|
57
|
+
// @ts-expect-error Rspack and Webpack uses different cacheGroups type
|
|
127
58
|
cacheGroups: {
|
|
128
59
|
...currentConfig.cacheGroups,
|
|
129
60
|
...createCacheGroups(extraGroups)
|
|
@@ -135,13 +66,11 @@ var applySplitChunksRule = (api, options = {
|
|
|
135
66
|
// src/react.ts
|
|
136
67
|
import path2 from "path";
|
|
137
68
|
import {
|
|
138
|
-
deepmerge,
|
|
139
69
|
isUsingHMR,
|
|
140
70
|
modifySwcLoaderOptions
|
|
141
71
|
} from "@rsbuild/shared";
|
|
142
|
-
var REACT_REFRESH_PATH = __require.resolve("react-refresh");
|
|
143
|
-
var REACT_REFRESH_DIR_PATH = path2.dirname(REACT_REFRESH_PATH);
|
|
144
72
|
var applyBasicReactSupport = (api, options) => {
|
|
73
|
+
const REACT_REFRESH_PATH = __require.resolve("react-refresh");
|
|
145
74
|
api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
|
|
146
75
|
const config = api.getNormalizedConfig();
|
|
147
76
|
const usingHMR = isUsingHMR(config, { isProd: isProd2, target });
|
|
@@ -153,45 +82,26 @@ var applyBasicReactSupport = (api, options) => {
|
|
|
153
82
|
};
|
|
154
83
|
modifySwcLoaderOptions({
|
|
155
84
|
chain,
|
|
156
|
-
modifier: (
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}
|
|
85
|
+
modifier: (opts) => {
|
|
86
|
+
var _a;
|
|
87
|
+
opts.jsc ?? (opts.jsc = {});
|
|
88
|
+
(_a = opts.jsc).transform ?? (_a.transform = {});
|
|
89
|
+
opts.jsc.transform.react = {
|
|
90
|
+
...opts.jsc.transform.react,
|
|
91
|
+
...reactOptions
|
|
92
|
+
};
|
|
93
|
+
return opts;
|
|
164
94
|
}
|
|
165
95
|
});
|
|
166
96
|
if (!usingHMR) {
|
|
167
97
|
return;
|
|
168
98
|
}
|
|
169
|
-
chain.resolve.alias.set("react-refresh",
|
|
99
|
+
chain.resolve.alias.set("react-refresh", path2.dirname(REACT_REFRESH_PATH));
|
|
170
100
|
const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
|
|
171
101
|
chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin);
|
|
172
102
|
});
|
|
173
103
|
};
|
|
174
104
|
|
|
175
|
-
// src/utils.ts
|
|
176
|
-
import fs from "fs";
|
|
177
|
-
import semver from "@rsbuild/shared/semver";
|
|
178
|
-
import { findUp } from "@rsbuild/shared";
|
|
179
|
-
var isBeyondReact17 = async (cwd) => {
|
|
180
|
-
const pkgPath = await findUp({ cwd, filename: "package.json" });
|
|
181
|
-
if (!pkgPath) {
|
|
182
|
-
return false;
|
|
183
|
-
}
|
|
184
|
-
const pkgInfo = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
|
|
185
|
-
const deps = {
|
|
186
|
-
...pkgInfo.devDependencies,
|
|
187
|
-
...pkgInfo.dependencies
|
|
188
|
-
};
|
|
189
|
-
if (typeof deps.react !== "string") {
|
|
190
|
-
return false;
|
|
191
|
-
}
|
|
192
|
-
return semver.satisfies(semver.minVersion(deps.react), ">=17.0.0");
|
|
193
|
-
};
|
|
194
|
-
|
|
195
105
|
// src/index.ts
|
|
196
106
|
var PLUGIN_REACT_NAME = "rsbuild:react";
|
|
197
107
|
var pluginReact = (options = {}) => ({
|
|
@@ -200,13 +110,10 @@ var pluginReact = (options = {}) => ({
|
|
|
200
110
|
if (api.context.bundlerType === "rspack") {
|
|
201
111
|
applyBasicReactSupport(api, options);
|
|
202
112
|
}
|
|
203
|
-
applyAntdSupport(api);
|
|
204
|
-
applyArcoSupport(api);
|
|
205
113
|
applySplitChunksRule(api, options?.splitChunks);
|
|
206
114
|
}
|
|
207
115
|
});
|
|
208
116
|
export {
|
|
209
117
|
PLUGIN_REACT_NAME,
|
|
210
|
-
isBeyondReact17,
|
|
211
118
|
pluginReact
|
|
212
119
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsbuild/plugin-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "React plugin for Rsbuild",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -24,16 +24,16 @@
|
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@rspack/plugin-react-refresh": "0.5.3",
|
|
26
26
|
"react-refresh": "^0.14.0",
|
|
27
|
-
"@rsbuild/shared": "0.
|
|
27
|
+
"@rsbuild/shared": "0.4.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/node": "16.x",
|
|
31
31
|
"typescript": "^5.3.0",
|
|
32
|
-
"@rsbuild/core": "0.
|
|
33
|
-
"@scripts/test-helper": "0.
|
|
32
|
+
"@rsbuild/core": "0.4.0",
|
|
33
|
+
"@scripts/test-helper": "0.4.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"@rsbuild/core": "^0.
|
|
36
|
+
"@rsbuild/core": "^0.4.0"
|
|
37
37
|
},
|
|
38
38
|
"publishConfig": {
|
|
39
39
|
"access": "public",
|