@modern-js/main-doc 2.0.2 → 2.1.0

package/zh/guides/topic-detail/generator/codesmith/run-in-js.md

@@ -2,7 +2,6 @@
 sidebar_position: 4
 ---
 
-
 # 使用 JS 代码执行微生成器
 
 除了使用 cli 的方式执行微生成器，我们免不了需要在代码中执行微生成器，下面就介绍在 js 代码中如何执行微生成器。
@@ -15,17 +14,17 @@ pnpm add @modern-js/codesmith
 
 ## 创建 codesmith 实例
 
-```typescript
+```ts
 import { CodeSmith, Logger } from '@modern-js/codesmith';
 
 const smith = new CodeSmith({
-   debug: false, // 是否开启 debug 模式，为 true 时会展示生成器中的 debug 信息
+  debug: false, // 是否开启 debug 模式，为 true 时会展示生成器中的 debug 信息
 });
 ```
 
 ## 调用 forge 方法执行生成器
 
-```typescript
+```ts
 type RunnerTask = Array<{
   name: string;
   config: Record<string, any>;
@@ -33,7 +32,7 @@ type RunnerTask = Array<{
 
 const task: RunnerTask = [
   {
-    name: "generator", // 生成器 npm 包名称
+    name: 'generator', // 生成器 npm 包名称
     config: {}, // 生成器执行的默认配置
   },
 ];

package/zh/guides/topic-detail/generator/codesmith/structure.md

@@ -14,10 +14,11 @@ npm 包描述信息，包含 name、version、main 等字段。
 
 上述 main 字段对应的 js 文件。文件为默认导出一个生成器函数，函数格式如下：
 
-```typescript
-export default async (context: GeneratorContext, generator: GeneratorCore) => {
-
-};
+```ts
+export default async (
+  context: GeneratorContext,
+  generator: GeneratorCore,
+) => {};
 ```
 
 该函数参数为 context 和 generator：
