@modern-js/main-doc 0.0.0-next-1680864210554 → 0.0.0-next-1680876402799

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 (56) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/docs/en/apis/app/commands.mdx +1 -1
  3. package/docs/en/apis/app/hooks/api/framework/lambda.mdx +2 -2
  4. package/docs/en/apis/app/hooks/api/functions/api.mdx +3 -3
  5. package/docs/en/apis/app/hooks/api/functions/app.mdx +1 -1
  6. package/docs/en/apis/app/hooks/api/test.mdx +2 -1
  7. package/docs/en/apis/app/hooks/config/mock.mdx +1 -1
  8. package/docs/en/apis/app/hooks/config/upload.mdx +1 -1
  9. package/docs/en/apis/app/hooks/server/test.mdx +1 -1
  10. package/docs/en/apis/app/hooks/src/app.mdx +1 -1
  11. package/docs/en/apis/app/hooks/src/pages.mdx +1 -1
  12. package/docs/en/apis/app/runtime/app/define-config.mdx +1 -1
  13. package/docs/en/apis/app/runtime/core/bootstrap.mdx +2 -2
  14. package/docs/en/apis/app/runtime/core/use-loader.mdx +2 -2
  15. package/docs/en/apis/app/runtime/model/auto-actions.mdx +6 -6
  16. package/docs/en/apis/app/runtime/model/connect.mdx +2 -1
  17. package/docs/en/apis/app/runtime/model/create-app.mdx +1 -1
  18. package/docs/en/apis/app/runtime/model/handle-effect.mdx +3 -3
  19. package/docs/en/apis/app/runtime/model/model_.mdx +2 -2
  20. package/docs/en/apis/app/runtime/model/use-model.mdx +2 -2
  21. package/docs/en/apis/app/runtime/model/use-static-model.mdx +2 -2
  22. package/docs/en/apis/app/runtime/model/use-store.mdx +1 -1
  23. package/docs/en/apis/app/runtime/router/router.mdx +1 -0
  24. package/docs/en/apis/app/runtime/ssr/pre-render.mdx +2 -2
  25. package/docs/en/apis/app/runtime/testing/render.mdx +1 -1
  26. package/docs/en/components/enable-bff.mdx +2 -2
  27. package/docs/en/configure/app/output/ssg.mdx +1 -1
  28. package/docs/en/configure/app/plugins.mdx +3 -3
  29. package/docs/en/configure/app/tools/swc.mdx +1 -1
  30. package/docs/en/guides/advanced-features/bff/function.mdx +3 -3
  31. package/docs/en/guides/advanced-features/code-split.mdx +2 -2
  32. package/docs/en/guides/advanced-features/eslint.mdx +1 -1
  33. package/docs/en/guides/advanced-features/ssg.mdx +2 -2
  34. package/docs/en/guides/basic-features/alias.mdx +1 -1
  35. package/docs/en/guides/basic-features/env-vars.mdx +5 -5
  36. package/docs/en/guides/basic-features/routes.mdx +26 -28
  37. package/docs/en/guides/concept/entries.mdx +3 -3
  38. package/docs/en/guides/get-started/quick-start.mdx +6 -23
  39. package/docs/en/guides/get-started/upgrade.mdx +7 -7
  40. package/docs/en/guides/topic-detail/framework-plugin/hook.mdx +1 -1
  41. package/docs/en/guides/topic-detail/generator/codesmith/api/json.mdx +3 -3
  42. package/docs/en/guides/topic-detail/generator/config/app.mdx +1 -1
  43. package/docs/en/guides/topic-detail/generator/config/monorepo.mdx +1 -1
  44. package/docs/en/guides/topic-detail/generator/plugin/api/file/addHelper.mdx +1 -1
  45. package/docs/en/guides/topic-detail/model/manage-effects.mdx +2 -1
  46. package/docs/en/guides/topic-detail/model/model-communicate.mdx +1 -1
  47. package/docs/zh/apis/app/hooks/src/pages.mdx +1 -1
  48. package/docs/zh/apis/app/runtime/model/handle-effect.mdx +2 -1
  49. package/docs/zh/apis/app/runtime/model/model_.mdx +4 -2
  50. package/docs/zh/blog/updates/2022-0708-updates.md +1 -2
  51. package/docs/zh/components/enable-bff.mdx +2 -2
  52. package/docs/zh/guides/advanced-features/ssr.mdx +15 -20
  53. package/docs/zh/guides/basic-features/routes.mdx +25 -25
  54. package/docs/zh/guides/concept/entries.mdx +4 -4
  55. package/docs/zh/guides/get-started/upgrade.mdx +3 -3
  56. package/package.json +5 -5
@@ -2,6 +2,7 @@
2
2
  title: 路由
3
3
  sidebar_position: 1
