@modern-js/main-doc 0.0.0-next-20221123182933 → 0.0.0-next-20221124071519

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 (70) hide show
  1. package/CHANGELOG.md +3 -2
  2. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/_category_.json +1 -1
  3. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/build.md +10 -10
  4. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/dev.md +7 -7
  5. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/index.md +2 -2
  6. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/inspect.md +15 -15
  7. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/lint.md +2 -2
  8. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/new.md +15 -15
  9. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/start.md +5 -5
  10. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/test.md +5 -5
  11. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/upgrade.md +7 -9
  12. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/_category_.json +1 -1
  13. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/api/framework/lambda.md +22 -47
  14. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/api/functions/api.md +46 -18
  15. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/api/functions/app.md +2 -2
  16. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/api/functions/common.md +4 -4
  17. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/api/test.md +2 -4
  18. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/config/html.md +2 -4
  19. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/config/icon.md +3 -5
  20. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/config/mock.md +1 -7
  21. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/config/public.md +11 -13
  22. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/config/storybook.md +3 -5
  23. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/config/upload.md +14 -20
  24. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/index.md +2 -7
  25. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/modern-config.md +2 -4
  26. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/server/index_.md +5 -3
  27. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/server/test.md +2 -4
  28. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/shared.md +1 -3
  29. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/app.md +7 -3
  30. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/index_.md +7 -8
  31. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/pages.md +40 -43
  32. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/stories.md +3 -5
  33. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/test.md +3 -3
  34. package/en/docusaurus-plugin-content-docs/current/apis/app/overview.md +3 -2
  35. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/app/define-config.md +2 -2
  36. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/default-alias.md +0 -1
  37. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/env.md +1 -1
  38. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/model_.md +2 -2
  39. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/testing/act.md +1 -1
  40. package/en/docusaurus-plugin-content-docs/current.json +10 -10
  41. package/package.json +3 -3
  42. package/zh/apis/app/commands/build.md +1 -1
  43. package/zh/apis/app/commands/index.md +1 -1
  44. package/zh/apis/app/commands/lint.md +1 -1
  45. package/zh/apis/app/commands/upgrade.md +0 -2
  46. package/zh/apis/app/hooks/api/framework/_category_.json +1 -1
  47. package/zh/apis/app/hooks/api/framework/lambda.md +7 -32
  48. package/zh/apis/app/hooks/api/functions/_category_.json +1 -1
  49. package/zh/apis/app/hooks/api/functions/api.md +28 -1
  50. package/zh/apis/app/hooks/api/functions/common.md +2 -4
  51. package/zh/apis/app/hooks/api/test.md +1 -3
  52. package/zh/apis/app/hooks/config/html.md +0 -2
  53. package/zh/apis/app/hooks/config/icon.md +1 -1
  54. package/zh/apis/app/hooks/config/mock.md +1 -7
  55. package/zh/apis/app/hooks/config/public.md +1 -3
  56. package/zh/apis/app/hooks/config/storybook.md +1 -3
  57. package/zh/apis/app/hooks/config/upload.md +0 -6
  58. package/zh/apis/app/hooks/modern-config.md +1 -3
  59. package/zh/apis/app/hooks/server/index_.md +4 -4
  60. package/zh/apis/app/hooks/server/test.md +1 -1
  61. package/zh/apis/app/hooks/shared.md +1 -2
  62. package/zh/apis/app/hooks/src/app.md +7 -3
  63. package/zh/apis/app/hooks/src/index_.md +1 -1
  64. package/zh/apis/app/hooks/src/pages.md +2 -3
  65. package/zh/apis/app/hooks/src/stories.md +1 -1
  66. package/zh/apis/app/overview.md +1 -1
  67. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/api/framework/app.md +0 -100
  68. package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/eslint.md +0 -9
  69. package/zh/apis/app/hooks/api/framework/app.md +0 -100
  70. package/zh/apis/app/hooks/src/eslint.md +0 -9
@@ -3,28 +3,26 @@ title: public/
3
3
  sidebar_position: 3
4
4
  ---
5
5
 
6
- 应用工程方案静态资源文件。
6
+ Static resource files in any format can be placed in the `public/`, and the files will be Served under the web application domain name.
7
7
 
8
- `public/` 目录中可以放置任意格式的静态资源文件,文件会被 Serve 在 Web 应用域名下。
8
+ ## Description
9
9
 
10
- ## 说明
10
+ The routing of files to be served is based on the convention of the file system. `public/` is the root directory, which corresponds to the root path of the Web application.
11
11
 
