@modern-js/main-doc 0.0.0-nightly-20230920160608 → 0.0.0-nightly-20230922160540

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

@@ -6,7 +6,7 @@ $ pnpm run dev
 > modern dev
 
 info    Starting dev server...
-ready   Client compiled in 50ms
+ready   Client compiled in 50 ms
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/

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

@@ -39,8 +39,8 @@ import { defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   source: {
     entries: {
-      // Specify a new entry named entry_customize
-      entry_customize: './src/home/test/index.ts',
+      // Specify a new entry named 'my-entry'
+      'my-entry': './src/home/test/index.ts',
     },
     disableDefaultEntries: true,
   },
@@ -90,9 +90,10 @@ import { defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   source: {
     entries: {
-      entry_customize: {
+      'my-entry': {
         // entry file path
-        entry: './src/home/test/App.tsx',
+        entry: './src/my-page/index.tsx',
+        disableMount: true,
       },
     },
     // Disable default entry scanning
@@ -111,8 +112,8 @@ If you want to disable the logic of Modern.js automatically generating entry fil
 export default defineConfig({
   source: {
     entries: {
-      entry_customize: {
-        entry: './src/home/test/index.tsx',
+      'my-entry': {
+        entry: './src/my-page/index.tsx',
         disableMount: true,
       },
     },

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

@@ -32,7 +32,7 @@ The project initialized by Modern.js is a single entry (SPA) project, with the f
 
 In a Modern.js project, you can easily switch from single entry to multiple entries by running `pnpm run new` in the project directory and creating an entry:
 
-```bash
+```text
 ? Please select the operation you want: Create Element
 ? Please select the type of element to create: New "entry"
 ? Please fill in the entry name: new-entry
@@ -56,7 +56,7 @@ After running the command, Modern.js will automatically generate a new entry dir
 
 The original entry code has been moved to a directory with the same name as the `name` field in `package.json`, and a `new-entry` entry directory has been created.
 
-After running `pnpm run dev`, you can see a new route named `/new-entry` has been added, and the migrated code route has not changed.
+You can run `pnpm run dev` to start the development server. At this point, you will see a new route named `/new-entry` added, and the existing page routes remain unchanged.
 
 :::tip
 Modern.js will use the entry with the same name as the `name` field in `package.json` as the main entry. The route of the main entry is `/`, and the route of other entries is `/{entryName}`.
@@ -76,7 +76,9 @@ import EntryMode from '@site-docs-en/components/entry-mode.mdx';
 By default, Modern.js scans the files under `src/` before starting the project, identifies the entry, and generates the corresponding server-side route.
 
 :::tip
-You can modify the directory for entry identification by using the [source.entriesDir](/configure/app/source/entries-dir) config.
+
+- You can custom the recognition directory for page entries by using [source.entriesDir](/configure/app/source/entries-dir).
+- If you need to customize the entry points, please refer to [Custom Entries](#custom-entries).
 
 :::
 
@@ -98,7 +100,7 @@ When the project is not a single entry application, Modern.js will further look
 
 ### Framework Mode Entry
 
-Framework mode refers to the need to use Modern.js framework capabilities, such as Router, SSR, integrated calls, etc. Under this type of entry convention, the entry defined by the developer is not a real webpack compilation entry. Modern.js will generate a wrapped entry during startup, and you can find the real entry in `node_modules/.modern/{entryName}/index.js`.
+The framework mode refers to the need to use the framework capabilities of Modern.js, such as nested routing, SSR, and integrated BFF, etc. Under this kind of entry convention, the entry defined by the developer is not the actual compilation entry. When Modern.js is launched, it generates a wrapped entry, and the real entry can be found at `node_modules/.modern/[entryName]/index.js`.
 
 #### Conventional Routing
 
@@ -146,7 +148,7 @@ export default (App: React.ComponentType, bootstrap: () => void) => {
   // do something before bootstrap...
   initSomething().then(() => {
     bootstrap();
-  })
+  });
 };
 ```
 
@@ -181,9 +183,11 @@ export default AppWrapper;
 
 ### Build Mode Entry
 
-Build mode refers to not using any Modern.js runtime capabilities and completely defining the project's webpack entry by the developer.
+Build mode refers to the mode where the entry point of the page is not automatically generated by Modern.js, but is fully defined by the developers themselves.
+
+When there is an `index.[jt]sx` file in the entry directory and it is not exported as a function using `export default`, this type of file will be recognized as the entry module for webpack or Rspack.
 
-If there is an `index.[jt]sx` file in the entry and it does not export a default function, then this file is the real webpack entry file. Similar to [Create React App](https://github.com/facebook/create-react-app), you need to mount the component to the DOM node by yourself, add hot update code, etc. For example:
+In this case, Modern.js will not generate the entry code automatically. Therefore, you need to manually mount the component to the DOM node, for example:
 
 ```js title=src/index.jsx
 import React from 'react';
@@ -193,42 +197,39 @@ import App from './App';
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-Modern.js **does not recommend** using this method for new projects, as it loses some of the framework's capabilities, such as the `runtime` configuration in the `modern.config.js` file will no longer take effect. However, this method can be very useful when migrating projects from other frameworks to Modern.js, such as CRA, or manually building webpack.
+This approach is equivalent to enabling the [source.entries.disableMount](/configure/app/source/entries) option in Modern.js. When you use this approach, **you will not be able to use the runtime capabilities of the Modern.js framework**, such as the `runtime` configuration in the modern.config.js file will no longer take effect.
 
-## Specifying Entry Using Configuration
+## Custom Entries
 
-Most existing projects are not built according to the directory structure of Modern.js. If you want to change to the directory structure of Modern.js, there will be certain migration costs.
+In some cases, you may need to customize the entry configuration instead of using the entry conventions provided by Modern.js.
 
-In this case, in addition to using file conventions to generate entries, you can manually configure the entry in `modern.config.[jt]s`.
+For example, if you want to migrate a non-Modern.js project to Modern.js and it is not structured according to Modern.js directory structure, there might be some migration costs involved in changing it to the conventional structure. In such cases, you can custom the entries.
 
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    entries: {
-      // Specify a new entry named entry_customize
-      entry_customize: './src/home/test/index.ts',
-    },
-    // Disable default ingress scanning
-    disableDefaultEntries: true,
-  },
-});
-```
+Modern.js provides the following configuration options that you can set in [modern.config.ts](/configure/app/usage):
 
-### Disable Default Entry Scanning
+- [source.entries](/configure/app/source/entries): Used to set custom entry objects.
+- [source.disableDefaultEntries](/configure/app/source/disable-default-entries): Used to disable Modern.js's default entry scanning behavior. When you use custom entries, parts of your project structure might coincidentally match the Modern.js conventional directory structure, but you may not want Modern.js to generate entry configurations for them. Enabling this option can help avoid this issue.
 
-When using custom entries, part of the project structure may coincidentally hit the directory conventions of Modern.js, but in fact, this part of the directory is not the real entry.
+### Example
 
-Modern.js provides the `disableDefaultEntries` configuration to disable the default entry scanning rules. When you need to customize the entry, you generally need to use `disableDefaultEntries` in combination with `entries`. This way, some existing projects can be quickly migrated without modifying the directory structure.
+Here is an example of a custom entry point. You can also refer to the documentation of the corresponding configuration options for more usage.
 
 ```ts title="modern.config.ts"
 export default defineConfig({
   source: {
+    entries: {
+      // Specify an entry named 'my-entry'
+      'my-entry': {
+        // Path to the entry module
+        entry: './src/my-page/index.tsx',
+        // Disable automatic generation of entry code by Modern.js
+        disableMount: true,
+      },
+    },
+    // Disable entry scanning behavior
     disableDefaultEntries: true,
   },
 });
 ```
 
-:::tip
-For detailed usage, please refer to [source.entries](/configure/app/source/entries) and [source.disableDefaultEntries](/configure/app/source/disable-default-entries).
-
-:::
+Note that when you enable `disableMount`, **you won't be able to use the runtime capabilities of the Modern.js framework**, such as the `runtime` configuration in the modern.config.ts file.

package/docs/en/guides/get-started/quick-start.mdx

@@ -92,7 +92,7 @@ $ pnpm run build
 > modern build
 
 info    Staring production build...
-ready   Client compiled in 50ms
+ready   Client compiled in 50 ms
 info    Production file sizes:
 
   File                                      Size         Gzipped

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

@@ -6,7 +6,7 @@ $ pnpm run dev
 > modern dev
 
 info    Starting dev server...
-ready   Client compiled in 50ms
+ready   Client compiled in 50 ms
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/

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

@@ -39,8 +39,8 @@ import { defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   source: {
     entries: {
-      // 指定一个名称为 entry_customize 的新入口
-      entry_customize: './src/home/test/index.ts',
+      // 指定一个名称为 'my-entry' 的新入口
+      'my-entry': './src/home/test/index.ts',
     },
     // 禁用默认入口扫描
     disableDefaultEntries: true,
@@ -92,9 +92,10 @@ import { defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   source: {
     entries: {
-      entry_customize: {
+      'my-entry': {
         // 入口文件路径
-        entry: './src/home/test/index.tsx',
+        entry: './src/my-page/index.tsx',
+        disableMount: true,
       },
     },
     // 禁用默认入口扫描
@@ -113,8 +114,8 @@ export default defineConfig({
 export default defineConfig({
   source: {
     entries: {
-      entry_customize: {
-        entry: './src/home/test/index.tsx',
+      'my-entry': {
+        entry: './src/my-page/index.tsx',
         disableMount: true,
       },
     },

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

@@ -6,9 +6,9 @@ sidebar_position: 1
 
 通过本章节，你可以了解到 Modern.js 中的入口约定，以及如何自定义入口。
 
-## 什么是入口（Entry）
+## 什么是入口
 
-**入口指的是一个页面的起始模块。**
+**入口（Entry）指的是一个页面的起始模块。**
 
 在 Modern.js 项目中，每一个入口对应一个独立的页面，也对应一条服务端路由。默认情况下，Modern.js 会基于目录约定来自动确定页面的入口，同时也支持通过配置项来自定义入口。
 
@@ -56,7 +56,7 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
 
 原本的入口代码被移动到了和 `package.json` 中 `name` 同名的目录下，并创建了 `new-entry` 入口目录。
 
-执行 `pnpm run dev` 后，可以看到新增了一条名为 `/new-entry` 的路由，并且被迁移的代码路由并未发生变化。
+你可以执行 `pnpm run dev` 启动开发服务，此时可以看到新增了一条名为 `/new-entry` 的路由，并且原有页面的路由并未发生变化。
 
 :::tip
 Modern.js 会将与 `package.json` 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。
@@ -76,7 +76,8 @@ import EntryMode from '@site-docs/components/entry-mode.mdx';
 默认情况下，Modern.js 启动项目前会对 `src/` 下的文件进行扫描，识别入口，并生成对应的服务端路由。
 
 :::tip
-可以通过 [source.entriesDir](/configure/app/source/entries-dir) 修改页面的入口识别目录。
+- 你可以通过 [source.entriesDir](/configure/app/source/entries-dir) 修改页面入口的识别目录。
+- 如果你需要自定义入口，请参考 [自定义入口](#自定义入口)。
 
 :::
 
@@ -98,7 +99,7 @@ import EntryMode from '@site-docs/components/entry-mode.mdx';
 
 ### 框架模式入口
 
-框架模式指需要使用 Modern.js 框架能力，例如 Router、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的 webpack 编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/{entryName}/index.js` 找到真正的入口。
+框架模式指的是需要使用 Modern.js 的框架能力，例如嵌套路由、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/[entryName]/index.js` 找到真正的入口。
 
 #### 约定式路由
 
@@ -146,7 +147,7 @@ export default (App: React.ComponentType, bootstrap: () => void) => {
   // do something before bootstrap...
   initSomething().then(() => {
     bootstrap();
-  })
+  });
 };
 ```
 
@@ -170,7 +171,9 @@ function render() {
     // runtime 的插件参数...
   })(App);
   if (IS_BROWSER) {
-    customBootstrap(AppWrapper, () => bootstrap(AppWrapper, MOUNT_ID, root, ReactDOM));
+    customBootstrap(AppWrapper, () =>
+      bootstrap(AppWrapper, MOUNT_ID, root, ReactDOM),
+    );
   }
   return AppWrapper;
 }
@@ -182,9 +185,11 @@ export default AppWrapper;
 
 ### 构建模式入口
 
-构建模式是指不使用任何 Modern.js 运行时的能力，完全由开发者自己定义项目 webpack 的入口。
+构建模式指的是不使用 Modern.js 自动生成的入口，而是完全由开发者自行定义页面的入口。
 
-如果入口中存在 `index.[jt]sx` ，并且没有默认导出函数时，这时候该文件就是真正的 webpack 入口文件。这里和 [Create React App](https://github.com/facebook/create-react-app) 类似，需要自己将组件挂载到 DOM 节点、添加热更新代码等。例如:
+当入口目录中存在 `index.[jt]sx`，并且没有通过 `export default` 导出函数时，这类文件就会被识别为 webpack 或 Rspack 的 entry 模块。
+
+此时 Modern.js 不会自动生成入口代码，因此需要你自行将组件挂载到 DOM 节点上，例如:
 
 ```js title=src/index.jsx
 import React from 'react';
@@ -194,42 +199,39 @@ import App from './App';
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-Modern.js **不推荐**新项目使用这种方式，这种方式丧失了框架的一些能力，如 **`modern.config.js` 文件中的 `runtime` 配置将不会再生效**。但是在项目从其他框架迁移到 Modern.js，例如 CRA，或是自己手动搭建的 webpack 时，这种方式会非常有用。
+这种方式等价于开启 Modern.js 的 [source.entries.disableMount](/configure/app/source/entries) 选项。当你使用这种方式时，**将无法使用 Modern.js 框架的运行时能力**，比如 modern.config.js 文件中的 `runtime` 配置将不会再生效。
 
-## 使用配置指定入口
+## 自定义入口
 
-大部分存量项目并不是按照 Modern.js 的目录结构来搭建的。如果要改成 Modern.js 约定的目录结构，会存在一定的迁移成本。
+在某些情况下，你可能需要自定义入口配置，而不是使用 Modern.js 提供的入口约定。
 
-在这种情况下，除了使用文件约定生成入口外，你可以在 `modern.config.[jt]s` 中手动配置入口。
+比如你需要将一个非 Modern.js 项目迁移到 Modern.js，它并不是按照 Modern.js 的目录结构来搭建的。如果你要将它改成 Modern.js 约定的目录结构，可能会存在一定的迁移成本。这种情况下，你就可以使用自定义入口。
 
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    entries: {
-      // 指定一个名称为 entry_customize 的新入口
-      entry_customize: './src/home/test/index.ts',
-    },
-    // 禁用默认入口扫描
-    disableDefaultEntries: true,
-  },
-});
-```
+Modern.js 提供了以下配置项，你可以在 [modern.config.ts](/configure/app/usage) 中配置它们：
 
-### 禁用默认入口扫描
+- [source.entries](/configure/app/source/entries)：用于设置自定义的入口对象。
+- [source.disableDefaultEntries](/configure/app/source/disable-default-entries)：用于关闭 Modern.js 默认的入口扫描行为。当你使用自定义入口时，项目的部分结构可能会恰巧命中 Modern.js 约定的目录结构，但你可能不希望 Modern.js 为你自动生成入口配置，开启该选项可以避免这个问题。
 
-当使用自定义入口时，项目的部分结构可能恰巧命中了 Modern.js 的目录约定，但实际上这部分目录并不是真实的入口。
+### 示例
 
-Modern.js 提供了 `disableDefaultEntries` 配置，来禁用默认的入口扫描规则。当你需要自定义入口时，一般需要将 `disableDefaultEntries` 与 `entries` 结合使用。这样，一些存量项目可以在不修改目录结构的情况下，快速地进行迁移。
+下面是一个自定义入口的例子，你也可以查看相关配置项的文档来了解更多用法。
 
 ```ts title="modern.config.ts"
 export default defineConfig({
   source: {
+    entries: {
+      // 指定一个名为 'my-entry' 的入口
+      'my-entry': {
+        // 入口模块的路径
+        entry: './src/my-page/index.tsx',
+        // 关闭 Modern.js 自动生成入口代码的行为
+        disableMount: true,
+      },
+    },
+    // 禁用入口扫描行为
     disableDefaultEntries: true,
   },
 });
 ```
 
-:::tip
-详细用法请查看 [source.entries](/configure/app/source/entries) 和 [source.disableDefaultEntries](/configure/app/source/disable-default-entries)。
-
-:::
+注意，当你开启 `disableMount` 时，**将无法使用 Modern.js 框架的运行时能力**，比如 modern.config.ts 文件中的 `runtime` 配置将不会再生效。

package/docs/zh/guides/get-started/quick-start.mdx

@@ -92,7 +92,7 @@ $ pnpm run build
 > modern build
 
 info    Staring production build...
-ready   Client compiled in 50ms
+ready   Client compiled in 50 ms
 info    Production file sizes:
 
   File                                      Size         Gzipped

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-nightly-20230920160608",
+  "version": "0.0.0-nightly-20230922160540",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "0.0.0-nightly-20230920160608"
+    "@modern-js/sandpack-react": "0.0.0-nightly-20230922160540"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-nightly-20230920160608"
+    "@modern-js/builder-doc": "0.0.0-nightly-20230922160540"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -35,12 +35,12 @@
     "ts-node": "^10.9.1",
     "typescript": "^5",
     "fs-extra": "^10",
-    "rspress": "0.0.13",
-    "@rspress/shared": "0.0.13",
+    "rspress": "0.1.1",
+    "@rspress/shared": "0.1.1",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20230920160608",
-    "@modern-js/builder-doc": "0.0.0-nightly-20230920160608"
+    "@modern-js/builder-doc": "0.0.0-nightly-20230922160540",
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20230922160540"
   },
   "scripts": {
     "dev": "rspress dev",