@modern-js/main-doc 2.0.2 → 2.1.0

package/zh/apis/app/commands/serve.md

@@ -21,12 +21,10 @@ Options:
 export default defineConfig({
   server: {
     port: 8081,
-  }
-})
+  },
+});
 ```
 
 import CommandTip from '@site-docs/components/command-tip.md'
 
 <CommandTip />
-
-

package/zh/apis/app/hooks/api/framework/lambda.md

@@ -19,23 +19,23 @@ sidebar_position: 1
 
 路由系统会将以 `index` 命名的文件会被映射到上一层目录。
 
-* `api/lambda/index.ts` -> `$BASENAME/`
-* `api/lambda/user/index.ts` -> `$BASENAME/user`
+- `api/lambda/index.ts` -> `$BASENAME/`
+- `api/lambda/user/index.ts` -> `$BASENAME/user`
 
 ### 多级路由
 
 路由系统也支持解析多级的文件，如果创建文件夹结构，文件仍会以相同方式自动解析路由。
 
-* `api/lambda/hello.ts` -> `$BASENAME/hello`
-* `api/lambda/user/list.ts` -> `$BASENAME/user/list`
+- `api/lambda/hello.ts` -> `$BASENAME/hello`
+- `api/lambda/user/list.ts` -> `$BASENAME/user/list`
 
 ### 动态路由
 
 同样的，你可以通过创建带有 `[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`
+- `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`
 
 其中的 `$BASENAME` 可以在 `modern.config.js` 中进行配置，默认值为 `/api`。
 
@@ -43,11 +43,11 @@ sidebar_position: 1
 
 默认 `api` 目录下所有文件都会当作 BFF 函数文件去解析，但同样我们也设置了白名单，这些文件不被被解析：
 
-* 命名以 `_` 开头的文件。例如：`_utils.ts`。
-* 命名以 `_` 开头的文件夹下所有文件。例如：`_utils/index.ts`、`_utils/cp.ts`。
-* 测试文件。例如：`foo.test.ts`。
-* TypeScript 类型文件。例如：`hello.d.ts`。
-* `node_module` 下的文件。
+- 命名以 `_` 开头的文件。例如：`_utils.ts`。
+- 命名以 `_` 开头的文件夹下所有文件。例如：`_utils/index.ts`、`_utils/cp.ts`。
+- 测试文件。例如：`foo.test.ts`。
+- TypeScript 类型文件。例如：`hello.d.ts`。
+- `node_module` 下的文件。
 
 ## 函数定义
 

package/zh/apis/app/hooks/api/functions/api.md

@@ -1,5 +1,5 @@
 ---
-title: "**/*.[tj]s"
+title: '**/*.[tj]s'
 sidebar_position: 1
 ---
 
@@ -17,23 +17,23 @@ sidebar_position: 1
 
 路由系统会将以 `index` 命名的文件会被映射到上一层目录。
 
-* `api/index.ts` -> `$BASENAME/`
-* `api/user/index.ts` -> `$BASENAME/user`
+- `api/index.ts` -> `$BASENAME/`
+- `api/user/index.ts` -> `$BASENAME/user`
 
 ### 嵌套路由
 
 路由系统也支持解析嵌套的文件，如果创建嵌套文件夹结构，文件仍会以相同方式自动解析路由。
 
-* `api/hello.ts` -> `$BASENAME/hello`
-* `api/user/list.ts` -> `$BASENAME/user/list`
+- `api/hello.ts` -> `$BASENAME/hello`
+- `api/user/list.ts` -> `$BASENAME/user/list`
 
 ### 动态路由
 
 同样的，你可以通过创建带有 `[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`
+- `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`
 
 其中的 `$BASENAME` 可以在 `modern.config.js` 中进行配置，默认值为 `/api`。
 
@@ -41,11 +41,11 @@ sidebar_position: 1
 
 默认 `api` 目录下所有文件都会当作 BFF 函数文件去解析，但同样我们也设置了白名单，这些文件不被被解析：
 
-* 命名以 `_` 开头的文件。例如：`_utils.ts`。
-* 命名以 `_` 开头的文件夹下所有文件。例如：`_utils/index.ts`、`_utils/cp.ts`。
-* 测试文件。例如：`foo.test.ts`。
-* TypeScript 类型文件。例如：`hello.d.ts`。
-* `node_module` 下的文件。
+- 命名以 `_` 开头的文件。例如：`_utils.ts`。
+- 命名以 `_` 开头的文件夹下所有文件。例如：`_utils/index.ts`、`_utils/cp.ts`。
+- 测试文件。例如：`foo.test.ts`。
+- TypeScript 类型文件。例如：`hello.d.ts`。
+- `node_module` 下的文件。
 
 ## 函数定义
 

package/zh/apis/app/hooks/api/functions/app.md

@@ -8,5 +8,3 @@ sidebar_position: 3
 :::note
 具体示例请参考 [hook](/docs/apis/app/runtime/bff/hook)
 :::
-
-

package/zh/apis/app/hooks/api/functions/common.md

@@ -1,5 +1,5 @@
 ---
-title: "**/_*.[tj]s, _*/**"
+title: '**/_*.[tj]s, _*/**'
 sidebar_position: 2
 ---
 

package/zh/apis/app/hooks/index.md

@@ -5,8 +5,3 @@ type: ref
 # 文件约定
 
 本节涵盖了使用应用工程的所有文件约定。
-
-
-
-
-

package/zh/apis/app/hooks/shared.md

@@ -4,4 +4,3 @@ sidebar_position: 5
 ---
 
 共享源码目录。当项目在 `api/`、`server/`、`src/` 下有公共代码时，可将这些代码放到 shared 目录下，而不是直接引用。
-

package/zh/apis/app/hooks/src/app.md

@@ -13,33 +13,40 @@ import { createApp, bootstrap } from '@modern-js/runtime';
 // App.[jt]sx
 import App from '@_modern_js_src/App';
 import { state } from '@modern-js/runtime/plugins';
-import { immer, effects, autoActions, devtools } from '@modern-js/runtime/model';
+import {
+  immer,
+  effects,
+  autoActions,
+  devtools,
+} from '@modern-js/runtime/model';
 
-const createStatePlugins = (config) => {
+const createStatePlugins = config => {
   const plugins = [];
   plugins.push(immer(config['immer']));
   plugins.push(effects(config['effects']));
   plugins.push(autoActions(config['autoActions']));
   plugins.push(devtools(config['devtools']));
   return plugins;
-}
+};
 let AppWrapper = null;
 function render() {
   AppWrapper = createApp({
     plugins: [
-     state({...{plugins: createStatePlugins(true)}, ...App?.config?.state}),
-    ]
-  })(App)
+      state({
+        ...{ plugins: createStatePlugins(true) },
+        ...App?.config?.state,
+      }),
+    ],
+  })(App);
   if (IS_BROWSER) {
     bootstrap(AppWrapper, MOUNT_ID);
   }
-  return AppWrapper
+  return AppWrapper;
 }
 AppWrapper = render();
-export default AppWrapper;;
+export default AppWrapper;
 ```
 
-
 :::note
 在多入口的场景下，每个入口都可以拥有独立的 `App.[jt]sx`，详见[入口](/docs/guides/concept/entries)。
 :::

package/zh/apis/app/hooks/src/index_.md

@@ -21,12 +21,10 @@ export default (App: React.ComponentType) => {
 };
 ```
 
-
 2. 完全接管 webpack 入口:
 
 当 `src/index.[tj]sx?` 下没有默认导出函数时，该文件即为真正的 webpack 打包入口文件, 可以直接像使用 create-react-app 等脚手架一样组织代码:
 
-
 ```js title=src/index.jsx
 import React from 'react';
 import ReactDOM from 'react-dom/client';

package/zh/apis/app/hooks/src/routes.md

@@ -8,6 +8,7 @@ sidebar_position: 2
 当项目结构为 `Routes 入口` 类型时， 会分析 `src/routes` 目录下的文件得到客户端路由配置。具体用法请查看[约定式路由](/docs/guides/basic-features/routes)
 
 任何在 `src/routes` 下的 `layout.[tj]sx` 和 `page.[tj]sx` 都会作为应用的路由：
+
 ```bash {3}
 .
 └── routes
@@ -31,12 +32,14 @@ sidebar_position: 2
 ```
 
 会产出下面两条路由：
+
 - `/`
 - `/user`
 
 ## 动态路由
 
 如果路由文件的目录名以 `[]` 命名，生成的路由会作为动态路由。例如以下文件目录：
+
 ```
 └── routes
     ├── [id]
@@ -52,7 +55,6 @@ sidebar_position: 2
 
 在 loader 中，params 会作为 [loader](/docs/guides/basic-features/data-fetch#loader-函数) 的入参，通过 `params` 的属性可以获取到对应的参数。
 
-
 ## 布局组件
 
 如下面的例子，可以通过添加 `layout.tsx`，为所有路由组件添加公共的布局组件：
@@ -68,6 +70,7 @@ sidebar_position: 2
 ```
 
 在布局组件中可以通过使用 `<Outlet>` 表示子组件：
+
 ```tsx title=routes/layout.tsx
 import { Link, Outlet, useLoaderData } from '@modern-js/runtime/router';
 
@@ -76,14 +79,10 @@ export default () => {
     <>
       <Outlet></Outlet>
     </>
-  )
-}
+  );
+};
 ```
 
 :::note
 `<Outlet>` 是 React Router 6 中新的 API，详情可以查看 [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
 :::
-
-
-
-

package/zh/apis/app/hooks/src/server.md

@@ -1,5 +1,5 @@
 ---
-title: "*.[server|node].[tj]sx"
+title: '*.[server|node].[tj]sx'
 sidebar_position: 8
 ---
 
@@ -14,12 +14,14 @@ sidebar_position: 8
 import { useLoaderData } from '@modern-js/runtime/router';
 import { readFile } from './utils.server';
 
-type ProfileData = { /* some type declarations */ }
+type ProfileData = {
+  /* some type declarations */
+};
 
-export const loader = async(): ProfileData => {
+export const loader = async (): ProfileData => {
   const profile = await readFile('profile.json');
   return profile;
-}
+};
 
 export default function UserPage() {
   const profileData = useLoaderData() as ProfileData;

package/zh/apis/app/hooks/src/stories.md

@@ -1,5 +1,5 @@
 ---
-title: "**/*.stories.[tj]sx"
+title: '**/*.stories.[tj]sx'
 sidebar_position: 7
 ---
 

package/zh/apis/app/hooks/src/test.md

@@ -1,5 +1,5 @@
 ---
-title: "**/*.test.[tj]sx?"
+title: '**/*.test.[tj]sx?'
 sidebar_position: 6
 ---
 

package/zh/apis/app/runtime/app/define-config.md

@@ -22,7 +22,7 @@ Runtime 配置通常可以在 `modern.config.js` 的 `runtime` 空间下配置
 ## 函数签名
 
 ```ts
-function defineConfig(Component, config): any
+function defineConfig(Component, config): any;
 ```
 
 ### 参数
@@ -44,7 +44,6 @@ defineConfig(App, {
 })
 ```
 
-
 1. `defineConfig` 里可配置 [runtime.state](/docs/configure/app/runtime/state)、[runtime.router](/docs/configure/app/runtime/router) 等运行时配置。
 
 2. `defineConfig` 在配置某个属性之前，如 `router`，需要确保 `modern.config.js` 已经配置开启了该功能。

package/zh/apis/app/runtime/bff/hook.md

@@ -16,10 +16,10 @@ import { hook } from '@modern-js/runtime/{namespace}';
 
 ```ts
 type HookOptions = {
-  addMiddleware: string | function
-}
+  addMiddleware: string | function;
+};
 
-function hook(options: HookOptions): void
+function hook(options: HookOptions): void;
 ```
 
 ### 参数

package/zh/apis/app/runtime/core/bootstrap.md

@@ -7,7 +7,7 @@ title: bootstrap
 ## 使用姿势
 
 ```ts
-import ReactDOM from 'react-dom/client'
+import ReactDOM from 'react-dom/client';
 import { bootstrap } from '@modern-js/runtime';
 
 bootstrap(App, 'root', undefined, ReactDOM);
@@ -39,7 +39,7 @@ type BootStrap<T = unknown> = (
 ## 示例
 
 ```tsx
-import ReactDOM from 'react-dom/client'
+import ReactDOM from 'react-dom/client';
 import { createApp, bootstrap } from '@modern-js/runtime';
 
 function App() {
@@ -52,7 +52,6 @@ const WrappedApp = createApp({
 })(App);
 
 bootstrap(WrappedApp, 'root', undefined, ReactDOM);
-
 ```
 
 :::info

package/zh/apis/app/runtime/core/use-loader.md

@@ -21,14 +21,14 @@ type Options = {
   skip: boolean;
   params: Record<string, any>;
   static: boolean;
-}
+};
 type ReturnData = {
   data: Record<string, any>;
   loading: boolean;
   error: Error;
   reload: (params?: Record<string, any>) => Promise<any> | undefined;
   reloading: boolean;
-}
+};
 
 function useLoader(loaderFn: LoaderFn, options: Options): ReturnData;
 ```

package/zh/apis/app/runtime/core/use-module-apps.md

@@ -24,20 +24,21 @@ import EnableMicroFrontend from '@site-docs/components/enable-micro-frontend.md'
 
 <EnableMicroFrontend />
 
-
 ```tsx title=App.tsx
 function App() {
   const { Home, Contact } = useModuleApps();
 
-  return <div>
-    Master APP
-    <Route exact path='/home'>
-      <Home />
-    </Route>
-    <Route exact path='/home'>
-      <Contact />
-    </Route>
-  </div>;
+  return (
+    <div>
+      Master APP
+      <Route exact path="/home">
+        <Home />
+      </Route>
+      <Route exact path="/home">
+        <Contact />
+      </Route>
+    </div>
+  );
 }
 
 defineConfig(App, {
@@ -45,21 +46,20 @@ defineConfig(App, {
     apps: [
       {
         // name 区分大小写，name 提供的是什么 useModuleApps 返回的就是什么
-        name: "Home",
-        entry: "http://127.0.0.1:8081/"
+        name: 'Home',
+        entry: 'http://127.0.0.1:8081/',
       },
       {
-          name: "Contact",
-          entry: "http://localhost:8082"
-      }
-    ]
-  }
-})
+        name: 'Contact',
+        entry: 'http://localhost:8082',
+      },
+    ],
+  },
+});
 ```
 
 通过 `useModuleApps()` 获取到 `Home` 和 `Contact` 子应用组件（名称和配置里的 `name` 字段对应），之后就可以像使用普通的 React 组件一样去加载子应用。
 
-
 ### 集中式路由
 
 **集中式路由** 是将子应用的激活路由集中配置的方式。我们给子应用列表信息添加 `activeWhen` 字段来启用 **集中式路由**。
@@ -76,9 +76,11 @@ import { useModuleApp } from '@modern-js/plugin-runtime';
 function App() {
   const { MApp } = useModuleApps();
 
-  return <div>
-    <MApp />
-  </div>
+  return (
+    <div>
+      <MApp />
+    </div>
+  );
 }
 
 defineConfig(App, {
@@ -86,23 +88,22 @@ defineConfig(App, {
     apps: [
       {
         // name 区分大小写，name 提供的是什么 useModuleApps 返回的就是什么
-        name: "Dashboard",
+        name: 'Dashboard',
         activeWhen: '/dashboard',
-        entry: "http://127.0.0.1:8081/"
+        entry: 'http://127.0.0.1:8081/',
       },
       {
-        name: "TableList",
+        name: 'TableList',
         activeWhen: '/table',
-        entry: "http://localhost:8082"
-      }
-    ]
-  }
-})
+        entry: 'http://localhost:8082',
+      },
+    ],
+  },
+});
 ```
 
 这样启动应用后，访问 `/dashboard` 路由，会渲染 `Dashboard` 子应用，访问 `/table` 路由，会渲染 `TableList` 子应用。
 
