@rsbuild/plugin-react 0.0.0-next-20240528072128 → 0.0.0-next-20240723074951

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 (6) hide show
  1. package/dist/index.cjs +59 -61
  2. package/dist/index.d.ts +7 -10
  3. package/dist/index.js +59 -63
  4. package/dist/react.d.ts +4 -0
  5. package/dist/splitChunks.d.ts +3 -0
  6. package/package.json +7 -8
package/dist/index.cjs CHANGED
@@ -34,11 +34,9 @@ __export(src_exports, {
34
34
  pluginReact: () => pluginReact
35
35
  });
36
36
  module.exports = __toCommonJS(src_exports);
37
- var import_shared3 = require("@rsbuild/shared");
38
37
 
39
38
  // src/react.ts
40
39
  var import_node_path = __toESM(require("path"));
41
- var import_shared = require("@rsbuild/shared");
42
40
  var modifySwcLoaderOptions = ({
43
41
  chain,
44
42
  CHAIN_ID,
@@ -56,49 +54,52 @@ var modifySwcLoaderOptions = ({
56
54
  };
57
55
  var applyBasicReactSupport = (api, options) => {
58
56
  const REACT_REFRESH_PATH = require.resolve("react-refresh");
59
- api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
60
- const config = api.getNormalizedConfig();
61
- const usingHMR = (0, import_shared.isUsingHMR)(config, { isProd: isProd2, target });
62
- const reactOptions = {
63
- development: isDev,
64
- refresh: usingHMR,
65
- runtime: "automatic",
66
- ...options.swcReactOptions
67
- };
68
- modifySwcLoaderOptions({
69
- chain,
70
- CHAIN_ID,
71
- modifier: (opts) => {
72
- const extraOptions = {
73
- jsc: {
74
- parser: {
75
- syntax: "typescript",
76
- // enable supports for React JSX/TSX compilation
77
- tsx: true
78
- },
79
- transform: {
80
- react: reactOptions
81
- }
82
- }
83
- };
84
- return (0, import_shared.deepmerge)(opts, extraOptions);
57
+ api.modifyBundlerChain(
58
+ async (chain, { CHAIN_ID, environment, isDev, isProd, target }) => {
59
+ const { config } = environment;
60
+ const usingHMR = !isProd && config.dev.hmr && target === "web";
61
+ const reactOptions = {
62
+ development: isDev,
63
+ refresh: usingHMR,
64
+ runtime: "automatic",
65
+ ...options.swcReactOptions
66
+ };
67
+ modifySwcLoaderOptions({
68
+ chain,
69
+ CHAIN_ID,
70
+ modifier: (opts) => {
71
+ opts.jsc ||= {};
72
+ opts.jsc.transform ||= {};
73
+ opts.jsc.transform.react = reactOptions;
74
+ opts.jsc.parser = {
75
+ ...opts.jsc.parser,
76
+ syntax: "typescript",
77
+ // enable supports for React JSX/TSX compilation
78
+ tsx: true
79
+ };
80
+ return opts;
81
+ }
82
+ });
83
+ if (!usingHMR) {
84
+ return;
85
85
  }
86
- });
87
- if (!usingHMR) {
88
- return;
86
+ chain.resolve.alias.set(
87
+ "react-refresh",
88
+ import_node_path.default.dirname(REACT_REFRESH_PATH)
89
+ );
90
+ const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
91
+ const SCRIPT_REGEX = /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/;
92
+ chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
93
+ {
94
+ include: [SCRIPT_REGEX],
95
+ ...options.reactRefreshOptions
96
+ }
97
+ ]);
89
98
  }
90
- chain.resolve.alias.set("react-refresh", import_node_path.default.dirname(REACT_REFRESH_PATH));
91
- const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
92
- chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
93
- {
94
- include: [import_shared.SCRIPT_REGEX],
95
- ...options.reactRefreshOptions
96
- }
97
- ]);
98
- });
99
+ );
99
100
  };
100
101
  var applyReactProfiler = (api) => {
101
- api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
102
+ api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig }) => {
102
103
  const enableProfilerConfig = {
103
104
  output: {
104
105
  minify: {
@@ -112,7 +113,7 @@ var applyReactProfiler = (api) => {
112
113
  }
113
114
  }
114
115
  };
115
- return mergeRsbuildConfig(config, enableProfilerConfig);
116
+ return mergeEnvironmentConfig(config, enableProfilerConfig);
116
117
  });
