@modern-js/main-doc 2.0.2 → 2.1.0

package/zh/guides/advanced-features/bff/function.md

@@ -67,32 +67,32 @@ Modern.js 中，BFF 函数对应的路由系统是基于文件系统实现的，
 
 以 `index.[jt]s` 命名的文件会被映射到上一层目录。
 
-* `api/index.ts` -> `{prefix}/`
-* `api/user/index.ts` -> `{prefix}/user`
+- `api/index.ts` -> `{prefix}/`
+- `api/user/index.ts` -> `{prefix}/user`
 
 ### 多层路由
 
 支持解析嵌套的文件，如果创建嵌套文件夹结构，文件仍会以相同方式自动解析路由。
 
-* `api/hello.ts` -> `{prefix}/hello`
-* `api/user/list.ts` -> `{prefix}/user/list`
+- `api/hello.ts` -> `{prefix}/hello`
+- `api/user/list.ts` -> `{prefix}/user/list`
 
 ### 动态路由
 
 同样的，创建命名带有 `[xxx]` 的文件夹或者文件，支持动态的命名路由参数。动态路由的函数参数规则可以看 [dynamac-path](/docs/guides/advanced-features/bff/function#dynamic-path)
 
-* `api/user/[username]/info.ts` -> `{prefix}/user/:username/info`
-* `api/user/username/[action].ts` -> `{prefix}/user/username/:action`
+- `api/user/[username]/info.ts` -> `{prefix}/user/:username/info`
+- `api/user/username/[action].ts` -> `{prefix}/user/username/:action`
 
 ### 白名单
 
 默认 `api/` 目录下所有文件都会当作 BFF 函数文件去解析，但以下文件不会被解析：
 
-* 命名以 `_` 开头的文件。例如：`_utils.ts`。
-* 命名以 `_` 开头的文件夹下所有文件。例如：`_utils/index.ts`、`_utils/cp.ts`。
-* 测试文件。例如：`foo.test.ts`。
-* TypeScript 类型文件。例如：`hello.d.ts`。
-* `node_module` 下的文件。
+- 命名以 `_` 开头的文件。例如：`_utils.ts`。
+- 命名以 `_` 开头的文件夹下所有文件。例如：`_utils/index.ts`、`_utils/cp.ts`。
+- 测试文件。例如：`foo.test.ts`。
+- TypeScript 类型文件。例如：`hello.d.ts`。
+- `node_module` 下的文件。
 
 ## RESTful API
 
@@ -130,11 +130,11 @@ export const post = async () => {
 };
 ```
 
-* 对应 HTTP Method，Modern.js 也支持了 9 种定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
+- 对应 HTTP Method，Modern.js 也支持了 9 种定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
 
-* 名字是大小不敏感的，如果是 `GET`，写成 `get`、`Get`、`GEt`、`GET`，都可以准确识别。而默认导出，即 `export default xxx` 则会被映射为 `Get`。
+- 名字是大小不敏感的，如果是 `GET`，写成 `get`、`Get`、`GEt`、`GET`，都可以准确识别。而默认导出，即 `export default xxx` 则会被映射为 `Get`。
 
-* 可以在一个文件中定义多个不同 Method 的函数，但如果定义多个相同 Method 的函数，则只有第一个会生效。
+- 可以在一个文件中定义多个不同 Method 的函数，但如果定义多个相同 Method 的函数，则只有第一个会生效。
 
 :::info 注
 需要注意的是，定义的函数都应该是异步的，与函数调用时类型有关，后面会提到。
@@ -153,27 +153,25 @@ export const post = async () => {
 ```ts title="api/[level]/[id].ts"
 export default async (level: number, id: number) => {
   const userData = await queryUser(level, uid);
-  return userData
-}
+  return userData;
+};
 ```
 
 在调用时直接传入动态参数：
 
 ```ts title="App.tsx"
-import { useState, useEffect } from 'react'
-import { get as getUser } from '@api/[level]/[id]'
+import { useState, useEffect } from 'react';
+import { get as getUser } from '@api/[level]/[id]';
 
 export default () => {
-  const [name, setName] = useState('')
+  const [name, setName] = useState('');
 
   useEffect(() => {
-    getUser(6, 001).then(
-      userData => setName(userData.name)
-    )
-  }, [])
+    getUser(6, 001).then(userData => setName(userData.name));
+  }, []);
 
