@modern-js/main-doc 2.60.6 → 2.62.0

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

@@ -1,9 +1,6 @@
----
-title: useRuntimeContext
----
 # useRuntimeContext
 
-Used to get the runtime context and can only be used in function components.
+This function is primarily used to obtain the runtime context and can only be used in the function component.
 
 ## Usage
 
@@ -12,7 +9,7 @@ import { useRuntimeContext } from '@modern-js/runtime';
 
 export function App() {
   const runtimeContext = useRuntimeContext();
-  return <div>Hello World</div>;
+  return <div>Hello World</div>
 }
 ```
 
@@ -20,44 +17,100 @@ export function App() {
 
 ```ts
 type RuntimeContext = {
-  request: {
-    params: Record<string, string>;
-    pathname: string;
-    query: Record<string, string>;
-    headers: IncomingHttpHeaders;
-    cookie: string;
-  };
-  store: ReduckStore;
-  router: RemixRouter;
+  context: RequestContext;
 };
-
-function useRuntimeContext(): RuntimeContext;
 ```
 
-### Return Value
+### context
 
-- `request`: additional information in the request context.
-  - `params`: dynamic parameters in the request path.
-  - `pathname`: the pathname of the request.
-  - `query`: the query of the request.
-  - `headers`: the header info of the request.
-  - `cookie`: the cookie of the request.
-- `store`: when the `runtime.state` is enabled, this value is the Reduck global `store`.
-- `router`: When the `runtime.router` is enabled, this value exists.
-  - `location`: The current location reflected by the router. The same as [`useLocation`] the return value of (/apis/app/runtime/router/router.html#uselocation).
-  - `navigate`: Navigate to the given path. The same as the return value of [`useNavigate`](/apis/app/runtime/router/router.html#usenavigate).
+Used to get [Request Context](#request-context).
 
 ## Example
 
-```tsx
-import { useRuntimeContext } from '@modern-js/runtime';
-import { fooModel } from '@/common/models';
+### Distinguish the runtime environment
 
+```ts
 function App() {
-  const { store } = useRuntimeContext();
+  const { context } = useRuntimeContext();
 
-  const [state, actions] = store.use(fooModel);
+  if (context.isBrowser === true) {
+    // browser-side execution logic
+    console.log('browser render')
+  } else {
+    // The server-side executes logic, which can access the unique 'logger' attribute
+    context.logger.info('server render')
+  }
+}
+```
 
-  return <div>state: {state}</div>;
+### Request context
+
+When SSR is enabled, uniform request contexts can be obtained in both the node environment and the browser-side environment.
+
+The slightly different is that the node environment also supports setting response headers, response codes, and provides Logger logs and Metrics management.
+
+:::tip
+when ssr is disabled, only the part of information that can be obtained in the browser environment is included.
+
+:::
+
+import { Tabs, Tab as TabItem } from "@theme";
+
+<Tabs
+  defaultValue="RequestContext"
+  values={[
+    { label: 'RequestContext', value: 'RequestContext', },
+    { label: 'ServerContext', value: 'ServerContext', },
+    { label: 'ClientContext', value: 'ClientContext', },
+  ]
+}>
+<TabItem value="RequestContext">
+
+```ts
+type RequestContext = ServerContext | ClientContext;
+```
+
+</TabItem>
+<TabItem value="ServerContext">
+
+```ts
+interface ServerContext {
+  isBrowser: false;
+  request: {
+    userAgent: string;
+    cookie: string;
+    cookieMap: Record<string, any>;
+    query: Record<string, any>;
+    url: string;
+    host: string;
+    headers?: IncomingHttpHeaders;
+  };
+  response: {
+    setHeader: (key: string, value: string) => void;
+    status: (code: number) => void;
+  }
+  logger: Logger;
+  metrics: Metrics;
+}
+```
+
+</TabItem>
+<TabItem value="ClientContext">
+
+```ts
+interface ClientContext {
+  isBrowser: true;
+  request: {
+    userAgent: string;
+    cookie: string;
+    cookieMap: Record<string, any>;
+    query: Record<string, any>;
+    url: string;
+    host: string;
+    headers?: IncomingHttpHeaders;
+  };
 }
 ```
