@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

package/docs/en/configure/app/resolve/condition-names.mdx

@@ -0,0 +1,18 @@
+---
+title: conditionNames
+---
+
+# resolve.conditionNames
+
+- **Type:** `string[]`
+- **Default:** Same as Rspack's `resolve.conditionNames`
+
+Specifies the condition names used to match entry points in the [exports](https://nodejs.org/api/packages.html#packages_exports) of a package.
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="resolve.extensions" />
+
+:::warning
+Do not enable this configuration option for SSR applications, as it will cause SSR rendering to fail.
+:::

package/docs/en/configure/app/resolve/dedupe.mdx

@@ -0,0 +1,13 @@
+---
+title: dedupe
+---
+
+# resolve.dedupe
+
+- **Type:** `string[]`
+
+Force Rsbuild to resolve the specified packages from project root, which is useful for deduplicating packages and reducing the bundle size. same as the [resolve.dedupe](https://rsbuild.rs/config/resolve/dedupe) config of Rsbuild.
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="resolve.dedupe" />

package/docs/en/configure/app/resolve/extensions.mdx

@@ -0,0 +1,18 @@
+---
+title: extensions
+---
+
+# resolve.extensions
+
+- **Type:** `string[]`
+- **Default:** `['.ts', '.tsx', '.mjs', '.js', '.jsx', '.json']`
+
+Automatically resolve file extensions when importing modules. This means you can import files without explicitly writing their extensions.
+
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConfig configName="resolve.extensions" />
+
+:::warning
+Do not enable this configuration option for SSR applications, as it will cause SSR rendering to fail.
+:::

package/docs/en/configure/app/runtime/0-intro.mdx

@@ -2,12 +2,6 @@
 
 Modern.js runtime configuration should be centralized in the `src/modern.runtime.ts` file.
 
-:::warning
-
-Using the `src/modern.runtime.ts` configuration approach requires Modern.js version **MAJOR_VERSION.66.0** or higher.
-
-:::
-
 :::info
 
 If this file doesn't exist in your project yet, create it with the following command:
@@ -27,9 +21,6 @@ export default defineRuntimeConfig({
   router: {
     // Router configuration
   },
-  state: {
-    // State management configuration
-  },
   // Other runtime modules...
 });
 ```
@@ -47,16 +38,13 @@ export default defineRuntimeConfig(entryName => {
       router: {
         // Router configuration for "main" entry
       },
-      state: {
-        // State management configuration for "main" entry
-      },
     };
   }
 
   // Configuration for other entries
   return {
-    masterApp: {
-      // Micro-frontend configuration example
+    router: {
+      // Other entry router configuration
     },
   };
 });
@@ -71,40 +59,3 @@ Using the `src/modern.runtime.ts` configuration approach does not support export
 import RuntimeCliConfig from '@site-docs/components/runtime-cli-config';
 
 <RuntimeCliConfig />
-
-## Configuration Evolution
-
-Before MAJOR_VERSION.66.0, runtime configurations were scattered across multiple locations:
-
-1. The `runtime` and `runtimeByEntries` fields in `modern.config.ts`
-2. The `App.config` or the `config` function exported from `layout` files for each entry
-
-To improve maintainability, Modern.js introduced the unified `src/modern.runtime.ts` configuration entry.
-
-### Legacy Configuration (Compatible but Not Recommended)
-
-```ts
-// modern.config.ts
-export default {
-  runtime: {
-    /* ... */
-  },
-  runtimeByEntries: {
-    /* ... */
-  },
-};
-
-// App.config
-App.config = {
-  /* ... */
-};
-
-// layout file
-export const config = () => {
-  /* Dynamic configuration logic */
-};
-```
-
-### Migration Recommendation
-
-We strongly recommend migrating all runtime configurations to `src/modern.runtime.ts`. Although the legacy configuration approach is still compatible, it is planned to be gradually deprecated in future versions. A unified configuration entry prevents scattered configurations and significantly improves project maintainability.

package/docs/en/configure/app/runtime/router.mdx

@@ -4,10 +4,6 @@ title: router
 
 # router
 
-import RouterLegacyTip from "@site-docs-en/components/router-legacy-tip"
-
-<RouterLegacyTip />
-
 - **Type:** `boolean | Object`
 - **Default:** `false`
 

package/docs/en/configure/app/security/check-syntax.mdx

@@ -57,7 +57,7 @@ error   [Syntax Checker] Find some syntax errors after production build:
 
 :::tip
 Currently, syntax checking is implemented based on AST parser. Each time it performs a check, it can only identify the first incompatible syntax found in the file. If there are multiple incompatible syntaxes in the file, you need to fix the detected syntax and re-run the check.
-If the corresponding source location is not shown in the log, try setting **output.disableMinimize** to true and rebuild again.
+If the corresponding source location is not shown in the log, try setting **output.minify** to false and rebuild again.
 :::
 
 ### Solutions

package/docs/en/configure/app/security/sri.mdx

@@ -10,7 +10,6 @@ title: sri
 type SriOptions = {
   hashFuncNames?: [string, ...string[]];
   enabled?: 'auto' | true | false;
-  hashLoading?: 'eager' | 'lazy'; // only support webpack
 };
 ```
 

package/docs/en/configure/app/server/port.mdx

@@ -7,7 +7,7 @@ title: port
 - **Type:** `number`
 - **Default:** `8080`
 
-When running the `dev`, `start`, and `serve` commands, Modern.js will start with `8080` as the default port and automatically increase the port number when the port is occupied. You can use this configuration to modify the port number that the Server starts with:
+When running the `dev` and `serve` commands, Modern.js will start with `8080` as the default port and automatically increase the port number when the port is occupied. You can use this configuration to modify the port number that the Server starts with:
 
 ```js title="modern.config.ts"
 export default defineConfig({
@@ -17,26 +17,6 @@ export default defineConfig({
 });
 ```
 
-### Difference between `server.port` and `dev.port`
-
-In most cases, we recommend using `server.port` instead of `dev.port` to set the port number, and the differences between them are as follows:
-
-- `dev.port` only works in the development environment, while `server.port` works in both the development and production environments.
-- In the development environment, `dev.port` has a higher priority than `server.port`.
-
-When you set both `dev.port` and `server.port`, `dev.port` will take effect in the development environment, and `server.port` will take effect in the production environment. For example, in the following example, the port number listened to in the development environment is `3001`, and the port number listened to in the production environment is `3002`.
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  dev: {
-    port: 3001,
-  },
-  server: {
-    port: 3002,
-  },
-});
-```
-
 import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
 <RsbuildConfig configName="server.port" />

package/docs/en/configure/app/server/rsc.mdx

@@ -0,0 +1,30 @@
+---
+title: rsc
+---
+
+# server.rsc
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+Enable React Server Components (RSC) configuration.
+
+When set to `true`, enables React Server Components support in Modern.js. This allows components to be rendered on the server, providing better performance and developer experience.
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  server: {
+    rsc: true,
+  },
+});
+```
+
+:::tip Prerequisites
+Before enabling RSC, ensure:
+1. React and React DOM are upgraded to version 19 (recommended 19.2.3 or above)
+2. Install the `react-server-dom-webpack` dependency
+
+:::
+
+For more information about using RSC, see the [React Server Components guide](/guides/basic-features/render/rsc).
+

