@modern-js/main-doc 2.58.3 → 2.60.0

package/docs/en/_meta.json

@@ -4,21 +4,26 @@
     "link": "/guides/get-started/introduction",
     "activeMatch": "/guides/"
   },
-  {
-    "text": "tutorials",
-    "link": "/tutorials/foundations/introduction",
-    "activeMatch": "/tutorials/"
-  },
   {
     "text": "configure",
     "link": "/configure/app/usage",
     "activeMatch": "/configure/"
   },
+  {
+    "text": "plugin-menu",
+    "link": "/plugin/introduction",
+    "activeMatch": "/plugin/"
+  },
   {
     "text": "apis",
     "link": "/apis/app/commands",
     "activeMatch": "/apis/"
   },
+  {
+    "text": "tutorials",
+    "link": "/tutorials/foundations/introduction",
+    "activeMatch": "/tutorials/"
+  },
   {
     "text": "community",
     "link": "/community/showcase",

package/docs/en/apis/app/hooks/api/lambda.mdx

@@ -4,54 +4,10 @@ sidebar_position: 3
 ---
 # lambda/*.[tj]s
 
-Files that declare API routes under the [BFF Framework Mode](/guides/advanced-features/bff/type.html#framework-mode). Except for [convention files](/apis/app/hooks/api/api#allow-list), files under the `lambda/` directory will be registered as the routes.
-
-:::info
-Using the `api` directory requires enabling the BFF function, and you need to run the new command to enable the "BFF" function under the project.
+After enabling BFF, the files under the `lambda/` directory will be registered as BFF routes according to conventions.
 
+:::note
+The files can be written in `js` or `ts` languages, but they must use `esm` syntax to export functions.
 :::
 
-:::tip
-This file supports using `js` or `ts` language, but must export functions using `esm` syntax.
-
-:::
-
-## Routing File Convention
-
-### Default Routing
-
-The routing system will map files named `index` to the previous directory.
-
-- `api/lambda/index.ts` -> `$BASENAME/`
-- `api/lambda/user/index.ts` -> `$BASENAME/user`
-
-### Nested Routing
-
-The routing system also supports parsing nested files. If you create a nested folder structure, the files will still automatically resolve routes in the same way.
-
-- `api/lambda/hello.ts` -> `$BASENAME/hello`
-- `api/lambda/user/list.ts` -> `$BASENAME/user/list`
-
-### Dynamic Routing
-
-The routing system supports generating dynamic routes through file directories named with `[]`.
-
-- `api/lambda/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
-- `api/lambda/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
-- `api/lambda/article/[id]/info.ts` -> `$BASENAME/article/:id/info`
-
-The `$BASENAME` can be configured in `modern.config.js`, and the default value is `/api`.
-
-### Allow List
-
-By default, all files in the `lambda` directory are parsed as BFF function files, but we also set up a whitelist so that these files are not parsed:
-
-- Files named starting with `_`. For example: `_utils.ts`.
-- All files in a folder named starting with `_`. For example: `_utils/index.ts`, `_utils/cp.ts`.
-- Test files. For example: `foo.test.ts`.
-- TypeScript type files. For example: `hello.d.ts`.
-- Files under `node_module`.
-
-## Function Definition
-
-Completely consistent with the [Function Definition](/apis/app/hooks/api/api#function-definition) under the function mode.
+For detailed information, refer to [BFF API Routes](/guides/advanced-features/bff/function.html#api-routes).

package/docs/en/apis/app/hooks/api/middleware.mdx

@@ -0,0 +1,11 @@
+---
+title: _app.[tj]s
+sidebar_position: 2
+---
+# _app.[tj]s
+
+This file can add pre-middleware to BFF functions. For detailed information, refer to [Extend BFF Server](/guides/advanced-features/bff/extend-server).
+
+:::note
+For specific examples, please refer to [hook](/apis/app/runtime/bff/hook).
+:::

package/docs/en/apis/app/runtime/core/use-loader.mdx

@@ -52,7 +52,7 @@ function useLoader(loaderFn: LoaderFn, options: Options): ReturnData;
   - `initialData`: the initial data before the first execution,.
   - `skip`: when the value is `true`, the function does not execute.
   - `params`: when the result of the `params` serialization changes, the function is re-executed. `params` is also passed in as the second argument of the function.
-  - `static`: when the value is `true`, `useLoader` is used for [SSG](/guides/advanced-features/ssg).
+  - `static`: when the value is `true`, `useLoader` is used for [SSG](/guides/basic-features/render/ssg).
 
 ### Return Value
 

package/docs/en/community/blog/v2-release-note.mdx

@@ -132,7 +132,7 @@ Modern.js 可以划分为三个核心部分：**CLI 工具、服务端和运行
 
 在字节跳动内部，我们借助这些插件 API，结合公司内的基建和平台，封装出内部的企业级框架。如果你需要对 Modern.js 框架进行深度定制，也可以借助这些插件 API 来完成。
 
-> 如果你对 Modern.js 的插件系统感兴趣，请阅读 [「Modern.js - 自定义插件」](https://modernjs.dev/guides/topic-detail/framework-plugin/introduction.html)文档。
+> 如果你对 Modern.js 的插件系统感兴趣，请阅读 [「Modern.js - 自定义插件」](https://modernjs.dev/plugin/plugin-system/introduction.html)文档。
 
 ### 嵌套路由
 

package/docs/en/components/enable-bff.mdx

@@ -1,5 +1,22 @@
-1. Execute `pnpm new` and select "Enable BFF"
-2. Add the following code to `modern.config.[tj]s` according to the chosen runtime framework:
+import { PackageManagerTabs } from '@theme';
+
+1. Execute the `new` command:
+
+<PackageManagerTabs command="run new" />
+
+2. Follow the prompts to **enable BFF functionality**:
+
+```bash
+? Please select the operation you want to perform Enable optional features
+? Please select the feature to enable Enable "BFF"
+? Please select BFF type Framework mode
+```
+
+:::note
+Currently, it is recommended to create BFF in framework mode. We will remove the BFF type concept in the future.
+:::
+
+3. Depending on the chosen runtime framework, add the following code to `modern.config.[tj]s`:
 
 import { Tabs, Tab as TabItem } from "@theme";
 

package/docs/en/components/extend-bff-function.mdx

@@ -0,0 +1,5 @@
+The standard BFF function writing method may not always meet your needs. We are designing a more powerful BFF function writing method to allow developers to extend BFF functions more conveniently.
+
+:::note
+Coming soon
+:::

package/docs/en/components/init-app.mdx

@@ -4,7 +4,6 @@
 ? Please select the type of project you want to create: Web App
 ? Please select the programming language: TS
 ? Please select the package manager: pnpm
-? Please select the bundler: webpack
 ```
 
 After create the project, Modern.js will automatically install dependencies and create a git repository.

package/docs/en/components/init-rspack-app.mdx

@@ -3,5 +3,4 @@ $ npx @modern-js/create@latest myapp
 ? Please select the type of project you want to create: Web App
 ? Please select the programming language: TS
 ? Please select the package manager: pnpm
-? Please select the bundler: Rspack
 ```

package/docs/en/components/ssr-monitor.mdx

@@ -0,0 +1,3 @@
+:::note
+Coming soon
+:::

package/docs/en/configure/app/auto-load-plugin.mdx

@@ -9,6 +9,10 @@ sidebar_position: 22
 
 Used to configure whether Modern.js enables auto-registration of plugins.
 
+:::warning
+This configuration is not recommended. Compared with manually registering plugin, this configuration is relatively black box and cannot add custom configurations to plugin.
+:::
+
 ### Manual Registration Plugin
 
 By default, installing the plugin requires you to register the plugin manually in the `modern.config.ts`.

package/docs/en/configure/app/output/ssg.mdx

@@ -4,46 +4,24 @@ title: ssg
 
 # output.ssg
 
-- **Type:** `boolean` | `object` | `function`
-- **Default:** `undefined`
+- **Type:** `boolean` | `object`
+- **Default Value:** `undefined`
 
-Enable the SSG for **Self-controlled Routing** or **Conventional Routing**.
+Configuration to enable the application’s SSG (Static Site Generation) feature.
 
-:::info Enable SSG
-This configuration will only be available when the SSG feature is enabled. Please read the [Static Site Generation](/guides/advanced-features/ssg) documentation to learn how to enable the SSG feature.
+:::tip Enabling SSG
+This configuration takes effect only when SSG is enabled. Please read the [Static Site Generation](/guides/basic-features/render/ssg) documentation to understand how to enable SSG and its use cases.
 :::
 
-:::info
-For more routes detail, see [Routing](/guides/basic-features/routes).
-
+:::info Recommended Reading
+The SSG feature is closely related to routing. It is recommended to understand the [routing solution](/guides/basic-features/routes) before using SSG.
 :::
 
-## Example
-
-### Single Entry
-
-When the configuration is set to `true`, the SSG of all entries will be enabled by default.
-
-For **self-controlled routing**, the root route of the entry will be rendered. For **convention routing**, every route in the entry will be rendered.
-
-For example, the `src/` directory has the following file structure that satisfies **conventional routing**:
-
-```bash
-.
-├── src
-│   └── routes
-│       ├── layout.tsx
-│       ├── page.tsx
-│       └── user
-│           ├── layout.tsx
-│           ├── page.tsx
-│           └── profile
-│               └── page.tsx
-```
+## Boolean Type
 
-Make the following config in `modern.config.[tj]s`:
+When this configuration is set to `true`, the SSG feature will be enabled for all entries by default. For **manual routing**, the root route of the entry will be rendered. For **conventional routing**, each route in the entry will be rendered.
 
-```ts
+```js
 export default defineConfig({
   output: {
     ssg: true,
@@ -51,39 +29,20 @@ export default defineConfig({
 });
 ```
 
-After executing `pnpm build` to build the application. The `dist/` directory will generate three HTML for each of the three routes (only one HTML if SSG not enabled), and all HTML has been rendered.
-
-For example the following **self-controlled routing**:
-
-import SelfRouteExample from "@site-docs/components/self-route-example";
-
-<SelfRouteExample />
-
-Also using the above configuration, after executing `pnpm run build`, only the entry route `/` will generate the rendered HTML.
+`output.ssg` can also be configured per entry, with the rules for effective configurations determined by the entry's routing method.
 
-### Multi Entries
-
-`output.ssg` can also be configured according to the entries, and the rules that the configuration takes effect are also determined by the entries routing method.
-
-For example the following directory structure:
+For example, given the following directory structure, there are conventional routing entry `entryA` and manual routing entry `entryB`:
 
 ```bash
 .
-├── src
-│   ├── entryA
-│   │   └── routes
-│   │       ├── layout.tsx
-│   │       ├── page.tsx
-│   │       └── user
-│   │           ├── layout.tsx
-│   │           ├── page.tsx
-│   │           └── profile
-│   │               └── page.tsx
-│   └── entryB
-│       └── App.tsx
+└── src
+    ├── entryA
+    │   └── routes
+    └── entryB
+        └── App.tsx
 ```
 
-By default, all entryA entrances are rendered at build time after setting `output.ssg` to `true`. You can configure `false` to cancel the default behavior of the specified entries. For example, to cancel the rendering of the `entryA` at build time:
+You can specify different SSG configurations for `entryA` and `entryB`:
 
 ```js
 export default defineConfig({
@@ -96,107 +55,59 @@ export default defineConfig({
 });
 ```
 
-### Configure Route
-
-As mentioned above, **Self-Controlled Routing** only enables SSG configuration for entries route by default.
-
-Set specific routes in `output.ssg` can tell Modern.js to enable the SSG of these client side routes. For example, the content of the above `src/App.tsx` file is:
-
-<SelfRouteExample />
-
-
-When set like this in `modern.config.[jt]s`, the `/about` route will also enable SSG:
-
-```js
-export default defineConfig({
-  output: {
-    ssg: {
-      routes: ['/', '/about'],
-    },
-  },
-});
-```
-
-Modern.js will automatically concat the complete URL according to the entry and hand it over to the SSG plugin to complete the rendering.
-
-Request headers can also be configured for specific entries or routes, for example:
-
-```js
-export default defineConfig({
-  output: {
-    ssg: {
-      headers: {},
-      routes: [
-        '/',
-        {
-          url: '/about',
-          headers: {},
-        },
-      ],
-    },
-  },
-});
-```
-
 :::info
-The `headers` set in the route override the `headers` set in the entry.
-
+For more information on the default behavior of **conventional routing** and **manual routing** after enabling SSG, please read [Static Site Generation](/guides/basic-features/render/ssg).
 :::
 
-### Prevent Default
+## Object Type
 
-By default, **Conventional Routing** all turn on SSG. Modern.js provides another field to prevent the default SSG behavior.
+When the value type is `Object`, the following attributes can be configured.
 
-For example, the following directory structure , `/`、`/user` and `/user/profle` all have SSG enabled:
+### Configuration Type
 
-```bash
-.
-├── src
-│   └── routes
-│       ├── layout.tsx
-│       ├── page.tsx
-│       └── user
-│           ├── layout.tsx
-│           ├── page.tsx
-│           └── profile
-│               └── page.tsx
-```
-
-You can set this to disable the default behavior of a client-side route:
 
-```js
-export default defineConfig({
-  output: {
-    ssg: {
-      preventDefault: ['/user'],
-    },
-  },
-});
+```ts
+type SSGRouteOptions = string | {
+  url: string;
+  params?: Record<string, any>[];
+  headers?: Record<string, any>;
+};
+
+type SSGOptions = {
+  preventDefault?: string[];
+  headers?: Record<string, any>;
+  routes?: SSGRouteOptions[];
+};
 ```
 
-### Dynamic Params
+### Example
 
-Some routes may be dynamic, such as the `/user/:id` in a self-controlled route or the route generated by the `user/[id]/page.tsx` file in a conventional route.
+In the example configuration below, SSG will render the pages corresponding to the `/`, `/about`, and `/user/:id` routes.
 
-configure specific parameters in `output.ssg` to render the route of the specified parameters, for example:
+For the `/user/:id` route, `cookies` will be added to the request headers, and the `id` in `params` will be replaced with `modernjs`.
 
-```js
+```ts title="modern.config.ts"
 export default defineConfig({
   output: {
     ssg: {
       routes: [
+        '/', 
+        '/about',         
         {
           url: '/user/:id',
-          params: [
-            {
-              id: 'modernjs',
-            },
-          ],
-        },
+          headers: {
+            cookies: "name=modernjs"
+          },
+          params: [{
+            id: 'modernjs',
+          }],
+        }
       ],
-    },
-  },
+    }
+  }
 });
 ```
 
-The features of dynamic routing and SSG is useful when generating static pages in real time based on CMS system.
+:::note
+The configuration method for multiple entries is the same as for a single entry, so it will not be explained further here.
+:::

package/docs/en/configure/app/plugins.mdx

@@ -9,7 +9,7 @@ sidebar_position: 9
 
 Used to configure custom Modern.js framework plugins.
 
-Refer to [How to Develop Plugins](/guides/topic-detail/framework-plugin/implement) for how to write custom plugins.
+Refer to [How to Develop Plugins](/plugin/plugin-system/implement) for how to write custom plugins.
 
 ## Note
 
@@ -33,7 +33,7 @@ Currently, Modern.js has opened up the ability to customize CLI plugins, and Ser
 
 By default, custom plugins are executed in the order of the `plugins` array, and the execution time of built-in Modern.js plugins is earlier than that of custom plugins.
 
-When the plugin sets options that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields. Refer to [Relationship between plugins](/guides/topic-detail/framework-plugin/relationship) for more information.
+When the plugin sets options that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields. Refer to [Relationship between plugins](/plugin/plugin-system/relationship) for more information.
 
 ## Example
 

package/docs/en/configure/app/tools/esbuild.mdx

@@ -41,4 +41,4 @@ export default defineConfig({
 });
 ```
 
-For config details, please refer to [Esbuild Plugin Configuration](/guides/rsbuild-plugins/plugin-esbuild.html#config).
+For config details, please refer to [Esbuild Plugin Configuration](/plugin/rsbuild-plugins/plugin-esbuild.html#config).

package/docs/en/configure/app/tools/swc.mdx

@@ -77,4 +77,4 @@ export default defineConfig({
 });
 ```
 
-For config details, please refer to [SWC Plugin Configuration](/guides/rsbuild-plugins/plugin-swc.html#config).
+For config details, please refer to [SWC Plugin Configuration](/plugin/cli-plugins/plugin-swc.html#config).

package/docs/en/configure/app/tools/tailwindcss.mdx

@@ -23,7 +23,7 @@ Used to modify the configuration of [Tailwind CSS](https://tailwindcss.com/docs/
 
 Before using `tools.tailwindcss`, you need to enable the Tailwind CSS plugin for Modern.js.
 
-Please refer to the section [Using Tailwind CSS](/guides/basic-features/css.html#using-tailwind-css) for instructions on how to enable it.
+Please refer to the section [Using Tailwind CSS](/guides/basic-features/css/tailwindcss) for instructions on how to enable it.
 
 ### Function Type
 

package/docs/en/guides/_meta.json

@@ -24,11 +24,6 @@
     "name": "topic-detail",
     "label": "topic"
   },
-  {
-    "type": "dir",
-    "name": "rsbuild-plugins",
-    "label": "Rsbuild Plugins"
-  },
   {
     "type": "dir",
     "name": "troubleshooting",

package/docs/en/guides/advanced-features/_meta.json

@@ -6,21 +6,16 @@
     "label": "use-bff",
     "collapsed": true
   },
-  "code-split",
   {
     "type": "dir",
-    "name": "ssr",
-    "label": "use-ssr",
+    "name": "page-performance",
+    "label": "page-performance",
     "collapsed": true
   },
-  "ssg",
+  "build-performance",
   "compatibility",
   "eslint",
   "low-level",
   "source-build",
-  "build-performance",
-  "inline-assets",
-  "optimize-bundle",
-  "using-storybook",
   "web-server"
 ]

package/docs/en/guides/advanced-features/bff/_meta.json

@@ -1 +1 @@
-["function", "type", "frameworks", "sdk"]
+["function", "frameworks", "extend-server", "sdk"]