@rsbuild/plugin-react 0.0.0-next-20240514150515 → 0.0.0-next-20240708070719

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 (3) hide show
  1. package/dist/index.cjs +72 -58
  2. package/dist/index.js +72 -69
  3. package/package.json +7 -8
package/dist/index.cjs CHANGED
@@ -34,52 +34,69 @@ __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");
40
+ var modifySwcLoaderOptions = ({
41
+ chain,
42
+ CHAIN_ID,
43
+ modifier
44
+ }) => {
45
+ const ruleIds = [CHAIN_ID.RULE.JS, CHAIN_ID.RULE.JS_DATA_URI];
46
+ for (const ruleId of ruleIds) {
47
+ if (chain.module.rules.has(ruleId)) {
48
+ const rule = chain.module.rule(ruleId);
49
+ if (rule.uses.has(CHAIN_ID.USE.SWC)) {
50
+ rule.use(CHAIN_ID.USE.SWC).tap(modifier);
51
+ }
52
+ }
53
+ }
54
+ };
42
55
  var applyBasicReactSupport = (api, options) => {
43
56
  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
- const extraOptions = {
57
- jsc: {
58
- parser: {
59
- syntax: "typescript",
60
- // enable supports for React JSX/TSX compilation
61
- tsx: true
62
- },
63
- transform: {
64
- react: reactOptions
65
- }
66
- }
67
- };
68
- 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;
69
85
  }
70
- });
71
- if (!usingHMR) {
72
- 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
+ ]);
73
98
  }
74
- chain.resolve.alias.set("react-refresh", import_node_path.default.dirname(REACT_REFRESH_PATH));
75
- const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
76
- chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
77
- {
78
- include: [import_shared.SCRIPT_REGEX],
79
- ...options.reactRefreshOptions
80
- }
81
- ]);
82
- });
99
+ );
83
100
  };