@@ -26,12 +27,12 @@ export default async (context: GeneratorContext, generator: GeneratorCore) => {
 
 context 提供 codesmith 运行时维护的上下文信息。其类型定义为：
 
-```typescript
+```ts
 interface GeneratorContext {
   materials: Record<string, FsMaterial>; // 资源
   config: Record<string, any>; // 用户 config 配置
   data?: Record<string, any>; // 用户 data 配置
-  current: { material: FsMaterial; } | null; //  当前生成器运行可获取的文件资源
+  current: { material: FsMaterial } | null; //  当前生成器运行可获取的文件资源
   [key: string]: any; // 其他补充字段
 }
 ```
@@ -42,8 +43,10 @@ materials 中还维护这一个 default 的映射关系，用于维护当前生
 
 例如当需要修改当前项目的 `package.json` 中的字段:
 
-```typescript
-const resource = context.materials.default.get(path.join(appDir, 'package.json'))
+```ts
+const resource = context.materials.default.get(
+  path.join(appDir, 'package.json'),
+);
 ```
 
 将获取到的 resource 传递给 codesmith 提供的 JSON API 即可实现 json 操作。
@@ -54,7 +57,7 @@ FsMaterial 中提供了 get 方法用于获取资源文件并将资源文件传
 
 例如：
 
-```typescript
+```ts
 const resourceMap = await material.find('templates/**/*');
 ```
 
@@ -64,7 +67,7 @@ const resourceMap = await material.find('templates/**/*');
 
 generator 提供 codesmith 运行时的函数方法。其类型定义为：
 
-```typescript
+```ts
 interface GeneratorCore {
     logger: Logger; // log 函数，支持 info、warning、debug、error、verbose、stream
     outputPath: string; // 输出文件路径

package/zh/guides/topic-detail/generator/config/common.md

@@ -42,7 +42,6 @@ scenes 配置只能在 `@modern-js/create` 的 `--config` 参数中使用，不
 
 - Yarn(yarn)
 
-
 :::info
 在生成器插件创建工程方案场景的自定义类型(custom)中，默认只提供了 `packageManager` 配置。
 :::
@@ -51,56 +50,48 @@ scenes 配置只能在 `@modern-js/create` 的 `--config` 参数中使用，不
 
 ### noNeedInstall
 
-* Type: Boolean
-
-* Default: false
+- Type: `boolean`
+- Default: `false`
 
 是否跳过依赖安装。
 
 ### noNeedGit
 
-* Type: Boolean
-
-* Default: false
+- Type: `boolean`
+- Default: `false`
 
 是否跳过 git 初始化和提交初始 commit。
 
 ### successInfo
 
-* Type: String
-
-* Default: 不同工程方案的命令操作提示
+- Type: `string`
+- Default: 不同工程方案的命令操作提示
 
 自定义创建项目成功的提示信息。
 
 ### isMonorepoSubProject
 
-* Type: Boolean
-
-* Default: false
+- Type: `boolean`
+- Default: `false`
 
 是否为 Monorepo 子项目。
 
 ### isTest
 
-* Type: Boolean
+- Type: `boolean`
+- Default: `false`
 
-   - true: 创建到路径 `examples/`
+作用于应用项目，标识是否为测试项目。
 
-   - false: 创建到路径 `apps/`
-
-* Default: false
-
-作用于 `应用(MWA)` 项目，标识是否为测试项目。
+- `true`: 创建到路径 `examples/`
+- `false`: 创建到路径 `apps/`
 
 ### isPublic
 
-* Type: Boolean
-
-   - true: 创建到路径 `packages/`
-
-   - false: 创建到路径 `features/`
+- Type: `boolean`
+- Default: `false`
 
-* Default: false
+作用于模块 (Module) 项目，标识是否需要对外发布。
 
-作用于 `模块(Module)` 项目，标识是否需要对外发布。
+- `true`: 创建到路径 `packages/`
+- `false`: 创建到路径 `features/`

package/zh/guides/topic-detail/generator/plugin/abstract.md

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # 为什么需要生成器插件
 
-Modern.js 提供了应用(MWA)、模块和 Monorepo 三种工程方案，并通过使用 `@modern-js/create` 工具可以创建三种工程方案的初始项目模板，初始项目模板会提供基本的代码开发环境、简单的示例代码及配置等。
+Modern.js 提供了应用、模块和 Monorepo 三种工程方案，并通过使用 `@modern-js/create` 工具可以创建三种工程方案的初始项目模板，初始项目模板会提供基本的代码开发环境、简单的示例代码及配置等。
 
 Modern.js 提供的初始化模板具有通用性，能满足一些通用的项目开发需求。
 

package/zh/guides/topic-detail/generator/plugin/api/file/introduce.md

@@ -27,6 +27,7 @@ sidebar_position: 1
 生成器插件的文件操作 API 将是针对这四种文件类型进行操作。
 
 其类型定义为：
+
 ```ts
 export enum FileType {
   Text = 'text',

package/zh/guides/topic-detail/generator/plugin/api/file/updateJSONFile.md

@@ -36,16 +36,16 @@ JSON 文件的文件名或者文件路径。
 
 ```ts
 api.updateJSONFile(file, {
-    name: "新名称"
-})
+  name: '新名称',
+});
 ```
 
 需更新嵌套字段：
 
 ```ts
 api.updateJSONFile(file, {
-  "dependencies.name": "新名称"
-})
+  'dependencies.name': '新名称',
+});
 ```
 
 :::warning

package/zh/guides/topic-detail/generator/plugin/api/info/locale.md

@@ -14,4 +14,4 @@ sidebar_position: 1
 
 - en: 英文
 
-生成器插件中可根据该字段调整相关展示字段的值。
+生成器插件中可根据该字段调整相关展示字段的值。

package/zh/guides/topic-detail/generator/plugin/api/input/addInputAfter.md

@@ -42,7 +42,7 @@ context.addInputAfter('packageManager', {
       ],
     },
   },
-})
+});
 ```
 
 :::info
@@ -50,7 +50,7 @@ context.addInputAfter('packageManager', {
 
 1. 添加问题的 key 不能和 Modern.js 提供的项目类型自身的问题的 key 重复
 
-2. 添加问题 `addInputAfter` 的优先级高于 `addInputBefore`，当同时对一个 `key` 添加 After 问题和对其后一个key 添加 Before 问题时，After 问题会在 Before 之前。
+2. 添加问题 `addInputAfter` 的优先级高于 `addInputBefore`，当同时对一个 `key` 添加 After 问题和对其后一个 key 添加 Before 问题时，After 问题会在 Before 之前。
 
 3. 当需要在相同 `key` 前面或者后面添加多个问题时，可多次调用该方法，问题的顺序会按照调用顺序进行排列。
 :::

package/zh/guides/topic-detail/generator/plugin/api/input/addInputBefore.md

@@ -42,15 +42,14 @@ context.addInputBefore('packageManager', {
       ],
     },
   },
-})
+});
 ```
 