4
4
  ---
5
+
5
6
  # 路由
6
7
 
7
8
  Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main),并提供了多种类型的路由模式。根据不同 [入口](/guides/concept/entries) 类型,将路由分为三种模式,分别是**约定式路由**,**自控式路由**和**其他路由方案**。
@@ -77,8 +78,8 @@ Modern.js 支持了业界流行的约定式路由模式:**嵌套路由**,使
77
78
  ```tsx
78
79
  <Layout>
79
80
  <UserLayout>
80
- <UserPage>
81
- <UserLayout>
81
+ <UserPage />
82
+ </UserLayout>
82
83
  </Layout>
83
84
  ```
84
85
 
@@ -138,8 +139,8 @@ export default () => {
138
139
  ```tsx
139
140
  <Layout>
140
141
  <UserLayout>
141
- <UserPage>
142
- <UserLayout>
142
+ <UserPage />
143
+ </UserLayout>
143
144
  </Layout>
144
145
  ```
145
146
 
@@ -177,6 +178,7 @@ export default () => {
177
178
  :::
178
179
 
179
180
  例如以下目录结构:
181
+
180
182
  ```
181
183
  └── routes
182
184
  ├── $.tsx
@@ -186,11 +188,12 @@ export default () => {
186
188
  ```
187
189
 
188
190
  当访问任何匹配不到的路径时,都会渲染 `routes/$.tsx` 组件,同样,`$.tsx` 中可以使用 [useParams](/apis/app/runtime/router/router#useparams) 捕获 url 的剩余部分。
191
+
189
192
  ```ts title="$.tsx"
190
193
  import { useParams } from '@modern-js/runtime/router';
191
194
  // 当 path 是 `/aaa/bbb` 时
192
195
  const params = useParams();
193
- params['*'] // => 'aaa/bbb'
196
+ params['*']; // => 'aaa/bbb'
194
197
  ```
195
198
 
196
199
  `$.tsx` 可以加入到 `routes` 目录下的任意目录中,一个常见的使用示例是添加 `routes/$.tsx` 文件去定制任意层级的 404 页面。
@@ -260,8 +263,8 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由,`__auth/layout.tsx` 组
260
263
 
261
264
  ```tsx title="当路由为 / 时"
262
265
  <Layout>
263
- <Suspense fallback={<Loading/>}>
264
- <Page><Page>
266
+ <Suspense fallback={<Loading />}>
267
+ <Page />
265
268
  </Suspense>
266
269
  </Layout>
267
270
  ```
@@ -297,15 +300,15 @@ Modern.js 建议必须有根 layout 和根 loading。
297
300
  可以通过创建 [`data loader`](/guides/basic-features/data-fetch) 文件做路由的重定向,如有文件 `routes/user/page.tsx`,想对这个文件对应的路由做重定向,可以创建 `routes/user/page.loader.ts` 文件:
298
301
 
299
302
  ```ts title="routes/user/page.loader.ts"
300
- import { redirect } from '@modern-js/runtime/router'
303
+ import { redirect } from '@modern-js/runtime/router';
301
304
 
302
305
  export default () => {
303
306
  const user = await getUser();
304
- if(!user){
307
+ if (!user) {
305
308
  return redirect('/login');
306
309
  }
307
310
  return null;
308
- }
311
+ };
309
312
  ```
310
313
 
311
314
  ### 错误处理
@@ -338,7 +341,7 @@ export default ErrorBoundary;
338
341
 
339
342
  在每个根 `Layout` 组件中(`routes/layout.ts`),可以动态地定义应用运行时配置:
340
343
 
341
- ```ts title="src/routes/layout.tsx"
344
+ ```tsx title="src/routes/layout.tsx"
342
345
  // 定义运行时配置
343
346
  import type { AppConfig } from '@modern-js/runtime';
344
347
 
@@ -348,13 +351,13 @@ export const config = (): AppConfig => {
348
351
  createRoutes() {
349
352
  return [
350
353
  {
351
- path: 'edenx',
352
- element: <div>edenx</div>,
354
+ path: 'modern',
355
+ element: <div>modern</div>,
353
356
  },
354
357
  ];
355
358
  },
356
359
  },
357
- }
360
+ };
358
361
  };
359
362
  ```
360
363
 
@@ -378,15 +381,13 @@ export const init = (context: RuntimeContext) => {
378
381
  :::
379
382
 
380
383
  ```ts title="src/routes/layout.tsx"
381
- import {
382
- RuntimeContext,
383
- } from '@modern-js/runtime';
384
+ import { RuntimeContext } from '@modern-js/runtime';
384
385
 
385
386
  export const init = (context: RuntimeContext) => {
386
387
  return {
387
388
  message: 'Hello World',
388
- }
389
- }
389
+ };
390
+ };
390
391
  ```
391
392
 
392
393
  ```tsx title="src/routes/page.tsx"
