@modern-js/main-doc 2.18.0 → 2.18.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @modern-js/main-doc
 
+## 2.18.1
+
+### Patch Changes
+
+- 21c87bf: feat: bump codesmith packages version
+
+  feat: 升级 codesmith 包版本
+
+  - @modern-js/builder-doc@2.18.1
+
 ## 2.18.0
 
 ### Patch Changes

package/docs/en/guides/basic-features/data-fetch.mdx

@@ -341,6 +341,14 @@ export default async (): Promise<ProfileData> => {
 
 4. When run on the server side, the `loader` functions are packaged into a single bundle, so we do not recommend using `__filename` and `__dirname` for server-side code.
 
+### FAQ
+
+1. Relationship between loader and bff functions
+
+In a CSR project, the loader is executed on the client side and the bff function can be called directly from the loader to make a request.
+
+In an SSR project, each loader is also a server-side API, and we recommend using loader instead of the BFF function which http method is `get` to avoid one more layer of forwarding and execution.
+
 ## useLoader(Old)
 
 **`useLoader`** is an API in Modern.js old version. The API is a React Hook specially provided for SSR applications, allowing developers to fetch data in components.

package/docs/en/guides/basic-features/routes.mdx

@@ -367,6 +367,22 @@ To further improve the user experience and reduce time of loading, Modern.js sup
 - `intent`, the value we recommend for most scenarios, will automatically start loading the corresponding resources and the data defined in the data loader when you mouse over the Link, and will automatically unload it when the mouse is moved away. In our tests, even a direct click can reduce the loading time by about 200ms.
 - `render`, when the Link component renders, it will load the corresponding resources and the data defined in the data loader.
 
+#### FAQ
+
+1. What is the difference between using `render` and not split chunks based on routes?
+
+- With `render` you can specify which routes are loaded on the first screen, and you can control the rendering so that Link components are rendered only when they are in the visible area.
+- With `render`, static resources are loaded only when they are idle and do not hog the network with first-screen static resources.
+- When using server side rendering, data is also prefetched.
+
+import Motivation from '@site-docs-en/components/convention-routing-movitation'
+
+<Motivation/>
+
+import Practice from '@site-docs-en/components/routes-practice'
+
+<Practice/>
+
 ## Self-controlled routing
 
 With `src/App.tsx` as the agreed entry, Modern.js will not do additional operations with multiple routes, developers can use the React Router 6 API for development by themselves, for example:

package/docs/en/guides/topic-detail/generator/plugin/api/input/type.mdx

@@ -34,7 +34,7 @@ Each option supports two fields:
 
 - label: display name.
 
-### x-validate
+### x-validator
 
 schema verification rules. Formily's verification method is supported here, for details, please refer to [Formily Validate](https://formilyjs.org/zh-CN/guide/advanced/validate).
 

package/docs/zh/guides/basic-features/data-fetch.mdx

@@ -339,6 +339,15 @@ export default async (): Promise<ProfileData> => {
 
 4. 在服务端运行时，`loader` 函数会被打包为一个统一的 bundle，所以我们不推荐服务端的代码使用 `__filename` 和 `__dirname`。
 
+### 常见问题
+
+1. loader 和 bff 函数的关系
+
+在 CSR 项目中，loader 在客户端执行，在 loader 可以直接调用 bff 函数进行接口请求。
+
+在 SSR 项目中，每个 loader 也是一个服务端接口，我们推荐使用 loader 替代 http method 为 `get` 的 BFF 函数，作为接口层，避免多一层转发和执行。
+
+
 ## useLoader（旧版）
 
 **`useLoader`** 是 Modern.js 老版本中的 API。该 API 是一个 React Hook，专门提供给 SSR 应用使用，让开发者能同构的在组件中获取数据。

package/docs/zh/guides/basic-features/routes.mdx

@@ -444,7 +444,7 @@ export const init = (context: RuntimeContext) => {
 };
 ```
 
-### Prefetch
+### 预加载
 
 在约定式路由下， Modern.js 会根据路由，自动地对路由进行分片，当用户访问具体的路由时，会自动加载对应的分片，这样可以有效地减少首屏加载的时间。但这也带来了一个问题，当用户访问一个路由时，如果该路由对应的分片还未加载完成，就会出现白屏的情况。
 这种情况下你可以通过定义 `loading` 组件，在静态资源加载完成前，展示一个自定义的 `loading` 组件。
@@ -462,9 +462,24 @@ export const init = (context: RuntimeContext) => {
 :::
 
 - `none`， 默认值，不会做 prefetch，没有任何额外的行为。
-- `intent`，这是我们推荐大多数场景下使用的值，当你把鼠标放在 Link 上时，会自动开始加载对应的分片和 data loader 中定义的数据，当鼠标移开时，会自动取消加载。在我们的测试中，即使是直接点击，也能减少大约 200ms 的加载时间。
+- `intent`，这是我们推荐大多数场景下使用的值，当你把鼠标放在 Link 上时，会自动开始加载对应的分片和 data loader 中定义的数据，当鼠标移开时，会自动取消加载。在我们的测试中，即使是快速点击，也能减少大约 200ms 的加载时间。
 - `render`，当 Link 组件渲染时，就会加载对应的分片和 data loader 中定义的数据。
 
+#### 常见问题
+
+1. 使用 `render` 和不根据路由做静态资源分片的区别？
+
+- 使用 `render` 可以指定哪些路由在首屏时，进行加载，同时你可以通过对渲染的控制，仅当 Link 组件进入到可视区域时，才对 Link 组件进行渲染。
+- 使用 `render`，仅在空闲时对静态资源进行加载，不会与首屏静态资源抢占网络。
+- 在 SSR 场景下，也会对数据进行预取。
+
+import Motivation from '@site-docs/components/convention-routing-movitation'
+
+<Motivation/>
+
+import Practice from '@site-docs/components/routes-practice'
+
+<Practice/>
 
 
 ## 自控式路由

package/docs/zh/guides/topic-detail/generator/plugin/api/input/type.mdx

@@ -34,7 +34,7 @@ schema 如果为选择类型，该字段用于定义选项内容。
 
 - label: 展示名称。
 
-### x-validate
+### x-validator
 
 schema 的验证规则。这里支持 Formily 的校验方式，具体可参考 [Formily 表单校验](https://formilyjs.org/zh-CN/guide/advanced/validate)。
 

package/package.json

@@ -15,13 +15,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.18.0",
+  "version": "2.18.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.18.0"
+    "@modern-js/builder-doc": "^2.18.1"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -33,9 +33,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.18.0",
-    "@modern-js/doc-tools": "2.18.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.18.0"
+    "@modern-js/builder-doc": "2.18.1",
+    "@modern-js/doc-tools": "2.18.1",
+    "@modern-js/doc-plugin-auto-sidebar": "2.18.1"
   },
   "scripts": {
     "dev": "modern dev",