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

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/framework-plugin/hook.md

@@ -12,56 +12,55 @@ sidebar_position: 2
 先以 Pipeline 为例，简单介绍一下 Hook 模型的工作方式。先看一个简单的例子：
 
 ```ts
-import { createPipeline } from '@modern-js/plugin'
+import { createPipeline } from '@modern-js/plugin';
 
 // 1. 创建
-const pipeline = createPipeline<number, number>()
+const pipeline = createPipeline<number, number>();
 
 // 2. 添加函数
 pipeline.use((count, next) => {
-  return next(count + 1)
-})
+  return next(count + 1);
+});
 pipeline.use((count, next) => {
-  return count * 2
-})
+  return count * 2;
+});
 
 // 3. 执行
-pipeline.run(1) // 4
-pipeline.run(5) // 12
+pipeline.run(1); // 4
+pipeline.run(5); // 12
 ```
 
 在这个例子中，创建了一个 `Pipeline<number, number>` 类型的 Pipeline（L3），这意味着运行它的时候，你需要传入一个 `number`，然后你会得到一个 `number`，而这个模型管理的函数的类型是：
 
 ```ts
-(count: number, next: (nextCount: number) => number) => number
+(count: number, next: (nextCount: number) => number) => number;
 ```
 
 这里全是 `number`，是因为我们创建的是 `Pipeline<number, number>` ，如果创建的是 `Pipeline<number, string>` 则运行它入参是 `number`，返回值是 `string`，对应管理的函数的类型会是：
 
 ```ts
-(count: number, next: (nextCount: number) => string) => string
+(count: number, next: (nextCount: number) => string) => string;
 ```
 
-
 创建好 Pipeline 之后，可以通过 `use` 添加函数（L5、L8），需要注意的是，添加的顺序就是他们默认的运行顺序，在这些函数中，你可以对 `count` 进行处理、返回一个值，如果你调用了 `next` 函数，则会运行后面的函数，即如果你添加了三个函数： `A`、`B`、`C`，如果你在 `A` 中调用 `next` 那么就会运行 `B`，同样的，如果你在 `B` 中调用 `next` 那么就会运行 `C`，而在上面的例子中，添加的第一个函数（L5）就运行了 `next`，所以这里就会运行第二个函数（L8），并且运行的返回值就是 第二个函数的返回值，如果在第一个函数中没有调用 `next`，直接返回，例如：
 
 ```ts
-import { createPipeline } from '@modern-js/plugin'
+import { createPipeline } from '@modern-js/plugin';
 
 // 1. 创建
-const pipeline = createPipeline<number, number>()
+const pipeline = createPipeline<number, number>();
 
 // 2. 添加函数
 pipeline.use((count, next) => {
-  return count + 1
-})
+  return count + 1;
+});
 pipeline.use((count, next) => {
-  return count * 2
-})
+  return count * 2;
+});
 
 // 3. 执行
-pipeline.run(1) // 2
-pipeline.run(5) // 6
+pipeline.run(1); // 2
+pipeline.run(5); // 6
 ```
 
 则在运行 Pipeline 的时候就不会运行第二个函数，那么 Pipeline 的运行结果则就是第一个函数的返回值。
@@ -80,12 +79,16 @@ pipeline.run(5) // 6
 当 Pipeline 中没有函数或者所有函数都调用了 `next` 函数，则就需要在运行的时候提供：
 
 ```ts
-pipeline({}, {
+pipeline(
+  {},
+  {
     onLast: () => {
-        // do something
-    }
-})
+      // do something
+    },
+  },
+);
 ```
+
 :::
 
 ### Waterfall