-
 ## 加载动画
 
 可以通过以下方式，自定义组件加载过程的过渡动画。
@@ -111,24 +112,26 @@ defineConfig(App, {
 function App() {
   const { Home } = useModuleApps();
 
-  return <div>
-    Master APP
-    <Route exact path='/home'>
-      <Home
-        loadable={{
-          loading: ({ pastDelay, error }: any) => {
-            if (error) {
-              console.error(error);
-              return <div>error: {error?.message}</div>;
-            } else if (pastDelay) {
-              return <div>loading</div>;
-            } else {
-              return null;
-            }
-          },
-        }}
-      />
-    </Route>
-  </div>;
+  return (
+    <div>
+      Master APP
+      <Route exact path="/home">
+        <Home
+          loadable={{
+            loading: ({ pastDelay, error }: any) => {
+              if (error) {
+                console.error(error);
+                return <div>error: {error?.message}</div>;
+              } else if (pastDelay) {
+                return <div>loading</div>;
+              } else {
+                return null;
+              }
+            },
+          }}
+        />
+      </Route>
+    </div>
+  );
 }
 ```

package/zh/apis/app/runtime/core/use-runtime-context.md

@@ -11,7 +11,7 @@ import { useRuntimeContext } from '@modern-js/runtime';
 
 export function App() {
   const runtimeContext = useRuntimeContext();
-  return <div>Hello World</div>
+  return <div>Hello World</div>;
 }
 ```
 
@@ -27,12 +27,11 @@ type RuntimeContext = {
     cookie: string;
   };
   store: ReduckStore;
-}
+};
 
 function useRuntimeContext(): RuntimeContext;
 ```
 
-
 ### 返回值
 
 - `request`：请求上下文中的附加信息。
@@ -54,6 +53,6 @@ function App() {
 
   const [state, actions] = store.use(fooModel);
 
-  return <div>state: {state}</div>
+  return <div>state: {state}</div>;
 }
 ```

