@modern-js/main-doc 0.0.0-next-1685383616364 → 0.0.0-next-1685436485731

package/docs/zh/guides/basic-features/routes.mdx

@@ -449,7 +449,7 @@ export const init = (context: RuntimeContext) => {
 在约定式路由下， Modern.js 会根据路由，自动地对路由进行分片，当用户访问具体的路由时，会自动加载对应的分片，这样可以有效地减少首屏加载的时间。但这也带来了一个问题，当用户访问一个路由时，如果该路由对应的分片还未加载完成，就会出现白屏的情况。
 这种情况下你可以通过定义 `Loading` 组件，在静态资源加载完成前，展示一个自定义的 `Loading` 组件。
 
-为了进一步提升用户体验，减少 loading 的时间，Modern.js 支持在 Link 组件上定义 `prefetch` 属性，可以提前对静态资源和数据进行加载， `prefetch` 属性有三个可选值：
+为了进一步提升用户体验，减少 loading 的时间，Modern.js 支持在 Link 组件上定义 `prefetch` 属性，可以提前对静态资源和数据进行加载：
 
 ```tsx
 <Link prefetch="intent" to="page">
@@ -461,6 +461,8 @@ export const init = (context: RuntimeContext) => {
 
 :::
 
+`prefetch` 属性有三个可选值：
+
 - `none`， 默认值，不会做 prefetch，没有任何额外的行为。
 - `intent`，这是我们推荐大多数场景下使用的值，当你把鼠标放在 Link 上时，会自动开始加载对应的分片和 Data Loader 中定义的数据，当鼠标移开时，会自动取消加载。在我们的测试中，即使是快速点击，也能减少大约 200ms 的加载时间。
 - `render`，当 Link 组件渲染时，就会加载对应的分片和 Data Loader 中定义的数据。
@@ -505,8 +507,6 @@ export default () => {
 Modern.js 默认对约定式路由做了一系列资源加载及渲染上的优化，并且提供了开箱即用的 SSR 能力，而这些能力，在使用自控路由时，都需要开发者自行封装，推荐开发者使用约定式路由。
 :::
 
-使用自控式路由时，如果开发者关闭了 [`runtime.router`](/configure/app/runtime/router) 配置，并直接使用 `react-router-dom`，那还需要根据 React Router 文档自行包裹 `Provider`。
-
 ## 其他路由方案
 
 默认情况下，Modern.js 会开启内置的路由方案，即 React Router。
@@ -519,7 +519,9 @@ export default defineConfig({
 });
 ```
 
-Modern.js 从 `@modern-js/runtime/router` 命名空间暴露了 React Router 的 API 供开发者使用，保证开发者和 Modern.js 中使用同一份代码。另外，这种情况下，React Router 的代码会被打包到 JS 产物中。如果项目已经有自己的路由方案，或者不需要使用客户端路由，可以关闭这个功能。
+如上述配置，当开启 [`runtime.router`](/configure/app/runtime/router) 配置时，Modern.js 会从 `@modern-js/runtime/router` 命名空间导出 React Router 的 API 供开发者使用，保证开发者和 Modern.js 中使用同一份代码，并自动根据 router 配置包裹 `Provider` 组件。另外，这种情况下，React Router 的代码会被打包到 JS 产物中。
+
+如果项目已经有自己的路由方案，或者不需要使用客户端路由，可以关闭这个功能。
 
 ```js
 export default defineConfig({
@@ -529,5 +531,6 @@ export default defineConfig({
 });
 ```
 
+如上述配置， 如果关闭了 [`runtime.router`](/configure/app/runtime/router) 配置，并直接使用 `react-router-dom` 进行项目路由管理时，还需要根据 React Router 文档自行包裹 `Provider`。
 
 

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

@@ -33,9 +33,9 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
 在 Modern.js 项目中，你可以很方便的将单入口切换成多入口，直接在项目下执行 `pnpm run new`，通过生成器创建入口即可：
 
 ```bash
-? 请选择你想要的操作：创建工程元素
-? 创建工程元素：新建「应用入口」
-? 请填写入口名称：new-entry
+? 请选择你想要的操作 创建工程元素
+? 请选择创建元素类型 新建「应用入口」
+? 请填写入口名称 new-entry
 ```
 
 执行后，Modern.js 会自动生成一个新的入口目录，此时可以看到 `src/` 目录变成如下结构：

package/docs/zh/guides/topic-detail/generator/plugin/develop.mdx

@@ -17,13 +17,13 @@ npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
 ### 扩展工程方案
 
 ```
-? 请选择你想创建的工程类型：Npm 模块
-? 请选择项目场景：生成器插件
-? 插件包名：plugin
-? 请选择开发语言：TS
-? 请选择包管理工具：pnpm
-? 插件类型：扩展
-? 插件基础类型：应用
+? 请选择你想创建的工程类型 Npm 模块
+? 请选择项目场景 生成器插件
+? 请输入生成器插件插件包名 plugin
+? 请选择开发语言 TS
+? 请选择包管理工具 pnpm
+? 请选择插件类型 扩展
+? 请选择插件基础类型 应用
 ```
 
 ### 创建工程方案场景
@@ -31,13 +31,13 @@ npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
 ```
 ? 请选择你想创建的工程类型：Npm 模块
 ? 请选择项目场景：生成器插件
-? 插件包名：plugin
-? 请选择开发语言：TS
-? 请选择包管理工具：pnpm
-? 插件类型：自定义
-? 插件关键字：mobile-app
-? 插件展示名称：移动应用
-? 插件基础类型：应用
+? 请输入生成器插件插件包名 plugin
+? 请选择开发语言 TS
+? 请选择包管理工具 pnpm
+? 请选择插件类型 自定义
+? 请输入插件关键字 mobile-app
+? 请输入插件展示名称 移动应用
+? 请选择插件基础类型 应用
 ```
 
 创建项目命令执行完成后，会对应的生成一个开发生成器插件的项目，`package.json` 中也会根据你的选择对应的生成 `meta` 信息。

package/docs/zh/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -35,7 +35,7 @@ import DefaultMWAGenerate from "@site-docs/components/default-mwa-generate";
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「微前端」模式
+? 请选择功能名称 启用「微前端」模式
 ```
 
 接下来，让我们注册微前端插件并添加开启微前端主应用，并增加子应用列表：
@@ -115,7 +115,7 @@ npx @modern-js/create@latest
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「微前端」模式
+? 请选择功能名称 启用「微前端」模式
 ```
 
 接下来，让我们注册微前端插件并添加开启微前端主应用，并增加子应用列表：
@@ -145,7 +145,7 @@ npx @modern-js/create@latest
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「微前端」模式
+? 请选择功能名称 启用「微前端」模式
 ```
 
 接下来，让我们注册微前端插件并修改 `modern.config.ts`，添加微前端子应用的配置 `deploy.microFrontend`：
@@ -197,7 +197,7 @@ npx @modern-js/create@latest
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「微前端」模式
+? 请选择功能名称 启用「微前端」模式
 ```
 
 接下来，让我们注册微前端插件并修改 `modern.config.ts`，添加微前端子应用的配置 `deploy.microFrontend`：

package/docs/zh/guides/topic-detail/model/test-model.mdx

@@ -10,7 +10,7 @@ title: 测试 Model
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「单元测试 / 集成测试」功能
+? 请选择功能名称 启用「单元测试 / 集成测试」功能
 ```
 
 即可开启测试功能支持。

package/docs/zh/tutorials/first-app/c03-css.mdx

@@ -115,7 +115,7 @@ Modern.js 集成了主流、轻量、通用的 Utility Class 工具库 [Tailwind
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用 Tailwind CSS 支持
+? 请选择功能名称 启用 「Tailwind CSS」 支持
 ```
 
 在 `modern.config.ts` 中注册 Tailwind 插件:

package/docs/zh/tutorials/first-app/c08-entries.mdx

@@ -15,7 +15,7 @@ title: 添加应用入口
 
 ```bash
 ? 请选择你想要的操作 创建工程元素
-? 创建工程元素 新建「应用入口」
+? 请选择创建元素类型 新建「应用入口」
 ? 请填写入口名称 (entry) landing-page
 ```
 

package/package.json

@@ -15,13 +15,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-1685383616364",
+  "version": "0.0.0-next-1685436485731",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-1685383616364"
+    "@modern-js/builder-doc": "0.0.0-next-1685436485731"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -33,9 +33,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "0.0.0-next-1685383616364",
-    "@modern-js/doc-tools": "0.0.0-next-1685383616364",
-    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1685383616364"
+    "@modern-js/doc-tools": "0.0.0-next-1685436485731",
+    "@modern-js/builder-doc": "0.0.0-next-1685436485731",
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1685436485731"
   },
   "scripts": {
     "dev": "modern dev",

package/docs/en/apis/app/hooks/api/framework/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "框架写法",
-  "position": 2
-}

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