-  return <div>{name}</div>
-}
+  return <div>{name}</div>;
+};
 ```
 
 #### RequestOption
@@ -183,29 +181,29 @@ Dynamic Path 之后的参数是包含 querystring、request body 的对象 `Requ
 在不存在动态路由的普通函数中，可以从第一个入参中获取传入的 `data` 和 `query`，例如：
 
 ```ts title="api/hello.ts"
-import type { RequestOption } from '@modern-js/runtime/server'
+import type { RequestOption } from '@modern-js/runtime/server';
 
-export async function post(
-  { query, data }: RequestOption<Record<string, string>, Record<string, string>>
-) {
+export async function post({
+  query,
+  data,
+}: RequestOption<Record<string, string>, Record<string, string>>) {
   // do somethings
 }
 ```
 
 这里你也可以使用自定义类型：
+
 ```ts title="api/lambda/hello.ts"
-import type { RequestOption } from '@modern-js/runtime/server'
+import type { RequestOption } from '@modern-js/runtime/server';
 
 type IQuery = {
   // some types
-}
+};
 type IData = {
   // some types
-}
+};
 
-export async function post(
-  { query, data }: { query:IQuery, data:IData }
-) {
+export async function post({ query, data }: { query: IQuery; data: IData }) {
   // do somethings
 }
 ```
