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