@@ -397,7 +398,7 @@ export default () => {
397
398
  const { message } = context.getInitData();
398
399
 
399
400
  return <div>{message}</div>;
400
- }
401
+ };
401
402
  ```
402
403
 
403
404
  配合 SSR 功能时,浏览器端可以获取到 SSR 时 `init` 返回的数据,开发者可以自行判断是否要在浏览器端重新获取数据来覆盖 SSR 数据,例如:
@@ -409,21 +410,20 @@ export const init = (context: RuntimeContext) => {
409
410
  if (process.env.MODERN_TARGET === 'node') {
410
411
  return {
411
412
  message: 'Hello World By Server',
412
- }
413
+ };
413
414
  } else {
414
415
  const { context } = runtimeContext;
415
416
  const data = context.getInitData();
416
417
  // 如果没有获取到期望的数据
417
418
  if (!data.message) {
418
419
  return {
419
- message: 'Hello World By Client'
420
- }
420
+ message: 'Hello World By Client',
421
+ };
421
422
  }
422
423
  }
423
- }
424
+ };
424
425
  ```
425
426
 
426
-
427
427
  ## 自控式路由
428
428
 
429
429
  以 `src/App.tsx` 为约定的入口,Modern.js 不会多路由做额外的操作,开发者可以自行使用 React Router 6 的 API 进行开发,例如:
@@ -2,7 +2,7 @@
2
2
  sidebar_position: 1
3
3
  ---
4
4
 
5
- # 入口(Entry)
5
+ # 入口
6
6
 
7
7
  通过本章节,你可以了解到 Modern.js 中的入口约定,以及如何自定义入口。
8
8
 
@@ -132,9 +132,9 @@ Modern.js 生成的文件内容如下:
132
132
  ```js
133
133
  import React from 'react';
134
134
  import ReactDOM from 'react-dom/client';
135
- import customBootstrap from '@_edenx_src/index.tsx';
136
- import App from '@_edenx_src/App';
137
- import { router, state } from '@edenx/runtime/plugins';
135
+ import customBootstrap from '@_modern_js_src/index.tsx';
136
+ import App from '@_modern_js_src/App';
137
+ import { router, state } from '@modern-js/runtime/plugins';
138
138
 
139
139
  const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
140
140
  const MOUNT_ID = 'root';
@@ -44,7 +44,7 @@ import ReleaseNote from "@site-docs/components/release-note"
44
44
 
45
45
  对于使用 pnpm 的项目,请在**项目根目录**的 `package.json` 中添加以下配置,然后重新执行 `pnpm install`:
46
46
 
47
- ```json
47
+ ```json title="package.json"
48
48
  {
49
49
  "pnpm": {
50
50
  "overrides": {
@@ -58,7 +58,7 @@ import ReleaseNote from "@site-docs/components/release-note"
58
58
 
59
59
  对于使用 Yarn 的项目,请在**项目根目录**的 `package.json` 中添加以下配置,然后重新执行 `yarn install`:
60
60
 
61
- ```json
61
+ ```json title="package.json"
62
62
  {
63
63
  "resolutions": {
64
64
  "package-name": "^1.0.0"
@@ -70,7 +70,7 @@ import ReleaseNote from "@site-docs/components/release-note"
70
70
 
71
71
  对于使用 Npm 的项目,请在**项目根目录**的 `package.json` 中添加以下配置,然后重新执行 `npm install`:
72
72
 
73
- ```json
73
+ ```json title="package.json"
74
74
  {
75
75
  "overrides": {
76
76
  "package-name": "^1.0.0"
package/package.json CHANGED
@@ -11,13 +11,13 @@
11
11
  "modern",
12
12
  "modern.js"
13
13
  ],
14
- "version": "0.0.0-next-1680864210554",
14
+ "version": "0.0.0-next-1680876402799",
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-1680864210554"
20
+ "@modern-js/builder-doc": "0.0.0-next-1680876402799"
21
21
  },
22
22
  "devDependencies": {
23
23
  "classnames": "^2",
@@ -29,9 +29,9 @@
29
29
  "fs-extra": "^10",
30
30
  "@types/node": "^16",
31
31
  "@types/fs-extra": "^9",
32
- "@modern-js/builder-doc": "0.0.0-next-1680864210554",
33
- "@modern-js/doc-tools": "0.0.0-next-1680864210554",
34
- "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1680864210554"
32
+ "@modern-js/builder-doc": "0.0.0-next-1680876402799",
33
+ "@modern-js/doc-tools": "0.0.0-next-1680876402799",
34
+ "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1680876402799"
35
35
  },
36
36
  "scripts": {
37
37
  "dev": "modern dev",