84
101
  var applyReactProfiler = (api) => {
85
102
  api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
@@ -105,46 +122,43 @@ var applyReactProfiler = (api) => {
105
122
  };
106
123
 
107
124
  // src/splitChunks.ts
108
- var import_shared2 = require("@rsbuild/shared");
125
+ var isPlainObject = (obj) => obj !== null && typeof obj === "object" && Object.prototype.toString.call(obj) === "[object Object]";
109
126
  var applySplitChunksRule = (api, options = {
110
127
  react: true,
111
128
  router: true
112
129
  }) => {
113
- api.modifyBundlerChain((chain) => {
114
- const config = api.getNormalizedConfig();
130
+ api.modifyBundlerChain((chain, { environment, isProd }) => {
131
+ const { config } = environment;
115
132
  if (config.performance.chunkSplit.strategy !== "split-by-experience") {
116
133
  return;
117
134
  }
118
135
  const currentConfig = chain.optimization.splitChunks.values();
119
- if (!(0, import_shared2.isPlainObject)(currentConfig)) {
136
+ if (!isPlainObject(currentConfig)) {
120
137
  return;
121
138
  }
122
139
  const extraGroups = {};
123
140
  if (options.react) {
124
- extraGroups.react = [
125
- "react",
126
- "react-dom",
127
- "scheduler",
128
- ...(0, import_shared2.isProd)() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
129
- ];
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
+ };
130
146
  }
131
147
  if (options.router) {
132
- extraGroups.router = [
133
- "react-router",
134
- "react-router-dom",
135
- "history",
136
- /@remix-run[\\/]router/
137
- ];
148
+ extraGroups.router = {
149
+ name: "lib-router",
150
+ test: /node_modules[\\/](?:react-router|react-router-dom|history|@remix-run[\\/]router)[\\/]/,
151
+ priority: 0
152
+ };
138
153
  }
139
154
  if (!Object.keys(extraGroups).length) {
140
155
  return;
141
156
  }
142
157
  chain.optimization.splitChunks({
143
158
  ...currentConfig,
144
- // @ts-expect-error Rspack and Webpack uses different cacheGroups type
145
159
  cacheGroups: {
146
160
  ...currentConfig.cacheGroups,
147
- ...(0, import_shared2.createCacheGroups)(extraGroups)
161
+ ...extraGroups
148
162
  }
149
163
  });
150
164
  });
@@ -160,7 +174,7 @@ var pluginReact = ({
160
174
  setup(api) {
161
175
  if (api.context.bundlerType === "rspack") {
162
176
  applyBasicReactSupport(api, options);
163
- const isProdProfile = enableProfiler && (0, import_shared3.getNodeEnv)() === "production";
177
+ const isProdProfile = enableProfiler && process.env.NODE_ENV === "production";
164
178
  if (isProdProfile) {
165
179
  applyReactProfiler(api);
166
180
  }
package/dist/index.js CHANGED
@@ -9,62 +9,72 @@ 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.3_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.54.6_eslint@9.6.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 {
22
- SCRIPT_REGEX,
23
- deepmerge,
24
- isUsingHMR,
25
- modifySwcLoaderOptions
26
- } from "@rsbuild/shared";
18
+ var modifySwcLoaderOptions = ({
19
+ chain,
20
+ CHAIN_ID,
21
+ modifier
22
+ }) => {
23
+ const ruleIds = [CHAIN_ID.RULE.JS, CHAIN_ID.RULE.JS_DATA_URI];
24
+ for (const ruleId of ruleIds) {
25
+ if (chain.module.rules.has(ruleId)) {
26
+ const rule = chain.module.rule(ruleId);
27
+ if (rule.uses.has(CHAIN_ID.USE.SWC)) {
28
+ rule.use(CHAIN_ID.USE.SWC).tap(modifier);
29
+ }
30
+ }
31
+ }
32
+ };
27
33
  var applyBasicReactSupport = (api, options) => {
28
34
  const REACT_REFRESH_PATH = __require.resolve("react-refresh");
29
- api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
30
- const config = api.getNormalizedConfig();
31
- const usingHMR = isUsingHMR(config, { isProd: isProd2, target });
32
- const reactOptions = {
33
- development: isDev,
34
- refresh: usingHMR,
35
- runtime: "automatic",
36
- ...options.swcReactOptions
37
- };
38
- modifySwcLoaderOptions({
39
- chain,
40
- modifier: (opts) => {
41
- const extraOptions = {
42
- jsc: {
43
- parser: {
44
- syntax: "typescript",
45
- // enable supports for React JSX/TSX compilation
46
- tsx: true
47
- },
48
- transform: {
49
- react: reactOptions
50
- }
51
- }
52
- };
53
- 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;
54
63
  }
55
- });
56
- if (!usingHMR) {
57
- 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
+ ]);
58
76
  }
59
- chain.resolve.alias.set("react-refresh", path2.dirname(REACT_REFRESH_PATH));
60
- const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
61
- chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
62
- {
63
- include: [SCRIPT_REGEX],
64
- ...options.reactRefreshOptions
65
- }
66
- ]);
67
- });
77
+ );
68
78
  };
69
79
  var applyReactProfiler = (api) => {
70
80
  api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
@@ -90,17 +100,13 @@ var applyReactProfiler = (api) => {
90
100
  };
91
101
 
92
102
  // src/splitChunks.ts
93
- import {
94
- createCacheGroups,
95
- isPlainObject,
96
- isProd
97
- } from "@rsbuild/shared";
103
+ var isPlainObject = (obj) => obj !== null && typeof obj === "object" && Object.prototype.toString.call(obj) === "[object Object]";
98
104
  var applySplitChunksRule = (api, options = {
99
105
  react: true,
100
106
  router: true
101
107
  }) => {
102
- api.modifyBundlerChain((chain) => {
103
- const config = api.getNormalizedConfig();
108
+ api.modifyBundlerChain((chain, { environment, isProd }) => {
109
+ const { config } = environment;
104
110
  if (config.performance.chunkSplit.strategy !== "split-by-experience") {
105
111
  return;
106
112
  }
@@ -110,30 +116,27 @@ var applySplitChunksRule = (api, options = {
110
116
  }
111
117
  const extraGroups = {};
112
118
  if (options.react) {
113
- extraGroups.react = [
114
- "react",
115
- "react-dom",
116
- "scheduler",
117
- ...isProd() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
118
- ];
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
+ };
119
124
  }
120
125
  if (options.router) {
121
- extraGroups.router = [
122
- "react-router",
123
- "react-router-dom",
124
- "history",
125
- /@remix-run[\\/]router/
126
- ];
126
+ extraGroups.router = {
127
+ name: "lib-router",
128
+ test: /node_modules[\\/](?:react-router|react-router-dom|history|@remix-run[\\/]router)[\\/]/,
129
+ priority: 0
130
+ };
127
131
  }
128
132
  if (!Object.keys(extraGroups).length) {
129
133
  return;
130
134
  }
131
135
  chain.optimization.splitChunks({
132
136
  ...currentConfig,
133
- // @ts-expect-error Rspack and Webpack uses different cacheGroups type
134
137
  cacheGroups: {
135
138
  ...currentConfig.cacheGroups,
136
- ...createCacheGroups(extraGroups)
139
+ ...extraGroups
137
140
  }
138
141
  });
139
142
  });
@@ -149,7 +152,7 @@ var pluginReact = ({
149
152
  setup(api) {
150
153
  if (api.context.bundlerType === "rspack") {
151
154
  applyBasicReactSupport(api, options);
152
- const isProdProfile = enableProfiler && getNodeEnv() === "production";
155
+ const isProdProfile = enableProfiler && process.env.NODE_ENV === "production";
153
156
  if (isProdProfile) {
154
157
  applyReactProfiler(api);
155
158
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rsbuild/plugin-react",
3
- "version": "0.0.0-next-20240514150515",
3
+ "version": "0.0.0-next-20240708070719",
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.6.5",
26
- "react-refresh": "^0.14.2",
27
- "@rsbuild/shared": "0.0.0-next-20240514150515"
25
+ "@rspack/plugin-react-refresh": "1.0.0-alpha.1",
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-20240514150515",
33
- "@scripts/test-helper": "0.0.0-next-20240514150515"
30
+ "typescript": "^5.5.2",
31
+ "@rsbuild/core": "0.0.0-next-20240708070719",
32
+ "@scripts/test-helper": "0.0.0-next-20240708070719"
34
33
  },
35
34
  "peerDependencies": {
36
- "@rsbuild/core": "0.0.0-next-20240514150515"
35
+ "@rsbuild/core": "0.0.0-next-20240708070719"
37
36
  },
38
37
  "publishConfig": {
39
38
  "access": "public",