@rsbuild/plugin-react 0.6.4 → 0.6.6

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.
Files changed (4) hide show
  1. package/dist/index.d.ts +4 -4
  2. package/dist/index.js +71 -41
  3. package/dist/index.mjs +75 -43
  4. package/package.json +7 -7
package/dist/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import { RsbuildPlugin } from '@rsbuild/core';
2
- import { SwcReactConfig } from '@rsbuild/shared';
1
+ import { Rspack, RsbuildPlugin } from '@rsbuild/core';
3
2
 
4
3
  type SplitReactChunkOptions = {
5
4
  /**
@@ -20,13 +19,14 @@ type PluginReactOptions = {
20
19
  * Configure the behavior of SWC to transform React code,
21
20
  * the same as SWC's [jsc.transform.react](https://swc.rs/docs/configuration/compilation#jsctransformreact).
22
21
  */
23
- swcReactOptions?: SwcReactConfig;
22
+ swcReactOptions?: Rspack.SwcLoaderTransformConfig['react'];
24
23
  /**
25
24
  * Configuration for chunk splitting of React-related dependencies.
26
25
  */
27
26
  splitChunks?: SplitReactChunkOptions;
27
+ enableProfiler?: boolean;
28
28
  };
29
29
  declare const PLUGIN_REACT_NAME = "rsbuild:react";
30
- declare const pluginReact: (options?: PluginReactOptions) => RsbuildPlugin;
30
+ declare const pluginReact: ({ enableProfiler, ...options }?: PluginReactOptions) => RsbuildPlugin;
31
31
 
32
32
  export { PLUGIN_REACT_NAME, type PluginReactOptions, type SplitReactChunkOptions, pluginReact };
package/dist/index.js CHANGED
@@ -34,9 +34,68 @@ __export(src_exports, {
34
34
  pluginReact: () => pluginReact
35
35
  });
36
36
  module.exports = __toCommonJS(src_exports);
37
+ var import_shared3 = require("@rsbuild/shared");
37
38
 
38
- // src/splitChunks.ts
39
+ // src/react.ts
40
+ var import_node_path = __toESM(require("path"));
39
41
  var import_shared = require("@rsbuild/shared");
42
+ var applyBasicReactSupport = (api, options) => {
43
+ const REACT_REFRESH_PATH = require.resolve("react-refresh");
44
+ api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
45
+ const config = api.getNormalizedConfig();
46
+ const usingHMR = (0, import_shared.isUsingHMR)(config, { isProd: isProd2, target });
47
+ const reactOptions = {
48
+ development: isDev,
49
+ refresh: usingHMR,
50
+ runtime: "automatic",
51
+ ...options.swcReactOptions
52
+ };
53
+ (0, import_shared.modifySwcLoaderOptions)({
54
+ chain,
55
+ modifier: (opts) => {
56
+ var _a;
57
+ opts.jsc ?? (opts.jsc = {});
58
+ (_a = opts.jsc).transform ?? (_a.transform = {});
59
+ opts.jsc.transform.react = {
60
+ ...opts.jsc.transform.react,
61
+ ...reactOptions
62
+ };
63
+ return opts;
64
+ }
65
+ });
66
+ if (!usingHMR) {
67
+ return;
68
+ }
69
+ chain.resolve.alias.set("react-refresh", import_node_path.default.dirname(REACT_REFRESH_PATH));
70
+ const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
71
+ chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [{ include: [import_shared.SCRIPT_REGEX] }]);
72
+ });
73
+ };
74
+ var applyReactProfiler = (api) => {
75
+ api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
76
+ const enableProfilerConfig = {
77
+ output: {
78
+ minify: {
79
+ jsOptions: {
80
+ // Need to keep classnames and function names like Components for debugging purposes.
81
+ mangle: {
82
+ keep_classnames: true,
83
+ keep_fnames: true
84
+ }
85
+ }
86
+ }
87
+ }
88
+ };
89
+ return mergeRsbuildConfig(config, enableProfilerConfig);
90
+ });
91
+ api.modifyBundlerChain((chain) => {
92
+ chain.resolve.alias.set("react-dom$", "react-dom/profiling");
93
+ chain.resolve.alias.set("scheduler/tracing", "scheduler/tracing-profiling");
94
+ });
95
+ };
96
+
97
+ // src/splitChunks.ts
98
+ var import_shared2 = require("@rsbuild/shared");
40
99
  var applySplitChunksRule = (api, options = {
41
100
  react: true,
42
101
  router: true
@@ -47,7 +106,7 @@ var applySplitChunksRule = (api, options = {
47
106
  return;
48
107
  }
49
108
  const currentConfig = chain.optimization.splitChunks.values();
50
- if (!(0, import_shared.isPlainObject)(currentConfig)) {
109
+ if (!(0, import_shared2.isPlainObject)(currentConfig)) {
51
110
  return;
52
111
  }
53
112
  const extraGroups = {};
@@ -56,7 +115,7 @@ var applySplitChunksRule = (api, options = {
56
115
  "react",
57
116
  "react-dom",
58
117
  "scheduler",
59
- ...(0, import_shared.isProd)() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
118
+ ...(0, import_shared2.isProd)() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
60
119
  ];
61
120
  }
62
121
  if (options.router) {
@@ -75,55 +134,26 @@ var applySplitChunksRule = (api, options = {
75
134
  // @ts-expect-error Rspack and Webpack uses different cacheGroups type
76
135
  cacheGroups: {
77
136
  ...currentConfig.cacheGroups,
78
- ...(0, import_shared.createCacheGroups)(extraGroups)
137
+ ...(0, import_shared2.createCacheGroups)(extraGroups)
79
138
  }
80
139
  });
81
140
  });
82
141
  };
83
142
 
84
- // src/react.ts
85
- var import_node_path = __toESM(require("path"));
86
- var import_shared2 = require("@rsbuild/shared");
87
- var applyBasicReactSupport = (api, options) => {
88
- const REACT_REFRESH_PATH = require.resolve("react-refresh");
89
- api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
90
- const config = api.getNormalizedConfig();
91
- const usingHMR = (0, import_shared2.isUsingHMR)(config, { isProd: isProd2, target });
92
- const reactOptions = {
93
- development: isDev,
94
- refresh: usingHMR,
95
- runtime: "automatic",
96
- ...options.swcReactOptions
97
- };
98
- (0, import_shared2.modifySwcLoaderOptions)({
99
- chain,
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;
109
- }
110
- });
111
- if (!usingHMR) {
112
- return;
113
- }
114
- chain.resolve.alias.set("react-refresh", import_node_path.default.dirname(REACT_REFRESH_PATH));
115
- const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
116
- chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [{ include: [import_shared2.SCRIPT_REGEX] }]);
117
- });
118
- };
119
-
120
143
  // src/index.ts
