@modern-js/main-doc 2.0.2 → 2.1.0

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>;
 ```
 
 ## 示例

package/zh/apis/app/runtime/ssr/pre-render.md

@@ -13,7 +13,7 @@ export default () => (
   <>
     <PreRender interval={5} />
   </>
-)
+);
 ```
 
 ## 函数签名
@@ -59,7 +59,7 @@ export default function App() {
       <PreRender interval={10} />
       <div>Hello Modern</div>
     </>
-  )
+  );
 }
 ```
 
@@ -67,10 +67,14 @@ export default function App() {
 
 ```tsx
 /* 使用 query 中的 channel 和 header 中的 language 计算缓存标识 */
-<PreRender interval={10} level={2} includes={{
-  query: ["channel"],
-  header: ["language"]
-}} />
+<PreRender
+  interval={10}
+  level={2}
+  includes={{
+    query: ['channel'],
+    header: ['language'],
+  }}
+/>
 ```
 
 下面例子展示了如何不让测试频道影响线上缓存：

package/zh/apis/app/runtime/testing/cleanup.md

@@ -18,10 +18,10 @@ import { cleanup } from '@modenr-js/runtime/testing';
 ## 示例
 
 :::info 注
-请注意，如果你使用的测试框架支持 afterEach，并且它被注入到你的测试环境中（如mocha、Jest和Jasmine），**会默认在 afterEach 钩子里执行 `cleanup`**。否则，你将需要在每次测试后进行手动清理。
+请注意，如果你使用的测试框架支持 afterEach，并且它被注入到你的测试环境中（如 mocha、Jest 和 Jasmine），**会默认在 afterEach 钩子里执行 `cleanup`**。否则，你将需要在每次测试后进行手动清理。
 :::
 
-例如，如果你使用[ava](https://github.com/avajs/ava)测试框架，那么你需要像这样使用test.afterEach钩子。
+例如，如果你使用[ava](https://github.com/avajs/ava)测试框架，那么你需要像这样使用 test.afterEach 钩子。
 
 ```tsx
 import { cleanup, render } from '@modern-js/runtime/testing';

package/zh/apis/app/runtime/testing/render.md

@@ -44,7 +44,6 @@ function render(ui: React.ReactElement<any>, options: Options): RenderResult;
   - `wrapper`：是一个 react 组件，可用于自定义渲染逻辑。
   - `queries`：自定义一些自己的 `queries`。
 
-
 ### 返回值
 
 - `{...queries}`：所有可用的 [queries](https://testing-library.com/docs/queries/about/)。
@@ -55,7 +54,6 @@ function render(ui: React.ReactElement<any>, options: Options): RenderResult;
 - `unmount`：会卸载掉已渲染的组件。如果想测试组件卸载后的情况（如，绑定的事件是否在 unmount 阶段被卸载掉），那么这个 API 是很帮助的。
 - `asFragment`：返回当前渲染的组件的 [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) 对象。可用于测试 react 事件触发后 DOM 结构的响应。
 
-
 ## 示例
 
 ```ts

package/zh/apis/app/runtime/utility/css-in-js.md

@@ -30,7 +30,7 @@ const TomatoButton = styled(Button)`
   background: tomato;
 `;
 
-function ButtonExample(){
+function ButtonExample() {
   return (
     <>
       <Button>I'm purple.</Button>
@@ -38,5 +38,5 @@ function ButtonExample(){
       <TomatoButton>I'm red.</TomatoButton>
     </>
   );
-};
+}
 ```

package/zh/apis/app/runtime/utility/head.md

@@ -9,9 +9,7 @@ title: Head
 ```tsx
 import { Helmet } from '@modern-js/runtime/head';
 
-export default () => (
-  <Helmet>...</Helmet>
-)
+export default () => <Helmet>...</Helmet>;
 ```
 
 ## 示例
@@ -28,10 +26,10 @@ function IndexPage() {
       </Helmet>
       <p>Hello Modern.js!</p>
     </div>
-  )
+  );
 }
 
-export default IndexPage
+export default IndexPage;
 ```
 
 ## 更多用法

package/zh/apis/app/runtime/utility/loadable.md

@@ -34,7 +34,7 @@ function loadable(loadFn: Function, options?: Options) => LoadableComponent
 ```ts
 import loadable from '@modern-js/runtime/loadable';
 