@@ -93,31 +96,31 @@ pipeline({}, {
 这种模型顾名思义，他的特点就是参数的顺序递交，即前面一个函数的返回值，将会成为下一个函数的入参，我们也用一个例子来看一下：
 
 ```ts
-import { createWaterfall } from '@modern-js/plugin'
+import { createWaterfall } from '@modern-js/plugin';
 
 // 1. 创建
-const waterfall = createWaterfall<number>()
+const waterfall = createWaterfall<number>();
 
 // 2. 添加函数
-waterfall.use((count) => {
-  return count + 1
-})
-waterfall.use((count) => {
-  return count * 2
-})
+waterfall.use(count => {
+  return count + 1;
+});
+waterfall.use(count => {
+  return count * 2;
+});
 
 // 3. 执行
-waterfall.run(1) // 4
-waterfall.run(5) // 12
+waterfall.run(1); // 4
+waterfall.run(5); // 12
 ```
 
 这个例子中，创建了一个类型为 `Waterfall<number> `，即这个模型执行的入参和返回值是一样的，这个例子中都是 `number`，而它管理的函数的类型是：
 
 ```ts
-(count: number) => number
+(count: number) => number;
 ```
 
-可能简单看这个例子感觉和上面的 Pipeline 功能一样，那需要注意的是，首先这里 Waterfall 管理的函数没有next 函数作为第二个参数，所以它无法在函数内部通过调用 next 来先运行之后添加的函数，从而修改运行的顺序，其次这里的运行的入参的类型和返回值的类型必须是一样的（而 Pipeline 可以不一样）。
+可能简单看这个例子感觉和上面的 Pipeline 功能一样，那需要注意的是，首先这里 Waterfall 管理的函数没有 next 函数作为第二个参数，所以它无法在函数内部通过调用 next 来先运行之后添加的函数，从而修改运行的顺序，其次这里的运行的入参的类型和返回值的类型必须是一样的（而 Pipeline 可以不一样）。
 
 同样的，在 Waterfall 这个大类中，也提供了 Sync 和 Async 的小类，分别对应 Sync 和 Async 的函数。
 
@@ -126,22 +129,22 @@ waterfall.run(5) // 12
 这种 Hook 模型与上面两种 Hook 模型的区别是，没有那么强的前后参数返回值递交的概念，在这个模型中，每个函数都是基于同样的入参，相对独立运行的，通过一个例子简单看一下：
 
 ```ts
-import { createWorkflow } from '@modern-js/plugin'
+import { createWorkflow } from '@modern-js/plugin';
 
 // 1. 创建
-const workflow = createWorkflow <number, number>()
+const workflow = createWorkflow<number, number>();
 
 // 2. 添加函数
-workflow.use((count) => {
-  return count + 1
-})
-workflow.use((count) => {
-  return count * 2
-})
+workflow.use(count => {
+  return count + 1;
+});
+workflow.use(count => {
+  return count * 2;
+});
 
 // 3. 执行
-workflow.run(1) // [2, 2]
-workflow.run(5) // [6, 10]
+workflow.run(1); // [2, 2]
+workflow.run(5); // [6, 10]
 ```
 
 在这个例子中，添加了两个函数，所以运行的结果就是这两个函数运行的结果形成的一个数组。
@@ -153,15 +156,15 @@ workflow.run(5) // [6, 10]
 <div style={{ width: "100%", overflowX: "scroll" }}>
 <div style={{ width: "150%" }}>
 
-||函数类型|执行顺序|函数参数来源|执行返回值来源|倾向处理的任务类型|函数 TS 类型|
-|-----|-----|-----|-----|----|----|----|
-|Pipeline|Sync|默认执行第一个添加的函数，可以通过 next 调用之后添加的函数|第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数向 next 函数传递的参数|第一个函数的返回值|<ul><li>需要修改初始参数</li><li>需要修改函数执行顺序</li></ul>|`(input: I, next: Next<I, O>) => O`|
-|AsyncPipeline|Sync/Async|默认执行第一个添加的函数，可以通过 next 调用之后添加的函数|第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数向 next 函数传递的参数|第一个函数的返回值|<ul><li>需要修改初始参数</li><li>需要修改函数执行顺序</li></ul>|`(input: I, next: AsyncNext<I, O>) => O ｜ Promise<O>`|
-|WaterFall|Sync|一直顺序执行|第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数的返回值|最后一个函数的返回值|<ul><li>需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>|`(I: I) => I`|
-|AsyncWaterFall|Sync/Async|一直顺序执行|第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数的返回值|最后一个函数的返回值|<ul><li>需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>|`(I: I) => I ｜ Promise<I>`|
-|Workflow|Sync|一直顺序执行|所有函数的入参都是运行的参数|所有函数返回值形成的数组|<ul><li>不需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>|`(I: I) => O`|
-|AsyncWorkflow|Sync/Async|一直顺序执行|所有函数的入参都是运行的参数|所有函数返回值形成的数组|<ul><li>不需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>|`(I: I) => O ｜ Promise<O>`|
-|ParallelWorkFlow|Sync/Async|异步执行|所有函数的入参都是运行的参数|所有函数返回值形成的数组|<ul><li>不需要修改初始参数</li><li>不关心执行顺序</li></ul>|`(I: I) => O ｜ Promise<O>`|
+|                  | 函数类型   | 执行顺序                                                   | 函数参数来源                                                                               | 执行返回值来源           | 倾向处理的任务类型                                                  | 函数 TS 类型                                           |
+| ---------------- | ---------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------ | ------------------------------------------------------------------- | ------------------------------------------------------ |
+| Pipeline         | Sync       | 默认执行第一个添加的函数，可以通过 next 调用之后添加的函数 | 第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数向 next 函数传递的参数 | 第一个函数的返回值       | <ul><li>需要修改初始参数</li><li>需要修改函数执行顺序</li></ul>     | `(input: I, next: Next<I, O>) => O`                    |
+| AsyncPipeline    | Sync/Async | 默认执行第一个添加的函数，可以通过 next 调用之后添加的函数 | 第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数向 next 函数传递的参数 | 第一个函数的返回值       | <ul><li>需要修改初始参数</li><li>需要修改函数执行顺序</li></ul>     | `(input: I, next: AsyncNext<I, O>) => O ｜ Promise<O>` |
+| WaterFall        | Sync       | 一直顺序执行                                               | 第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数的返回值               | 最后一个函数的返回值     | <ul><li>需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>   | `(I: I) => I`                                          |
+| AsyncWaterFall   | Sync/Async | 一直顺序执行                                               | 第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数的返回值               | 最后一个函数的返回值     | <ul><li>需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>   | `(I: I) => I ｜ Promise<I>`                            |
+| Workflow         | Sync       | 一直顺序执行                                               | 所有函数的入参都是运行的参数                                                               | 所有函数返回值形成的数组 | <ul><li>不需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul> | `(I: I) => O`                                          |
+| AsyncWorkflow    | Sync/Async | 一直顺序执行                                               | 所有函数的入参都是运行的参数                                                               | 所有函数返回值形成的数组 | <ul><li>不需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul> | `(I: I) => O ｜ Promise<O>`                            |
+| ParallelWorkFlow | Sync/Async | 异步执行                                                   | 所有函数的入参都是运行的参数                                                               | 所有函数返回值形成的数组 | <ul><li>不需要修改初始参数</li><li>不关心执行顺序</li></ul>         | `(I: I) => O ｜ Promise<O>`                            |
 
 </div>
 </div>

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/framework-plugin/implement.md

@@ -13,7 +13,7 @@ Modern.js 插件是一个对象，对象包含以下属性：
 - `setup`: 插件初始化函数，只会执行一次。setup 函数可以返回一个 Hooks 对象，Modern.js 会在特定的时机执行这些 Hooks。
 
 ```ts
-const MyPlugin = {
+const myPlugin = {
   name: 'my-plugin',
 
   setup() {
@@ -51,7 +51,7 @@ Modern-js 支持多种工程开发，如应用工程(app-tools), 模块工程(mo
 ```ts
 import type { CliPlugin } from '@modern-js/core';
 
-const MyPlugin: CliPlugin = {
+const myPlugin: CliPlugin = {
   name: 'my-plugin',
 
   setup() {
@@ -71,7 +71,7 @@ const MyPlugin: CliPlugin = {
 ```ts
 import type { CliPlugin, AppTools } from '@modern-js/app-tools';
 
-const MyPlugin: CliPlugin<AppTools> = {
+const myPlugin: CliPlugin<AppTools> = {
   name: 'my-plugin',
 
   setup() {
@@ -103,7 +103,7 @@ type AppTools = {
 import type { CliPlugin } from '@modern-js/core';
 import type { MyPluginHook } from 'xxx';
 
-const MyPlugin: CliPlugin<{ hooks: MyPluginHook }> = {};
+const myPlugin: CliPlugin<{ hooks: MyPluginHook }> = {};
 ```
 
 ```ts
@@ -111,7 +111,7 @@ const MyPlugin: CliPlugin<{ hooks: MyPluginHook }> = {};
 import type { CliPlugin, AppTools } from '@modern-js/app-tools';
 import type { MyPluginHook } from 'xxx';
 
-const MyPlugin: CliPlugin<AppTools & { hooks: MyPluginHook }> = {};
+const myPlugin: CliPlugin<AppTools & { hooks: MyPluginHook }> = {};
 ```
 
 详细说明，请参考 [扩展 Hook](/docs/guides/topic-detail/framework-plugin/extend)。
@@ -127,7 +127,7 @@ type MyPluginOptions = {
   foo: string;
 };
 
-const MyPlugin = (options: MyPluginOptions): CliPlugin => ({
+const myPlugin = (options: MyPluginOptions): CliPlugin => ({
   name: 'my-plugin',
 
   setup() {
@@ -183,7 +183,7 @@ export default (): CliPlugin => ({
 
 本地插件推荐写在 `config/plugin` 目录下，并通过 `export default` 导出：
 
-```ts title=config/plugin/MyPlugin.ts
+```ts title=config/plugin/myPlugin.ts
 import type { CliPlugin } from '@modern-js/core';
 
 export default (): CliPlugin => ({
@@ -199,10 +199,10 @@ export default (): CliPlugin => ({
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
-import MyPlugin from './config/plugin/MyPlugin';
+import myPlugin from './config/plugin/myPlugin';
 
 export default defineConfig({
-  plugins: [MyPlugin()],
+  plugins: [myPlugin()],
 });
 ```
 
@@ -237,10 +237,10 @@ export default (): CliPlugin => ({
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
-import MyPlugin from 'my-plugin';
+import myPlugin from 'my-plugin';
 
 export default defineConfig({
-  plugins: [MyPlugin()],
+  plugins: [myPlugin()],
 });
 ```
 

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/framework-plugin/lifecycle.md

@@ -7,7 +7,6 @@ Modern.js application has a complete lifecycle, including CLI, Server Side and R
 
 Modern.js lifecycle is as follows:
 
-
 :::note
 The rectangle of the pink box represents the plugin hook provided by the Modern.js, and the light yellow base color ellipse represents the linkage point with the next stage.
 :::

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/framework-plugin/plugin-api.md

@@ -29,7 +29,7 @@ export default (): CliPlugin => ({
 用于获取应用原始配置。
 
 ```ts
-const useConfigContext: () => UserConfig
+const useConfigContext: () => UserConfig;
 
 interface UserConfig {
   source?: SourceConfig;
@@ -51,7 +51,7 @@ interface UserConfig {
 用于获取应用运行上下文。
 
 ```ts
-const useAppContext: () => IAppContext
+const useAppContext: () => IAppContext;
 
 interface IAppContext {
   appDirectory: string;
@@ -79,7 +79,7 @@ interface IAppContext {
 用于获取解析之后的最终配置。
 
 ```ts
-const useResolvedConfigContext: () => NormalizedConfig
+const useResolvedConfigContext: () => NormalizedConfig;
 
 interface NormalizedConfig {
   source: NormalizedSourceConfig;
@@ -91,7 +91,7 @@ interface NormalizedConfig {
   plugins: PluginConfig;
   runtime: RuntimeConfig;
   runtimeByEntries?: RuntimeByEntriesConfig;
-  _raw: UserConfig
+  _raw: UserConfig;
 }
 ```
 

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/app.md

@@ -8,13 +8,13 @@ The combination encapsulation of APIs commonly used in the development of microg
 
 ## Use
 
-```typescript
+```ts
 import { AppAPI } from '@modern-js/codesmith-api-app';
 
 export default async (context: GeneratorContext, generator: GeneratorCore) => {
   const appApi = new AppAPI(context, generator);
   await appApi.runInstall();
-}
+};
 ```
 
 - Create AppAPI instance, the parameter is the generator of the microgenerator function parameter, please see the composition of the microgenerator project for details.
@@ -50,8 +50,8 @@ This function performs the following actions:
 3. Install dependencies.
 4. Commit the initial commit in a non-monorepo project (judging the condition, `isMonorepoSubProject` does not exist or is false in the config), the commit information is feat: init, and customize is supported.
 
-
 Parameter:
+
 - commitMessage?: `string`, Initialization commit message
 - installFunc?: `() => Promise<void>`. Install dependency function
 
@@ -69,31 +69,31 @@ Parameter:
 
 For example:
 
-```typescript
+```ts
+await appApi.forgeTemplate(
+  'templates/base-templates/**/*',
+  undefined,
+  resourceKey =>
+    resourceKey
+      .replace('templates/base-templates/', '')
+      .replace('.handlebars', ''),
+);
+
 await appApi.forgeTemplate(
-    'templates/base-templates/**/*',
-    undefined,
-    resourceKey =>
-      resourceKey
-        .replace('templates/base-templates/', '')
-        .replace('.handlebars', ''),
-  );
-
- await appApi.forgeTemplate(
-    'templates/base-template/**/*',
-    resourceKey => !resourceKey.include('eslintrc.json'),
-    resourceKey =>
-      resourceKey
-        .replace('templates/base-template/', projectPath)
-        .replace('language', language as string)
-        .replace('.handlebars', ''),
-    {
-      name: packageName as string,
-      language,
-      isTs: language === Language.TS,
-      packageManager: getPackageManagerText(packageManager as any),
-    },
-  );
+  'templates/base-template/**/*',
+  resourceKey => !resourceKey.include('eslintrc.json'),
+  resourceKey =>
+    resourceKey
+      .replace('templates/base-template/', projectPath)
+      .replace('language', language as string)
+      .replace('.handlebars', ''),
+  {
+    name: packageName as string,
+    language,
+    isTs: language === Language.TS,
+    packageManager: getPackageManagerText(packageManager as any),
+  },
+);
 ```
 
 ### showSuccessInfo
@@ -116,12 +116,12 @@ Parameter:
 
 For example:
 
-```typescript
-  await appApi.runSubGenerator(
-    getGeneratorPath('@modern-js/repo-generator', context.config.distTag),
-    undefined,
-    { ...context.config, hasPlugin: false },
-  );
+```ts
+await appApi.runSubGenerator(
+  getGeneratorPath('@modern-js/repo-generator', context.config.distTag),
+  undefined,
+  { ...context.config, hasPlugin: false },
+);
 ```
 
 ### getInputBySchema

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/ejs.md

@@ -8,7 +8,7 @@ An API wrapper for file operations using [ejs] (https://ejs.co/) in microgenerat
 
 ## Use
 
-```typescript
+```ts
 import { EjsAPI } from '@modern-js/codesmith-api-ejs';
 
 export default async (context: GeneratorContext, generator: GeneratorCore) => {
@@ -32,7 +32,7 @@ Render a single template file.
 
 Parameter:
 
-- templateResource: `FsResource`. Template file resource, used by  `context.materials.get(<filename>)`.
+- templateResource: `FsResource`. Template file resource, used by `context.materials.get(<filename>)`.
 - target: `string`. Target file path name.
 - parameters?: `Record<string, string>`. Render parameter.
 
@@ -47,7 +47,7 @@ Parameter:
 - target: `(globMatch: string) => string`. The target file path generation function, the parameter is `resourceKey.`
 - options?: `RenderTemplateDirOptions`. Glob Find the file configuration, the specific function viewable is here [glob] (https://www.npmjs.com/package/glob).
 
-```typescript
+```ts
 type RenderTemplateDirOptions = {
   nodir?: boolean;
   dot?: boolean;

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/fs.md

@@ -8,7 +8,7 @@ API wrapper for file operations in microgenerators, providing methods to render
 
 ## Use
 
-```typescript
+```ts
 import { FsAPI } from '@modern-js/codesmith-api-fs';
 
 export default async (context: GeneratorContext, generator: GeneratorCore) => {
@@ -31,7 +31,7 @@ Render a single template file.
 
 Parameter:
 
-- resource: `FsResource`. Template file resource, used by  `context.materials.get(<filename>)`.
+- resource: `FsResource`. Template file resource, used by `context.materials.get(<filename>)`.
 - target: `string`. Target file path name.
 
 ### renderDir
@@ -45,7 +45,7 @@ Parameter:
 - target: `(globMatch: string) => string`. The target file path generation function, the parameter is `resourceKey.`
 - options?: `RenderTemplateDirOptions`. Glob Find the file configuration, the specific function viewable is here [glob] (https://www.npmjs.com/package/glob).
 
-```typescript
+```ts
 type RenderTemplateDirOptions = {
   nodir?: boolean;
   dot?: boolean;

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/git.md

@@ -8,13 +8,13 @@ The API encapsulation of git-related operations in the micro-generator provides
 
 ## Use
 
-```typescript
+```ts
 import { GitAPI } from '@modern-js/codesmith-api-git';
 
 export default async (context: GeneratorContext, generator: GeneratorCore) => {
   const gitApi = new GitAPI(generatorCore, generatorContext);
   await gitApi.initGitRepo();
-}
+};
 ```
 
 - Create GitAPI instance, the parameter is the generator of the microgenerator function parameter, please see the composition of the microgenerator project for details.
@@ -45,5 +45,6 @@ Parameter:
 Execute `git add .` and `git commit` commit the current changes.
 
 Parameter:
+
 - commitMessage: `string`. Commit information.
 - cwd?: `string`. The execution directory of the git command, the default is microgenerator `outputPath`.

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/handlebars.md

@@ -8,7 +8,7 @@ An API wrapper for file operations using [handlebars] (https://handlebarsjs.com/
 
 ## Use
 
-```typescript
+```ts
 import { HandlebarsAPI } from '@modern-js/codesmith-api-handlebars';
 
 export default async (context: GeneratorContext, generator: GeneratorCore) => {
@@ -25,7 +25,6 @@ export default async (context: GeneratorContext, generator: GeneratorCore) => {
 
 - Just call the API on its example.
 
-
 ## API
 
 ### renderTemplate
@@ -34,7 +33,7 @@ Render a single template file.
 
 Parameter:
 
-- templateResource: `FsResource`. Template file resource, used by  `context.materials.get(<filename>)`.
+- templateResource: `FsResource`. Template file resource, used by `context.materials.get(<filename>)`.
 - target: `string`. Target file path name.
 - parameters?: `Record<string, string>`. Render parameter.
 
@@ -49,7 +48,7 @@ Parameter:
 - target: `(globMatch: string) => string`. The target file path generation function, the parameter is `resourceKey.`
 - options?: `RenderTemplateDirOptions`. Glob Find the file configuration, the specific function viewable is here [glob] (https://www.npmjs.com/package/glob).
 
-```typescript
+```ts
 type RenderTemplateDirOptions = {
   nodir?: boolean;
   dot?: boolean;

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/json.md

@@ -8,29 +8,25 @@ The JSON API encapsulation in the microgenerator provides common JSON file opera
 
 ## Use
 
-```typescript
+```ts
 import { JsonAPI } from '@modern-js/codesmith-api-json';
 
 export default async (context: GeneratorContext, generator: GeneratorCore) => {
   const jsonAPI = new JsonAPI(generator);
-  await jsonAPI.update(
-    context.materials.default.get('package.json'),
-    {
-      query: {},
-      update: {
-        $set: {
-          'dependencies.@modern-js/plugin-bff': `^2.0.0`,
-        },
+  await jsonAPI.update(context.materials.default.get('package.json'), {
+    query: {},
+    update: {
+      $set: {
+        'dependencies.@modern-js/plugin-bff': `^2.0.0`,
       },
     },
-  );
- }
+  });
+};
 ```
 
 - Create JsonAPI instance, the parameter is the generator of the microgenerator function parameter, please see the composition of the microgenerator project for details.
 - Just call the API on its example.
 
-
 ## API
 
 ### get
@@ -38,6 +34,7 @@ export default async (context: GeneratorContext, generator: GeneratorCore) => {
 Get the JSON file content.
 
 Parameter:
+
 - resource: `FsResource`. A file resource，get by `context.materials.default.get(<filename>)`.
 
 ### extend

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/npm.md

@@ -8,20 +8,19 @@ The NPM API encapsulation in the microgenerator provides a common method for ins
 
 ## Use
 
-```typescript
+```ts
 import { NpmAPI } from '@modern-js/codesmith-api-npm';
 
 export default async (context: GeneratorContext, generator: GeneratorCore) => {
   const npmApi = new NpmAPI(generator);
   await npmApi.pnpmInstall();
-}
+};
 ```
 
 - Create NpmAPI instance, the parameter is the generator of the microgenerator function parameter, please see the composition of the microgenerator project for details.
 
 - Just call the API on its example.
 
-
 ## API
 
 ### npmInstall

package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/introduce.md

@@ -16,7 +16,7 @@ Codesmith also encapsulates the commonly used methods, and can directly use the
 
 GeneratorCore is the core of codesmith running generator, maintaining the context and running methods during the execution of the generator.
 
-```typescript
+```ts
 class GeneratorCore {
   logger: ILogger;
   materialsManager: MaterialsManager;
@@ -35,9 +35,10 @@ class GeneratorCore {
 
 The micro-generator resource information currently only includes file resources (fsMaterials). Through this field, the template resources in the generator execution process can be obtained and operated through the API.
 
-```typescript
+```ts
 class MaterialsManager {
-  materialMap: { // 资源映射关系
+  materialMap: {
+    // 资源映射关系
     [materialUri: string]: FsMaterial;
   };
   loadLocalGenerator(generator: string): Promise<FsMaterial>;