@rsbuild/plugin-react 0.6.5 → 0.6.7

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 +12 -3
  2. package/dist/index.js +58 -53
  3. package/dist/index.mjs +62 -55
  4. package/package.json +7 -7
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,12 +20,21 @@ 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
+ */
28
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;
29
38
  };
30
39
  declare const PLUGIN_REACT_NAME = "rsbuild:react";
31
40
  declare const pluginReact: ({ enableProfiler, ...options }?: PluginReactOptions) => RsbuildPlugin;
package/dist/index.js CHANGED
@@ -34,68 +34,23 @@ __export(src_exports, {
34
34
  pluginReact: () => pluginReact
35
35
  });
36
36
  module.exports = __toCommonJS(src_exports);
37
-
38
- // src/splitChunks.ts
39
- var import_shared = require("@rsbuild/shared");
40
- var applySplitChunksRule = (api, options = {
41
- react: true,
42
- router: true
43
- }) => {
44
- api.modifyBundlerChain((chain) => {
45
- const config = api.getNormalizedConfig();
46
- if (config.performance.chunkSplit.strategy !== "split-by-experience") {
47
- return;
48
- }
49
- const currentConfig = chain.optimization.splitChunks.values();
50
- if (!(0, import_shared.isPlainObject)(currentConfig)) {
51
- return;
52
- }
53
- const extraGroups = {};
54
- if (options.react) {
55
- extraGroups.react = [
56
- "react",
57
- "react-dom",
58
- "scheduler",
59
- ...(0, import_shared.isProd)() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
60
- ];
61
- }
62
- if (options.router) {
63
- extraGroups.router = [
64
- "react-router",
65
- "react-router-dom",
66
- "history",
67
- /@remix-run[\\/]router/
68
- ];
69
- }
70
- if (!Object.keys(extraGroups).length) {
71
- return;
72
- }
73
- chain.optimization.splitChunks({
74
- ...currentConfig,
75
- // @ts-expect-error Rspack and Webpack uses different cacheGroups type
76
- cacheGroups: {
77
- ...currentConfig.cacheGroups,
78
- ...(0, import_shared.createCacheGroups)(extraGroups)
79
- }
80
- });
81
- });
82
- };
37
+ var import_shared3 = require("@rsbuild/shared");
83
38
 
84
39
  // src/react.ts
85
40
  var import_node_path = __toESM(require("path"));
86
- var import_shared2 = require("@rsbuild/shared");
41
+ var import_shared = require("@rsbuild/shared");
87
42
  var applyBasicReactSupport = (api, options) => {
88
43
  const REACT_REFRESH_PATH = require.resolve("react-refresh");
89
44
  api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
90
45
  const config = api.getNormalizedConfig();
91
- const usingHMR = (0, import_shared2.isUsingHMR)(config, { isProd: isProd2, target });
46
+ const usingHMR = (0, import_shared.isUsingHMR)(config, { isProd: isProd2, target });
92
47
  const reactOptions = {
93
48
  development: isDev,
94
49
  refresh: usingHMR,
95
50
  runtime: "automatic",
96
51
  ...options.swcReactOptions
97
52
  };
98
- (0, import_shared2.modifySwcLoaderOptions)({
53
+ (0, import_shared.modifySwcLoaderOptions)({
99
54
  chain,
100
55
  modifier: (opts) => {
101
56
  var _a;
@@ -113,7 +68,12 @@ var applyBasicReactSupport = (api, options) => {
113
68
  }
114
69
  chain.resolve.alias.set("react-refresh", import_node_path.default.dirname(REACT_REFRESH_PATH));
115
70
  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] }]);
71
+ chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
72
+ {
73
+ include: [import_shared.SCRIPT_REGEX],
74
+ ...options.reactRefreshOptions
75
+ }
76
+ ]);
117
77
  });
118
78
  };
119
79
  var applyReactProfiler = (api) => {
@@ -139,8 +99,53 @@ var applyReactProfiler = (api) => {
139
99
  });
140
100
  };
141
101
 