@@ -216,7 +214,10 @@ export async function post(
 export async function post(
   sku: string,
   id: string,
-  { data, query }: RequestOption<Record<string, string>, Record<string, string>>
+  {
+    data,
+    query,
+  }: RequestOption<Record<string, string>, Record<string, string>>,
 ) {
   // do somethings
 }
@@ -225,18 +226,22 @@ export async function post(
 调用时也按照函数定义，传入对应的参数即可：
 
 ```ts title="App.tsx"
-import { post } from '@api/[sku]/[id]/item'
+import { post } from '@api/[sku]/[id]/item';
 
 export default () => {
   const addSku = () => {
-    post('0001'/* sku */, '1234' /* id */, {
-      query: { /* ... */ },
-      data: { /* ... */ },
-    })
-  }
+    post('0001' /* sku */, '1234' /* id */, {
+      query: {
+        /* ... */
+      },
+      data: {
+        /* ... */
+      },
+    });
+  };
 
-  return <div onClick={addSku}>添加 SKU</div>
-}
+  return <div onClick={addSku}>添加 SKU</div>;
+};
 ```
 
 之前提到，定义的函数都应该是异步的，是因为在前端调用时会自动转换成 HTTP 接口调用，所以为了保持类型定义与实际调用体验统一，需要在定义 BFF 函数时将它设置为异步。

package/zh/guides/advanced-features/bff/index.md

@@ -6,15 +6,15 @@ title: BFF
 
 它主要为了解决的问题包括：
 
-* 根据自身业务需求，对更底层 API 的聚合、映射、裁剪、代理。
-* 对一些特定场景的数据进行缓存，提高性能，进而提升用户体验。
-* 根据已有接口快速开发新产品。
-* 与第三方系统对接，例如登陆鉴权。
+- 根据自身业务需求，对更底层 API 的聚合、映射、裁剪、代理。
+- 对一些特定场景的数据进行缓存，提高性能，进而提升用户体验。
+- 根据已有接口快速开发新产品。
+- 与第三方系统对接，例如登陆鉴权。
 
 Modern.js 官方支持了 BFF，并提供了**一体化 BFF 方案**来进一步强化 BFF 能力，主要包括以下能力：
 
-* 快速开发调试上线，在同一项目中运行、构建、部署 BFF 代码。
-* 极简的纯函数调用，在前端直接 import BFF 函数，调用时能自动转换成 HTTP 请求。
-* 无私有协议，遵循 RESTful API 规范，所有 BFF 接口都是标准化的。
-* 完善的 TypeScript 支持。
-* 满足用户使用偏好，支持多框架扩展写法。
+- 快速开发调试上线，在同一项目中运行、构建、部署 BFF 代码。
+- 极简的纯函数调用，在前端直接 import BFF 函数，调用时能自动转换成 HTTP 请求。
+- 无私有协议，遵循 RESTful API 规范，所有 BFF 接口都是标准化的。
+- 完善的 TypeScript 支持。
+- 满足用户使用偏好，支持多框架扩展写法。

package/zh/guides/advanced-features/bff/type.md

@@ -40,4 +40,3 @@ export default hook(({ addMiddleware }) => {
 :::note
 不同插件框架写法的目录结构不一定相同，详情可见[运行时框架](/docs/guides/advanced-features/bff/frameworks)。
 :::
-

package/zh/guides/advanced-features/code-split.md

@@ -18,7 +18,7 @@ sidebar_position: 6
 使用动态 `import()` 语法，`import` 接收的 JS 模块将作为一个新的打包入口被打包到单独的 JS 文件中。例如：
 
 ```ts
-import("./math").then(math => {
+import('./math').then(math => {
   console.log(math.add(16, 26));
 });
 ```
@@ -60,12 +60,12 @@ function MyComponent() {
 使用 `loadable` API，示例如下：
 
 ```ts
-import loadable from '@modern-js/runtime/loadable'
+import loadable from '@modern-js/runtime/loadable';
 
 const OtherComponent = loadable(() => import('./OtherComponent'));
 
 function MyComponent() {
-  return <OtherComponent />
+  return <OtherComponent />;
 }
 ```
 

package/zh/guides/advanced-features/compatibility.md

@@ -10,7 +10,7 @@ Modern.js 支持在项目根目录 `package.json` 文件中的 `browserslist`
 Modern.js 中默认值如下:
 
 ```js
-['> 0.01%', 'not dead', 'not op_mini all']
+['> 0.01%', 'not dead', 'not op_mini all'];
 ```
 
 可以在[这里](https://github.com/browserslist/browserslist)了解如何自定义浏览器范围。
@@ -21,7 +21,6 @@ Modern.js 中默认值如下:
 Modern.js 支持配置 [output.overrideBrowserlist](/docs/configure/app/output/override-browserslist) 覆盖默认 browserlist 值。
 :::
 
-
 ## Polyfill
 
 ### 编译时 Polyfill
@@ -38,8 +37,8 @@ Modern.js 在编译时默认通过 [core-js](https://github.com/zloirock/core-js
 
 Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) 信息的运行时按需 Polyfill 方案，相比于 Babel 优势如下：
 
-* 不会插入到代码中，只根据访问页面的设备，按需下发 Polyfill 代码 ，减少整体代码体积。
-* 相同浏览器会公用一份 Polyfill 代码。因此，随着项目越来越多，基于 UA 的 Polyfill 代码下发速度会越来越快，综合速度超过常规方案。
+- 不会插入到代码中，只根据访问页面的设备，按需下发 Polyfill 代码 ，减少整体代码体积。
+- 相同浏览器会公用一份 Polyfill 代码。因此，随着项目越来越多，基于 UA 的 Polyfill 代码下发速度会越来越快，综合速度超过常规方案。
 
 可以通过微生成器开启该功能：
 
@@ -51,11 +50,11 @@ Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-C
 执行命令后，在 `modern.config.ts` 中注册 Polyfill 插件:
 
 ```ts title="modern.config.ts"
-import PolyfillPlugin from '@modern-js/plugin-polyfill';
+import polyfillPlugin from '@modern-js/plugin-polyfill';
+
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
-  ...,
-  plugins: [..., PolyfillPlugin()],
+  plugins: [..., polyfillPlugin()],
 });
 ```
 

package/zh/guides/advanced-features/eslint.md

@@ -31,7 +31,6 @@ pnpm run lint:error
 
 对于无法自动修复的问题，可以在 IDE 里点击问题提示框里的规则链接，打开这条规则的文档，查看问题的解释和解决方案。
 
-
 ### 声明例外情况
 
 目前阶段，有些规则并不能做到足够智能，多数情况下会有很大收益，在少数情况下也许不适用。但如果为了这些少数情况就把整个规则关掉或改掉，得不偿失。

package/zh/guides/advanced-features/index.md

@@ -5,8 +5,3 @@ type: ref
 # 进阶功能
 
 本节涵盖了使用应用工程的进阶功能。
-
-
-
-
-

package/zh/guides/advanced-features/low-level.md

@@ -9,14 +9,12 @@ Modern.js 内部默认集成了 [Babel](https://babeljs.io/)、[TypeScript](http
 
 以配置 Webpack 为例，只需要在 `modern.config.ts` 中添加 [`tools.webpack`](/docs/configure/app/tools/webpack) 即可：
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   tools: {
-    webpack: config => {
-
-    }
-  }
-})
+    webpack: config => {},
+  },
+});
 ```
 
 `tools` 命名空间下的配置都可以设置为 `Object` 或者 `Function`。
@@ -29,16 +27,16 @@ export default defineConfig({
 
 目前提供的底层配置如下表：
 
-| 底层工具 | 配置   |
-| -------- | --------- |
-| DevServer | [tools.devServer](/docs/configure/app/tools/dev-server) |
-| Babel | [tools.babel](/docs/configure/app/tools/babel)|
-| styled-components | [tools.styledComponents](/docs/configure/app/tools/styled-components)|
-| PostCSS | [tools.postcss](/docs/configure/app/tools/postcss)|
-| Less | [tools.less](/docs/configure/app/tools/less) |
-| Sass | [tools.sass](/docs/configure/app/tools/sass) |
-| webpack | [tools.webpack](/docs/configure/app/tools/webpack)|
-| Minify CSS | [tools.minifyCss](/docs/configure/app/tools/minify-css)|
-| terser | [tools.terser](/docs/configure/app/tools/terser)|
-| Tailwind CSS | [tools.tailwind](/docs/configure/app/tools/tailwindcss) |
-| Autoprefixer | [tools.autoprefixer](/docs/configure/app/tools/autoprefixer) |
+| 底层工具          | 配置                                                                  |
+| ----------------- | --------------------------------------------------------------------- |
+| DevServer         | [tools.devServer](/docs/configure/app/tools/dev-server)               |
+| Babel             | [tools.babel](/docs/configure/app/tools/babel)                        |
+| styled-components | [tools.styledComponents](/docs/configure/app/tools/styled-components) |
+| PostCSS           | [tools.postcss](/docs/configure/app/tools/postcss)                    |
+| Less              | [tools.less](/docs/configure/app/tools/less)                          |
+| Sass              | [tools.sass](/docs/configure/app/tools/sass)                          |
+| webpack           | [tools.webpack](/docs/configure/app/tools/webpack)                    |
+| Minify CSS        | [tools.minifyCss](/docs/configure/app/tools/minify-css)               |
+| terser            | [tools.terser](/docs/configure/app/tools/terser)                      |
+| Tailwind CSS      | [tools.tailwind](/docs/configure/app/tools/tailwindcss)               |
+| Autoprefixer      | [tools.autoprefixer](/docs/configure/app/tools/autoprefixer)          |

package/zh/guides/advanced-features/ssg.md

@@ -15,15 +15,14 @@ SSG（Static Site Generation）是一种基于数据与模板，在构建时渲
 执行命令后，在 `modern.config.ts` 中注册 SSG 插件：
 
 ```ts title="modern.config.ts"
-import SSGPlugin from '@modern-js/plugin-ssg';
+import ssgPlugin from '@modern-js/plugin-ssg';
+
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
-  ...,
   output: {
-    ...,
     ssg: true,
   },
-  plugins: [..., SSGPlugin()],
+  plugins: [..., ssgPlugin()],
 });
 ```
 
@@ -62,13 +61,13 @@ SSG 在**约定式路由**和**自控式路由**下的使用方式不同。
 
 ```jsx title="src/routes/page.tsx"
 export default () => {
-  return  <div>Index Page</div>
-}
+  return <div>Index Page</div>;
+};
 ```
 
 SSG 也是在 Node.js 环境渲染页面，因此我们可以在**开发阶段开启 SSR**，提前在暴露代码问题，验证 SSG 渲染效果：
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   server: {
     ssr: process.env.NODE_ENV === 'development',
@@ -112,14 +111,14 @@ export default () => {
 
 如果我们希望同时开启 `/about` 的 SSG 功能，可以配置 `output.ssg`，告知 Modern.js 开启指定路由的 SSG 功能。
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   output: {
     ssg: {
       routes: ['/', '/about'],
     },
   },
-})
+});
 ```
 
 执行 `pnpm run build` 与 `pnpm run serve` 后，访问 `http://localhost:8080/about`，在 Preview 视图中可以看到页面已经完成渲染。

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