-:::info
-注意事项
+:::info 注意事项
 
 1. 添加问题的 key 不能和 Modern.js 提供的项目类型自身的问题的 key 重复
 
-2. 添加问题 `addInputAfter` 的优先级高于 `addInputBefore`，当同时对一个 `key` 添加 After 问题和对其后一个key 添加 Before 问题时，After 问题会在 Before 之前。
+2. 添加问题 `addInputAfter` 的优先级高于 `addInputBefore`，当同时对一个 `key` 添加 After 问题和对其后一个 key 添加 Before 问题时，After 问题会在 Before 之前。
 
 3. 当需要在相同 `key` 前面或者后面添加多个问题时，可多次调用该方法，问题的顺序会按照调用顺序进行排列。
 :::

package/zh/guides/topic-detail/generator/plugin/api/input/setInput.md

@@ -38,5 +38,5 @@ export interface IPluginContext {
 修改 packageName 的展示名称
 
 ```ts
-context.setInput('packageName', 'title', "展示名称");
+context.setInput('packageName', 'title', '展示名称');
 ```

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

@@ -48,7 +48,7 @@ schema 字段联动。这里支持 Formily 的联动方式，具体可参考 [Fo
 
 ## 示例
 
-```typescript
+```ts
 const schema = {
   type: 'object',
   properties: {

package/zh/guides/topic-detail/generator/plugin/api/introduce.md

@@ -27,7 +27,6 @@ Modern.js 支持通过生成器插件的方式对提供的工程方案进行定
 
 `templates` 目录为模板目录，用于存在生成器插件中需要使用的模板文件。
 
-
 ## 生成器插件分类
 
 生成器插件分为两种：
@@ -44,9 +43,9 @@ Modern.js 支持通过生成器插件的方式对提供的工程方案进行定
 
 ```json
 {
-    "meta": {
-        "extend": "mwa"
-    }
+  "meta": {
+    "extend": "mwa"
+  }
 }
 ```
 
@@ -56,11 +55,11 @@ Modern.js 支持通过生成器插件的方式对提供的工程方案进行定
 
 ```json
 {
-    "meta": {
-        "key": "new_solution",
-        "name": "新工程方案",
-        "type": "mwa"
-    }
+  "meta": {
+    "key": "new_solution",
+    "name": "新工程方案",
+    "type": "mwa"
+  }
 }
 ```
 

package/zh/guides/topic-detail/generator/plugin/develop.md

@@ -52,7 +52,7 @@ npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
 
 插件默认导出一个函数，函数参数为 `context`，`context` 上提供一些方法可直接对当前项目进行操作。
 
-简单介绍一下提供的方法，完整的 API 列表可查看[生成器插件API](/docs/guides/topic-detail/generator/plugin/api/introduce)。
+简单介绍一下提供的方法，完整的 API 列表可查看[生成器插件 API](/docs/guides/topic-detail/generator/plugin/api/introduce)。
 
 ### 自定义输入
 
@@ -77,8 +77,8 @@ context.addInputBefore('input2', {
 设置已经存在问题的属性
 
 ```ts
-context.setInput('test', 'type', 'number')
-context.setInput('test', 'enum', [{ value: 'option1', label: '选项一' }])
+context.setInput('test', 'type', 'number');
+context.setInput('test', 'enum', [{ value: 'option1', label: '选项一' }]);
 ```
 
 ### onForged
@@ -93,18 +93,18 @@ context.setInput('test', 'enum', [{ value: 'option1', label: '选项一' }])
 
 当需要新的模板文件时，可直接在 `templates` 目录添加，在 `onForged` 函数中可直接对 `templates` 目录文件进行操作，比如下方的 `addFile` 中 `templateFile` 参数就为 `templates` 目录下的文件。这里不需要显示的声明 `templates`，直接写相对于 `templates` 的相对路径即可。
 
-`onForged` 中支持的 API 函数也可参考 [生成器插件API](/docs/guides/topic-detail/generator/plugin/api/hook/onForged)。
+`onForged` 中支持的 API 函数也可参考 [生成器插件 API](/docs/guides/topic-detail/generator/plugin/api/hook/onForged)。
 
 ```ts
 context.onForged(async (api: ForgedAPI, input: Record<string, unknown>) => {
-    const { language } = input;
-    api.addFile({
-        type: FileType.Text,
-        file: `src/index.${language as string}`,
-        templateFile: `index.${language as string}.handlebars`,
-        force: true,
-    });
-})
+  const { language } = input;
+  api.addFile({
+    type: FileType.Text,
+    file: `src/index.${language as string}`,
+    templateFile: `index.${language as string}.handlebars`,
+    force: true,
+  });
+});
 ```
 
 ### afterForged
@@ -121,4 +121,4 @@ context.onForged(async (api: ForgedAPI, input: Record<string, unknown>) => {
 
 `input` 为当前用户输入，可用于获取用户当前的输入信息及配置信息。
 
-`afterForged` 中支持的 API 函数也可参考 [生成器插件API](/docs/guides/topic-detail/generator/plugin/api/hook/afterForged)。
+`afterForged` 中支持的 API 函数也可参考 [生成器插件 API](/docs/guides/topic-detail/generator/plugin/api/hook/afterForged)。

package/zh/guides/topic-detail/generator/plugin/use.md

@@ -30,9 +30,9 @@ plugin 参数支持声明多次，代表同时使用多个生成器插件。
 
 ```json
 {
-    "meta": {
-        "extend": "mwa" // 三个工程方案分别对应 mwa、module、 monorepo
-    }
+  "meta": {
+    "extend": "mwa" // 三个工程方案分别对应 mwa、module、 monorepo
+  }
 }
 ```
 
@@ -40,11 +40,11 @@ plugin 参数支持声明多次，代表同时使用多个生成器插件。
 
 ```json
 {
-    "meta": {
-        "key": "new_solution",
-        "name": "新工程方案",
-        "type": "mwa" // 除了三大工程方案，这里类型还支持自定义(custom)类型，后面会详细介绍
-    }
+  "meta": {
+    "key": "new_solution",
+    "name": "新工程方案",
+    "type": "mwa" // 除了三大工程方案，这里类型还支持自定义(custom)类型，后面会详细介绍
+  }
 }
 ```
 

package/zh/guides/topic-detail/generator/project.md

@@ -56,7 +56,7 @@ npx @modern-js/create --config '{"packageManager": "pnpm"}'
 
 具体配置信息可查看[工程方案配置](/docs/guides/topic-detail/generator/config/common)。
 
-###  --no-need-install
+### --no-need-install
 
 默认情况下，`@modern-js/create` 在创建项目完成后会自动安装依赖，使用该参数可以忽略安装依赖步骤。
 

package/zh/guides/topic-detail/micro-frontend/c01-introduction.md

@@ -7,8 +7,8 @@ title: 微前端介绍
 
 它主要解决了两个问题：
 
-* 随着项目迭代应用越来越庞大，难以维护。
-* 跨团队或跨部门协作开发项目导致效率低下的问题。
+- 随着项目迭代应用越来越庞大，难以维护。
+- 跨团队或跨部门协作开发项目导致效率低下的问题。
 
 ## 微前端关键词
 
@@ -19,11 +19,10 @@ title: 微前端介绍
 
 ## 功能简介
 
-* 基于 [Garfish](https://www.garfishjs.org/guide)
-* 生成器支持微前端应用
-* 支持 React 组件式引用微前端子应用
-* 支持 loading
-* 支持主应用线上、子应用线下调试模式
+- 基于 [Garfish](https://www.garfishjs.org/guide)
+- 生成器支持微前端应用
+- 支持 React 组件式引用微前端子应用
+- 支持 loading
+- 支持主应用线上、子应用线下调试模式
 
 可以在 [体验微前端](/docs/guides/topic-detail/micro-frontend/c02-development) 一节学习如何开发微前端主子应用。
-

package/zh/guides/topic-detail/micro-frontend/c02-development.md

@@ -10,7 +10,7 @@ title: 体验微前端
 
 ## 创建应用
 
-在这次的实践中，我们需要创建三个应用，分别为1个主应用，2个子应用：
+在这次的实践中，我们需要创建三个应用，分别为 1 个主应用，2 个子应用：
 
 - main 主应用
 - dashboard 子应用
@@ -46,7 +46,6 @@ import MicroRuntimeConfig from '@site-docs/components/micro-runtime-config.md';
 
 <MicroRuntimeConfig />
 
-
 ### 创建 dashboard 子应用
 
 通过命令行工具初始化项目：
@@ -66,21 +65,22 @@ npx @modern-js/create
 ? 请选择你想要的操作 启用可选功能
 ? 启用可选功能 启用「微前端」模式
 ```
+
 接下来，让我们注册微前端插件并修改 `modern.config.ts`，添加微前端子应用的配置 `deploy.microFrontend`：
 
-```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: {
     router: true,
-    state: true
+    state: true,
   },
   deploy: {
-    microFrontend: true
+    microFrontend: true,
   },
-  plugins: [AppToolPlugin(), GarfishPlugin()],
+  plugins: [appTools(), garfishPlugin()],
 });
 ```
 
@@ -106,19 +106,19 @@ npx @modern-js/create
 
 接下来，让我们注册微前端插件并修改 `modern.config.ts`，添加微前端子应用的配置 `deploy.microFrontend`：
 
-```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: {
     router: true,
-    state: true
+    state: true,
   },
   deploy: {
-    microFrontend: true
+    microFrontend: true,
   },
-  plugins: [AppToolPlugin(), GarfishPlugin()],
+  plugins: [appTools(), garfishPlugin()],
 });
 ```
 
@@ -137,13 +137,13 @@ const App = () => {
   return (
     <div>
       <div>
-        <Link to='/dashboard'>Dashboard</Link> &nbsp;
-        <Link to='/table'>Table</Link>
+        <Link to="/dashboard">Dashboard</Link> &nbsp;
+        <Link to="/table">Table</Link>
       </div>
-      <Route path='/dashboard'>
+      <Route path="/dashboard">
         <DashBoard />
       </Route>
-      <Route path='/table'>
+      <Route path="/table">
         <TableList />
       </Route>
     </div>
@@ -173,9 +173,9 @@ export default () => <div>Table Page</div>;
 
 按顺序在 `main`、 `dashboard`、 `table` 目录执行 `pnpm run dev` 命令启动应用：
 
-- main      - `http://localhost:8080`
+- main - `http://localhost:8080`
 - dashboard - `http://localhost:8081`
-- table     - `http://localhost:8082`
+- table - `http://localhost:8082`
 
 访问主应用地址 `http://localhost:8080`，效果如下：
 
@@ -183,9 +183,6 @@ export default () => <div>Table Page</div>;
 
 在完成了微前端整体开发流程的体验后，你可以进一步了解如何 [开发主应用](./c03-main-app.md)
 
-
 ## 常见问题
 
 自查手册: https://www.garfishjs.org/issues/
-
-