102
+ // src/splitChunks.ts
103
+ var import_shared2 = require("@rsbuild/shared");
104
+ var applySplitChunksRule = (api, options = {
105
+ react: true,
106
+ router: true
107
+ }) => {
108
+ api.modifyBundlerChain((chain) => {
109
+ const config = api.getNormalizedConfig();
110
+ if (config.performance.chunkSplit.strategy !== "split-by-experience") {
111
+ return;
112
+ }
113
+ const currentConfig = chain.optimization.splitChunks.values();
114
+ if (!(0, import_shared2.isPlainObject)(currentConfig)) {
115
+ return;
116
+ }
117
+ const extraGroups = {};
118
+ if (options.react) {
119
+ extraGroups.react = [
120
+ "react",
121
+ "react-dom",
122
+ "scheduler",
123
+ ...(0, import_shared2.isProd)() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
124
+ ];
125
+ }
126
+ if (options.router) {
127
+ extraGroups.router = [
128
+ "react-router",
129
+ "react-router-dom",
130
+ "history",
131
+ /@remix-run[\\/]router/
132
+ ];
133
+ }
134
+ if (!Object.keys(extraGroups).length) {
135
+ return;
136
+ }
137
+ chain.optimization.splitChunks({
138
+ ...currentConfig,
139
+ // @ts-expect-error Rspack and Webpack uses different cacheGroups type
140
+ cacheGroups: {
141
+ ...currentConfig.cacheGroups,
142
+ ...(0, import_shared2.createCacheGroups)(extraGroups)
143
+ }
144
+ });
145
+ });
146
+ };
147
+
142
148
  // src/index.ts
143
- var import_shared3 = require("@rsbuild/shared");
144
149
  var PLUGIN_REACT_NAME = "rsbuild:react";
145
150
  var pluginReact = ({
146
151
  enableProfiler = false,
@@ -148,10 +153,10 @@ var pluginReact = ({
148
153
  } = {}) => ({
149
154
  name: PLUGIN_REACT_NAME,
150
155
  setup(api) {
151
- const isEnvProductionProfile = enableProfiler && (0, import_shared3.getNodeEnv)() === "production";
152
156
  if (api.context.bundlerType === "rspack") {
153
157
  applyBasicReactSupport(api, options);
154
- if (isEnvProductionProfile) {
158
+ const isProdProfile = enableProfiler && (0, import_shared3.getNodeEnv)() === "production";
159
+ if (isProdProfile) {
155
160
  applyReactProfiler(api);
156
161
  }
157
162
  }
package/dist/index.mjs CHANGED
@@ -9,65 +9,18 @@ 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.49.0_eslint@8.57.0_typescript@5.4.5/node_modules/@modern-js/module-tools/shims/esm.js
12
+ // ../../node_modules/.pnpm/@modern-js+module-tools@2.49.1_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/splitChunks.ts
17
- import {
18
- isProd,
19
- isPlainObject,
20
- createCacheGroups
21
- } from "@rsbuild/shared";
22
- var applySplitChunksRule = (api, options = {
23
- react: true,
24
- router: true
25
- }) => {
26
- api.modifyBundlerChain((chain) => {
27
- const config = api.getNormalizedConfig();
28
- if (config.performance.chunkSplit.strategy !== "split-by-experience") {
29
- return;
30
- }
31
- const currentConfig = chain.optimization.splitChunks.values();
32
- if (!isPlainObject(currentConfig)) {
33
- return;
34
- }
35
- const extraGroups = {};
36
- if (options.react) {
37
- extraGroups.react = [
38
- "react",
39
- "react-dom",
40
- "scheduler",
41
- ...isProd() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
42
- ];
43
- }
44
- if (options.router) {
45
- extraGroups.router = [
46
- "react-router",
47
- "react-router-dom",
48
- "history",
49
- /@remix-run[\\/]router/
50
- ];
51
- }
52
- if (!Object.keys(extraGroups).length) {
53
- return;
54
- }
55
- chain.optimization.splitChunks({
56
- ...currentConfig,
57
- // @ts-expect-error Rspack and Webpack uses different cacheGroups type
58
- cacheGroups: {
59
- ...currentConfig.cacheGroups,
60
- ...createCacheGroups(extraGroups)
61
- }
62
- });
63
- });
64
- };
16
+ // src/index.ts
17
+ import { getNodeEnv } from "@rsbuild/shared";
65
18
 
66
19
  // src/react.ts
67
20
  import path2 from "path";
68
21
  import {
69
- isUsingHMR,
70
22
  SCRIPT_REGEX,
23
+ isUsingHMR,
71
24
  modifySwcLoaderOptions
72
25
  } from "@rsbuild/shared";
73
26
  var applyBasicReactSupport = (api, options) => {
@@ -99,7 +52,12 @@ var applyBasicReactSupport = (api, options) => {
99
52
  }
100
53
  chain.resolve.alias.set("react-refresh", path2.dirname(REACT_REFRESH_PATH));
101
54
  const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
102
- chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [{ include: [SCRIPT_REGEX] }]);
55
+ chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
56
+ {
57
+ include: [SCRIPT_REGEX],
58
+ ...options.reactRefreshOptions
59
+ }
60
+ ]);
103
61
  });
104
62
  };
105
63
  var applyReactProfiler = (api) => {
@@ -125,8 +83,57 @@ var applyReactProfiler = (api) => {
125
83
  });
126
84
  };
