@modern-js/main-doc 2.0.3-alpha.0 → 2.1.0

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)。
 
 ### 返回值
 

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

@@ -7,12 +7,10 @@ import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 <ReduckTip />
 
-
 `createStore` 用于创建一个 Store 对象。Reduck 的 Store 基于 Redux 的 [Store](https://redux.js.org/api/store) 实现，用于存储应用的状态，同时提供一组用于管理状态和 Model 的方法。
 
 一般情况下，不需要使用这个 API，只有需要完全掌控 Store 的创建时，才会使用这个 API。例如，自定义一个 Store，传入 [`Provider`](./Provider.md) 组件使用。
 
-
 ## 函数签名
 
 ```ts
@@ -39,7 +37,7 @@ function createStore(config: StoreConfig): ReduckStore;
   - models?: 设置提前（Store 创建后）挂载到 Store 的 Model。（正常使用无需提前挂载）
   - middlewares?: 设置 Redux [中间件](https://redux.js.org/understanding/thinking-in-redux/glossary#middleware)。
   - enhancers?: 设置 Redux 的 [Store enhancer](https://redux.js.org/understanding/thinking-in-redux/glossary#store-enhancer) 。
-  - plugins?: 设置 Reduck 插件。***试验性配置，不推荐使用***。
+  - plugins?: 设置 Reduck 插件。**_试验性配置，不推荐使用_**。
 
 ### 返回值
 
@@ -49,8 +47,8 @@ Reduck Store 对象：
 - unmount：卸载 Model 对象，Model 的 State 会从 Store 中清除。
 - ReduxStore：Redux Store 对象具有的方法，[详见](https://redux.js.org/tutorials/fundamentals/part-4-store#redux-store)。
 
-
 ## 示例
+
 ```tsx
 const store = createStore();
 

package/zh/apis/app/runtime/model/handle-effect.md

@@ -50,7 +50,7 @@ interface State {
     pending: boolean;
     result: any;
     error: string;
-  }
+  };
 }
 ```
 
@@ -77,7 +77,8 @@ interface State {
 
 - error： 默认值为 `"error"`。改变返回 State 中的 `error` 字段名。用法同上。
 
-- combineMode：默认值为 `"merge"`。获取 fulfilled 状态的返回数据后，对 `result` 的处理方式：merge（合并）和replace（替换）。这里能自动处理的数据类型也仅限为简单的对象或者数组类型。
+- combineMode：默认值为 `"merge"`。获取 fulfilled 状态的返回数据后，对 `result` 的处理方式：merge（合并）和 replace（替换）。这里能自动处理的数据类型也仅限为简单的对象或者数组类型。
+
   - merge：前一次的数据与当前的数据合并。数据为数组类型，内部操作类似于 `[].concat(lastData, currentData)`；数据为对象类型，内部操作类似于 `{...lastData, ...curData}`。
   - replace：当前的数据直接替换之前的数据。
 
@@ -95,12 +96,10 @@ interface State {
 }
 ```
 
-
 ### 返回值
 
 分别处理 pending、fulfilled、rejected 三种状态的 Action 组成的对象。
 
-
 :::info 更多参考
 [副作用管理](/docs/guides/topic-detail/model/manage-effects)
 :::

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