+
+</TabItem>
+</Tabs>

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

@@ -1,7 +1,6 @@
 `@modern-js/create` provides an interactive Q & A interface to initialize the project based on the results, with initialization performed according to the default settings:
 
 ```bash
-? Please select the type of project you want to create: Web App
 ? Please select the programming language: TS
 ? Please select the package manager: pnpm
 ```

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

@@ -1,6 +1,5 @@
 ```bash
 $ 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
 ```

package/docs/en/guides/advanced-features/source-build.mdx

@@ -124,13 +124,10 @@ Project reference provides the following capabilities:
 
 ### Example
 
-In the example mentioned earlier, since the app project references the lib sub-project, we need to configure the `composite` and `references` options in the app project's `tsconfig.json` file and point them to the corresponding relative directory of lib:
+In the example mentioned earlier, since the app project references the lib sub-project, we need to configure the `references` options in the app project's `tsconfig.json` to point to the relative directory of the lib:
 
 ```json title="app/tsconfig.json"
 {
-  "compilerOptions": {
-    "composite": true
-  },
   "references": [
     {
       "path": "../lib"
@@ -139,6 +136,16 @@ In the example mentioned earlier, since the app project references the lib sub-p
 }
 ```
 
+At the same time, we need to set `composite` to `true` in the lib project's `tsconfig.json`:
+
+```json title="lib/A/tsconfig.json"
+{
+  "compilerOptions": {
+    "composite": true
+  },
+}
+```
+
 After adding these two options, the project reference is already configured. You can restart VS Code to see the effects of the configuration.
 
 Note that the above example is a simplified one. In real monorepo projects, there may be more complex dependency relationships. You need to add a complete `references` configuration for the functionality to work correctly.

package/docs/en/guides/basic-features/deploy.mdx

@@ -27,8 +27,7 @@ MODERNJS_DEPLOY=netlify npx modern deploy
 When deploying on the deployment platforms officially supported by Modern.js, there is no need to specify environment variables.
 :::
 
-
-## Node.js
+## Using ModernJS built-in Node.js Server
 
 ### Single Repo
 
