@rsbuild/plugin-react 0.6.15 → 0.7.0-beta.1

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.cjs +175 -0
  2. package/dist/index.js +50 -57
  3. package/package.json +9 -9
  4. package/dist/index.mjs +0 -157
package/dist/index.cjs ADDED
@@ -0,0 +1,175 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // src/index.ts
31
+ var src_exports = {};
32
+ __export(src_exports, {
33
+ PLUGIN_REACT_NAME: () => PLUGIN_REACT_NAME,
34
+ pluginReact: () => pluginReact
35
+ });
36
+ module.exports = __toCommonJS(src_exports);
37
+ var import_shared3 = require("@rsbuild/shared");
38
+
39
+ // src/react.ts
40
+ var import_node_path = __toESM(require("path"));
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
+ 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);
69
+ }
70
+ });
71
+ if (!usingHMR) {
72
+ return;
73
+ }
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
+ });
83
+ };
84
+ var applyReactProfiler = (api) => {
85
+ api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
86
+ const enableProfilerConfig = {
87
+ output: {
88
+ minify: {
89
+ jsOptions: {
90
+ // Need to keep classnames and function names like Components for debugging purposes.
91
+ mangle: {
92
+ keep_classnames: true,
93
+ keep_fnames: true
94
+ }
95
+ }
96
+ }
97
+ }
98
+ };
99
+ return mergeRsbuildConfig(config, enableProfilerConfig);
100
+ });
101
+ api.modifyBundlerChain((chain) => {
102
+ chain.resolve.alias.set("react-dom$", "react-dom/profiling");
103
+ chain.resolve.alias.set("scheduler/tracing", "scheduler/tracing-profiling");
104
+ });
105
+ };
106
+
107
+ // src/splitChunks.ts
108
+ var import_shared2 = require("@rsbuild/shared");
109
+ var applySplitChunksRule = (api, options = {
110
+ react: true,
111
+ router: true
112
+ }) => {
113
+ api.modifyBundlerChain((chain) => {
114
+ const config = api.getNormalizedConfig();
115
+ if (config.performance.chunkSplit.strategy !== "split-by-experience") {
116
+ return;
117
+ }
118
+ const currentConfig = chain.optimization.splitChunks.values();
119
+ if (!(0, import_shared2.isPlainObject)(currentConfig)) {
120
+ return;
121
+ }
122
+ const extraGroups = {};
123
+ 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
+ ];
130
+ }
131
+ if (options.router) {
132
+ extraGroups.router = [
133
+ "react-router",
134
+ "react-router-dom",
135
+ "history",
136
+ /@remix-run[\\/]router/
137
+ ];
138
+ }
139
+ if (!Object.keys(extraGroups).length) {
140
+ return;
141
+ }
142
+ chain.optimization.splitChunks({
143
+ ...currentConfig,
144
+ // @ts-expect-error Rspack and Webpack uses different cacheGroups type
145
+ cacheGroups: {
146
+ ...currentConfig.cacheGroups,
147
+ ...(0, import_shared2.createCacheGroups)(extraGroups)
148
+ }
149
+ });
150
+ });
151
+ };
152
+
153
+ // src/index.ts
154
+ var PLUGIN_REACT_NAME = "rsbuild:react";
155
+ var pluginReact = ({
156
+ enableProfiler = false,
157
+ ...options
158
+ } = {}) => ({
159
+ name: PLUGIN_REACT_NAME,
160
+ setup(api) {
161
+ if (api.context.bundlerType === "rspack") {
162
+ applyBasicReactSupport(api, options);
163
+ const isProdProfile = enableProfiler && (0, import_shared3.getNodeEnv)() === "production";
164
+ if (isProdProfile) {
165
+ applyReactProfiler(api);
166
+ }
167
+ }
168
+ applySplitChunksRule(api, options?.splitChunks);
169
+ }
170
+ });
171
+ // Annotate the CommonJS export names for ESM import in node:
172
+ 0 && (module.exports = {
173
+ PLUGIN_REACT_NAME,
174
+ pluginReact
175
+ });
package/dist/index.js CHANGED
@@ -1,76 +1,66 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
1
+ import { createRequire } from 'module';
2
+ var require = createRequire(import.meta['url']);
29
3
 
