@modern-js/main-doc 2.0.3-alpha.0 → 2.1.0

package/zh/apis/app/runtime/ssr/pre-render.md

@@ -13,7 +13,7 @@ export default () => (
   <>
     <PreRender interval={5} />
   </>
-)
+);
 ```
 
 ## 函数签名
@@ -59,7 +59,7 @@ export default function App() {
       <PreRender interval={10} />
       <div>Hello Modern</div>
     </>
-  )
+  );
 }
 ```
 
@@ -67,10 +67,14 @@ export default function App() {
 
 ```tsx
 /* 使用 query 中的 channel 和 header 中的 language 计算缓存标识 */
-<PreRender interval={10} level={2} includes={{
-  query: ["channel"],
-  header: ["language"]
-}} />
+<PreRender
+  interval={10}
+  level={2}
+  includes={{
+    query: ['channel'],
+    header: ['language'],
+  }}
+/>
 ```
 
 下面例子展示了如何不让测试频道影响线上缓存：

package/zh/apis/app/runtime/testing/cleanup.md

@@ -18,10 +18,10 @@ import { cleanup } from '@modenr-js/runtime/testing';
 ## 示例
 
 :::info 注
-请注意，如果你使用的测试框架支持 afterEach，并且它被注入到你的测试环境中（如mocha、Jest和Jasmine），**会默认在 afterEach 钩子里执行 `cleanup`**。否则，你将需要在每次测试后进行手动清理。
+请注意，如果你使用的测试框架支持 afterEach，并且它被注入到你的测试环境中（如 mocha、Jest 和 Jasmine），**会默认在 afterEach 钩子里执行 `cleanup`**。否则，你将需要在每次测试后进行手动清理。
 :::
 
-例如，如果你使用[ava](https://github.com/avajs/ava)测试框架，那么你需要像这样使用test.afterEach钩子。
+例如，如果你使用[ava](https://github.com/avajs/ava)测试框架，那么你需要像这样使用 test.afterEach 钩子。
 
 ```tsx
 import { cleanup, render } from '@modern-js/runtime/testing';

package/zh/apis/app/runtime/testing/render.md

@@ -44,7 +44,6 @@ function render(ui: React.ReactElement<any>, options: Options): RenderResult;
   - `wrapper`：是一个 react 组件，可用于自定义渲染逻辑。
   - `queries`：自定义一些自己的 `queries`。
 
-
 ### 返回值
 
 - `{...queries}`：所有可用的 [queries](https://testing-library.com/docs/queries/about/)。
@@ -55,7 +54,6 @@ function render(ui: React.ReactElement<any>, options: Options): RenderResult;
 - `unmount`：会卸载掉已渲染的组件。如果想测试组件卸载后的情况（如，绑定的事件是否在 unmount 阶段被卸载掉），那么这个 API 是很帮助的。
 - `asFragment`：返回当前渲染的组件的 [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) 对象。可用于测试 react 事件触发后 DOM 结构的响应。
 
-
 ## 示例
 
 ```ts

package/zh/apis/app/runtime/utility/css-in-js.md

@@ -30,7 +30,7 @@ const TomatoButton = styled(Button)`
   background: tomato;
 `;
 
-function ButtonExample(){
+function ButtonExample() {
   return (
     <>
       <Button>I'm purple.</Button>
@@ -38,5 +38,5 @@ function ButtonExample(){
       <TomatoButton>I'm red.</TomatoButton>
     </>
   );
-};
+}
 ```

package/zh/apis/app/runtime/utility/head.md

@@ -9,9 +9,7 @@ title: Head
 ```tsx
 import { Helmet } from '@modern-js/runtime/head';
 
-export default () => (
-  <Helmet>...</Helmet>
-)
+export default () => <Helmet>...</Helmet>;
 ```
 
 ## 示例
@@ -28,10 +26,10 @@ function IndexPage() {
       </Helmet>
       <p>Hello Modern.js!</p>
     </div>
-  )
+  );
 }
 
-export default IndexPage
+export default IndexPage;
 ```
 
 ## 更多用法

package/zh/apis/app/runtime/utility/loadable.md

@@ -34,7 +34,7 @@ function loadable(loadFn: Function, options?: Options) => LoadableComponent
 ```ts
 import loadable from '@modern-js/runtime/loadable';
 
-const OtherComponent = loadable(() => import('./OtherComponent'))
+const OtherComponent = loadable(() => import('./OtherComponent'));
 ```
 
 #### options.resolveComponent
@@ -44,20 +44,20 @@ const OtherComponent = loadable(() => import('./OtherComponent'))
 `module` 为 `loadFn` 返回的组件，`props` 是 loadable 返回的组件接受的 props 参数。默认的话，我们认为 `import` 的文件都是默认导出 react 组件，这时候直接渲染该组件即可。但当组件是具名导出的，或者我们需要根据具体的 `props` 动态判断需要渲染哪个组件的时候，可以使用 `resolveComponent` 来实现。下面是一个示例：
 
 ```ts title='component.js'
-export const Apple = () => 'Apple!'
-export const Orange = () => 'Orange!'
+export const Apple = () => 'Apple!';
+export const Orange = () => 'Orange!';
 ```
 
 ```ts title='loadable.js'
 const LoadableApple = loadable(() => import('./components'), {
-  resolveComponent: (components) => components.Apple,
-})
+  resolveComponent: components => components.Apple,
+});
 const LoadableOrange = loadable(() => import('./components'), {
-  resolveComponent: (components) => components.Orange,
-})
+  resolveComponent: components => components.Orange,
+});
 const LoadableFruit = loadable(() => import('./components'), {
   resolveComponent: (components, props) => components[props.fruit],
-})
+});
 ```
 
 #### options.fallback
@@ -73,11 +73,10 @@ const LoadableFruit = loadable(() => import('./components'), {
 #### LoadableComponent
 
 ```ts
-type LoadableComponent<Props> =
-  React.ComponentType<
-    Props & { fallback?: JSX.Element; }>
-  & {
-    preload(props?: Props): void;
-    load(props?: Props): Promise<React.ComponentType<Props>>;
-  }
+type LoadableComponent<Props> = React.ComponentType<
+  Props & { fallback?: JSX.Element }
+> & {
+  preload(props?: Props): void;
+  load(props?: Props): Promise<React.ComponentType<Props>>;
+};
 ```

package/zh/apis/app/runtime/web-server/hook.md

@@ -13,8 +13,8 @@ title: Hook
 ```ts
 import { AfterMatchHook, AfterRenderHook } from '@modern-js/runtime/server';
 
-export const afterMatch: AfterMatchHook = (context, next) => {}
-export const afterRender: AfterRenderHook = (context, next) => {}
+export const afterMatch: AfterMatchHook = (context, next) => {};
+export const afterRender: AfterRenderHook = (context, next) => {};
 ```
 
 :::info 自定义 Web Server
@@ -25,6 +25,7 @@ pnpm run new
 ? 请选择你想要的操作 创建工程元素
 ? 新建「自定义 Web Server」源码目录
 ```
+
 :::
 
 ## 函数签名
@@ -69,7 +70,7 @@ type AfterMatchContext = HookContext & {
     redirect: (url: string, status: number) => void;
     rewrite: (entry: string) => void;
   };
-}
+};
 
 type AfterRenderContext = {
   template: {
@@ -127,5 +128,5 @@ import type { AfterRender } from '@modern-js/runtime/server';
 
 export const afterRender: AfterRenderHook = (context, next) => {
   ctx.template.prependBody('<div>Footer</div>');
-}
+};
 ```

package/zh/apis/app/runtime/web-server/middleware.md

@@ -15,11 +15,11 @@ title: Middleware
 ```ts
 import { Middleware } from '@modern-js/runtime/server';
 
-export const middleware: Middleware = async (context, next) => {}
+export const middleware: Middleware = async (context, next) => {};
 export const middleware: Middleware[] = [
   async (context, next) => {},
   async (context, next) => {},
-]
+];
 ```
 
 :::info 自定义 Web Server
@@ -30,6 +30,7 @@ pnpm run new
 ? 请选择你想要的操作 创建工程元素
 ? 新建「自定义 Web Server」源码目录
 ```
+
 :::
 
 ## 函数签名
@@ -69,10 +70,12 @@ type MiddlewareContext = {
   };
 };
 
-type RequestHandler = (context: Context, next: NextFunction) => Promise<void> | void;
+type RequestHandler = (
+  context: Context,
+  next: NextFunction,
+) => Promise<void> | void;
 ```
 
-
 ### 参数
 
 - `context`：提供当前 Hook 上下文。
@@ -91,7 +94,7 @@ export const Middleware = () => async (ctx, next) => {
   ctx.res.once('finish', () => {
     console.log(Date.now() - start);
   });
-}
+};
 ```
 
 ### 注入服务端工具 & 数据
@@ -104,4 +107,3 @@ export const Middleware = () => async (ctx, next) => {
   ctx.res.locals.rpc = createRpcInstance();
 });
 ```
-

package/zh/apis/monorepo/commands/bump.md

@@ -31,10 +31,10 @@ npx modern bump
 # package-a
 
 ## 0.1.1
+
 ### Patch Changes
 
 - test publish
-
 ```
 
 import CommandTip from '@site-docs/components/command-tip.md'

package/zh/apis/monorepo/commands/change.md

@@ -42,12 +42,13 @@ $ npx modern change
 🦋  If you want to modify or expand on the changeset summary, you can find it here
 🦋  info /xxxx/monorepo/.changeset/long-lizards-talk.md
 ```
+
 上面我们给 `package-a` 和 `package-b` 都选择了 `patch` 变更，具体的变更信息在 monorepo 根目录下的 `.changeset/long-lizards-talk.md` 中:
 
 ```md
 ---
-"package-a": patch
-"package-b": patch
+'package-a': patch
+'package-b': patch
 ---
 
 test publish

package/zh/apis/monorepo/commands/gen-release-note.md

@@ -19,7 +19,7 @@ Options:
 需要在 bump 命令之前执行。
 :::
 
-``` markdown
+```markdown
 ## Features:
 
 [[#1160](https://github.com/modern-js-dev/modern.js/pull/1160)] export ExecaError type
@@ -27,7 +27,6 @@ Options:
 ## Bug Fix:
 
 [[#1264](https://github.com/modern-js-dev/modern.js/pull/1264)] fix: conventional router app use App.init not work
-
 ```
 
 import CommandTip from '@site-docs/components/command-tip.md'

package/zh/apis/monorepo/commands/index.md

@@ -4,9 +4,4 @@ type: ref
 
 # 命令
 
-本节涵盖了使用Monorepo工程的所有命令。
-
-
-
-
-
+本节涵盖了使用 Monorepo 工程的所有命令。

package/zh/apis/monorepo/commands/lint.md

@@ -18,4 +18,4 @@ import CommandTip from '@site-docs/components/command-tip.md'
 
 运行 `ESLint` 检查 monorepo 中代码语法情况， 通长情况下，我们只需要在 `git commit` 阶段通过 `lint-staged` 检查本次提交修改的部分代码。
 
-* `--no-fix` 参数设置后可以关闭自动修复 lint 错误代码的能力。
+- `--no-fix` 参数设置后可以关闭自动修复 lint 错误代码的能力。

package/zh/apis/monorepo/commands/release.md

@@ -2,7 +2,6 @@
 sidebar_position: 5
 ---
 
-
 ```bash
 Usage: modern release [options]
 

package/zh/apis/monorepo/hooks/index.md

@@ -4,9 +4,4 @@ type: ref
 
 # 命令
 
-本节涵盖了使用Monorepo工程所有的文件约定
-
-
-
-
-
+本节涵盖了使用 Monorepo 工程所有的文件约定

package/zh/components/command-tip.md

@@ -15,7 +15,7 @@ pnpm run --filter "./packages/**" prepare
 
 例如，在如下 `package.json` 配置中：
 
-``` json
+```json
 {
   "scripts": {
     "command": "modern command"
@@ -24,6 +24,7 @@ pnpm run --filter "./packages/**" prepare
 ```
 
 执行 command 命令时携带参数方式为：
+
 ```bash
 pnpm run command --options
 ```
@@ -32,7 +33,7 @@ pnpm v6:
 
 在如下 `package.json` 配置中：
 
-``` json
+```json
 {
   "scripts": {
     "command": "modern command"

package/zh/components/enable-bff.md

@@ -7,30 +7,26 @@ import TabItem from '@theme/TabItem';
 <Tabs>
   <TabItem value="express" label="Express.js" default>
 
-```ts title="modern.config.ts"
-import ExpressPlugin from '@modern-js/plugin-express';
-import BffPlugin from '@modern-js/plugin-bff';
+```ts title="edenx.config.ts"
+import expressPlugin from '@edenx/plugin-express';
+import bffPlugin from '@edenx/plugin-bff';
 
 export default defineConfig({
-  plugins: [
-    ExpressPlugin(),
-    BffPlugin()
-  ]
-})
+  plugins: [expressPlugin(), bffPlugin()],
+});
 ```
+
   </TabItem>
   <TabItem value="koa" label="Koa.js">
 
-```ts title="modern.config.ts"
-import KoaPlugin from '@modern-js/plugin-koa';
-import BffPlugin from '@modern-js/plugin-bff';
+```ts title="edenx.config.ts"
+import koaPlugin from '@edenx/plugin-koa';
+import bffPlugin from '@edenx/plugin-bff';
 
 export default defineConfig({
-  plugins: [
-    KoaPlugin(),
-    BffPlugin()
-  ]
-})
+  plugins: [koaPlugin(), bffPlugin()],
+});
 ```
+
   </TabItem>
 </Tabs>

package/zh/components/enable-micro-frontend.md

@@ -1,6 +1,6 @@
-```javascript title="modern.config.ts"
-import AppToolPlugin, { defineConfig } from '@modern-js/app-tools';
-import GarfishPlugin from '@modern-js/plugin-garfish';
+```js title="modern.config.ts"
+import appTools, { defineConfig } from '@modern-js/app-tools';
+import garfishPlugin from '@modern-js/plugin-garfish';
 
 export default defineConfig({
   runtime: {
@@ -8,6 +8,6 @@ export default defineConfig({
     state: true,
     masterApp: true,
   },
-  plugins: [AppToolPlugin(), GarfishPlugin()],
+  plugins: [appTools(), garfishPlugin()],
 });
 ```

package/zh/components/global-proxy-config.md

@@ -1,9 +1,8 @@
-* 类型： `string | Object`
-* 默认值： `null`
+- 类型： `string | Object`
+- 默认值： `null`
 
 配置该选项后，开发环境时会启动全局代理，类似 [Fiddler](https://www.telerik.com/fiddler), [Charles](https://www.charlesproxy.com/) 等 web 代理调试工具，可以用来查看、修改 HTTP/HTTPS 请求、响应、也可以用作代理服务器。
 
-
 :::tip 提示
 使用该选项需要提前安装 `@modern-js/plugin-proxy`。
 :::
@@ -12,22 +11,21 @@
 
 例如：
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   dev: {
     proxy: {
       'https://www.baidu.com': 'https://google.com.hk',
       //可以通过 file 协议直接返回静态文件。
       'https://example.com/api': 'file://./data.json',
-    }
-  }
+    },
+  },
 });
 ```
 
 值为 `string` 时， 可以用来指定单独的代理文件，例如：
 
-
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   dev: {
     proxy: './proxy.js',
@@ -67,4 +65,3 @@ Modern.js 全局代理实现底层基于 [whistle](https://wproxy.org/whistle/),
 :::caution 注意
 https 代理自动安装证书需要获取 root 权限, 请根据提示输入密码即可。**密码仅在信任证书时使用，不会泄漏或者用于其他环节**。
 :::
-

package/zh/components/global-proxy.md

@@ -1,4 +1,3 @@
-
 Modern.js 提供了开箱即用的全局代理插件 `@modern-js/plugin-proxy`，该插件底层基于 [whistle](https://github.com/avwo/whistle)，可用来查看、修改 HTTP/HTTPS 的请求和响应，也可作为 HTTP 代理服务器使用。
 
 ### 设置代理规则

package/zh/components/init-app.md

@@ -1,4 +1,3 @@
-
 Modern.js 生成器会提供一个可交互的问答界面，根据结果初始化项目，按照默认的选择进行初始化：
 
 ```bash

package/zh/components/micro-master-manifest-config.md

@@ -2,7 +2,7 @@
 
 ```ts
 interface Manifest {
-  getAppList?: ()=> Array<AppInfo>
+  getAppList?: () => Array<AppInfo>;
 }
 ```
 
@@ -11,5 +11,5 @@ interface Manifest {
 通过 `getAppList` 配置，可以自定义如何获取远程列表数据
 
 ```ts
-type GetAppList = ()=> Promise<Array<AppInfo>>;
+type GetAppList = () => Promise<Array<AppInfo>>;
 ```

package/zh/components/micro-runtime-config.md

@@ -1,4 +1,4 @@
-```javascript title="src/App.tsx"
+```js title="src/App.tsx"
 import { defineConfig } from '@modern-js/runtime';
 
 defineConfig(App, {

package/zh/components/reduck-migration.md

@@ -1 +0,0 @@
-

package/zh/components/router-legacy-tip.md

@@ -1 +0,0 @@
-

package/zh/configure/app/auto-load-plugin.md

@@ -10,16 +10,15 @@ sidebar_position: 11
 
 ### 手动注册插件
 
-默认情况下，安装插件后需要你在 `modern.config.ts` 文件中手动注册插件。
+默认情况下，安装插件后，你需要在 `modern.config.ts` 文件中手动注册插件。
 
 ```ts title="modern.config.ts"
-import AppToolsPlugin, { defineConfig } from '@modern-js/app-tools';
-import I18nPlugin from '@modern-js/plugin-i18n';
-
-default export defineConfig({
-  plugins: [AppToolsPlugin(), I18nPlugin()]
-})
+import appTools, { defineConfig } from '@modern-js/app-tools';
+import i18nPlugin from '@modern-js/plugin-i18n';
 
+export default defineConfig({
+  plugins: [appTools(), i18nPlugin()],
+});
 ```
 
 ### 自动注册插件
@@ -29,9 +28,9 @@ default export defineConfig({
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
 
-default export defineConfig({
-  autoLoadPlugins: true
-})
+export default defineConfig({
+  autoLoadPlugins: true,
+});
 ```
 
 Modern.js 将通过以下几个步骤帮你自动注册插件

package/zh/configure/app/bff/prefix.md

@@ -4,10 +4,8 @@ sidebar_label: prefix
 
 # bff.prefix
 
-
-
-* 类型：`string`
-* 默认值：`/api`
+- 类型：`string`
+- 默认值：`/api`
 
 :::caution 注意
 请先在当前应用项目根目录使用【[new](/docs/apis/app/commands/new)】 启用 BFF 功能。
@@ -22,16 +20,14 @@ api
 
 `api/hello.ts` 访问时对应的路由为 `localhost:8080/api/hello`。
 
-
 该配置选项可以修改默认的路由前缀：
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   bff: {
-    prefix: '/api-demo'
-  }
-})
+    prefix: '/api-demo',
+  },
+});
 ```
 
 对应的 `api/hello.ts` 访问路由为 `localhost:8080/api-demo/hello`。
-

package/zh/configure/app/bff/proxy.md

@@ -4,8 +4,8 @@ sidebar_label: proxy
 
 # bff.proxy
 
-* 类型：`Record<string, string>`
-* 默认值：`{}`
+- 类型：`Record<string, string>`
+- 默认值：`{}`
 
 :::info 补充信息
 请先在当前应用项目根目录使用【[new](/docs/apis/app/commands/new)】 启用 BFF 功能。
@@ -21,16 +21,17 @@ import { defineConfig } from '@modern-js/app-tools/server';
 export default defineConfig({
   bff: {
     proxy: {
-      "/api": "https://cnodejs.org"
-    }
-  }
-})
+      '/api': 'https://cnodejs.org',
+    },
+  },
+});
 ```
+
 假设启动的 Modern.js BFF server 的服务地址是 `localhost:8080`，所有 path 以 `api` 开头的请求都会被拦截，如发送到 `localhost:8080/api/v1/topics` 的请求会被代理到 `https://cnodejs.org/api/v1/topics`。
 
 你可以做路径的重写，如将发送到 `localhost:8080/api/topics` 的请求代理到 `https://cnodejs.org/api/v1/topics`。
 
-```typescript title="modern.server-runtime.config.ts"
+```ts title="modern.server-runtime.config.ts"
 import { defineConfig } from '@modern-js/app-tools/server';
 export default defineConfig({
   bff: {
@@ -60,7 +61,7 @@ BFF proxy 模式下，如果不需要写 BFF 的接口， API 目录可以删除
 
 如下所示，在 `modern.server-runtime.config.ts` 中，写入如下配置；我们将所有 web 页面发送到同域的以 `/api` 开头的请求代理到另一个域名的服务上。
 
-```typescript title="modern.server-runtime.config.ts"
+```ts title="modern.server-runtime.config.ts"
 export default defineServerConfig({
   bff: {
     proxy: {

package/zh/configure/app/builder-plugins.md

@@ -35,10 +35,10 @@ Modern.js Builder 是 Modern.js 底层的构建引擎，请阅读 [构建能力]
 使用 npm 上的插件，需要通过包管理器安装插件，并通过 import 引入。
 
 ```ts title="modern.config.ts"
-import MyBuilderPlugin from 'my-builder-plugin';
+import myBuilderPlugin from 'my-builder-plugin';
 
 export default defineConfig({
-  builderPlugins: [MyBuilderPlugin()],
+  builderPlugins: [myBuilderPlugin()],
 });
 ```
 
@@ -47,10 +47,10 @@ export default defineConfig({
 使用本地代码仓库中的插件，直接通过相对路径 import 引入即可。
 
 ```ts title="modern.config.ts"
-import MyBuilderPlugin from './plugin/myBuilderPlugin';
+import myBuilderPlugin from './plugin/myBuilderPlugin';
 
 export default defineConfig({
-  builderPlugins: [MyBuilderPlugin()],
+  builderPlugins: [myBuilderPlugin()],
 });
 ```
 
@@ -59,11 +59,11 @@ export default defineConfig({
 如果插件提供了一些自定义的配置项，可以通过插件函数的参数传入配置。
 
 ```ts title="modern.config.ts"
-import MyBuilderPlugin from 'my-builder-plugin';
+import myBuilderPlugin from 'my-builder-plugin';
 
 export default defineConfig({
   builderPlugins: [
-    MyBuilderPlugin({
+    myBuilderPlugin({
       foo: 1,
       bar: 2,
     }),