@@ -1,57 +0,0 @@
----
-title: lambda/*.[tj]s
-sidebar_position: 1
----
-# lambda/*.[tj]s
-
-Declaring API routing in BFF framework mode. Except [some files](/apis/app/hooks/api/framework/lambda#allow-list), files in `api/` are registered as routes.
-
-:::info
-use `api/` need execute new command to enable the 「BFF」 feature.
-
-:::
-
-:::tip
-this file supports the use `js` or `ts`, but the functions must be exported using the ESM syntax.
-
-:::
-
-## Routing Rule
-
-### Default Route
-
-The files named `index` will be upper level routing:
-
-- `api/lambda/index.ts` -> `$BASENAME/`
-- `api/lambda/user/index.ts` -> `$BASENAME/user`
-
-### Multi Level Route
-
-The routing system also supports parsing multiple levels of files. and if you create a folder, the files will still be automatically parsed in the same way.
-
-- `api/lambda/hello.ts` -> `$BASENAME/hello`
-- `api/lambda/user/list.ts` -> `$BASENAME/user/list`
-
-### Dynamic Route
-
-Dynamic named routing parameters can be supported by creating folders or files with `[xxx]`.
-
-- `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`, the default value is `/api`.
-
-### Allow List
-
-By default, all files in the `api/` will be parsed as BFF function. but we also set a allow list, and these files will not be parsed:
-
-- file name start with `_`, for example: `_utils.ts`.
-- files in directory that name start with `_`, for example: `_utils/index.ts`、`_utils/cp.ts`.
-- test files, for example: `foo.test.ts`.
-- TypeScript define files, for example: `hello.d.ts`.
-- files in `node_module`.
-
-## Define Function
-
-the same as [Define Function](/apis/app/hooks/api/functions/api#define-function).

package/docs/en/apis/app/hooks/api/functions/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "函数写法",
-  "position": 1
-}

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

@@ -1,81 +0,0 @@
----
-title: '**/*.[tj]s'
-sidebar_position: 1
----
-# **/*.[tj]s
-
-Declaring API routing in BFF function mode. Except [some files](/apis/app/hooks/api/functions/api#allow-list), files in `api/` are registered as routes.
-
-:::info
-use `api/` need execute new command to enable the 「BFF」 feature.
-
-:::
-
-:::tip
-this file supports the use `js` or `ts`, but the functions must be exported using the ESM syntax.
-
-:::
-
-## Routing Rule
-
-### Default Route
-
-The files named `index` will be upper level routing:
-
-- `api/index.ts` -> `$BASENAME/`
-- `api/user/index.ts` -> `$BASENAME/user`
-
-### Multi Level Route
-
-The routing system also supports parsing multiple levels of files. and if you create a folder, the files will still be automatically parsed in the same way.
-
-- `api/hello.ts` -> `$BASENAME/hello`
-- `api/user/list.ts` -> `$BASENAME/user/list`
-
-### Dynamic Route
-
-Dynamic named routing parameters can be supported by creating folders or files with `[xxx]`.
-
-- `api/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
-- `api/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
-- `api/article/[id]/info.ts` -> `$BASENAME/article/:id/info`
-
-the `$BASENAME` can be configured in `modern.config.js`, the default value is `/api`.
-
-### Allow List
-
-By default, all files in the `api/` will be parsed as BFF function. but we also set a allow list, and these files will not be parsed:
-
-- file name start with `_`, for example: `_utils.ts`.
-- files in directory that name start with `_`, for example: `_utils/index.ts`、`_utils/cp.ts`.
-- test files, for example: `foo.test.ts`.
-- TypeScript define files, for example: `hello.d.ts`.
-- files in `node_module`.
-
-## Define Function
-
-In addition to the above routing rules, the function definition and export in the code also have conventions.
-
-function need named exports, and the name of the exported function is the HTTP Method:
-
-```ts
-export const get = async () => {
-  return {
-    name: 'Modern.js',
-    desc: 'Modern web Solutions',
-  };
-};
-```
-
-Export the function like above will generate a `POST` interface.
-
-App support 9 Method definitions: `GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`. so App can use these name as function export nane.
-
-The name is insensitive, whaterver `get`、`Get`、`GEt`、`GET`, can be accurately identified. And default export, `export default xxx` will be `Get` method.
-
-because `delete` is a keyword in JavaScript, use `del` or `DELETE` instead.
-
-Multiple functions of different Methods can be defined in one file, but if multiple functions of the same Method are defined, only the first can work.
-
-:::info
-It should be noted that the defined functions should be asynchronous, which is related to the type when the function is called.

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

@@ -1,12 +0,0 @@
----
-title: _app.[tj]s
-sidebar_position: 3
----
-# _app.[tj]s
-
-in BFF function mode, this file can add middleware before [BFF 函数](/apis/app/hooks/api/functions/api).
-
-:::note
-For detail, see [hook](/apis/app/runtime/bff/hook)
-
-:::

package/docs/en/apis/app/hooks/api/functions/common.mdx

@@ -1,9 +0,0 @@
----
-title: '**/_*.[tj]s, _*/**'
-sidebar_position: 2
----
-# **/_*.[tj]s, _*/**
-
-under BFF function mode, these files are not registered as routes.
-
-Any files that not routes, but required in the project can be named in this way.

package/docs/zh/apis/app/hooks/api/framework/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Framework Mode",
-  "position": 2
-}

package/docs/zh/apis/app/hooks/api/functions/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Function Mode",
-  "position": 1
-}

package/docs/zh/apis/app/hooks/api/functions/app.mdx

@@ -1,12 +0,0 @@
----
-title: _app.[tj]s
-sidebar_position: 3
----
-# _app.[tj]s
-
-在函数写法下，该文件可以为 [BFF 函数](/apis/app/hooks/api/functions/api)添加前置中间件。
-
-:::note
-具体示例请参考 [hook](/apis/app/runtime/bff/hook)
-
-:::

package/docs/zh/apis/app/hooks/api/functions/common.mdx

@@ -1,9 +0,0 @@
----
-title: '**/_*.[tj]s, _*/**'
-sidebar_position: 2
----
-# **/_*.[tj]s, _*/**
-
-在 BFF 函数写法下，这些文件不会注册为路由。
-
-你可以在这种目录或文件下放任意项目中需要的代码，文件等。