-const OtherComponent = loadable(() => import('./OtherComponent'))
+const OtherComponent = loadable(() => import('./OtherComponent'));
 ```
 
 #### options.resolveComponent
@@ -44,20 +44,20 @@ const OtherComponent = loadable(() => import('./OtherComponent'))
 `module` 为 `loadFn` 返回的组件，`props` 是 loadable 返回的组件接受的 props 参数。默认的话，我们认为 `import` 的文件都是默认导出 react 组件，这时候直接渲染该组件即可。但当组件是具名导出的，或者我们需要根据具体的 `props` 动态判断需要渲染哪个组件的时候，可以使用 `resolveComponent` 来实现。下面是一个示例：
 
 ```ts title='component.js'
-export const Apple = () => 'Apple!'
-export const Orange = () => 'Orange!'
+export const Apple = () => 'Apple!';
+export const Orange = () => 'Orange!';
 ```
 
 ```ts title='loadable.js'
 const LoadableApple = loadable(() => import('./components'), {
-  resolveComponent: (components) => components.Apple,
-})
+  resolveComponent: components => components.Apple,
+});
 const LoadableOrange = loadable(() => import('./components'), {
-  resolveComponent: (components) => components.Orange,
-})
+  resolveComponent: components => components.Orange,
+});
 const LoadableFruit = loadable(() => import('./components'), {
   resolveComponent: (components, props) => components[props.fruit],
-})
+});
 ```
 
 #### options.fallback
@@ -73,11 +73,10 @@ const LoadableFruit = loadable(() => import('./components'), {
 #### LoadableComponent
 
 ```ts
-type LoadableComponent<Props> =
-  React.ComponentType<
-    Props & { fallback?: JSX.Element; }>
-  & {
-    preload(props?: Props): void;
-    load(props?: Props): Promise<React.ComponentType<Props>>;
-  }
+type LoadableComponent<Props> = React.ComponentType<
+  Props & { fallback?: JSX.Element }
+> & {
+  preload(props?: Props): void;
+  load(props?: Props): Promise<React.ComponentType<Props>>;
+};
 ```

package/zh/apis/app/runtime/web-server/hook.md

@@ -13,8 +13,8 @@ title: Hook
 ```ts
 import { AfterMatchHook, AfterRenderHook } from '@modern-js/runtime/server';
 
-export const afterMatch: AfterMatchHook = (context, next) => {}
-export const afterRender: AfterRenderHook = (context, next) => {}
+export const afterMatch: AfterMatchHook = (context, next) => {};
+export const afterRender: AfterRenderHook = (context, next) => {};
 ```
 
 :::info 自定义 Web Server
@@ -25,6 +25,7 @@ pnpm run new
 ? 请选择你想要的操作 创建工程元素
 ? 新建「自定义 Web Server」源码目录
 ```
+
 :::
 
 ## 函数签名
@@ -69,7 +70,7 @@ type AfterMatchContext = HookContext & {
     redirect: (url: string, status: number) => void;
     rewrite: (entry: string) => void;
   };
-}
+};
 
 type AfterRenderContext = {
   template: {
@@ -127,5 +128,5 @@ import type { AfterRender } from '@modern-js/runtime/server';
 
 export const afterRender: AfterRenderHook = (context, next) => {
   ctx.template.prependBody('<div>Footer</div>');
-}
+};
 ```

package/zh/apis/app/runtime/web-server/middleware.md

@@ -15,11 +15,11 @@ title: Middleware
 ```ts
 import { Middleware } from '@modern-js/runtime/server';
 
-export const middleware: Middleware = async (context, next) => {}
+export const middleware: Middleware = async (context, next) => {};
 export const middleware: Middleware[] = [
   async (context, next) => {},
   async (context, next) => {},
-]
+];
 ```
 
 :::info 自定义 Web Server
@@ -30,6 +30,7 @@ pnpm run new
 ? 请选择你想要的操作 创建工程元素
 ? 新建「自定义 Web Server」源码目录
 ```
+
 :::
 
 ## 函数签名
