Merge branch 'main' into feature/dist_path_leading_slash

packages/core/package.json

@@ -90,7 +90,7 @@
     "reduce-configs": "^1.0.0",
     "rsbuild-dev-middleware": "0.1.1",
     "rslog": "^1.2.3",
-    "rspack-chain": "^1.0.0",
+    "rspack-chain": "^1.0.1",
     "rspack-manifest-plugin": "5.0.1",
     "sirv": "^2.0.4",
     "style-loader": "3.3.4",

packages/core/src/plugins/resolve.ts

@@ -88,7 +88,7 @@ export const pluginResolve = (): RsbuildPlugin => ({
     api.modifyBundlerChain({
       order: 'pre',
       handler: (chain, { environment, CHAIN_ID }) => {
-        const { config } = environment;
+        const { config, tsconfigPath } = environment;
 
         applyExtensions({ chain });
 
@@ -98,26 +98,20 @@ export const pluginResolve = (): RsbuildPlugin => ({
           rootPath: api.context.rootPath,
         });
 
-        // in some cases (modern.js), get error when fullySpecified rule after js rule
+        // In some cases (modern.js), there is an error if the fullySpecified rule is after the js rule
         applyFullySpecified({ chain, config, CHAIN_ID });
-      },
-    });
-
-    api.modifyRspackConfig(async (rspackConfig, { environment }) => {
-      const { tsconfigPath, config } = environment;
-
-      if (tsconfigPath && config.source.aliasStrategy === 'prefer-tsconfig') {
-        rspackConfig.resolve ||= {};
 
-        if (typeof rspackConfig.resolve.tsConfig === 'string') {
-          return;
+        if (
+          tsconfigPath &&
+          // Only Rspack has the tsConfig option
+          api.context.bundlerType === 'rspack' &&
+          config.source.aliasStrategy === 'prefer-tsconfig'
+        ) {
+          chain.resolve.tsConfig({
+            configFile: tsconfigPath,
+          });
         }
-
-        rspackConfig.resolve.tsConfig = {
-          configFile: tsconfigPath,
-          ...rspackConfig.resolve.tsConfig,
-        };
-      }
+      },
     });
   },
 });

packages/core/src/provider/build.ts

@@ -39,7 +39,9 @@ export const build = async (
     return {
       close: () =>
         new Promise((resolve) => {
-          watching.close(resolve);
+          watching.close(() => {
+            resolve();
+          });
         }),
     };
   }

website/docs/en/guide/advanced/environments.mdx

@@ -4,9 +4,18 @@ Rsbuild supports building outputs for multiple environments at the same time. Yo
 
 ## What is environment
 
-import Environment from '@en/shared/environment.mdx';
+The `environment` refers to the runtime environment for build output. Common environments include browsers, Node.js, and Workers. Rsbuild allows you to define any environment names and set build options for each environment individually.
 