12
- Serve 的文件路由基于目录结构的约定,其中,`public/` 为根目录,对应 Web 应用根域名。
12
+ For example, the `config/public/sdk/index.js` file will be Served under `${domain}/sdk/index.js` after deployment.
13
13
 
14
- 例如 `config/public/sdk/index.js` 文件,在部署后将会被 Serve 在 `${domain}/sdk/index.js` 下。
14
+ ## Scene
15
15
 
16
- ## 场景
16
+ For example, `robots.txt`, `auth.xml` and other authentication file.
17
17
 
18
- 例如 `robots.txt`,`auth.xml` 等第三方系统需要的认证文件。
19
-
20
- 或者是给其他业务方(要求路由不变)的 SDK,也可以是无需入口的 HTML 文件等。
18
+ SDK (requiring the same routing) for other business, or an HTML file for static host.
21
19
 
22
20
  :::info
23
- 对于需要在源码中通过 import 引用的静态资源(比如 SVG 图片),建议放到 `src/assets` 目录下进行管理。
21
+ For static resources (such as SVG pictures) that need to be referenced by import in the source code, it is recommended to put them in the `src/assets/` for management.
24
22
  :::
25
23
 
26
- ## 代码压缩
24
+ ## Compression
27
25
 
28
- 如果目录下的文件是一个 `.js` 文件,在生产环境构建时,会自动对其进行代码压缩。
26
+ If the file is a `.js` file, it will be automatically compressed when the production environment is built.
29
27
 
30
- 如果该文件以 `.min.js` 结尾,则不会经过代码压缩处理。
28
+ If the file ends with `.min.js`, it will not compression.
@@ -3,12 +3,10 @@ title: storybook/
3
3
  sidebar_position: 7
4
4
  ---
5
5
 
6
- 应用工程方案 Storybook 配置文件。
6
+ Modern.js.js supports debugging with Storybook. When you need to configure Storybook, configure it in the `config/storybook/`.
7
7
 