@@ -284,3 +283,106 @@ Add the following content to the `packages/app/vercel.json` file:
 ```
 
 Just submit your code and deploy it using the Vercel platform.
+
+## Using Self-Built Node.js Server
+
+Typically, we recommend using the built-in Node.js server of Modern.js to deploy applications. It supports hosting both pure frontend and full-stack projects, ensuring consistent performance in both development and production environments.
+
+If your project is purely frontend, you can also deploy the application to the self-built Node.js server. Below is an example of using a Koa server to host the output of a pure frontend project.
+
+For instance, if you have a Node.js server repository, you can copy the output of the project into this repository. The structure would look like this:
+
+```bash
+.
+├── .output
+│   ├── html
+│   └── static
+└── server.js
+```
+
+In `server.js`, assume you have the following code:
+
+```ts title="server.js"
+import Koa from 'koa';
+
+const app = new Koa();
+app.use(async (ctx, next) => {
+  ctx.body = 'Hello Modern.js';
+});
+app.listen(3000);
+```
+
+Now, you can add some code to include the logic for accessing static resources and HTML files in `server.js`. We need to use the `mime-types` package to get the MIME types of static resources, so let's install the dependency first:
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add mime-types" />
+
+```ts title="server.js"
+const Koa = require('koa');
+const fs = require('fs');
+const path = require('path');
+const mime = require('mime-types');
+
+const app = new Koa();
+app.use(async (ctx, next) => {
+  if (ctx.path.startsWith('/static')) {
+    ctx.type = mime.lookup(ctx.path);
+    ctx.body = fs.createReadStream(path.resolve(__dirname, `.output${ctx.path}`));
+  } else if (ctx.path === '/') {
+    ctx.type = 'html';
+    ctx.body = fs.createReadStream(path.resolve(__dirname, '.output/html/main/index.html'));
+  }
+});
+app.listen(3000);
+```
+
+:::note
+The above code is a basic example. Your application might have multiple entry points and require different HTML files for different paths. A custom Node.js server would also involve more complex logic.
+
+Please note that if your project uses Modern.js conventional routing or if you have set up client-side routing with React Router, you must access HTML files through the correct `baseURL`.
+
+In Modern.js, the default `baseURL` is `'/'`. You can configure it by modifying [`server.baseUrl`](/configure/app/server/base-url) in `modern.config.ts`.
+
+:::danger
+For projects with client-side routing, you can never access HTML files through the `/index.html` path.
+:::
+
+## Nignx
+
+Nginx is a high-performance HTTP and reverse proxy server that can handle static files, reverse proxy, load balancing, and other functions. Deploying on Nginx typically requires configuring the `nginx.conf` file.
+
+If your project is a purely front-end project, you can also deploy the application through Nginx. Here is an example of an Nginx configuration to demonstrate how to host the output of a purely front-end project.
+
+```conf title="nginx.conf"
+# user [user] [group];
+worker_processes 1;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    server {
+        listen 8080;
+        server_name localhost;
+
+        location / {
+            # root [projectPath]/.output/html/main;
+            index index.html;
+            try_files $uri $uri/ =404;
+        }
+
+        location /static {
+          # alias [projectPath]/.output/static;
+        }
+    }
+}
+```
+
+In the above configuration, you need to replace `[projectPath]` with your project path and `[user]` and `[group]` with your current user and user group.
+
+You can copy the above configuration into the `nginx.conf` file in the Nginx installation directory and then start the Nginx service. You can also start the configuration file in a specified path using `nginx -c`, in which case you need to ensure that the path configured in the `include` directive is correct.

package/docs/en/guides/basic-features/render/ssr.mdx

@@ -113,7 +113,29 @@ If a Client Loader is defined for the route, it will be used to re-fetch the dat
 
 ### Component Rendering Error
 
-If a component throws an error during rendering, Modern.js automatically falls back to CSR mode and re-fetches the data. If re-rendering fails again, the `<ErrorBoundary>` component will be displayed.
+If the Data Loader executes correctly but the component rendering fails, SSR rendering will partially or completely fail, as shown in the following code:
+
+```tsx
+import { Await, useLoaderData } from '@modern-js/runtime/router';
+import { Suspense } from 'react';
+
+const Page = () => {
+  const data = useLoaderData();
+  const isNode = typeof window === 'undefined';
+  const undefinedVars = data.unDefined;
+  const definedVars = data.defined;
+
+  return (
+    <div>
+      {isNode ? undefinedVars.msg : definedVars.msg}
+    </div>
+  );
+};
+
+export default Page;
+```
+
+In this case, Modern.js will fallback the page to CSR and use the existing data from the Data Loader to render. If the rendering still fails, the `<ErrorBoundary>` component will be rendered.
 
 :::tip
 The behavior of component rendering errors is unaffected by `loaderFailureMode` and will not execute the Client Loader on the browser side.

package/docs/en/guides/concept/entries.mdx

@@ -12,7 +12,7 @@ In this chapter, you will learn about the entry convention in Modern.js and how
 
 In a Modern.js project, each entry corresponds to an independent page and a server-side route. By default, Modern.js automatically determines the entry of a page based on directory conventions, but also supports customizing the entry through configuration options.
 
-Many configuration options provided by Modern.js are divided by entry, such as page title, HTML template, page meta information, whether to enable SSR/SSG, server-side routing rules, etc.
+Many configuration options provided by Modern.js are divided by entry, such as page title, HTML template, page meta information, whether to enable SSR/SSG, server-side routing rules, etc. If you want to learn more about the technical details of entries, please refer to the [In-Depth](#in-depth) section.
 
 ## Single Entry and Multiple Entries
 
@@ -169,7 +169,7 @@ const ModernRoot = createRoot();
 render(<ModernRoot />);
 ```
 
-In the code above, the component returned by the `createRoot` function is either the component generated from the `routes/` directory or the component exported by `App.tsx`. 
+In the code above, the component returned by the `createRoot` function is either the component generated from the `routes/` directory or the component exported by `App.tsx`.
 
 The `render` function is used to handle rendering and mounting of the component. For example, if you want to execute some asynchronous tasks before rendering, you can achieve it like this:
 
