@modern-js/main-doc 0.0.0-next-20221227085542 → 0.0.0-next-20221228051706

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +3 -28
  3. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/router/router.md +176 -373
  4. package/en/docusaurus-plugin-content-docs/current/components/enable-bff.md +36 -0
  5. package/en/docusaurus-plugin-content-docs/current/components/router-legacy-tip.md +1 -0
  6. package/en/docusaurus-plugin-content-docs/current/configure/app/runtime/router.md +17 -2
  7. package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/bff/frameworks.md +2 -0
  8. package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/bff/function.md +10 -6
  9. package/en/docusaurus-plugin-content-docs/current/guides/basic-features/data-fetch.md +1 -0
  10. package/en/docusaurus-plugin-content-docs/current/guides/basic-features/routes.md +0 -2
  11. package/package.json +3 -3
  12. package/zh/apis/app/runtime/router/router.md +170 -368
  13. package/zh/components/enable-bff.md +36 -0
  14. package/zh/components/micro-master-manifest-config.md +15 -0
  15. package/zh/components/router-legacy-tip.md +1 -0
  16. package/zh/configure/app/runtime/master-app.md +2 -16
  17. package/zh/configure/app/runtime/router.md +17 -3
  18. package/zh/guides/advanced-features/bff/frameworks.md +2 -0
  19. package/zh/guides/advanced-features/bff/function.md +7 -5
  20. package/zh/guides/basic-features/data-fetch.md +1 -0
  21. package/zh/guides/basic-features/routes.md +0 -3
  22. package/en/docusaurus-plugin-content-docs/current/configure/app/dev/with-master-app.md +0 -31
  23. package/zh/configure/app/dev/with-master-app.md +0 -32
@@ -13,24 +13,10 @@ sidebar_label: masterApp
13
13
  ## 示例
14
14
 
15
15
  import EnableMicroFrontend from '@site-docs/components/enable-micro-frontend.md';
16
+ import MasterManifestAppConfig from '@site-docs/components/micro-master-manifest-config.md';
16
17
 
17
18
  <EnableMicroFrontend />
18
-
19
- ## `manifest`
20
-
21
- ```ts
22
- interface Manifest {
23
- getAppList?: ()=> Array<AppInfo>
24
- }
25
- ```
26
-
27
- #### `getAppList?`
28
-
29
- 通过 `getAppList` 配置,可以自定义如何获取远程列表数据
30
-
31
- ```ts
32
- type GetAppList = ()=> Promise<Array<AppInfo>>;
33
- ```
19
+ <MasterManifestAppConfig />
34
20
 
35
21
 
36
22
  ### apps
@@ -2,19 +2,33 @@
2
2
  sidebar_label: router
3
3
  ---
4
4
 
5
+ import RouterLegacyTip from '@site-docs/components/router-legacy-tip.md'
6
+
7
+ <RouterLegacyTip />
8
+
5
9
  # runtime.router
6
10
 
7
11
  * 类型: `boolean | Object`
8
12
  * 默认值: `false`。
9
13
 
