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

package/dist/index.cjs

@@ -0,0 +1,175 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  PLUGIN_REACT_NAME: () => PLUGIN_REACT_NAME,
+  pluginReact: () => pluginReact
+});
+module.exports = __toCommonJS(src_exports);
+var import_shared3 = require("@rsbuild/shared");
+
+// src/react.ts
+var import_node_path = __toESM(require("path"));
+var import_shared = require("@rsbuild/shared");
+var applyBasicReactSupport = (api, options) => {
+  const REACT_REFRESH_PATH = require.resolve("react-refresh");
+  api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
+    const config = api.getNormalizedConfig();
+    const usingHMR = (0, import_shared.isUsingHMR)(config, { isProd: isProd2, target });
+    const reactOptions = {
+      development: isDev,
+      refresh: usingHMR,
+      runtime: "automatic",
+      ...options.swcReactOptions
+    };
+    (0, import_shared.modifySwcLoaderOptions)({
+      chain,
+      modifier: (opts) => {
+        const extraOptions = {
+          jsc: {
+            parser: {
+              syntax: "typescript",
+              // enable supports for React JSX/TSX compilation
+              tsx: true
+            },
+            transform: {
+              react: reactOptions
+            }
+          }
+        };
+        return (0, import_shared.deepmerge)(opts, extraOptions);
+      }
+    });
+    if (!usingHMR) {
+      return;
+    }
+    chain.resolve.alias.set("react-refresh", import_node_path.default.dirname(REACT_REFRESH_PATH));
+    const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
+    chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
+      {
+        include: [import_shared.SCRIPT_REGEX],
+        ...options.reactRefreshOptions
+      }
+    ]);
+  });
+};
+var applyReactProfiler = (api) => {
+  api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
+    const enableProfilerConfig = {
+      output: {
+        minify: {
+          jsOptions: {
+            // Need to keep classnames and function names like Components for debugging purposes.
+            mangle: {
+              keep_classnames: true,
+              keep_fnames: true
+            }
+          }
+        }
+      }
+    };
+    return mergeRsbuildConfig(config, enableProfilerConfig);
+  });
+  api.modifyBundlerChain((chain) => {
+    chain.resolve.alias.set("react-dom$", "react-dom/profiling");
+    chain.resolve.alias.set("scheduler/tracing", "scheduler/tracing-profiling");
+  });
+};
+
+// src/splitChunks.ts
+var import_shared2 = require("@rsbuild/shared");
+var applySplitChunksRule = (api, options = {
+  react: true,
+  router: true
+}) => {
+  api.modifyBundlerChain((chain) => {
+    const config = api.getNormalizedConfig();
+    if (config.performance.chunkSplit.strategy !== "split-by-experience") {
+      return;
+    }
+    const currentConfig = chain.optimization.splitChunks.values();
+    if (!(0, import_shared2.isPlainObject)(currentConfig)) {
+      return;
+    }
+    const extraGroups = {};
+    if (options.react) {
+      extraGroups.react = [
+        "react",
+        "react-dom",
+        "scheduler",
+        ...(0, import_shared2.isProd)() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
+      ];
+    }
+    if (options.router) {
+      extraGroups.router = [
+        "react-router",
+        "react-router-dom",
+        "history",
+        /@remix-run[\\/]router/
+      ];
+    }
+    if (!Object.keys(extraGroups).length) {
+      return;
+    }
+    chain.optimization.splitChunks({
+      ...currentConfig,
+      // @ts-expect-error Rspack and Webpack uses different cacheGroups type
+      cacheGroups: {
+        ...currentConfig.cacheGroups,
+        ...(0, import_shared2.createCacheGroups)(extraGroups)
+      }
+    });
+  });
+};
+
+// src/index.ts
+var PLUGIN_REACT_NAME = "rsbuild:react";
+var pluginReact = ({
+  enableProfiler = false,
+  ...options
+} = {}) => ({
+  name: PLUGIN_REACT_NAME,
+  setup(api) {
+    if (api.context.bundlerType === "rspack") {
+      applyBasicReactSupport(api, options);
+      const isProdProfile = enableProfiler && (0, import_shared3.getNodeEnv)() === "production";
+      if (isProdProfile) {
+        applyReactProfiler(api);
+      }
+    }
+    applySplitChunksRule(api, options?.splitChunks);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PLUGIN_REACT_NAME,
+  pluginReact
+});

package/dist/index.d.ts

@@ -1,7 +1,6 @@
-import { Rspack, RsbuildPlugin } from '@rsbuild/core';
-import { PluginOptions } from '@rspack/plugin-react-refresh';
-
-type SplitReactChunkOptions = {
+import type { RsbuildPlugin, Rspack } from '@rsbuild/core';
+import type { PluginOptions as ReactRefreshOptions } from '@rspack/plugin-react-refresh';
+export type SplitReactChunkOptions = {
     /**
      * Whether to enable split chunking for React-related dependencies (e.g., react, react-dom, scheduler).
      *
@@ -15,7 +14,7 @@ type SplitReactChunkOptions = {
      */
     router?: boolean;
 };
-type PluginReactOptions = {
+export type PluginReactOptions = {
     /**
      * Configure the behavior of SWC to transform React code,
      * the same as SWC's [jsc.transform.react](https://swc.rs/docs/configuration/compilation#jsctransformreact).
@@ -34,9 +33,7 @@ type PluginReactOptions = {
      * Options passed to `@rspack/plugin-react-refresh`
      * @see https://rspack.dev/guide/tech/react#rspackplugin-react-refresh
      */
-    reactRefreshOptions?: PluginOptions;
+    reactRefreshOptions?: ReactRefreshOptions;
 };
-declare const PLUGIN_REACT_NAME = "rsbuild:react";
-declare const pluginReact: ({ enableProfiler, ...options }?: PluginReactOptions) => RsbuildPlugin;
-
-export { PLUGIN_REACT_NAME, type PluginReactOptions, type SplitReactChunkOptions, pluginReact };
+export declare const PLUGIN_REACT_NAME = "rsbuild:react";
+export declare const pluginReact: ({ enableProfiler, ...options }?: PluginReactOptions) => RsbuildPlugin;

package/dist/index.js

@@ -1,76 +1,66 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+import { createRequire } from 'module';
+var require = createRequire(import.meta['url']);
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  PLUGIN_REACT_NAME: () => PLUGIN_REACT_NAME,
-  pluginReact: () => pluginReact
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
 });
-module.exports = __toCommonJS(src_exports);
-var import_shared3 = require("@rsbuild/shared");
+
+// ../../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
+import { fileURLToPath } from "url";
+import path from "path";
+
+// src/index.ts
+import { getNodeEnv } from "@rsbuild/shared";
 
 // src/react.ts
-var import_node_path = __toESM(require("path"));
-var import_shared = require("@rsbuild/shared");
+import path2 from "path";
+import {
+  SCRIPT_REGEX,
+  deepmerge,
+  isUsingHMR,
+  modifySwcLoaderOptions
+} from "@rsbuild/shared";
 var applyBasicReactSupport = (api, options) => {
-  const REACT_REFRESH_PATH = require.resolve("react-refresh");
+  const REACT_REFRESH_PATH = __require.resolve("react-refresh");
   api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
     const config = api.getNormalizedConfig();
-    const usingHMR = (0, import_shared.isUsingHMR)(config, { isProd: isProd2, target });
+    const usingHMR = isUsingHMR(config, { isProd: isProd2, target });
     const reactOptions = {
       development: isDev,
       refresh: usingHMR,
       runtime: "automatic",
       ...options.swcReactOptions
     };
-    (0, import_shared.modifySwcLoaderOptions)({
+    modifySwcLoaderOptions({
       chain,
       modifier: (opts) => {
-        var _a;
-        opts.jsc ?? (opts.jsc = {});
-        (_a = opts.jsc).transform ?? (_a.transform = {});
-        opts.jsc.transform.react = {
-          ...opts.jsc.transform.react,
-          ...reactOptions
+        const extraOptions = {
+          jsc: {
+            parser: {
+              syntax: "typescript",
+              // enable supports for React JSX/TSX compilation
+              tsx: true
+            },
+            transform: {
+              react: reactOptions
+            }
+          }
         };
-        return opts;
+        return deepmerge(opts, extraOptions);
       }
     });
     if (!usingHMR) {
       return;
     }
-    chain.resolve.alias.set("react-refresh", import_node_path.default.dirname(REACT_REFRESH_PATH));
+    chain.resolve.alias.set("react-refresh", path2.dirname(REACT_REFRESH_PATH));
     const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
     chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
       {
-        include: [import_shared.SCRIPT_REGEX],
+        include: [SCRIPT_REGEX],
         ...options.reactRefreshOptions
       }
     ]);
@@ -100,7 +90,11 @@ var applyReactProfiler = (api) => {
 };
 
 // src/splitChunks.ts
-var import_shared2 = require("@rsbuild/shared");
+import {
+  createCacheGroups,
+  isPlainObject,
+  isProd
+} from "@rsbuild/shared";
 var applySplitChunksRule = (api, options = {
   react: true,
   router: true
@@ -111,7 +105,7 @@ var applySplitChunksRule = (api, options = {
       return;
     }
     const currentConfig = chain.optimization.splitChunks.values();
-    if (!(0, import_shared2.isPlainObject)(currentConfig)) {
+    if (!isPlainObject(currentConfig)) {
       return;
     }
     const extraGroups = {};
@@ -120,7 +114,7 @@ var applySplitChunksRule = (api, options = {
         "react",
         "react-dom",
         "scheduler",
-        ...(0, import_shared2.isProd)() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
+        ...isProd() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
       ];
     }
     if (options.router) {
@@ -139,7 +133,7 @@ var applySplitChunksRule = (api, options = {
       // @ts-expect-error Rspack and Webpack uses different cacheGroups type
       cacheGroups: {
         ...currentConfig.cacheGroups,
-        ...(0, import_shared2.createCacheGroups)(extraGroups)
+        ...createCacheGroups(extraGroups)
       }
     });
   });
@@ -155,7 +149,7 @@ var pluginReact = ({
   setup(api) {
     if (api.context.bundlerType === "rspack") {
       applyBasicReactSupport(api, options);
-      const isProdProfile = enableProfiler && (0, import_shared3.getNodeEnv)() === "production";
+      const isProdProfile = enableProfiler && getNodeEnv() === "production";
       if (isProdProfile) {
         applyReactProfiler(api);
       }
@@ -163,8 +157,7 @@ var pluginReact = ({
     applySplitChunksRule(api, options?.splitChunks);
   }
 });
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   PLUGIN_REACT_NAME,
   pluginReact
-});
+};

package/dist/react.d.ts

@@ -0,0 +1,4 @@
+import type { RsbuildPluginAPI } from '@rsbuild/core';
+import type { PluginReactOptions } from '.';
+export declare const applyBasicReactSupport: (api: RsbuildPluginAPI, options: PluginReactOptions) => void;
+export declare const applyReactProfiler: (api: RsbuildPluginAPI) => void;

package/dist/splitChunks.d.ts

@@ -0,0 +1,3 @@
+import type { RsbuildPluginAPI } from '@rsbuild/core';
+import type { SplitReactChunkOptions } from '.';
+export declare const applySplitChunksRule: (api: RsbuildPluginAPI, options?: SplitReactChunkOptions) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsbuild/plugin-react",
-  "version": "0.6.15",
+  "version": "0.7.0-beta.0",
   "description": "React plugin for Rsbuild",
   "repository": {
     "type": "git",
@@ -8,15 +8,15 @@
     "directory": "packages/plugin-react"
   },
   "license": "MIT",
-  "type": "commonjs",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "default": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
@@ -24,16 +24,16 @@
   "dependencies": {
     "@rspack/plugin-react-refresh": "0.6.5",
     "react-refresh": "^0.14.2",
-    "@rsbuild/shared": "0.6.15"
+    "@rsbuild/shared": "0.7.0-beta.0"
   },
   "devDependencies": {
     "@types/node": "18.x",
     "typescript": "^5.4.2",
-    "@rsbuild/core": "0.6.15",
-    "@scripts/test-helper": "0.6.15"
+    "@rsbuild/core": "0.7.0-beta.0",
+    "@scripts/test-helper": "0.7.0-beta.0"
   },
   "peerDependencies": {
-    "@rsbuild/core": "^0.6.15"
+    "@rsbuild/core": "^0.7.0-beta.0"
   },
   "publishConfig": {
     "access": "public",

package/dist/index.mjs

@@ -1,157 +0,0 @@
-import { createRequire } from 'module';
-var require = createRequire(import.meta['url']);
-
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// ../../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
-import { fileURLToPath } from "url";
-import path from "path";
-
-// src/index.ts
-import { getNodeEnv } from "@rsbuild/shared";
-
-// src/react.ts
-import path2 from "path";
-import {
-  SCRIPT_REGEX,
-  isUsingHMR,
-  modifySwcLoaderOptions
-} from "@rsbuild/shared";
-var applyBasicReactSupport = (api, options) => {
-  const REACT_REFRESH_PATH = __require.resolve("react-refresh");
-  api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd: isProd2, target }) => {
-    const config = api.getNormalizedConfig();
-    const usingHMR = isUsingHMR(config, { isProd: isProd2, target });
-    const reactOptions = {
-      development: isDev,
-      refresh: usingHMR,
-      runtime: "automatic",
-      ...options.swcReactOptions
-    };
-    modifySwcLoaderOptions({
-      chain,
-      modifier: (opts) => {
-        var _a;
-        opts.jsc ?? (opts.jsc = {});
-        (_a = opts.jsc).transform ?? (_a.transform = {});
-        opts.jsc.transform.react = {
-          ...opts.jsc.transform.react,
-          ...reactOptions
-        };
-        return opts;
-      }
-    });
-    if (!usingHMR) {
-      return;
-    }
-    chain.resolve.alias.set("react-refresh", path2.dirname(REACT_REFRESH_PATH));
-    const { default: ReactRefreshRspackPlugin } = await import("@rspack/plugin-react-refresh");
-    chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).use(ReactRefreshRspackPlugin, [
-      {
-        include: [SCRIPT_REGEX],
-        ...options.reactRefreshOptions
-      }
-    ]);
-  });
-};
-var applyReactProfiler = (api) => {
-  api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
-    const enableProfilerConfig = {
-      output: {
-        minify: {
-          jsOptions: {
-            // Need to keep classnames and function names like Components for debugging purposes.
-            mangle: {
-              keep_classnames: true,
-              keep_fnames: true
-            }
-          }
-        }
-      }
-    };
-    return mergeRsbuildConfig(config, enableProfilerConfig);
-  });
-  api.modifyBundlerChain((chain) => {
-    chain.resolve.alias.set("react-dom$", "react-dom/profiling");
-    chain.resolve.alias.set("scheduler/tracing", "scheduler/tracing-profiling");
-  });
-};
-
-// src/splitChunks.ts
-import {
-  createCacheGroups,
-  isPlainObject,
-  isProd
-} from "@rsbuild/shared";
-var applySplitChunksRule = (api, options = {
-  react: true,
-  router: true
-}) => {
-  api.modifyBundlerChain((chain) => {
-    const config = api.getNormalizedConfig();
-    if (config.performance.chunkSplit.strategy !== "split-by-experience") {
-      return;
-    }
-    const currentConfig = chain.optimization.splitChunks.values();
-    if (!isPlainObject(currentConfig)) {
-      return;
-    }
-    const extraGroups = {};
-    if (options.react) {
-      extraGroups.react = [
-        "react",
-        "react-dom",
-        "scheduler",
-        ...isProd() ? [] : ["react-refresh", /@rspack[\\/]plugin-react-refresh/]
-      ];
-    }
-    if (options.router) {
-      extraGroups.router = [
-        "react-router",
-        "react-router-dom",
-        "history",
-        /@remix-run[\\/]router/
-      ];
-    }
-    if (!Object.keys(extraGroups).length) {
-      return;
-    }
-    chain.optimization.splitChunks({
-      ...currentConfig,
-      // @ts-expect-error Rspack and Webpack uses different cacheGroups type
-      cacheGroups: {
-        ...currentConfig.cacheGroups,
-        ...createCacheGroups(extraGroups)
-      }
-    });
-  });
-};
-
-// src/index.ts
-var PLUGIN_REACT_NAME = "rsbuild:react";
-var pluginReact = ({
-  enableProfiler = false,
-  ...options
-} = {}) => ({
-  name: PLUGIN_REACT_NAME,
-  setup(api) {
-    if (api.context.bundlerType === "rspack") {
-      applyBasicReactSupport(api, options);
-      const isProdProfile = enableProfiler && getNodeEnv() === "production";
-      if (isProdProfile) {
-        applyReactProfiler(api);
-      }
-    }
-    applySplitChunksRule(api, options?.splitChunks);
-  }
-});
-export {
-  PLUGIN_REACT_NAME,
-  pluginReact
-};