package/zh/apis/app/runtime/index.md

@@ -5,8 +5,3 @@ type: ref
 # 运行时
 
 本节涵盖了使用 `@modern-js/runtime` 的所有 API。
-
-
-
-
-

package/zh/apis/app/runtime/model/Provider.md

@@ -24,6 +24,7 @@ interface ProviderProps {
 - config：创建 Reduck Store 的配置，同 [`createApp`](./create-app.md) 的 `config` 参数。
 
 ## 示例
+
 ```tsx title="应用入口文件"
 ReactDOM.render(
   <Provider>

package/zh/apis/app/runtime/model/auto-actions.md

@@ -60,7 +60,7 @@ State 类型为 Array 时，生成下列 Actions：
 <!-- 语义与原生方法不同，待修改 API -->
 - `splice`：通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回修改后的数组（注意和原生 `splice` 返回值不同）。
   - 语法：`splice(start[, deleteCount[, item1[, item2[, ...]]]])`
-  - `start`：指定修改的开始位置（从0计数）。
+  - `start`：指定修改的开始位置（从 0 计数）。
   - `deleteCount`：可选，整数，表示要移除的数组元素的个数。
   - `item, item2, ...`：可选，要添加进数组的元素，从 start 位置开始。如果不指定，则 `splice` 将只删除数组元素。
 

package/zh/apis/app/runtime/model/connect.md

@@ -13,12 +13,17 @@ Reduck 原始类型较为复杂，以下涉及类型定义的地方，展示的
 
 `connect` 功能上同 `useModel` 一致，是对应的 HOC 风格的 API。建议优先使用 Hook 风格的 `useModel`。
 
-
 ## 类型
 
 ```ts
-type SelectStateToProps = (...modelStates: State[], ownProps? :any) => PlainObject;
-type SelectActionsToProps = (...modelActions: Actions[], ownProps? :any) => PlainObject;
+type SelectStateToProps = (
+  ...modelStates: State[],
+  ownProps?: any,
+) => PlainObject;
+type SelectActionsToProps = (
+  ...modelActions: Actions[],
+  ownProps?: any,
+) => PlainObject;
 
 function connect(models: Model, options?: ConnectOptions);
 function connect(
@@ -27,15 +32,14 @@ function connect(
 );
 ```
 
-
 ## 参数
+
 - `models`：传入的 1 个或多个 Model，当 `models` 为数组类型参数时，最后两项元素可以是用于筛选 State 的函数（ `SelectStateToProps` 类型）和用于筛选 Actions 的函数（ `SelectActionsToProps` 类型）。
   - `SelectStateToProps`： `modelStates` 是传入的 Model 对象的 State 组成的数组，`ownProps` 是当前组件接收外部传递的 `props`，`SelectStateToProps` 返回的数据会传递到组件的 `props` 上。当 `models` 中没有传入 `SelectStateToProps` 参数时，所有 Model 的 State 进行合并后传递到组件的 `props` 上。
   - `SelectActionsToProps`： `modelActions` 是传入的 Model 对象的 Actions 组成的数组，`ownProps` 是当前组件接收外部传递的 `props`，`SelectActionsToProps` 返回的数据也会传递到组件的 `props` 上。当 `models` 中没有传入 `SelectActionsToProps` 参数时，所有 Model 的 Actions 进行合并后传递到组件的 `props` 上。
 
 - `options`：可选参数，用于辅助配置。目前支持设置 `forwardRef`，用于控制是否转发组件的 `ref`，默认值为 `false`，表示不转发 `ref`。设置为 `{forwardRef: true}`，表示转发 `ref`。
 
-
 ## 返回值
 
 返回一个高阶组件：接收一个传入的组件，返回一个在 `props` 上注入了额外 State 和 Actions 的组件。

package/zh/apis/app/runtime/model/create-app.md

@@ -10,7 +10,7 @@ import ReduckTip from '@site-docs/components/reduck-tip.md'
 Reduck 内部默认会使用 `createApp` 创建一个全局应用，如果整个应用只需要共享一个 Store，那么是不需要使用 `createApp` 的。只有当需要在应用局部创建共享 Store 时，才需要使用 `createApp`。
 
 :::caution 注意
-- 注意 `@modern-js/runtime/model` 中导出的 `createApp` 用于管理状态，而 `@modern-js/runtime` 导出的 `createApp` 用于管理整个应用的运行时环境，两者功能不同。
+注意 `@modern-js/runtime/model` 中导出的 `createApp` 用于管理状态，而 `@modern-js/runtime` 导出的 `createApp` 用于管理整个应用的运行时环境，两者功能不同。
 :::
 
 ## 函数签名
@@ -28,8 +28,8 @@ function createApp(config: AppConfig): object;
 
 - config：`Record<string, any>`
   - StoreConfig：同 [`createStore`](./create-store.md) 的参数。
-  - devTools：默认值为true。是否开启 Redux DevTools，当为对象类型时，支持配置 Redux DevTools 的 [Options](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md)。
-  - autoActions：默认值为true。是否[自动生成 Actions](./auto-actions.md)。
+  - devTools：默认值为 true。是否开启 Redux DevTools，当为对象类型时，支持配置 Redux DevTools 的 [Options](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md)。
+  - autoActions：默认值为 true。是否[自动生成 Actions](./auto-actions.md)。
 
 ### 返回值