@@ -33,7 +33,7 @@ export const loader = () => {
 export default () => {
   const data = useLoaderData();
   return <div>{data.message}</div>;
-}
+};
 ```
 
 Modern.js 打破传统的 SSR 开发模式，提供了用户无感的 SSR 开发体验。并且提供了优雅的降级处理，一旦 SSR 请求失败，会自动降级在浏览器端重新发起请求。
@@ -52,11 +52,7 @@ Modern.js 打破传统的 SSR 开发模式，提供了用户无感的 SSR 开发
 
 ```tsx
 {
-  typeof window !== 'undefined' ? (
-    <div>
-      browser content
-    </div>
-  ) : null;
+  typeof window !== 'undefined' ? <div>browser content</div> : null;
 }
 ```
 
@@ -82,9 +78,7 @@ import { NoSSR } from '@modern-js/runtime/ssr';
 
 ```tsx
 <NoSSR>
-  <div>
-    client content
-  </div>
+  <div>client content</div>
 </NoSSR>
 ```
 
@@ -201,8 +195,8 @@ document.addEventListener('load', () => {
   console.log('document load');
 });
 const App = () => {
-  return <div>Hello World</div>
-}
+  return <div>Hello World</div>;
+};
 export default App;
 ```
 

package/zh/guides/advanced-features/testing.md