-<Environment />
+A typical scenario is server-side rendering (SSR). You can define two environments, `web` and `node`, where the build targets ([output.target](/config/output/target)) are `web` and `node`. These are used for client-side rendering (CSR) and server-side rendering (SSR) scenarios.
+
+You can also define different environments for the same build target, for example:
+
+- Define `rsc` and `ssr` environments, both targeting `node`, used separately for React Server Components and SSR.
+- Define `desktop` and `mobile` environments, both targeting `web`, used separately for desktop and mobile browsers.
+
+Without the `environments` configuration, you would need to define multiple configurations for these scenarios and run multiple independent Rsbuild builds. Now, with the `environments` configuration, you can complete the build for multiple outputs in a single Rsbuild run (Rsbuild achieves this using Rspack's `MultiCompiler`).
+
+In Rsbuild, each `environment` is associated with an Rsbuild configuration, an Rspack configuration, and a set of build outputs. Rsbuild plugin developers can customize the build process for a specified environment based on the `environment` name, such as modifying Rsbuild or Rspack configurations, registering or removing plugins, adjusting Rspack rules, and viewing assets information.
 
 ## Environment configs
 

website/docs/en/guide/advanced/ssr.mdx

@@ -6,9 +6,11 @@ Please note that Rsbuild itself does not provide out-of-the-box SSR functionalit
 
 ## What is SSR
 
-import SSR from '@en/shared/ssr.mdx';
+SSR stands for "Server-Side Rendering". It means that the HTML of the web page is generated by the server and sent to the client, rather than sending only an empty HTML shell and relying on JavaScript to generate the page content.
 
-<SSR />
+In traditional client-side rendering, the server sends an empty HTML shell and some JavaScript scripts to the client, and then fetching data from the server's API and fills the page with dynamic content. This leads to slow initial page loading times and is not conducive to user experience and SEO.
+
+With SSR, the server generates HTML that already contains dynamic content and sends it to the client. This makes the initial page loading faster and more SEO-friendly, as search engines can crawl the rendered page.
 
 ## File Structure
 

website/docs/en/guide/basic/cli.mdx

@@ -171,7 +171,8 @@ If the current project has multiple build targets, such as building browser arti
 
 Inspect config succeed, open following files to view the content:
 
-  - Rsbuild Config: /project/dist/.rsbuild/rsbuild.config.mjs
+  - Rsbuild Config (web): /project/dist/.rsbuild/rsbuild.config.web.mjs
+  - Rsbuild Config (node): /project/dist/.rsbuild/rsbuild.config.node.mjs
   - Rspack Config (web): /project/dist/.rsbuild/rspack.config.web.mjs
   - Rspack Config (node): /project/dist/.rsbuild/rspack.config.node.mjs
 ```

website/docs/en/guide/start/glossary.mdx

@@ -2,7 +2,7 @@
 
 ## Bundler
 
-Refers to module bundlers such as [Rspack](https://rspack.dev/) and [Webpack](https://webpack.js.org/).
+Refers to module bundlers such as [Rspack](https://rspack.dev/) and [webpack](https://webpack.js.org/).
 
 The main goal of bundlers is to bundle JavaScript, CSS and other files together, and the bundled files can be used in the browser, Node.js or other environments. When bundler processes the Web application, it builds a dependency graph and then combines every module into one or more bundles.
 
@@ -14,9 +14,7 @@ In CSR, the server sends an empty HTML shell and some JavaScript scripts to the
 
 ## Environment
 
-import Environment from '@en/shared/environment.mdx';
-
-<Environment />
+The runtime environment for build output, see [Multi-Environment Builds](/guide/advanced/environments).
 
 ## Micro-frontend
 
@@ -29,44 +27,33 @@ It primarily addresses two problems:
 
 ## Modern.js
 
-Modern.js is an open source web engineering system from ByteDance, which provides multiple solutions to help developers solve problems in different development scenarios.
-
-- [Modern.js Repository](https://github.com/web-infra-dev/modern.js).
+[Modern.js](https://github.com/web-infra-dev/modern.js) is an open source web engineering system from ByteDance, which provides multiple solutions to help developers solve problems in different development scenarios.
 
 ## Module Federation
 
-Module Federation is an architectural pattern for the decentralization of JavaScript applications (similar to microservices on the server-side). It allows you to share code and resources among multiple JavaScript applications (or micro-frontends). This can help you:
-
-- Reduce code duplication
-- Improve code maintainability
-- Lower the overall size of your applications
-- Enhance the performance of your applications
+Module Federation is an architectural pattern for JavaScript application decomposition (similar to microservices on the server-side), allowing you to share code and resources between multiple JavaScript applications (or micro-frontends).
 
-Please refer to [Module Federation guide](/guide/advanced/module-federation) for details.
+See [Module Federation](/guide/advanced/module-federation) for more details.
 
 ## Rspack
 
-[Rspack](https://rspack.dev/) is a high performance JavaScript bundler based on Rust, with interoperability with the webpack ecosystem, allowing it to be integrated into webpack projects at a low cost while providing better build performance.
-
-Compared to webpack, Rspack has significantly improved build performance, thanks not only to the language advantages brought by Rust, but also to its parallel architecture and incremental compilation features. Benchmarking has shown that Rspack can provide 5-10 times better compilation performance.
+[Rspack](https://rspack.dev/) is a high performance JavaScript bundler written in Rust. It offers strong compatibility with the webpack ecosystem, allowing for seamless replacement of webpack, and provides lightning fast build speeds.
 
 ## Rspress
 
-Rspress is a fast static site generator based on Rsbuild.
-
-- [Rspress Repository](https://github.com/web-infra-dev/rspress).
+[Rspress](https://github.com/web-infra-dev/rspress) is a fast static site generator based on Rsbuild.
 
 ## SSR
 
-import SSR from '@en/shared/ssr.mdx';
+SSR stands for "Server-Side Rendering". It means that the HTML of the web page is generated by the server and sent to the client, rather than sending only an empty HTML shell and relying on JavaScript to generate the page content.
 
-<SSR />
+See [Server-Side Rendering (SSR)](/guide/advanced/ssr) for more details.
 
 ## SWC
 
-SWC (Speedy Web Compiler) is a transformer and minimizer for JavaScript and TypeScript based on Rust. SWC can provide the same abilities with Babel, and it's more than 10x faster than Babel.
+SWC (Speedy Web Compiler) is a transformer and minimizer for JavaScript and TypeScript based on Rust.
 
-Rsbuild supports SWC by default, power your web application with polyfill and minification.
+See [Configure SWC](/guide/basic/configure-swc) for more details.
 
 ## More
 

website/docs/en/plugins/list/plugin-svgr.mdx

@@ -32,6 +32,8 @@ export default {
 
 ## Example
 
+### Default Usage
+
 After registering the plugin, when import an SVG in a JS file, if the imported path contains the `?react` suffix, Rsbuild will call SVGR to transform the SVG into a React component.
 
 ```jsx title="App.jsx"
@@ -48,14 +50,29 @@ import logoURL from './static/logo.svg';
 console.log(logoURL); // => "/static/logo.6c12aba3.png"
 ```
 
-Rsbuild also supports named imports of the `ReactComponent` to use SVGR:
+### Named Import
+
+`@rsbuild/plugin-svgr` supports named imports for `ReactComponent` when using SVGR. You need to set [svgrOptions.exportType](#svgroptionsexporttype) to `'named'`:
+
+```js
+pluginSvgr({
+  svgrOptions: {
+    exportType: 'named',
+  },
+});
+```
 
 ```jsx title="App.jsx"
 import { ReactComponent as Logo } from './logo.svg';
 
 export const App = () => <Logo />;
 ```
 
+`@rsbuild/plugin-svgr` also supports default imports and mixed imports:
+
+- Enable default imports by setting [svgrOptions.exportType](#svgroptionsexporttype) to `'default'`.
+- Enable mixed imports by setting the [mixedImport](#mixedimport) option to use both default and named imports at the same time.
+
 ## Options
 
 If you need to customize the compilation behavior of Svgr, you can use the following configs.
@@ -163,8 +180,8 @@ Set the export type of SVG React components.
 
 `exportType` can be set as:
 
-- `default`: use default export
-- `named`: use named export (`ReactComponent`)
+- `default`: use default export.
+- `named`: use `ReactComponent` named export.
 
 For example, set the default export of SVG file as a React component:
 

website/docs/zh/guide/advanced/environments.mdx

@@ -4,9 +4,18 @@ Rsbuild 支持同时为多个环境构建产物。你可以使用 [environments]
 
 ## 什么是 environment
 
-import Environment from '@zh/shared/environment.mdx';
+`environment` 指的是构建产物的运行环境，常见的运行环境有浏览器、Node.js 和 Workers。Rsbuild 允许你定义任意的 environment 名称，并为这些 environment 分别设置构建选项。
 
-<Environment />
+一个典型的场景是服务器端渲染（SSR），你可以定义 `web` 和 `node` 两个 environments，它们的构建目标（[output.target](/config/output/target)）分别是 `web` 和 `node`，并用于客户端渲染（CSR）和服务器端渲染（SSR）场景。
+
+此外，你还可以为同一个构建目标定义不同的 environment，例如：
+
+- 定义 `rsc` 和 `ssr` 两个环境，它们的构建目标都是 `node`，分别用于 React Server Components 和 SSR。
+- 定义 `desktop` 和 `mobile` 两个环境，它们的构建目标都是 ` web`，分别用于桌面端浏览器和移动端浏览器。
+
+如果没有 `environments` 配置，你需要为这些场景定义多份配置，并执行多次独立的 Rsbuild 构建。现在通过 `environments` 配置，你可以在一次 Rsbuild 构建中完成多种产物的构建（Rsbuild 基于 Rspack 的 `MultiCompiler` 来实现这一点）。
+
+Rsbuild 中的每个 `environment` 关联一份 Rsbuild 配置、一份 Rspack 配置和一份构建产物。Rsbuild 插件的开发者可以基于 `environment` 名称，对指定环境的构建流程进行定制，如修改 Rsbuild 或 Rspack 配置、注册或移除插件、调整 Rspack 规则和查看静态资源信息等。
 
 ## 多环境配置
 

website/docs/zh/guide/advanced/ssr.mdx

@@ -6,9 +6,11 @@
 
 ## 什么是 SSR
 
-import SSR from '@zh/shared/ssr.mdx';
+SSR 是 "Server-Side Rendering"（服务端渲染）的缩写。它表示由服务器生成网页的 HTML，并将其发送给客户端，而不是只发送一个空的 HTML 外壳，并依赖 JavaScript 来生成页面内容。
 
-<SSR />
+在传统的客户端渲染中，服务器会向客户端发送一个空的 HTML 外壳和一些 JavaScript 脚本，然后从服务器的 API 中获取数据，并用动态内容填充页面。这会导致页面的初始加载时间较慢，不利于用户体验和 SEO。
+
+使用 SSR 后，服务器会生成已经包含动态内容的 HTML，并将其发送给客户端。这使得首屏加载速度更快，并对 SEO 更加友好，因为搜索引擎可以爬取到渲染后的页面。
 
 ## 文件结构
 

website/docs/zh/guide/basic/cli.mdx

@@ -10,7 +10,7 @@ Rsbuild 内置了一个轻量的命令行工具，包含 dev、build 等命令
 npx rsbuild -h
 ```
 
-The output is as follows:
+输出如下：
 
 ```text
 Usage: rsbuild <command> [options]
@@ -171,7 +171,8 @@ rsbuild inspect --verbose
 
 Inspect config succeed, open following files to view the content:
 
-  - Rsbuild Config: /project/dist/.rsbuild/rsbuild.config.mjs
+  - Rsbuild Config (web): /project/dist/.rsbuild/rsbuild.config.web.mjs
+  - Rsbuild Config (node): /project/dist/.rsbuild/rsbuild.config.node.mjs
   - Rspack Config (web): /project/dist/.rsbuild/rspack.config.web.mjs
   - Rspack Config (node): /project/dist/.rsbuild/rspack.config.node.mjs
 ```