121
144
  var PLUGIN_REACT_NAME = "rsbuild:react";
122
- var pluginReact = (options = {}) => ({
145
+ var pluginReact = ({
146
+ enableProfiler = false,
147
+ ...options
148
+ } = {}) => ({
123
149
  name: PLUGIN_REACT_NAME,
124
150
  setup(api) {
151
+ const isEnvProductionProfile = enableProfiler && (0, import_shared3.getNodeEnv)() === "production";
125
152
  if (api.context.bundlerType === "rspack") {
126
153
  applyBasicReactSupport(api, options);
154
+ if (isEnvProductionProfile) {
155
+ applyReactProfiler(api);
156
+ }
127
157
  }
128
158
  applySplitChunksRule(api, options?.splitChunks);
129
159
  }
package/dist/index.mjs CHANGED
@@ -13,11 +13,76 @@ 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 { getNodeEnv } from "@rsbuild/shared";
18
+
19
+ // src/react.ts
20
+ import path2 from "path";
21
+ import {
22
+ SCRIPT_REGEX,
23
+ isUsingHMR,
24
+ modifySwcLoaderOptions
25
+ } from "@rsbuild/shared";
26
+ var applyBasicReactSupport = (api, options) => {
27
+ const REACT_REFRESH_PATH = __require.resolve("react-refresh");
28
+ api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
29
+ const config = api.getNormalizedConfig();
30
+ const usingHMR = isUsingHMR(config, { isProd: isProd2, target });
31
+ const reactOptions = {
32
+ development: isDev,
33
+ refresh: usingHMR,
34
+ runtime: "automatic",
35
+ ...options.swcReactOptions
36
+ };
37
+ modifySwcLoaderOptions({
38
+ chain,
39
+ modifier: (opts) => {
40
+ var _a;
41
+ opts.jsc ?? (opts.jsc = {});
42
+ (_a = opts.jsc).transform ?? (_a.transform = {});
43
+ opts.jsc.transform.react = {
44
+ ...opts.jsc.transform.react,
45
+ ...reactOptions
46
+ };
47
+ return opts;
48
+ }
49
+ });
50
+ if (!usingHMR) {
51
+ return;
52
+ }
53
+ chain.resolve.alias.set("react-refresh", path2.dirname(REACT_REFRESH_PATH));
54
+ const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
55
+ chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [{ include: [SCRIPT_REGEX] }]);
56
+ });
57
+ };
58
+ var applyReactProfiler = (api) => {
59
+ api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
60
+ const enableProfilerConfig = {
61
+ output: {
62
+ minify: {
63
+ jsOptions: {
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
+ }
72
+ };
73
+ return mergeRsbuildConfig(config, enableProfilerConfig);
74
+ });
75
+ api.modifyBundlerChain((chain) => {
76
+ chain.resolve.alias.set("react-dom$", "react-dom/profiling");
77
+ chain.resolve.alias.set("scheduler/tracing", "scheduler/tracing-profiling");
78
+ });
79
+ };
80
+
16
81
  // src/splitChunks.ts
17
82
  import {
18
- isProd,
83
+ createCacheGroups,
19
84
  isPlainObject,
20
- createCacheGroups
85
+ isProd
21
86
  } from "@rsbuild/shared";
22
87
  var applySplitChunksRule = (api, options = {
23
88
  react: true,
@@ -63,53 +128,20 @@ var applySplitChunksRule = (api, options = {
63
128
  });
64
129
  };
65
130
 
66
- // src/react.ts
67
- import path2 from "path";
68
- import {
69
- isUsingHMR,
70
- SCRIPT_REGEX,
71
- modifySwcLoaderOptions
72
- } from "@rsbuild/shared";
73
- var applyBasicReactSupport = (api, options) => {
74
- const REACT_REFRESH_PATH = __require.resolve("react-refresh");
75
- api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
76
- const config = api.getNormalizedConfig();
77
- const usingHMR = isUsingHMR(config, { isProd: isProd2, target });
78
- const reactOptions = {
79
- development: isDev,
80
- refresh: usingHMR,
81
- runtime: "automatic",
82
- ...options.swcReactOptions
83
- };
84
- modifySwcLoaderOptions({
85
- chain,
86
- modifier: (opts) => {
87
- var _a;
88
- opts.jsc ?? (opts.jsc = {});
89
- (_a = opts.jsc).transform ?? (_a.transform = {});
90
- opts.jsc.transform.react = {
91
- ...opts.jsc.transform.react,
92
- ...reactOptions
93
- };
94
- return opts;
95
- }
96
- });
97
- if (!usingHMR) {
98
- return;
99
- }
100
- chain.resolve.alias.set("react-refresh", path2.dirname(REACT_REFRESH_PATH));
101
- const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
102
- chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [{ include: [SCRIPT_REGEX] }]);
103
- });
104
- };
105
-
106
131
  // src/index.ts