10
- 开启 `router` 之后,支持使用 Modern.js 默认提供的约定式路由进行路由管理。
14
+ 开启 `router` 之后,支持使用 Modern.js 默认提供的约定式路由进行路由管理。Modern.js 的路由模块基于 [React Router 6](https://reactrouter.com/) 实现。
11
15
 
12
16
  具体配置如下:
13
17
 
18
+ ### basename
19
+
20
+ * 类型: `string`
21
+ * 默认值: ``
22
+
23
+ 设置客户端路由的 `basename`,通常用于应用需要部署在域名非根路径下的场景。
24
+
14
25
  ### supportHtml5History
15
26
 
16
- * 类型: `Boolean`
27
+ * 类型: `boolean`
17
28
  * 默认值: `true`
18
29
 
19
- 值为 `true` 则使用 `BrowserRouter` 否则使用 `HashRouter`。
30
+ 值为 `true`,使用 `BrowserRouter`;否则使用 `HashRouter`。推荐使用 `BrowserRouter`。
20
31
 
32
+ :::warning
33
+ 当开启 SSR 时,不支持设置 `supportHtml5History`。
34
+ :::
@@ -3,6 +3,8 @@ sidebar_position: 3
3
3
  title: 运行时框架
4
4
  ---
5
5
 
6
+ Modern.js 的 BFF 支持不同的运行时框架,当前 Modern.js 的 BFF 支持两种运行时框架 [Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/)。
7
+
6
8
  ## 函数写法
7
9
 
8
10
  在函数写法下,各类运行时框架仅中间件写法存在差异,其他实现基本相同。这里以 Express 为例,介绍如何在 `api/_app.ts` 中,手写一个中间件,添加权限校验:
@@ -1,13 +1,15 @@
1
1
  ---
2
2
  sidebar_position: 1
3
- title: 一体化调用
3
+ title: 基础用法
4
4
  ---
5
5
 
6
- Modern.js 允许在 React 组件中直接调用 `api/` 目录下满足一定条件的函数,称为**一体化调用**。
6
+ 通过 Modern.js 开发的应用,可以在 `api/` 目录下定义接口函数,前端可以调用这些接口函数,即可发起请求,无需写前后端胶水层代码,同时保证前后端类型安全。
7
7
 
8
- :::note
9
- 使用一体化调用需要先开启 BFF 功能。
10
- :::
8
+ ## 启用 BFF
9
+
10
+ import EnableBFF from '@site-docs/components/enable-bff.md'
11
+
12
+ <EnableBFF/>
11
13
 
12
14
  ## BFF 函数
13
15
 
@@ -239,6 +239,7 @@ export default function UserLayout() {
239
239
  .
240
240
  └── routes
241
241
  ├── layout.tsx
242
+ ├── loading.tsx
242
243
  └── user
243
244
  ├── layout.tsx
244
245
  └── page.ts
@@ -306,9 +306,6 @@ export default () => {
306
306
 
307
307
  :::note
308
308
  在自控式路由下,开发者如果希望在 SSR 中使用 React Router 6 中 [Loader API](https://reactrouter.com/en/main/hooks/use-loader-data#useloaderdata) 的能力会相对复杂,推荐直接使用约定式路由。Modern.js 已经为你封装好了一切。
309
-
310
- <!-- Todo 嵌套路由带来的优化可以补充下文档-->
311
- 如果项目只想升级到 React Router 6,而不希望使用嵌套路由带来的优化,那 [useLoader](/docs/apis/app/runtime/core/use-loader) 在 SSR 下仍然可以工作。
312
309
  :::
313
310
 
314
311
  ## 其他路由方案
@@ -1,31 +0,0 @@
1
- ---
2
- sidebar_label: withMasterApp
3
- ---
4
-
5
- # dev.withMasterApp
6
-
7
- * Type: `Object`
8
- * Default: `null`
9
-
10
- When the project is a micro-front-end sub-application, you can use the `withMasterApp` configuration to enable the sub-application debugging mode.
11
-
12
- :::caution Caution
13
- When using child app debugging mode, you should first ensure that the main app has online debugging mode turned on.
14
- :::
15
-
16
- ```js title=modern.config.js
17
- export default defineConfig({
18
- dev: {
19
- withMasterApp: {
20
- //the path of the main application
21
- moduleApp: 'https://www.masterApp.com',
22
- //name of the subapplication
23
- moduleName: 'Contact'
24
- }
25
- }
26
- })
27
- ```
28
-
29
- - moduleApp: `string` Online address of the main application.
30
- - moduleName: `Contact` The name of the child app (needs to match the module name registered in the main app)。
31
-
@@ -1,32 +0,0 @@
1
- ---
2
- sidebar_label: withMasterApp
3
- ---
4
-
5
- # dev.withMasterApp
6
-
7
-
8
-
9
- * 类型: `Object`
10
- * 默认值: `null`
11
-
12
- 当项目为微前端子应用的时候,可以使用 `withMasterApp` 配置启用子应用调试模式。
13
-
14
- :::caution 注意
15
- 使用子应用调试的模式时,应该先确保主应用开启了线上 debug 模式。
16
- :::
17
-
18
- ```js title=modern.config.js
19
- export default defineConfig({
20
- dev: {
21
- withMasterApp: {
22
- // 主应用的路径
23
- moduleApp: 'https://www.masterApp.com',
24
- // 子应用的名称
25
- moduleName: 'Contact'
26
- }
27
- }
28
- })
29
- ```
30
-
31
- - moduleApp: `string` 主应用的线上地址。
32
- - moduleName: `Contact` 子应用的名称(需要和在主应用中注册的模块名匹配)。