@modern-js/main-doc 2.69.4 → 3.0.0-alpha.0

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/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/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/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/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/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';