107
132
  var PLUGIN_REACT_NAME = "rsbuild:react";
108
- var pluginReact = (options = {}) => ({
133
+ var pluginReact = ({
134
+ enableProfiler = false,
135
+ ...options
136
+ } = {}) => ({
109
137
  name: PLUGIN_REACT_NAME,
110
138
  setup(api) {
139
+ const isEnvProductionProfile = enableProfiler && getNodeEnv() === "production";
111
140
  if (api.context.bundlerType === "rspack") {
112
141
  applyBasicReactSupport(api, options);
142
+ if (isEnvProductionProfile) {
143
+ applyReactProfiler(api);
144
+ }
113
145
  }
114
146
  applySplitChunksRule(api, options?.splitChunks);
115
147
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rsbuild/plugin-react",
3
- "version": "0.6.4",
3
+ "version": "0.6.6",
4
4
  "description": "React plugin for Rsbuild",
5
5
  "repository": {
6
6
  "type": "git",
@@ -22,18 +22,18 @@
22
22
  "dist"
23
23
  ],
24
24
  "dependencies": {
25
- "@rspack/plugin-react-refresh": "0.6.2",
25
+ "@rspack/plugin-react-refresh": "0.6.3",
26
26
  "react-refresh": "^0.14.0",
27
- "@rsbuild/shared": "0.6.4"
27
+ "@rsbuild/shared": "0.6.6"
28
28
  },
29
29
  "devDependencies": {
30
- "@types/node": "16.x",
30
+ "@types/node": "18.x",
31
31
  "typescript": "^5.4.2",
32
- "@rsbuild/core": "0.6.4",
33
- "@scripts/test-helper": "0.6.4"
32
+ "@rsbuild/core": "0.6.6",
33
+ "@scripts/test-helper": "0.6.6"
34
34
  },
35
35
  "peerDependencies": {
36
- "@rsbuild/core": "^0.6.4"
36
+ "@rsbuild/core": "^0.6.6"
37
37
  },
38
38
  "publishConfig": {
39
39
  "access": "public",