@modern-js/main-doc 2.54.6 → 2.55.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. package/docs/en/apis/app/hooks/src/entry.mdx +42 -0
  2. package/docs/en/apis/app/hooks/src/entry.server.mdx +52 -0
  3. package/docs/en/apis/app/hooks/src/index_.mdx +4 -0
  4. package/docs/en/apis/app/runtime/core/bootstrap.mdx +4 -0
  5. package/docs/en/apis/app/runtime/core/create-app.mdx +5 -1
  6. package/docs/en/apis/app/runtime/core/create-root.mdx +22 -0
  7. package/docs/en/apis/app/runtime/core/render.mdx +42 -0
  8. package/docs/en/apis/app/runtime/ssr/renderStreaming.mdx +69 -0
  9. package/docs/en/apis/app/runtime/ssr/renderString.mdx +62 -0
  10. package/docs/en/apis/app/runtime/ssr/requestHandler.mdx +47 -0
  11. package/docs/en/components/debug-app.mdx +3 -3
  12. package/docs/en/configure/app/output/ssg.mdx +4 -0
  13. package/docs/en/configure/app/source/enable-async-entry.mdx +4 -4
  14. package/docs/en/configure/app/source/enable-custom-entry.mdx +41 -0
  15. package/docs/en/guides/advanced-features/ssr/cache.mdx +7 -2
  16. package/docs/en/guides/concept/entries.mdx +50 -36
  17. package/docs/en/guides/get-started/quick-start.mdx +24 -8
  18. package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx +30 -177
  19. package/docs/zh/apis/app/hooks/src/entry.mdx +42 -0
  20. package/docs/zh/apis/app/hooks/src/entry.server.mdx +52 -0
  21. package/docs/zh/apis/app/hooks/src/index_.mdx +4 -0
  22. package/docs/zh/apis/app/runtime/core/bootstrap.mdx +4 -0
  23. package/docs/zh/apis/app/runtime/core/create-app.mdx +5 -1
  24. package/docs/zh/apis/app/runtime/core/create-root.mdx +22 -0
  25. package/docs/zh/apis/app/runtime/core/render.mdx +43 -0
  26. package/docs/zh/apis/app/runtime/ssr/renderStreaming.mdx +69 -0
  27. package/docs/zh/apis/app/runtime/ssr/renderString.mdx +62 -0
  28. package/docs/zh/apis/app/runtime/ssr/requestHandler.mdx +47 -0
  29. package/docs/zh/components/debug-app.mdx +3 -2
  30. package/docs/zh/configure/app/dev/client.mdx +1 -1
  31. package/docs/zh/configure/app/output/ssg.mdx +4 -0
  32. package/docs/zh/configure/app/source/enable-async-entry.mdx +4 -4
  33. package/docs/zh/configure/app/source/enable-custom-entry.mdx +41 -0
  34. package/docs/zh/guides/advanced-features/ssr/cache.mdx +6 -2
  35. package/docs/zh/guides/concept/entries.mdx +54 -41
  36. package/docs/zh/guides/get-started/quick-start.mdx +26 -10
  37. package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx +29 -174
  38. package/package.json +5 -5
  39. package/docs/en/apis/app/hooks/src/pages.mdx +0 -186
  40. package/docs/zh/apis/app/hooks/src/pages.mdx +0 -187
  41. package/docs/zh/apis/monorepo/commands/deploy.mdx +0 -38