30
- // src/index.ts
31
- var src_exports = {};
32
- __export(src_exports, {
33
- PLUGIN_REACT_NAME: () => PLUGIN_REACT_NAME,
34
- pluginReact: () => pluginReact
4
+ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
5
+ get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
6
+ }) : x)(function(x) {
7
+ if (typeof require !== "undefined")
8
+ return require.apply(this, arguments);
9
+ throw Error('Dynamic require of "' + x + '" is not supported');
35
10
  });
36
- module.exports = __toCommonJS(src_exports);
37
- var import_shared3 = require("@rsbuild/shared");
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
13
+ import { fileURLToPath } from "url";
14
+ import path from "path";
15
+
16
+ // src/index.ts
17
+ import { getNodeEnv } from "@rsbuild/shared";
38
18
 
39
19
  // src/react.ts
40
- var import_node_path = __toESM(require("path"));
41
- var import_shared = require("@rsbuild/shared");
20
+ import path2 from "path";
21
+ import {
22
+ SCRIPT_REGEX,
23
+ deepmerge,
24
+ isUsingHMR,
25
+ modifySwcLoaderOptions
26
+ } from "@rsbuild/shared";
42
27
  var applyBasicReactSupport = (api, options) => {
43
- const REACT_REFRESH_PATH = require.resolve("react-refresh");
28
+ const REACT_REFRESH_PATH = __require.resolve("react-refresh");
44
29
  api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
45
30
  const config = api.getNormalizedConfig();
46
- const usingHMR = (0, import_shared.isUsingHMR)(config, { isProd: isProd2, target });
31
+ const usingHMR = isUsingHMR(config, { isProd: isProd2, target });
47
32
  const reactOptions = {
48
33
  development: isDev,
49
34
  refresh: usingHMR,
50
35
  runtime: "automatic",
51
36
  ...options.swcReactOptions
52
37
  };
53
- (0, import_shared.modifySwcLoaderOptions)({
38
+ modifySwcLoaderOptions({
54
39
  chain,
55
40
  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
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
+ }
62
52
  };
63
- return opts;
53
+ return deepmerge(opts, extraOptions);
64
54
  }
65
55
  });
66
56
  if (!usingHMR) {
67
57
  return;
68
58
  }
69
- chain.resolve.alias.set("react-refresh", import_node_path.default.dirname(REACT_REFRESH_PATH));
59
+ chain.resolve.alias.set("react-refresh", path2.dirname(REACT_REFRESH_PATH));
70
60
  const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
71
61
  chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
72
62
  {
73
- include: [import_shared.SCRIPT_REGEX],
63
+ include: [SCRIPT_REGEX],
74
64
  ...options.reactRefreshOptions
75
65
  }
76
66
  ]);
@@ -100,7 +90,11 @@ var applyReactProfiler = (api) => {
100
90
  };
101
91
 
102
92
  // src/splitChunks.ts
