@modern-js/main-doc 2.0.2 → 2.1.0

package/zh/guides/topic-detail/micro-frontend/c03-main-app.md

@@ -15,7 +15,6 @@ import EnableMicroFrontend from '@site-docs/components/enable-micro-frontend.md'
 
 当在 `masterApp` 配置上提供了信息后，将会认为该应用为主应用，目前存在两种子应用信息的配置方式，这两种方式分别应用于不同的场景。
 
-
 ### 直接注册子应用信息
 
 可以直接通过配置注册子应用信息：
@@ -29,7 +28,6 @@ import MicroRuntimeConfig from '@site-docs/components/micro-runtime-config.md';
 
 <MicroRuntimeConfig />
 
-
 ### 自定义远程应用列表
 
 通过该函数可以拉取远程的子应用列表，并将其注册至运行时框架：
@@ -38,22 +36,22 @@ import MicroRuntimeConfig from '@site-docs/components/micro-runtime-config.md';
 defineConfig(App, {
   masterApp: {
     manifest: {
-      getAppList: async ()=> {
+      getAppList: async () => {
         // 可以从其他远程接口获取
         return [
-            {
-              name: 'DashBoard',
-              entry: 'http://127.0.0.1:8081/'
-            },
-            {
-              name: 'TableList',
-              entry: 'http://localhost:8082'
-            }
+          {
+            name: 'DashBoard',
+            entry: 'http://127.0.0.1:8081/',
+          },
+          {
+            name: 'TableList',
+            entry: 'http://localhost:8082',
+          },
         ];
       },
-    }
-  }
-})
+    },
+  },
+});
 ```
 
 ## 渲染子应用
@@ -80,28 +78,30 @@ import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 import { Route, Switch } from '@modern-js/runtime/router';
 
 function App() {
-  const { DashBoard, TableList} = useModuleApps();
-
-  return <div>
-    <Route path="/dashboard">
-      <DashBoard
-        loadable={{
-          loading: ({ pastDelay, error }: any) => {
-            if (error) {
-              return <div>error: {error?.message}</div>;
-            } else if (pastDelay) {
-              return <div>loading</div>;
-            } else {
-              return null;
-            }
-          },
-        }}
-      />
-    </Route>
-    <Route path="/table">
-      <TableList />
-    </Route>
-  </div>
+  const { DashBoard, TableList } = useModuleApps();
+
+  return (
+    <div>
+      <Route path="/dashboard">
+        <DashBoard
+          loadable={{
+            loading: ({ pastDelay, error }: any) => {
+              if (error) {
+                return <div>error: {error?.message}</div>;
+              } else if (pastDelay) {
+                return <div>loading</div>;
+              } else {
+                return null;
+              }
+            },
+          }}
+        />
+      </Route>
+      <Route path="/table">
+        <TableList />
+      </Route>
+    </div>
+  );
 }
 ```
 
