@rsbuild/plugin-react 0.0.0-next-20240411025907 → 0.0.0-next-20240510033042

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 +14 -4
  2. package/dist/index.js +76 -41
  3. package/dist/index.mjs +81 -44
  4. package/package.json +8 -8
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { RsbuildPlugin } from '@rsbuild/core';
2
- import { SwcReactConfig } from '@rsbuild/shared';
1
+ import { Rspack, RsbuildPlugin } from '@rsbuild/core';
2
+ import { PluginOptions } from '@rspack/plugin-react-refresh';
3
3
 
4
4
  type SplitReactChunkOptions = {
5
5
  /**
@@ -20,13 +20,23 @@ type PluginReactOptions = {
20
20
  * Configure the behavior of SWC to transform React code,
21
21
  * the same as SWC's [jsc.transform.react](https://swc.rs/docs/configuration/compilation#jsctransformreact).
22
22
  */
23
- swcReactOptions?: SwcReactConfig;
23
+ swcReactOptions?: Rspack.SwcLoaderTransformConfig['react'];
24
24
  /**
25
25
  * Configuration for chunk splitting of React-related dependencies.
26
26
  */
27
27
  splitChunks?: SplitReactChunkOptions;
28
+ /**
29
+ * When set to `true`, enables the React Profiler for performance analysis in production builds.
30
+ * @default false
31
+ */
32
+ enableProfiler?: boolean;
33
+ /**
34
+ * Options passed to `@rspack/plugin-react-refresh`
35
+ * @see https://rspack.dev/guide/tech/react#rspackplugin-react-refresh
36
+ */
37
+ reactRefreshOptions?: PluginOptions;
28
38
  };
29
39
  declare const PLUGIN_REACT_NAME = "rsbuild:react";
30
- declare const pluginReact: (options?: PluginReactOptions) => RsbuildPlugin;
40
+ declare const pluginReact: ({ enableProfiler, ...options }?: PluginReactOptions) => RsbuildPlugin;
31
41
 
32
42
  export { PLUGIN_REACT_NAME, type PluginReactOptions, type SplitReactChunkOptions, pluginReact };
package/dist/index.js CHANGED
@@ -34,9 +34,73 @@ __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, [
72
+ {
73
+ include: [import_shared.SCRIPT_REGEX],
74
+ ...options.reactRefreshOptions
75
+ }
76
+ ]);
77
+ });
78
+ };
79
+ var applyReactProfiler = (api) => {
80
+ api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
81
+ const enableProfilerConfig = {
82
+ output: {
83
+ minify: {
84
+ jsOptions: {
85
+ // Need to keep classnames and function names like Components for debugging purposes.
86
+ mangle: {
87
+ keep_classnames: true,
88
+ keep_fnames: true
89
+ }
90
+ }
91
+ }
92
+ }
93
+ };
94
+ return mergeRsbuildConfig(config, enableProfilerConfig);
95
+ });
96
+ api.modifyBundlerChain((chain) => {
97
+ chain.resolve.alias.set("react-dom$", "react-dom/profiling");
98
+ chain.resolve.alias.set("scheduler/tracing", "scheduler/tracing-profiling");
99
+ });
100
+ };
101
+
102
+ // src/splitChunks.ts
103
+ var import_shared2 = require("@rsbuild/shared");
40
104
  var applySplitChunksRule = (api, options = {
41
105
  react: true,
42
106
  router: true
@@ -47,7 +111,7 @@ var applySplitChunksRule = (api, options = {
47
111
  return;
48
112
  }
49
113
  const currentConfig = chain.optimization.splitChunks.values();
50
- if (!(0, import_shared.isPlainObject)(currentConfig)) {
114
+ if (!(0, import_shared2.isPlainObject)(currentConfig)) {
51
115
  return;
52
116
  }
53
117
  const extraGroups = {};
@@ -56,7 +120,7 @@ var applySplitChunksRule = (api, options = {
56
120
  "react",
57
121
  "react-dom",
58
122
  "scheduler",
59
- ...(0, import_shared.isProd)() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
123
+ ...(0, import_shared2.isProd)() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
60
124
  ];
61
125
  }
62
126
  if (options.router) {
@@ -75,55 +139,26 @@ var applySplitChunksRule = (api, options = {
75
139
  // @ts-expect-error Rspack and Webpack uses different cacheGroups type
76
140
  cacheGroups: {
77
141
  ...currentConfig.cacheGroups,
78
- ...(0, import_shared.createCacheGroups)(extraGroups)
79
- }
80
- });
81
- });
82
- };
83
-
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;
142
+ ...(0, import_shared2.createCacheGroups)(extraGroups)
109
143
  }
110
144
  });
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
145
  });