103
- var import_shared2 = require("@rsbuild/shared");
93
+ import {
94
+ createCacheGroups,
95
+ isPlainObject,
96
+ isProd
97
+ } from "@rsbuild/shared";
104
98
  var applySplitChunksRule = (api, options = {
105
99
  react: true,
106
100
  router: true
@@ -111,7 +105,7 @@ var applySplitChunksRule = (api, options = {
111
105
  return;
112
106
  }
113
107
  const currentConfig = chain.optimization.splitChunks.values();
114
- if (!(0, import_shared2.isPlainObject)(currentConfig)) {
108
+ if (!isPlainObject(currentConfig)) {
115
109
  return;
116
110
  }
117
111
  const extraGroups = {};
@@ -120,7 +114,7 @@ var applySplitChunksRule = (api, options = {
120
114
  "react",
121
115
  "react-dom",
122
116
  "scheduler",
123
- ...(0, import_shared2.isProd)() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
117
+ ...isProd() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
124
118
  ];
125
119
  }
126
120
  if (options.router) {
@@ -139,7 +133,7 @@ var applySplitChunksRule = (api, options = {
139
133
  // @ts-expect-error Rspack and Webpack uses different cacheGroups type
140
134
  cacheGroups: {
141
135
  ...currentConfig.cacheGroups,
142
- ...(0, import_shared2.createCacheGroups)(extraGroups)
136
+ ...createCacheGroups(extraGroups)
143
137
  }
144
138
  });
145
139
  });
@@ -155,7 +149,7 @@ var pluginReact = ({
155
149
  setup(api) {
156
150
  if (api.context.bundlerType === "rspack") {
157
151
  applyBasicReactSupport(api, options);
158
- const isProdProfile = enableProfiler && (0, import_shared3.getNodeEnv)() === "production";
152
+ const isProdProfile = enableProfiler && getNodeEnv() === "production";
159
153
  if (isProdProfile) {
160
154
  applyReactProfiler(api);
161
155
  }
@@ -163,8 +157,7 @@ var pluginReact = ({
163
157
  applySplitChunksRule(api, options?.splitChunks);
164
158
  }
165
159
  });
166
- // Annotate the CommonJS export names for ESM import in node:
167
- 0 && (module.exports = {
160
+ export {
168
161
  PLUGIN_REACT_NAME,
169
162
  pluginReact
170
- });
163
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rsbuild/plugin-react",
3
- "version": "0.6.15",
3
+ "version": "0.7.0-beta.1",
4
4
  "description": "React plugin for Rsbuild",
5
5
  "repository": {
6
6
  "type": "git",
@@ -8,15 +8,15 @@
8
8
  "directory": "packages/plugin-react"
9
9
  },
10
10
  "license": "MIT",
11
- "type": "commonjs",
11
+ "type": "module",
12
12
  "exports": {
13
13
  ".": {
14
14
  "types": "./dist/index.d.ts",
15
- "import": "./dist/index.mjs",
16
- "default": "./dist/index.js"
15
+ "import": "./dist/index.js",
16
+ "require": "./dist/index.cjs"
17
17
  }
18
18
  },
19
- "main": "./dist/index.js",
19
+ "main": "./dist/index.cjs",
20
20
  "types": "./dist/index.d.ts",
21
21
  "files": [
22
22
  "dist"
@@ -24,16 +24,16 @@
24
24
  "dependencies": {
25
25
  "@rspack/plugin-react-refresh": "0.6.5",
26
26
  "react-refresh": "^0.14.2",
27
- "@rsbuild/shared": "0.6.15"
27
+ "@rsbuild/shared": "0.7.0-beta.1"
28
28
  },
29
29
  "devDependencies": {
30
30
  "@types/node": "18.x",
31
31
  "typescript": "^5.4.2",
32
- "@rsbuild/core": "0.6.15",
33
- "@scripts/test-helper": "0.6.15"
32
+ "@rsbuild/core": "0.7.0-beta.1",
33
+ "@scripts/test-helper": "0.7.0-beta.1"
34
34
  },
35
35
  "peerDependencies": {
36
- "@rsbuild/core": "^0.6.15"
36
+ "@rsbuild/core": "^0.7.0-beta.1"
37
37
  },
38
38
  "publishConfig": {
39
39
  "access": "public",
package/dist/index.mjs DELETED
@@ -1,157 +0,0 @@
1
- import { createRequire } from 'module';
2
- var require = createRequire(import.meta['url']);
3
-
4
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
5
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
6
- }) : x)(function(x) {
7
- if (typeof require !== "undefined")
8
- return require.apply(this, arguments);
9
- throw Error('Dynamic require of "' + x + '" is not supported');
10
- });
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
13
- import { fileURLToPath } from "url";
14
- import path from "path";
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
-
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
-
136
- // src/index.ts
137
- var PLUGIN_REACT_NAME = "rsbuild:react";
138
- var pluginReact = ({
139
- enableProfiler = false,
140
- ...options
141
- } = {}) => ({
142
- name: PLUGIN_REACT_NAME,
143
- setup(api) {
144
- if (api.context.bundlerType === "rspack") {
145
- applyBasicReactSupport(api, options);
146
- const isProdProfile = enableProfiler && getNodeEnv() === "production";
147
- if (isProdProfile) {
148
- applyReactProfiler(api);
149
- }
150
- }
151
- applySplitChunksRule(api, options?.splitChunks);
152
- }
153
- });
154
- export {
155
- PLUGIN_REACT_NAME,
156
- pluginReact
157
- };