package/docs/en/configure/app/server/ssr.mdx

@@ -27,11 +27,10 @@ When the value type is `Object`, the following properties can be configured:
 
 | Name              | Type                                                         | Default                                   | Description                                                                     |
 | ---------------- | ------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
-| mode             | `string`                                  | `string`          | which defaults to using `renderToString` for rendering. Configure `stream` to enable streaming rendering       |
+| mode             | `string`                                  | `stream`          | which defaults to using streaming rendering. Configure `string` to use `renderToString` for rendering       |
 | forceCSR         | `boolean`                                 | `false`           | which is off by default for forcing CSR rendering. Configure `true` to force CSR by adding `?csr=true` or adding `x-modern-ssr-fallback` header when accessing the page |
-| disablePrerender | `boolean`                                 | `fasle`           | To ensure compatibility with the old data request method (`useLoader`), by default, Modern.js performs pre-rendering of components.However, if developers want to reduce one rendering when there is no use of the useLoader API in your project, you can set the configuration `disablePrerender=true` |
 | unsafeHeaders    | `string[]`                                | `[]`              | For safety reasons, Modern.js does not add excessive content to SSR_DATA. Developers can use this configuration to specify the headers that need to be injected      |
-| loaderFailureMode| `clientRender \| errorBoundary`           | `errorBoundary`   | The default configuration is `'errorBoundary'`, when an error occurs in [data loader](/en/guides/basic-features/data/data-fetch.html#data-loader-recommended), it will default to rendering the [`Error`](/en/guides/basic-features/routes.html#errorboundary) component of the route. When configured as `'clientRender'`, if a loader throws an error, it switch to client-side rendering，you can use it with [Client Loader](/en/guides/basic-features/data/data-fetch.html#client-loader) |
+| loaderFailureMode| `clientRender \| errorBoundary`           | `errorBoundary`   | The default configuration is `'errorBoundary'`, when an error occurs in [data loader](/en/guides/basic-features/data/data-fetch.html#data-loader-recommended), it will default to rendering the [`Error`](/guides/basic-features/routes/routes#error-handling) component of the route. When configured as `'clientRender'`, if a loader throws an error, it switch to client-side rendering，you can use it with [Client Loader](/en/guides/basic-features/data/data-fetch.html#client-loader) |
 
 
 ```ts title="modern.config.ts"
@@ -60,13 +59,25 @@ By configuring `server.ssr.forceCSR` to `true` in the project, you can control t
 
 For example, in a custom Web Server middleware, you can actively fallback when traffic exceeds a certain threshold:
 
-```ts title="server/index.ts"
-export const middleware = (ctx, next) => {
-  const { req, res } = ctx;
+```ts title="server/modern.server.ts"
+import {
+  defineServerConfig,
+  type MiddlewareHandler,
+} from '@modern-js/server-runtime';
+
+export const handler: MiddlewareHandler = async (c, next) => {
   if (condition) {
-    req.headers['x-modern-ssr-fallback'] = '1';
+    c.set('forceCSR', '1');
   }
-
-  next();
+  await next();
 };
+
+export default defineServerConfig({
+  middlewares: [
+    {
+      name: 'request-middleware',
+      handler,
+    },
+  ],
+});
 ```

package/docs/en/configure/app/source/alias.mdx

@@ -12,7 +12,7 @@ type Alias = Record<string, string | false | (string | false)[]> | Function;
 
 - **Default:** `undefined`
 
-Create aliases to import or require certain modules, same as the [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealias) config of Rspack.
+Create aliases to import or require certain modules, same as the [resolve.alias](https://rspack.rs/config/resolve#resolvealias) config of Rspack.
 
 :::tip
 For TypeScript projects, you only need to configure [compilerOptions.paths](https://www.typescriptlang.org/tsconfig#paths) in the `tsconfig.json` file. The Rsbuild will automatically recognize it, so there is no need to configure the `source.alias` option separately. For more details, please refer to [Path Aliases](https://modernjs.dev/en/guides/basic-features/alias.html).

package/docs/en/configure/app/source/decorators.mdx

@@ -22,6 +22,8 @@ const defaultDecorators = {
 
 Used to configure the decorators syntax.
 
-import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
+:::warning
+The usage of this configuration item is exactly the same as that of Rsbuild, but the default value is different. For detailed information, please refer to [Rsbuild - source.decorators](https://rsbuild.rs/config/source/decorators).
+:::
 
-<RsbuildConfig configName="source.decorators" />
+We found that most projects still use the `legacy` version of the decorator syntax, so the default value is `legacy`.

package/docs/en/configure/app/source/enable-async-entry.mdx

@@ -7,7 +7,7 @@ title: enableAsyncEntry
 - **Type:** `boolean`
 - **Default:** `false`
 
-This option is used for webpack Module Federation scenario.
+This option is used for Rspack Module Federation scenario.
 
 When this option is enabled, Modern.js will wrap the automatically generated entry files with dynamic import (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.
 

package/docs/en/configure/app/source/entries.mdx

@@ -13,7 +13,6 @@ type Entries = Record<
   | {
       entry: string;
       disableMount?: boolean;
-      customBootstrap?: string;
     }
 >;
 ```
@@ -82,7 +81,6 @@ When the value is `Object`, the following attributes can be configured:
 
 - `entry`: `string`, the entry file path.
 - `disableMount`: `boolean = false`, disable Modern.js's behavior of automatically generating entry code.
-- `customBootstrap`: `string = ''`, specify the file path of [custom Bootstrap](/guides/concept/entries#custom-bootstrap).
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';

package/docs/en/configure/app/source/include.mdx

@@ -9,10 +9,7 @@ title: include
 
 ```ts
 const defaultInclude = [
-  [
-    { not: /[\\/]node_modules[\\/]/ },
-    /\.(?:ts|tsx|jsx|mts|cts)$/,
-  ],
+  [{ not: /[\\/]node_modules[\\/]/ }, /\.(?:ts|tsx|jsx|mts|cts)$/],
 ];
 ```
 
@@ -28,10 +25,7 @@ Before Rsbuild version 1.4, the default value of `source.include` was:
 const defaultInclude = [
   [
     {
-      and: [
-        APP_ROOT,
-        { not: /[\\/]node_modules[\\/]/ }
-      ]
+      and: [APP_ROOT, { not: /[\\/]node_modules[\\/]/ }],
     },
     /\.(?:ts|tsx|jsx|mts|cts)$/,
   ],
@@ -41,12 +35,6 @@ const defaultInclude = [
 The difference from the new version is that `.js`, `.mjs`, `.cjs` files only in the current directory will be compiled.
 :::
 
-## Rspack
-
 import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
 <RsbuildConfig configName="source.include" />
-
-## Webpack
-
-To ensure legacy projects can run properly, when using Webpack, the default value of `source.include` is the same as before Rsbuild version 1.4.

package/docs/en/configure/app/source/main-entry-name.mdx

@@ -5,18 +5,18 @@ title: mainEntryName
 # source.mainEntryName
 
 - **Type:** `string`
-- **Default:** `'main'`
+- **Default:** `'index'`
 
 This option is used to configure the main entry name of Modern.js.
 
-By default, the default main entry name of Modern.js is `main`. When using a single entry or the entry name is the same as the `name` field in `package.json`, the corresponding entry will be used as the main entry. This configuration can be used to modify the name of the main entry.
+By default, the default main entry name of Modern.js is `index`. When using a single entry or the entry name is the same as the `name` field in `package.json`, the corresponding entry will be used as the main entry. This configuration can be used to modify the name of the main entry.
 
-For example, change the main entry name to index:
+For example, change the main entry name to main:
 
 ```ts title="modern.config.ts"
 export default defineConfig({
   source: {
-    mainEntryName: 'index',
+    mainEntryName: 'main',
   },
 });
 ```

package/docs/en/configure/app/source/transform-import.mdx

@@ -24,66 +24,8 @@ type TransformImport =
   | Function;
 ```
 
-- **Default:**
-
-When the [Ant Design component library](https://www.npmjs.com/package/antd) <= 4.x version is installed in the project, Modern.js will automatically add the following default configurations:
-
-```js
-const defaultAntdConfig = {
-  libraryName: 'antd',
-  libraryDirectory: isServer ? 'lib' : 'es',
-  style: true,
-};
-```
-
-When the [Arco Design component library](https://www.npmjs.com/package/@arco-design/web-react) is installed in the project, Modern.js will automatically add the following default configurations:
-
-```js
-const defaultArcoConfig = [
-  {
-    libraryName: '@arco-design/web-react',
-    libraryDirectory: isServer ? 'lib' : 'es',
-    camelToDashComponentName: false,
-    style: true,
-  },
-  {
-    libraryName: '@arco-design/web-react/icon',
-    libraryDirectory: isServer ? 'react-icon-cjs' : 'react-icon',
-    camelToDashComponentName: false,
-  },
-];
-```
-
-:::tip
-When you add configurations for `antd` or `@arco-design/web-react`, the priority will be higher than the default configurations mentioned above.
-:::
+- **Default:** `undefined`
 
 import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
 <RsbuildConfig configName="source.transformImport" />
-
-### Disable Default Config
-
-You can manually set `transformImport: false` to disable the default config.
-
-```js
-export default {
-  source: {
-    transformImport: false,
-  },
-};
-```
-
-You can also use the [function usage](https://rsbuild.rs/config/source/transform-import#function-type) of `transformImport` to modify the default configuration.
-
-```js
-export default {
-  source: {
-    transformImport: imports => {
-      return imports.filter(data => data.libraryName !== 'antd');
-    },
-  },
-};
-```
-
-For example, if you use `externals` to avoid bundling antd, because `transformImport` will convert the imported path of antd by default, the matching path changes and externals cannot take effect. At this time, you can disable `transformImport` to avoid this problem.

package/docs/en/configure/app/tools/bundler-chain.mdx

@@ -8,23 +8,23 @@ title: bundlerChain
 
 ```ts
 type BundlerChainFn = (
-  chain: RspackChain | webpackChain,
+  chain: RspackChain,
   utils: ModifyBundlerChainUtils,
 ) => Promise<void> | void;
 ```
 
 - **Default:** `undefined`
 
-You can modify the webpack and Rspack configuration by configuring `tools.bundlerChain` which is type of `Function`. The function receives two parameters, the first is the original bundler chain object, and the second is an object containing some utils.
+You can modify the Rspack configuration by configuring `tools.bundlerChain` which is type of `Function`. The function receives two parameters, the first is the original bundler chain object, and the second is an object containing some utils.
 
 :::tip What is BundlerChain
 
-Bundler chain is a subset of webpack chain, which contains part of the webpack chain API that you can use to modify both webpack and Rspack configuration.
+Bundler chain is a chainable configuration tool implemented based on the Rspack configuration API, which you can use to modify Rspack configuration.
 
-Configurations modified via bundler chain will work on both webpack and Rspack builds. Note that the bundler chain only supports modifying the configuration of the non-differentiated parts of webpack and Rspack. For example, modifying the devtool configuration option (webpack and Rspack have the same devtool property value type), or adding an [Rspack-compatible](https://rspack.rs/guide/compatibility/plugin) webpack plugin.
+Configurations modified via bundler chain will work on Rspack builds.
 
 :::
 
-> `tools.bundlerChain` is executed earlier than tools.webpackChain / tools.webpack / tools.rspack and thus will be overridden by changes in others.
+> `tools.bundlerChain` is executed earlier than tools.rspack and thus will be overridden by changes in tools.rspack.
 
 For more information, please refer to [Rsbuild#tools.bundlerChain](https://rsbuild.rs/config/tools/bundler-chain).

package/docs/en/configure/app/tools/css-extract.mdx

@@ -30,7 +30,7 @@ const defaultOptions = {
 };
 ```
 
-The config of [CssExtractRspackPlugin](https://rspack.rs/plugins/rspack/css-extract-rspack-plugin) / [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) can be modified through `tools.cssExtract`.
+The config of [CssExtractRspackPlugin](https://rspack.rs/plugins/rspack/css-extract-rspack-plugin) can be modified through `tools.cssExtract`.
 
 import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';