118
146
  };
119
147
 
120
148
  // src/index.ts
121
149
  var PLUGIN_REACT_NAME = "rsbuild:react";
122
- var pluginReact = (options = {}) => ({
150
+ var pluginReact = ({
151
+ enableProfiler = false,
152
+ ...options
153
+ } = {}) => ({
123
154
  name: PLUGIN_REACT_NAME,
124
155
  setup(api) {
125
156
  if (api.context.bundlerType === "rspack") {
126
157
  applyBasicReactSupport(api, options);
158
+ const isProdProfile = enableProfiler && (0, import_shared3.getNodeEnv)() === "production";
159
+ if (isProdProfile) {
160
+ applyReactProfiler(api);
161
+ }
127
162
  }
128
163
  applySplitChunksRule(api, options?.splitChunks);
129
164
  }
package/dist/index.mjs CHANGED
@@ -9,15 +9,85 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
9
9
  throw Error('Dynamic require of "' + x + '" is not supported');
10
10
  });
11
11
 
12
- // ../../node_modules/.pnpm/@modern-js+module-tools@2.48.4/node_modules/@modern-js/module-tools/shims/esm.js
12
+ // ../../node_modules/.pnpm/@modern-js+module-tools@2.49.2_eslint@8.57.0_typescript@5.4.5/node_modules/@modern-js/module-tools/shims/esm.js
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, [
56
+ {
57
+ include: [SCRIPT_REGEX],
58
+ ...options.reactRefreshOptions
59
+ }
60
+ ]);
61
+ });
62
+ };
63
+ var applyReactProfiler = (api) => {
64
+ api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
65
+ const enableProfilerConfig = {
66
+ output: {
67
+ minify: {
68
+ jsOptions: {
69
+ // Need to keep classnames and function names like Components for debugging purposes.
70
+ mangle: {
71
+ keep_classnames: true,
72
+ keep_fnames: true
73
+ }
74
+ }
75
+ }
76
+ }
77
+ };
78
+ return mergeRsbuildConfig(config, enableProfilerConfig);
79
+ });
80
+ api.modifyBundlerChain((chain) => {
81
+ chain.resolve.alias.set("react-dom$", "react-dom/profiling");
82
+ chain.resolve.alias.set("scheduler/tracing", "scheduler/tracing-profiling");
83
+ });
84
+ };
85
+
16
86
  // src/splitChunks.ts
17
87
  import {
18
- isProd,
88
+ createCacheGroups,
19
89
  isPlainObject,
20
- createCacheGroups
90
+ isProd
21
91
  } from "@rsbuild/shared";
22
92
  var applySplitChunksRule = (api, options = {
23
93
  react: true,
@@ -63,53 +133,20 @@ var applySplitChunksRule = (api, options = {
63
133
  });
64
134
  };
65
135
 
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
136
  // src/index.ts
107
137
  var PLUGIN_REACT_NAME = "rsbuild:react";
108
- var pluginReact = (options = {}) => ({
138
+ var pluginReact = ({
139
+ enableProfiler = false,
140
+ ...options
141
+ } = {}) => ({
109
142
  name: PLUGIN_REACT_NAME,
110
143
  setup(api) {
111
144
  if (api.context.bundlerType === "rspack") {
112
145
  applyBasicReactSupport(api, options);
146
+ const isProdProfile = enableProfiler && getNodeEnv() === "production";
147
+ if (isProdProfile) {
148
+ applyReactProfiler(api);
149
+ }
113
150
  }
114
151
  applySplitChunksRule(api, options?.splitChunks);
115
152
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rsbuild/plugin-react",
3
- "version": "0.0.0-next-20240411025907",
3
+ "version": "0.0.0-next-20240510033042",
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.0",
26
- "react-refresh": "^0.14.0",
27
- "@rsbuild/shared": "0.0.0-next-20240411025907"
25
+ "@rspack/plugin-react-refresh": "0.6.5",
26
+ "react-refresh": "^0.14.2",
27
+ "@rsbuild/shared": "0.0.0-next-20240510033042"
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.0.0-next-20240411025907",
33
- "@scripts/test-helper": "0.0.0-next-20240411025907"
32
+ "@rsbuild/core": "0.0.0-next-20240510033042",
33
+ "@scripts/test-helper": "0.0.0-next-20240510033042"
34
34
  },
35
35
  "peerDependencies": {
36
- "@rsbuild/core": "0.0.0-next-20240411025907"
36
+ "@rsbuild/core": "0.0.0-next-20240510033042"
37
37
  },
38
38
  "publishConfig": {
39
39
  "access": "public",