@@ -245,10 +245,63 @@ export default defineConfig({
 });
 ```
 
-It is worth noting that, by default, Modern.js considers entries specified through the configuration as **framework mode entries** and will automatically generate the actual compilation entry. 
+It is worth noting that, by default, Modern.js considers entries specified through the configuration as **framework mode entries** and will automatically generate the actual compilation entry.
 
 If your application is migrating from build tools like Webpack or Vite to the Modern.js framework, you typically need to enable the `disableMount` option in the entry configuration. In this case, Modern.js will treat the entry as a **build mode entry**.
 
+## In-Depth
+
+The concept of page entry is derived from the concept of [Entrypoint](https://webpack.js.org/concepts/entry-points/) in webpack. It is mainly used to configure the JavaScript or any other modules to be executed during the application startup. Webpack usually corresponds each entry to an HTML file in the output. The modules imported by the entry will be bundled and split into multiple chunks in the output. For a JavaScript module, it might be compiled into several chunks like `dist/static/js/index.ea39u8.js`.
+
+Here's a summary of the differences between the concepts of entry and route:
+
+- **Entry**：Contains multiple modules to be executed during application startup.
+- **Client Router**：In Modern.js, it is usually implemented by `react-router`, determining which React component to load and render based on the browser's current URL using the History API.
+- **Server Router**：The server can mimic the behavior of [devServer](https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback), replacing all 404 responses with the index.html page to implement client-side routing, or implement any routing logic as needed.
+
+Their relationships are as follows:
+
+- Each webpack website project can contain multiple entries.
+- Each entry contains several modules (source files).
+- Each entry usually corresponds to an HTML file in the output.
+- Each HTML file can contain multiple client-side routing solutions (for example, using `react-router` and `@tanstack/react-router` in the same page).
+- Each HTML file can be mapped to multiple server-side routes.
+- Each HTML file can contain multiple client-side routing solutions, and when accessing different routes of a single-entry application, the same HTML file is actually used.
+
+## Troubleshooting
+
+1. **Does each `react-router` defined client route generate a separate HTML file?**
+
+No. Each entry usually only generates one HTML file, and if a single entry contains multiple client routing systems, it will share the same HTML file.
+
+2. **Does the convention routing project in the `routes/` directory generate multiple HTML files?**
+
+No. Modern.js will scan the `routes/` directory during startup and automatically generate client-side routes based on the file conventions. The HTML file generated corresponds to the `routes/` directory.
+
+3. **Does the Server Side Rendering (SSR) project generate multiple HTML files in the output?**
+
+A Server Side Rendering (SSR) project does not necessarily need to generate an HTML file in the output. It can only include the server-side JavaScript output. At this point, the `react-router` routing will be executed on the server side, and the HTML content will be rendered and responded while a request is triggered.
+
+At the same time, Modern.js will also generate a complete client-side HTML file for each entry in the output, which can be used to fallback to client-side rendering when the SSR fails.
+
+Another special case is a Single Entry Static Site Generation (SSG) project, even if it is built with a convention routing, Modern.js will also generate an HTML file for each `page.tsx` file.
+
+Note that even if SSR is used, React still needs to go through the hydration phase, so the routing defined by `react-router` will still be executed on the client side.
+
+4. **What are the exceptions to generating multiple HTML files?**
+
+You can configure [html-rspack-plugin](https://rspack.dev/plugins/rspack/html-rspack-plugin#generate-multiple-html-files) to generate multiple HTML files for each entry, or let multiple entries share the same HTML file.
+
+5. **What is a Multi-Page Application (MPA)?**
+
+The "page" in a Multi-Page Application (MPA) refers to a static HTML file.
+
+Generally, any application that outputs multiple entries and multiple HTML files can be called a Multi-Page Application.
+
+Narrowly speaking, a Multi-Page Application does not contain client-side routing, and navigation between pages is usually achieved through elements like `<a>` tags. But in practice, Multi-Page Applications also often need to configure client-side routing to meet different needs.
+
+Conversely, a application with `react-router` defined routes that generates only one HTML file is called a Single-Page Application (SPA).
+
 ## Deprecated
 
 Currently, if the entry directory meets the following conditions, it will also be considered an application entry:
@@ -262,7 +315,7 @@ The `index.[jt]sx?` file supported **Custom Bootstrap** and **Build Mode Entry**
 
 ### Custom Bootstrap
 
-When there is an `index.[jt]sx` file in the entry, and  the file's default export is a function, Modern.js will pass the default `bootstrap` function as an argument and use the exported function to replace the default `bootstrap`. 
+When there is an `index.[jt]sx` file in the entry, and  the file's default export is a function, Modern.js will pass the default `bootstrap` function as an argument and use the exported function to replace the default `bootstrap`.
 
 This allows developers to customize mounting components to DOM or add custom behaviors before mounting. For example:
 
@@ -277,4 +330,4 @@ export default (App: React.ComponentType, bootstrap: () => void) => {
 
 ### Build Mode Entry
 
-When an `index.[jt]sx` file exists in the entry directory and does not export a function via export default, this entry will also be considered a build mode entry.
+When an `index.[jt]sx` file exists in the entry directory and does not export a function via export default, this entry will also be considered a build mode entry.

package/docs/en/guides/get-started/introduction.mdx

@@ -5,44 +5,7 @@ sidebar_position: 1
 
 # Introduction to 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.
-
-Currently, Modern.js includes two solutions, targeting web application development and npm package development:
-
-import { SolutionCards } from '@site/src/components/SolutionCards';
-
-<SolutionCards
-  cards={[
-    {
-      title: 'Modern.js Framework',
-      description: 'For web application development',
-      link: 'http://modernjs.dev/en/',
-    },
-    {
-      title: 'Modern.js Module',
-      description: 'For npm package development',
-      link: 'http://modernjs.dev/module-tools/en/',
-    },
-  ]}
-/>
-
-As part of the Modern.js engineering system, each of the above solutions can be used separately and has its own independent documentation site. Developers can choose one or more solutions as needed.
-
-## About Documentation
-
-**The current documentation site corresponds to the Modern.js framework**, which is used to developing web applications.
-
-- If you need to develop an npm package, please refer to the [Modern.js Module documentation](https://modernjs.dev/module-tools).
-- If you need a build tool to bundle web applications, [Rsbuild](https://rsbuild.dev/) is recommended.
-- If you need to develop a documentation site, [Rspress](https://rspress.dev/) is recommended.
-
-:::tip
-Since the Modern.js framework is the most widely used, in this documentation site, we will omit "framework" and directly refer to it as Modern.js.
-:::
-
-## Modern.js Framework
-
-**The Modern.js framework is a progressive web framework based on React**. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.
+**Modern.js is a progressive web framework based on React**. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.
 
 Modern.js can provide developers with an ultimate **Development Experience** and enable applications to have better **User Experience**.
 

package/docs/en/guides/get-started/tech-stack.mdx

@@ -12,7 +12,7 @@ In this document, you can learn about the main technology stack involved in the
 
 Modern.js uses [React 18](https://react.dev/) to build user interfaces and is also compatible with React 17.
 
-Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://rsbuild.dev/guide/framework/vue3).
+Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://rsbuild.dev/guide/framework/vue).
 
 ## Routing
 

package/docs/zh/apis/app/runtime/core/use-runtime-context.mdx

@@ -1,6 +1,3 @@
----
-title: useRuntimeContext
----
 # useRuntimeContext
 
 该函数主要用于获取 Runtime 上下文，只能在函数组件中使用。
@@ -12,7 +9,7 @@ import { useRuntimeContext } from '@modern-js/runtime';
 
 export function App() {
   const runtimeContext = useRuntimeContext();
-  return <div>Hello World</div>;
+  return <div>Hello World</div>
 }
 ```
 