@@ -127,7 +127,6 @@ interface ModelDesc {
 
 Reduck 内部集成了 [immer](https://github.com/immerjs/immer)，可以直接原始的 `state`，当 Action 没有显式返回值时，Reduck 内部会返回修改过的新的 State 对象。
 
-
 #### ModelDesc.computed
 
 定义 Model 的衍生状态。衍生状态的定义支持两种类型：
@@ -142,7 +141,6 @@ interface ModelDesc {
 }
 ```
 
-
 2. 依赖其他 Model 的状态
 
 ```ts
@@ -193,7 +191,6 @@ const fooModel = model('foo').define((context, { use }) => ({
 }));
 ```
 
-
 :::info 更多参考
 [创建 Model](/docs/guides/topic-detail/model/define-model)
 :::

package/zh/apis/app/runtime/model/use-local-model.md

@@ -9,7 +9,6 @@ import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 用于把 Model 中的 State 作为局部状态使用，效果类似 React 的 `useState`。`useLocalModel` API 形式上与 `useModel` 完全一致。具体使用请参考 [`useModel`](./use-model.md)。
 
-
 #### 示例
 
 ```tsx

package/zh/apis/app/runtime/model/use-store.md

@@ -9,7 +9,6 @@ import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 `useStore` 用于获取当前组件树共享的 Store。常用于在组件外访问 Model 的场景。注意，`useStore` 是一个 React Hook，只能在组件内使用。
 
-
 ## 函数签名
 
 ```ts
@@ -20,7 +19,6 @@ function useStore(): ReduckStore;
 
 - ReduckStore：Reduck Store，类型参考 [createStore](./create-store.md) 返回值。
 
-
 :::info 更多参考
 [使用 Model](/docs/guides/topic-detail/model/use-model#在组件外使用)
 :::

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

@@ -21,7 +21,7 @@ interface NavigateFunction {
       replace?: boolean;
       state?: any;
       relative?: RelativeRoutingType;
-    }
+    },
   ): void;
   (delta: number): void;
 }
@@ -30,13 +30,13 @@ interface NavigateFunction {
 `useNavigate` 返回一个可以用于执行导航操作的函数。
 
 ```tsx
-import { useNavigate } from "@modern-js/runtime/router";
+import { useNavigate } from '@modern-js/runtime/router';
 
 export function HomeButton() {
   let navigate = useNavigate();
 
   function handleClick() {
-    navigate("/home");
+    navigate('/home');
   }
 
   return (
@@ -81,19 +81,13 @@ function App() {
 ### useParams
 
 ```ts
-declare function useParams<
-  K extends string = string
->(): Readonly<Params<K>>;
+declare function useParams<K extends string = string>(): Readonly<Params<K>>;
 ```
 
 `useParams` 返回一个 key/value 的键值对，表示当前匹配的路由 `<Route path>` 中的参数信息。
 
 ```tsx
-import {
-  Switch,
-  Route,
-  useParams
-} from "@modern-js/runtime/router";
+import { Switch, Route, useParams } from '@modern-js/runtime/router';
 
 function BlogPost() {
   const { slug } = useParams();
@@ -103,10 +97,10 @@ function BlogPost() {
 function App() {
   return (
     <Routes>
-      <Route path="/" element={ <div>home</div> } />
-      <Route path="/blog/:slug" element={ <BlogPost />}/>
+      <Route path="/" element={<div>home</div>} />
+      <Route path="/blog/:slug" element={<BlogPost />} />
     </Routes>
-  )
+  );
 }
 ```
 
@@ -118,10 +112,7 @@ function App() {
 declare function Link(props: LinkProps): React.ReactElement;
 
 interface LinkProps
-  extends Omit<
-    React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    "href"
-  > {
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
   replace?: boolean;
   state?: any;
   to: To;
@@ -140,45 +131,31 @@ type To = string | Partial<Path>;
 ### NavLink
 
 ```ts
-declare function NavLink(
-  props: NavLinkProps
-): React.ReactElement;
+declare function NavLink(props: NavLinkProps): React.ReactElement;
 
 interface NavLinkProps
-  extends Omit<
-    LinkProps,
-    "className" | "style" | "children"
-  > {
+  extends Omit<LinkProps, 'className' | 'style' | 'children'> {
   caseSensitive?: boolean;
   children?:
     | React.ReactNode
     | ((props: { isActive: boolean }) => React.ReactNode);
-  className?:
-    | string
-    | ((props: {
-        isActive: boolean;
-      }) => string | undefined);
+  className?: string | ((props: { isActive: boolean }) => string | undefined);
   end?: boolean;
   style?:
     | React.CSSProperties
-    | ((props: {
-        isActive: boolean;
-      }) => React.CSSProperties);
+    | ((props: { isActive: boolean }) => React.CSSProperties);
 }
 ```
 
 `<NavLink>` 是一种特殊的 `<Link>`，当 `<NavLink>` 对应的链接和当前 URL 匹配时，会给 `<NavLink>` 所渲染的元素添加“激活”态样式。
 
-
 ### Outlet
 
 ```ts
 interface OutletProps {
   context?: unknown;
 }
-declare function Outlet(
-  props: OutletProps
-): React.ReactElement | null;
+declare function Outlet(props: OutletProps): React.ReactElement | null;
 ```
 
 `<Outlet>` 用于嵌套路由场景。在父路由的元素中使用，代表待渲染的子路由的元素在父组件中的位置。
@@ -201,10 +178,7 @@ function App() {
   return (
     <Routes>
       <Route path="/" element={<Dashboard />}>
-        <Route
-          path="messages"
-          element={<DashboardMessages />}
-        />
+        <Route path="messages" element={<DashboardMessages />} />
         <Route path="tasks" element={<DashboardTasks />} />
       </Route>
     </Routes>
@@ -225,7 +199,7 @@ interface RouteObject {
   action?: ActionFunction;
   element?: React.ReactNode | null;
   errorElement?: React.ReactNode | null;
-  handle?: RouteObject["handle"];
+  handle?: RouteObject['handle'];
   shouldRevalidate?: ShouldRevalidateFunction;
 }
 ```
@@ -241,14 +215,13 @@ const router = createBrowserRouter([
     element: <Team />,
 
     // when the URL matches this segment
-    path: "teams/:teamId",
+    path: 'teams/:teamId',
 
     // with this data loaded before rendering
     loader: async ({ request, params }) => {
-      return fetch(
-        `/fake/api/teams/${params.teamId}.json`,
-        { signal: request.signal }
-      );
+      return fetch(`/fake/api/teams/${params.teamId}.json`, {
+        signal: request.signal,
+      });
     },
 
     // performing this mutation when data is submitted to it
@@ -271,20 +244,17 @@ const router = createBrowserRouter(
       element={<Team />}
       path="teams/:teamId"
       loader={async ({ params }) => {
-        return fetch(
-          `/fake/api/teams/${params.teamId}.json`
-        );
+        return fetch(`/fake/api/teams/${params.teamId}.json`);
       }}
       action={async ({ request }) => {
         return updateFakeTeam(await request.formData());
       }}
       errorElement={<ErrorBoundary />}
-    />
-  )
+    />,
+  ),
 );
 ```
 
 ## 更多 API
 
 若想要了解完整的路由 API 信息，可至 [react-router 官网](https://reactrouter.com/web/guides/start) 查看。
-

package/zh/apis/app/runtime/ssr/no-ssr.md

@@ -9,11 +9,7 @@ title: NoSSR
 ```tsx
 import { NoSSR } from '@modern-js/runtime';
 
-export default () => (
-  <NoSSR>
-    ...
-  </NoSSR>
-)
+export default () => <NoSSR>...</NoSSR>;
 ```
 
 ## 示例