8
- 应用工程方案支持使用 Storybook 进行调试,当需要对 Storybook 进行配置时,需要在项目 config/storybook 目录进行配置。
9
-
10
- Storybook 配置请查看:[Storybook 配置](https://storybook.js.org/docs/react/configure/overview)
8
+ For detail, see [Storybook](https://storybook.js.org/docs/react/configure/overview).
11
9
 
12
10
  :::info
13
- 使用 Storybook 进行调试需要提前在项目下执行 new 命令启用「Visual Testing (Storybook)」模式功能。
11
+ Debugging with Storybook requires executing the `new` command to enable the 「Visual Testing (Storybook)」 mode feature.
14
12
  :::
@@ -3,46 +3,40 @@ title: upload/
3
3
  sidebar_position: 4
4
4
  ---
5
5
 
6
- 应用工程方案静态资源文件。
6
+ Static resource files in any format can be placed in the `upload/`.
7
7
 
8
- `upload/` 目录中可以放置任意格式的静态资源文件。
8
+ ## Description
9
9
 
10
- ## 说明
10
+ In the development environment, the static resource files in this directory will be hosted in the '/upload' path. After building the application product, the files in this directory will be copied to the dist path.
11
11
 
12
- 在开发环境下,该目录下的静态资源文件会被托管在 `/upload` 路径下。构建应用产物后,该目录下的文件会被复制到产物目录中。
12
+ This file convention is mainly used for developers to use plugins to upload static resource files to the CDN.
13
13
 
14
- 该文件约定主要用于开发者使用插件,主动上传静态资源文件到 CDN。
14
+ ## Scene
15
15
 
16
- ## 场景
16
+ For example, the SDK used by the project such as `google-analysis.js` (usually requires http caching).
17
17
 
18
- 例如 `google-analysis.js` 等项目自用的 SDK(通常需要 http 缓存)。
18
+ Images, font files, generic CSS, etc.
19
19
 
20
- 图片、字体文件、通用 CSS 等。
20
+ ## Compression
21
21
 
22
- 如果并非必要,Modern.js 推荐将 JS / CSS 这类文件通过 `upload/` 上传到 CDN,而不使用 `public/`。
22
+ If the file is a `.js` file, it will be automatically compressed when the production environment is built.
23
23
 
24
- ## 代码压缩
24
+ If the file ends with `.min.js`, it will not compression.
25
25
 
26
- 如果目录下的文件是一个 `.js` 文件,在生产环境构建时,会自动对其进行代码压缩。
26
+ ## More Usage
27
27
 
28
- 如果该文件以 `.min.js` 结尾,则不会经过代码压缩处理。
29
-
30
- ## 更多用法
31
-
32
- 不论是在[自定义 HTML](/docs/guides/basic-features/html) 中,或是在 [`config/public/`](/docs/apis/app/hooks/config/public) 下的任意 HTML 文件中,都可以直接使用 HTML 标签引用 `config/upload/` 目录下的资源:
28
+ Whether in [custom HTML](/docs/guides/basic-features/html), or in any HTML file under ['config/public/'](/docs/apis/app/hooks/config/public), you can directly use the HTML tag to refer to the resources in the `config/upload/`:
33
29
 
34
30
  ```html
35
31
  <script src="/upload/index.js"></script>
36
32
  ```
37
33
 
38
- 如果设置了 [`output.assetPrefix`](/docs/configure/app/output/asset-prefix) 前缀,也可以直接使用模板语法添加该前缀:
34
+ if [`output.assetPrefix`](/docs/configure/app/output/asset-prefix) is configured,add this prefix directly using template syntax:
39
35
 
40
36
  ```html
41
37
  <script src="<%=assetPrefix %>/upload/index.js"></script>
42
38
  ```
43
39
 
44
40
  :::info
45
- Modern.js 没有支持在 `config/public/*.css`(例如 background-image)中通过 URL 使用 `config/upload/` 下的文件。
46
-
47
- 因为 Modern.js 不推荐在 `public/` 中放 JS、CSS 这类资源文件,可以将它们直接放置在 `upload/` 目录下。
41
+ Modern.js does not support the use files under `upload/` in `config/public/*.css` via URL.
48
42
  :::
@@ -2,11 +2,6 @@
2
2
  type: ref
3
3
  ---
4
4
 
5
- # 文件约定
6
-
7
- 本节涵盖了使用应用工程的所有文件约定。
8
-
9
-
10
-
11
-
5
+ # Convention
12
6
 
7
+ This section covers all documentation conventions.
@@ -3,8 +3,6 @@ title: modern.config.js
3
3
  sidebar_position: 8
4
4
  ---
5
5
 
6
- 应用工程方案的 Modern.js 配置文件。
6
+ Modern.js config file, through which you can confiured all aspects of the current project.
7
7
 
8
- 通过该文件可以对当前项目的各个方面进行个性化配置。
9
-
10
- 了解配置的具体用法,请参考 [配置使用](/docs/configure/app/usage)。
8
+ For detail, see [configure](/docs/configure/app/usage).
@@ -3,10 +3,12 @@ title: index.[tj]s
3
3
  sidebar_position: 1
4
4
  ---
5
5
 
6
- 扩展 Modern.js Server 的文件,在此文件中可以给应用工程启动的 Web Server 添加前置中间件。
6
+ A file that extends the Modern.js Web Server, to add a Hook or Middleware to the Web Server that the project uses.
7
7
 
8
- 可以对请求和响应进行拦截处理,鉴权与角色、请求预处理、异常兜底等;也可在 Server 的运行流程中(包括路由匹配、资源寻址、头部注入、页面渲染,静态 Web 托管)插入特定的业务逻辑。
8
+ It can intercept requests and responses, authenticate and role, request preprocessing, exception bottom-up, etc.;
9
+
10
+ It can also be inserted logic into the built-in processing handler (including route matching, resource addressing, header injection, page rendering, static web hosting).
9
11
 
10
12
  :::info
11
- 具体使用示例可查看 [Hook](/docs/apis/app/runtime/web-server/hook)。
13
+ For detail, see [Hook](/docs/apis/app/runtime/web-server/hook) & [Middleware](/docs/apis/app/runtime/web-server/middleware)
12
14
  :::
@@ -3,10 +3,8 @@ title: test.[tj]s
3
3
  sidebar_position: 2
4
4
  ---
5
5
 
6
- 扩展 Web Server 测试目录。
7
-
8
- 应用项目支持对扩展 Web Server 逻辑进行测试,可直接在项目 server 目录下创建后缀为 `.test.[tj]s` 文件进行编写测试用例。
6
+ App's Web Server test file,support for writing test cases in the `server/` directory which file with suffix `.test.[tj]s`.
9
7
 
10
8
  :::info
11
- 使用单元测试、集成测试需要提前在项目下执行 new 命令启用「单元测试 / 集成测试」功能。
9
+ To use unit test and integration test, you need to execute the `new` command in advance to enable the `unit test/integration test`.
12
10
  :::
@@ -3,6 +3,4 @@ title: shared/
3
3
  sidebar_position: 5
4
4
  ---
5
5
 
6
- 应用工程方案共享源码目录。
7
-
8
- 在项目中同时用到了 BFF 和扩展 Web Server 功能,并且它们之间存在一些公共服务端代码时,可将这些公共代码放到 shared 目录下。
6
+ Shared directory. When the project has common code under `api/`, `server/`, `src/`, put the code under this directory rather then import directly.
@@ -3,13 +3,14 @@ title: App.[tj]sx
3
3
  sidebar_position: 1
4
4
  ---
5
5
 
6
- 应用项目无路由或者任意路由的入口标识。
6
+ Entry identifier if App want control route by code.
7
7
 
8
- 开发单页面应用的场景,推荐 `src` 文件夹下放置 `App.[tj]sx` 导出应用根组件即可,Modern.js 会自动生成真正的构建打包的入口文件, 内容大致如下:
8
+ `App.[tj]sx` is not the actual App entry, Modern.js will auto generate the entry file, the content is roughly as follows:
9
9
 
10
10
  ```js
11
11
  import React from 'react';
12
12
  import { createApp, bootstrap } from '@modern-js/runtime';
13
+ // App.[jt]sx
13
14
  import App from '@_modern_js_src/App';
14
15
  import { state } from '@modern-js/runtime/plugins';
15
16
  import { immer, effects, autoActions, devtools } from '@modern-js/runtime/model';
@@ -38,4 +39,7 @@ AppWrapper = render();
38
39
  export default AppWrapper;;
39
40
  ```
40
41
 
41
- 开发多页面应用的场景类似,在入口目录下推荐直接放置 `App.[jt]sx`, 自动生成的构建打包入口文件和单页面应用类似。
42
+ :::note
43
+ In multi-entry App,each entry can have a `App.[jt]sx`, for detail, see [Entry](/docs/guides/concept/entries).
44
+ :::
45
+
@@ -3,13 +3,14 @@ title: index.[tj]s
3
3
  sidebar_position: 3
4
4
  ---
5
5
 
6
- 应用项目自定义路由入口标识。
6
+ Entry identifier if App want use custom entry. In most case, [`App.[tj]sx`](/docs/apis/app/hooks/src/app) hook file can already meet our needs.
7
7
 
8
- 通常情况下 [`src/App.[tj]sx, src/[entry]/App.[tj]sx`](/docs/apis/app/hooks/src/app) 钩子文件已经能满足我们的需求,当我们需要在 `bootstrap` 之前添加自定义行为或者完全接管 webpack 打包入口时,可以在 `src` 或者入口目录下放置 `index.[tj]s`。 下面有分两种情况进行讨论:
8
+ When we need to add custom behavior before `bootstrap` or completely take over the webpack entry, we can place `index.[tj]s` in `src/` or entry directory. The following are discussed in two cases:
9
9
 
10
- 1. bootstrap 之前添加自定义行为:
11
10
 
12
- 只需要 `src/index.[tj]s` 默认导出函数:
11
+ 1. add custom behavior before bootstrap
12
+
13
+ Just add default export under `src/index.[tj]s`:
13
14
 
14
15
  ```js title=src/index.js
15
16
  import { bootstrap } from '@modern-js/runtime';
@@ -20,11 +21,9 @@ export default App => {
20
21
  };
21
22
  ```
22
23
 
24
+ 2. Fully take over the webpack entry
23
25
 
24
- 2. 完全接管 webpack 入口:
25
-
26
- 当 `src/index.[tj]sx?` 下没有默认导出函数时,该文件即为真正的 webpack 打包入口文件, 可以直接像使用 create-react-app 等脚手架一样组织代码:
27
-
26
+ When there is no default export function under `src/index.[tj]sx?`, this file is the real webpack entry file, and the code can be organized such as create-react-app:
28
27
 
29
28
  ```js title=src/index.jsx
30
29
  import React from 'react';
@@ -3,12 +3,11 @@ title: pages/
3
3
  sidebar_position: 2
4
4
  ---
5
5
 
6
- 应用项目基于文件系统路由的入口标识。
6
+ Entry identifier if the application want uses file system-based routing.
7
7
 
8
- 当项目结构为 `Pages 入口` 类型时, 会分析 `src/pages` 目录下的文件得到客户端路由配置。
8
+ When the entry is the **Pages entry** type, the files in the `pages/` directory will be analyzed to client side routing.
9
9
 
10
-
11
- 举例说明,例如以下目录结构:
10
+ For example, the following directory:
12
11
 
13
12
  ```bash
14
13
  .
@@ -20,7 +19,7 @@ sidebar_position: 2
20
19
  └── info.jsx
21
20
  ```
22
21
 
23
- 对应生成的路由配置为:
22
+ The generated route is configured as:
24
23
 
25
24
  ```bash
26
25
  [
@@ -30,23 +29,21 @@ sidebar_position: 2
30
29
  ]
31
30
  ```
32
31
 
33
- pages 目录下的文件满足以下条件的不会被当做路由文件
34
-
35
- - 后缀不是 `.(j|t)sx?` 的文件。
36
- - `.d.ts` 类型定义文件。
37
- - 以 `.(test|spec|e2e).(j|t)sx?` 结尾的测试文件。
38
-
39
- :::tip 提示
32
+ Files match the following conditions will not be treated as routing files:
40
33
 
41
- 推荐 pages 目录下只写入口代码,把业务逻辑写到 pages 外面独立的 features 目录里。这样 pages 目录下大部分文件都会是路由文件,也就不需要额外的过滤规则。
34
+ - suffix is not `.(j|t)sx?`.
35
+ - `.d.ts` type definition file.
36
+ - test file suffix like `.(test|spec|e2e).(j|t)sx?`.
42
37
 
38
+ :::tip
39
+ it is recommended to write only the routing files in the `pages/`, and write the business logic to the independent features directory outside the `pages/`. In this way, most of the files in the pages directory will be routing files, and there is no need for additional filtering rules.
43
40
  :::
44
41
 
45
- ### 动态路由
42
+ ### Dynamic Routing
46
43
 
47
- 使用 `[ ]` 包裹的目录或文件会被视为动态路由
44
+ Directories or files wrapped with `[]` are considered dynamic routing.
48
45
 
49
- 例如以下目录结构:
46
+ For example the following directory structure:
50
47
 
51
48
  ```bash
52
49
  .
@@ -61,7 +58,7 @@ pages 目录下的文件满足以下条件的不会被当做路由文件
61
58
  └── info.jsx
62
59
  ```
63
60
 
64
- 对应生成的路由配置为:
61
+ The generated route is configured as:
65
62
 
66
63
  ```js
67
64
  [
@@ -73,13 +70,13 @@ pages 目录下的文件满足以下条件的不会被当做路由文件
73
70
  ]
74
71
  ```
75
72
 
76
- 动态路由的基础上,支持添加特殊的路由后缀 `(*、?、+)`。
73
+ Basis dynamic routing, it supports adding special routing suffixes `(*、?、+)`.
77
74
 
78
- 例如:`src/pages/users/[id]*.tsx` 最终路由为 `/users/:id*`
75
+ For example: `src/pages/users/[id]*.tsx` generate route `/users/:id*`
79
76
 
80
- ### 全局 layout
77
+ ### Global Layout
81
78
 
82
- 整个应用需要全局的 `layout` 时, 可以通过 `pages/_app.tsx` 实现,具体写法如下:
79
+ When the entire App needs a global `layout`, it can be achieved through `pages/_app.tsx`, which as follows:
83
80
 
84
81
  ```js
85
82
  import React from 'react';
@@ -94,9 +91,9 @@ export default const App = ({Component, ...pageProps}:{ Component: React.Compone
94
91
  }
95
92
  ```
96
93
 
97
- 上述 `App` 为访问具体路由匹配到的组件。
94
+ The above `Component` is the component to which the route is accessed.
98
95
 
99
- 例如以下目录结构:
96
+ For example the following directory structure:
100
97
 
101
98
  ```bash
102
99
  .
@@ -108,26 +105,26 @@ export default const App = ({Component, ...pageProps}:{ Component: React.Compone
108
105
  └── index.js
109
106
  ```
110
107
 
111
- - 访问 `/` 时,对应的 `Component` 组件为 `pages/index.js`。
112
- - 访问 `/a` 时,对应的 `Component` 组件为 `pages/a/index.js`。
113
- - 访问 `/a/b` 时,对应的 `Component` 组件为 `pages/a/b/index.js`。
108
+ - access `/`, the `Component` is `pages/index.js`。
109
+ - access `/a`, the `Component` is `pages/a/index.js`。
110
+ - access `/a/b`, the `Component` is `pages/a/b/index.js`。
114
111
 
115
- :::tip 全局 layout 有以下优点
112
+ :::tip Advantages
116
113
 
117
- - 页面变化时,保留全局布局的状态
118
- - 添加全局样式
119
- - ComponentDidCatch 错误处理
120
- - 使用 `defineConfig`(/docs/apis/app/runtime/app/define-config) 动态配置运行时配置。
114
+ - preserve the state of the global layout when the page changes.
115
+ - add global css.
116
+ - handle ComponentDidCatch error
117
+ - use `defineConfig`(/docs/apis/app/runtime/app/define-config) dynamic configuration runtime.
121
118
 
122
119
  :::
123
120
 
124
- ### 部分 layout
121
+ ### Partial Layout
125
122
 
126
- 开发应用时,存在同一路由下的子路由共用 layout 的场景。
123
+ When developing an App, where sub routes under the same route may share the layout.
127
124
 
128
- 针对这一场景,Modern.js 约定,当目录下存在 `_layout.js` ,就会有类似全局 layout 的效果。
125
+ For this scene, Modern.js convention, when there is a `_layout.js` in the directory, the routes can shared this layout.
129
126
 
130
- 例如以下目录结构:
127
+ For example the following directory structure:
131
128
 
132
129
  ```bash
133
130
  └── pages
@@ -148,18 +145,18 @@ const ALayout = ({ Component, ...pageProps }) => {
148
145
  export default ALayout;
149
146
  ```
150
147
 
151
- Component 参数为访问具体路由对应的组件,例如
148
+ The Component props is the specific route, for example
152
149
 
153
- - 访问 `/a` 时,对应的 `Component` 组件为 `pages/a/index.js`。
154
- - 访问 `/a/b` 时,对应的 `Component` 组件为 `pages/a/b/index.js`。
150
+ - access `/a`, the `Component` is `pages/a/index.js`。
151
+ - 访问 `/a/b`, the `Component` is `pages/a/b/index.js`。
155
152
 
156
- 这样就可以用 `pages/a/_layout.js` 满足 `a` 目录下路由共用 layout 的需求。
153
+ In this way, you can use `pages/a/_layout.js` to display the routing common layout in the `a` directory.
157
154
 
158
155
  ### 404 路由
159
156
 
160
- 约定 `pages/404.[tj]sx` 为默认的 404 路由。
157
+ The convention `pages/404.[tj]sx` is the default 404 route.
161
158
 
162
- 例如以下目录结构:
159
+ For example the following directory structure:
163
160
 
164
161
  ```bash
165
162
  .
@@ -170,7 +167,7 @@ Component 参数为访问具体路由对应的组件,例如
170
167
  ├── 404.js
171
168
  ```
172
169
 
173
- 生成路由配置如下:
170
+ the generated route is configured is as:
174
171
 
175
172
  ```bash
176
173
  [
@@ -180,4 +177,4 @@ Component 参数为访问具体路由对应的组件,例如
180
177
  ]
181
178
  ```
182
179
 
183
- 所有未匹配的路由,都将匹配到 `pages/404.[tj]s`。
180
+ All unmatched routes will match to `pages/404.[tj]s`。
@@ -3,12 +3,10 @@ title: "**/*.stories.[tj]sx"
3
3
  sidebar_position: 7
4
4
  ---
5
5
 
6
- 应用项目 Storybook 调试文件。
6
+ App Storybook debug file. files in `src/` which suffix `*.stories.[tj]sx` are as debug files for Storybook.
7
7
 
8
- 可以在项目源码目录(src)下创建 `*.stories.[tj]sx` 格式的文件作为 Storybook 的调试文件。
9
-
10
- 在项目下执行 dev story 命令,支持使用这些文件在 Storybook 中对相关内容进行调试。
8
+ Execute the `dev story` command to debugging these files in the Storybook.
11
9
 
12
10
  :::info
13
- 使用 Storybook 需要提前在项目下执行 new 命令启用「Visual Testing (Storybook)」模式。
11
+ Using a Storybook requires executing `new` command to enable the 「Visual Testing (Storybook)」 mode.
14
12
  :::
@@ -3,10 +3,10 @@ title: "**/*.test.[tj]sx?"
3
3
  sidebar_position: 6
4
4
  ---
5
5
 
6
- 应用项目测试文件。
6
+ App test file.
7
7
 
8
- 应用项目支持在项目源码目录(src)下创建后缀为 `.test.[tj]sx?` 文件进行编写测试用例。
8
+ The App supports the file suffixed with `.test.[tj]sx` under the `src/` to write test cases.
9
9
 
10
10
  :::info
11
- 使用单元测试、集成测试需要提前在项目下执行 new 命令启用「单元测试 / 集成测试」功能。
11
+ To use unit test and integration test, you need to execute the `new` command in advance to enable the `unit test/integration test`.
12
12
  :::
@@ -2,8 +2,9 @@
2
2
  sidebar_position: 0
3
3
  ---
4
4
 
5
- # 概览
6
- 本节涵盖了使用 `@modern-js/app-tools` 的所有API。
5
+ # Overview
6
+
7
+ This section covers all APIs in `@modern-js/app-tools`.
7
8
 
8
9
  import OverviewNav from '@site/src/components/OverviewNav';
9
10
  import sidebarData from '@site/plugins/overview-loader!@site/plugins/overview-data.json';
@@ -52,9 +52,9 @@ defineConfig(App, {
52
52
 
53
53
  ```json
54
54
  {
55
- // 来自 `modern.config.js` 配置
55
+ // 来自 `modern.config.js`
56
56
  ...runtime.router
57
- // 来自 `defineConfig` 配置
57
+ // 来自 `defineConfig`
58
58
  ...config.router
59
59
  }
60
60
  ```
@@ -21,6 +21,5 @@ The following example shows how to reference a function by default alias.
21
21
  import { hello } from '@/common/utils';
22
22
 
23
23
  hello();
24
-
25
24
  ```
26
25
  A reference to `@/common/utils` is equal to a reference to `src/common/utils`.
@@ -45,7 +45,7 @@ REACT_APP_FOO=123 BAR=456 pnpm run dev
45
45
 
46
46
  ### Specify Via File
47
47
 
48
- Create a `.env` file in the App root directory with custom environment variables:
48
+ Create a `.env` file in the project with custom environment variables:
49
49
 
50
50
  ```env
51
51
  REACT_APP_FOO=123
@@ -56,8 +56,8 @@ const fooModel = model('foo').define({
56
56
 
57
57
  `function define((context: Context, utils: Utils) => ModelDesc): Model;`
58
58
 
59
- - context: Context,Reduck 上下文对象,可以获取底层的 `store` 对象。`store` 除支持 Redux Store 的所有 [API](https://redux.js.org/api/store) 以外,还挂载了用于消费 Model `use` 的方法,和用于卸载 Model `unmount` 方法。
60
- - utils: Utils,定义 Model 时,常用的工具函数: `use`、`onMount`。`use` 作用同 `store` 对象上的 `use`,`onMount` Model 挂载后的钩子函数。
59
+ - `context`: Reduck Context, can get underlying `store` object. `store` support all Redux Store [API](https://redux.js.org/api/store), also mounts the `use` method for consuming the Model, and the `unmount` method for unmounting the Model.
60
+ - utils: commonly used tool like `use`、`onMount`. `use` is the same as `store.use`,`onMount` is the hook function after the Model is mounted.
61
61
 
62
62
  <!-- TODO: @anchao 调整类型 -->
63
63
  ```ts
@@ -12,7 +12,7 @@ import { act } from '@modern-js/runtime/testing';
12
12
 
13
13
  ## Function Signature
14
14
 
15
- `act` is the same as [react-dom/test-utils act 函数](https://reactjs.org/docs/testing-recipes.html#act).
15
+ `act` is the same as [react-dom/test-utils act function](https://reactjs.org/docs/testing-recipes.html#act).
16
16
 
17
17
  ## Example
18
18
 
@@ -112,8 +112,8 @@
112
112
  "description": "The label for category 常见问题 in sidebar guidesSidebar"
113
113
  },
114
114
  "sidebar.apisAppSidebar.category.文件约定": {
115
- "message": "文件约定",
116
- "description": "The label for category 文件约定 in sidebar apisAppSidebar"
115
+ "message": "Convention",
116
+ "description": "The label for category convention in sidebar apisAppSidebar"
117
117
  },
118
118
  "sidebar.apisAppSidebar.category.src/": {
119
119
  "message": "src/",
@@ -124,12 +124,12 @@
124
124
  "description": "The label for category api/ in sidebar apisAppSidebar"
125
125
  },
126
126
  "sidebar.apisAppSidebar.category.函数写法": {
127
- "message": "函数写法",
128
- "description": "The label for category 函数写法 in sidebar apisAppSidebar"
127
+ "message": "Function",
128
+ "description": "The label for category Function in sidebar apisAppSidebar"
129
129
  },
130
130
  "sidebar.apisAppSidebar.category.框架写法": {
131
- "message": "框架写法",
132
- "description": "The label for category 框架写法 in sidebar apisAppSidebar"
131
+ "message": "Framework",
132
+ "description": "The label for category Framework in sidebar apisAppSidebar"
133
133
  },
134
134
  "sidebar.apisAppSidebar.category.server/": {
135
135
  "message": "server/",
@@ -141,11 +141,11 @@
141
141
  },
142
142
  "sidebar.apisAppSidebar.category.命令": {
143
143
  "message": "Commands",
144
- "description": "The label for category 命令 in sidebar apisAppSidebar"
144
+ "description": "The label for category command in sidebar apisAppSidebar"
145
145
  },
146
146
  "sidebar.apisAppSidebar.category.运行时": {
147
147
  "message": "Runtime",
148
- "description": "The label for category 运行时 in sidebar apisAppSidebar"
148
+ "description": "The label for category runtime in sidebar apisAppSidebar"
149
149
  },
150
150
  "sidebar.apisAppSidebar.category.核心 API": {
151
151
  "message": "Core API",
@@ -188,8 +188,8 @@
188
188
  "description": "The label for category 插件 API in sidebar apisAppSidebar"
189
189
  },
190
190
  "sidebar.apisMonorepoSidebar.category.文件约定": {
191
- "message": "文件约定",
192
- "description": "The label for category 文件约定 in sidebar apisMonorepoSidebar"
191
+ "message": "Convention",
192
+ "description": "The label for category convention in sidebar apisMonorepoSidebar"
193
193
  },
194
194
  "sidebar.apisMonorepoSidebar.category.命令": {
195
195
  "message": "命令",
package/package.json CHANGED
@@ -11,20 +11,20 @@
11
11
  "modern",
12
12
  "modern.js"
13
13
  ],
14
- "version": "0.0.0-next-20221123182933",
14
+ "version": "0.0.0-next-20221124071519",
15
15
  "publishConfig": {
16
16
  "registry": "https://registry.npmjs.org/",
17
17
  "access": "public"
18
18
  },
19
19
  "peerDependencies": {
20
- "@modern-js/builder-doc": "0.0.0-next-20221123182933"
20
+ "@modern-js/builder-doc": "0.0.0-next-20221124071519"
21
21
  },
22
22
  "devDependencies": {
23
23
  "ts-node": "^10",
24
24
  "fs-extra": "^10",
25
25
  "@types/node": "^16",
26
26
  "@types/fs-extra": "^9",
27
- "@modern-js/builder-doc": "0.0.0-next-20221123182933"
27
+ "@modern-js/builder-doc": "0.0.0-next-20221124071519"
28
28
  },
29
29
  "scripts": {
30
30
  "build": "npx ts-node ./scripts/sync.ts"
@@ -13,7 +13,7 @@ Options:
13
13
  --analyze 分析构建产物体积,查看各个模块打包后的大小
14
14
  ```
15
15
 
16
- `modern build` 命令默认会在 `/dist` 目录下构建出可用于生产环境的产物。
16
+ `modern build` 命令默认会在 `dist/` 目录下构建出可用于生产环境的产物。
17
17
 
18
18
  可以通过修改配置 [`output.distPath`](/docs/configure/app/output/dist-path) 指定产物的输出目录。
19
19
 
@@ -4,7 +4,7 @@ type: ref
4
4
 
5
5
  # 命令
6
6
 
7
- 本节涵盖了使用应用工程的所有命令。
7
+ 本节涵盖了所有命令。
8
8
 
9
9
 
10
10
 
@@ -13,7 +13,7 @@ Options:
13
13
  -h, --help display help for command
14
14
  ```
15
15
 
16
- 运行 `ESLint` 检查代码语法情况, 通长情况下,我们只需要在 `git commit` 阶段通过 `lint-staged` 检查本次提交修改的部分代码。
16
+ 运行 `ESLint` 检查代码语法情况。通常情况下,我们只需要在 `git commit` 阶段通过 `lint-staged` 检查本次提交修改的部分代码。
17
17
 
18
18
  * `--no-fix` 参数设置后可以关闭自动修复 lint 错误代码的能力。
19
19