@@ -20,44 +17,100 @@ export function App() {
 
 ```ts
 type RuntimeContext = {
-  request: {
-    params: Record<string, string>;
-    pathname: string;
-    query: Record<string, string>;
-    headers: IncomingHttpHeaders;
-    cookie: string;
-  };
-  store: ReduckStore;
-  router: RemixRouter;
+  context: RequestContext;
 };
-
-function useRuntimeContext(): RuntimeContext;
 ```
 
-### 返回值
+### context
 
-- `request`：请求上下文中的附加信息。
-  - `params`：请求路径中的动态参数。
-  - `pathname`：请求的 pathname。
-  - `query`：请求的查询字符串对象。
-  - `headers`：请求头信息。
-  - `cookie`：请求的 cookie 信息。
-- `store`：在开启了 state 插件的时候，该值为 Reduck 全局 `store`。
-- `router`：在开启 router 插件的时候存在。
-  - `location`：当前路由对应的位置信息。同 [`useLocation`](/apis/app/runtime/router/router.html#uselocation) 返回值。
-  - `navigate`：导航到给定路径。同 [`useNavigate`](/apis/app/runtime/router/router.html#usenavigate) 返回值。
+用于获取[请求上下文](#请求上下文)。
 
-## 示例
+## 使用示例
 
-```tsx
-import { useRuntimeContext } from '@modern-js/runtime';
-import { fooModel } from '@/common/models';
+### 区分运行环境
 
+```ts
 function App() {
-  const { store } = useRuntimeContext();
+  const { context } = useRuntimeContext();
+
+  if (context.isBrowser === true) {
+    // 浏览器端执行逻辑
+    console.log('browser render')
+  } else {
+    // 服务器端执行逻辑 logger 功能需开启
+    context.logger.info('server render')
+  }
+}
+```
+
+### 请求上下文
+
+开启 SSR 时，在 Node 环境和浏览器端环境可以获取到同构的请求上下文。
+
+稍有不同的是 Node 环境还支持设置响应头、响应码，并提供了 Logger 日志与 Metrics 打点。
+
+:::tip
+当 SSR 未开启时，仅包含可在浏览器端获取的部分信息。
+
+:::
+
+import { Tabs, Tab as TabItem } from "@theme";
+
+<Tabs
+  defaultValue="RequestContext"
+  values={[
+    { label: 'RequestContext', value: 'RequestContext', },
+    { label: 'ServerContext', value: 'ServerContext', },
+    { label: 'ClientContext', value: 'ClientContext', },
+  ]
+}>
+<TabItem value="RequestContext">
 
-  const [state, actions] = store.use(fooModel);
+```ts
+type RequestContext = ServerContext | ClientContext;
+```
+
+</TabItem>
+<TabItem value="ServerContext">
 
-  return <div>state: {state}</div>;
+```ts
+interface ServerContext {
+  isBrowser: false;
+  request: {
+    userAgent: string;
+    cookie: string;
+    cookieMap: Record<string, any>;
+    query: Record<string, any>;
+    url: string;
+    host: string;
+    headers?: IncomingHttpHeaders;
+  };
+  response: {
+    setHeader: (key: string, value: string) => void;
+    status: (code: number) => void;
+  };
+  logger: Logger;
+  metrics: Metrics;
 }
 ```
+
+</TabItem>
+<TabItem value="ClientContext">
+
+```ts
+interface ClientContext {
+  isBrowser: true;
+  request: {
+    userAgent: string;
+    cookie: string;
+    cookieMap: Record<string, any>;
+    query: Record<string, any>;
+    url: string;
+    host: string;
+    headers?: IncomingHttpHeaders;
+  };
+}
+```
+
+</TabItem>
+</Tabs>

package/docs/zh/components/default-mwa-generate.mdx

@@ -1,5 +1,4 @@
 ```bash
-? 请选择你想创建的工程类型：Web 应用
 ? 请选择开发语言：TS
 ? 请选择包管理工具：pnpm
 ```

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

@@ -1,7 +1,6 @@
 `@modern-js/create` 会提供一个可交互的问答界面，根据结果初始化项目，按照默认的选择进行初始化：
 
 ```bash
-? 请选择你想创建的工程类型 Web 应用
 ? 请选择开发语言 TS
 ? 请选择包管理工具 pnpm
 ```

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

@@ -1,6 +1,5 @@
 ```bash
 $ npx @modern-js/create@latest myapp
-? 请选择你想创建的工程类型：Web 应用
 ? 请选择开发语言：TS
 ? 请选择包管理工具：pnpm
 ```