@@ -69,10 +70,12 @@ type MiddlewareContext = {
   };
 };
 
-type RequestHandler = (context: Context, next: NextFunction) => Promise<void> | void;
+type RequestHandler = (
+  context: Context,
+  next: NextFunction,
+) => Promise<void> | void;
 ```
 
-
 ### 参数
 
 - `context`：提供当前 Hook 上下文。
@@ -91,7 +94,7 @@ export const Middleware = () => async (ctx, next) => {
   ctx.res.once('finish', () => {
     console.log(Date.now() - start);
   });
-}
+};
 ```
 
 ### 注入服务端工具 & 数据
@@ -104,4 +107,3 @@ export const Middleware = () => async (ctx, next) => {
   ctx.res.locals.rpc = createRpcInstance();
 });
 ```
-

package/zh/apis/monorepo/commands/bump.md

@@ -31,10 +31,10 @@ npx modern bump
 # package-a
 
 ## 0.1.1
+
 ### Patch Changes
 
 - test publish
-
 ```
 
 import CommandTip from '@site-docs/components/command-tip.md'

package/zh/apis/monorepo/commands/change.md

@@ -42,12 +42,13 @@ $ npx modern change
 🦋  If you want to modify or expand on the changeset summary, you can find it here
 🦋  info /xxxx/monorepo/.changeset/long-lizards-talk.md
 ```
+
 上面我们给 `package-a` 和 `package-b` 都选择了 `patch` 变更，具体的变更信息在 monorepo 根目录下的 `.changeset/long-lizards-talk.md` 中:
 
 ```md
 ---
-"package-a": patch
-"package-b": patch
+'package-a': patch
+'package-b': patch
 ---
 
 test publish

package/zh/apis/monorepo/commands/gen-release-note.md

@@ -19,7 +19,7 @@ Options:
 需要在 bump 命令之前执行。
 :::
 
-``` markdown
+```markdown
 ## Features:
 
 [[#1160](https://github.com/modern-js-dev/modern.js/pull/1160)] export ExecaError type
@@ -27,7 +27,6 @@ Options:
 ## Bug Fix:
 
 [[#1264](https://github.com/modern-js-dev/modern.js/pull/1264)] fix: conventional router app use App.init not work
-
 ```
 
 import CommandTip from '@site-docs/components/command-tip.md'

package/zh/apis/monorepo/commands/index.md

@@ -4,9 +4,4 @@ type: ref
 
 # 命令
 
-本节涵盖了使用Monorepo工程的所有命令。
-
-
-
-
-
+本节涵盖了使用 Monorepo 工程的所有命令。

package/zh/apis/monorepo/commands/lint.md

@@ -18,4 +18,4 @@ import CommandTip from '@site-docs/components/command-tip.md'
 
 运行 `ESLint` 检查 monorepo 中代码语法情况， 通长情况下，我们只需要在 `git commit` 阶段通过 `lint-staged` 检查本次提交修改的部分代码。
 
-* `--no-fix` 参数设置后可以关闭自动修复 lint 错误代码的能力。
+- `--no-fix` 参数设置后可以关闭自动修复 lint 错误代码的能力。

package/zh/apis/monorepo/commands/release.md

@@ -2,7 +2,6 @@
 sidebar_position: 5
 ---
 
-
 ```bash
 Usage: modern release [options]
 

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

@@ -4,9 +4,4 @@ type: ref
 
 # 命令
 
-本节涵盖了使用Monorepo工程所有的文件约定
-
-
-
-
-
+本节涵盖了使用 Monorepo 工程所有的文件约定

package/zh/components/command-tip.md

@@ -15,7 +15,7 @@ pnpm run --filter "./packages/**" prepare
 
 例如，在如下 `package.json` 配置中：
 
-``` json
+```json
 {
   "scripts": {
     "command": "modern command"
@@ -24,6 +24,7 @@ pnpm run --filter "./packages/**" prepare
 ```
 
 执行 command 命令时携带参数方式为：
+
 ```bash
 pnpm run command --options
 ```
@@ -32,7 +33,7 @@ pnpm v6:
 
 在如下 `package.json` 配置中：
 
-``` json
+```json
 {
   "scripts": {
     "command": "modern command"