117
118
  api.modifyBundlerChain((chain) => {
118
119
  chain.resolve.alias.set("react-dom$", "react-dom/profiling");
@@ -121,46 +122,43 @@ var applyReactProfiler = (api) => {
121
122
  };
122
123
 
123
124
  // src/splitChunks.ts
124
- var import_shared2 = require("@rsbuild/shared");
125
+ var isPlainObject = (obj) => obj !== null && typeof obj === "object" && Object.prototype.toString.call(obj) === "[object Object]";
125
126
  var applySplitChunksRule = (api, options = {
126
127
  react: true,
127
128
  router: true
128
129
  }) => {
129
- api.modifyBundlerChain((chain) => {
130
- const config = api.getNormalizedConfig();
130
+ api.modifyBundlerChain((chain, { environment, isProd }) => {
131
+ const { config } = environment;
131
132
  if (config.performance.chunkSplit.strategy !== "split-by-experience") {
132
133
  return;
133
134
  }
134
135
  const currentConfig = chain.optimization.splitChunks.values();
135
- if (!(0, import_shared2.isPlainObject)(currentConfig)) {
136
+ if (!isPlainObject(currentConfig)) {
136
137
  return;
137
138
  }
138
139
  const extraGroups = {};
139
140
  if (options.react) {
140
- extraGroups.react = [
141
- "react",
142
- "react-dom",
143
- "scheduler",
144
- ...(0, import_shared2.isProd)() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
145
- ];
141
+ extraGroups.react = {
142
+ name: "lib-react",
143
+ test: isProd ? /node_modules[\\/](?:react|react-dom|scheduler)[\\/]/ : /node_modules[\\/](?:react|react-dom|scheduler|react-refresh|@rspack[\\/]plugin-react-refresh)[\\/]/,
144
+ priority: 0
145
+ };
146
146
  }
147
147
  if (options.router) {
148
- extraGroups.router = [
149
- "react-router",
150
- "react-router-dom",
151
- "history",
152
- /@remix-run[\\/]router/
153
- ];
148
+ extraGroups.router = {
149
+ name: "lib-router",
150
+ test: /node_modules[\\/](?:react-router|react-router-dom|history|@remix-run[\\/]router)[\\/]/,
151
+ priority: 0
152
+ };
154
153
  }
155
154
  if (!Object.keys(extraGroups).length) {
156
155
  return;
157
156
  }
158
157
  chain.optimization.splitChunks({
159
158
  ...currentConfig,
160
- // @ts-expect-error Rspack and Webpack uses different cacheGroups type
161
159
  cacheGroups: {
162
160
  ...currentConfig.cacheGroups,
163
- ...(0, import_shared2.createCacheGroups)(extraGroups)
161
+ ...extraGroups
164
162
  }
165
163
  });
166
164
  });
@@ -176,7 +174,7 @@ var pluginReact = ({
176
174
  setup(api) {
177
175
  if (api.context.bundlerType === "rspack") {
178
176
  applyBasicReactSupport(api, options);
179
- const isProdProfile = enableProfiler && (0, import_shared3.getNodeEnv)() === "production";
177
+ const isProdProfile = enableProfiler && process.env.NODE_ENV === "production";
180
178
  if (isProdProfile) {
181
179
  applyReactProfiler(api);
182
180
  }
package/dist/index.d.ts CHANGED
@@ -1,7 +1,6 @@
1
- import { Rspack, RsbuildPlugin } from '@rsbuild/core';
2
- import { PluginOptions } from '@rspack/plugin-react-refresh';
3
-
4
- type SplitReactChunkOptions = {
1
+ import type { RsbuildPlugin, Rspack } from '@rsbuild/core';
2
+ import type { PluginOptions as ReactRefreshOptions } from '@rspack/plugin-react-refresh';
3
+ export type SplitReactChunkOptions = {
5
4
  /**
6
5
  * Whether to enable split chunking for React-related dependencies (e.g., react, react-dom, scheduler).
7
6
  *
@@ -15,7 +14,7 @@ type SplitReactChunkOptions = {
15
14
  */
16
15
  router?: boolean;
17
16
  };
18
- type PluginReactOptions = {
17
+ export type PluginReactOptions = {
19
18
  /**
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).
@@ -34,9 +33,7 @@ type PluginReactOptions = {
34
33
  * Options passed to `@rspack/plugin-react-refresh`
35
34
  * @see https://rspack.dev/guide/tech/react#rspackplugin-react-refresh
36
35
  */
37
- reactRefreshOptions?: PluginOptions;
36
+ reactRefreshOptions?: ReactRefreshOptions;
38
37
  };
39
- declare const PLUGIN_REACT_NAME = "rsbuild:react";
40
- declare const pluginReact: ({ enableProfiler, ...options }?: PluginReactOptions) => RsbuildPlugin;
41
-
42
- export { PLUGIN_REACT_NAME, type PluginReactOptions, type SplitReactChunkOptions, pluginReact };
38
+ export declare const PLUGIN_REACT_NAME = "rsbuild:react";
39
+ export declare const pluginReact: ({ enableProfiler, ...options }?: PluginReactOptions) => RsbuildPlugin;
package/dist/index.js CHANGED
@@ -9,16 +9,12 @@ 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.50.0_eslint@9.3.0_typescript@5.4.5/node_modules/@modern-js/module-tools/shims/esm.js
12
+ // ../../node_modules/.pnpm/@modern-js+module-tools@2.56.0_typescript@5.5.2/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
16
  // src/react.ts
20
17
  import path2 from "path";
21
- import { SCRIPT_REGEX, deepmerge, isUsingHMR } from "@rsbuild/shared";
22
18
  var modifySwcLoaderOptions = ({
23
19
  chain,
24
20
  CHAIN_ID,
@@ -36,49 +32,52 @@ var modifySwcLoaderOptions = ({
36
32
  };
37
33
  var applyBasicReactSupport = (api, options) => {
38
34
  const REACT_REFRESH_PATH = __require.resolve("react-refresh");
39
- api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
40
- const config = api.getNormalizedConfig();
41
- const usingHMR = isUsingHMR(config, { isProd: isProd2, target });
42
- const reactOptions = {
43
- development: isDev,
44
- refresh: usingHMR,
45
- runtime: "automatic",
46
- ...options.swcReactOptions
47
- };
48
- modifySwcLoaderOptions({
49
- chain,
50
- CHAIN_ID,
51
- modifier: (opts) => {
52
- const extraOptions = {
53
- jsc: {
54
- parser: {
55
- syntax: "typescript",
56
- // enable supports for React JSX/TSX compilation
57
- tsx: true
58
- },
59
- transform: {
60
- react: reactOptions
61
- }
62
- }
63
- };
64
- return deepmerge(opts, extraOptions);
35
+ api.modifyBundlerChain(
36
+ async (chain, { CHAIN_ID, environment, isDev, isProd, target }) => {
37
+ const { config } = environment;
38
+ const usingHMR = !isProd && config.dev.hmr && target === "web";
39
+ const reactOptions = {
40
+ development: isDev,
41
+ refresh: usingHMR,
42
+ runtime: "automatic",
43
+ ...options.swcReactOptions
44
+ };
45
+ modifySwcLoaderOptions({
46
+ chain,
47
+ CHAIN_ID,
48
+ modifier: (opts) => {
49
+ opts.jsc ||= {};
50
+ opts.jsc.transform ||= {};
51
+ opts.jsc.transform.react = reactOptions;
52
+ opts.jsc.parser = {
53
+ ...opts.jsc.parser,
54
+ syntax: "typescript",
55
+ // enable supports for React JSX/TSX compilation
56
+ tsx: true
57
+ };
58
+ return opts;
59
+ }
60
+ });
61
+ if (!usingHMR) {
62
+ return;
65
63
  }
66
- });
67
- if (!usingHMR) {
68
- return;
64
+ chain.resolve.alias.set(
65
+ "react-refresh",
66
+ path2.dirname(REACT_REFRESH_PATH)
67
+ );
68
+ const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
69
+ const SCRIPT_REGEX = /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/;
70
+ chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
71
+ {
72
+ include: [SCRIPT_REGEX],
73
+ ...options.reactRefreshOptions
74
+ }
75
+ ]);
69
76
  }
70
- chain.resolve.alias.set("react-refresh", path2.dirname(REACT_REFRESH_PATH));
71
- const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
72
- chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
73
- {
74
- include: [SCRIPT_REGEX],
75
- ...options.reactRefreshOptions
76
- }
77
- ]);
78
- });
77
+ );
79
78
  };
80
79
  var applyReactProfiler = (api) => {
81
- api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
80
+ api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig }) => {
82
81
  const enableProfilerConfig = {
83
82
  output: {
84
83
  minify: {
@@ -92,7 +91,7 @@ var applyReactProfiler = (api) => {
92
91
  }
93
92
  }
94
93
  };
95
- return mergeRsbuildConfig(config, enableProfilerConfig);
94
+ return mergeEnvironmentConfig(config, enableProfilerConfig);
96
95
  });
97
96
  api.modifyBundlerChain((chain) => {
98
97
  chain.resolve.alias.set("react-dom$", "react-dom/profiling");
@@ -101,13 +100,13 @@ var applyReactProfiler = (api) => {
101
100
  };
102
101
 
103
102
  // src/splitChunks.ts
104
- import { createCacheGroups, isPlainObject, isProd } from "@rsbuild/shared";
103
+ var isPlainObject = (obj) => obj !== null && typeof obj === "object" && Object.prototype.toString.call(obj) === "[object Object]";
105
104
  var applySplitChunksRule = (api, options = {
106
105
  react: true,
107
106
  router: true
108
107
  }) => {
109
- api.modifyBundlerChain((chain) => {
110
- const config = api.getNormalizedConfig();
108
+ api.modifyBundlerChain((chain, { environment, isProd }) => {
109
+ const { config } = environment;
111
110
  if (config.performance.chunkSplit.strategy !== "split-by-experience") {
112
111
  return;
113
112
  }
@@ -117,30 +116,27 @@ var applySplitChunksRule = (api, options = {
117
116
  }
118
117
  const extraGroups = {};
119
118
  if (options.react) {
120
- extraGroups.react = [
121
- "react",
122
- "react-dom",
123
- "scheduler",
124
- ...isProd() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
125
- ];
119
+ extraGroups.react = {
120
+ name: "lib-react",
121
+ test: isProd ? /node_modules[\\/](?:react|react-dom|scheduler)[\\/]/ : /node_modules[\\/](?:react|react-dom|scheduler|react-refresh|@rspack[\\/]plugin-react-refresh)[\\/]/,
122
+ priority: 0
123
+ };
126
124
  }
127
125
  if (options.router) {
128
- extraGroups.router = [
129
- "react-router",
130
- "react-router-dom",
131
- "history",
132
- /@remix-run[\\/]router/
133
- ];
126
+ extraGroups.router = {
127
+ name: "lib-router",
128
+ test: /node_modules[\\/](?:react-router|react-router-dom|history|@remix-run[\\/]router)[\\/]/,
129
+ priority: 0
130
+ };
134
131
  }
135
132
  if (!Object.keys(extraGroups).length) {
136
133
  return;
137
134
  }
138
135
  chain.optimization.splitChunks({
139
136
  ...currentConfig,
140
- // @ts-expect-error Rspack and Webpack uses different cacheGroups type
141
137
  cacheGroups: {
142
138
  ...currentConfig.cacheGroups,
143
- ...createCacheGroups(extraGroups)
139
+ ...extraGroups
144
140
  }
145
141
  });
146
142
  });
@@ -156,7 +152,7 @@ var pluginReact = ({
156
152
  setup(api) {
157
153
  if (api.context.bundlerType === "rspack") {
158
154
  applyBasicReactSupport(api, options);
159
- const isProdProfile = enableProfiler && getNodeEnv() === "production";
155
+ const isProdProfile = enableProfiler && process.env.NODE_ENV === "production";
160
156
  if (isProdProfile) {
161
157
  applyReactProfiler(api);
162
158
  }
package/dist/react.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { RsbuildPluginAPI } from '@rsbuild/core';
2
+ import type { PluginReactOptions } from '.';
3
+ export declare const applyBasicReactSupport: (api: RsbuildPluginAPI, options: PluginReactOptions) => void;
4
+ export declare const applyReactProfiler: (api: RsbuildPluginAPI) => void;
package/dist/splitChunks.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { RsbuildPluginAPI } from '@rsbuild/core';
2
+ import type { SplitReactChunkOptions } from '.';
3
+ export declare const applySplitChunksRule: (api: RsbuildPluginAPI, options?: SplitReactChunkOptions) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rsbuild/plugin-react",
3
- "version": "0.0.0-next-20240528072128",
3
+ "version": "0.0.0-next-20240723074951",
4
4
  "description": "React plugin for Rsbuild",
5
5
  "repository": {
6
6
  "type": "git",
@@ -22,18 +22,17 @@
22
22
  "dist"
23
23
  ],
24
24
  "dependencies": {
25
- "@rspack/plugin-react-refresh": "0.7.0",
26
- "react-refresh": "^0.14.2",
27
- "@rsbuild/shared": "0.0.0-next-20240528072128"
25
+ "@rspack/plugin-react-refresh": "1.0.0-alpha.5",
26
+ "react-refresh": "^0.14.2"
28
27
  },
29
28
  "devDependencies": {
30
29
  "@types/node": "18.x",
31
- "typescript": "^5.4.2",
32
- "@rsbuild/core": "0.0.0-next-20240528072128",
33
- "@scripts/test-helper": "0.0.0-next-20240528072128"
30
+ "typescript": "^5.5.2",
31
+ "@rsbuild/core": "0.0.0-next-20240723074951",
32
+ "@scripts/test-helper": "0.0.0-next-20240723074951"
34
33
  },
35
34
  "peerDependencies": {
36
- "@rsbuild/core": "0.0.0-next-20240528072128"
35
+ "@rsbuild/core": "0.0.0-next-20240723074951"
37
36
  },
38
37
  "publishConfig": {
39
38
  "access": "public",