@modern-js/main-doc 0.0.0-next-1678795030145 → 0.0.0-next-1678861353129

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-1678795030145
+## 0.0.0-next-1678861353129
 
 ### Patch Changes
 
@@ -8,7 +8,7 @@
 
   fix: 修复文档站 info 不生效问题
 
-  - @modern-js/builder-doc@0.0.0-next-1678795030145
+  - @modern-js/builder-doc@0.0.0-next-1678861353129
 
 ## 2.8.0
 

package/en/guides/advanced-features/ssr.mdx

@@ -8,12 +8,14 @@ In Modern.js, SSR also works out of the box. Developers do not need to write com
 
 Enabling SSR is very easy, just set ['server.ssr'](/configure/app/server/ssr) to `true`:
 
-```json
-{
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
   "server": {
-    "ssr": true
-  }
-}
+    "ssr": true,
+  },
+})
 ```
 
 ## SSR Data Fetch
@@ -293,14 +295,16 @@ Be sure to filter the `host` field if you really need to pass through all reques
 
 Modern.js supports streaming rendering in React 18. Opt in it with the following configuration:
 
-```json
-{
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
   "server": {
     "ssr": {
-      "mode": "stream"
-    }
-  }
-}
+      "mode": "stream",
+    },
+  },
+})
 ```
 
 The streaming SSR of Modern.js is implemented based on React Router, and the main APIs involved are:
@@ -383,7 +387,7 @@ export default ({ params }: LoaderFunctionArgs) => {
 
 Use the `Await` component to render the data returned asynchronously from the Data Loader. For example:
 
-```ts title='page.tsx'
+```tsx title='page.tsx'
 import { Await, useLoaderData } from '@modern-js/runtime/router';
 import { Suspense } from 'react';
 import type { Data } from './page.loader';
@@ -425,8 +429,7 @@ So, here we import like this: `import type { Data } from './page.loader'`;
 
 You can also get the asynchronous data returned by Data Loader through `useAsyncValue`. For example:
 
-```
-```ts title='page.tsx'
+```tsx title='page.tsx'
 import { useAsyncValue } from '@modern-js/runtime/router';
 
 // skip some codes
@@ -480,7 +483,7 @@ export default () => {
 
 Then use `useAsyncError` to get the error, and assign the component used to render the error to the `errorElement` property of the `Await` component:
 
-```ts title='page.ts'
+```tsx title='page.ts'
 import { Await, useAsyncError, useLoaderData } from '@modern-js/runtime/router';
 import { Suspense } from 'react';
 

package/package.json

@@ -11,13 +11,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-1678795030145",
+  "version": "0.0.0-next-1678861353129",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-1678795030145"
+    "@modern-js/builder-doc": "0.0.0-next-1678861353129"
   },
   "devDependencies": {
     "ts-node": "^10",
@@ -25,7 +25,7 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "0.0.0-next-1678795030145"
+    "@modern-js/builder-doc": "0.0.0-next-1678861353129"
   },
   "scripts": {
     "build": "npx ts-node ./scripts/sync.ts"

package/zh/guides/advanced-features/ssr.mdx

@@ -8,12 +8,14 @@ sidebar_position: 3
 
 启用 SSR 非常简单，只需要设置 [`server.ssr`](/configure/app/server/ssr) 为 `true` 即可：
 
-```json
-{
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
   "server": {
-    "ssr": true
-  }
-}
+    "ssr": true,
+  },
+})
 ```
 
 ## SSR 时的数据获取
@@ -282,14 +284,16 @@ export const loader = () => {
 
 Modern.js 支持了 React 18 的流式渲染，可以通过如下配置启用：
 
-```json
-{
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
   "server": {
     "ssr": {
-      "mode": "stream"
-    }
-  }
-}
+      "mode": "stream",
+    },
+  },
+})
 ```
 
 Modern.js 的流式渲染基于 React Router 实现，主要涉及 API 有：
@@ -372,7 +376,7 @@ export default ({ params }: LoaderFunctionArgs) => {
 
 通过 `Await` 组件，可以获取到 Data Loader 中异步返回的数据，然后进行渲染。例如：
 
-```ts title='page.tsx'
+```tsx title='page.tsx'
 import { Await, useLoaderData } from '@modern-js/runtime/router';
 import { Suspense } from 'react';
 import type { Data } from './page.loader';
@@ -413,8 +417,8 @@ export default Page;
 
 也可以通过 `useAsyncValue` 获取 Data Loader 返回的异步数据。例如：
 
-```
-```ts title='page.tsx'
+
+```tsx title='page.tsx'
 import { useAsyncValue } from '@modern-js/runtime/router';
 
 // 省略部分代码
@@ -468,7 +472,7 @@ export default () => {
 
 然后通过 `useAsyncError` 获取错误，并将用于渲染错误信息的组件赋值给 `Await` 组件的 `errorElement` 属性：
 
-```ts title='page.ts'
+```tsx title='page.ts'
 import { Await, useAsyncError, useLoaderData } from '@modern-js/runtime/router';
 import { Suspense } from 'react';
 

package/zh/guides/basic-features/mock.mdx

@@ -25,7 +25,7 @@ Modern.js 提供了快速生成 Mock 数据的功能，能够让前端独立自
 `config/mock/index.ts` 文件只需要导出一个包含所有 Mock API 的对象，对象的属性由请求配置 `method` 和 `url` 组成，对应的属性值可以为 `Object`、`Array`、`Function`：
 
 ```js
-module.exports = {
+export default {
   /* 属性为具体的 method 和 请求 url，值为 object 或 array 作为请求的结果 */
   'GET /api/getInfo': { data: [1, 2, 3, 4] },