@@ -18,11 +18,12 @@ Modern.js 默认继承了 [Jest](https://jestjs.io/) 的测试能力。
 在 `modern.config.ts` 中注册 Test 插件：
 
 ```ts title="modern.config.ts"
-import TestPlugin from '@modern-js/plugin-testing';
+import testPlugin from '@modern-js/plugin-testing';
+
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   ...,
-  plugins: [..., TestPlugin()],
+  plugins: [..., testPlugin()],
 });
 ```
 

package/zh/guides/advanced-features/web-server.md

@@ -19,11 +19,11 @@ Modern.js 作为以客户端为中心的开发框架，对服务端的定制能
 执行命令后，在 `modern.config.ts` 中注册 Server 插件:
 
 ```ts title="modern.config.ts"
-import ServerPlugin from '@modern-js/plugin-server';
+import serverPlugin from '@modern-js/plugin-server';
+
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
-  ...,
-  plugins: [..., ServerPlugin()],
+  plugins: [..., serverPlugin()],
 });
 ```
 
@@ -41,7 +41,6 @@ Hook 不可以使用运行时框架拓展。
 
 详细 API 可以查看 [Hook](/docs/apis/app/runtime/web-server/hook)。
 
-
 ### Middleware
 
 Middleware 可以为 Web Server 添加前置中间件，只有 SSR 请求会经过 Middleware 的处理。

package/zh/guides/basic-features/alias.md

@@ -41,26 +41,22 @@ Modern.js 也提供了自定义别名的方式，以添加 `@common` 别名为
 {
   "compilerOptions": {
     "paths": {
-      "@/*": [
-        "./src/*"
-      ],
-      "@/common/*": [
-        "./src/common/*"
-      ]
+      "@/*": ["./src/*"],
+      "@/common/*": ["./src/common/*"]
     }
-  },
+  }
 }
 ```
 
 JavaScript 项目可以在 `modern.config.js` 中配置 [`source.alias`](/docs/configure/app/source/alias)：
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   source: {
     alias: {
-      '@common': './src/common'
-    }
-  }
+      '@common': './src/common',
+    },
+  },
 });
 ```
 

package/zh/guides/basic-features/css/css-in-js.md

@@ -9,22 +9,22 @@ CSS-in-JS 是一种可以将 CSS 样式写在 JS 文件里的技术。Modern.js
 当需要编写一个内部字体为红色的 `div` 组件时，可以如下实现：
 
 ```js
-import styled from '@modern-js/runtime/styled'
+import styled from '@modern-js/runtime/styled';
 
 const RedDiv = styled.div`
   color: red;
-`
+`;
 ```
 
 当需要根据组件的 `props` 动态设置组件样式时，例如 `props` 的属性 `primary` 为 `true` 时，按钮的颜色为白色，其他情况为红色，实现代码如下：
 
 ```js
-import styled from '@modern-js/runtime/styled'
+import styled from '@modern-js/runtime/styled';
 
 const Button = styled.button`
-  color: ${props => props.primary ? "white" : "red"};
+  color: ${props => (props.primary ? 'white' : 'red')};
   font-size: 1em;
-`
+`;
 ```
 
 关于 styled-components 的更多用法，请参考【[styled-components 官网](https://styled-components.com/)】。

package/zh/guides/basic-features/css/css-modules.md

@@ -33,7 +33,7 @@ export default function Button() {
 ```js
 <button type="button" className="button_redColor__1-RBg">
   red button
-</button>;
+</button>
 ```
 
 ## 全面启用 CSS Modules
@@ -74,7 +74,7 @@ export default function Button() {
 ```js
 <button type="button" className="button__redColor--JsFYl bg-blue">
   button
-</button>;
+</button>
 ```
 
 最终效果如下：