@@ -1,186 +0,0 @@
1
- ---
2
- title: pages/
3
- sidebar_position: 3
4
- ---
5
- # pages/
6
-
7
- The identifier for the entry point when the application uses the [`Pages` entry](https://modernjs.dev/v1/docs/guides/usages/entries#pages-%E5%85%A5%E5%8F%A3) type.
8
-
9
- :::info
10
- Compatible with Modern.js 1.0 `Pages` entry. It is recommended to use [conventional routing](guides/basic-features/routes.html#conventional-routing).
11
- :::
12
-
13
- When the project structure is of the `Pages entry` type, the client-side routing configuration will be obtained by analyzing the files in the `src/pages` directory.
14
-
15
- For example, the following directory structure:
16
-
17
- ```bash
18
- .
19
- └── src
20
- └── pages
21
- ├── about
22
- │ └── index.jsx
23
- ├── index.jsx
24
- └── info.jsx
25
- ```
26
-
27
- The corresponding generated routing configuration is:
28
-
29
- ```bash
30
- [
31
- { path: '/', component: 'pages/index.jsx' },
32
- { path: '/info' component: 'pages/info.jsx' },
33
- { path: '/about', component: 'pages/about/index.jsx' }
34
- ]
35
- ```
36
-
37
- Files under the pages directory that meet the following conditions will not be treated as routing files:
38
-
39
- - Files whose suffix is not `.(j|t)sx?`.
40
- - `.d.ts` type definition files.
41
- - Test files ending in `.test.(j|t)sx?` or `.spec.(j|t)sx?` or `.e2e.(j|t)sx?`.
42
-
43
- :::tip
44
- It is recommended to only write entry code in the pages directory and write business logic in the independent features directory outside the pages directory. In this way, most of the files under the pages directory will be routing files, and there is no need for additional filtering rules.
45
-
46
- :::
47
-
48
- ### Dynamic Routing
49
-
50
- If the directory name of the route file is named with [], the generated route will be used as a dynamic route.
51
-
52
- For example, the following directory structure:
53
-
54
- ```bash
55
- .
56
- └── src
57
- └── pages
58
- ├── [post]
59
- │ ├── detail.jsx
60
- │ └── index.js
61
- ├── users
62
- │ └── [id].jsx
63
- ├── index.jsx
64
- └── info.jsx
65
- ```
66
-
67
- The corresponding generated routing configuration is:
68
-
69
- ```js
70
- [
71
- { path: '/', component: 'pages/index.jsx' },
72
- { path: '/info', component: 'pages/info.jsx' },
73
- { path: '/:post/', component: 'pages/[post]/index.js' },
74
- { path: '/:post/detail' components: 'pages/[post]/detail.jsx'},
75
- { path: '/users/:id', components: 'pages/users/[id].jsx'}
76
- ]
77
- ```
78
-
79
- On the basis of dynamic routing, special routing suffixes `(*, ?, +)` can be added.
80
-
81
- For example: `src/pages/users/[id]*.tsx` will result in the route `/users/:id*`.
82
-
83
- ### Global Layout
84
-
85
- When the entire application needs a global `layout`, it can be achieved through `pages/_app.tsx`. The specific writing method is as follows:
86
-
87
- ```js
88
- import React from 'react';
89
- import UserLayout from 'xxxx';
90
-
91
- export const App = ({Component, ...pageProps}:{ Component: React.ComponentType}) => {
92
- return (
93
- <UserLayout>
94
- <Component {...pageProps} />
95
- </UserLayout>
96
- );
97
- }
98
- ```
99
-
100
- The above `Component` is the component matched when accessing a specific route.
101
-
102
- For example, the following directory structure:
103
-
104
- ```bash
105
- .
106
- └── pages
107
- ├── a
108
- │ ├── b
109
- │ │ └── index.js
110
- │ └── index.js
111
- └── index.js
112
- ```
113
-
114
- - Accessing `/` corresponds to the `Component` component in `pages/index.js`.
115
- - Accessing `/a` corresponds to the `Component` component in `pages/a/index.js`.
116
- - Accessing `/a/b` corresponds to the `Component` component in `pages/a/b/index.js`.
117
-
118
- :::tip Advantages of global layout
119
-
120
- - Preserve the state of the global layout when the page changes.
121
- - Add global styles.
122
- - ComponentDidCatch error handling.
123
- - Use [defineConfig](/apis/app/runtime/app/define-config) to dynamically configure the runtime configuration.
124
-
125
- :::
126
-
127
- ### Partial Layout
128
-
129
- When developing an application, there are scenarios where sub-routes under the same route share a layout.
130
-
131
- For this scenario, Modern.js conventionally has a similar effect to global layout when there is `_layout.js` under the directory.
132
-
133
- For example, the following directory structure:
134
-
135
- ```bash
136
- └── pages
137
- ├── a
138
- │ ├── b
139
- │ │ └── index.js
140
- │ ├── _layout.js
141
- │ └── index.js
142
- └── index.js
143
- ```
144
-
145
- ```js title="pages/a/_layout.js"
146
- import React from 'react';
147
-
148
- const ALayout = ({ Component, ...pageProps }) => {
149
- return <Component {...pageProps} />;
150
- };
151
- export default ALayout;
152
- ```
153
-
154
- The `Component` parameter is the component corresponding to a specific accessed route, for example:
155
-
156
- - Accessing `/a` corresponds to the `Component` component in `pages/a/index.js`.
157
- - Accessing `/a/b` corresponds to the `Component` component in `pages/a/b/index.js`.
158
-
159
- In this way, `pages/a/_layout.js` can be used to meet the layout needs of shared routes under the `a` directory.
160
-
161
- ### 404 Route
162
-
163
- `pages/404.[tj]sx` is conventionally the default 404 route.
164
-
165
- For example, the following directory structure:
166
-
167
- ```bash
168
- .
169
- └── src
170
- └── pages
171
- ├── user.js
172
- ├── home.js
173
- ├── 404.js
174
- ```
175
-
176
- The generated routing configuration is as follows:
177
-
178
- ```bash
179
- [
180
- { path: '/user', component: './pages/user.js'},
181
- { path: '/home', component: './pages/home.js' },
182
- { path: '*', component: './pages/404.js'}
183
- ]
184
- ```
185
-
186
- All unmatched routes will be matched to `pages/404.[tj]s`.
@@ -1,187 +0,0 @@
1
- ---
2
- title: pages/
3
- sidebar_position: 3
4
- ---
5
- # pages/
6
-
7
- 应用使用 [`Pages` 入口](https://modernjs.dev/v1/docs/guides/usages/entries#pages-%E5%85%A5%E5%8F%A3)时的入口标识。
8
-
9
- :::info
10
- 兼容 Modern.js 1.0 `Pages` 入口,推荐使用[约定式路由](guides/basic-features/routes.html#约定式路由)。
11
- :::
12
-
13
- 当项目结构为 `Pages 入口`类型时, 会分析 `src/pages` 目录下的文件得到客户端路由配置。
14
-
15
- 举例说明,例如以下目录结构:
16
-
17
- ```bash
18
- .
19
- └── src
20
- └── pages
21
- ├── about
22
- │ └── index.jsx
23
- ├── index.jsx
24
- └── info.jsx
25
- ```
26
-
27
- 对应生成的路由配置为:
28
-
29
- ```bash
30
- [
31
- { path: '/', component: 'pages/index.jsx' },
32
- { path: '/info' component: 'pages/info.jsx' },
33
- { path: '/about', component: 'pages/about/index.jsx' }
34
- ]
35
- ```
36
-
37
- pages 目录下的文件满足以下条件的不会被当做路由文件
38
-
39
- - 后缀不是 `.(j|t)sx?` 的文件。
40
- - `.d.ts` 类型定义文件。
41
- - 以 `.(test|spec|e2e).(j|t)sx?` 结尾的测试文件。
42
-
43
- :::tip 提示
44
-
45
- 推荐 pages 目录下只写入口代码,把业务逻辑写到 pages 外面独立的 features 目录里。这样 pages 目录下大部分文件都会是路由文件,也就不需要额外的过滤规则。
46
-
47
- :::
48
-
49
- ### 动态路由
50
-
51
- 使用 `[ ]` 包裹的目录或文件会被视为动态路由
52
-
53
- 例如以下目录结构:
54
-
55
- ```bash
56
- .
57
- └── src
58
- └── pages
59
- ├── [post]
60
- │ ├── detail.jsx
61
- │ └── index.js
62
- ├── users
63
- │ └── [id].jsx
64
- ├── index.jsx
65
- └── info.jsx
66
- ```
67
-
68
- 对应生成的路由配置为:
69
-
70
- ```js
71
- [
72
- { path: '/', component: 'pages/index.jsx' },
73
- { path: '/info', component: 'pages/info.jsx' },
74
- { path: '/:post/', component: 'pages/[post]/index.js' },
75
- { path: '/:post/detail' components: 'pages/[post]/detail.jsx'},
76
- { path: '/users/:id', components: 'pages/users/[id].jsx'}
77
- ]
78
- ```
79
-
80
- 动态路由的基础上,支持添加特殊的路由后缀 `(*、?、+)`。
81
-
82
- 例如:`src/pages/users/[id]*.tsx` 最终路由为 `/users/:id*`
83
-
84
- ### 全局 layout
85
-
86
- 整个应用需要全局的 `layout` 时, 可以通过 `pages/_app.tsx` 实现,具体写法如下:
87
-
88
- ```js
89
- import React from 'react';
90
- import UserLayout from 'xxxx';
91
-
92
- export const App = ({Component, ...pageProps}:{ Component: React.ComponentType}) => {
93
- return (
94
- <UserLayout>
95
- <Component {...pageProps} />
96
- </UserLayout>
97
- );
98
- }
99
- ```
100
-
101
- 上述 `Component` 为访问具体路由匹配到的组件。
102
-
103
- 例如以下目录结构:
104
-
105
- ```bash
106
- .
107
- └── pages
108
- ├── a
109
- │ ├── b
110
- │ │ └── index.js
111
- │ └── index.js
112
- └── index.js
113
- ```
114
-
115
- - 访问 `/` 时,对应的 `Component` 组件为 `pages/index.js`。
116
- - 访问 `/a` 时,对应的 `Component` 组件为 `pages/a/index.js`。
117
- - 访问 `/a/b` 时,对应的 `Component` 组件为 `pages/a/b/index.js`。
118
-
119
- :::tip 全局 layout 有以下优点
120
-
121
- - 页面变化时,保留全局布局的状态
122
- - 添加全局样式
123
- - ComponentDidCatch 错误处理
124
- - 使用 [defineConfig](/apis/app/runtime/app/define-config) 动态配置运行时配置。
125
-
126
- :::
127
-
128
- ### 部分 layout
129
-
130
- 开发应用时,存在同一路由下的子路由共用 layout 的场景。
131
-
132
- 针对这一场景,Modern.js 约定,当目录下存在 `_layout.js` ,就会有类似全局 layout 的效果。
133
-
134
- 例如以下目录结构:
135
-
136
- ```bash
137
- └── pages
138
- ├── a
139
- │ ├── b
140
- │ │ └── index.js
141
- │ ├── _layout.js
142
- │ └── index.js
143
- └── index.js
144
- ```
145
-
146
- ```js title="pages/a/_layout.js"
147
- import React from 'react';
148
-
149
- const ALayout = ({ Component, ...pageProps }) => {
150
- return <Component {...pageProps} />;
151
- };
152
- export default ALayout;
153
- ```
154
-
155
- Component 参数为访问具体路由对应的组件,例如
156
-
157
- - 访问 `/a` 时,对应的 `Component` 组件为 `pages/a/index.js`。
158
- - 访问 `/a/b` 时,对应的 `Component` 组件为 `pages/a/b/index.js`。
159
-
160
- 这样就可以用 `pages/a/_layout.js` 满足 `a` 目录下路由共用 layout 的需求。
161
-
162
- ### 404 路由
163
-
164
- 约定 `pages/404.[tj]sx` 为默认的 404 路由。
165
-
166
- 例如以下目录结构:
167
-
168
- ```bash
169
- .
170
- └── src
171
- └── pages
172
- ├── user.js
173
- ├── home.js
174
- ├── 404.js
175
- ```
176
-
177
- 生成路由配置如下:
178
-
179
- ```bash
180
- [
181
- { path: '/user', component: './pages/user.js'},
182
- { path: '/home', component: './pages/home.js' },
183
- { path: '*', component: './pages/404.js'}
184
- ]
185
- ```
186
-
187
- 所有未匹配的路由,都将匹配到 `pages/404.[tj]s`。
@@ -1,38 +0,0 @@
1
- ---
2
- sidebar_position: 7
3
- ---
4
- # deploy
5
-
6
- ```bash
7
- Usage: modern deploy [options]
8
-
9
- deploy project
10
-
11
- Options:
12
- -p, --path [path] Specify the path of the output files (default: "output")
13
- -h, --help display help for command
14
- ```
15
-
16
- 对指定的项目进行部署,会通过指定项目分析其依赖的 Monorepo 下的子项目。
17
-
18
- 在执行命令之后,会首先生成 `output` 目录,在目录当中包含了指定部署的项目以及其依赖的子项目,形成一个最小集合的 Monorepo。
19
-
20
- :::info 补充信息
21
- `output` 目录是默认目录,可以通过 `-p` 参数进行自定义。
22
-
23
- :::
24
-
25
- 然后会在 `output` 目录下进行依赖的安装以及必要文件的复制。
26
-
27
- 最后当依赖安装完成后,便完成了对指定项目的部署任务。
28
-
29
- 例如部署项目名称为 `app` 的应用,则可以执行:
30
-
31
- ```
32
- pnpm deploy app
33
- ```
34
-
35
- :::info 补充信息
36
- 其中 `app` 为项目的 `package.json` 的 `name` 值。
37
-
38
- :::