127
85
 
86
+ // src/splitChunks.ts
87
+ import {
88
+ createCacheGroups,
89
+ isPlainObject,
90
+ isProd
91
+ } from "@rsbuild/shared";
92
+ var applySplitChunksRule = (api, options = {
93
+ react: true,
94
+ router: true
95
+ }) => {
96
+ api.modifyBundlerChain((chain) => {
97
+ const config = api.getNormalizedConfig();
98
+ if (config.performance.chunkSplit.strategy !== "split-by-experience") {
99
+ return;
100
+ }
101
+ const currentConfig = chain.optimization.splitChunks.values();
102
+ if (!isPlainObject(currentConfig)) {
103
+ return;
104
+ }
105
+ const extraGroups = {};
106
+ if (options.react) {
107
+ extraGroups.react = [
108
+ "react",
109
+ "react-dom",
110
+ "scheduler",
111
+ ...isProd() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
112
+ ];
113
+ }
114
+ if (options.router) {
115
+ extraGroups.router = [
116
+ "react-router",
117
+ "react-router-dom",
118
+ "history",
119
+ /@remix-run[\\/]router/
120
+ ];
121
+ }
122
+ if (!Object.keys(extraGroups).length) {
123
+ return;
124
+ }
125
+ chain.optimization.splitChunks({
126
+ ...currentConfig,
127
+ // @ts-expect-error Rspack and Webpack uses different cacheGroups type
128
+ cacheGroups: {
129
+ ...currentConfig.cacheGroups,
130
+ ...createCacheGroups(extraGroups)
131
+ }
132
+ });
133
+ });
134
+ };
135
+
128
136
  // src/index.ts
129
- import { getNodeEnv } from "@rsbuild/shared";
130
137
  var PLUGIN_REACT_NAME = "rsbuild:react";
131
138
  var pluginReact = ({
132
139
  enableProfiler = false,
@@ -134,10 +141,10 @@ var pluginReact = ({
134
141
  } = {}) => ({
135
142
  name: PLUGIN_REACT_NAME,
136
143
  setup(api) {
137
- const isEnvProductionProfile = enableProfiler && getNodeEnv() === "production";
138
144
  if (api.context.bundlerType === "rspack") {
139
145
  applyBasicReactSupport(api, options);
140
- if (isEnvProductionProfile) {
146
+ const isProdProfile = enableProfiler && getNodeEnv() === "production";
147
+ if (isProdProfile) {
141
148
  applyReactProfiler(api);
142
149
  }
143
150
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rsbuild/plugin-react",
3
- "version": "0.6.5",
3
+ "version": "0.6.7",
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.5"
27
+ "@rsbuild/shared": "0.6.7"
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.5",
33
- "@scripts/test-helper": "0.6.5"
32
+ "@rsbuild/core": "0.6.7",
33
+ "@scripts/test-helper": "0.6.7"
34
34
  },
35
35
  "peerDependencies": {
36
- "@rsbuild/core": "^0.6.5"
36
+ "@rsbuild/core": "^0.6.7"
37
37
  },
38
38
  "publishConfig": {
39
39
  "access": "public",