@@ -111,7 +111,6 @@ function App() {
 
 **集中式路由** 是将子应用的激活路由集中配置的方式。我们给子应用列表信息添加 `activeWhen` 字段来启用 **集中式路由**。
 
-
 <MicroRuntimeConfig />
 
 然后在主应用中使用 `useModuleApp` 方法获取 `MApp` 组件, 并在主应用渲染 `MApp`。
@@ -122,15 +121,16 @@ import { useModuleApp } from '@modern-js/plugin-runtime';
 function App() {
   const { MApp } = useModuleApps();
 
-  return <div>
-    <MApp />
-  </div>
+  return (
+    <div>
+      <MApp />
+    </div>
+  );
 }
 ```
 
 这样启动应用后，访问 `/dashboard` 路由，会渲染 `Dashboard` 子应用，访问 `/table` 路由，会渲染 `TableList` 子应用。
 
-
 ### 两种模式混用
 
 当然 **子应用组件** 和 **集中式路由** 是可以混合使用的。
@@ -138,7 +138,6 @@ function App() {
 - 一部分子应用作为 **子应用组件** 激活，另外一部分作为 **集中式路由** 激活。
 - 一部分子应用既可以作为 **集中式路由** 激活，也可以作为 **子应用组件** 激活。
 
-
 ### 添加 loading
 
 通过配置 `loadable` 配置，可以为「集中式路由」、「子应用」添加 loading 组件，并可以考虑错误、超时、闪烁等情况的出现，从而为用户提供更好的用户体验。该功能的设计与实现参考至 [react-loadable](https://github.com/jamiebuilds/react-loadable)，基本功能较为相似。
@@ -179,7 +178,6 @@ function Loading({ error }) {
 
 所以 loading 组件还提供了 `pastDelay` 参数，超过设置的延迟展示时才会为 true，可以通过 `delay` 参数设置延迟的时长
 
-
 ```tsx
 function Loading({ error, pastDelay }) {
   if (error) {
@@ -230,7 +228,6 @@ function Loading({ error, timeOut, pastDelay }) {
 
 超时状态是关闭的，可以通过在 `loadable` 中设置 `timeout` 参数开启
 
-
 ```tsx
 
 function App(){

package/zh/guides/topic-detail/micro-frontend/c04-communicate.md

@@ -11,9 +11,11 @@ Modern.js 中，会将子应用包裹成一个 React 组件，直接通过给 Re
 function App() {
   const { MApp } = useModuleApps();
 
-  return <div>
-    <MApp count={100} />
-  </div>;
+  return (
+    <div>
+      <MApp count={100} />
+    </div>
+  );
 }
 ```
 
@@ -33,7 +35,7 @@ function App(props) {
 ```ts
 // 子应用监听登录事件
 const App = () => {
-  const handleLogin = (userInfo) => {
+  const handleLogin = userInfo => {
     console.log(`${userInfo.name} has login`);
   };
 
@@ -46,7 +48,7 @@ const App = () => {
 };
 
 // 主应用触发监听事件
-api.getLoginInfo.then((res) => {
+api.getLoginInfo.then(res => {
   if (res.code === 0) {
     window.Garfish.channel.emit('login', res.data);
   }

package/zh/guides/topic-detail/micro-frontend/c05-mixed-stack.md

@@ -5,7 +5,7 @@ title: 混合技术栈
 
 Modern.js 微前端方案是基于 [Garfish](https://garfishjs.org/) 封装的，提供了一些更开箱即用的使用方式。
 
-当你的主应用和子应用不全是 Modern.js 应用的时候，可以参考这片文档。
+当你的主应用和子应用不全是 Modern.js 应用的时候，可以参考这篇文档。
 
 1. 子应用是 **Modern.js**，主应用使用的原生 Garfish 微前端。
 2. 主应用是 **Modern.js**，子应用有的是其它技术栈。

package/zh/guides/topic-detail/model/auto-actions.md

@@ -84,7 +84,6 @@ function Counter() {
 在 `countModel` 中已经自定义 `setA` 这个 Action，调用 `actions.setA()` 时，最终执行的是用户自定义的 `setA`。
 :::
 
-
 :::info 补充信息
 相关 API 的更多介绍，请参考[这里](/docs/apis/app/runtime/model/auto-actions)。
 :::

package/zh/guides/topic-detail/model/computed-state.md

@@ -6,7 +6,6 @@ title: 衍生状态
 一些场景中，组件需要对 Model 中的 State 进行进一步计算，才能在组件中使用，这部分逻辑可以直接写在组件内部，也可以通过 Model 的衍生状态实现。
 衍生状态定义在 Model 中的 `computed` 字段下。根据依赖的 Model 的不同、返回类型的不同，衍生状态的定义方法可以分为以下 3 种。
 
-
 ## 只依赖自身的 State
 
 衍生状态只依赖当前 Model 的 State，State 会作为第一个参数，传入衍生状态的定义函数中。
@@ -45,7 +44,6 @@ const todoModel = model('todo').define({
 });
 ```
 
-
 衍生状态最终会和 Model 的 State 进行合并，因此，可以通过 Model 的 State 对象访问到衍生状态，例如，`visibleTodos` 在组件内的使用方式如下：
 
 ```ts

package/zh/guides/topic-detail/model/define-model.md

@@ -7,7 +7,7 @@ title: 创建 Model
 
 通过 `model` API 创建 Model，例如，`model('foo')` 表示要创建一个名为 `foo` 的 Model，通过调用 `model('foo')` 返回的 `define` 函数，定义 Model 包含的 State、Actions 等：
 
-``` js
+```js
 import { model, useModel } from '@modern-js/runtime/model';
 
 const fooModel = model('foo').define({
@@ -31,7 +31,7 @@ const fooModel = model('foo').define({
 
 `define` 除了接收对象类型的参数，还可以接收函数类型的参数。例如：
 
-``` js
+```js
 import { model, useModel } from '@modern-js/runtime/model';
 
 const fooModel = model('foo').define((context, utils) => {
@@ -50,17 +50,14 @@ const fooModel = model('foo').define((context, utils) => {
 
 通过函数定义 Model 时，函数内部会自动传入 `context`、`utils` 2 个参数，`context` 是 Reduck 的上下文对象，可以获取到 `store` 对象，`utils` 提供了一组工具函数，方便实现 Model 通信等复杂功能需求。
 
-
 Model 支持复制。例如：
 
-``` ts
+```ts
 const barModel = fooModel('bar');
 ```
 
 barModel 是基于 fooModel 创建出一个的新的 Model 对象，类比面向对象编程语言中的概念，barModel 和 fooModel 是基于同一个类（Class）创建出的 2 个实例对象。当两个模块的状态管理逻辑相同，例如一个页面中的两个 tab 模块，使用的数据的结构和逻辑相同，区别只是从不同的接口获取数据，那么可以通过 Model 复制的方式，创建 2 个不同的 Model 对象。
 
-
 :::info 补充信息
 本节涉及的 API 的详细定义，请参考[这里](/docs/apis/app/runtime/model/model_)。
 :::
-

package/zh/guides/topic-detail/model/faq.md

@@ -26,7 +26,7 @@ import parentModel from '@MasterApp/models/todoModel';
 function SubModelApp() {
   const [state, actions] = useModel(parentModel);
 
-  return <div>...</div>
+  return <div>...</div>;
 }
 ```
 
@@ -36,8 +36,5 @@ function SubModelApp() {
 
 ```ts
 // App 是主应用的入口组件，sharedModel1、sharedModel2 是需要共享的 Model。
-App.models = [
-  sharedModel1,
-  sharedModel2
-]
+App.models = [sharedModel1, sharedModel2];
 ```

package/zh/guides/topic-detail/model/manage-effects.md

@@ -93,7 +93,7 @@ function Todo() {
 
 调用 `handleEffect` 会返回如下数据结构:
 
-``` ts
+```ts
 {
   pending() { // ... },
   fulfilled() { // ... },
@@ -103,7 +103,6 @@ function Todo() {
 
 这个数据结构和我们在 `actions` 下的 `load` 对象的数据结构是相同的。`handleEffect` 返回的对象，其实就是对应了 Effects 函数需要的 3 个 action。
 
-
 利用 `handleEffect`，改写 `todoModel`：
 
 ```ts
@@ -148,7 +147,6 @@ const todoModel = model('todo').define({
 `handleEffect` [API](/docs/apis/app/runtime/model/handle-effect)。
 :::
 
-
 Effects 函数中，也支持手动调用 Actions，例如：
 
 ```ts
@@ -191,7 +189,6 @@ const todoModel = model('todo').define((context, utils) => ({
 可以使用 `use` 函数加载其它 Model（包括 Model 自身），实现 [Model 间通信](/docs/guides/topic-detail/model/model-communicate)。
 :::
 
-
 ## 副作用不影响 state
 
 有些场景下，我们只需要读取 State，执行相关副作用逻辑，副作用不会修改 State。
@@ -255,5 +252,5 @@ const handleClick = async () => {
 ```
 
 :::info 补充信息
-- [示例代码](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/effects)
+[示例代码](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/effects)
 :::

package/zh/guides/topic-detail/model/model-communicate.md

@@ -96,7 +96,6 @@ Modern.js 默认开启 [自动生成 actions](./auto-actions.md)，所以 `stepM
 
 ![communicate-models](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/models-communicate.gif)
 
-
 :::info 补充信息
 - 本节完整的[示例代码](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/models-communication)。
 - 相关 API 的更多介绍，请参考：[model](/docs/apis/app/runtime/model/model_#函数类型)。
@@ -132,7 +131,6 @@ const fooModel = model('foo').define((context, utils) => {
 
 这样，我们不需要在 `loadA`、`loadB` 中重复获取 `barModel` 对象，简化了代码逻辑。
 
-
 ## Model 内通信
 
 Model 内通信，也主要分为两种场景：
@@ -140,7 +138,7 @@ Model 内通信，也主要分为两种场景：
 1. Effects 函数调用自身 Model 的 Actions 函数、或其他 Effects 函数。
 2. Actions 函数调用自身 Model 的 其他 Actions 函数。
 
-在 [副作用管理](/docs/guides/topic-detail/model/manage-effects)  一节，我们演示过 Effects 函数如何调用 Actions 函数。
+在 [副作用管理](/docs/guides/topic-detail/model/manage-effects) 一节，我们演示过 Effects 函数如何调用 Actions 函数。
 
 这里我们再来举一个例子：
 
@@ -216,4 +214,3 @@ const fooModel = model('foo').define((context, { use, onMount }) => {
 ```
 
 这样，我们也可以实现代码的简化。
-

package/zh/guides/topic-detail/model/performance.md

@@ -5,7 +5,6 @@ title: 性能优化
 
 Reduck 内部已经做了大量性能优化工作，一般情况下不需要考虑性能问题。不过当对性能比较敏感、或者遇到了性能问题，可以考虑从以下 3 个方面，进行更有针对性的性能优化。
 
-
 ## Model 拆分
 
 当 `useModel` 返回 Model 对象的完整 State 时，State 任意部分的变化都会导致调用了 `useModel` 的组件重新渲染。
@@ -59,10 +58,8 @@ const barModel = model('bar').define({
     },
   },
 });
-
 ```
 
-
 ## 状态筛选
 
 `useModel` 支持传入 selector 函数，对返回给组件的 State 和 Actions 做筛选。我们可以通过 selector 函数，确保返回给组件的 State 是组件直接需要使用的，从而保证组件不会因为其他无关状态的变化而重新渲染。
@@ -167,7 +164,6 @@ const barModel = model("bar").define({
 
 我们创建缓存函数 `createSelector`，仅当 `barModel` 的状态发生改变或 `fooModel` 的 `a` 状态发生改变时，才会重新计算 `combineA` 的值。
 
-
 :::info 补充信息
-- 本节完整的[示例代码](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/performance-optimization)
+本节完整的[示例代码](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/performance-optimization)
 :::

package/zh/guides/topic-detail/model/quick-start.md

@@ -20,7 +20,6 @@ Modern.js 的状态管理解决方案，是通过内置 Reduck 实现的。在 M
 2. Reduck 也可以脱离 Modern.js 作为状态管理库[单独使用](/docs/guides/topic-detail/model/use-out-of-modernjs)。
 :::
 
-
 ## 核心概念
 
 Reduck 中的核心概念只有 4 个： Model、State、Actions、Effects。
@@ -78,7 +77,6 @@ export default countModel;
 
 在 `add` action 中，我们可以直接修改 state 的值，进行加 1 操作，而不需要把 state 作为不可变对象进行操作，这是因为 Reduck 集成了 [immer](https://github.com/immerjs/immer)，可以直接修改原 state 对象。
 
-
 接下来，我们演示如何在组件中使用 Model。
 
 新建一个组件 Counter，在组件内通过 `useModel` API 使用 `countModel`：
@@ -105,12 +103,8 @@ function Counter() {
 由于使用的案例比较简单，这里并没有严格按照 MVC 模式进行分层，组件 `Counter` 同时起到了 V 和 C 两层的作用。
 :::
 
-
-
 最终演示效果如下：
 
 ![countModel](https://lf3-static.bytednsdoc.com/obj/eden-cn/eueh7vhojuh/modern/simple-count-model.gif)
 
-
 这样，我们就完了一个简单的计数器应用。本节完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model)查看。
-

package/zh/guides/topic-detail/model/redux-integration.md

@@ -9,10 +9,11 @@ Reduck 基于 Redux 实现，因此可以使用 Redux [生态的库](https://red
 
 ```ts
 ReactDOM.render(
-  <Provider config={{ middlewares: [logger] }}>  // 通过 Provider 的 config 参数设置 中间件
+  <Provider config={{ middlewares: [logger] }}>
+    // 通过 Provider 的 config 参数设置 中间件
     <App />
   </Provider>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
 ```
 

package/zh/guides/topic-detail/model/test-model.md

@@ -33,6 +33,7 @@ describe('test model', () => {
   });
 });
 ```
+
 :::info 注
 这里使用的 [`createStore`](/docs/apis/app/runtime/model/create-store) 是从 `@modern-js/runtime/testing` 导入的，内部会使用 [`runtime.state`](/docs/configure/app/runtime/state) 的配置去创建 `store`。
 :::
@@ -40,4 +41,3 @@ describe('test model', () => {
 在测试用例里，我们新建一个 `store` 来挂载 `countModel`，通过 `store.use` 获取 `countModel` 的 State 和 Actions。然后调用 `add` Action 更新状态，并断言更新后的状态值。
 
 执行 `pnpm run test` 命令，触发测试用例的执行。
-

package/zh/guides/topic-detail/model/typescript-best-practice.md

@@ -11,22 +11,22 @@ Reduck 对 TS 提供了良好的支持，大部分使用场景下，无需任何
 
 ```ts title="示例"
 interface State {
-  data: string
+  data: string;
 }
 
 export const foo = model<State>('foo').define({
   state: {
-    data: ''
+    data: '',
   },
   computed: {
-    withSuffix: (state) => state.data + 'suffix'
+    withSuffix: state => state.data + 'suffix',
   },
   actions: {
-    setData: (state, payload:string) => {
-      state.data = payload
-    }
-  }
-})
+    setData: (state, payload: string) => {
+      state.data = payload;
+    },
+  },
+});
 ```
 
 当为 Model 的 State 声明类型信息后，Model 的 `computed`、`actions` 都能获取正确的类型信息。事实上，上面的示例代码中，即使我们不定义 State 类型信息，也会根据 `state` 的初始值信息自动推导出 State 的类型信息。不过，仍然建议你在定义 Model 时，声明 State 的类型信息，因为根据 `state` 的初始值信息推导出的 State 类型信息可能不完整(缺少字段或字段的类型信息缺少)，而且当使用[函数类型](/docs/apis/app/runtime/model/model_#函数类型)定义 Model 时，State 的类型信息也是无法根据 `state` 的初始值信息自动推导的。
@@ -35,21 +35,20 @@ export const foo = model<State>('foo').define({
 
 当 Model 的衍生状态依赖其他 Model 时，需要手动指定其他 Model 的 State。
 
-
 ```ts title="示例"
 interface State {
-  data: string
+  data: string;
 }
 
 export const bar = model<State>('bar').define({
   state: {
-    data: ''
+    data: '',
   },
   computed: {
     // 为 fooState 指定类型
-    withFoo: [foo, (state, fooState: FooState) => state.data + fooState.data]
+    withFoo: [foo, (state, fooState: FooState) => state.data + fooState.data],
   },
-})
+});
 ```
 
 ## 获取 Model 类型信息的 Hooks
@@ -62,7 +61,7 @@ Reduck 提供了一组用于获取 Model 类型信息的工具类型：
 ```ts title="示例"
 export const foo = model<State2>('foo').define({
   // 省略
-})
+});
 
 // 获取 foo 的 State 类型
 let fooActions: GetModelActions<typeof foo>;

package/zh/guides/topic-detail/model/use-model.md

@@ -4,6 +4,7 @@ title: 使用 Model
 ---
 
 ## 在组件内使用
+
 ### 作为全局状态使用
 
 通过 `useModel` 可以获取 Model 的 State、Actions 等。当 Model 的 State 通过 Actions 进行修改后，任何其他使用了该 Model 的组件，都会自动重新渲染。
@@ -60,7 +61,6 @@ actions = {
 
 `useModel` 还支持对 State 和 Actions 做 selector 操作，实现对 State 和 Actions 的筛选或重命名，例如：
 
-
 ```ts
 const fooModel = model('foo').define({
   state: {
@@ -172,7 +172,7 @@ function ThreeComponent() {
 
 例如，我们修改计数器应用的代码，添加一个有局部状态的计数器组件 `LocalCounter`：
 
-``` ts
+```ts
 import { useLocalModel } from '@modern-js/runtime/model';
 
 function LocalCounter() {
@@ -193,8 +193,6 @@ function LocalCounter() {
 
 完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/local-model)查看。
 
-
-
 ## 在组件外使用
 
 在实际业务场景中，有时候我们需要在 React 组件外使用 Model，例如在工具函数中访问 State、执行 Actions 等。这个时候，我们就需要使用 Store。 Store 是一个底层概念，一般情况下用户接触不到，它负责存储和管理整个应用的状态。Reduck 的 Store 基于 [Redux 的 Store](https://redux.js.org/api/store) 实现，增加了 Reduck 特有的 API，如 `use` 。
@@ -202,17 +200,21 @@ function LocalCounter() {
 首先，在组件内调用 `useStore` 获取当前应用使用的 `store` 对象，并挂载到组件外的变量上：
 
 ```ts
-let store;  // 组件外部 `store` 对象的引用
-function setStore(s) { store = s };
-function getStore() { return store };
+let store; // 组件外部 `store` 对象的引用
+function setStore(s) {
+  store = s;
+}
+function getStore() {
+  return store;
+}
 
 function Counter() {
   const [state] = useModel(countModel);
   const store = useStore();
   // 通过 useMemo 避免不必要的重复设置
-  useMemo(()=> {
-    setStore(store)
-  }, [store])
+  useMemo(() => {
+    setStore(store);
+  }, [store]);
 
   return (
     <div>
@@ -226,11 +228,11 @@ function Counter() {
 执行自增操作：
 
 ```ts
- setInterval(() => {
+setInterval(() => {
   const store = getStore();
   const [, actions] = store.use(countModel);
   actions.add();
-}, 1000)
+}, 1000);
 ```
 
 完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model-outof-react)查看。

package/zh/guides/topic-detail/model/use-out-of-modernjs.md

@@ -9,17 +9,16 @@ title: 单独使用 Reduck
 
 在项目中安装 Reduck 包：`@modern-js-reduck/react`。
 
-
 2. API 导入包名
 
 在 Modern.js 中使用时，Reduck 导出 API 的包名为：`@modern-js/runtime/model`。单独使用 Reduck 时，导出包名为：`@modern-js-reduck/react`。
 
-
 3. 包裹 `Provider` 组件
 
 Modern.js 自动在应用的入口组件上，包裹了用于注入 Reduck 全局 Store 的 [`Provider`](/docs/apis/app/runtime/model/Provider) 组件。单独使用 Reduck 时，需要手动完成。
 
 示例：
+
 ```tsx
 // 根组件
 const Root = () => {
@@ -28,17 +27,16 @@ const Root = () => {
       {/* 应用入口组件 */}
       <App />
     </Provider>
-  )
-}
+  );
+};
 ```
 
-
 4. 功能配置
 
 在 Modern.js 中使用时，可以通过 [`runtime.state`](/docs/configure/app/runtime/state) 对 Reduck 功能进行配置。单独使用时，需要通过 [`Provider`](/docs/apis/app/runtime/model/Provider) 的 `config` 或 `store` 参数配置。
 
-
 示例：
+
 ```tsx
 const Root = () => {
   return (

package/zh/guides/topic-detail/monorepo/intro.md

@@ -12,4 +12,3 @@ Modern.js 提供了对于 Monorepo 工程方案的支持，其主要通过 `@mod
 - Monorepo 下子项目之间的联调开发
 - 发布 Monorepo 的子项目
 - 部署 Monorepo 子项目
-